【GAS】雨が降りそうな日に通知してくれる LINE BOT を作る

## :star: 作るもの
雨が降りそうな日の朝にLINEでメッセージを届けるようにします。

<div align="center">
<img width="320" alt="unnamed.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/55603/f943dbb6-10f6-79d5-424c-1dc655560e57.jpeg">
</div>
（1個だけごみ捨てのメッセージが混ざってますが、これは別です。）

## :scissors: 使うもの
・LINE Developersアカウント
・Google App Script
・Liverdoor Weather API

## :exclamation: おおまかな流れ
・LINE Developersに登録
・プロパイダを作成
・チャネル（BOTのアカウント）を作成
・BOTと友達になる
・GASでAPIを叩いて雨が降りそうか判定するスクリプトを作る
・GASからLINE BOTを介して自分にメッセージを送らせる
・毎朝このスクリプトを実行するように設定する

## :collision: LINEのDevelopers設定編
### LINE Developersに登録
https://developers.line.biz/ja/
![LINE Developers Top.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/55603/c7e791fe-3ea5-ad2f-c45f-def5483cb467.png)

LINEアカウントを持っていれば簡単に登録出来ると思います。

※UIなどは記事執筆時点のものなので多少変わるかもしれません

### プロパイダを作成
![LINE Developers.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/55603/6efd74cf-2f6c-30d0-a1d5-440b268f45b8.png)
ログインが済むと上のような画面になると思うので、新規プロバイダを作成します。
普通に開発者自身の情報を入れて行けば良いです。

### チャネルの作成
![LINE Developers2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/55603/78ec9b4d-eba2-2486-2c9d-fbc0892e75b5.png)

次にチャネルの作成です。「新規チャネル作成」を押します。
チャネルと言うと何かややこしいですが、BOTの登録だと思ったら良いと思います。

![LINE Developers3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/55603/f09ab7af-173f-745e-cfbb-d000147fb1db.png)

今回の用途では「Messaging API」を選択します。
次の画面で、アプリ名やアイコンなど好きに設定したらええんちゃうかな。

## 作ったBOTと友達になる
作成したチャネルの設定画面の下の方に行くと、QRコードがあります。
ここから友達登録をすると良いと思います。
![LINE Developers 7.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/55603/c5edbff3-be0c-5ee9-e3b8-e6431168f88a.png)


### メモっておくもの
- アクセストークン
チャネルの設定画面の中盤くらいにあります
「-」になっていたら「再発行」を押す
![LINE Developers4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/55603/94d71a68-6417-dce2-d8ed-2d322007dae6.png)

- 自分のID
チャネルの設定画面の一番下にあります
※この自分のIDとは友達検索とかで使うIDとは違います
![LINE Developers6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/55603/dab3f968-637d-0202-e64d-7bef4e58b8ad.png)


## :collision: Google App Script編
![Apps Script – Google Apps Script.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/55603/6a278d79-64e1-78a5-e869-69f3525c97af.png)

Googleアカウントは持っている前提で行きます。

https://www.google.com/script/start/

ここの「Start Scripting」から App Script を始めることが出来ます。
ダッシュボードに入ったら左上くらいにある「新規スクリプト」を押してスクリプト編集画面を開きます。

### 具体的なコードの例
とりあえず先にコードを貼ります。

