# [チーム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`