【初めてでも15分でできる】2年前に書いた【QRコードを使ったデジタル呼び出しボタンを作成！】がLINE notifyが終わるので、LINE公式アカウントに置き換えてみる

# 先日、LINE notifyのサービス終了の案内がきました。

https://notify-bot.line.me/closing-announce

IoTとかの通知で制限も少なく非常に便利でしたので残念です。。。
と、残念がっていても仕方がないので、LINEでどうやって通知受けられるか！？
ということを考えると、アナウンスにもあるように Messaging APIでできるようにしましょう！！

:::note info
2年前にNotifyを利用したものを記載していたものを、
MessagingAPIを利用したものに変更しております。
https://qiita.com/specialman9999/items/ce85e0a3ce8c6f0fdfed
:::

##### LINE notifyとMessagingAPIでできることの違い

| LINE公式アカウント | LINE notify |
|:-----------|:------------|
| ビジネスIDやアカウントを作成しないといけない| ボタン１つで登録できた |
|  アクセストークンの発行がちょっとめんどう | ボタン１つで発行できた  |
| 送信数は無料では月200通まで  | 送信数は無料で1時間1000回まで  |
| 複数人に送るときは友だち登録してもらうだけ、ただし登録している人が増えると通数が減る(後述)  | 複数人に送るときはグループLINEを作らないといけない  |
| 作るまで10分ぐらい  | 作るまで数分ぐらい  |
| メッセージ送信まで10秒ぐらい  | メッセージ送信まで5秒ぐらい  |

全く一緒というわけではないですが、入れ替え可能です！！

さて、通数の考え方ですが、下記のようになっております。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/624933/72f0a966-2a3e-1a9d-2d3d-81a794f7669a.png)



人数が増えるごとに、呼び出し回数が減っていってしまいます。
また、あくまで無料数の枠なので月5000円のLINE公式アカウントのライトプランにすれば5000通まで送れるようになります。(複数人で多く通知がある場合は、お金がかかるのでLINEではないほうが良いかもです。。。)


# さっそく作っていきましょう！

##### スプレッドシートのコピー
下のスプレッドシートをマイドライブにコピーしてください。
(閲覧専用なので、このまま利用しても書き込みできません)

https://docs.google.com/spreadsheets/d/1cCV_av43TVSsOxeZYkM2DXZMhYAg81bNw5fz68LBU9s/edit?usp=sharing


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/624933/0c8711de-0f21-56f5-3991-bf90a222628c.png)
【アクセスを許可】を押してください。(QRコード作成で外部と通信してます)

コピーができましたら、次にLINE公式アカウントの作成をしていきます。

##### オフィシャルアカウントマネージャーでの作業

こちらからオフィシャルアカウントマネージャーにログインをしてください。

https://manager.line.biz/

:::note info
全く初めての方は、下記の公式サイトをご参考にビジネスIDを作成してください
https://www.lycbiz.com/jp/manual/OfficialAccountManager/new_account/?list=7171
:::

アカウント名や業種などを選択していき作成ボタンを押します
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/624933/72317515-c3b2-9d2a-1209-86da34901ac4.png)


アカウントが作成されましたら【LINE Official Account Managerへ】を押して移動してください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/624933/3c0fb8fd-757b-5f2b-ed9d-8deef0239100.png)

ログインできましたら、右上の設定ボタンを押します

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/624933/dcd8fc6c-ab4f-799a-e00d-a88b25505c2c.png)

左のリストに表示された【MessagingAPI】を押し、MessagingAPIを利用すると押します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/624933/bf304da2-85f8-c0fa-f452-f04b205bd2eb.png)


するとプロバイダーを選択と出てくるので、新しく作成するか、既存のものを選択します。
(初めてでわからない場合は、【プロトタイプ】の様な感じで作成して大丈夫です)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/624933/0968459f-0564-f9d0-4727-247d8fa52201.png)

プライバシーポリシーと利用規約が記載してください。
(通知のアカウントだけであれば、空欄で大丈夫です。)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/624933/57865afa-34e0-c7aa-a524-cd693a337c64.png)

確認ボタンがでてきますので【OK】
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/624933/a067610e-7e3a-6b0b-bbe9-e8e9631bc3e7.png)


その後設定完了画面がでてきます。こちらで、オフィシャルアカウントマネージャーでの設定は終わりですので、LINE Developersに移動します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/624933/77d0d6b9-6094-0708-387f-cd918e38f50a.png)


LINE Developersに行ったら、コンソールに入ります。

##### LINE Developersでの作業

