行く先の天気をサクッと知り忘れ物を防止？！～さらにメモにも対応するLINE Bot～

※2024/4/30
<b>LINEリッチメニューからGoogleスプレッドシートへの書き込み方法を追記しました。</b>

## 傘忘れてないですか？
私は小売業の本社でテナントさんの管理をしております。

わが社の店舗は一番東の店舗から一番西の店舗まで直線距離にして約350km。
当然、道はまっすぐではないので...
本社から店舗へ行くのに往復200km、300kmなんて当たり前。
こっちは雨が降っていないのに店舗についたら雨ふってる...みたいなのがよくあります。
そんな時に、現地の天気をさくっと知りたいと思い、現地の天気を教えてくれるLINE Botを作りました！さらに、私は天気痛からくる頭痛を記録しています。この機能も追加しようと思います。

<img width="500" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3754093/3931b97b-6d87-0f75-8865-8c85de671058.png">

## 完成品はこちら

https://x.com/hoshiee38/status/1782758607559463364

## 使用ツール
・[Make](https://www.make.com/en)
・Googleスプレッドシート
・[LINE Developers](https://developers.line.biz/ja/)
・[OpenWeatherMap API](https://openweathermap.org/)
・[CANVA](https://www.canva.com/)

## 最終構造
![12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3754093/af80b174-e8df-d37c-7af9-ad31ee948749.png)


## 作成開始

## 天気情報のAPIキー取得


日本語のAPIもあるのですが、地域コードが決まっており限定されてしまうなと思ったので、緯度・経度で設定できる[OpenWeatherMap](https://openweathermap.org/)を使用することにしました。

https://openweathermap.org/

無料でも1分間に60回使用できるということで十分です。
APIキーの取得もメールアドレスを登録すると20分ぐらいで使用できるようになります。
全て英語なので慣れないと中々大変ですが、コードに使用する言語は世界共通。
英語がわからなくてもいろいろとHelp要素が多いのでわかりやすいかと思いました。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3754093/83246a88-97b6-7c90-917e-0396f2f74d42.png">

## APIから天気情報を呼び出す
取得したAPIキーからノーコードでプロトタイプできる[`Make`](https://www.make.com/en)で作成していきます。
下記が、天気情報を呼び出すAPI。

```
https://pro.openweathermap.org/data/2.5/forecast/climate?lat={lat}&lon={lon}&appid={API key}
```

APIを呼び出すには`lat`（緯度）と`lon`（経度）で設定するので、まずは緯度と経度を調べなければなりません。ですが、緯度と経度をいちいち調べるのも大変なので、[OpenWeatherMap](https://openweathermap.org/)の中にあらかじめ用意されている`Geocoding API`を使用しました。
```
http://api.openweathermap.org/geo/1.0/direct?q={city name},{state code},{country code}&limit={limit}&appid={API key}
```
まずは`city name`から呼び出し緯度・経度を返すように設定します

<img src=https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3754093/e90b5d92-6089-0a9a-a87f-0198b81e2b72.png>
<img src=https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3754093/bdcc9795-af4e-3887-eda0-da3eef9a56ac.png>

:::note warn
<b>疑問</b> ＝ どのぐらい`city name`は設定されているのか
<b>検証結果</b> ＝ 主な市町村は`city name`からその場所の緯度と経度が導けました！
若干ずれる都市名もありましたが、調べてみると日本の座標だけでも1400地点近くあるそうです。
:::

呼び出された緯度・経度を元に天気情報を呼び出すHTTPモジュールのパラメータに設定し返ってきた情報をLINEに送ります。

:::note 
LINEへの返信も、見やすい表示方法に
:::
気温が25.00と小数点以下が表示されてしまうので`TEXT and binary functions`の`substring`で表記を２桁になるように設定しました。


<img src=https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3754093/fcadb357-20da-932c-ac27-2436fe87ccf9.png>

<b>ここで気になることが・・・</b>
英語のAPIなのでLINEから送るTEXTを英語でやっていたのですが、いちいち英語はめんどくさい！
ということで、私が行きそうな場所の英語変換Googleスプレッドシートを作成し、LINEから送られてきた日本語地名テキストを英語の`city name`に変換するGoogle Sheetsモジュールを挟み込みました。

<img src=https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3754093/8bcd2746-154e-a201-0e04-e61b5fa157d5.png>

うまく天気情報をLINEに返信できました！
ただこれでは単なる天気情報を返すだけになってしまってもったいないなと思ったので改良を！

## 改良）リプライメッセージを分ける
「天気痛」の持ち主の私は雨が降っているところへ行くには注意が必要です！

<b>そこで！</b>
雨が降っている時は違うメッセージを返そう！と条件分岐を設定しました。

:::note
参考にした記事はこちら
:::
※記事ではSSSAPIを使用していましたが私はGoogle Sheetsモジュールで設定してみました。

https://qiita.com/cog1t0/items/804461e6b6fec2a0310d

まず`天気情報`から返される値の固定18項目を、<b>雨が降っていない=0・降っている=1</b>
を分けるスプレッドシートを作成し、`TOOLS`から`Router`、`Set up a filter`で条件分岐を設定しました。

<img src=https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3754093/baf029c0-fa8f-3ea0-106b-d6f51fa67d52.png>
<img src=https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3754093/8bc8daed-7ad5-5b90-7c50-c4e30a6a0a68.png>

天気の情報は同じ内容をLINEに送りますが、雨が降っている時は一緒に画像を送る設定にしました。画像は[Canva](https://www.canva.com/)で作成。傘と薬を絶対忘れずにという思いを込めて！

<img width="300" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3754093/2f65128f-9ad4-bc1c-c5e2-aea412c1f38c.jpeg">

## 機能追加）ボタンを押したらメモを転記する
頭痛持ちである私はアプリで頭痛メモをつけているのですが、アプリを開いて薬を飲んだ時間を書き込まなくてはならず結構めんどくさいし、よく忘れる。
こちらもさくっと頭痛メモをLINEでとれるようにしたい！と
LINEのリッチメニューを作成し、薬を飲んだ時はボタンを押したらスプレッドシートに薬を飲んだメモをかきだし記録できるようにしました。

<img src=https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3754093/dabdc29e-2b01-4e03-24d8-f71bf17617ea.png>

## 2024/4/30　追記）リッチメニューからGoogleスプレッドシートへの書き込み
リッチメニューの設定方法は、LINEヤフーのマニュアルを参照してください。

https://www.lycbiz.com/jp/manual/OfficialAccountManager/rich-menus/

上記で行った<b>雨が降っている=1、雨が降っていない=0</b>の条件分岐と同様に、LINEから送られてきたメッセージが<b>地名なのか、薬なのか</b>でRouter条件分岐を設定します。
日本語を英語に変換するスプレッドシートのＣ列に、地名＝1、薬=0を追加し、Router設定で、1ならば天気情報へ、0ならばスプレッドシートに記録する設定にします。
スプレッドシートへの書き込みは`Google Sheetsモジュール`の`Add a Row`を使用、`Value`部分にスプレッドシートのＡ列に記録時間、Ｂ列にメッセージを記録する設定にします。
<img src=https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3754093/0d17889d-dde0-f1b9-d2b3-e1b27c29f442.png>

:::note
<b>苦労した点</b>：スプレッドシートに転記される時刻がUTC？GMT?で記入されてしまう
<b>解決策</b>：`Values`設定時に`Date and time`で`formatDate`を指定し、`timezone`を`Asia/Toky`で設定したら日本時間で記録できました。
:::

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3754093/ce92a8cb-c7fb-f2ef-1deb-cd09fc9e277a.png">

## 最終）天気情報＋メモ機能
LINEから送られてきたのが地名ならば天気情報をLINEに返す、
薬ボタンを押したらスプレッドシートに記録し、LINEで記録しましたとメッセージを返す。
２つの機能を搭載しました。


<img width="400" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3754093/c9453e76-88ca-c5ed-4dca-463a46231cb7.png">

## 最後に
作成途中で知ったのですが、[Make](https://www.make.com/en)には天気モジュールがあり、どうやら[OpenWeather](https://openweathermap.org/)を使用しているらしく、試しにやってみたのですが同じ値が返ってきました。でも少々返ってくる値が少ない？
私が必要とする項目は一緒なのでそれでもよかったのですが、天気モジュールは`city name`で指定するので、悩んだあげく天気モジュールは使いませんでした。
LINEにリプライが返ってくるまでの時間の短縮を考慮すると天気モジュールを使用した方がいいかもしれない？今後検証してみようと思います！

## 更なる改良点（案）
[OpenweatherMap](https://openweathermap.org/)にはレスポンスに天気`icon`も設定されているのですが[Make](https://www.make.com/en)ではうまく表示できませんでした。（要検証！）
また、今回は雨が降っている、降っていないで分けましたが、もっと細かく分岐をして天気によって自身の設定アイコンを表示にしたりメッセージを変えたりしても面白いし、さらにメモ機能も用途に合わせたり、その時の天気も記載できるようにすると今後の頭痛対策にも役立つかなと思ったので改めて改善・挑戦しようと思います！

こんな機能あったらいいかもというアイデアがありましたら是非教えてください。
最後までお読みいただきありがとうございます！