学校での課題で制作しました。5人のチームで開発し、その中から二人が開発、三人が情報収集というチームに分かれ、私は開発を担当しました。

活動期間　1年間（2020~2021）

使用スキル：HTML,CSS,JavaScript,API

担当

コーディング：ハザードマップページ、周辺の避難所検索ページ、メニュー

デザイン：サイト全体のデザイン、ハザードマップページ、XDでのプロトタイプ作成

使用API

・Maps JavaScript API

・Places API

・Directions API

様々なデバイスで閲覧可能なレスポンシブ対応

活動背景

近年日本では様々な災害が多発しており様々な対策が講じられて安全な日々を過ごしているが、ハザードマップが少し見づらかったりマップを見てもどのような対策をたったらよいかいまいちよくわからないという事が調べていくうちに分かり、これは少し問題ではないかと思い自分たちでそれぞれのニーズに合わせたサイトを製作することにした。

提案内容

提案内容としては、老若男女誰が見ても理解がしやすく具体的な防災対策や便利な防災グッズの案内など、防災関連でこれがあれば十分といえるようなサイトの作成を目指す。

成果物①

ハザードマップ（東京都北区）

紙媒体では難しい避難所と被害想定エリアをレイヤー分けし、別々に表示させた。

成果物②

位置情報を取得し、近くの避難所を表示する

端末の位置情報を取得し、現在地から20キロ範囲の避難所を検索し表示する。

(Google検索で”避難所”と表示される場所のみ)

成果物③

避難所をフィルタ化して災害のタイプなど適したもののみを表示できるようにしたリスト

現在はダミーデータを入れているがCSV読み込みをできるようにしてゼンリンの全国避難所データベースに対応したい

参考

Google Maps API の使い方・利用方法

https://www.webdesignleaves.com/pr/plugins/googlemap_01.html

HTMLのtableをExeclのようにフィルタする

https://webparts.cman.jp/table/filter/

JavaScriptで外部のCSVファイルを読み込んでデータをHTML上に展開する

https://designsupply-web.com/media/knowledgeside/5432/

プレビューページ↓

（APIはセキュリティの問題で動作しません）

WEB