Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Node-REDのworldmapの活用

1,543 views

Published on

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

Published in: Engineering
  • Be the first to comment

  • Be the first to like this

Node-REDのworldmapの活用

  1. 1. Node-REDのworldmapの活用 五大開発株式会社 荒木 光一
  2. 2. 自 己 紹 介 五大開発株式会社  システム事業部 技術研究所 主任研究員 博士(情報科学)  プログラムの高速化の研究(GPUや分散処理)  AIを用いた地形解析の応用研究 QGISやGDALを主に利用 FOSS4G Tokyoは2年連続2回目の出場 2FOSS4G TOKYO 20172017年9月16日
  3. 3. 目 次 1. Node-RED 2. node-red-contrib-web-worldmapモジュール 3. 簡単な実例  アイコンのマッピング  写真の位置情報をマッピング 32018年11月19日 FOSS4G 2018 TOKYO
  4. 4. Node-REDとは  オープンソースのプログラミング・ツール  IoTアプリ開発  JS Foundationの1プロジェクト  ブラウザでビジュアル的にプログラミング  モジュールでデータの流れと処理を定義  公開されているモジュール数は1,700以上 42018年11月19日 FOSS4G 2018 TOKYO
  5. 5. Node-REDのプログラミング モジュールのパラメータを設定 52018年11月19日 FOSS4G 2018 TOKYO マウスでポチポチとモジュールを配 置して連結 必要に応じてJavaScriptで実装
  6. 6. Bさん「そだね.確か,このあたりのディレクトリに あるソースに書いてあるから!よろしく!」 Aさん「この処理は修正しないといけないですね」 Node-REDのメリット 62018年11月19日 FOSS4G 2018 TOKYO
  7. 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. 8. 目 次 1. Node-RED 2. node-red-contrib-web-worldmapモジュール 3. 簡単な実例  アイコンのマッピング  写真の位置情報をマッピング 82018年11月19日 FOSS4G 2018 TOKYO
  9. 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. 10. node-red-contrib-web-worldmapの追加 102018年11月19日 FOSS4G 2018 TOKYO ここからプルダウンを表示 「パレットの管理」を クリック 「ノードを追加」にて「world」で検索 node-red-contrib-web-worldmapが表示 された後,「ノードを追加」をクリック パレットにworldmapが 出現
  11. 11. node-red-contrib-web-worldmapの地図表示 112018年11月19日 FOSS4G 2018 TOKYO マウスでドラッグ&ドロップ 「デプロイ」をクリック 「(IPアドレス):1880/worldmap」にアクセス
  12. 12. デフォルトで利用できる地図 node-red-contrib-web-worldmapの設定 122018年11月19日 FOSS4G 2018 TOKYO 初めに表示する位置を設定 利用する地図を設定 メニュー表示などを設定 地図を表示するURLを設定 モジュール名を設定
  13. 13. 目 次 1. Node-RED 2. node-red-contrib-web-worldmapモジュール 3. 簡単な実例  アイコンのマッピング  写真の位置情報をマッピング 132018年11月19日 FOSS4G 2018 TOKYO
  14. 14. アイコンのマッピング(1/3) injectモジュール  アイコン表示の信号を送信  信号を指定した時間間隔で 送信することも可能 functionモジュール  アイコンのプロパティを設定 worldmapモジュール  地図を表示 142018年11月19日 FOSS4G 2018 TOKYO
  15. 15. アイコンのマッピング(2/3) 152018年11月19日 FOSS4G 2018 TOKYO
  16. 16. アイコンのマッピング(3/3) 162018年11月19日 FOSS4G 2018 TOKYO JavaScriptでプロパティを設定
  17. 17. 目 次 1. Node-RED 2. node-red-contrib-web-worldmapモジュール 3. 簡単な実例  アイコンのマッピング  写真の位置情報をマッピング 172018年11月19日 FOSS4G 2018 TOKYO
  18. 18. Exif付きの写真を アップロード 写真の位置情報をマッピング(1) 182018年11月19日 FOSS4G 2018 TOKYO ExifからGPS情報を取得して アイコンをマッピング
  19. 19. 写真の位置情報をマッピング(2) 192018年11月19日 FOSS4G 2018 TOKYO 肝となる部分
  20. 20. 写真の位置情報をマッピング(2) 202018年11月19日 FOSS4G 2018 TOKYO
  21. 21. 写真の位置情報をマッピング(2) 212018年11月19日 FOSS4G 2018 TOKYO
  22. 22. まとめ Node-REDとnode-red-contrib-web-worldmapを紹介 複雑で謎なソースより管理が楽 IoT+地図には有効 ダッシュボードにも地図を表示可能 ラズパイ→クラウドの構築も簡単 222018年11月19日 FOSS4G 2018 TOKYO
  23. 23. 232018年11月19日 FOSS4G 2018 TOKYO ご清聴ありがとうございました

×