# [チームI] Tokyo OSS Party!! 2021 記録シート ## チーム - チーム名: Ruby が好き - メンバー - [@sankichi92](https://github.com/sankichi92) - Slack チャンネル: [#2i-準拠ハザードマップ](https://tokyoossparty.slack.com/archives/C02NSHFJ1CY) ## 取り組む課題 八王子市「デジタルハザードマップ」 ## 課題に対するアプローチ 「(課題)市区町村には紙での配布を前提とした PDF のハザードマップしかない問題」を解決するために、 「(技術)Web 地図」と「(データ)ハザードマップポータルサイトや市区町村のデータ」を使い、 「(対象)市区町村のハザードマップ担当、または、市区町村民」に対して、 「(方法)Web ハザードマップテンプレートを提供」をして、 「(結果)容易に Web ハザードマップを作成・公開できる」ようにする。 ## 開発したサービス ### サービス名 shikuchoson-hazardmap-template (市区町村ハザードマップテンプレート) ### URL - GitHub repo: **https://github.com/sankichi92/shikuchoson-hazardmap-template** - テンプレートの利用例: **https://sankichi.net/hachioji-hazardmap/** - 発表資料: **https://speakerdeck.com/sankichi92/shikuchoson-hazardmap-template** ### 背景と課題 日本のハザードマップは、国土交通省の管理する[ハザードマップポータルサイト](https://disaportal.gsi.go.jp/)にまとめられており、そこでは以下の2つのサービスが提供されています。 - 重ねるハザードマップ: 災害リスク情報や防災に役立つ情報を、全国どこでも重ねて閲覧できるWeb地図サイト - わがまちハザードマップ: 市町村が作成したハザードマップを見つけやすくまとめたリンク集 「重ねるハザードマップ」は Web 地図として多機能で非常によく作りこまれていますが、その[使い方](https://disaportal.gsi.go.jp/hazardmap/pamphlet/pamphlet.html)でも > 詳細を確認する場合は市町村が作成したハザードマップをご覧ください。 とあるとおり、あくまで国の作成した地図であり、市区町村ごとの詳細は確認できません。 ハザードマップに求められるのは、多くの場合、国全体の広く浅い情報ではなく、自身の住む場所ピンポイントの狭く深い情報です。 そうした情報を確認するには、「わがまちハザードマップ」から市区町村のハザードマップを確認する必要があります。 しかし、市区町村の作成するハザードマップの多くが紙での配布を前提としており、重ねるハザードマップとちがって Web に最適化されていません。 そしておそらく、独自の Web ハザードマップを開発・運用できるほど、予算やリソースに余裕のある市区町村は少ないでしょう。 この課題に対し、本サービスは、市区町村の単位で Web ハザードマップを容易に作成・カスタマイズできるテンプレートを提供します。 合わせて、テンプレートに GitHub を活用することで、GitHub Pages による公開、Pull Request による市民参加も可能とします。 ### ターゲット - ハザードマップを Web で提供したいと考えているが、予算やリソース等の問題でなかなか実行に移せない市区町村職員 - 紙のハザードマップに不満を持っている市区町村民 ### 利用した技術とその特徴 - [Create React App](https://create-react-app.dev/): SPA (Single-page application) を簡単に開発するためのツール - [Leaflet](https://leafletjs.com/): 広く普及している Web 地図ライブラリ - [GitHub Pages](https://docs.github.com/ja/pages): 静的ウェブサイトをホストするための GitHub の機能 ### 利用したデータ - [地理院タイル](https://maps.gsi.go.jp/development/ichiran.html) - [OpenStreetMap](https://www.openstreetmap.org/)(API で市区町村の行政界を得るため) - [ハザードマップポータルサイトの配信データ](https://disaportal.gsi.go.jp/hazardmap/copyright/opendata.html) - 八王子市提供データ ### サービスの内容 以下の手順で、特定の市区町村のハザードマップを作成・公開できます。 1. [sankichi92/shikuchoson-hazardmap-template](https://github.com/sankichi92/shikuchoson-hazardmap-template) の "Use this template" からリポジトリを作成 2. `hazardmap-config.jsonc` の都道府県・市区町村の設定を変更してコミット - GitHub Actions で自動的にビルドが走り `gh-pages` ブランチが作成される 3. リポジトリの設定から GitHub Pages をオンにして Web 地図を公開 また、以下のようなカスタマイズも可能です。 - `csv` ディレクトリ以下に特定のフォーマットの CSV ファイルをアップロードしてレイヤ(Point Features)を追加 - `images` ディレクトリ以下に画像をアップロードして地図上に表示 使い方の詳細は README https://github.com/sankichi92/shikuchoson-hazardmap-template#使い方 や以下のデモ動画を参照してください。 {%youtube oc1CfaVSlno %} 将来的には、他の種類のレイヤ追加等のカスタマイズも視野にあります。 ### 課題と解決に関わるステークホルダーとその役割 #### 平常時 - 市区町村職員 - テンプレートを使用した Web ハザードマップの公開 - CSV や画像によるデータ提供(=オープンデータ化) - 市区町村民 - 紙のハザードマップではできない地図の拡大・縮小やレイヤの表示・非表示による、身の回りで起こりうる災害の詳細な確認 - Pull Request によるデータや機能の修正・改善 #### 災害時 - 市区町村職員 - ハザードマップへの迅速な情報反映 - 市区町村民 - リアルタイムな情報の確認 ### サービスによって課題が解決された世界のイメージ / サービスが実際にターゲットに届き活用されるまでのストーリー #### 市区町村職員 - 職員「隣の市で Web ハザードマップが好評らしいです。我が市でもやりましょう!」 - 上司「すでにちゃんとした紙のハザードマップがあるだろう。同じようなものを作るのに割く予算もリソースもない!」 - 職員「いえ、予算もリソースも必要ありません。隣の市でも使っている OSS の shikuchoson-hazardmap-template を使えば、すでにデータもあるし、30分もあれば公開できます!」 - 上司「なんだって〜! 紙の地図を作るより簡単じゃないか。ぜひやってみよう」 #### 市区町村民 - 市民A「引越してきた時に紙のハザードマップもらったけど、小さくて自分の家も見つけられないし、ゴチャゴチャ情報が多くてよく分からなかったんだよね」 - 市民B「それならついこないだ公開された Web ハザードマップを見るといいよ。拡大・縮小できるし、情報の表示・非表示もできて見やすかった。ほらこれ」 - 市民A「なんだって〜! しかもこれ、前に住んでた町と同じ UI で馴染みがある。……あれ、でも警察署の住所が移転前のままだ」 - 市民B「本当だ。それなら自分たちの手で修正しよう! この地図は GitHub で公開されていて、Pull Request も受け付けているの」 - 市民A「Pull Request なら任せて!(カチャカチャカチャ…ッターン!)」 ###### tags: `TokyoOSSParty2021`