出張中にその付近の人口動態が知りたくなった時に便利なLine-botの制作（追記0912）

# 概要
  いわゆるLine-botです。
　Lineトーク画面に全国の市区町村名を入力すると、[内閣府のRESAS](https://opendata.resas-portal.go.jp/)より、人口データを引いてきて、2000年～2030年の総人口を10年刻みで答えてくれます。都市名以外の入力すると、それには答えず、使用法を説明してくれます。
---
　**完成したものを同僚に見せて、遊んでもらいました。実用性云々よりも、面白がって遊んでくれたのですが、自分でも気になっている部分を指摘されました。「7桁になる数字に、桁区切りがないのは、読みにくい。」という指摘です。もっともなので、何とかできないか、挑戦してみました。(0912追記)**

# 実際の動作の様子
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">出張中にその付近の人口動態が知りたくなった時に便利なLine-botを作りました。　<a href="https://twitter.com/hashtag/protoout?src=hash&amp;ref_src=twsrc%5Etfw">#protoout</a> <a href="https://twitter.com/hashtag/linedc?src=hash&amp;ref_src=twsrc%5Etfw">#linedc</a> <a href="https://twitter.com/hashtag/linebot?src=hash&amp;ref_src=twsrc%5Etfw">#linebot</a> <a href="https://twitter.com/hashtag/withmake?src=hash&amp;ref_src=twsrc%5Etfw">#withmake</a> <a href="https://t.co/WJTIW0utUZ">pic.twitter.com/WJTIW0utUZ</a></p>&mdash; 古田　一成 (@kaz_furuta) <a href="https://twitter.com/kaz_furuta/status/1566349085602304001?ref_src=twsrc%5Etfw">September 4, 2022</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

こちらのQRコードで、実際に試せます。Lineに追加のトークが現れます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2819670/a72c4e8a-a8df-e4bd-eb6d-8b98f4838175.png)
（予告なしに別のBotに変わっていたり。動かなくなっていてもご了承願います。）



## 改良後の動作画面（0912追記）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2819670/0e6d0aa9-9476-d203-50f9-e8935c4ee92d.png)

# 製作の意図
　本業が小売り業なので、出張先や旅行先で、ふとその付近の人口が気になることがあります。
そんな時、これまでは「Hey！Siri」ってやっておりましたが、シリは直近のデータ1年しか教えてくれません。本格的に調べるほどでもないので、簡単に調べる方法があれば便利だと思い作りました。
　**人口が判れば、自分のよく知っている地域・商圏と比較して考えることができます。
 また東北では、過疎化の進行が著しいので商店街、ショッピングモール等でも空床が目立ちます。オープンしたときは、お店が入っていたと思われるスペースに、イスとテーブルが並べられ休憩ゾーンに代わっていたりします。そんな時は、過去と未来の人口も気になるので、一緒に表示するようにしました。オジサンが驚きまくっているのは、そこから来ています。（0912追記）**

# 使用したツール

・[Make](https://eu1.make.com/)     :Line-botの中身
・[Line-Devlopers](https://developers.line.biz/ja/)：Line-botのインターフェース
・[RESAS](https://opendata.resas-portal.go.jp/)：人口データを取得するAPI
・[e-Stat](https://www.e-stat.go.jp/)：市区町村コードデータをCSVでDL
・Google スプレッドシート：市区町村コードデータを作成しGoogleDriveから参照
 
 :::note info
  すべて無料で利用可能ですが、事前に登録が必要です。
:::

# 製作のツボ
## ・Makeの全シナリオ図
使用したモジュールと流れを示します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2819670/08ed310e-5c8a-22a6-ad2b-035f82ac97d1.png)

## ・最初のLine(Watch events)の設定
　自分のラインデベロッパーチャンネルとの間でチャネルアクセストークンと
　Webhook URL を設定してください。
　詳細は、今回割愛しますが、"make","integromat","Line"などで検索すれば、ヒットします。

## ・GoogleSheets（Serch rows）の設定
あらかじめ[e-Statサイト](https://www.e-stat.go.jp/municipalities/cities/areacode)から市区町村コードをCSV形式でDLし、次のようなフォーマットに加工して、Googleスプレッドシートに貼り付け、GoogleDriveに保存しておきます。（実際には、約2000行あります。）

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2819670/c935175b-b357-86d2-9fc3-c829dd3aed14.png)
モジュールは下のように設定します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2819670/598db661-1eee-77e5-3811-c951bbe513a7.png)

## ・Routerの設定
こちらのモジュールを使用して、APIに渡すべき二つのコードが揃っているかどうかで分岐させます。
実際には、都市名が正しく入力されているかどうかを判断したいのですが、用意したSheetのデータに
不備がある場合も含めて、コードが揃わなかったときに、説明文を返信して終了するようにしました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2819670/f8f4a114-165f-8027-0b0f-29379a7294b1.png)

## ・真ん中のLine（Send a Reply Message）の設定
こちらは、コードが揃わなかった時の処理です。最初の入力例を説明するメッセージを返信します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2819670/f961317e-4ac5-9299-ce9e-a3900fee64e5.png)

## ・HTTP(Make a Request)の設定
APIに揃った二つのコードを受け渡して、求めるデータを要求します。
APIが二つのコードを要求しているというのは、ここから発生しています。

