2020年4月 Node-REDハンズオン (地図アプリ構築)

#はじめに
このドキュメントは、[2020年4月 Node-REDハンズオン(Node-RED環境の準備)](https://qiita.com/kolinz/items/e331a71d2c68ff14fbda)の続きです。Node-RED環境が用意できていない場合は、[2020年4月 Node-REDハンズオン(Node-RED環境の準備)](https://qiita.com/kolinz/items/e331a71d2c68ff14fbda)をもとに、Node-RED環境を構築してください。

[2020年4月10日のハンズオン](https://bmxug.connpass.com/event/171668/)教材です。

##IBM Cloud 以外で、Node-REDを使いたい方へ
AWSやMicrosoft Azure、自社サーバーや自宅サーバーでも構いませんので、参考情報を確認しまして、Node-RED環境と構築し、「node-red-contrib-web-worldmap」ノードと「node-red-contrib-cloudantplus」ノードを追加してください。
###参考情報
* [Node-RED日本ユーザー会ドキュメント](https://nodered.jp/docs/getting-started/)
* [node-red-contrib-web-worldmap](https://flows.nodered.org/node/node-red-contrib-web-worldmap)

#作成見本
##画面ショット
下図のような地図サービスです。サージカルマスクの在庫の有無について表示しています。
在庫がある場合は緑色のマーカーで表示され、在庫がない場合は赤色のマーカーが表示されます。各マーカーをクリックすると、吹き出しが表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41414/d46988b3-f2c8-7fda-8847-67dea4b90c67.png)

##サンプルデータ
下記のような在庫情報のデータベースがあるとします。本ドキュメントでは、手軽に試すために下記のデータをNode-RED内の在庫情報を埋め込んでいます。実際は、在庫管理システムから呼び出すことになります。「stockstatus」が在庫の有無を、yesとnoで表現しています。
latitudeとlongitudeがポイントです。緯度と経度をセットすることで、地図にマーカーを設置することができます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41414/88a8e4a5-2a30-95df-b653-525221da85ef.png)

###Node-REDに埋め込んだ在庫情報
```
'created,updated,latitude,longitude,shop,Country,State,city,address line,phone,type,stokstatus\n2020-04-07T00:13:33.870Z,2020-04-07T01:53:52.136Z,35.678815,139.787181,shop-A,JPN,Tokyo,chuo-ku,hakozaki,03-0000-0000,surgical-mask,yes\n2020-04-06T23:45:01.895Z,2020-04-07T01:33:29.737Z,35.173063,136.882257,shop-B,JPN,Aichi,Nakamura-ku,naeki,052-000-0000,surgical-mask,yes\n2020-04-06T23:17:23.170Z,2020-04-07T01:45:33.452Z,34.693539,135.495717,shop-C,JPN,Osaka,kita-ku,nakanoshima,06-0000-0000,surgical-mask,no'
```

##Node-RED サンプル
https://github.com/kolinz/node-red-recipe 内の「[inventory-map-2020April.json](https://github.com/kolinz/node-red-recipe/blob/master/inventory-map-2020April.json)」にアクセスし、フローデータを取得してください。

###フローデータの読み込み
1. 上記URLから、JSON形式のフローデータを取得します。
2. Node-RED画面右上の「三」から「読み込み」をクリック。
3. JSON形式のフローデータを貼り付け、「読み込み」をクリック。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41414/99928e6f-749e-cc4c-2908-d7edc066590a.png)

###Node-REDサンプルフローデータ読み込み後のエディタ画面
フローデータを読み込むと、下図のように表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41414/b08e8bf6-108b-c323-7e16-97ccadbc4189.png)

###動作確認
1. 画面右上の「デプロイ」をクリックします。
2. Webブラウザの別画面を開き、地図ページにアクセスします。URLは、https://xxxxxx.mybluemix.net/worldmap/ で「xxxxxx.mybluemix.net」は、お使いのNode-REDのURLにより異なります。
3. タイムスタンプと表示されている「inject」ノードの左端の「■」ボタンをクリックします。
4. 地図ページを確認します。地図上のマーカーをクリックすると、吹き出しが表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41414/d46988b3-f2c8-7fda-8847-67dea4b90c67.png)

