映画レビューの記録・共有をLINE BOTで行ってみる

#何をつくりたいのか。
・LINE BOTとGoogle Apps Script(GAS)の勉強
・内容としては、LINE BOT経由で内容をスプレッドシートに送信
映画レビューを、LINE BOTに話すとスプレッドシートに送られて、仲間同士で共有できる仕組みを作ります。

![図1.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/267677/e8641570-89ca-c22b-908b-deda0233bd41.jpeg)

#完成後

映画レビューをLINE BOTに話すと
![S__22683708.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/267677/9dacb8ae-f5ea-1331-dc23-46c93de770c9.jpeg)

カテゴリごとに分割されて、スプレッドシートに格納されます。
<img width="566" alt="キャプチャ最終.JPG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/267677/fa339936-ce51-95e4-4e53-3bdb8f7d5736.jpeg">

#LINE Developersの設定

・Webブラウザから「LINE Developers」を検索
・右上の[ログイン]を押してページ遷移
・[LINEアカウントでログイン]
すると、こんな感じの画面になります。
<img width="1127" alt="キャプチャ.JPG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/267677/30d3808a-9f2a-f152-c4de-bfa2a1ae3cfe.jpeg">

英語版だったので、日本語にして、プロバイダーの横の作成ボタンをクリック。
プロバイダー名の欄に管理者名を登録します。

<img width="879" alt="キャプチャ1.JPG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/267677/6850731d-306b-a550-0a33-616810ab2c3b.jpeg">

チャンネル作成、真ん中のAPIをクリック。

<img width="818" alt="キャプチャ2.JPG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/267677/88b3c266-4eb5-61fc-7542-beddeb4b6bde.jpeg">

登録情報を入力していきます。

<img width="431" alt="キャプチャ_4.JPG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/267677/6fd3f2db-8485-8a7f-d19f-e87a4b7a8cde.jpeg">

同意して進んだら、API設定をクリック
<img width="582" alt="キャプチャ6.JPG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/267677/9fbfa38f-813f-a96c-3e61-8c72f09fe826.jpeg">

応答メッセージの編集をクリックして、応答メッセージをオフ、webhookをオンにします。

<img width="883" alt="キャプチャ7.JPG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/267677/d71911be-e5f2-7d64-92da-96168872755b.jpeg">

<img width="359" alt="キャプチャ8.JPG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/267677/e51f239d-b05d-335c-8ee2-73836df2e74d.jpeg">

先ほどの画面で、アクセストークン[発行]します。

<img width="896" alt="キャプチャ9.JPG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/267677/729a758c-584a-c094-65a3-f15e9ad9b002.jpeg">

#管理者用Googleアカウント作成とスプレッドシートの設定(GAS)

・アカウント作成
・ドライブを開く
・新規作成->googleスプレッドシートを開く

スクリプトエディタを開きます。
(複数のGoogleアカウントでログインしている状態だと、うまくいかないかも)
<img width="515" alt="きゃぷ10.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/267677/d097ac8a-9730-48db-6833-d73c8f7717b4.jpeg">

