ウェブアプリを構成する

ウェブアプリは、Interactive Canvas を使用するアクションのユーザー インターフェース(UI)です。既存のウェブ技術(HTML、CSS、JavaScript、WebAssembly など)を使用して、ウェブアプリの設計と開発を行うことができます。Interactive Canvas は、ほとんどの場合、ブラウザのようなウェブ コンテンツをレンダリングできますが、ユーザーのプライバシーとセキュリティのためにいくつかの制限があります。UI の設計を開始する前に、設計ガイドラインで概説されている設計原則を検討してください。Firebase Hosting を使用してウェブアプリをデプロイすることをおすすめします。

ウェブアプリの HTML と JavaScript では、次のことを行います。

このページでは、ウェブアプリを作成するための推奨方法、会話型アクションとウェブアプリ間の通信を有効にする方法、一般的なガイドラインと制限事項について説明します。

UI は任意の方法で作成できますが、次のライブラリを使用することをおすすめします。

  • Greensock: 複雑なアニメーションを作成する場合。
  • Pixi.js: WebGL で 2D グラフィックを描画する場合。
  • Three.js: WebGL で 3D グラフィックを描画する場合。
  • HTML5 Canvas の描画: シンプルな描画の場合。

アーキテクチャ

シングルページ アプリケーション アーキテクチャを使用することを強くおすすめします。このアプローチにより、最適なパフォーマンスが実現し、継続的な会話のユーザー エクスペリエンスがサポートされます。Interactive Canvas は、状態管理に役立つ VueAngularReact などのフロントエンド フレームワークと組み合わせて使用できます。

HTML ファイル

HTML ファイルで UI の外観を定義します。このファイルは、ウェブアプリと会話型アクションの通信を可能にする Interactive Canvas API も読み込みます。

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>Interactive Canvas Sample</title>

    <!-- Disable favicon requests -->
    <link rel="shortcut icon" type="image/x-icon" href="data:image/x-icon;,">

    <!-- Load Interactive Canvas JavaScript -->
    <script src="https://www.gstatic.com/assistant/interactivecanvas/api/interactive_canvas.min.js"></script>

    <!-- Load PixiJS for graphics rendering -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/4.8.7/pixi.min.js"></script>

    <!-- Load Stats.js for fps monitoring -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/stats.js/r16/Stats.min.js"></script>

    <!-- Load custom CSS -->
    <link rel="stylesheet" href="css/main.css">
  </head>
  <body>
    <div id="view" class="view">
      <div class="debug">
        <div class="stats"></div>
        <div class="logs"></div>
      </div>
    </div>
    <!-- Load custom JavaScript after elements are on page -->
    <script src="js/log.js"></script>
    <script type="module" src="js/main.js"></script>
  </body>
</html>
    

会話型アクションとウェブアプリの間の通信

ウェブアプリと会話型アクションを作成し、ウェブアプリ ファイルで Interactive Canvas ライブラリに読み込んだら、ウェブアプリと会話型アクションのやり取りを定義する必要があります。そのためには、ウェブアプリのロジックを含むファイルを変更します。

action.js

このファイルには、callbacksを定義し、interactiveCanvas を介してメソッドを呼び出すためのコードが含まれています。コールバックにより、ウェブアプリは会話型アクションからの情報またはリクエストに応答できます。メソッドは、会話型アクションに情報やリクエストを送信する方法を提供します。

HTML ファイルに interactiveCanvas.ready(callbacks); を追加し、callbacksを初期化して登録します。

JavaScript

/**
* This class is used as a wrapper for Google Assistant Canvas Action class
* along with its callbacks.
*/
export class Action {
 /**
  * @param  {Phaser.Scene} scene which serves as a container of all visual
  * and audio elements.
  */
 constructor(scene) {
   this.canvas = window.interactiveCanvas;
   this.gameScene = scene;
   const that = this;
   this.intents = {
     GUESS: function(params) {
       that.gameScene.guess(params);
     },
     DEFAULT: function() {
       // do nothing, when no command is found
     },
   };
 }

 /**
  * Register all callbacks used by the Interactive Canvas Action
  * executed during game creation time.
  */
 setCallbacks() {
   const that = this;
   // Declare the Interactive Canvas action callbacks.
   const callbacks = {
     onUpdate(data) {
       const intent = data[0].google.intent;
       that.intents[intent ? intent.name.toUpperCase() : 'DEFAULT'](intent.params);
     },
   };
   // Called by the Interactive Canvas web app once web app has loaded to
   // register callbacks.
   this.canvas.ready(callbacks);
 }
}
    

main.js

main.js JavaScript モジュールは、action.js ファイルと scene.js ファイルをインポートし、ウェブアプリが読み込まれるときにそれぞれのインスタンスを作成します。このモジュールは Interactive Canvas のコールバックも登録します。

JavaScript

import {Action} from './action.js';
import {Scene} from './scene.js';
window.addEventListener('load', () => {
  window.scene = new Scene();
  // Set Google Assistant Canvas Action at scene level
  window.scene.action = new Action(scene);
  // Call setCallbacks to register Interactive Canvas
  window.scene.action.setCallbacks();
});
    

scene.js

scene.js ファイルは、ウェブアプリのシーンを作成します。scene.js からの抜粋を以下に示します。

JavaScript

const view = document.getElementById('view');

