ストリートビューで思い出振り返りダッシュボードを作成

「Node-RED Flow 大喜利 in 京都」で紹介したスライドです。
- イベントページ: https://node-red.connpass.com/event/301392/
- 動画URL: https://www.youtube.com/live/-XgcMUE3A7A?t=176

Transcript

1. ストリートビューで思い出振り返りダッシュボードを作成 2023年11月17日 横井一仁
2. 旅行先の記念写真から 思い出を振り返りたい スマホ撮影時に記録された撮影場所をス トリートビューで表示したら、 思い出振り返りダッシュボードが作れる のでは、と思い作ってみました
3. テストで用いた位置情報付きの写真 今回はNode-RED大喜利 in 大阪の配信場所で撮影した写真を用いてみました
4. 開発したダッシュボード
5. 使用したノード 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を表示するノード
6. 作成したフロー
7. ストリートビューを表示するHTMLはChatGPTで生成 ChatGPTを用いて、JavaScript、CSS、HTMLを一つにまとめた HTMLファイルを生成することで、手軽にNode-REDへ取り込み
8. ノウハウまとめ exifノードで写真のメタデータ抽出 ダッシュボードには、 便利な追加UIノードが存在 存在しないUIはChatGPTで自動生 成 よきChatGPT、Node-REDライフを