3分でつくるGoogle Home自作アプリ

我が家で大活躍中のGoogle Home。もっと活躍してもらうために自作アプリを開発することにしました。調べてみると**Actions on Googleのテンプレート**を使うと簡単に自作アプリが開発できるようなのでさっそくつくってみました。

| 用語 | 説明 |
|:-----------------|:----------------------------|
| Googleアシスタント | Googleが開発したAIアシスタント |
| Google Home| Googleアシスタントが搭載されたスマートスピーカー |
| Actions on Google | Googleアシスタント用のアプリケーションを作成するためのプラットフォーム |
| テンプレート | Actions on Google上で簡単にアプリケーションが作れる雛形 |

# 3分で自作アプリをつくる手順
まずは`Actions on Google`のWebページにいきます。

[Actions on Google](https://console.actions.google.com/u/0/)

![スクリーンショット 2018-03-29 21.47.27.png](https://qiita-image-store.s3.amazonaws.com/0/55366/e97f943a-bfda-0c5c-a8d4-921bfbac2a3b.png)

`Add/import project`を選択します。
<br>

![スクリーンショット 2018-03-29 21.50.29.png](https://qiita-image-store.s3.amazonaws.com/0/55366/47495dac-fcf6-36ac-97c1-dff95f8af22b.png)
テンプレートは3種類用意されているようです。

- Trivia：雑学アプリ
- Personality Quiz：個人的なクイズアプリ
- Flash Cards：記憶力アプリ

今回は雑学アプリをつくるので、テンプレートの中から、`Trivia` -> `BUILD`を選択します。
<br>

![スクリーンショット 2018-03-29 21.56.34.png](https://qiita-image-store.s3.amazonaws.com/0/55366/f2595ece-6abf-559e-f79d-e7c397457ada.png)
以下情報を入力し、`CREATE PROJECT`を選択します。

- Project name：アプリの名前
- Country/region：Japan

<br>

![スクリーンショット 2018-03-29 21.57.37.png](https://qiita-image-store.s3.amazonaws.com/0/55366/6e226778-bc39-e8b3-4dae-f3a8d87ca113.png)
アプリがサポートする言語を設定します。初期では`English`となっているので、赤枠箇所を選択し、これを日本語に変更します。
<br>

![スクリーンショット 2018-03-29 21.57.54.png](https://qiita-image-store.s3.amazonaws.com/0/55366/8ec3324f-6772-1a8e-c691-d9945093f70a.png)
`Add/remove languages`を選択します。
<br>

![スクリーンショット 2018-03-29 21.58.00.png](https://qiita-image-store.s3.amazonaws.com/0/55366/6de4b10a-22d6-c2e4-bd5a-adc630231526.png)
`Japanese`にチェックを入れ、`UPDATE`を選択します。これでアプリがサポートする言語の設定完了です。
<br>

![スクリーンショット 2018-03-29 21.58.14.png](https://qiita-image-store.s3.amazonaws.com/0/55366/59201243-37cd-2b10-cc02-6d661598b777.png)
続いて、アプリのパーソナリティ（個性）を選択します。テンプレートではあらかじめロボットのパーソナリティが用意されているのでそれを使います。

`NEXT`を選択します。
<br>

![スクリーンショット 2018-03-29 21.58.30.png](https://qiita-image-store.s3.amazonaws.com/0/55366/c0adfb16-1013-2bb7-2248-2131f487a6f9.png)
次は、赤枠箇所を選択し、雑学アプリの雑学の内容を設定していきます。
<br>

![スクリーンショット 2018-03-29 21.58.34.png](https://qiita-image-store.s3.amazonaws.com/0/55366/554632e0-7012-5b3e-69fe-efc05c57e76a.png)
雑学の内容はGoogleスプレッドシートを用いて設定します。赤枠のリンクを選択し、あらかじめ用意されている雛形を使います。
<br>

![スクリーンショット 2018-03-29 21.58.48.png](https://qiita-image-store.s3.amazonaws.com/0/55366/1d0866a8-93f4-eb9a-6568-54dc2d248c5a.png)
`コピーを作成`を選択します。
<br>

![スクリーンショット 2018-03-29 23.08.36.png](https://qiita-image-store.s3.amazonaws.com/0/55366/9552d0f2-e2c7-77f7-bb17-d6606992c973.png)
実際の雑学の内容が書かれたGoogleスプレッドシートがこちら。**意外とシンプルなレイアウトでびっくり。**テンプレートではこんな感じでアプリの設計を行うんですね。雑学内容がいくつか書かれていますね。雑学内容はお好みで変更しましょう。

このGoogleスプレッドシートを取り込むために、シートのURLが必要になるのでメモしておきましょう。
<br>

![スクリーンショット 2018-03-29 21.59.38.png](https://qiita-image-store.s3.amazonaws.com/0/55366/99957026-16c3-0837-3fef-74354fe90550.png)
さきほどメモしておいたGoogleスプレッドシートのURLを入力し、`UPLOAD`を選択します。
<br>

![スクリーンショット 2018-03-29 21.59.49.png](https://qiita-image-store.s3.amazonaws.com/0/55366/a7ecb9a6-766f-05cf-f87c-31b85af33fa6.png)
`CREATE APP`を選択するとGoogle Homeの自作雑学アプリの完成です！
<br>

![スクリーンショット 2018-03-29 22.00.29.png](https://qiita-image-store.s3.amazonaws.com/0/55366/063939a2-f23d-cc9e-d7eb-c42c771876ac.png)
`TEST APP`を選択し、つくった雑学アプリを動かしてみます。
<br>

![スクリーンショット 2018-03-29 23.37.53.png](https://qiita-image-store.s3.amazonaws.com/0/55366/43a3ead1-a3ba-ee17-6512-96f6f960e316.png)
動かし方は2つです。

1. Google Homeに「テスト用アプリにつないで」と話しかける
2. 画面下のマイクマークを選択し、PCに向かって「テスト用アプリにつないで」と話しかける

呼びかけ方（テスト用アプリにつないで）を自由に設定するためにはアプリをリリースする or テンプレート以外の方法でアプリを開発するのでしょうか。このあたりはまだよくわかっていません。

# 完成したものがこちら
<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">Google Homeの自作アプリ簡単につくれた！ <a href="https://t.co/tZMQlkHNus">pic.twitter.com/tZMQlkHNus</a></p>&mdash; だいぱんまん (@donchan922) <a href="https://twitter.com/donchan922/status/979346182618062848?ref_src=twsrc%5Etfw">2018年3月29日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

# まとめ
こんな簡単にGoogle Homeのアプリって開発できるんですね。次はテンプレートではなく、自由度高く開発できる`Dialogflow`というものを使ってアプリ開発してみようと思います。

# 関連リンク
- [Google アシスタントの拡張  |  Actions on Google  |  Google Developers](https://developers.google.com/actions/extending-the-assistant)