FOSS4G 2018 Tokyoでの、五大開発株式会社　荒木 光一さまの発表資料

1. Node-REDのworldmapの活用
五大開発株式会社 荒木 光一

2. 自 己 紹 介
五大開発株式会社
 システム事業部 技術研究所 主任研究員
博士（情報科学）
 プログラムの高速化の研究（GPUや分散処理）
 AIを用いた地形解析の応用研究
QGISやGDALを主に利用
FOSS4G Tokyoは2年連続2回目の出場
2FOSS4G TOKYO 20172017年9月16日

3. 目 次
1. Node-RED
2. node-red-contrib-web-worldmapモジュール
3. 簡単な実例
 アイコンのマッピング
 写真の位置情報をマッピング
32018年11月19日 FOSS4G 2018 TOKYO

4. Node-REDとは
 オープンソースのプログラミング・ツール
 IoTアプリ開発
 JS Foundationの1プロジェクト
 ブラウザでビジュアル的にプログラミング
 モジュールでデータの流れと処理を定義
 公開されているモジュール数は1,700以上
42018年11月19日 FOSS4G 2018 TOKYO

5. Node-REDのプログラミング
モジュールのパラメータを設定
52018年11月19日 FOSS4G 2018 TOKYO
マウスでポチポチとモジュールを配
置して連結
必要に応じてJavaScriptで実装

6. Bさん「そだね．確か，このあたりのディレクトリに
あるソースに書いてあるから！よろしく！」
Aさん「この処理は修正しないといけないですね」
Node-REDのメリット
62018年11月19日 FOSS4G 2018 TOKYO

7. Node-REDの実行環境
 IBM Cloud
 無料のライトアカウントで十分遊べる
 Docker
 $ docker run -it -p 1880:1880 --name mynodered nodered/node-red-docker
 ローカル（Ubuntu 16.04の場合）
 $ curl -sL https://deb.nodesource.com/setup_11.x | bash -
 $ apt-get install -y nodejs
 $ npm install -g --unsafe-perm node-red
 $ node-red
72018年11月19日 FOSS4G 2018 TOKYO

8. 目 次
1. Node-RED
2. node-red-contrib-web-worldmapモジュール
3. 簡単な実例
 アイコンのマッピング
 写真の位置情報をマッピング
82018年11月19日 FOSS4G 2018 TOKYO

9. node-red-contrib-web-worldmapモジュール
中身はleaflet
 アイコンやドローイングなど
 geoJSONやKMLなどは，Node-RED
上のモジュールに入力することで，
読み込み可能
詳細は↓
 https://flows.nodered.org/node/node
-red-contrib-web-worldmap
92018年11月19日 FOSS4G 2018 TOKYO

10. node-red-contrib-web-worldmapの追加
102018年11月19日 FOSS4G 2018 TOKYO
ここからプルダウンを表示
「パレットの管理」を
クリック
「ノードを追加」にて「world」で検索
node-red-contrib-web-worldmapが表示
された後，「ノードを追加」をクリック
パレットにworldmapが
出現

11. node-red-contrib-web-worldmapの地図表示
112018年11月19日 FOSS4G 2018 TOKYO
マウスでドラッグ＆ドロップ
「デプロイ」をクリック
「（IPアドレス）:1880/worldmap」にアクセス

12. デフォルトで利用できる地図
node-red-contrib-web-worldmapの設定
122018年11月19日 FOSS4G 2018 TOKYO
初めに表示する位置を設定
利用する地図を設定
メニュー表示などを設定
地図を表示するURLを設定
モジュール名を設定

13. 目 次
1. Node-RED
2. node-red-contrib-web-worldmapモジュール
3. 簡単な実例
 アイコンのマッピング
 写真の位置情報をマッピング
132018年11月19日 FOSS4G 2018 TOKYO

14. アイコンのマッピング（１/３）
injectモジュール
 アイコン表示の信号を送信
 信号を指定した時間間隔で
送信することも可能
functionモジュール
 アイコンのプロパティを設定
worldmapモジュール
 地図を表示
142018年11月19日 FOSS4G 2018 TOKYO

15. アイコンのマッピング（２/３）
152018年11月19日 FOSS4G 2018 TOKYO

16. アイコンのマッピング（３/３）
162018年11月19日 FOSS4G 2018 TOKYO
JavaScriptでプロパティを設定

17. 目 次
1. Node-RED
2. node-red-contrib-web-worldmapモジュール
3. 簡単な実例
 アイコンのマッピング
 写真の位置情報をマッピング
172018年11月19日 FOSS4G 2018 TOKYO

18. Exif付きの写真を
アップロード
写真の位置情報をマッピング（１）
182018年11月19日 FOSS4G 2018 TOKYO
ExifからGPS情報を取得して
アイコンをマッピング

19. 写真の位置情報をマッピング（２）
192018年11月19日 FOSS4G 2018 TOKYO
肝となる部分

20. 写真の位置情報をマッピング（２）
202018年11月19日 FOSS4G 2018 TOKYO

21. 写真の位置情報をマッピング（２）
212018年11月19日 FOSS4G 2018 TOKYO

22. まとめ
Node-REDとnode-red-contrib-web-worldmapを紹介
複雑で謎なソースより管理が楽
IoT＋地図には有効
ダッシュボードにも地図を表示可能
ラズパイ→クラウドの構築も簡単
222018年11月19日 FOSS4G 2018 TOKYO

23. 232018年11月19日 FOSS4G 2018 TOKYO
ご清聴ありがとうございました