初心者向け！毎日の天気予報をLINEに通知し、Googleスプレッドシートに記録するアプリを作成しよう

## はじめに
こんにちは！今回はプログラミング初心者の方向けに、少しでも楽しく感じてもらえるように簡単なアプリを一緒に作っていきます。「プログラミングってつまらないな…」と思っている方も多いかもしれませんが、私も同じような気持ちになったことがありました。だからこそ、わかりやすく楽しく学べるように説明していきます。

今回作るのは、毎日の天気予報をLINEに通知し、Googleスプレッドシートに記録するアプリです。このアプリを使うと、毎日決まった時間に自動で天気予報を取得し、その情報をLINEで通知したり、Googleスプレッドシートに自動で保存したりすることができます。日記やレポート作成、さらにはお店の売上データを分析する時にも役立つかもしれません！

## 完成イメージ
このアプリでは、毎日、指定の時間帯に天気予報を自動取得し、それをLINEに通知し、さらにGoogle Spreadsheetに以下のように記録します。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/561875/ecde99c9-e47a-18be-bd75-d001d41dbcde.png" width="60%" />
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/561875/5ca77fc4-83bc-1c85-c028-6ca8182e4148.png" width="60%" />



これを使えば毎日、天気予報を簡単に記録していくことができます。

## 準備するもの
- **Googleスプレッドシート**
- **LINE Messaging API**

## ソースコード
今回使用したソースコードは下記のレポジトリにあります。ぜひ参考にしてみてください。

https://github.com/Nakkinakki55/WeatherNotify


## LINE Messaging APIの設定
天気予報をLINEに通知するため、LINE Messaging APIを使用します。以下の手順で設定を行います。

