Hack For Japan

エンジニアだからこそできる復興への一歩
第47 回 第 4 回 石巻ハッカソン——その 2
前回に引き続き、2015年7月に開催された第4回目となった石巻ハッカソンについてレポートします。Hack For Japanのメンバーがかかわったチームを掘り下げる続きで、今回は及川と高橋それぞれのチームについて紹介したいと思います。

我が家の防災計画メーカー● Hack For Japan スタッフ
及川 卓也 OIKAWA Takuya@takoratta
KAMATA Shigenori
Twitter @4niruddha
清水 俊之介 SHIMIZU Shunnosuke
Twitter @donuzium
高橋 憲一 TAKAHASHI Kenichi
Twitter @ken1_taka
Twitter鎌田 篤慎

した。1 つは家族で防災を話し合い、災害時に自宅近くの避難所まで逃げる経路を自分たちで作るもの。もう 1 つは、この避難所までの経路を作成をす

筆者（及川）は今回で 4 回連続の石巻ハッカソンのるサービスを、普段プログラミングをすることのな参加となります。1 年目と 2 年目は IT ブートキャン

いようなお父さんでも、子どもたちと一緒に作るこプ部門で講師を務めさせていただき、3 年目となるとができるようなツール。

昨年は、1 年目に教えたうちの 1 人で、今ではイトナ

後者は、小さいときにお父さんがアプリケーショ

ブの中心メンバーの 1 人として今年の IT ブートンを作ってくれたことから IT の世界に興味が出始

キャンプでは講師を担うまでになった、デルシオこめたという、加藤さんの個人的な経験に基づくものと中塩成海さんの プ ロ ジ ェ ク ト、「D i s a s t e rでした。小学校低学年の子どもでもお父さんと一緒

Survival Toolbox」に参加しました。これは発災後に作れるように、カードのような紙を組み合わせるに必要となる知恵を事前に収集・共有するためのことでサービスが構築できるものを加藤さんは想定サービスです。このプロジェクトはまだ継続中です

していました。たとえば、写真というカードや地図が、中塩さんを始めとしたメンバーのスケジュールというカードなど、最終的に自分たち家族で必要と調整がつかず、少し停滞してしまっているので、そなる避難所までの経路情報を表示するためのカード

ろそろ再開したいところです。

を好きな位置に配置します。カードですから、子ど

注1

さて、4 年目となる今回も昨年と同じように、一もでも好きな配置を考えられます。それぞれのカー参加者としてハッカソン部門に参加しました。初日

ドの裏には、その機能を実現するためのコードや家のアイデアピッチを聞いて参加を決めたのが、加藤族向けにカスタマイズするための変数が書かれてい拓明さんが提案していた「マイ避難所マップ」です。

るので、それを後でツールから打ち込むことで実際加藤さんとは、福島の IT コミュニティであるエフに紙のカードベースで組み上げたサービスが実現でスタ !! 注 2 の活動を通じて以前より知り合いでしたきるというアイデアです。

が、当日ピッチの後、所在なさげに賛同してくれる

この加藤さんの考える 2 つのアイデアを一緒に他仲間を待っているのを見て、少し話でも聞いてみよ参加者にアピールしているうちに、2 名のメンバーうと思ったのがきっかけでした。

が集まりました。加藤さんと同じくエフスタ !! のスプロジェクトの構想
加藤さんの「マイ避難所マップ」というアイデアは聞いてみると、2 つのアイデアが合わさったものでタッフである藤原裕也さんと、昨年も石巻ハッカソンに参加したテキストマイニングやソーシャル分析の研究者である村上明子さんです。
加藤さんのアイデアは、防災というアイデアとITに慣れ親しんでもらうツールというアイデアの2つ

注1
注2

イトナブは変なあだ名を付けられるという、メンバーになるためのイニシエーションがあります。

http://efsta.com/

184 - Software Designが組み合わさったものでした。これはこれで魅力的ではあるものの、実質作業できるのは1日半という第47 回 第 4 回 石巻ハッカソン—— その 2

限られた時間であることと、サービスの軸がぶれて防災計画が表示されるまでの基本フローを実現するしまう恐れがあるということで、話し合った結果、ことと、肝となる避難経路を作成・表示する部分に防災一本に絞ることとしました。ただし、家族で一注力することにしました（写真 2）。

