この記事は Leon Nicholls による Google Developers - Medium の記事 "Optimize your web apps for Interactive Canvas " を元に翻訳・加筆したものです。詳しくは元記事をご覧ください。 Interactive Canvas を使って Google アシスタント用の Action を作成すると、最高の会話型インターフェースと HTML の豊かな視覚表現を組み合わせることができます。
設計
Interactive Canvas を使う Action は、会話型 Action です。ゲームの設計は、Interactive Canvas による視覚表現を使ってどのように音声ユーザー インターフェースを補完できるかを考えるところから始める必要があります。Action の会話を設計する着手点として、設計ガイドライン をご確認ください。制限 があることも考慮しなければなりません。たとえば、ローカル ストレージは使えず、メモリは 200 MB の制限を超えてはいけません。Interactive Canvas Action
ローディング ページ
ウェブページが完全に読み込まれてアニメーション本体が表示されるまでの間は、ローディング ページを表示することをお勧めします。これにより、アニメーションのパフォーマンスに大きな違いが出るだけでなく、ページ アセットの読み込み中に起きがちなレイアウトの問題を避けることもできます。CSS ローダー をご覧ください。
レスポンシブ デザイン
現在のところ、Interactive Canvas は Google アシスタント スマート ディスプレイと Android モバイル端末でサポートされています。これらの端末は画面解像度が異なり、ランドスケープ モード（横向き）とポートレート モード（縦向き）の両方をサポートしている可能性もあります。Sass ブレークポイントを使います。@mixin for-small-display-landscape {
@media screen and (min-width: 1024px) and (min-height: 600px) {
@content ;
}
}@mixin for-medium-display-landscape {
@media screen and (min-width: 1280px) and (min-height: 700px) {
@content ;
}
}getHeaderHeightPx() API が提供されています。この値を使うと、ウェブアプリが読み込まれた際にレイアウトを動的に調整することができます。window.onload = () => {
const callbacks = {
onUpdate(data) {
// update game state based on intent response data
},
}
interactiveCanvas.ready(callbacks)
interactiveCanvas.getHeaderHeightPx().then((height) => {
// initialize web app layout with header height value
})
}
アニメーション
HTML では、DOM の操作、CSS アニメーション、HTML キャンバス、WebGL など、さまざまな方法でアニメーションを行うことができます。
CSS
JavaScript で DOM を操作する代わりに、CSS アニメーション を使うことを検討します。ブラウザは GPU を使ってこの種のアニメーションを高速化できるだけでなく、メイン UI スレッドとは別にアニメーションを管理することもできます。animate.css などの CSS ライブラリを利用できます。こういったライブラリには、さまざまな高品質アニメーションに利用できる CSS クラスが含まれています。このようなアニメーションを使う場合、まず、要素と必要な CSS アニメーション プロパティを宣言します。.title {
animation-duration: 3s;
animation-delay: 2s;
animation-iteration-count: infinite;
}
その後、アニメーション クラスを HTML 要素とともに静的に宣言するか、JavaScript を使ってアニメーション クラスを動的に呼び出します。const element = document.querySelector('.title');
element.classList.add('animated', 'bounceInUp');
element.style.visibility = 'visible';
element.addEventListener('animationend', () => {
element.style.visibility = 'hidden';
});
アニメーションの同時実行は避け、前のアニメーションの終了イベントで次のアニメーションを呼び出して連続したアニメーションを行うことをお勧めします。Web Animations API の利用も検討できます。これを使うと、CSS による最適なパフォーマンスと JavaScript の動的機能を両立させることができます。
SVG
SVG を使うと、JavaScript や CSS を通して動的に操作できる 2 次元ベクター グラフィックを作成できます。<animate> タグをサポートしています。基本的なアニメーションなら、Canvas 端末で非常にスムーズに動作します。<path> にはクラスを割り当てることができ、そのクラスと CSS アニメーション を使ってアニメーションさせることができます。この方式のアニメーションも、端末でスムーズにレンダリングされます。
WebGL
WebGL は、端末の GPU を使ってウェブページのアニメーションのパフォーマンスを大幅に改善します。WebGL を使った経験がない方は、PixiJS などのさまざまなライブラリを使うことができます。こういったライブラリは、使いやすい高レベルの JavaScript API を提供しており、WebGL でレンダリングされるアニメーションをデザインできます。PixiAnimate 拡張機能を使ってコンテンツをエクスポートし、PixiJS ラインタイム ライブラリで再生することができます。Canvas ウェブアプリでは、Pixi Animate プラグイン を使ってエクスポートしたアニメーションを読み込むことができます。読み込んだアニメーションは、JavaScript のコードで制御できます。図形の色を変えるなど、動的に外見を変えることもできます。
WebAssembly
他の言語で書かれた既存のコードがあるデベロッパーの方には、WebAssembly （WASM）はおもしろい選択肢です。たとえば、C や C++ で書かれた既存のゲームがある場合、Emscripten などのツールチェーンを使って WebAssembly にコンパイルできます。Canvas ウェブアプリは、WASM コードを読み込んでインスタンス化することが可能です。すると、JavaScript のロジックから WASM の機能を呼び出せるようになります。Rust to WASM をコンパイルしてみたところ、60 FPS の非常にスムーズなアニメーションを実現できました。
動画
ゲームで動画アセットを使うと、高度な視覚表現を効果的に表示し、カットシーン のような魅力的な場面を作ることができます。Media Source Extensions （MSE）を使う必要があります。これによってメディア要素が拡張され、JavaScript で再生用のメディア ストリームを生成できるようになります。MSE を使うと、HTML5 の video タグのバッファに直接メディアのセグメントを渡すことができます。動画が永久にループし続け、ループ間で遅延が発生しないことを保証するには、JavaScript のコードを使って動画データのダウンロードとバッファリングを行う必要があります。
状態管理
ウェブアプリは、Interactive Canvas の sendTextQuery() API を使って Dialogflow エージェントのインテントを呼び出し、その状態をフルフィルメント ロジックと同期させます。この呼び出しはユーザーの音声応答と同じライフサイクルに従います。バックエンドに永続化する際の遅延を追加することもできます。Cloud Firestore などの永続化 API を呼び出すことができます。
テスト
Chrome DevTools を使ってウェブアプリのパフォーマンスとメモリ使用量をプロファイリングすることをお勧めします。PC のシミュレータ で Action をテストする場合は、ウェブアプリを埋め込むために使われている iframe を探し、DevTools を使ってウェブアプリの DOM を調査します。stats.js もお勧めです。
次のステップ
Interactive Canvas で開発するゲームの種類によっては、さまざまな方法でスムーズなアニメーションや効果を実現できます。多少のテストとプロファイリングは必要になりますが、迫力のある楽しい Interactive Canvas ゲームを実現できるはずです。意見や質問を共有したい方は、 /r/GoogleAssistantDev から Reddit に参加してください。私たちのチームの詳しい最新情報を受け取るには、Twitter で @ActionsOnGoogle をフォローします。#AoGDevs を付けてツイートし、皆さんが作っているものについて教えてください。 Chiko Shimizu - Developer Relations Team