Alexaにスプレッドシートで作ったオリジナル単語帳を読んでもらう

# はじめに

Alexaを使って簡単に聞き流すタイプの単語帳を作れないかと思ったので作りました。
スキルの公開はしたくなかったので、自分専用です。

# ざっくり構成
![素材類.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/236151/f4b15876-d667-2e24-49ad-89b512556976.png)
開発環境を作るのがめんどくさいので今回は[Amazon Alexa developer console](https://developer.amazon.com/alexa/console/ask)を利用してスキルの開発をします。

# Google SpreadSheetを使って単語帳をつくってAPIで返すようにする
外部から叩いて、SpreadSheetの内容を返すようにします

## データを作る
* シートに単語を記入していきます。
  * シート名は`シート1`になってます
![単語帳 - Google スプレッドシート - Google Chrome 2023_01_22 16_39_17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/236151/803913d9-e8fd-aa95-b339-5995ca6070e9.png)

## スクリプトを作成する
* `拡張機能 > Apps Script`からスクリプトを選択する
![単語帳 - Google スプレッドシート - Google Chrome 2023_01_22 16_42_45.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/236151/c8dc8ac8-af24-42e0-cba2-bde2c1822bd8.jpeg)
### スクリプトの記載
* スクリプトの入力画面が出たら`コード.gs`に以下を記載

```js
function doPost(e) {
   // スプレッドシート＆シートオブジェクトを取得
  const ss = SpreadsheetApp.getActiveSpreadsheet();
  const sheet = ss.getSheetByName('シート1');
  
  var sheetData = sheet.getRange('B3:C' + sheet.getLastRow()).getValues();

   // データの成形
  var responseList = [];
  sheetData.map(function(d) {
    responseList.push({ word: d[0], read: d[1] });
  });

  // レスポンス
  var response = {
    data: responseList,
    meta: { status: 'success' }
  };
  return ContentService.createTextOutput(JSON.stringify(response)).setMimeType(ContentService.MimeType.JSON);
}

```
### スクリプトをAPI化する
めんどくさいので認証なしのAPIにします
<hr />

* `デプロイ>新しデプロイ`
![「Alexaにスプレッドシートで作ったオリジナル単語帳を読んでもらう」を編集 - Qiita - Google Chrome 2023_01_22 16_50_31.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/236151/1227827e-e314-72f8-dd66-e2d8f05729b2.jpeg)

<hr />

* `ウェブアプリ`を選択

![「Alexaにスプレッドシートで作ったオリジナル単語帳を読んでもらう」を編集 - Qiita - Google Chrome 2023_01_22 16_50_50.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/236151/1a38a7ea-3ecc-bc94-7203-b70ac6ee80bf.jpeg)

<hr />

* 説明は空でもいいです。わかりやすいように名前つけてもいいです
* 実行ユーザーは自分だけ実行できるようにします
* アクセスできるユーザーは全員
* デプロイを押下してデプロイ
![「Alexaにスプレッドシートで作ったオリジナル単語帳を読んでもらう」を編集 - Qiita - Google Chrome 2023_01_22 16_51_14.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/236151/1f147f48-7fa4-8797-4789-e73443546b93.jpeg)

<hr />

* `ウェブアプリ`のURLをコピーします
![無題のプロジェクト - プロジェクト編集者 - Apps Script - Google Chrome 2023_01_22 16_57_24.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/236151/8e42f87c-64f9-3239-181d-93d677616097.jpeg)
 <hr />

### リクエストを受けつかるか確認する
``` shell
curl -L -d "hello" 上記でコピーしたURL
``` 
ちゃんとレスポンスが返ってきたらOK
![MINGW64__c_Users_ssaku 2023_01_22 17_12_20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/236151/e498a001-1aa5-d0f7-1d15-4857bf079106.png)


# Alexaで応答してもらうようにする
[Amazon Alexa developer console](https://developer.amazon.com/alexa/console/ask)にログインします

## 初期構築

*　`スキルタブ > スキルの作成`

![Amazon Alexa Console - Amazon Alexa Official Site - Google Chrome 2023_01_22 17_20_23.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/236151/31292321-2cc2-135f-2ff1-17a9ade7a56f.jpeg)

<hr/>

* スキルに名前を付けて、言語を選択
![Amazon Alexa Console - Amazon Alexa Official Site - Google Chrome 2023_01_22 17_20_47.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/236151/1a42d083-8881-1e32-74b4-948c5b30516d.jpeg)

<hr/>

* エクスペリエンスのタイプとモデルを選択
![Amazon Alexa Console - Amazon Alexa Official Site - Google Chrome 2023_01_22 17_21_13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/236151/d818c05d-ec7d-b00d-3dbe-ea593c93e4cb.png)

* ホスティングサービスを選択。
  * 今回はPythonを選択。ホスト地域は好きなように 
![「Alexaにスプレッドシートで作ったオリジナル単語帳を読んでもらう」を編集 - Qiita - Google Chrome 2023_01_22 17_44_56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/236151/7755f647-affc-e2f3-dca3-12f0320b3fa6.png)

<hr/>

* スキルを選択
![Amazon Alexa Console - Amazon Alexa Official Site - Google Chrome 2023_01_22 17_21_39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/236151/a5b43c71-bf73-727f-f027-ba93339ca973.png)

<hr/>

* `Create skill`を押下。1分くらいかかるので待つ
![Amazon Alexa Console - Amazon Alexa Official Site - Google Chrome 2023_01_22 17_21_59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/236151/f29bfbb7-300d-c105-0748-1a02bb82bd3b.png)

### コードをかく

* コードエディタタブ > Skill Code > lambda > lambda_function.py`
* Class`LaunchRequestHandler`,`def handle`にコードを書いていく

```python

        url = "上記でSpreadシートをAPI化したときのリクエストURL"
        pyaload = {"key1":"value1", "key2":"value2"}
        r = requests.post(url)
        text = ""
        for item in r.json()["data"]:
            text += item["word"]+","+item["read"]+"."

        return (
            handler_input.response_builder
                .speak(text)
               #.ask(text)  //ユーザーに再質問して会話をつづける
                .response
        )
```

![Amazon Alexa Console - Amazon Alexa Official Site - Google Chrome 2023_01_22 17_37_07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/236151/6cff3cea-6841-8684-67ef-68b2a4f9eb44.png)

* response_builder.speak(text)
   * speak()に渡した値をアレクサが応答する
* response_builder.ask(text)
   * ask()に渡した値をアレクサが応答し、回答を待つ 

### クラスの役割

|インテントハンドラ|意味|
|--|--|
|LaunchRequestHandler|スキルを起動するハンドラー。呼び出されたときに一番最初に実行される|
|HelloWorldIntentHandler|ユーザーがしたいアクションを実行。LaunchRequestHandlerで対話が継続される場合に実行|

<hr/>

## 指定のパッケージをインストール

requestsパッケージがないので、インストールする

* コードエディタタブ > Skill Code > lambda > requirements.txt`
  * `requests==2.28.2`

![Amazon Alexa Console - Amazon Alexa Official Site - Google Chrome 2023_01_22 17_39_49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/236151/186f045b-7ee1-dfbe-9be4-3ad0f54e2337.png)

## デプロイ
* コードエディタタブ上部にあるデプロイを押下してデプロイする

## テスト
* `テスト`タブを開く
* `スキルテストが有効になっているステージ:`を開発中にする
* Alexa趣味レーターで作ったスキルを呼び出す
![「Alexaにスプレッドシートで作ったオリジナル単語帳を読んでもらう」を編集 - Qiita - Google Chrome 2023_01_22 18_17_53.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/236151/029afcb0-a0f4-837a-9848-7a59a68510ae.jpeg)

* Spreadsheetの内容が返ってきたらOK
![「Alexaにスプレッドシートで作ったオリジナル単語帳を読んでもらう」を編集 - Qiita - Google Chrome 2023_01_22 18_20_19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/236151/ae88dd46-c107-bedf-b385-9a4160d33876.png)

* テストを実行してOKだったら実際のアレクサも反応してくれるようになる

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">qiita投稿用<br>Googleスプレッドシートに記載した内容をAlexaに喋らせる <a href="https://t.co/8ZBRsNhDy6">pic.twitter.com/8ZBRsNhDy6</a></p>&mdash; すえ (@skane_26) <a href="https://twitter.com/skane_26/status/1617091573912858625?ref_src=twsrc%5Etfw">January 22, 2023</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>


 
# 参考
[Alexaから送信されたリクエストを処理する](https://developer.amazon.com/ja-JP/docs/alexa/custom-skills/handle-requests-sent-by-alexa.html#request-verify)