発行
前回記録したタイムラインのうち、主に描画処理の様子を確認できるフレームチャートの見方を解説します。タイトルの背景画像が描画されるまでに起こっていることを詳しく確認することができます。
メモアプリケーションにルーティングをネストしつつ、メモの編集ページを実装します。メモの選択と編集が一画面で行えるように工夫します。Vue.jsを使うと、コンポーネント単位で見通しよく実装できます。
ビューの一部分を切り出し、部品化するコンポーネントについて解説します。今回はAngularJS 1.5から利用できるようになった、componentメソッドについてです。
発行
CSS Color Module Level4で策定されている、色変換の関数color-mod()について解説します。まずは、CSSで色を指定する方法を理解しましょう。
昨今、パフォーマンスはページロード時の読み込みの速さだけではなく、ユーザー操作時における速度も重要です。そんな計測に役立つChrome DevToolsのタイムライン機能について詳しく解説します。
.vueファイルで置き換えたメモアプリケーションにvue-routerでルーティングを追加します。今回は、最新、新規メモ追加、一覧表示などの各ページをルーティングにマッピングしたのち、それらを作り込んでいきます。
発行
サイトを高速に動作させるための勘所と、具体的な手法について解説します。デザインを構成する要素でサイトの高速化に大きな役割を担う、画像についてです。
前回作成したメモアプリケーションをもとに、最新表示、一覧表示、編集、新規作成など複数ページを持ったアプリを作成します。今回は開発用のローカル環境を整え、vueファイルへの置き換え作業から始めます。
指定テキストを音声再生させることができる、Speech Synthesis APIについて紹介します。音声ファイルなどを用意せずとも手軽に扱えるメリットを活かした利用が考えられます。
発行
普段意識されることが少ないのですが、Webサイトの高速化を考えるとき、デザイナーだからこそできる作業があります。まず、なぜデザイナーが高速化を考える必要があるかを考えてみましょう。
簡単なメモアプリケーションの作成を通して、Vue.jsのコンポーネントの作成と、コンポーネント間のデータの受け渡しや、イベントハンドリングついて解説します。要所、要所で注意すべきポイントが出てきます。
今回の記事では登録されたService Workerの更新と、ブラウザのキャッシュの更新について紹介します。新しいService Workerにいつ切り替わるかかなどにも注意しましょう。