今回使用したRESASのAPIの[概要](https://opendata.resas-portal.go.jp/docs/api/v1/population/composition/perYear.html)

|API Endpoint　|https://opendata.resas-portal.go.jp|
|:-:|:-:|
|SSL Support	|対応|
|利用可能なHTTPメソッド|GET|
|レスポンスデータフォーマット|json|

| リクエストヘッダー | 値 |
|:-:|:-:|
| X-API-KEY  | {APIキー：登録時に発行される}  |

| Name |Description | Required |
|:-:|:-:|:-:|
| prefCode  |  都道府県コード | 	true  |
|  cityCode | 市区町村コード「すべての市区町村」を選択する場合は「-」を送ります。  |  true |

### Sample: GET https://opendata.resas-portal.go.jp/api/v1/population/composition/perYear?cityCode=11362&prefCode=11

これらの情報をもとに、次のように設定します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2819670/cc04c3e9-bf58-4bbb-e9bd-a21d85b63f01.png)

## ・JSON（Parse Json）の設定
APIから受け取ったデータは、Jaon形式で複雑なので、使いやすい形に加工します。

先ほども出てきたRESASの[ページ](https://opendata.resas-portal.go.jp/docs/api/v1/population/composition/perYear.html)から、サンプルの出力例をコピーし、
JSONモジュールに張り付けて解析させます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2819670/5dd49b78-347a-46e0-4c15-8f0c454fe4a5.png)


## ・右側のLine（Send a reply Message ）の設定
最後にJSONモジュールが使いやすいように解析してくれたデータから
必要なデータを拾って、返信メッセージを作ります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2819670/bc191c12-47af-9502-ec60-cccb0d3f5ac9.png)

## ・右側のLine（Send a reply Message ）の改良設定（0912）
　表示する人口に桁区切りを入れる。Excelだったら、簡単にできることなのに、Makeではどうすればよいのか、かなり探し回り時間を浪費しました。当初、JsonモジュールとLineモジュールの間に別のモジュールを追加するか、つなぎ目のところでフィルタにかけるのかという想定で探しまくっていたのです。
　結果として、integromatのHelpの中に答えを見つけました。
[https://www.integromat.com/en/help/math-functions](https://www.integromat.com/en/help/math-functions)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2819670/b623ba6f-d629-24d4-0f15-7bef8ea790fe.png)
これなら、次のように引数を渡してやれば、良さそうです。
| 項目 | 値 |
|:-:|:-:|
| number  | Jsonから貰った人口  |
| decimalPOINTS  | 小数点以下不要のため0  |
| decimalSeparator  | . |
| thousandsSeparator  | ,  |

日米で、小数点記号と桁区切り記号が逆なのも面白いですが、この関数らしきものをどこに入力すればよいのか、しばらく悩みました。悩んだ末、ほかに思い当たるところもないので、最後のLineモジュールの返信メッセージを決めているところに式を当てはめることで成功しました。
入力には、コツが必要です。
![formatNumber1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2819670/eca76428-5133-436a-3195-acffe3899369.png)
この上図のように、TEXTの内容を入力する欄をクリックすると出てくるメニューから「X1」を
選びます。（通常は「☆」が選ばれています。）Math functionsのメニューから、formatNumberを選ぶと、関数が、引数なしで、入力されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2819670/961aaf83-f380-b673-d723-2804a59ce9d6.png)
赤で印をつけた一番左の隙間を狙って、もともと入力していた人口を表す式をドラッグアンドドロップするのです。「：Value」という紫の四角をドラッグするとうまくいきます。
2番目以降の赤の隙間には、それぞれ、「0」「.」「,」をタイプするだけです。


最終的に完成した入力項目
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2819670/c85a1ea6-3a32-68c4-7097-e20f21366c62.png)

因みに、今回は試しませんでしたが、「X1」のとなりにある「A」のタブを選ぶと、メッセージの書体やサイズも指定できるようでした。意外と気がつかない機能だと思います。

# ・感想

 今回、はじめてノーコードツールと言われるものを利用しました。想像していたよりも、
はるかに強力で、いろいろな事が出来そうなのは、少し触っただけで理解できました。
一方、よくわからない設定項目や、使い方の見えない部品も多く、消してとっつきやすい物とは言い難いという印象も拭えません。翻訳しながら、マニュアルを見たり、日本人の投稿を探したりと、結構時間がかかりました。最後にものをゆうのは、語学力なんですね。もっと勉強しておくべきでした。
　それでも、作っている間はパズルをやっているようで、時間を忘れて取り組んでいました。
今後も、いろいろ作っていきたいと思います。
　さて、今回作成したLine-botも、まだまだ改良の余地が残っています。
RESASから取得できるデータは、膨大かつ実用的なデータが豊富なので、一問一答的なLine-botでは、活用できる内容も限られます。しかしながら、人口増減率も表示するとか、二つの都市のデータを比較するとか、結果をグラフで見せるとか、結果によって表示するアニメスタンプを変えるとか。時間があれば取り組んでみたいと考えています。
**改良するに当たり、実は、グラフを表示することも検討しました。いろいろ探してはみたのですが、適当なモジュールが見当たらない。思いついたのは、GoogleSheetsに一度数値を書き出して、sheets上で折れ線グラフを作り、グラフを画像として、Googleドライブ上に保存。保存したグラフ画像をMakeを通してLineに帰すという流れです。しかし、この流れも、現状のGoogleSheetsモジュールでは、コントロール出来なかったので、何かうまい方法がないか探しています。ご存じの方がおられましたら、返信を付けていただけるとうれしいです。（0912）**