【GAS】GASとMessagingAPIで英単語帳LINEbotをつくってみた！

# 目次
[1. 作成した背景](#1-作成した背景)
[2. LINEbotの機能](#2-linebotの機能)
[3. 参考記事](#3-参考記事)
[4. 難しかったところ](#4-難しかったところ)
[5. 終わりに](#5-終わりに)


## 1. 作成した背景

「LINE DEV DAY 2019」２日目に行きまして、LINEbotのハンズオンに参加したので、何か早速作りたいと思い、作成しました。

アイデアがあまり浮かばないため、ググって「コレいいな。」と思ったアイデアをもとに実装させていただきました:smiley::point_up:

実際に使えるものがいいなと思ったので、気軽に英語を勉強できる英単語帳のようなシンプルなbotにしました:writing_hand:


## 2. LINEbotの機能

英単語帳LINEbotの機能は下記の通りです（^^）

**タイトル：**「Daily English Bot」

**github：** [daily-english-line-bot](https://github.com/kottyan/daily-english-line-bot)


**機能：**
１.毎日の英単語をクイズ形式で送信
（GASで送信される時間を指定できます）

2.英単語を使った一言文章の送信
（WordsAPIを使用しました）

3.英単語の登録
（LINEのリッチメニューからできます）

4.英単語の削除
（LINEのリッチメニューからできます）


**実際の画面：**

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/415434/f3710367-5e3a-442d-6377-618a1f1b0194.png" width="450px" />


## 3. 参考記事

下記の通り、たくさん参考にさせていただきました（^^）

LINEbot開発の準備
▶︎ [LINE Botを作成するために必要なもの](https://it-blue-collar-dairy.com/what_need_for_linebot/)

LINE-MessagingAPIのドキュメント
▶︎ [LINE Developer-Messaging API](https://developers.line.biz/ja/docs/messaging-api/overview/)

トーク画面にリッチメニューを作成する
▶︎ [LINE for Business-リッチメニューを新規作成する](https://www.linebiz.com/jp/manual/OfficialAccountManager/rich-menus/create/)

GASの公式リファレンス
▶︎ [Google Apps Script](https://developers.google.com/apps-script/reference)

GASを普段使い慣れたエディタで開発する
▶︎ [5分で作るclaspを使ったGoogle Apps Scriptの開発環境](https://qiita.com/suin/items/b264092eab3ce553f16a)

GASでGoogle翻訳APIを利用する
▶︎ [3 分で作る無料の翻訳 API with Google Apps Script](https://qiita.com/tanabee/items/c79c5c28ba0537112922)

英単語を使った一言文章をAPIから取得する
[WordsAPI](https://www.wordsapi.com/)


## 4. 難しかったところ

####◆ LINEトーク画面にはエラーが表示されないところ

実装のどこかでエラーが起きていても、LINEbotは沈黙のままです。
せめて、エラーの情報が欲しい。。。
ですが、ちゃんとエラー内容を確認する方法はありました。
下記の記事を参考にGASでエラーをログ出力して開発を進めました。

▶︎ [UrlFetchAppの例外ハンドリングについて](https://www.monotalk.xyz/blog/google-app-script-%E3%81%AE-urlfetchapp-%E3%81%AE-%E4%BE%8B%E5%A4%96%E3%83%8F%E3%83%B3%E3%83%89%E3%83%AA%E3%83%B3%E3%82%B0%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6/)

####◆ Googleスプレッドシートの二次元配列

GASでスプレッドシートに値を入力したり、取得したりといいたことが可能です。

下のような名簿データがあるとします。

<img width="620" alt="パーソナルデータ（仮）.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/415434/c682158e-bde1-a631-6dd0-b687b81bab66.png">


下記のコードのようにデータが取得でき、ログで表のヘッダーと上から３人のデータを出力します。

```js
function myFunction() {
  var sheet = SpreadsheetApp.getActiveSheet();
  var data  = sheet.getDataRange().getValues();
  Logger.log(data[0]);
  Logger.log(data[1]);
  Logger.log(data[2]);
  Logger.log(data[3]);
}
```

すると、下のようにログが出力されます。

<img width="688" alt="ログ.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/415434/814a0007-8c00-7282-dcb7-553d88b6d2ef.png">

スプレッドシートから取得したデータは下のように二次元配列になっていることがわかります。

```js
var data = [
 [19-12-23 13:41:03:242 PST] [名前, フリガナ, 性別, メールアドレス],
 [19-12-23 13:41:03:242 PST] [西尾彩菜, ニシオアヤナ, 女, Ayana_Nishio@apzgf.ijl.vv],
 [19-12-23 13:41:03:243 PST] [須藤創, スドウハジメ, 男, hajime_sudou@sjbqzcnlhx.bt],
 [19-12-23 13:41:03:243 PST] [宮城元, ミヤギハジメ, 男, emiyagi@bxsoatxziu.jdg]
]
```

例えば、上から１番目（2行目）の性別（３列目）の値を取得する場合、下のコードのように取得します。

```js
data[1][2]
```

※スプレッドシート上ではインデックスは「１」から始まるが、プログラミングで配列として扱うときインデックスは「０」から始まることに注意です！



####◆ JSON形式のFlex Message

まず、Flex Messageとは、CSS Flexible Box（CSS Flexbox）というモジュールの基礎知識を使って、レイアウトを自由にカスタマイズできるメッセージだそうです。
あまりプログラミングに慣れていないデザイナーの方でも手軽に触れるようにJSON形式で柔軟なUIを作成することができます。
Flex Messageは、DOM要素のツリー構造をJSONで書き表すと、階層も深くなり見通しが悪く複雑になる傾向があります。
Flex Message Simulatorというサービスがあり、これを使うと、JSONで書いたコードをすぐにプレビューで確認できます。大変、助かりました。

▶︎ [Flex Messageを使う](https://developers.line.biz/ja/docs/messaging-api/using-flex-messages/)

## 5. 終わりに

今回、LINEbotを作成して、LINEbotはサービスとして可能性を秘めてますし、学習コストもそれほど高くなく、多くのエンジニアやデザイナーが作成することができると実感しました。
また、さまざまなAPIと連携させることでbotの幅が広がりますし、「こんなAPIがあったのか。」と気づくきっかけにもなりました。
LINEbot作成がきっかけで、GASを初めて触り、興味を持ちました。
GASは短いコードでGoogleの便利APIを使えたりと万能で、もっと使いこなして業務効率化（RPA）などに生かしていきたいと思いました:sunny:

また実装についても余裕あれば触れていきます:basketball_player_tone2: