発行
後編ではSVGが画像としての特質を持ちながらオブジェクトごとにメタ情報を付与できることに注目。よりインクルーシブなデザインなどSVGのこれからの可能性についてのお話です。
Pixi.JSのフィルター機能を紹介します。まずはPixi.JSに同梱されている6種類のフィルターを見てみましょう。
Vue.jsのプロジェクトをすばやく手軽に構築するためのツール、Vue CLIを紹介します。Vue CLIを使ってプロジェクトを作成するのが間違いないと言い切れるくらいに、よく考えられたツールです。
発行
対応ブラウザ、表示デバイスの多様化の中で、画像形式の選択肢のひとつになったSVG。ゲストにSVGに造詣が深い、株式会社まぼろしのデザイナー松田氏をお迎えして、データをつくるデザイナーと、実装をするエンジニアそれぞれの立場で、今使う、SVGを語ります。
前回に引き続き、JavaScriptで書かれたコードの型定義ファイルを作成していきます。TypeScriptの仕組みを学びながら、残された課題を解決していきましょう。
オプションページに簡単にアクセスできるように、テンプレート編集ボタンから開けるようにします。これには、バックグラウンドページ機能と、バックグラウンドページとコンテンツスクリプトの間で通信を行うメッセージパッシング機能を使います。
発行
TypeScriptでは型定義により得られる多くのメリットがありますが、正確な型を定義すること自体が難しく感じてしまうことがあります。まずはとりあえず実行だけできる状態から始め、ステップを踏みながら型定義ファイルの書き方を学んでみましょう。
効果の違ったいくつかの使い方を持つ余白を、デザイナーの視点から、厳密に取り扱いたい余白とそうでない余白に分けていきます。余白の重要度が区別できるようになると、デザイナーが設置した余白の意図が読み取れるようになります。
複数の表示オブジェクトをグループ化してまとめて移動やフィルター効果を適用できるオブジェクト、さらにスプライトに対して効果的なグループ化ができるオブジェクトを紹介します。
発行
HTML/CSSを実装していて、デザイナーからの「余白」の指示に疑問を感じたことはないでしょうか。このシリーズでは、普段疑問に思いがちな余白について理解を深めます。まずは、余白の効果について分類してみましょう。
PWAを立ち上げる際に表示されるスプラッシュスクリーンの設定について解説します。スプラッシュスクリーンはアプリのブランディングや、起動までのもたつきを感じさせないなどの効果を狙っています。
拡張機能の動作をカスタマイズできる機能を持つ、オプションページを作成します。これを利用して、ユーザーが「商品説明」のテンプレートの登録や編集ができるようにしましょう。