UI改善にキラリと役立つ！ SVGアニメーションの作り方まとめ - ICS MEDIA
SVGアニメーションを用いると、さまざまなサイズのディスプレイで印象的なマイクロインタラクションを実現できます。マイクロインタラクションの導入によってUI改善に役立てているケースもあるでしょう（参考「SVGで始めるマイクロインタラクション入門」）。SVGでアニメーションを実装するには、CSSを使う方法、JavaScriptを使う方法、動画作成ソフトを使う方法等、さまざまなアプローチがあります。 今回は、コーダー、フロントエンドエンジニア、デザイナーの分野別のSVGアニメーションのアプローチ方法を挙げ、その特徴と具体的な実装方法について紹介します。 CSSでSVGアニメーションを実現する方法（コーダー向け） コーダーにオススメするSVGアニメーション実現方法の1つは、CSSプロパティを使う方法です。 SVGはCSSプロパティによってグラフィックの形状を変更できます。たとえば、次のコードでは、
CSSアニメーションで実現！ コピペで使えるマイクロインタラクション - ICS MEDIA
マイクロインタラクションは、ボタンのタップやポップアップの表示、フォーム入力時のアテンションなど、ユーザーの行動やトリガーによって起こるアクションです。単なるアニメーションではなく、ユーザビリティを向上させ、またユーザーに楽しい体験を与えることでWebサイトやサービスの利用を手助けします。 たとえば、FacebookやTwitterの「いいね」ボタンや、タイムラインの更新、新しい通知がある場合のアラートの表示など、さまざまなケースで使用されています。しかし、多様なマイクロインタラクションを一から自作するのは大変手間がかかるものです。 本記事ではコピー&ペーストで導入でき、改変もしやすいCSSで表現したマイクロインタラクションを紹介します。こちらは筆者が制作したもので、商用・個人問わず無償利用できるMITライセンスで公開していますので、Webサイトやコンテンツ制作にご活用ください。 「メニュ
どんな背景でも自由に描ける! CSS Paint APIの使い方 - ICS MEDIA
最近のChromeにはCSSの新機能が次々と搭載されています。2017年にはCSS Grid Layoutなどインパクトの大きい新機能が話題になりましたが、他にも有用な新機能があることをご存じでしょうか？ この記事では、CSS Paint APIを紹介します。 CSS Paint APIはグラフィックを描く機能 CSS Paint APIは自由にグラフィックを描ける仕様です。HTML Canvasのようなものを要素の背景画像（background-imageやborder-image）として設定できます。JavaScriptを使って自由にグラフィックを描けるため、従来のCSSで再現の難しかった表現が実現可能になります。 たとえば、次のようなビジュアルを考えてみましょう。四隅の形状が欠けたような表現となっています。従来のCSSではdivタグを複雑に組む必要がありました。 サンプルを別ウインド
360度カメラ「RICOH THETA」のプラグインストアがオープン、GitHubでのソースコード公開など発表会レポ
Home » 360度カメラ「RICOH THETA」のプラグインストアがオープン、GitHubでのソースコード公開など発表会レポ 360度カメラ「RICOH THETA」のプラグインストアがオープン、GitHubでのソースコード公開など発表会レポ 株式会社リコーは、360度カメラ「RICOH THETA V」用のプラグインをダウンロードできる「RICOH THETA プラグインストア」をオープンしました。ストアローンチのプラグインとしてリコー製を含む8個のプラグインが公開されました。 （「RICOH THETA プラグインストア」は外部パートナーが開発したプラグインも公開されている） （プラグインはPC経由でののダウンロードとなる） ソニーMESHやNTTドコモなどが独自のプラグインを開発 今回全8つのプラグインが公開されました。日本企業ではNTTドコモとソニー、そしてリコーがプラグイン
noteのフロントエンドをNuxt.jsへ刷新します｜こんぴゅ｜note
webサービスのUXを向上させるために、表示速度は非常に大切です。 しかしながら、noteはリリース当初からフロントエンドの実行速度が遅い=表示が遅いという構造的な問題を抱えており、継続率や離脱率など重要指標に悪影響を及ぼすリスクが強くありました。 noteチームはnoteを本格的なメディアプラットフォームへ成長させるスピードを加速していきます。それを踏まえ、手遅れになる前に技術的な負債を解消し、最新のベストプラクティスに沿ったフレームワークに移行することで、高性能なサービスを提供する基盤を作っていくという決断をしました。 本ポストでは、移行プロジェクトの技術的背景や移行手順を説明します。また、途中成果のデモをUPしているのでご紹介します。 技術的な背景noteの現在のフロントエンドはAngular.js 1系で構築されたSPAです。Angular 1系はかなり複雑なUIでも簡単に構築でき
文章の「自動要約ツール」、ユーザーローカルが無償提供
ユーザーローカルは7月24日、入力した文章から重要部分を取り出して要約する「ユーザーローカル自動要約ツール」を公開した。Webサイト上で無償利用できる。 入力フォームにテキストを貼り付けるか、テキストファイルをアップロードすると、文章構造を分析して特徴語（特徴的な言葉を機械的に抽出した単語）や重要文を自動抽出するツール。重要な文章をマーキングやヒートマップ、モノクロ強調で視覚的に捉えられる強調表示にも対応する。 要約文は「3行ダイジェスト」「5行ダイジェスト」「10行ダイジェスト」といった分量調整もできる。 重要文の抽出には、重要単語を多く含み、他の文に類似度が高い文を抽出するアルゴリズム「LexRank」を活用した。 ツールが公開されているWebページには、ニュース配信各社から引用したニュース本文の要約をダイジェストとしてランキング表示している。 同社は「インターネット上には、日々ニュー
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
