Hack For
Japan+はCodefor Japan
あなた
社会に役立つのスキル

あなたのスキルは社会に役立つ
2011年3月11日の東日本大震災発生の直後に発足したHack For Japanと「市民が主体となって自分たちの街の課題を技術で解決するコミュニティ作り支援」を掲げる
Code for Japanのメンバーから、防災や減災、地域の活性化や課題解決、そして人材育成など、「エンジニアができる社会貢献」をテーマにした記事をお届けします。

第 97 回印刷して使う災害支援地図「紙マップ」の開発秘話● Code for Japan
関 治之（せき はるゆき） Twitter @hal_sk

みなさんは、印刷して利用できる災害支援地図、「紙マップ」というサービス

注1をご存じでしょうか。

このサイトでは、地図上に掲載されるさまざまな情報を、A4 サイズで見やすく印刷できます（図 1）。
2018 年 6 月の広島豪雨災害や、2019 年 9 月の台風 15号による千葉水害、10 月の 19 号の水害のときなどで実際に使われています。このサービスは、災害対応におけるシビックテック的なアプローチとして参考になると思いますので、今回はこのマップサービスの成り立ちについて紹介したいと思います。

「紙で配れる」ことのメリット
この紙マップの特徴は、「紙で印刷したときに見やすい」という点だけです。データソースは Google

注1

https://kamimap.com/▼▼図 1 印刷すると地図とリストが表示される

マイマップを使っていますので、このサイトにはデータの編集機能や入力機能も備わっていません。
では、何が良いのでしょうか？
まず、そもそも紙ですので誰でも使えます。スマホの操作がわからないおばあちゃんでも直感的に情報がわかります。もちろん、電気が切れていたり電波が届かなかったりしても問題ありません。また、たくさん印刷すれば手渡しで配布することも、避難所の壁に貼っておくこともできます。飲料水の場所や銭湯といった生活サポート情報はあまり広範囲では必要なく、紙に印刷できる数キロ圏内で十分です。
コンビニのネットプリントを使えば遠隔地からでも出力できますし、上からマジックで書き込みをしたり、メモを追加することもできます。つまり、災害時の情報伝達手段として紙のマップはとても有効なのです。

広島の洪水への対応が発端
この紙マップのサービスはどのように生まれたのでしょうか。きっかけは、2018 年に発生した広島の178 - Software Design

第 97 回印刷して使う災害支援地図「紙マップ」の開発秘話

洪水についての Facebook の投稿でした。

ページと合わせて GitHub にアップロードし、GitHub

Code for Japan のネットワークにはたくさんPages にてホスティングするというものです（図 4）。の地域版 Code for があるのですが、Code forHiroshima の方を通じて、別府さんという方の▼▼図 2 当時作られていた紙マップ紙マッププロジェクトを目にしたのです（図2）。別府さんは当時発生していた水害に対し、行政や民間の給水所や、お風呂などの情報を集めて紙の地図を作り配布していました。そのアップデートがたいへんだということを聞き、何か実装できないかと思いました。
情 報 収 集 の プ ラ ッ ト フ ォ ー ム と し て は、Google マイマップが使われていました注 2。しかいリストになってしまいます。そこで、Googleマイマップのデータを見やすく表示するビューアを作ろうと考えました。
この当時は、Leaflet 注 3 を使って 1 日程度で実装しました（図 3）。アーキテクチャとしては、
Google マイマップから手動でダウンロードし▼▼図 3 最初に公開したバージョンてきた KML ファイルを、静的 HTML のジェネレータである Middleman 注 4 を使って作った Web
注2

注3
注4

ちなみに、各地で大きな災害が起こると、必ずと言っていいほどこのようなクラウドマッピングの活動が行われます。このような活動は「クライシスマッピング」などと言われ、シビックテックコミュニティや OpenStreet
Map コミュニティの活動の1つとしてよく紹介されています。

https://leafletjs.com/
https://middlemanapp.com/jp/

Hack For Japan + Code for Japanし、このマップをそのまま印刷するととても長▼▼図 4 公開当時のアーキテクチャ

Google My Maps

GitHub Pages

KML（ダウンロードして GitHub に登録）

LeaﬂetMiddleman

Web ページ作成・アップロード

Jan. 2020 - 179あなたのスキルは社会に役立つ
公開に合わせて Twitter で仲間を募り、デザイン見つけた参加者とともに、「沖縄のキャンプ場をの修正を行っていきました。5 名ほどの協力者が現マッピングする」というツールの開発に入りました。

れ、Slack と GitHub を通じていろいろな追加機能をこのときに、複数のマップでも対応できるように実開発しました。

装したのですが、その過程でリファクタリングをし災害時の対応は、スピードが命です。まずは少しでも役に立ちそうなものを公開しながら、徐々にブたくなり、TypeScript 対応をしたり、Leaflet からMapbox GL JS 注 5 への変更をしたりしました。

ラッシュアップする方法を取りました。そのあと、その後 9月に入ると、千葉県を台風 15 号が襲いま

印刷日、最終データ更新日の表示、印刷用 CSS 最す。そのときにもマッピング活動が行われています。

適化、凡例表示、アイコン対応、QR コード表示な