(初めての時は開発者登録画面になるので登録してください。)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/624933/2cd3af71-d358-3482-9cb7-4ae0ef2b1f6a.png)

ログインをしたら、先ほど作成したものが表示されていると思いますので、そちらへ移動してください。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/624933/ae147c77-a967-9aa0-c497-15316263d8f9.png)


【MessagingAPI設定】のタブをクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/624933/e7aac1f2-b7a8-2cec-c839-241756ff09cf.png)

その画面の一番したの、チャネルアクセストークンで、発行ボタンをおして、チャネルアクセストークンを発行して、コピーしてください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/624933/e0463fb8-5aff-a981-59b2-5f0dcf5d4a70.png)

:::note warn
チャネルアクセストークンの先頭の文字が英数字以外(＋やー等)の場合、このプログラムがうまく動かないことがるので、その際は、再発行をおしえて、先頭が英数字のものになるようにしてください。
:::


##### スプレッドシートでの作業

次に、先ほどコピーしたスプレッドシートに戻り
先ほどコピーしました、チャネルアクセストークンをセルC4に張り付けます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/624933/ddefd8ea-f058-7868-7491-19870934459a.png)

拡張機能⇒AppsScriptをおしてGAS(GoogleAppsScropt)の画面を表示します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/624933/a948fd4e-dec4-7e76-7ccf-b583194b1397.png)


右上のデプロイで新しいデプロイを選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/624933/773d1b8f-e955-2f0d-cc95-8c23d8cf426e.png)

次のユーザーとして実行で、自分を選択
アクセスできるユーザーを全員にします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/624933/69613269-7515-4efc-9b18-ddad40162b0c.png)

最初だけ【アクセスを承認】の画面がでます
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/624933/9466811c-f564-6eed-69df-b03fb85b9374.png)

自分のアカウントを選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/624933/3c3ec5df-903e-1e4c-a80c-7b98a6354fd9.png)

確認が面がでるので【Advanced】を選択します
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/624933/579f2411-4b2a-bd70-f308-06e5d729a56f.png)

:::note warn
ここで、【BACK TO SAFETY】や戻るを選択すると戻ってしまいます。
(新しいプログラムなので大丈夫？？という確認です。今回のものは安全なものなので大丈夫です。)
:::

Go to 呼び出しボタン(unsafe)を押します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/624933/1f80545b-7bb8-c581-be03-c85533c19292.png)

外部と通信しますかという確認がでますので【Allow】許可してください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/624933/4b6d4dbf-d5f8-8635-b260-b3595a01e310.png)

するとデプロイ(プログラムが出来上がる)されて、画面がでますので【ウェブアプリ】のアドレスをコピーしてください
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/624933/4bee63ae-442b-7e88-e5df-50332ccf0e55.png)

コピーしたURLをスプレッドシートのセルC7に張り付けます
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/624933/a7ad9ec3-6224-c8c0-8e20-92d2b9ab823b.png)

# 完成！試してみよう

作成したLINE公式アカウントを友達追加して、
スプレッドシートに表示されている、QRコードを読み込んでください。

ボタンが表示されているのでタップするとLINEにメッセージが飛びます
(GASのHTMLでボタンは変えられますので、もっといいのに変えてください💦)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/624933/72e91526-e87f-7df5-12f7-3c437f1a36d6.png)

LINEの画面
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/624933/d1afc377-7a85-803a-d6b0-377bfb29be1d.png)

スプレッドシートのセルC9を変えればテーブルごとのQRを発行できたり
セルC5を変えれば後につくテキストを変えられます。


<details><summary>動いているGAS</summary>

LINE公式アカウントでのブロードキャストを実施しているGASになります。

```javascript
function Button(number){

var ss = SpreadsheetApp.getActiveSpreadsheet();
var sheet = ss.getSheetByName("QR");

 // LINEから取得したトークン
let token = sheet.getRange(4,3).getValue();

//送信するメッセージ
let messageText = number + sheet.getRange(5,3).getValue();
 


    const sendText = {
        "messages": [{
            "type": "text",
            "text": messageText,
        }]
    }

    const options = {
        "method": "post",
        "headers": {
            "Content-Type": "application/json",
            "Authorization": "Bearer " + token,
        },
        "payload": JSON.stringify(sendText)
    };

    // Line該当ユーザーに応答を返している
    UrlFetchApp.fetch("https://api.line.me/v2/bot/message/broadcast", options);
}
```
</details>

みなさま、いろいろ変えて、LINE notifyがなくなってもLINE APIを使ってLINEをつかっていきましょう！！