LINE BOTで単語帳作る(第1回:準備編)

# 資料構成

全3回ぐらいになる予定。

- 第1回 : 準備(オウム返しBOT作成まで)
- 第2回 : [問題POSTまで](https://qiita.com/Ki2neudon/items/310c4f91b5267301cfc5)
- 第3回 : 便利機能追加(正答率とか)

この記事は第1回です。

# 概要図

こんなん作るよ

![概要図_ver1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/259373/91cf2d5b-b529-3890-1936-24f8a52b74ba.png)

全部無料枠で作成するのでスマートフォンのトークルームからのPOSTをきっかけに動きます。

# 準備 : オウム返しBOTを作る

## LINE Developers 作業

[LINE Devepoers](https://developers.line.biz/ja/) へPCのブラウザからアクセスしてLINEアカウントでログイン。

QRコード認証だと楽。
スマホのLINEアプリ＞トークルーム上部にある検索欄の右端にある ``[ - ]`` こんなアイコンから起動するカメラで認証できます。

![LINE Developersアカウント作成.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/259373/3430fb37-cdf1-b49e-e8b5-eb7c08d91ddc.png)

- 名前
- メールアドレス
- 同意のチェックボックス

を入力して ``Create my account`` をクリック。

![LINE Developers_コンソール_01_英語.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/259373/400ee411-1217-233b-80ca-93ee2611a0be.png)

やったー！英語だー！
大丈夫。右下に言語選択があります。

![LINE Developers_コンソール_02_日本語.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/259373/fdfc6b88-2432-b07b-1e23-0e6eab87b262.png)

指示どおりに ``新規プロバイダー作成`` に進む。
プロバイダー = プロジェクト、みたいなもんです。たぶん。
参考(公式) : [1. プロバイダーを作成する](https://developers.line.biz/ja/docs/liff/getting-started/#_1-%E3%83%97%E3%83%AD%E3%83%90%E3%82%A4%E3%83%80%E3%83%BC%E3%82%92%E4%BD%9C%E6%88%90%E3%81%99%E3%82%8B)
>プロバイダーは、LINEプラットフォームを通じてサービスを提供する個人、企業、またはそのほかの組織を意味する情報です。プロバイダー名には、あなたの名前や企業名を入力してください。

![LINE_Developers_コンソール_03_プロバイダー作成.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/259373/1a260654-4000-c55e-5ee0-68d951ee476a.png)

プロバイダー名を入力。個人の取り組みなので自分のアカウント名(``Ki2neudon``)にしておきました。

![LINE_Developers_コンソール_04_プロバイダー作成後.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/259373/73ffce13-cfb9-c395-cf99-20a538174441.png)

次に ``チャネル作成`` に進みます。
チャネルってのは``AWS``でいうところの``EC2``とか``S3``とか、サービスっすね。
参考(公式) : [2. チャネルを作成する](https://developers.line.biz/ja/docs/liff/getting-started/#_2-%E3%83%81%E3%83%A3%E3%83%8D%E3%83%AB%E3%82%92%E4%BD%9C%E6%88%90%E3%81%99%E3%82%8B)
>チャネルは、LINEプラットフォームが提供する機能を、プロバイダーが開発するサービスで利用するための通信路です。チャネルを作成するには、名前、説明文、およびアイコン画像が必要です。

今回はスマホとの窓口になる ``Messaging API`` を選択します。

![LINE_Developers_コンソール_05_MessagingAPI作成.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/259373/6d87d218-8fec-dce9-394d-ac018f90a3b2.png)

情報を入力します。
チャネルアイコンは絵心ない人は[いらすとや様](https://www.irasutoya.com/2015/06/blog-post_88.html)から借りるとかしよう。画像は丸く切り取られて表示されるので注意。

|項目|入力値|
|---|------|
|チャネルの種類|Messaging API|
|プロバイダー|さっき決めたプロバイダー名|
|チャネルアイコン|PNG,JPG,JPEG,GIF,BMP。3MB以内|
|チャネル名|任意。トークルームで表示される名前ですので慎重に。7日間変更できません|
|チャネル説明|500文字以内|
|大業種|たぶんLINE側でどんな分野に使われているのか集計してる。無料で使わせてもらってるんだから正直に答えよう|
|小業種|たぶんLINE側でどんな分野に使われているのか集計してる。無料で使わせてもらってるんだから正直に答えよう|
|メールアドレス|LINE Devepolersアカウント作成時のメアドでええんちゃうん|
|プライバシーポリシーURL|任意。個人利用なので空欄にした|
|サービス利用規約URL|任意。個人利用なので空欄にした|

最後に2つの規約に同意を読んでチェックを入れて ``作成`` ボタンをクリック。
LINEがどのような情報を収集しているか出てくるのでちゃんとよんで同意を押そう。

![LINE_Developers_コンソール_06_チャネル作成完了.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/259373/ea00315d-0277-110e-31d3-2bf84d3f022a.png)

この時点で ``Messaging API設定`` のタブから表示されるQRコードをスマホのLINEアプリから読み取ると友達登録できます。
不要なメッセージを止めるために ``Messaging API設定``タブ から以下の2つを無効化しておきましょう。

- 応答メッセージ
- あいさつメッセージ

同じく ``Messaging API設定`` 多分の一番下、``チャネルアクセストークン`` の右にある ``発行`` ボタンを押します。
すると長ったらしい文字列が表示されますが、これは次の ``GoogleAppsScript(GAS)`` で使うので控えておきましょう。

``LINE Developers``側の作業は一旦ここで終了。

## GoogleAppsScript 作業

[GoogleDrive](https://www.google.co.jp/drive/apps.html) へPCのブラウザからアクセスして右上の ``ドライブを使う`` ボタンからGoogleアカウントでログイン。

![GoogleDrive_01_ドライブメイン画面.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/259373/7c3594de-6fb4-91d0-2429-bbbe181b6122.png)

左上の ``+ 新規`` ボタンをクリックして ``その他`` > ``Google Apps Script`` を選択。

![GoogleDrive_02_GAS初期.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/259373/1b801396-bebe-145b-94da-4230c78dc737.png)

ここにLINEとの連携処理を書いていきます。
まずはオウム返しBOTを書いてみましょう。

```js
// LINE Developersで発行したアクセストークン
const ACCESS_TOKEN = "LINE Developersで発行したアクセストークン";
// LINE BOT 返信URL
const LINE_ENDPOINT = "https://api.line.me/v2/bot/message/reply";

// LINE BOT
function doPost(e)
{
  // ユーザのPOST内容をJSONパース
  const json = JSON.parse(e.postData.contents);

  // 返信に使うトークルームのトークンを取得
  const rep_token = json.events[0].replyToken;
  // 未定義だったら終了する
  if (typeof rep_token === "undefined")
  {
    return; // 未定義だった
  }

  // 応答用メッセージの箱作成。最大5個まで入れられるらしい。
  let repMsg = [];
  let addMsg;         // こっちは都度作る応答JSON

  // ユーザのPOSTからメッセージ部を取得
  let message = json.events[0].message.text;

  // 応答用メッセージ作成。後ろに「だってばよ。」をつける
  addMsg = {
    type: "text",
    text: message + "。だってばよ！"
  };
  // 応答用メッセージの箱に詰める。
  repMsg.push(addMsg);

  // トークルームにメッセージを送信
  UrlFetchApp.fetch(LINE_ENDPOINT, {
    'headers': {
      'Content-Type': 'application/json; charset=UTF-8',
      'Authorization': 'Bearer ' + ACCESS_TOKEN,
    },
    'method': 'post',
    'payload': JSON.stringify({
      'replyToken': rep_token,
      'messages': repMsg
    }),
  });
  return ContentService.createTextOutput(JSON.stringify({'content': 'post ok'})).setMimeType(ContentService.MimeType.JSON);
}
```

``ACCESS_TOKEN `` は各自、先の手順で確認した長ったらしい文字列に書き換えてね。

![GoogleDrive_03_GAS名前変更.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/259373/83230320-efcf-a918-0f45-44bffcb3f33d.png)

そうそう、赤い枠の部分から ``Rename`` を選ぶとプロジェクト名とファイル名を変更できるので変えておこう。
ここまでやったら上部メニューより ``公開`` ＞ ``ウェブアプリケーションとして導入`` を実行。

![GoogleDrive_04_初めての公開.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/259373/c8bbcafb-4700-9a34-c549-cc40359a52ef.png)

<font color="red">!!注意!!ここで躓く人が多いので以下をよく確認してください。</font>

- Project Version
    - ここは**更新する度に**必ず「New」を選ぶこと！！
- Who has access to the app:
    - ``Anyone, even anonymouse`` で。前は日本語だったっぽいけど。

![GoogleDrive_05_初めての公開.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/259373/66892afd-77b3-db2d-a07a-7fecc5d46de5.png)

初めての公開の場合は続けて上記が表示されるので ``許可を確認`` をクリック。
Googleアカウント選択画面が出るので自分のアカウントを選択。

![GoogleDrive_06_初めての公開_警告.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/259373/09c505f1-f75d-4e29-47a5-732b8c19a610.png)

続けて上記の画面がでるので赤い枠の ``詳細`` をクリック。

![GoogleDrive_07_初めての公開_警告.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/259373/0ec13761-3886-db28-afb8-91377c64e5d2.png)

下に表示されたリンクをクリック。表示される名前は自分が決めたプロジェクト名だったかファイル名だったか。

![GoogleDrive_08_初めての公開_警告.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/259373/bd60d8d9-32e5-3cb7-02eb-b5600583b634.png)

こんな画面がでるので内容を確認して ``許可`` をクリック。
これらの作業は初回だけですので安心して。

![GoogleDrive_09_公開完了.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/259373/ed388b67-2e22-7d30-c252-59a8e6cf217e.png)

公開が成功すると上記の画面が出るので ``Current web app URL:`` に表示されたURLをコピーします。
これはこの先ずっと同じなのでコピーは初回だけです。

## LINE Developers 作業2

ふたたび ``LINE Developers`` に戻ります。

![LINE_Developers_コンソール_07_Webhook初期表示.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/259373/b6741512-b10d-0b3d-9888-8e566063743c.png)

作成したチャネルの ``Messaging API設定``タブ > ``Webhook設定`` の ``編集`` ボタンをクリック。

![LINE_Developers_コンソール_08_Webhook設定.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/259373/19ee4ea9-d7b8-ba7f-fe4a-f4e7254bb8b7.png)

さきほど ``Google Apps Script`` で公開後に取得したURLを貼り付けて ``更新`` ボタンを押します。

![LINE_Developers_コンソール_09_Webhook検証.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/259373/6849f4a8-10dd-73ff-d397-86fbf35f0ca0.png)

新たに ``検証`` というボタンが出るので押してみます。
これで「OK」が出れば問題なし。出ない場合は ``Google Apps Script`` の公開部分など見直して下さい。

![LINE_Developers_コンソール_09_Webhook利用.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/259373/71dd7c37-f953-cc3a-6d42-c36130df98f5.png)

下段の ``Webhookの利用`` を有効にすれば完了です。

## 試してみよう

``LINE Developers`` > 作成したチャネル > ``Messaging APIの設定`` のQRコードをスマホのLINEアプリで読み込んで友達登録します。

![LINE_01_友達追加.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/259373/f85b8996-2dba-cf01-d526-2f71ad40a905.png)

開いたトークルームで何か発言してみましょう。

![LINE_02_友達追加.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/259373/e7f32bd3-a83f-514c-d68c-620cd2841a23.png)

末尾に「だってばよ！」が付いて返信がくれば成功です！。
※ 1個目は私がコード間違えててundefになっちゃいました。てへぺろ。

今回はここまで。参考になったらLGTMしてくれると嬉しいよ！
次の記事：[LINE BOTで単語帳作る(第2回:メイン処理編)](https://qiita.com/Ki2neudon/items/310c4f91b5267301cfc5)