緒に作るというコンセプトは守ることにします。

サービスのイメージを詰めていく
さて、皆さんは防災について家族で考えるとき、避難所までの経路以外にどのようなことを話し合う

避難経路は、IT に慣れた私たちだと、Google マップのような地図に経路をプロットすることを想定しがちです。しかし、道筋を示すには必ずしも地図で表示することだけが最善とは限りません。しかも、ターゲットは子どもです。

でしょう。私たちもまずはそのことを考えました。

そこで私たちは避難経路を実際に確認し、その際まずは、自宅近くの避難所の場所を確認。災害にに撮った写真をそのまま防災計画に取り込めるようよって適切な避難所は異なるかもしれません。津波

なしくみを考えました（図 1）。子どもと一緒に自宅の際の避難の場合は、避難所までの道も普段使う最を出て、最寄りの避難所までを実際に歩いてみま短の道ではないかもしれません。また、災害時に持す。
「この信号を左折、坂を登って」と避難所までのち出す荷物や自宅に常備しておくものも、家族で考道を子どもと確認しながら、撮った写真をサービスえる必要があるでしょう。お父さんやお母さんの連に取り込むと、その写真が撮影日時順に並び（後か絡先も子どもたちにとっては大切です。

ら変更可能です）、さらには撮影場所の緯度経度をすでに自治体や各種団体などからハザードマップ

元に Google マップのような地図上にも表示されまを始め、防災のための情報は多く提供されています注 3。撮影された写真を子どもとともに確認するす。私たちの作るものは、完璧な情報を網羅するとことで、自宅でももう一度道順を確認できます。

いうよりも、このサービスを使って、家族が防災にまた、このサービスは何度も言っているように子ついて話し合い、自分たちなりの防災計画を作るもどもがターゲットで、しかも災害時に使用されるこのに主眼を置くこととしました。プロジェクトの名とを想定しています。そのため、作成はブラウザか前もそれに合わせて「我が家の防災計画メーカー」となりました。

注 3 そのため撮影にはスマートフォンを推奨しています。

サービスは Web アプリ
ケーションの形を取り、ターゲットとなる小学校◆◆写真 1 デ ータ入力を行うトップ画面のアイデア◆◆写真 2 各 種情報をカスタマイズし、防災計画を固める画面イメージ

低学年の子どもでもわかるようなシンプルなユーザインターフェースを目指します（写真 1）。バッ
クエンドは PHP で各種コンポーネント間のデータの連携や外部サービスとのつなぎを担当します。
時間も限られているので、今回のハッカソンではサービスのコンセプトが示せるようにと、データの入力から自分たち用のNov. 2015 - 185

Hack For Japan

エンジニアだからこそできる復興への一歩◆◆図 1 平 時にそろえておくもの、家族の連絡先、避難所の確認を入力します

ら行いますが、その結果となる防災計画は紙に印刷して使うことにしました（図 2）。
実質 1 日半となる開発時間でしたが、どうにか予定したコア機能を実現し、最終日の成果発表会に臨みました。

ハッカソンを終えて成果発表会では残念ながら賞はいただくことはできませんでしたが、審査員の方々からは高い評価を得られました。
「ぜひとも完成させて教育委員会などに持ち込み、実際の防災教育に役立ててほしい」との暖かいメッセージもいただきました。また、家庭にそろえておくものに関しては、「多くの家庭で必要となるものなどは同じこともあるので、そのよ◆◆図 2 完成した防災計画は印刷できます

うな典型的な常備品については入力を容易にする工夫がほしい」とのフィードバックもいただきました。
実は開発したサービスでは、入力項目ごとにマウスをホバーさせると、ヒントとなるような情報が表示されるようになっており、推奨される常備品についてもそこで示されてはいました。しかし、それはあくまでも表示されるだけで、再入力が必要ですし、マウスホバーで表示というユーザインターフェースも、必ずしも操作しやすいものではありません。実装が間に合わなかったというのが実情ですが、常備品や避難所などを選択するだけでデータ入力が完了する項目の操作性については今後の改善点です。
ハッカソンとしては成果発表会のデモで私たちのプロジェクトはいったん終了ですが、審査員の方に言われたように一般公開を目指したいと考えています。ハッカソンが終わると、モチベーションの低下などもあり、継続されないプロジェクトも多くありますが、審査員からの「このサービスはもう動いているみたいなんですけど、すぐ使えますか？」という質問に「はい！」と元気よく答え、他メンバーを慌てさせた加藤リーダーの根拠なき楽観のもと、このプロジェクトはぜひとも継続したいと考えます。家族で防災について話し合うことで防災意識を高めることこそが、もっとも災害に強い家族、そして社会を作っていくものと信じています。

