Voiceflowで作成したAlexaスキルをGoogleアシスタントに変換する

@kun432 さんが始められた[Voiceflow 夏休みAdvent Calendar](https://qiita.com/kun432/items/666ae13f097004ea7935)の1日分の記事を書かせていただける事になりました。
現在は12時を過ぎ9月1日になってしまったので、「新学期の登校日までに間に合わすぞ」という学生のような気持ちでまとめております。誠に申し訳ありません。

##初めに
Voiceflowで作成したAlexaスキルは、Googleアシスタントのアプリに変換できます。これもVoiceflowの魅力の一つです。ちょっとした手間で、別のプラットフォームに水平展開できるなんて、魅力的です。

基本的に英語が苦手でなければ、下記の公式ドキュメントを参考にすれば、設定が出来るはずです(詳細は後述)。
[Uploading Your Project to Google Assistant](https://learn.voiceflow.com/en/articles/2705386-uploading-your-project-to-google-assistant)
[Deploying Your Google Assistant Project to Production](https://docs.voiceflow.com/voiceflow-documentation/cross-platform-work/deploying-your-google-assistant-project-to-production#step-3-wait-for-your-results)

しかし、英語のWebサービスは表示周りの変化が早く、ちょっとしたことが躓きの元になります。
日本語記事があった方が、初めてスマートスピーカーに取り組む方の参考になると思い、今回この記事の題材に選びました。

##前提
一度、Googleアシスタントのアプリを作成した事がある方
(ない場合は各アカウントの初期登録画面は表示されると思われます。)
この記事は、2019年8月31日から9月1日にかけてキャプチャしました。

##Voiceflowでの操作
作成したAlexaスキルの画面上部の「Google」を押下。
<img width="138" alt="6.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/155894/cc31e041-a92e-8119-443d-9918bf54716e.png">

右上の青い箇所が「Upload to Google」に変わるので、押下。
<img width="955" alt="7.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/155894/1b25adc5-2190-0df6-30e5-e3fa673ee6f8.png">

Interactionブロックの箇所に!マークが表示されます。
Intentの種類が内部的に違うのでしょうか、今一度設定しないといけません。
*Interaction choices are platform-specific. You are currently on Google*
*Google翻訳:インタラクションの選択はプラットフォーム固有です。 現在Googleを使用しています*

<img width="677" alt="8.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/155894/484355c6-fd1c-f16a-6a40-9f16bb516a16.png">
<img width="227" alt="10.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/155894/3b5682e3-39f2-ab88-cfbe-0739fc5c7932.png">


口寄せバトルを終了するか否かを、Alexaスキルでは標準ビルトインインテント「AMAZON.YesIntent」「AMAZON.NoIntent」で設定していました。
<img width="227" alt="12.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/155894/9cdb0810-d39c-1610-a262-b70e1b61503e.png">

当然Googleアシスタントにも同様のインテントがあるのですが、現時点では表示されていません。応急処置で作成しました。
<img width="539" alt="13.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/155894/aa238393-10b0-4462-5039-bd435211f192.png">


!マークが表示されたブロックがない事を確認し、「Upload to Google」を押下します。
<img width="225" alt="15.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/155894/40cbe766-bcd2-7c6d-ff26-a65b0cf66777.png">

*Test your Skill on your own Google device, or in the Google Actions console*
*Google翻訳:独自のGoogleデバイスまたはGoogleアクションコンソールでスキルをテストする*
<img width="951" alt="14.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/155894/c0668b0f-c7dc-9456-846c-21203d111353.png">

「DIALOGFLOW CREDENTIALS」と表示されます。
青字のhereかSetup tutorialをクリックしてください。
<img width="317" alt="16.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/155894/0771bdb8-ea91-97b1-7a87-8d9fed2ab640.png">


先ほど紹介した[Uploading Your Project to Google Assistant](https://learn.voiceflow.com/en/articles/2705386-uploading-your-project-to-google-assistant)が別タブで表示されると思います。

よいよここからが本題です。

##Actions on Googleでの操作
Google Actionsのアカウントを作成します。
<img width="933" alt="17.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/155894/9723fcdb-6803-134a-0bca-055c1c65a842.png">

https://developers.google.com/actions/ を表示し、「GO TO ACTIONS CONSOLE」を押下。

Welcome to Actions on Googleと表示されるので「New project」を押下
<img width="847" alt="18.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/155894/bf75f594-dd1d-7128-5219-6f303904bbc6.png">


Project Nameは任意の名称を入力してください。
(市販の書籍のサンプル通りに入力したら、エラーが出ることがあります。確証はないのですが、世界中においてユニークな名称でないといけないのか？)
<img width="361" alt="19.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/155894/08f0a824-eacd-bf73-fdb1-8d653ea1f628.png">

English United Statesの箇所は、Japanese Japan に変更し、「Create project」を押下
<img width="455" alt="20.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/155894/6b1ded56-9c7d-f43b-5d62-1d02c7fd88f8.png">
<img width="358" alt="21.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/155894/883ea7a0-6e32-3cbc-4de7-1d89c6f8adb5.png">


画面が変わるまで、少しお待ちください。
<img width="356" alt="22.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/155894/6d0803b6-45ed-2281-37ab-a816e247a059.png">


Welcome to your new project! と表示されます。スクロールを一番下に下げてください。
<img width="956" alt="23.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/155894/ae66d4fc-682c-ece6-ebcb-4a669ef3df5d.png">


「Conversational」を押下
<img width="274" alt="24.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/155894/058498f3-a388-bd25-1d85-3473a5d9e183.png">

「Build your Action」を押下
<img width="956" alt="25.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/155894/756e8c51-5007-53f7-ae81-afc36f6a9c4b.png">

「Add Action(s)」を押下
<img width="423" alt="26.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/155894/f24340df-01ac-b820-4118-7cded2351f73.png">

「Add your first action」を押下
<img width="716" alt="27.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/155894/e076b150-f22e-ff04-4d43-06a8d5b82d90.png">

CREATE ACTION と表示されるので、Custom intentが灰色になっている事を確認し「BUILD」を押下
<img width="402" alt="28.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/155894/a9695547-e662-753d-a98b-7126e785cb1a.png">

別タブで「Dialogflow」が表示されます。
<img width="960" alt="29.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/155894/747ca1c2-762d-92c9-1ab3-e5c4b78f091a.png">

##Dialogflowでの操作
DEFAULT LANGUAGE欄を「Japanese - ja」に変更してから「CREATE」を押下
<img width="670" alt="30.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/155894/a613f641-790e-3c24-53c5-e10128a77009.png">
<img width="683" alt="31.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/155894/b6bdb2b3-6fa5-8af4-da4d-e9f5d7960b03.png">

歯車マークの箇所を押下
<img width="683" alt="31.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/155894/a520b26f-5513-7336-8f27-d24bbdba49da.png">

Service Account欄の、水色のリンク箇所を押下
<img width="659" alt="32.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/155894/c9faa93f-6e9e-fa46-84df-e649b9cdbc20.png">

別タブで「Google Cloud Platform」画面が表示されます。


##Google Cloud Platformでの操作
「サービスアカウントを作成」を押下
<img width="948" alt="33.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/155894/f280a535-9a04-b377-3f7a-421975bf23fe.png">

「サービスアカウント名」欄に、「Voiceflow Creator Tool」と入力し、「作成」ボタンを押下
<img width="830" alt="34.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/155894/5bdb45c9-4a15-3dba-00f5-c4998b4afd68.png">
<img width="943" alt="35.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/155894/1229731d-0201-98e8-a936-f5ded2a95c56.png">

役割を選択を押下
<img width="910" alt="36.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/155894/c8462f15-8dbe-6283-aa79-c856bf9f75e0.png">

スクロールさせDialogflowを見つけてください。
**x　Dataflow ではありません**
<img width="429" alt="37.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/155894/11b610e7-09ea-9a43-5b20-05f6353f6da0.png">


Dialogflowを選択し、さらに右側で「Dialogflow API管理者」を選択してください。
<img width="615" alt="50.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/155894/566d966e-dd0c-23a7-9ffc-876899b5e54b.png">

役割欄が「Dialogflow API管理者」になっている事を確認し、「続行」を押下
<img width="820" alt="51.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/155894/95c855af-c5d6-3990-6b4e-aa97cb03f46f.png">

「鍵を作成」ボタンを押下
<img width="721" alt="追加.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/155894/8126327e-d120-4031-b4f0-d9787cf10fbb.png">


キーのタイプがJSONが選ばれている事を確認し、「作成」ボタンを押下
<img width="814" alt="43.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/155894/6b3381b8-8c7f-5913-cc20-75f0d5c36b01.png">

秘密鍵がパソコンに保存されました と表示されます。
保存されたjsonファイルをご自身の分かりやすいフォルダに移動してください。
<img width="935" alt="45.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/155894/e78c7932-e3cd-7956-d4ba-479ee9a61787.png">

先ほどのVoiceflowタブの「DIALOGFLOW CREDENTIALS」に戻り、jsonファイルをドロップするか青字のBrowseを押下します。
<img width="604" alt="47.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/155894/6c459ef5-9145-0a2e-f8d7-393bf32eb535.png">

Invalid Dialogflow Credentials, try creating new file と表示されました。
<img width="305" alt="53.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/155894/0066fed7-8d08-1aa1-a2ea-619ea598175c.png">


現在、Voiceflow公式窓口に問い合わせ中です。**詳細が分かり次第、記事を修正します。**

##最後に

私は当記事を書くにあたり、休日に1日分の記事を書くだけでも大変な思いをしました。
毎日記事をコツコツと積み上げられた@kun432 さんのVoiceflowにかける情熱には、頭が下がる思いでいっぱいです。

なお、サンプルのAlexaスキルは、いわゆるジャンケンです。
勝敗のロジックは、[じゃんけんアルゴリズムをちょっと応用](https://qiita.com/mpyw/items/3ffaac0f1b4a7713c869)を参考にしました。ありがとうございました。