【LINE Bot×GAS】我が家の行きたいところリストを作成する

好きなモノは酒と女とラーメン、LIFULLのてぃば(@rechiba3)です。

# はじめに
この記事は[LIFULL Advent Calendar2019 その2](https://qiita.com/advent-calendar/2019/lifull2)の最終日の記事です。

# 準備するもの
- Googleドライブ: スプレッドシート
- Googleドライブ: GASプロジェクト
    - GASをウェブアプリケーション化して生成するWebhook URL
- LINEアカウント: Developer登録しておく
- LINE Bot: Messenger APIのチャンネル
- LINE Bot: Messenger APIのChannelアクセストークン

# 1. LINEのポストをスプレッドシートへ反映させる

## 1-1. スプレッドシートの準備
Googleスプレッドシートを作成して、記入日、行きたい時期、行きたい場所、内容の4列に見出しをつけます。

つまり、値が入るのは2行目からということになります。
![スクリーンショット 2019-12-25 20.50.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/86461/18e41f40-5606-d9f3-3b90-4c7a03e95622.png)


## 1-2. GASファイルの作成
ツール > スクリプトエディタ よりスクリプトエディタを開きます。
![スクリーンショット 2019-12-25 20.50.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/86461/d74e7e08-c52b-14bf-d80e-bdab28e602b9.png)

CHANNEL_ACCESS_TOKENは空白のまま、
SPREADSHEET_IDには、先程作成したスプレッドシートのd/から/editまでの間の乱数をコピーして貼り付けます。


getSheetByNameには、任意のシート名を入力しても大丈夫です。
変更していない場合はそのままデフォルトと同じ名称を記入します。

![スクリーンショット 2019-12-25 21.05.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/86461/56996a69-2830-a086-a049-fe07de782258.png)

### GASコード
```
var CHANNEL_ACCESS_TOKEN = '【MessengerAPIのチャンネルアクセストークンが入ります】'; 
var SPREADSHEET_ID = '【スプレッドシートのIDが入ります】';

//ポストで送られてくるので、送られてきたJSONをパース
function doPost(e) {
  var json = JSON.parse(e.postData.contents);

  //返信するためのトークン取得
  var reply_token= json.events[0].replyToken;
  if (typeof reply_token === 'undefined') {
    return;
  }

  //送られたメッセージ内容を取得
  var message = json.events[0].message.text;  
  //LINEメッセージを「改行」で分割
  var messageParameter = message.split(/\r\n|\n/);

  //対象のスプレッドシートを取得して更新する
  var targetSs = SpreadsheetApp.openById(SPREADSHEET_ID);
  var targetSht = targetSs.getSheetByName('シート1');
  var lastRow = targetSht.getLastRow();
  //タイムスタンプ
  var date = Utilities.formatDate(new Date(), 'Asia/Tokyo', 'yyyy/MM/dd');

  //各セルに書き込み
  targetSht.getRange('A' + (lastRow + 1)).setValue(date);
  targetSht.getRange('B' + (lastRow + 1)).setValue(messageParameter[0]);
  targetSht.getRange('C' + (lastRow + 1)).setValue(messageParameter[1]);
  targetSht.getRange('D' + (lastRow + 1)).setValue(messageParameter[2]);

  return ContentService.createTextOutput(JSON.stringify({'content': 'post ok'})).setMimeType(ContentService.MimeType.JSON);
  }
```

## 1-3. LINEチャンネルの作成
[https://developers.line.biz/console/](https://developers.line.biz/console/)を開き、Providerから任意のRoleを選択します。

チャンネル一覧が開くので、一番左のコンテナをクリックして、新しいチャンネルを作成します。
![スクリーンショット 2019-12-25 21.58.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/86461/e8784d01-1eab-0b48-d137-036af7de87c1.png)

Messaging APIを選択して必要な情報を入力して進めていきます。
今回、私はチャンネル名を「倉持家の行きたいところリスト」にしました！
![スクリーンショット 2019-12-25 21.59.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/86461/67d83ff6-53bb-16be-3c6f-318aaf60e0bd.png)

作成した後、またチャンネルリストに戻り、先程作成したチャンネルをクリック。
チャンネル名下部にタブメニューが現れるので、Messaging APIを選びます。
![スクリーンショット 2019-12-25 22.03.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/86461/2d1827cb-fef4-d1a6-f6e9-b163a1b32c6d.png)

Messaging API settings画面から、
Auto-reply messages、Greeting messages を無効にできるLINE オフィシャルアカウント画面へ遷移できるので、これらを無効にしたい人は設定してもどります。

Messaging API settings画面に戻りまして、最下部にある、
Channel access tokenの乱数をコピーします。
![スクリーンショット 2019-12-25 22.06.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/86461/bb60f6bd-bbbe-eb16-90d7-894e9ff7065b.png)

この乱数を、先程のスクリプトエディタへ戻って
CHANNEL_ACCESS_TOKEN へ貼り付けます。


## 1-4. Webアプリケーションとして導入する
Googleスクリプトエディタへ戻ります。
公開 > ウェブアプリケーションとして導入 をクリック。
![スクリーンショット 2019-12-25 22.10.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/86461/078a43af-6e6a-caed-0c3b-44fdf4172a3f.png)

Deploy as web app の設定を以下にします。
Execute the app as: me
Who has access to the app: Anyone, even anonymous
![スクリーンショット 2019-12-25 22.11.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/86461/187b66ad-39c7-cd4a-34cc-688d2eaf9267.png)

更新を押下。
諸々権限を求められるので許可します。
![スクリーンショット 2019-12-25 19.30.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/86461/810a6267-000a-7355-4e53-3f8383860d32.png)

この画面が出たらアプリケーション化が完了です。
Current web app URLをコピーします。
![スクリーンショット 2019-12-25 19.20.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/86461/5ff05177-cb3d-e6da-ee66-2d334f771711.png)

コピーしたURLは、再度LINE Developer画面を開いて、
Webhook settings > Edit > 貼り付け > Verify で完了です。
Use webhookがONになっていなければONに変えます。
<img width="1022" alt="スクリーンショット 2019-12-25 13.50.57.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/86461/b83e819d-da0e-5e6a-fdaa-db05319e73e7.png">

挙動が安定しないことがあったので、試しにページをリロードしてください。
リロードしても、Use webhookがONになっていないこともあるのでONになっているか確認します。

Messaging API settingsに記載されてるQRコードをスマートフォンのLINEアプリで読み込むと、友だちに追加できます。
![IMG_0549.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/86461/74dfdafd-9add-70cf-4d7f-a488a49f982b.png)

## 1-5. スプレッドシートにLINEの発言を溜める
<img width="414" alt="LINE_capture_598962919.496362.JPG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/86461/350d5d5d-8182-b7e1-5750-b0ef63c2a172.jpeg">

でで〜〜ん！
無事に表示されました👏
![スクリーンショット 2019-12-25 22.25.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/86461/9960cd04-3831-b76a-d8e5-54c72811610e.png)

##1-6. 応答メッセージを無効にする

再びhttps://developers.line.biz/console/を開き、Messaging APIを開きます。
LINE Official Account features > Auto-reply messages のEditを選び、LINE Official Account Managerを開きます。
応答設定 > 詳細設定 > 「応答メッセージ」をオフにすると、行きたいところを登録するたびにBotから返答されなくなります。

あえて、応答メッセージを設定する場合は「応答メッセージ」を選択して任意のメッセージを登録してください。



# 2. 行きたい場所から座標と住所を取得する
このままじゃ味気ないので、いつでもマッピングできるように座標と住所を取得したいと思います。

スプレッドシートの下部にある+アイコンの「シートを追加」を押下して新しいシートを作成します。
そのシートの名称をmap_exportにしてください。

map_exportは手順1では、"シート1"としていた部分です。
「シート1」で行きたいところを入るようにしていた、C列のセルに入力していた値を引っ張れるようにします。
<img width="213" alt="2020-04-01 20.17.16.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/86461/371f0b06-28c4-c111-2327-c6ea726217fb.png">

あとは、A列に施設名、B、C列に座標、D列に住所が入るつもりで見出しをつけます。
<img width="919" alt="2020-04-01 20.19.46.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/86461/6fbfe03b-03d2-d0dc-0a41-ddf7969176c1.png">



## 2-1. GASファイルの作成
ファイル > New > スクリプトファイル から、新しいエディタを開きます。
![スクリーンショット 2019-12-25 21.13.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/86461/2350f497-ce97-1755-d504-23c640c972a2.png)

CALは列番号なので、ABC…ではなく左から123…と番号が振られています。
何列目にどの値を入れるかを定義しています。

### GAS
```
function geocoder() {
 const START_LOW = 1;
 const FACILITY_CAL = 1;
 const LAT_CAL = 2;
 const LNG_CAL = 3;
 const ADDRESS_CAL = 4;
 
 var spreadsheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('map_export');
 var lastLow = spreadsheet.getLastRow();
 
 for(var i=START_LOW; i<=lastLow; i++){

   var facility = spreadsheet.getRange(i,FACILITY_CAL).getValue();
 
   var geocoder = Maps.newGeocoder();
   geocoder.setLanguage('ja');//'en'にすれば結果データが英語になる
 
   var response = geocoder.geocode(facility);
   
   if(response['results'][0] != null){
     spreadsheet.getRange(i,LAT_CAL).setValue(response['results'][0]['geometry']['location']['lat']);
     spreadsheet.getRange(i,LNG_CAL).setValue(response['results'][0]['geometry']['location']['lng']);
     spreadsheet.getRange(i,ADDRESS_CAL).setValue(response['results'][0]['formatted_address']);
     
     /** 住所取得が複雑になるので未使用
     for(var j=0; j<=7; j++) {
       if(response['results'][0]['address_components'][j] != null){
         spreadsheet.getRange(i,ADDRESS_CAL + j).setValue(response['results'][0]['address_components'][j]['long_name']);
       }
     }
     **/
   }
 }
}
```


## 2-2. トリガーの設定

スクリプトエディタの画面上部、ツールバーに吹き出しになった時計マークのようなものがあります。
マウスオーバーすると「現在のプロジェクトのトリガー」と出るマークをクリック。
G Suite Developer Hubというサービスに飛びます。
画面右下、「トリガーを追加」をクリック。
![スクリーンショット 2019-12-25 20.14.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/86461/05032046-2c57-ffa7-6f20-223be23951ac.png)

実行する関数: geocoder
イベントのソースを選択: スプレッドシートから
イベントの種類を選択: 編集時
にして保存します。
![スクリーンショット 2019-12-25 21.00.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/86461/dc110ea0-22bc-d196-1596-21e62c36b1c4.png)

以上です！
このトリガーは反映されるまで少々時間がかかります。

map_exportのA1には、シート1の行きたい場所を引っ張るようにしておくと、それ以降のlat&lngとaddressは自動入力されます。
![スクリーンショット 2019-12-25 22.38.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/86461/d4d4578c-1764-8584-84fb-fc13111054f7.png)

今回は"に"を入れたことでちょっと住所がおかしくなってますね🤔

# 完成

Googleスプレッドシートを選択した理由は、その後にGoogleマップへのマッピングや、Googleカレンダーへの連携などを見込んでいるためです。

近いうちに、今回の挑戦を日常利用する便利サービスとして稼働させたいお気持ち🙋
![IMG_0560.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/86461/61aad50c-d8f1-d334-133c-887fd528b3fa.png)
![スクリーンショット 2019-12-25 22.44.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/86461/7a5a21c9-7120-b49e-fd62-2e099c16ec51.png)
![スクリーンショット 2019-12-25 22.44.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/86461/a78d3c08-ebab-5b5f-de31-6500d728f0af.png)

# さいごに
ノンエンジニアがエンジニアリングすることで、共通言語で設計や要件定義をおこなえる利点があります。（私は普段は企画職）

自分の言葉で仕様を組み上げられる、実現したい世界観を説明できる。
いいことずくしかよ〜
来年も面白い技術的チャレンジすっるっぞ〜〜！

良いお年をお迎えください🎄メリークリスマス🎄💫

# 参考
 - [Google Apps Scriptでオウム返しLINE Botを作る。 - Qiita](https://qiita.com/tetrapod117/items/e7b48485c98f6b88f311)
 - [施設名称から緯度経度、住所を取得する【GASとMAP Service利用】｜yuichi.komori｜note](https://note.com/yuickomori/n/nb0436d365d82)