186 - Software Design

第色白族の楽園

47 回 第 4 回 石巻ハッカソン—— その 2◆◆写真 3 C ardboard にセットされた端末の画面に浮かぶ海（のようなもの）

筆者（高橋）も 2012 年の第 1 回目から継続して参加しており、これまでは講師やサポート役に徹してきたのですが、今年は一参加者として開発をすることができました（それができたのも、初回の頃はア
プリ開発は初めてだったメンバーが自分たちだけで進められるまでに成長してくれたおかげです）。
2013 年の 2 回目に声をかけて以来、継続して参加してくれている Android コミュニティでの盟友

board SDK を使用して右目用と左目用に分けた表adamrocker 氏とチームを組み、今回のテーマであ示や方向のトラッキングを行いました。

る海を VR 空間に実現することにしました。第 2 回

サーバに用意した Web API を呼び出すと、全体のときにボクスケというアプリを開発して優勝してのシーン構築情報とプレイヤーの現在位置の情報をいる adamrocker 氏と、講師でもある筆者（高橋）が取得できるようにしてあり、端末側ではその API組むことで一部の方からは「この 2 人が組むなんてにより得られた圧縮ファイルを展開、シーン構築をずるい！」という指摘もいただいたのですが、マイする……ところまではできたのですが、広大な空間ンクラフトで何かやりたいという adamrocker 氏と、を実現するために必要なメモリの不足問題を時間内Google Cardboard 注 4 で何かやりたいという筆者（高には解決できず、海のようなものが VR 空間上にあ橋）の純粋な思いが合致して誕生したチームです。

るという程度のところでタイムオーバーとなってし「色白族の楽園」というタイトルは、今回「海」がまいました（写真 3）。

テーマとして与えられたことは、夏に海に行って黒理想とする楽園の完成には至りませんでしたが、く焼けることに縁遠い（＝色白）我々開発者への挑戦

2 人ともこのマインクラフトの世界観とそれを実現状と捉え、それならば「バーチャルな空間に我々がする膨大な仕様に感心しながら、純粋に高度な技術思い描く海の楽園を作ろうじゃないか」という発想的課題をお互いに課してハッカソンの醍醐味を楽しから来たものです。

んだ 2 日半でした。

構成は Mac OS X 上でマインクラフトを動かし、解析した地形データとリアルタイム情報（プレイヤーの位置やブロックの生成・破壊などの情報）を来年も開催決定

mod と呼ばれるしくみで連携できるように再構成しこのように、高校生をサポートする役に回ったました。地形データはデータ自体が巨大なのでり、即興でできたチームに加わったり、技術的な興Google Cloud Storage を経由し、リアルタイム情味の赴くままに開発をするなど、多様な参加の方向

報は Google App Engine で構築したサーバ経由で性があるのもこの石巻ハッカソンの魅力です。最後

Android 端末に転送、その端末を Google Cardboardの発表のときに「今年はスキルが足りず開発に貢献にセットして VR としての表示を行うというものでできなかったけど、来年は開発する側に回りたい」

す。Android のアプリケーションは通常どおり Javaと言ってくれた方がいました。すでに来年の開催日で実装し、3D グラフィクスの表示には Rajawali 注 5

程は 2016 年 7 月 22 〜 24 日と決定しています。このというライブラリを使用したうえで、Google Card連載の昨年の記事を見て興味を持ったのがきっかけ

注4
注5

https://www.google.com/get/cardboard/
https://github.com/Rajawali/Rajawali

で参加してくれた方もいます。来年の夏、非常に濃い 3 日間をぜひ石巻で過ごしてみませんか。sNov. 2015 - 187