元のコードを削除して、下記のコードを貼り付けます。以下のサイトを参考にして作成しました。
[アイデアを記録・想起する LINE Bot を作ってみました。]
(http://takagusu.hateblo.jp/entry/2017/02/26/010710)

#GASのコード

はじめに、アクセストークンなどLINEとの接続部分の設定。
CHANNEL_ACCESS_TOKEN = ‘xxxxxxxxx’のxxxxxx…を削除し、line developersで発行していたトークンをコピーし、xxxx…の部分に貼り付けます。

```javascript:main.gs
var CHANNEL_ACCESS_TOKEN = 'xxxxxxxxxxxxxxx'; // please set your channel access token
var line_endpoint = 'https://api.line.me/v2/bot/message/reply';#LINE Developer Document記載のAPIのURL
var line_endpoint_profile = 'https://api.line.me/v2/bot/profile';
```

この処理で分割したメッセージを、スプレッドシートに追加しています。

```javascript:main.gs
function addToSpreadSheet(time,m1,m2,m3,m4,m5,m6) {
  var today = new Date();
  var spreadSheet = SpreadsheetApp.getActiveSpreadsheet();
  var sheet = spreadSheet.getSheets()[0];
  sheet.appendRow([today,m1,m2,m3,m4,m5,m6]);
}
```

BOTがメッセージを受け取った後に、分割する部分。

```javascript:main.gs
function doPost(e) {
  //JSONをパース
  var json = JSON.parse(e.postData.contents);  
  //返信用のトークンを取得
  var reply_token= json.events[0].replyToken;
  if (typeof reply_token === 'undefined') {
    return;
  }

  var time = json.events[0].source.userId;
  //送信されたメッセージを取得
  var user_message = json.events[0].message.text;  
  //返信するメッセージを配列で用意
  var reply_messages;
  var spreadSheet;
  var str1='映画レビュー';
  var str2='【投稿者】';
   if(user_message.indexOf(str1)!=-1 && user_message.indexOf(str2)!=-1){
    //メッセージに映画レビュー、【投稿者】というフォーマット形式のデータが入っていた場合分割する
    var str;
    str = user_message[0];
    var i=0;
    for(i=1;i<=user_message.length;i++){
     str += user_message[i];
    }

    var reg = /【投稿者】.*?\n/;
    var m1 = str.match(reg);
    m1 = m1.join('');//配列の要素を結合して文字列に変換
    m1 = m1.replace(/【投稿者】/g,'');//不要な情報の削除
    m1 = m1.replace(/\n/g,'');//改行の削除
    
    var reg = /【映画名】.*?\n/;
    var m2 = str.match(reg);
    m2 = m2.join('');//配列の要素を結合して文字列に変換
    m2 = m2.replace(/【映画名】/g,'');//不要な情報の削除
    m2 = m2.replace(/\n/g,'');//改行の削除

    var reg = /【ジャンル】.*?\n/;
    var m3 = str.match(reg);
    m3 = m3.join('');//配列の要素を結合して文字列に変換
    m3 = m3.replace(/【ジャンル】/g,'');//不要な情報の削除
    m3 = m3.replace(/\n/g,'');//改行の削除
    
    var reg = /【評価】.*?\n/;
    var m4 = str.match(reg);
    m4 = m4.join('');//配列の要素を結合して文字列に変換
    m4 = m4.replace(/【評価】/g,'');//不要な情報の削除
    m4 = m4.replace(/\n/g,'');//改行の削除
    
    var reg = /【良かった点】.*?\n/;
    var m5 = str.match(reg);
    m5 = m5.join('');//配列の要素を結合して文字列に変換
    m5 = m5.replace(/【良かった点】/g,'');//不要な情報の削除
    m5 = m5.replace(/\n/g,'');//改行の削除
    
    var reg = /【悪かった点】.*/;
    var m6 = str.match(reg);
    m6 = m6.join('');//配列の要素を結合して文字列に変換
    m6 = m6.replace(/【悪かった点】/g,'');//不要な情報の削除
    m6 = m6.replace(/\undefined/g,'');
    
    addToSpreadSheet(time,m1,m2,m3,m4,m5,m6);
    reply_messages = [ m1 + 'さん\n' + m2 + 'のレビューありがとうございます。'];
}

   else {
    reply_messages = ['error'];
   }
```

BOTが、メッセージを返信する部分。
返信がないと、きちんと反映されているのか不安になりますよね。

```javascript:main.gs
  //メッセージを返信
  var messages = reply_messages.map(function (v) {
    return {'type': 'text', 'text': v};    
  });    
  UrlFetchApp.fetch(line_endpoint, {
    'headers': {
      'Content-Type': 'application/json; charset=UTF-8',
      'Authorization': 'Bearer ' + CHANNEL_ACCESS_TOKEN,
    },
    'method': 'post',
    'payload': JSON.stringify({
      'replyToken': reply_token,
      'messages': messages,
    }),
  });
  return ContentService.createTextOutput(JSON.stringify({'content': 'post ok'})).setMimeType(ContentService.MimeType.JSON);
}
```


#アプリケーション公開へ

公開→ウェブアプリケーションとして導入

<img width="319" alt="きゃぷ13.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/267677/01881f18-04be-8f1d-d55c-d21b58b33498.jpeg">

公開範囲を設定、連携を許可し、URLをコピーします。

<img width="484" alt="キャプチャ14.JPG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/267677/501a6dce-ca67-371d-13ab-02cfce97e8e1.jpeg">

ここから安全ではないページと表示されますが、そこをクリックして同意してください。

<img width="454" alt="キャプチャ15.JPG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/267677/fe93253d-0d54-2d4c-003d-496454fcc2be.jpeg">

もう一度、公開からウェブアプリケーションとして導入を押すと、このURLが発行されます。コピーして、Project versionをnewバージョンに選択して更新します。コードを書き換えた際も、毎回更新します。

<img width="439" alt="キャプチャ16.JPG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/267677/d9c8e0bf-bf60-3922-2b90-a3e060e21beb.jpeg">

コピーしたURLをline developersのチャネル基本設定画面のwebhookの欄に貼り付けます。

<img width="218" alt="キャプチャ17.JPG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/267677/2eb78d86-6630-a10e-97da-3fd2bcbad5f3.jpeg">

webhookの利用を、そのままonにします。

<img width="186" alt="キャプチャ18.JPG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/267677/5b651d39-d671-fc82-1ee0-171264cf0fcc.jpeg">

そして、LINE Developersのチャネル基本設定画面のQRコードを携帯で読み取って、BOTをLINEに追加します！

#実際に試してみる

スプレッドシートの1行目に、投稿日時等の情報を書いておいて、LINEBOTに、このフォーマットを使って、内容を書き込んで送信すると

```
映画レビュー
【投稿者】
【映画名】
【ジャンル】
【評価】
【良かった点】
【悪かった点】
```

![S__22683708.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/267677/13745048-7d6c-20c5-9f5b-0add528383ed.jpeg)

<img width="566" alt="キャプチャ最終.JPG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/267677/ca38dba0-afc9-a6bc-0c79-50e51d515589.jpeg">

無事に、スプレッドシートに反映されました。

#さいごに

スプレッドシートのURLを共有しておけば、仲間同士で共有する事ができます。グループラインへの招待をDepelopersで有効にしておけば、グループで発信して会話を楽しみ、スプレッドシートでも後から見返す事ができます。