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

目次

1. 作成した背景
2. LINEbotの機能
3. 参考記事
4. 難しかったところ
5. 終わりに

1. 作成した背景

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

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

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

2. LINEbotの機能

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

タイトル：「Daily English Bot」

github： daily-english-line-bot

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

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

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

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

実際の画面：

3. 参考記事

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

LINEbot開発の準備
▶︎ LINE Botを作成するために必要なもの

LINE-MessagingAPIのドキュメント
▶︎ LINE Developer-Messaging API

トーク画面にリッチメニューを作成する
▶︎ LINE for Business-リッチメニューを新規作成する

GASの公式リファレンス
▶︎ Google Apps Script

GASを普段使い慣れたエディタで開発する
▶︎ 5分で作るclaspを使ったGoogle Apps Scriptの開発環境

GASでGoogle翻訳APIを利用する
▶︎ 3 分で作る無料の翻訳 API with Google Apps Script

英単語を使った一言文章をAPIから取得する
WordsAPI

4. 難しかったところ

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

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

▶︎ UrlFetchAppの例外ハンドリングについて

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

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

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

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

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]);
}

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

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

var data = [
 [19-12-23 13:41:03:242 PST] [名前, フリガナ, 性別, メールアドレス],
 [19-12-23 13:41:03:242 PST] [西尾彩菜, ニシオアヤナ, 女, [e-mail]],
 [19-12-23 13:41:03:243 PST] [須藤創, スドウハジメ, 男, [e-mail]],
 [19-12-23 13:41:03:243 PST] [宮城元, ミヤギハジメ, 男, [e-mail]]
]

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

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を使う

5. 終わりに

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

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