「どんギツネさん」の目覚ましLINE通知システムを作ってみた

みなさんメリークリスマス！
クリぼっち確定の安達です！:santa:

今日はクリスマス独りぼっちで寂しいみなさまに朗報です・・！！

どん兵衛のCMで有名な**「どんギツネさん」の目覚ましLINE通知システム**を作りました！:champagne:


これで、あなたはもう独りじゃない・・！:sparkles:

#■システム構成の説明
ざっくりしたシステム構成図は以下の通りです。

![画像9.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/314234/c32f347e-c572-6fc7-3118-1daf24708f8a.png)




「API自動実行システム」がLINEに対して、決まった時間にAPI送信を行います。
Lineシステムはユーザにメッセージ通知を行います。(プッシュ通知)

そして、LINEのアイコンとメッセージを「どんギツネさん」にします！

「API自動実行システム」はGoogle Apps Script(GAS)を使って実装します！

GASは決まった時間にスクリプト実行するトリガー機能がありますので、
そのトリガー機能を利用したいと思います。


#■LINE Developers設定

LINEのメッセージAPIを利用するには、
LINE Developersのアカウント登録する必要があります。

さらに、「どん狐さん」のLINEチャンネルを作る必要があります。

**①LINE Developersアカウント登録**

以下のURLでアカウントを作成します。
https://developers.line.biz/ja/

**②「どん狐さん」のLINEチャンネル作成**

さあ、主役のどんギツネさんのチャンネルを作ります。

使用する画像は肖像権の問題もあるので、
実写真でなく下の絵で代替します・・！

![IMG_5215.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/314234/4455fa13-9970-1103-3fa4-01b67dcb3445.jpeg)
※あだちりょうへい 作

LINE Developers管理画面のチャンネルアイコンを上の絵に設定します。

![画像2.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/314234/845e3902-3a97-9bfa-d3b7-5a61e860bf5d.png)

![画像３.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/314234/e7f6339a-e4ff-dcbb-ec17-678986d6df2c.png)

あと、LINEチャンネル名は「どんギツネチャンネル」にしました。

![画像10.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/314234/23059c0b-e280-ed87-edca-c3d341074ee1.png)


**③UserIDとAccessTokenの取得**

API通知をするには、
チャンネルのUserIDとAccess Tokenの値を取得する必要があります。

UserIDはLINE Developers管理画面 > Providers > Your User IDで確認できます。

![画像11.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/314234/c320af79-1a40-e7d1-887e-eda6fd68645c.png)


Access TokenもDevelopers管理画面 > Providers > Messaging API > Channel access tokenで確認できます！

![画像12.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/314234/9419e344-b335-59d3-6a76-240d2ec8c7c7.png)

上記2つの値はプッシュ通知メッセージの実装で使用します。

#■「API自動実行システム」実装

Google Apps Script(GAS)を使ってプッシュ通知メッセージを実装します。
GASとはGoogleが提供している簡単なWebアプリケーションを作るための開発環境で、
JavaScriptで実装します！

GASはGoogleにログイン > スプレットシート > ツール > スクリプトエディタで利用できます。



![画像7.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/314234/fe639617-7f12-6bfa-b351-7586a5489cc4.png)

↓エディタ画面
![画像13.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/314234/5172e86e-0386-a676-5d5a-abc6a303bd24.png)

では、実際にプッシュ通知メッセージを実装してみます。
User IDとAccess Tokenは先ほどLINE Developersで確認した値を利用します。


**・JavaScriptバージョン**

```javascript

// Channel Access Tokenを指定
var accesstoken ="XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX"
// User IDを指定
var userId = "XXXXXXXXXXXXXXXXXX"

//ヘッダー設定
var headers = {
  "Accept": "application/json"
};

//APIペイロード設定
var payload = {
      "to":userId,
      "messages":[{
      "type":"text",
      "text":"朝だよ！起きてよ～(^^♪",
      }]
};

//トリガーの設定時間設定
function setTrigger(){
  const time = new Date();
  time.setHours(8);
  time.setMinutes(0);
  ScriptApp.newTrigger('line_push_message').timeBased().at(time).create();
}

//LineAPIプッシュ通知処理
function line_push_message(){
  try{
    UrlFetchApp.fetch("https://api.line.me/v2/bot/message/push",{
    "method":"post",
    "contentType":"application/json",
    "headers":{
      "Authorization":"Bearer "+accesstoken,
    },  
    "payload": JSON.stringify(payload),
    });
  }catch(e){
    result = "エラーの内容:" + e;
  }
}
```
setTrigger関数は毎日8:00にline_push_message関数を呼び出すための関数です。
setTrigger関数はGASのトリガー機能で呼び出すようにします。

GASのトリガー設定で新規追加を行い、以下の設定を行います。

![画像5.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/314234/b151621f-caa2-25ba-6e50-898a58233c09.png)
実行する関数を選択: **setTrigger**
実行するデプロイを選択: **Head**
イベントのソースを選択: **時間主導型**
時間ベースのトリガーのタイプを選択: **日付ベースのタイマー**
時刻を選択:**午前6時～7時** ※8時より前ならOK

![画像6.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/314234/ac1b16ce-7c35-09bd-3c1b-102f3d607901.png)

ちなみに、Shellスクリプトでもプッシュ通知プログラムを実装してみました。
以下のスクリプトファイルをLinuxのcron設定すれば、
決まった時刻にメッセージ通知されます。

**・Shellバージョン**

```shell
#!/bin/bash

#定数宣言
CLIENT_ID="XXXXXX"
CLIENT_SECRET="XXXXXXXXXXXXXXX"
USER_ID="XXXXXXXXXXXXXXXXXXXXX"

#メッセージの内容
MESSAGE="朝だよ！起きてよ～(^^"

#アクセストークン情報取得
curl -v -X POST https://api.line.me/v2/oauth/accessToken \
-H "Content-Type: application/x-www-form-urlencoded" \
--data-urlencode 'grant_type=client_credentials' \
--data-urlencode "client_id=${CLIENT_ID}" \
--data-urlencode "client_secret=${CLIENT_SECRET}" > /tmp/access_token.txt

#アクセストークン抽出
ACCESS_TOKEN=`cat /tmp/access_token.txt | awk -F ":" '{print $2}' | awk -F "," '{print $1}' | tr -d '"'`

curl -X POST \
-H 'Content-Type:application/json' \
-H "Authorization: Bearer {${ACCESS_TOKEN}}" \
-d '{
    "to": "'${USER_ID}'",
    "messages":[
        {
        "type": "text",
        "text": "'${MESSAGE}'"
    }
    ]
}' https://api.line.me/v2/bot/message/push
```

#■実行結果

あとは自分のLINEアカウントを「どんギツネチャンネル」に登録するだけです。

毎朝8時になると「どんギツネさん」から目覚ましメッセージが通知されます！


![C62A9D8D-20BB-496E-8732-A664E477F1B4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/314234/161c2467-dfc7-2426-ec16-5aec636b93a3.png)


これは流石にこわいですが・・:fearful:
![ACF7D6E0-E3E9-49A6-9EAA-3BFBBD385646.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/314234/d87e2e6b-0112-85b1-58ba-45651f373002.png)


#■まとめ

LINE APIを使うことでこのようなプッシュ通知やBOT機能を使うことができます！

無料で手軽に利用できますので、
是非みなさんも遊んでみてはいかがでしょうか！:runner_tone2:

それでは、良いメリクリを～:santa_tone4: