発行
プログラム初心者なら「動けば正義」と前に進むこともできますが、売り物のコードは「動く」のは当たり前。読みやすいコードを心がけるとメンテナンス性や作業効率も上がります。
カルーセルUIに、タッチスクリーンのスワイプ動作を実装します。Touch EventsとPointer Eventsという、タッチ動作を検知する2つの方法のうち、まずはTouch Eventsを実装していきます。
renderを実行するタイミングの制御方法と、確実な画像ロード完了後にrenderを実行する方法を紹介します。これらの細かい制御はPIXI.Rendererならではの機能といえます。
発行
マイクロインタラクションの1つに画面遷移演出があります。別ページへ遷移する際にアニメーションが使われていると、ユーザーを惹きつけ没入感を高める効果が生まれます。
普段、なにげなく実装するUIにも、より使いやすくよりアクセスしやすくなるようにというユーザビリティの観点からだけでなく、法律からの要請が考えられている場合があります。ECサイトの購入ボタンを例に、見てみましょう。
PIXI.Applicationに比べて、細かいところまで制御できるPIXI.Rendererを紹介します。まずはPIXI.Rendererが持つオプションや、PIXI.Applicationとの違いを見てみましょう。
発行
ユーザーインターフェースの操作時に起こる小さな反応は、マイクロインタラクションと呼ばれます。マイクロインタラクションは効果的に使うと、操作感を高める効果があります。ウェブでの基本的な作り方をおさえていきましょう。
前回に引き続き、サンプルにカルーセルUIの機能を実装していきます。JavaScriptでインジケータ部分を作り、CSSでレイアウトを調整し、各種ナビゲーションを完成させます。
Auth0の認証フロー時に取得するIDトークンをURL表示させて、その仕組みを見てみましょう。サービスの仕組みと合わせて、IDトークンの基礎知識もエンジニアとしては押さえておきたいところです。
発行
前回紹介しきれなかったCommander.jsの機能を使って、Commander.jsで作成したアプリケーションをさらに改良してみます。変換元ファイルを複数にする、出力形式を選択できるようにする、コンソール上に変換結果を出力する、などの機能を追加してみましょう。
後編はレスポンシブデザインを実現する技術の話から、そのレスポンシブなサイトを使うユーザーの使いやすさに話は移っていきました。
連載最後となる今回は、TypeScriptによる自作ライブラリ開発時の型定義ファイルの生成・設置方法と、npmにライブラリを公開するまでの方法を紹介します。