Google Homeを使ってToDoリストにタスクを追加してみた

[スマートスピーカー Advent Calendar 2017](https://qiita.com/advent-calendar/2017/smart-speaker) の16日目です。急遽参戦してみます。よろしくお願いします。

[IFTTT](https://ifttt.com/)だけを使って[Google Home](https://store.google.com/product/google_home?hl=ja)(Google Assistant)と[Trello](https://trello.com/)(タスク管理アプリ)を連携して、Trelloのリストにタスクの追加ができますが、日本語だとちょっと使いづらいです。なぜなら...

<img width="570" alt="スクリーンショット 2017-12-16 10.03.13.png" src="https://qiita-image-store.s3.amazonaws.com/0/137045/78f5ebef-e2e6-bf5b-3c2e-5e57d74f8bd3.png">

この画像のように、「てにをは」のような助詞や半角スペースが混じったり、「納豆 と 豆腐 を」のように、「 と 」で分割してタスク登録してくれなかったりして、ちょっと微妙です。

この画像の例だと、以下のようにタスクが登録されることが理想だと思います:

* リンゴ
* みかん
* 納豆
* 豆腐
* みずほ銀行に行く
* 部屋の掃除
* 洗濯機の買い替え

そこで、Google Apps Script(以下、GAS)を経由してGoogle Homeから受け取った文字列をいい感じに加工して、Trelloにタスクを追加してみることにしました。

![構成図.png](https://qiita-image-store.s3.amazonaws.com/0/137045/87b129f8-8f7a-ef3d-b04b-54fed580e773.png)

# GASのコードを保存・デプロイ
[Google Drive](https://www.google.com/intl/ja_ALL/drive/)にアクセスし、新規にGoogle Apps Scriptを作成します。

以下のコードを貼り付けて、スクリプトを保存します。

```javascript
function removeParticle(str) {
  var regexp = /^(に |で |2 |)(.+?)( を|)$/;
  if (regexp.test(str)) {
    return str.match(regexp)[2];
  }
  return str;
}

function removeUselessSpaces(str) {
  return str.split(' ').reduce(function(a, b) {
    if (/[^a-zA-Z]$/.test(a) && /^[^a-zA-Z]/.test(b)) {
      return a + b;
    }
    return a + ' ' + b;
  });
}

function doPost(e) {
  var message = removeParticle(e.postData.getDataAsString());
  var listId = e.parameter.listid;
  message.split(' と ').forEach(function(str) {
    addCard(removeUselessSpaces(str), listId);
  });
}

function addCard(message, listId) {
  var scriptProp =  PropertiesService.getScriptProperties().getProperties();
  var trelloKey = scriptProp.TRELLO_API_KEY;
  var trelloToken = scriptProp.TRELLO_TOKEN;
  var url = 'https://api.trello.com/1/cards/?key=' + trelloKey + '&token=' + trelloToken;
  var options = {
    'method' : 'post',
    'muteHttpExceptions' : true,
    'payload' : {
      'name'      : message,
      'due'       : '',
      'idList'    : listId,
      'urlSource' : ''
    }
  }
  UrlFetchApp.fetch(url, options);
}
```

このスクリプトは、IFTTTから受け取った文字列の先頭に付いた「に 」「で 」「2 」、末尾に付いた「 を」や、**日本語と日本語の間の**半角スペースを除去してから、「 と 」で文字列を分割し、Trelloのタスクに追加する機能を持っています。
(半角スペースに隣接する前後の1文字のどちらかが英字の場合は、半角スペースを残します)

GAS の Publish > Deploy as web app で、Web Appとしてデプロイします。
![deploy-gas-01.png](https://qiita-image-store.s3.amazonaws.com/0/137045/f00e3c36-6879-a34c-a09f-827c75c0866e.png)
Project version は "New" にして、 Who has access to the app は "Anyone, even anonymous"を選択してください。

![deploy-gas-02.png](https://qiita-image-store.s3.amazonaws.com/0/137045/b066b1bc-b8d0-8e55-648c-345654b434d7.png)
デプロイが完了すると、Current web app URLが表示されますので、コピーしておきます。

# GASでTrelloの設定をする
Trelloにログインしている状態で、以下のURLにアクセスします
https://trello.com/app-key

![trello-01.png](https://qiita-image-store.s3.amazonaws.com/0/137045/5e5ebd66-4a71-a754-2cb5-21a2bf4a4a49.png)
キー(APIキー)をコピーしておきます。

「あなたは手動で**Token**を作られます。」の**Token**の部分をクリックして、Tokenを取得します。

![trello-02.png](https://qiita-image-store.s3.amazonaws.com/0/137045/024a2e15-beef-43e5-de89-af22d99f0298.png)
Tokenをコピーしておきます。

GASの画面に戻り、先ほど保存したスクリプトの画面で File > Project properties を選択し、`TRELLO_API_KEY`にAPIキー、`TRELLO_TOKEN`にTokenをプロパティとして設定します。

![trello-03.png](https://qiita-image-store.s3.amazonaws.com/0/137045/f681fc4f-2fc3-54ce-620b-cf04d1da4eea.png)

# TrelloのリストIDを取得する
ChromeなどでTrelloのボードを開き、開発者ツール(Windows:F12, Mac:command + option + I)を開きます。開発者ツールのConsoleで以下のスクリプトを貼り付けて、Enterキーで実行します。

```javascript
$.get(location.href+'.json',function(d){console.log(d.lists.filter(function(e){return !e.closed}).map(function(e){return e.name+':'+e.id}).join('\n'))})
```

<img width="689" alt="スクリーンショット 2017-12-16 11.01.19.png" src="https://qiita-image-store.s3.amazonaws.com/0/137045/dc6f0e53-9f23-7b4a-6fd7-b5f6fb6f062f.png">
こんな感じでリストごとのリストIDが表示されるので、Google Homeでタスクの追加をしたいリストのIDをコピーして起きます。

# IFTTTのAppletを作成する
[IFTTT](https://ifttt.com/)にアクセスし、以下のような内容でアプレットを作成します。

## Step 1. Choose a service (this)
<img width="240" alt="Google Assistant.png" src="https://qiita-image-store.s3.amazonaws.com/0/137045/e97e6aba-2104-b7fd-d292-ac537e47321a.png">
Google Assistantを選択します

## Step 2. Choose trigger
<img width="302" alt="Say a phrase with a text ingredient.png" src="https://qiita-image-store.s3.amazonaws.com/0/137045/491b0d00-4eef-a149-5d99-9508e9900d8c.png">
"Say a phrase with a text ingredient" を選択します

## Step 2. Complete trigger fields
| 設定項目                                 | 設定内容              |
|------------------------------------------|-----------------------|
| What do you want to say?                 | `タスクに $ 入れて`   |
| What's another way to say it? (optional) | `タスクに $ 追加して` |
| And another way? (optional)              | `タスクに $ 追加`     |
| What do you want the Assistant to say in response? | `タスクに $ を追加しました` |
| Language                                 | Japanese            |
ここは、ご自身がGoogle Homeに話す癖や、好みを反映した方が良いです。

## Step 3. Choose action service (that)
<img width="240" alt="Webhooks.png" src="https://qiita-image-store.s3.amazonaws.com/0/137045/c3c5681a-6524-872e-8ae3-99d874f8a62d.png">
Webhooksを選択します

## Step 4. Choose action
<img width="301" alt="Make a web request.png" src="https://qiita-image-store.s3.amazonaws.com/0/137045/17e08d92-27a2-809f-196d-85c02529b0d2.png">
"Make a web request" を選択します

## Step 5. Complete action fields
| 設定項目     | 設定内容                                                                                                                                |
|--------------|-----------------------------------------------------------------------------------------------------------------------------------------|
| URL          | 例) `https://script.google.com/macros/s/XXXXXXXXXXXXXXXXXXXXXXXXXXXX-XXXXXXXXXXXXXXXXXXXXXXXXXXX/exec?listid=yyyyyyyyyyyyyyyyyyyyyyyy` |
| Method       | POST                                                                                                                                  |
| Content Type | text/plain                                                                                                                            |
| Body         | `{{TextField}}`                                                                                                                         |

URLはGASデプロイ時の "Current web app URL" の末尾に、 `?listid=` と TrelloのリストIDを付け加えたものです。

## Step 6. Review and finish
アプレットの名前を決定して Finish します。

# GASの文字列加工効果
GASなしとGASありのケースそれぞれで、ToDoリストにタスクの追加をしてみました。

<img width="561" alt="スクリーンショット 2017-12-16 12.53.50.png" src="https://qiita-image-store.s3.amazonaws.com/0/137045/d9e14836-7aad-71ec-74be-0a59a2ee9ef6.png">

完璧になりました！実際、私自身も実用的に使っております。

# おまけ
<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">Google home miniを壁掛けにしたい人結構いると思うんだけど、ニトリで売ってるスポンジホルダー的なアイテムが最高にフィットしたので記念に写真を上げておきます<a href="https://twitter.com/hashtag/googlehomemini?src=hash&amp;ref_src=twsrc%5Etfw">#googlehomemini</a> <a href="https://t.co/XTOxzYckjc">pic.twitter.com/XTOxzYckjc</a></p>&mdash; 🥑 (@shiramiz) <a href="https://twitter.com/shiramiz/status/935160446432063488?ref_src=twsrc%5Etfw">2017年11月27日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

このツイートをみて、壁掛けにしてみました。

![PC160785.jpg](https://qiita-image-store.s3.amazonaws.com/0/137045/e37baabc-b0dd-bb88-e59b-abfeb998430a.jpeg)

[山崎実業 斜めスポンジラック アクア ホワイト 2934](https://www.amazon.co.jp/dp/B01D9ONYQ0)と、ニトリの額掛け用フックを使っています。
ベッド横にGoogle Home Miniを掛けているので、寝ながら目も開けずにタスク追加できてとても便利です！

# 参考サイト
* [Google Apps ScriptからTrello APIを使ってみる
](https://qiita.com/Andysumi/items/1608cefcb6daa672b49e)