1.[LINE Developers](https://account.line.biz/login?redirectUri=https%3A%2F%2Fdevelopers.line.biz%2Fconsole%2F)にアクセスし、普段利用しているLINEのアカウントでログインします
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/561875/d67be76b-9015-2744-7f14-9ce89f819919.png" width="60%" />

2.ログイン後、このような番号が発行されるので、自分のLINE上で登録してください
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/561875/35ecbb42-4752-23c6-38e6-87258ff37ee5.png" width="60%" />
3.ログイン成功後に以下のような画面が表示されるので、必要な情報を入力してください。開発者名は任意の名前で問題ありません。完了後は画面の下部にある「アカウントを作成」ボタンを押してください
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/561875/8b1c5096-aa20-2e31-d9d9-b46205bd6742.png" width="60%" />

4.ホーム画面に遷移します。そして「新規プロバイダー作成」ボタンを押下してください
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/561875/f61fff59-cc10-d829-fe3a-7a0304435b36.png" width="60%" />

5.新規プロバイダー作成の画面に移ります。プロバイダー名を設定して「作成ボタン」ボタンを押下してください
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/561875/5c39d78f-db28-409b-0d71-bd24cf37bfd2.png" width="60%" />
6.画面を遷移したら「Messaging API」をクリックしてください!
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/561875/2b3e07b5-7429-5fb2-16c0-b84ba4dae945.png" width="60%" />
7.「LINE公式アカウントを作成する」ボタンを押してください
8. 画面遷移後いくつかのログイン処理を経たら下記のような画面に移り、SMS認証を行ってください!
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/561875/3c60945e-5c2f-1ae3-3ea5-6f136f4ca4be.png" width="60%" />
9.チャンネルの新規作成画面に移るので、必要な情報を記載してください<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/561875/8d8a6a7f-ee74-18f7-ba54-29799682e1ae.png" width="60%" />
10.いくつかの同意事項をクリックしていき、最終的にはこのような画面に遷移します。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/561875/baec4208-fa41-cd25-a42c-3ab206871827.png" width="60%" />
11.「Messaging API」を押下する
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/561875/002f6aa5-0f81-7f53-bc48-7453f7eba739.png" width="60%" />
12.「Messaging APIを利用する」を押下する
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/561875/63dafb64-5e9b-7c9e-5f77-d9b490a489fd.png" width="60%" />
13.プロバイダーを選択して、同意するボタンを押下する
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/561875/d1e78b73-3a37-a97c-2ea5-dbe07ac79b28.png" width="60%" />
14.完了後はこのような画面が表示されるので、Channel IDとChannel secretの値が表示されます
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/561875/447e1222-fdd7-1cb4-c03e-f9dcfd2a0e16.png" width="60%" />
15.  **6**で作成した画面に戻るとこのように表示されるので、作成したチャンネルをクリックする
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/561875/54898e31-24c0-689b-80f5-2421915254eb.png" width="60%" />
16.「Messaging API設定」を押下
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/561875/106b75fa-f7cc-5a52-e7b2-0e6675f2f1c2.png" width="60%" />
17.チャネルアクセストークンの「発行」ボタンを押下して、表示されたトークンをコピー<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/561875/767718d9-2d79-669c-cc0b-26b56915d686.png" width="60%" />
18.「チャネル基本設定」を押下して、ページの下部にある「あなたのユーザーID」の値をコピー
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/561875/11be623c-7104-5a5e-fe67-1810e9cad13b.png" width="60%" />

## Google Spreadsheetを準備
### 準備編
1.まずは[Googleスプレッドシート](https://docs.google.com/spreadsheets/)を開き、新しいシートを作成しましょう。ファイル名は「東京_天気予報通知アプリ」など、わかりやすい名前にしておきます
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/561875/ba6695c7-6249-239b-df49-1516376e5003.png" width="60%" />
2.Googleスプレッドシートのコードエディタを開くために、「Apps Script」を開いてください
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/561875/b377ae60-d20b-af42-4fed-12959964051d.png" width="60%" />
3.画像のようなプロジェクト画面が開きます。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/561875/63a93d2c-dd12-f435-0b7c-79057f23daba.png" width="60%" />
4.下記のコードを張り付けて、Ctrl+sでコードを保存してください

```javascript
// GASでLINE Messaging APIにメッセージを送信する関数
function sendLineMessage() {
  const accessToken = '[LINE Messaging APIの設定の17で取得したトークン]'; // ここに自分のLINE Messaging APIのアクセストークンを入力
  const userId = '[LINE Messaging APIの設定の18で取得したユーザーID]'; // ここに送信先のユーザーIDを入力

  const message = fetchWeatherForecast(); // 送信するメッセージ

  const url = 'https://api.line.me/v2/bot/message/push';
  const headers = {
    'Content-Type': 'application/json',
    'Authorization': 'Bearer ' + accessToken,
  };
  const payload = {
    to: userId,
    messages: [
      {
        type: 'text',
        text: message,
      },
    ],
  };

  const options = {
    method: 'post',
    headers: headers,
    payload: JSON.stringify(payload), // JSON.stringifyを使用してpayloadを文字列化
  };

  // LINE Messaging APIにメッセージを送信
  const response = UrlFetchApp.fetch(url, options);
  Logger.log(response.getContentText());
}

// 天気予報を取得する関数
function fetchWeatherForecast() {
  const url = "https://www.jma.go.jp/bosai/forecast/data/forecast/130000.json";

  try {
    const response = UrlFetchApp.fetch(url);
    const data = JSON.parse(response.getContentText());

    var msg = "東京都の天気予想\n-------------\n"
    // 東京都の今日の天気
    var todayForecast = data[0].timeSeries[0].areas[0].weathers[0];
    msg = msg + "今日の天気: " + todayForecast + "\n\n";

    // 東京都の明日の天気
    var tomorrowForecast = data[0].timeSeries[0].areas[0].weathers[1];
    msg = msg + "明日の天気: " + tomorrowForecast;

    // スプレッドシートにデータを記入
    recordWeatherData(data[0].timeSeries[0].areas[0].area.name, todayForecast);
    
    return msg;
  } catch (error) {
    return "エラーが発生しました: " + error.message;
  }
}

// Google Spreadsheetに天気データを記録する関数
function recordWeatherData(cityName, weather) {
  const sheetName = "天気記録01";
  const spreadsheet = SpreadsheetApp.getActiveSpreadsheet();
  let sheet = spreadsheet.getSheetByName(sheetName);

  // シートが存在しない場合は作成
  if (!sheet) {
    sheet = spreadsheet.insertSheet(sheetName);
    // ヘッダーを追加
    sheet.appendRow(["日時", "都市名", "天気"]);
  }

  // 現在日時を取得
  const now = new Date();

  // データを追加
  sheet.appendRow([now, cityName, weather]);
}


```
5.　このコードが動くかテストするために、実行する関数をsendLineMessageにして実行ボタンを押下してください
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/561875/1000d0b9-e431-c2db-9f88-c4870dceb542.png" width="60%" />
6.下のようなメッセージボックスが表示されるので、「権限を確認」を押下してください
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/561875/b95c0073-1243-5f79-894f-21c1a5230af3.png" width="60%" />
7.自分のアカウントを選択してください
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/561875/7834cda7-e67a-b215-b83f-f4942605a071.png" width="60%" />
8.少し不安なメッセージが表示されますが、気にせず下記の順番でクリックしてください
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/561875/6de7985c-3737-93a7-83f2-4c99ff3e84eb.png" width="60%" />
9.「許可」ボタンを押下してください
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/561875/8eca85a5-9218-050b-5b71-5f62e9293a18.png" width="60%" />
10.3のプロジェクト画面に戻って下記のようなメッセージが出ていれば、成功です。なお、次回から関数を実行するときは6から9までのことをする必要はありません。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/561875/cd0efe97-bb9b-5e97-a034-45ddd526e83a.png" width="60%" />
11.Googleスプレッドシートが下記のように表示され、なおかつLINEに下記のメッセージが送られてきたら成功です
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/561875/3c430272-bb02-591f-10bc-a9cbf01de05f.png" width="60%" />
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/561875/2ed414b8-c310-7351-3e56-0ea17bfc4e2c.png" width="60%" />


### スケジュール実行の設定
これでアプリが特定の時間に毎日実行されるように設定する準備が整いました。Google Apps Script（GAS）でトリガーを使うことで、設定した時間に天気予報を取得し、LINE通知を送信することができます。完成まであと少しです。

1.プロジェクト画面の左方にある「トリガー」ボタンを押下してください
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/561875/07d6554b-32ad-408b-2536-9a0288de6a2d.png" width="60%" />
2.右下にあるトリガーを追加ボタンを押下してください
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/561875/c36d6947-8a29-4227-5223-1e3538d8d4bd.png" width="60%" />
3.以下のようにトリガーの設定画面が表示されます。ここで、実行したい時間を設定できます。今回は他の設定については省略しますが、設定が完了したら「保存」ボタンを押して完了です。例えば、以下の設定では「毎日午前8時から9時の間にsendLineMessage関数が実行される」ことになります。なお、Googleスプレッドシートの仕様により、特定の時間や分まで細かく設定することはできませんので、その点はご注意ください。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/561875/779fb0fe-38e7-108d-6315-33c36e230940.png" width="60%" />

## 少し解説
このアプリでは、GASを使って天気予報データを取得し、その情報をスプレッドシートに保存したりLINEに通知したりしています。特に「どのようにして天気予報データを取得しているのか？」が気になる方もいるでしょう。
### 天気予報データの取得部分
以下のコードで、天気予報データを取得しています。
```javascript
// 天気予報を取得する関数
function fetchWeatherForecast() {
  const url = "https://www.jma.go.jp/bosai/forecast/data/forecast/130000.json";

  try {
    const response = UrlFetchApp.fetch(url);
    const data = JSON.parse(response.getContentText());

    var msg = "東京都の天気予想\n-------------\n"
    // 東京都の今日の天気
    var todayForecast = data[0].timeSeries[0].areas[0].weathers[0];
    msg = msg + "今日の天気: " + todayForecast + "\n\n";

    // 東京都の明日の天気
    var tomorrowForecast = data[0].timeSeries[0].areas[0].weathers[1];
    msg = msg + "明日の天気: " + tomorrowForecast;


```
### 気象庁の天気予報APIの解説
[https://www.jma.go.jp/bosai/forecast/data/forecast/130000.json](https://www.jma.go.jp/bosai/forecast/data/forecast/130000.json) は、気象庁が提供する天気予報の公式のAPIです。このURLにアクセスすることで、東京都の天気予報データを取得できます。データはJSON形式で提供され、プログラムがデータを扱いやすいように構造化されています。URLに含まれる「130000」は、東京都の都道府県コードを指しており、他の都道府県コードに変更することで、別の地域の天気予報も取得することができます。都道府県コードの詳細は、気象庁のAPIと予報区のコードについては[こちら](https://anko.education/webapi/jma)を参考にしてください。

取得したデータの解析方法についてですが、JSONデータ内にはtimeSeriesやweathersといった項目があり、これらを使用して「今日の天気」や「明日の天気」を取得しています。例えば、「今日の天気」は data[0].timeSeries[0].areas[0].weathers[0] で取得でき、「明日の天気」は data[0].timeSeries[0].areas[0].weathers[1] で取得できます。時間がある時に、実際にAPIから取得したデータの構造を確認してみてください。


## まとめ
これで、毎日指定した時間に天気予報を取得し、Googleスプレッドシートへ記録、そしてLINE通知するアプリが完成しました！このプロジェクトを通じて学べることは多くあります。天気予報APIの活用、GASによるデータの自動処理、さらにはLINE Messaging APIとの連携です。これらの技術は他の用途にも応用が利きますので、ぜひ活用してみてください。お疲れ様でした！

## 参考文献
[気象庁のAPIと予報区のコード | WebAPI | あんこエデュケーション](https://anko.education/webapi/jma)
[[初心者向け] LINE Messaging APIでWebサイトからメッセージ送信してみる - Qiita](https://qiita.com/teaparty/items/b48d8ea8496895e2f3d8)
[メッセージを送信する | LINE Developers](https://developers.line.biz/ja/docs/messaging-api/sending-messages/#send-messages-at-any-time)