```JavaScript
function main() {
  
  // お天気APIを読んで結果をもらう
  const result = callWeatherAPI();
  
  // 正常にAPIから応答があるか
  if (result.getResponseCode() !== 200) {
    
    // 異常があればメッセージを失敗を知らせるものにする
    var message  = "何か失敗しました。レスポンスコード：" + result.getResponseCode();
  
  } else {
    
    // 正常ならデータをJSONにパース
    var data =  JSON.parse(result.getContentText()).forecasts[0].telop;
    
    // 結果に雨という文字が含まれないなら何もせず中断する
    if(data.split("").indexOf("雨") == -1) {
      return;
    }
    
    // メッセージを設定
    var message = "今日は雨が降るかもしれません。\n\n予報：" + data;
    
  }
  
  // LINEへ送信
  var line_access_token = "YOUR_ACCESS_TOKEN";
  var line_to = "YOUR_LINE_TO";
  sendToLine(line_access_token, line_to, message);

}

// *******************************************
// Livedoorのお天気APIを叩いてレスポンスをもらう関数
// *******************************************
function callWeatherAPI() {
  const response = UrlFetchApp.fetch(
    "http://weather.livedoor.com/forecast/webservice/json/v1?city=400010", // TODO: set your city number
    {
      "method" : "get",
      "headers" : {
        "Content-Type": "application/json"
      },
      "muteHttpExceptions": true
    }
  );
  return response;
}

// *******************************************
// LINEボットへ送信する関数
// *******************************************
function sendToLine(access_token, to, message) {
  var url = "https://api.line.me/v2/bot/message/push";
  var headers = {
    "Content-Type" : "application/json; charset=UTF-8",
    'Authorization': 'Bearer ' + access_token,
  };

  var postData = {
    "to" : to,
    "messages" : [
      {
        'type':'text',
        'text': message,
      }
    ]
  };

  var options = {
    "method" : "post",
    "headers" : headers,
    "payload" : JSON.stringify(postData)
  };

  return UrlFetchApp.fetch(url, options);
}
```

このままでは動かないので、編集しないといけない部分があります。

#### LINEの設定部分
中盤のこの部分

```JavaScript
  var line_access_token = "YOUR_ACCESS_TOKEN";
  var line_to = "YOUR_LINE_TO";
```

ここをそれぞれLINE Developers編でメモったアクセストークンと自分のIDに差し替える必要あり。

#### どの都市の天気を取得するかの設定

```JavaScript
const response = UrlFetchApp.fetch(
    "http://weather.livedoor.com/forecast/webservice/json/v1?city=400010", 
```

デフォルトだと九州の久留米になっています。

都市のIDやパラメータの設定などはこちら参照。
今のところAPI KEYなどは不要なようです。

http://weather.livedoor.com/weather_hacks/webservice

### 関数を実行する
編集画面上部の再生ボタンみたいなマークを押すと関数を実行出来ます。

この時、実行する関数は「main()」関数にします。
「関数を選択」からmain関数が指定されているのを確認してください。

![wheather_forecast.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/55603/5a8ff9d5-5072-6d2d-42b1-35afbfd240c1.png)

各項目が正常に指定できていれば、さっき作ったボットからメッセージが送られてくる...と言いたいところですが、雨の予報でなければ送られてきません。

```JavaScript
    // 結果に雨という文字が含まれないなら何もせず中断する
    /*
　　if(data.split("").indexOf("雨") == -1) {
      return;
    }
    */
```

この部分をこのようにコメントアウトすれば、とりあえずどんな予報でも「今日は雨が降るかもしれません： 予報内容」というメッセージが届くと思います。



挙動を確認したらコメントアウトを元に戻しておきましょう。

### 定期実行を行う
今度はこれを自動的に毎朝実行出来るようにしたいです。
GASはかなり簡単に定期実行が出来るようになってます。

まずスクリプト編集画面上部にある時計みたいなアイコンをクリックします。
![wheather_forecast2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/55603/2366defc-59c8-0d4b-c947-9f1d92bf11f7.png)

するとトリガー一覧画面に移るので「トリガーを追加」をクリック。
![wheather_forecast - プロジェクトのトリガー - Apps Script.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/55603/20679e56-d528-efe2-ae1a-d2bec9907421.png)

実行する関数を「main」にして、「日付ベースのタイマー」を選択。
時間は好みで良いです、朝の6時～7時とかが良いんじゃないでしょうか。

![weather_forecast - プロジェクトのトリガー - Apps Script2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/55603/4dd0c7dc-f2fb-c257-9a52-5ea4a258ba4c.png)

## :umbrella: 結果
毎朝、天気予報が雨の場合はメッセージが届くようになります。

冒頭と同じ画像ですが...以下のように。
<div align="center">
<img width="320" alt="unnamed.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/55603/f943dbb6-10f6-79d5-424c-1dc655560e57.jpeg">
</div>