台風 15 号の対応では、千葉県にお住まいのヤマダどを行い、図 5 のような形になりました。

コージさんが中心となって情報収集をされていましこのシステムを公開したあと、地域ごとに PDFを作成、コンビニプリントのシステムに登録してた。ヤマダコージさんは、Googleマップでいろいろな地図を作るコミュニティ活動をされています。

コードを Facebook などで共有、各地でそれを印刷

そこで、リファクタリング中のサイトをちゃんとして利用したり配ったりといった形で別府さんに活動く状態にまで持っていき公開し、あわせて新しい用いただきました。

メンバーを呼び込みました。その結果すばらしい開

沖縄のハッカソンを経て、台風 15 号で復活発者やデザイナーが集まり、直後に発生した台風

その後、すっかり別のことで忙しくなり、このプティが向上しています。

19 号への対応も含めて、さまざまな機能が追加されていきました。デザインも含めて一気にクオリロジェクトについては放置状態でした。ただ、しく最初のバージョンでは Middleman ＋ Leaflet でしみ自体は頭の片隅に残っており、2019 年の 6 月に沖たが、現行バージョンでは Nuxt.js ＋ Mapbox GL

縄で行った、日台韓による合同ハッカソンの場で、JS になっています。これにより開発効率がだいぶあらためてこのプロジェクトを再開します。沖縄で向上しました。そして、冒頭に示したようにデザイ▼▼図 5 ブラッシュアップバージョン

ンも大幅に向上。KML を手動でダウンロードしていた部分も、設定ファイルを指定しておけば常に最新を取ってくるようになっています（図 6）。
このメンバー募集の過程で書いたQiitaの記事には、たくさんの「いいね」が付いています注6。この記事をきっかけに開発に参加してくれた仲間もいました。

災害対応とシビックテック
災害対応に対して、紙の地図でアプローチをするという過程を見てきました。ここから得られた教訓がいくつかあります。
●情報は人に使ってもらわなくては意味がない●
災害に関する情報をマッピングするプロジェクト
注5
注6

180 - Software Design

https://docs.mapbox.com/mapbox-gl-js/api/
https://qiita.com/hal̲sk/items/13f407c052ca01972176

第 97 回印刷して使う災害支援地図「紙マップ」の開発秘話

は、大きな災害では必ず▼▼図 6 現在のアーキテクチャといっていいほど行われGoogle My Mapsます。しかし、その情報は、本当に人々に届いているでしょうか。情報をGitHub Pages

KML（ダウンロードして GitHub に登録）必要な人に届けるところまで考えないと意味がありません。今回のシステ
ムは、「紙で配る」という点に着目し、実際に人にWeb ページ作成・アップロード手渡せる地図を作成しました。
レーションができたことは大きかったと思います。

過ぎて、地図を届けるところで各地との連携があままた何か大きな災害が起きたときに紙マップが役りできていなかったのかなという反省があります。に立てる場面もあるでしょうし、Slack には情報収集のチャンネルもできています。日本では災害は繰●ボランティア活動の難しさ●
各地で発生するマッピング活動は、だいたいは災害対応の初心者が始めることが多いです。毎回ゼロり返されますので、このように少しずつ着実にコミュニティ化をしていけば、どんどん良いツールが積み重なっていくのではと感じます。

から始まる活動で、ボランティアを集めて正しい情報を集めていくのはとてもたいへんですし、情報の●公的機関との接続の難しさ●

品質を上げる部分にも課題があります。長期的に続マッピングを進めるうえで、本来であれば行政がけることも難しいため、活動の時期やエリアに大き持っている情報を掲載することで多くの調査を省くなムラができてしまいます。

ことができます。しかし、多くの自治体は災害が発昨今では N²EM（National Network for Emer

生すると手一杯になります。そんな中、よくわからgency Mapping：ネム）という組織が立ち上がり、被ない団体が「データをください」と現れても、断られ災地への情報収集支援を行うと宣言していますのることが多いです。逆にボランティアが集めた情報で、このような組織がうまく稼働すると良いのかもを使ってもらおうとしても、信頼性の低い情報を使しれません。

うにはリスクが伴い、ボランティア側も仕事ではな

Hack For Japan + Code for Japan

ただ、台風 19 号のときには災害があまりに広範囲いのでそこまで責任は持てません。
●適切なツールを使い、適切なコミュニケーショ●

ボランティアセンターが地域とボランティアをつンをすることで参加がしやすくなる

ないでいるように、情報ボランティア活動もうまく

たとえば、今回は GitHub の Issue の中で初心者向コーディネートするプロの組織があると、協働がうけのものに「good first issue」というラべルを付けたまくいくのではと感じています。

り、Qiita にリクルーティングを意識した記事を書い◆◆◆たり、Slack チャンネルでの丁寧な対応を行ったり、紙マップは、誰でも参加できる活動です。GitHub

README を始めとするドキュメントをしっかりとでソースコードや Issue を公開しています注 7 ので、記述したりしました。これにより、とても優秀な開興味を持った方はぜひご参加ください。s発者やデザイナーが集まってくれました。一度も顔を合わせたことのない人も含めて、うまくコラボ

注7https://Github.com/codeforjapan/mapprint

Jan. 2020 - 181