この記事は、2020/10/20（火）に開催のイベント「Node-REDで色々試すハンズオン Tec-Nomad ・ ビジュアルプログラミング交流会 コラボ」のハンズオン資料として準備したものです。
ハンズオンでは、3名の講師（ @youtoy さん、 @kmaepu さん、自分）がそれぞれ Node-RED を利用した異なる内容を取り扱います。また Node-RED を利用する環境に enebular（エネブラー）を用います。
What3wordsとは？
ジオコーディング技術の一つで、新しい位置の示し方です。
地球上を3メートル角のマス目に区切り、3つの単語でそのマスの位置を表します。
例えば東京タワーの位置は
「けんぶつ・このは・はかり」
ディズニーランドもディズニーリゾートも同じ住所
人類はずいぶん長いこと位置を示すのに「住所」というものを使ってきましたが、
住所って実はすごく曖昧ですよね。
ディズニーランドもディズニーリゾートも同じ一つの住所が割り当てられています。
What3wordsのようなジオコーディング技術を使えば、3メートル角単位で位置を指定できます。
簡単な3つの単語で構成されているため子供でも覚えやすそうです。
ディズニーランドや広い建物内でUber Eatsのようなサービスが使えるようになるかも！？
今日のゴール
What3Words APIを叩いてみる
下記のようにノードを配置します
左から、injectionノード、http requestノード、jsonノード、debugノードです。
injectノード
ペイロードの種類をJSONに設定し、JSONエディタに下記を入力
※API KEYは↓から登録をして取得してください。
What3Words APIはこちら
{
"words": "りんご・たぬき・ごはん",
"key": "取得したAPI KEYを入力してください"
}
http requestノード
URL: https://api.what3words.com/v3/convert-to-coordinates
「msg.payloadをクエリパラメータに追加」にチェックを入れてください
injectノードを押して、結果が戻ってくれば成功です！
World Mapノードで地図を表示する
World Mapノードをインストール
設定→パレット→node-red-contrib-web-worldmapで検索し、インストール
左上から、changeノード x2、functionノード、worldmapノード、debugノード
changeノードその１
What3words APIから取得した緯度経度を格納します。
上から
result.lat
payload.coordinates.lat
result.lon
payload.coordinates.lng
result.name
payload.words
緯度 latitudeの略は「lat」で共通なのですが、
経度 longitudeは「lon」派と「lng」派がいて、紛らわしいですね...
changeノードその2
payloadの内容をresultに格納します。
functionノード
msg.payload.layer = "What3Words";
msg.payload.icon = ":face_with_raised_eyebrow:";
msg.payload.iconColor = "orange";
return msg;
msg.payload.iconは、ピンのデザインです。
face_with_raised_eyebrowは眉毛を上げてる顔アイコン。
好きなものに変更してください。
→:apple:
→:bear:
→ :bee:
などなど
World Mapノード
Web Pathをworldmapに変更してください。
アクセスしてみる
Node-REDのエンドポイント/worldmap にアクセスしてください。
エンドポイントは「i」アイコンから確認ができます。
injectノードを押して、アイコンが表示されたら成功です！
うまく動かない場合、地図をリロードするとうまくいくことがあります。
完成品
[{"id":"ffb31cec.d1dc8","type":"tab","label":"フロー 1","disabled":false,"info":""},{"id":"b7ec3c49.1805f","type":"inject","z":"ffb31cec.d1dc8","name":"パラメーター","topic":"","payload":"{\"words\":\"りんご・たぬき・ごはん\",\"key\":\"YOUR API KEY\"}","payloadType":"json","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":170,"y":220,"wires":[["bf5eb9d9.acc3c8"]]},{"id":"bf5eb9d9.acc3c8","type":"http request","z":"ffb31cec.d1dc8","name":"","method":"GET","ret":"txt","paytoqs":true,"url":"https://api.what3words.com/v3/convert-to-coordinates","tls":"","persist":false,"proxy":"","authType":"","x":350,"y":220,"wires":[["eaf44955.a7d5d8"]]},{"id":"d80a36ff.512dd8","type":"change","z":"ffb31cec.d1dc8","name":"緯度経度","rules":[{"t":"set","p":"result.lat","pt":"msg","to":"payload.coordinates.lat","tot":"msg"},{"t":"set","p":"result.lon","pt":"msg","to":"payload.coordinates.lng","tot":"msg"},{"t":"set","p":"result.name","pt":"msg","to":"payload.words","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":360,"y":380,"wires":[["d3eaaf.74ccd55"]]},{"id":"406d805d.ecacb","type":"debug","z":"ffb31cec.d1dc8","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","x":730,"y":580,"wires":[]},{"id":"eaf44955.a7d5d8","type":"json","z":"ffb31cec.d1dc8","name":"","property":"payload","action":"","pretty":false,"x":510,"y":220,"wires":[["d80a36ff.512dd8","a53215bd.94b408"]]},{"id":"d302430b.0e73c","type":"worldmap","z":"ffb31cec.d1dc8","name":"","lat":"","lon":"","zoom":"1","cluster":"","maxage":"","hiderightclick":"false","coords":"none","path":"worldmap","x":770,"y":460,"wires":[]},{"id":"d2d750f3.fd715","type":"function","z":"ffb31cec.d1dc8","name":"パラメーター設定","func":"msg.payload.layer = \"What3Words\";\nmsg.payload.icon = \":face_with_raised_eyebrow:\";\nmsg.payload.iconColor = \"orange\";\n\nreturn msg;","outputs":1,"noerr":0,"x":530,"y":500,"wires":[["406d805d.ecacb","d302430b.0e73c"]]},{"id":"d3eaaf.74ccd55","type":"change","z":"ffb31cec.d1dc8","name":"","rules":[{"t":"set","p":"payload","pt":"msg","to":"result","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":540,"y":380,"wires":[["d2d750f3.fd715"]]},{"id":"a53215bd.94b408","type":"debug","z":"ffb31cec.d1dc8","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","x":690,"y":220,"wires":[]}]