Googleスマートホームアプリの作成方法

# 1. はじめに

---

## 参考文献
今回のGoogleスマートホームアプリの作り方は、以下のサイトを参考に、2018年8月時点の開発環境にアレンジし、まとめたものとなります。

- [Googleアシスタントを使ったスマートホーム連携](https://docs.google.com/document/d/1WR8zTadFaiYHkE-yyuLodQU8k8QgzaRgMRM9tk6yncU/edit#)
 
---

## 参考サイト

- [Googleアシスタントを使ったスマートホーム連携アプリケーションをAoGで作るハンズオン](https://qiita.com/soundTricker/items/df71d30e241a8e3cbd4c)
 
- [Smart Home "Overview"の日本語訳](https://www.eisbahn.jp/yoichiro/2018/03/actions_on_google_smart_home_1.html)
 
- [Smart Home "Overview"の原文](https://developers.google.com/actions/smarthome/)
 
---

## このスライドを見てできること
- Googleスマートホームアプリの作り方が理解できる。
- ブラウザ上の仮想家電を声で操作するこることができる。
- スマートフォンアプリのGoogleアシスタントから家電操作する方法が理解できる。

---

## 今回作成するGoogleスマートホームアプリ

- アプリ名：[test]テスト用アプリ

```text:トークシナリオ
ユーザー：「テストランプをつけて」
Googleアシスタント：「はい。テストランプをオンにします。」

ユーザー：「テストランプを赤くして」
Googleアシスタント：「はい。テストランプの色を変えます。」

ユーザー：「テストランプの明るさを50%にして」
Googleアシスタント：「分かりました。テストランプの明るさを50パーセントに設定します。」

ユーザー：「テストランプを消して」
Googleアシスタント：「はい。テストランプをオフにします。」

```

---

## 注意事項
- 今回作成するGoogleスマートホームアプリでは、ブラウザ上に表示される『仮想の家電』に対し、Googleアシスタント／GoogleHomeから音声操作をおこないます。
- Googleアシスタント／GoogleHomeから利用するGoogleアカウントと、開発で利用するGoogleアカウントは『同じ』アカウントをお使いいただくと、動作確認がスムーズにおこなえます。
- あくまで『サンプルアプリ』であることを、あらかじめご理解のうえ、お試しください。

---

# 2. 事前準備・開発環境

---

## 事前準備

- Googleアカウントの用意

---

## 必要なソフトウェア

- ブラウザ：Google Chrome（推奨）
- エディタ：Visual Studio Code（推奨）
- エディタ：サクラエディタ（でもよいよ）

---

## 必要な開発環境

- インターネット（Wi-Fi ／ 有線LAN）
- Linuxコマンドが利用できるパソコン環境（Raspberry Pi、Ubuntu、Mac OS X）
- Windows 10 をお使いの方は、次ページ「Windows 10 をお使いの方へ」をご確認ください。

---

## Windows 10 をお使いの方へ

- Windows 10 開発環境をお使いの場合、Linuxコマンドを実行できるよう設定が必要です。
- まだ設定されてない方は、こちらのページ（[http://www.atmarkit.co.jp/ait/articles/1608/08/news039.html](http://www.atmarkit.co.jp/ait/articles/1608/08/news039.html)）の手順を参考に、Linuxコマンドを利用できるように設定してください。

---

# 3. アカウントの用意

---

## Googleアカウントの用意

- ふだんGoogleメールを使われている方は、そのアカウントでOKです。
- アカウントをお持ちでない方は、こちらのページ（[https://support.google.com/accounts/answer/27441?hl=ja](https://support.google.com/accounts/answer/27441?hl=ja)）の手順を参考に、作成してください。

---

# 4. Actions on Google

---

## Actions on Google ログイン

1. 「Actions on Google」（ https://console.actions.google.com/ ）サインイン画面を開く。
2. Googleアカウントを用いて、Actions on Google にサインインする。
![1.png](https://qiita-image-store.s3.amazonaws.com/0/240522/cac88573-47f9-5601-f497-fc67609c1c1f.png)

---

## Actions on Google プロジェクトの作成

- 「Add/import project」を、クリックする。
![2.png](https://qiita-image-store.s3.amazonaws.com/0/240522/7aae2ebd-8abd-6b6c-053e-d2736a0adc0b.png)

---

## Actions on Google プロジェクトの作成

1. プロジェクト名（任意名）「SmartHomeSample2」を、入力する。
2. 言語「Japanese」を、選択する。
3. リージョン「Japan」を、選択する。
4. 「CREATE PROJECT」ボタンを、クリックする。
![3.png](https://qiita-image-store.s3.amazonaws.com/0/240522/76d5a7d9-057f-71b0-5bf5-7a165cf47ebc.png)

---

## プロジェクトの確認

- プロジェクトが作成されたことを、確認する。（この画面になればOKです。）
- Actions on Google プロジェクトを作成すると、Google Cloud Platform側にもプロジェクト内容が反映されます。
![4.png](https://qiita-image-store.s3.amazonaws.com/0/240522/b07f5ebc-706e-7e08-d212-7339d1d3ea56.png)

---

# 5. Google Cloud Platform（GCP）

---

## API Managerを開く

1.「Google Cloud Platform」の「Cloud Console」を利用し、「API Manager」（ https://console.developers.google.com/apis ）画面を開く。
2.画面上部を確認し、当該「プロジェクト名」が表示されていることを確認する。
![6.png](https://qiita-image-store.s3.amazonaws.com/0/240522/35aed747-33bb-1343-0da9-4f217d4eb150.png)

---

## プロジェクトの変更方法

- もしも当該プロジェクトが選択されていなかった場合は、以下をおこな。

1.「プロジェクト名」をクリック。
2. ポップアップ表示されたウィンドウの「すべて」を選択する。
3. 当該「プロジェクト名」を選択する。
4. 「開く」をクリックし、プロジェクトを変更する。
![7.png](https://qiita-image-store.s3.amazonaws.com/0/240522/d10311d5-3e29-b061-5c7a-8351c223d03e.png)

---

## APIとサービスの有効化

- 画面上部の「APIとサービスの有効化」を、クリックする。
![8.png](https://qiita-image-store.s3.amazonaws.com/0/240522/f8afc188-6c40-abdc-2377-23f939ebe733.png)

---

## APIとサービスを検索

- 検索キーワードに、「HomeGraph」を入力する。
![9.png](https://qiita-image-store.s3.amazonaws.com/0/240522/2accaa5b-eb05-8f85-8859-d7e0916e776c.png)

---

## APIとサービスを検索

- 検索結果の「HomeGraph API」を、クリックする。
![10.png](https://qiita-image-store.s3.amazonaws.com/0/240522/f362f179-41c8-c585-6a92-56d1cfa7edec.png)

---

## HomeGraph API を有効化

- 「有効にする」をクリックし、HomeGraph APIを有効化する。
![11.png](https://qiita-image-store.s3.amazonaws.com/0/240522/e531c896-13c0-225d-6232-bc49f79013a5.png)

---

## API Manager（APIキー）

- API Managerの画面の「認証情報」タブで、「認証情報を作成」をドロップダウンし、「APIキー」を選択しクリックする。
![12.png](https://qiita-image-store.s3.amazonaws.com/0/240522/83c5192c-e0d5-4504-268c-b7353e30fa99.png)

---

## APIキーをメモする

1. 画面上に「APIキー」が表示されるので、忘れないようメモしておくこと。（後でAPIキーを利用します。）
2. 「閉じる」を、クリックする。
![13.png](https://qiita-image-store.s3.amazonaws.com/0/240522/7f9eeb9e-542b-44f9-7d5b-c1029df758ff.png)

---

## API Manager（サービスアカウントキー）

- API Managerの画面の「認証情報」タブで、「認証情報を作成」をドロップダウンし、「サービスアカウントキー」を選択しクリックする。
![14.png](https://qiita-image-store.s3.amazonaws.com/0/240522/b72ddec6-8965-f065-ba24-601ab3496fd9.png)

---

## サービスアカウントキーJSONの保存

1. サービスアカウントに「App Engine default service account」を選択する。
2. キーのタイプに「JSON」を選択する。
3. 「作成」ボタンをクリックし、JSONファイルをダウンロード保存する。
![15.png](https://qiita-image-store.s3.amazonaws.com/0/240522/0a2e1f87-a4f2-f48a-7d27-b8b2f34778bd.png)

---

## サービスアカウントキーJSONの確認

- ローカルPCのダウンロードフォルダを確認し、「サービスアカウントキー.JSON」ファイルが保存されていることを確認する。
![16.png](https://qiita-image-store.s3.amazonaws.com/0/240522/46d89db2-dd4a-f790-caf8-e6d5cac419ab.png)

---

## JSONのリネーム

- ダウンロードした「サービスアカウントキー.JSON」のファイル名を、「jwt-key.json」にリネームする。
![17.png](https://qiita-image-store.s3.amazonaws.com/0/240522/9da0c159-b549-6d2e-bb52-755928abc363.png)

---

# 6. ローカルサーバのセットアップ（Linuxコマンド）

---

## ローカルサーバのセットアップ

```plaintext:セットアップコマンド
サンプルコードを git clone（サイトから直接ダウンロードでもOKです）
$ git clone https://github.com/actions-on-google/actionssdk-smart-home-nodejs

git cloneしたフォルダ内に移動
$ cd actionssdk-smart-home-nodejs/

ダウンロードしたサンプルのcloudフォルダに移動
$ cd smart-home-provider/cloud/

任意のテキストエディタでconfig-provider.jsファイルを開く
（viコマンドを知らない方はGUIのテキストエディタで開いてください）
$ vi config-provider.js

```

---

## config-provider.jsファイルの編集

- config-provider.jsファイル内の「\<API_KEY>」と書かれた部分を削除し、先ほどメモした「APIキー」の文字列に書きかえる。
![20.png](https://qiita-image-store.s3.amazonaws.com/0/240522/f31afbd4-126b-4928-aabb-cf8c434703b9.png)

---

## config-provider.jsファイルの保存

- config-provider.jsファイルの編集後、ファイルを保存する。
![19.png](https://qiita-image-store.s3.amazonaws.com/0/240522/f8833fb2-f547-b0ab-7629-9a6affb66500.png)

---

## jwt-key.jsonファイルの配置

- 先ほどダウンロードした「jwt-key.json」ファイル を、cloudフォルダ内に保存する。（重要）

```plaintext:保存の確認コマンド
cloudフォルダ内に「jwt-key.json」ファイルがあることを確認する
$ ls
auth-provider.js    datastore.js  smart-home-provider-cloud.js
config-provider.js  jwt-key.json

```

---

## セットアップ（つづき）

```plaintext:セットアップコマンド
git cloneしたフォルダ内に移動
$ cd actionssdk-smart-home-nodejs/

frontendフォルダに移動
$ cd smart-home-provider/frontend/

仮想スマートデバイスを動かすローカルサーバを構築
$ npm install -g bower
$ bower install
$ cd ../
$ npm install

※ npm install コマンドで、WARNログが出力されると思いますが、おそらくそのままでもOKだと思います。（各人の環境に合わせてご判断＆ご対応ください。）

```

---

## ローカルサーバの起動

- npm start コマンドを実行するとローカルサーバ（ngrok）が起動しますので、起動状態のままにしておいてください。このプログラムを停止するとサーバが停止します。

```plaintext:ローカルサーバ起動コマンド
git cloneしたフォルダ内に移動
$ cd actionssdk-smart-home-nodejs/

frontendフォルダに移動
$ cd smart-home-provider/frontend/

smart-home-providerに移動
$ cd ../

仮想スマートデバイスを動かすローカルサーバを起動
$ npm start

```

---

## ローカルサーバの情報確認

- サーバ情報はメモしておいてください。
- URLは npm start コマンド実行する度に変更され、コマンドを停止すると破棄されます。
![21.png](https://qiita-image-store.s3.amazonaws.com/0/240522/a79421f9-39c3-4d41-46b9-be6bc6436116.png)

---

## ローカルサーバの情報確認

- サーバ起動ログを、上にさかのぼります。
- 「クライアントID」と「クライアントシークレット」をメモしておいてください。
![22.png](https://qiita-image-store.s3.amazonaws.com/0/240522/bc2bf774-b117-74f9-6455-a9574910d868.png)

---

# 7. Actions on Google つづき

---

## アクションの作成

1. メニューから「Actions」を、クリックする。
2. 「ADD YOUR FIRST ACTION」を、クリックする。
![23.png](https://qiita-image-store.s3.amazonaws.com/0/240522/b5e55d20-45a8-a3c0-0d09-f29cb317cc6e.png)

---

## Home automation のビルド

1. 下にスクロールする。
2. メニューから「Home automation」を、クリックする。
3. 「BUILD」を、クリックする。
![24.png](https://qiita-image-store.s3.amazonaws.com/0/240522/e5aa93fb-a47e-1451-9860-568994969aa5.png)

---

## フルフィルメントURLの登録

1. fulfillment URLに、先ほどメモした「スマートホーム用」URLを設定する。
2. 「DONE」を、クリックする。

※もしサーバを再起動した場合、都度URLが変わりますので、再設定してください。
![25.png](https://qiita-image-store.s3.amazonaws.com/0/240522/c5c95458-16d4-dd16-ddd3-26ba746bc8dd.png)

---

## アカウントリンク の設定

1. メニューから「Account linking」を、クリックする。
1. 「NEXT」を、クリックする。
![26.png](https://qiita-image-store.s3.amazonaws.com/0/240522/7a551dd2-567c-4ca1-7c03-278492419641.png)

---

## リンキングタイプの設定

1. Linking typeに、「OAuth」と「Authorization code」を設定する。
2. 「NEXT」を、クリックする。
![27.png](https://qiita-image-store.s3.amazonaws.com/0/240522/0f7edec4-defd-8efd-5ab1-062c83513bfd.png)

---

## クライアント情報の設定

1. 先ほどメモした「クライアントID」、「クライアントシークレット」を設定する。
2. 「アカウントリンク用URL」を、2つ設定する。
3. 「NEXT」を、クリックする。
![28.png](https://qiita-image-store.s3.amazonaws.com/0/240522/4083e546-b5a6-3f21-9b58-36cc5153afe6.png)

---

## スコープの設定

- スコープ（任意項目）は設定せずに、「NEXT」をクリックする。
![29.png](https://qiita-image-store.s3.amazonaws.com/0/240522/6be9415c-7a60-5d19-5ba7-52d7743ec828.png)

---

## テスターコメントの設定

1. Googleテスターさん向けに、「コメント」を入力する。
2. 「SAVE」を、クリックする。
![30.png](https://qiita-image-store.s3.amazonaws.com/0/240522/1f89c4fd-560d-e810-8689-5f2caef340fa.png)

---

## 設定内容の反映

- 「TEST」をクリックし、テストシミュレータを起動する。
![31.png](https://qiita-image-store.s3.amazonaws.com/0/240522/56c6b307-1f51-9079-c8e8-1d87d6a67d75.png)

---

## 設定内容の反映

- 「Test now enabled.」メッセージが、ポップアップを表示されるのを確認する。（これでGoogleスマートホームアプリは作成完了となります。）
![32.png](https://qiita-image-store.s3.amazonaws.com/0/240522/e8e71264-0a4a-72c5-e32d-83bb5d77f0ca.png)

---

# 8. ポータルサイト

---

## ポータルサイトを開く

1. ローカルサーバのURLにアクセスする。
2. 「LOGIN」を、クリックする。

- user: rick ／ password: oldman
![33.png](https://qiita-image-store.s3.amazonaws.com/0/240522/c816fdbe-689d-aed3-62af-04c8453f4cb0.png)

---

## 仮想家電デバイスの登録

- 右上の「＋」アイコンを、クリックする。
![34.png](https://qiita-image-store.s3.amazonaws.com/0/240522/d50a7d08-915c-9089-ea36-add7b931c24c.png)

---

## デバイスの追加

- 「RGB Light」アイコンを、クリックする。
![35.png](https://qiita-image-store.s3.amazonaws.com/0/240522/0aa3e320-9151-5af5-7105-05ab0baaceac.png)

---

## デバイスの追加

1. ニックネームに、「テストランプ」を設定する。
2. デバイス名に、「テストランプ」を設定する。

- ニックネーム（任意名）はデバイス呼び出し名となるため、音声認識しやすい名前にしてください。
![36.png](https://qiita-image-store.s3.amazonaws.com/0/240522/eed6e498-d12f-57fb-e52f-9beb76be8632.png)

---

# 9. Googleスマートホームアプリの設定

---

## Googleアシスタントアプリの起動

1. お持ちのスマートフォンで、「Googleアシスタント」アプリをタップする。

- ※アカウントは、開発で用いたGoogleアカウントに変更のうえお使いください。
![37.png](https://qiita-image-store.s3.amazonaws.com/0/240522/7fe93349-1b31-e045-ece5-6112a531c58d.png)

---

## 設定を開く

1. 設定を開くため「コンパス」アイコンをタップする。
![38.png](https://qiita-image-store.s3.amazonaws.com/0/240522/d0d18897-fd8f-40d4-8937-c1fb2233ce23.png)

---

## 設定を開く

- 「設定」をタップする。
![39.png](https://qiita-image-store.s3.amazonaws.com/0/240522/57997490-0d7a-5a9e-e8d9-106d55fddcd0.png)

---

## スマートホームの設定

- 設定メニューの「機能」から「スマートホーム」をタップする。
![40.png](https://qiita-image-store.s3.amazonaws.com/0/240522/c3cfdd20-7e7d-8e8d-89ff-590ad605333c.png)

---

## デバイスの追加

- 画面下の「＋」アイコンをタップする。
![41.png](https://qiita-image-store.s3.amazonaws.com/0/240522/22d9c3f7-b1cb-b2f8-0a02-77c110005e6d.png)

---

## デバイスの追加

- 「テスト用アプリ」をタップする。
- ※アプリ名を設定された方はそのアプリ名を選択してください。
![42.png](https://qiita-image-store.s3.amazonaws.com/0/240522/2b0f7e95-75e6-6b95-183f-0e4bdd137a27.png)

---

## アカウントリンクをする

- 「LOGIN」ボタンをクリックして、アカウントリンクをおこなう。
![47.png](https://qiita-image-store.s3.amazonaws.com/0/240522/cf5e4b1e-814c-464a-9851-8343419a9b3a.png)

---

## 部屋の割り当て

- 当該デバイスをタップして、デバイスの利用場所（仮想）を設定する。
![43.png](https://qiita-image-store.s3.amazonaws.com/0/240522/ced50422-41d8-374d-8dfb-b4a68fad8e54.png)

---

## 部屋の割り当て

- 任意の利用場所をタップする。
![44.png](https://qiita-image-store.s3.amazonaws.com/0/240522/a45a48de-d141-8146-3a68-bb4bed14a761.png)

---

## 部屋の割り当て

- 「完了」タップする。。
![45.png](https://qiita-image-store.s3.amazonaws.com/0/240522/7cd3b1c6-99e1-32d0-0be7-92ef38d9c537.png)

---

## 部屋の割り当て

- 「OK」ボタンをタップする。
![46.png](https://qiita-image-store.s3.amazonaws.com/0/240522/5de55204-ab58-d0ec-a94e-8f02ed4e4af0.png)

---

# 10. Googleアシスタントアプリのテスト

---

## Googleアシスタントアプリのテスト

1. Googleアシスタントアプリを開く。
2. ユーザ発話「テストランプをつけて」をする。
![48.png](https://qiita-image-store.s3.amazonaws.com/0/240522/42f40c78-3b47-33ba-12b0-8653345e95f8.png)

---

## ポータルサイトを確認する

1. ポータルサイトを確認する。
2. ユーザ発話「テストランプをつけて」のタイミングで、ブラウザ内の照明が「点灯」することを確認する。
![49.png](https://qiita-image-store.s3.amazonaws.com/0/240522/227d7734-d4b4-731e-3928-5fbdb472e840.png)

---

## 他フレーズのテスト

```text:トークシナリオ
ユーザー：「テストランプを赤くして」
Googleアシスタント：「はい。テストランプの色を変えます。」

ユーザー：「テストランプの明るさを50%にして」
Googleアシスタント：「分かりました。テストランプの明るさを50パーセントに設定します。」

ユーザー：「テストランプを消して」
Googleアシスタント：「はい。テストランプをオフにします。」

```
---

# 11. おわり
みなさん、Googleスマートホームアプリの作成方法はいかがでしたか？みなさんの環境でも、うまくセットアップできていれば幸いです。（私はなんだかんだ2時間くらいはまりました。。。）うまくいけば、1時間もあれば完了するかと思います。

2018/08/19 TAKAHIRO NISHIZONO