####スマートフォンからアクセスした場合
![sample-map smartphone.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41414/f3a38b4a-7f2a-edf1-f502-94e9bb4fe963.png)

#サンプルフロー解説
ここから、各ノードについて説明します。

##タイムスタンプ
injectノードを使用しています。左端の「■」ボタンをクリックすることで手動で地図にデータを送信します。injectノードの設定を使用することで定期的にバッチ処理でデータを地図に送ることも可能です。

##switch layer, move map and zoom
functionノードを使用しています。表示する地図の様式や倍率の設定値について記述しています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41414/7bc52ca9-4aa0-1494-75ae-559d807e4315.png)

##sample-data
functionノードを使用しています。前述の「サンプルデータ」をご覧ください。

##debug:sample-data
debugノードを使用しています。「sample-data」で読み込まれたデータをNode-REDのデバッグタブで確認することができます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41414/e44d7129-ebe5-75ef-3f7f-dfb968fe97b8.png)

##csv
csvノードを使用しています。サンプルデータを行毎に分割する処理を行います。

##stock status
switchノードを使用しています。在庫情報の「stockstaus」の値にあわぜて分岐する処理を行います。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41414/7ceddbaa-d8d9-96a7-222d-255f2c46a61c.png)

##set coloer:green
changeノードを使用しています。読み込んだデータで「stockstatus」が「yes」のときに、こちらで、マーカーに使用する色として緑色(green)を指定します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41414/83fb52e8-eeda-6de8-5603-c06c707caaa2.png)

##set coloer:red
changeノードを使用しています。読み込んだデータで「stockstatus」が「no」のときに、こちらで、マーカーに使用する色として赤色(red)を指定します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41414/f3612dc1-451a-413d-3706-f9d4b11c078b.png)

##mapping
functionノードを使用しています。地図にマーカーを配置するためのデータを作成します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41414/ea9a65c6-f6d6-5f1d-8236-b93e80dc9085.png)

##debug:mapping-data
debugノードを使用しています。「mapping」で処理データをNode-REDのデバッグタブで確認することができます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41414/062b8d50-4f9f-bd45-ac1d-62b7a777b26c.png)

##worldmap
worldmapノードを使用しています。「mapping」で作成されたデータを読み込み、地図に表示します。
「webpath」を変更することで、地図表示の際のURLを変えることができます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41414/3bc0c95e-0380-9cc9-9b55-cfc22f2ff887.png)

#カスタマイズ 常時マーカーを表示する
地図にアクセスした際に常にマーカーが表示されるようにするには、サンプルフローにノードを2つ追加する必要があります。
##worldmap in
worldmap in ノードを使用しています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41414/05be367b-f1ae-e6ed-721c-944973f85e70.png)

##retrigger from map
functionノードを使用しています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41414/65d0c608-d949-8559-efaa-3c90b5293439.png)

##追加したノードを線で結ぶ
「worldmap in」と「retrigger from map」を線で結びます。「retrigger from map」と「switch layer, move map and zoom」、「retrigger from map」と「sample-data」をそれぞれ線で結び、画面右上の「デプロイ」をクリックします。

##確認
下図のようなフローとなります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41414/f55a5b4c-64d5-8e1b-ed2a-0cefabfa3f80.png)

これで、地図にアクセス毎にマーカーが表示されるようになります。

#まとめ
Node-REDの「node-red-contrib-web-worldmap」を追加し、それ以外はNode-REDがもともと持っているノードを使用して作成しました。

#Call for Code
2018年から始まった「Call for Code」をご存じでしょうか？
2019年は、世界165ヶ国18万人以上が参加し、自然災害などの社会問題の解決に向けて、クラウドを中核としたソリューションを5000以上開発し世界に貢献しました。参加者は、世界中の開発者やビジネスリーダー、研究者、学校の教員、学生などです。

2020年のCall for Codeのテーマは、新型コロナウィルス(COVID-19)対策と気候変動対策です。地図サービスはどちらにも親和性が高く、応用が利きます。
最新情報は、Call for Codeのサイト https://callforcode.org/ や下記情報をご確認ください。
日本語情報：https://developer.ibm.com/jp/callforcode/
参加方法などの解説資料：https://www.slideshare.net/kolinz/2020-call-for-code-global-challenge-20204 　(私も参加したことがありますので、参加経験をもとに解説資料を作成しました。)