GAS初心者がBitlyのLINE BOTを作ってみた

こんにちは！今回は、GAS初心者の私がGASでbitlyのLINE BOTを作ってみた、というお話です。

# 準備
## bitly
bitlyのアカウントでログインして、アクセストークンを作成します。[https://bitly.is/accesstoken](https://bitly.is/accesstoken)
アカウントを持っていなかったらサインアップしましょう。OAuthを使うとパスワードの入力画面で苦戦するので、Emailでのサインアップをおすすめします。

パスワードを入力すると、アクセストークンが表示されます。必ずメモしておきましょう。
![スクリーンショット 2021-03-19 21.15.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/328477/003b5eaf-6a32-3c38-6466-d239a10c0c01.png)

## LINE Developers
[https://developers.line.biz/console/](https://developers.line.biz/console/)にアクセスしてログインします。
LINE Business IDと出ていますが、普段お使いのLINEアカウントでログインしてしまって構いません。
![スクリーンショット 2021-03-19 21.19.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/328477/5c32e75e-578d-4ca4-4aa9-dfa8c666eeec.png)
ログインしたら、プロバイダーを作成して、Messaging APIのチャネルも作成しましょう。
![名称未設定2.001.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/328477/a94b6a46-4362-f8e8-4cff-917e40ef68a0.png)
続けてチャネルの詳細を入力しましよう。
チャネル名、チャネル説明はわかれば大丈夫だと思います。プライバシーポリシーURLなどは任意です。
![screencapture-developers-line-biz-console-channel-new-2021-03-19-21_26_31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/328477/0e1c17ff-ffe5-1c32-787a-877d8deb9498.png)

チャネルが作成できたら「Messaging API 設定」のタブに移動して、「応答メッセージ」、「あいさつメッセージ」を無効にします。
![名称未設定2.001.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/328477/2b7535df-0a15-1969-d52c-37786e3eef5c.png)

2項目を無効にできたら、さらにその下にある、「チャネルアクセストークン（長期）」を発行します。
発行したら先程と同様にメモしておいてください。


# 構造 
![qiita.001.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/328477/6e1dfa83-88a0-2009-0213-c67748029302.png)

# 実装
## プロジェクト作成
[Google Apps Script](https://script.google.com/home)から「新しいプロジェクト」を作成します。

## コード
GASのエディタが開いたら、すでに入力されている function myFunction( ) は削除し、以下のコードを記入してください。
各種アクセストークンの入力も忘れずに。（`CHANNEL_ACCESS_TOKEN`、`baseUrl`）

```javascript
var CHANNEL_ACCESS_TOKEN = '[LINE Messaging APIのチャネルアクセストークン]';

function doPost(e) {
 var post_json = JSON.parse(e.postData.contents);
 //返信用のトークン取得
 var reply_token = post_json.events[0].replyToken;
 if (typeof reply_token === 'undefined') {
   return;
 }
 var message = post_json.events[0].message.text;
 var url = 'https://api.line.me/v2/bot/message/reply';

 // --------- Bitly API ------------
 let baseUrl = 'https://api-ssl.bitly.com/v3/shorten?access_token=[Bitlyのアクセストークン]&longUrl=';
 let apiUrl = baseUrl + message;
 // json形式で取得
 var response = UrlFetchApp.fetch(apiUrl);
 var json = JSON.parse(response.getContentText());
 // urlを取り出す
 var getData = json['data']['url'];
 var reply_text = getData;
 
 UrlFetchApp.fetch(url, {
   'headers': {
     'Content-Type': 'application/json; charset=UTF-8',
     //                      ↓ここのスペースは詰めないように注意！
     'Authorization': 'Bearer ' + CHANNEL_ACCESS_TOKEN,
   },
   'method': 'post',
   'payload': JSON.stringify({
     'replyToken': reply_token,
     'messages': [{
       'type': 'text',
       // 返信するメッセージを指定
       'text': reply_text,
     }],
   }),
 });
 return ContentService.createTextOutput(JSON.stringify({'content': 'post ok'})).setMimeType(ContentService.MimeType.JSON);
}
```
## Webhook URLの設定

### GAS側の操作
GASのエディタが最新のものになっている場合は、右上の「以前のエディタを使用」を押して、移動した方が操作しやすいかもしれません。
メニューバーの「公開」＞「ウェブ アプリケーションとして導入」をクリックして、以下の画像のように変更して、デプロイ。
許可を求められますが、「許可を確認」をクリックして許可します。
![名称未設定2.005.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/328477/566b8e50-b5a5-b8ad-78fa-df76427587d7.png)

Googleアカウントを選択すると、注意画面が出ますが、「左下の詳細を表示」＞「[プロジェクト名]（安全ではないページ)に移動」をクリックして進みます。
この先もGoogleアカウントへのアクセスを許可するか聞いてきますが、許可して続けてください。
![名称未設定2.006.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/328477/7a7a93ee-0b4c-91f3-c954-d92be11e9558.png)

このまま続けると、以下のような画面が表示されるので、このURLをコピーしておきます。
![名称未設定2.007.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/328477/73c4037d-c7fb-4c44-1d1f-24fa97172e06.png)

### LINE Developers側の操作
LINE DevelopersのMessaging API設定のWebhook URLにGASでコピーしたURLをペーストします。
ペーストしたものが表示されたら、「Webhookの利用」スイッチをオンにします。
![名称未設定2.008.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/328477/69a40223-9859-e6fe-916c-689e943192e5.png)

最後に、Webhook設定の上にあるQRコードをスキャンして、LINEの友達追加すれば、いよいよです。
![スクリーンショット 2021-03-19 22.45.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/328477/24c37ad6-cdaf-7734-ef4c-f88c37efd27b.png)

# テスト
実際に使ってみました。しっかりと動作しました！🎉
![ezgif.com-gif-maker (2).gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/328477/f537e19b-0672-d567-c217-f040eae6ad89.gif)
## 注意点
ただし、注意点もあります。`http://`や`https://`が含まれないURLを送信するとbotは反応してくれません...
まだまだ改善の余地はありそうです。
![名称未設定2.009.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/328477/3b74bd07-2ff3-1ddc-74dc-35be9881515a.png)

# 最後に
途中でデプロイする前にバージョンをnewにし忘れたりなんかでかなり時間がかかってしまいました ><
今回、ほとんどSwiftしか触っていない人間がGASを使ってみましたが、Swiftと比べて記述方法が頻繁に変わらない(?)のが羨ましいところです。
また今度`http://`や`https://`の問題も修正してみようかなと思います。
最後までご覧いただき、ありがとうございました。

### 参考
https://tonari-it.com/gas-json-weather/
https://note.com/nkr_bet365/n/n4a93f5004510
https://qiita.com/shintarow/items/d53986e873d962f7a3c8