// initialize rendering and set correct sizing
this.radio = window.devicePixelRatio;
this.renderer = PIXI.autoDetectRenderer({
  transparent: true,
  antialias: true,
  resolution: this.radio,
  width: view.clientWidth,
  height: view.clientHeight,
});
this.element = this.renderer.view;
this.element.style.width = `${this.renderer.width / this.radio}px`;
this.element.style.height = `${(this.renderer.height / this.radio)}px`;
view.appendChild(this.element);

// center stage and normalize scaling for all resolutions
this.stage = new PIXI.Container();
this.stage.position.set(view.clientWidth / 2, view.clientHeight / 2);
this.stage.scale.set(Math.max(this.renderer.width,
    this.renderer.height) / 1024);

// load a sprite from a svg file
this.sprite = PIXI.Sprite.from('triangle.svg');
this.sprite.anchor.set(0.5);
this.sprite.tint = 0x00FF00; // green
this.sprite.spin = true;
this.stage.addChild(this.sprite);

// toggle spin on touch events of the triangle
this.sprite.interactive = true;
this.sprite.buttonMode = true;
this.sprite.on('pointerdown', () => {
  this.sprite.spin = !this.sprite.spin;
});
    

タッチ操作のサポート

Interactive Canvas アクションは、ユーザーのタップにも声入力にも反応できます。Interactive Canvas の設計ガイドラインに沿って、アクションを「音声ファースト」に開発する必要があります。ただし、一部のスマートディスプレイはタッチ操作に対応しています。

タップのサポートは、会話によるレスポンスのサポートと似ています。ただし、クライアントサイドの JavaScript は、ユーザーからの音声による応答ではなく、タップ操作を検索し、それを使用してウェブアプリの要素を変更します。

この例は、Pixi.js ライブラリを使用するサンプルで確認できます。

JavaScript

…
this.sprite = PIXI.Sprite.from('triangle.svg');
…
this.sprite.interactive = true; // Enables interaction events
this.sprite.buttonMode = true; // Changes `cursor` property to `pointer` for PointerEvent
this.sprite.on('pointerdown', () => {
  this.sprite.spin = !this.sprite.spin;
});
    

トラブルシューティング

Actions Console のシミュレータを使用して、開発中に Interactive Canvas アクションをテストできますが、本番環境ではユーザーのデバイス上の Interactive Canvas ウェブアプリ内で発生するエラーを確認することもできます。これらのエラーは、Google Cloud Platform のログで確認できます。

Google Cloud Platform のログでこれらのエラー メッセージを確認する手順は次のとおりです。

  1. Actions Console で Actions プロジェクトを開きます。
  2. 上部のナビゲーションで [Test](テスト)をクリックします。
  3. [View logs in Google Cloud Platform] リンクをクリックします。

ユーザーのデバイスのエラーは、ログビューアに時系列で表示されます。

エラータイプ

Google Cloud Platform のログでは、次の 3 種類のウェブアプリ エラーを確認できます。

  • ready が 10 秒以内に呼び出されなかった場合にタイムアウトが発生する
  • onUpdate() から返された Promise が 10 秒以内に履行されなかった場合に発生するタイムアウト
  • ウェブアプリ内で捕捉されない JavaScript ランタイム エラー

JavaScript エラーの詳細を表示

デフォルトでは、ウェブアプリ内の JavaScript ランタイム エラーの詳細は確認できません。JavaScript ランタイム エラーの詳細を表示する手順は次のとおりです。

  1. ウェブアプリ ファイルで、適切なクロスオリジン リソース シェアリング(CORS)HTTP レスポンス ヘッダーが構成されていることを確認します。詳細については、クロスオリジン リソース シェアリングをご覧ください。
  2. HTML ファイル内のインポートした <script> タグに crossorigin="anonymous" を追加します。次のコード スニペットをご覧ください。
<script crossorigin="anonymous" src="<SRC>"></script>

ガイドラインと制限事項

ウェブアプリを開発する際は、次のガイドラインと制限事項を考慮してください。

  • Cookie は使用不可
  • ローカル ストレージは使用不可
  • 位置情報は使用不可
  • カメラは使用不可
  • 録音または録画は不可
  • ポップアップは使用不可
  • メモリの上限 200 MB を超えないようにする
  • コンテンツをレンダリングする際にアクション名のヘッダーを考慮します(画面上部を占有します)。
  • 動画へのスタイルの適用は不可
  • 一度に使用できるメディア要素は 1 つのみ
  • ウェブ SQL データベースは使用不可
  • Web Speech APISpeechRecognition インターフェースはサポートされていません。
  • ダークモード設定は適用されません
  • 動画再生はスマートディスプレイでサポートされています。サポートされているメディア コンテナ形式とコーデックの詳細については、Google Nest Hub コーデックをご覧ください。

クロスオリジン リソース シェアリング

Interactive Canvas ウェブアプリは iframe でホストされ、オリジンが null に設定されているため、ウェブサーバーとストレージ リソースに対してクロスオリジン リソース シェアリング(CORS)を有効にする必要があります。このプロセスにより、アセットが null オリジンからのリクエストを受け入れることが可能になります。

次のステップ

ウェブアプリに機能を追加するには、クライアントまたはサーバーサイド フルフィルメントを使用してビルドを続行するをご覧ください。