Tweet
Tweet

Slide 1

Slide 1 text

ストリートビューで思い出振り返りダッシュボードを作成 2023年11月17日 横井一仁

Slide 2

Slide 2 text

旅行先の記念写真から 思い出を振り返りたい スマホ撮影時に記録された撮影場所をス トリートビューで表示したら、 思い出振り返りダッシュボードが作れる のでは、と思い作ってみました

Slide 3

Slide 3 text

テストで用いた位置情報付きの写真 今回はNode-RED大喜利 in 大阪の配信場所で撮影した写真を用いてみました

Slide 4

Slide 4 text

開発したダッシュボード

Slide 5

Slide 5 text

使用したノード Node-REDダッシュボードの追加UIノード、exifノードを用いて実現 # モジュール名 説明 1 node-red-dashboard Node-REDダッシュボードのノード群 2 node-red-contrib-ui-upload ファイルアップロードUIを表示するノード 3 node-red-node-exif 写真のメタデータを抽出するノード 4 node-red-contrib-ui-media 画像データを表示するUIノード 5 node-red-node-ui-iframe ダッシュボード内にiframeを表示するノード

Slide 6

Slide 6 text

作成したフロー

Slide 7

Slide 7 text

ストリートビューを表示するHTMLはChatGPTで生成 ChatGPTを用いて、JavaScript、CSS、HTMLを一つにまとめた HTMLファイルを生成することで、手軽にNode-REDへ取り込み

Slide 8

Slide 8 text

ノウハウまとめ exifノードで写真のメタデータ抽出 ダッシュボードには、 便利な追加UIノードが存在 存在しないUIはChatGPTで自動生 成 よきChatGPT、Node-REDライフを