No.5_PLATEAUを利用したコミュニケーション、情報共有ツール

PLATEAU AWARD 2024 ファイナリスト作品No.5
チーム名：広島高校 情報部
作品名：PLATEAUを利用したコミュニケーション、情報共有ツール

Transcript

1. PLATEAUを利用した コミュニケーション・ 情報共有ツールの作成 広島県立広島高等学校情報部 2年 檜山誓七／河久洋徳
2. 1.目次 1 2.現状分析(1) 3.現状分析(2) 4.システム化の意義 5.目的 6.利用シーン 7.提案手法 8.技術スタック 9.データの動き 10.UI 11.デモンストレーション 12.課題点 13,14.今後の展望 15.引用・参考文献
3. 2.現状分析(1) 2 防災ポータル(広島市)，東広島市防災情報 システム(東広島市)をはじめとしたシステ ムが構築されている。国、県、民放各社と の連携システムが出来上がっており、迅速 な対応が可能。 のんレポ(東広島市)などを通じた情報収集 も実施。東広島市の防災システムでは属性 情報に合わせた配信を行っている。 高齢者の方は，命，防災に意識が向いている。逆に若い世代があまり意識していない。 防災を身近に感じてもらうことが必要。例えばだが，紙ベースで配布しているものはなくすリスク がある スマホなど身近に置く必要がある 市民の防災意識向上には 災害時の情報伝達・提供 防災情報マップ(広島市)など各自治体がハザ ードマップを配信している。 東広島市では，実際に避難所に宿泊するイ ベント等を実施。 防災事業
4. 3.現状分析 3 ハザードマップの紛失[1] 表現力に限界がある[2] 直観的なわかりやすさ ・訴求力に欠ける 確認の機会が失われる ・緊急時に使えない 災害時の情報収集が 難しい[3] 迅速な災害対応に向けて 改善が必要 スライド2.と各種文献を踏まえた現状の課題 従来の情報配信
5. 4.システム化の意義 4 紙よりも自在な見方， 表現ができる。 1.表現力の向上 デバイスを紛失しない限り， いつでも閲覧できる。 3.紛失リスクの低減 システム化することで 複数の接点を一元化できる。 2.一元化 2.にも通ずるが，機能向上で いろいろなデータが追加できる。 4.データを組み合わせられる
6. 5.目的 住民の防災意識向上への貢献 従来のハザードマップの拡張 5 3次元地図上の情報共有機能の実現
7. 6. 利用シーン 様々なデータを重ね合わせて，自宅近くの危険性を把握。 防災のときの話し合いの一つのツールとして活用。 1.災害前 災害発生時に，災害情報などの配信，収集に活用。 ユーザーによる情報の入力，情報の共有。 2.災害発生後 6
8. 7.提案手法 7 紙と同様のハザードマップ機能 表現力の向上 災害情報の集約 情報共有を作成し，直感的に 災害情報共有・伝達 PLATEAUの表現力を活用し 3Dハザードマップ化
9. 8.実装 (1) アプリ内の実装 8 NEXT.JS node.js React 3D地図プラット フォーム ユーザー インターフェース アプリケーション フレームワーク JavaScript実行 環境 フレームワーク データベース JavaScript実行 環境 出典は最終スライドに掲載
10. 9. 実装(2) データの動き 情報共有機能用 API ユーザ Cesium 地図 地形 オルソ画像レイヤ 都市 モデル ピン 表示 投稿 PLATEAU ポータルサイト 9 メインシステム
11. 10. 実装(3) UI 10 メニュー画面 ピン 地図(地形図) ハザードマップ
12. 11.デモンストレーション 11 COMMITEAU.mp4
13. 12.課題点 現状ローカル環境での実行であり，実際の環境では異なる不具合が生じる可能性がある。 一次審査でもご指摘をいただいたが，改善出来なかった。 アプリの画面がすべて読み込まれるまでに約20秒。操作時に端末によるがカクツキがある。 災害時等に活用するには軽量化を行うことが必要である。 1.実環境想定の必要性 2.動作が鈍重な点 12
14. 13.今後の展望 13 利用者の居場所に合わせた データを読み込むことで軽量化を図る。 3.GPS連携 実際の実装に近い形へと発展させ， 動作の検証を行う。 1.クラウドへのデプロイ ユーザーが誤った操作をした場合などの 対処，エラーハンドリング サーバサイドレンダリング(SSR)や リファクタリングを行う。 2.意図しない動作の排除 4.読み込みの高速化
15. 14.今後の展望(機能面) 14 より多くのデータを組み合わせる 例:気象庁の雨雲レーダー，地震速報 例:3D化したハザードマップ上で 災害シミュレーションを行う。 1.情報共有機能の発展 2.データの加工・活用 3.多種多様なデータ より複雑な手書き図形や データを共有できるように 特定の相手とだけ共有できるシステム
16. 15. 引用・参考文献 ・引用参考文献 [1]財賀 美希・藤井 俊久・雁津 佳英・松見 吉晴 ”住民の洪水災害に対する防災意識の把握と向上化施策に関する研究住民の洪水災害に対す る防災意識の把握と向上化施策に関する研究”,土木学会論文集,2011 [2]片田 敏孝・ 児玉 真・ 佐伯 博人 ”STUDY ON RESIDENTS' RECOGNITION OF A FLOOD HAZARD MAP AND PROMOTION MEASURES OF ITS RECOGNITION”,水工学論文集,2003 [3]草野 翔泉 ，朋子仲，谷 善雄.”ピクトグラムによる災害情報共有システム 2 次元情報の入力手段の検討”,情報処理学会,2014 ・使用したツール、API等 https://www.geocoding.jp/?q=35.658625%2C+139.745415 位置情報と地図の変換 https://github.com/Project-PLATEAU/plateau-streaming-tutorial/blob/main/3d-tiles/specification.md 都市コード https://disaportal.gsi.go.jp/hazardmap/copyright/opendata.html#l2shinsuishin ハザードマップデータ https://maps.gsi.go.jp/development/ichiran.html#std 地理院地図 https://nlftp.mlit.go.jp/ksj/gml/datalist/KsjTmplt-A31.html 国土数値情報 ・node_modules axios,cesium,next,react(mui),tailwindcss,express ・動作環境 Node.js v20.16.0 ・画像の出典 https://sozai.cman.jp(CMAN),https://fonts.google.com/icons(Google Fonts) TypeScripts:https://www.typescriptlang.org/branding/ Cesium:https://cesium.com/ Next.js:https://vercel.com/geist/brands#next-js SQLite:https://www.sqlite.org/index.html express:https://github.com/expressjs/express nodejs:https://nodejs.org/ja/about/branding,javascript:https://github.com/voodootikigod/logo.js/ React:https://github.com/facebook/react/blob/cae635054e17a6f107a39d328649137b83f25972/fixtures/dom/public/react-logo.svg 15
17. 16. 謝辞・まとめ ・ハザードマップポータルサイト https://disaportal.gsi.go.jp/hazardmap/copyright/opendata.html ・PLATEAU配信サービス https://github.com/Project-PLATEAU/plateau-streaming-tutorial ・電子国土基本図（オルソ画像）国土地理院 https://maps.gsi.go.jp/development/ichiran.html#std 以上のサービスよりデータを利用させていただきました。 東広島市役所および広島市役所の皆様，並びに本校情報科の湯浅先生、 前土井先生に感謝申し上げます 16
18. ご清聴ありがとうございました
20. 昨年度作成したシステム CityGML形式をダウンロード ->Unityでobjに変換 ->Blenderに取り込んでハザードマップの情報を取り込み -> のようにして作ったデータをThree.jsを用いて表示しています。 Flutterで作成したアプリケーション
21. 旧UIその2 メニュー画面 ピン 地図(地形図) ハザードマップ
22. コンポーネント同士の関係を示す図
23. 自己紹介 檜山誓七 広島高校情報部2年 自作キーボード，デ ザイン等に取り組む 河久洋徳 広島高校情報部2年 セキュリティ・キャ ンプ2023修了 FE
24. GitHubで公開しているコード フロントエンド https://github.com/nanten-pi/COMMITEAU バックエンド https://github.com/nanten-pi/COMMITEAU_backend
25. 情報共有機能について追記 より複雑な手書き図形や データを共有できるように より複雑な手書き図形や データを共有できるように 全員で共有する内容以外も共有したい 特定の相手とだけ共有できるシステム
26. 動画の切り抜き
27. 動画の切り抜き 情報共有機能 地図・ハザードマップの切り替え
28. 4.背景(1) 住民の防災意識の向上に向けて 住民の防災意識への貢献 ハザードマップの紛失[1] 表現力に限界がある[2] 直観的なわかりやすさ・訴求力 に欠ける 3Dの表現と情報共有ができる ・確認の機会が失われる ・緊急時に使えない ソフトウェアなら…失くさない！ 現行のハザードマップ等の課題 4