初海外ハッカソン！
語り得るものについては、沈黙してはならない。特に初海外ハッカソンなら。（
ヴィトゲンシュタイン自分）
はじめに
ベルリンで行われたハッカソン「PhotoHackDay4」に参加し、開発し、発表してきました。
以前からベルリンがスタートアップにとってホットスポットになりつつある、と聞いて興味があったのですが、こちらの堤さんの記事、
を読み、うらやましくなり大いに刺激され、英語コンプレックス撲滅とネットワーキングを兼ねて参加することにしました。
PhotoHackDayは今年4回目になる中規模のハッカソンで、1日半で何か写真に関するプロトタイプアプリを作る、という内容です。CanonやAmazonも後援しており、ニューヨークや日本でも開催されているようです。
今回はEyeEmという、インスタグラムのようなアプリを作っている企業が主催者です。ベルリンを拠点としているだけあって地元の若者は皆知っていました。
ドイツも初めてなら、人前で英語で話すのも初めてでしたが、人生最高の経験になりました。どれほど最高かというと、ハッカソンの後にベルリンの中央駅でプロ集団に財布を掏られてすべてのカードを失い、早急に帰国することになったのですが、それが全然気にならないほど最高でした。
作ったもの
http://commentie.net/commentie.net
Commentieという、ちっちゃなツールです。技術的に新しい挑戦は一つもありません。
EyeEmのサイトで公開されている写真のURLを入力すると、その写真に対して寄せられたコメントが重畳表示されます。ユーザはコメントをマウスで動かしたり、吹き出しを付けたりでき、画像としてダウンロードできます。
コメントが無い／少ない写真の場合は、おまけの機能（後述）があります。
※僕はバックエンドエンジニアなのでその辺大目に見てください（言い訳）
以下、時系列で書きます。
当日まで
僕がいつも心配で眠れなくなるのは、自分のアイデアが公知のアイデア／製品ではないか、ということです。誰かがすでに作ったものについてモチベーションが湧く訳がありませんし、開発者へのリスペクトもあります。
しかし案外この感覚がない参加者がいて、チームでアイデア出しをする場合、平気で思いつきの（公知の）アイデアを出してきます。
そういう人に限って、普段から情報収集もしなければ、その場でググることさえしません。こちらが類似を指摘すると水を差すな、みたいな顔をします。パッと類似アプリが思いつくアイデアなど大した価値はないと思うのですが。
今回はphotohackdayということで写真関連なら何でも構いませんでした。
ARや画像認識、新種のエフェクタなど30個ほどアイデアを練りましたが、連日ググった結果、全て公知であり、しかもPhotoHackDay1～3で出尽くしていたアイデアでした。エフェクタについてもphotoshopが最近のリリースでカバーしていました。ここが4回目の不利なところです。
今回は技術力をアピールすることより、英語でのプレゼンが目的だったので、技術的に凡庸なアプリであっても、自分の中で「公知でない」ことさえ確認できればそれでいこうと思いました。
結局、31個目に考えた「SNSに投稿された写真と、それに対するコメントを自動合成して一枚の画像にする」アプリにしました。これなら、
- フロントエンドでよく遊んでいる自分にとって新たな技術を必要とせず、1日半で完成できる
- 想定SNS=EyeEmとすることで、EyeEmのAPIを自然に利用できる
- 時間が余っても、画像処理、コメントの装飾、コメントの自動生成など、付加機能で遊べる
- それらしい機能のSNSアプリが見つからない（でも絶対あると思う）
という条件も満たしていました。
決戦前夜
主催者により早々にslackが立ち上がり、EyeEm-APIの使い方など質問が飛び交います。
APIの説明は初日の午前に時間が取られているのですが、EyeEm側も質問にどんどん答えて、github上のAPIドキュメントが最新の情報に更新されていきます。
API利用のためには開発者登録をし、ClientIDとClientKeyを取得し、それを使うアプリも登録する必要があります。アプリをEyeEm側が認証するのには時間がかかります。
また、EyeEmのAPIはOAuth2を利用していて、EyeEmアプリに使うサイトはHTTPSで提供する必要があるということでした。サーバ（AWSのインスタンス）を立てるのは数秒ですが、SSLを使うためには、ドメインを取り、SSLを購入しなければなりません。ドメインやSSLが有効になるにも一定の時間がかかります。
これらを当日やっていたのでは到底実装に間に合いません。戦いはすでに始まっているのです。
アプリ申請、ドメイン取得、廉価SSL取得、httpsサーバセットアップ、すべての処理を前日までに終えて、当日の朝を迎えました。
あとは実装するのみです。
当日朝
目的達成のためには明らかに一人チームがベストだったため、そのつもりで会場へ行きました。
アイデア持参の何人かが、開発者としてうちのチームに来ないかとやんわり誘ってきましたが、
「自分のアイデアを実現するために来たのですみません」とやんわり断りました。
こちらはもう、APIを利用するために、サイトのドメインとSSLまで取ってしまっているので、いまさら別のアプリに変更はしたくありません。
一人チームにしたかった理由は、自分のアプリのアイデアに固執したいからではなく、
- 確実に自分でプレゼンできる
- 作業をコントロールできる
- 作業コストの見積もりが正確にできる
- 監督脚本主演はある意味最も効率的
からです。以前、当日チームビルドして臨んだ日本のハッカソンで、
- アイデアと方向性と実装機能を決めるのに時間がかかって実質的に開発工数が短くなる
- エンジニアに負担が集中する
- 「今はプログラム書かないけど昔やってたできる」という人がいて「できる」と言うから作業を任せたのにいくら待ってもできなかった
という苦い経験をしました。マネジメントする人がいなかっただけで、自分にも責任はあります。
しかし別のハッカソンでは凄腕エンジニア＆デザイナーのメンバーに恵まれ、アイデアも一瞬で固まり、全ての作業が予定通り進みました。運の要素、つまりリスクがあるということで、今回それを避けたかったということです。
あと上記（３）の相手がそうでしたが、ハッカソンを仕事より格下の遊びと考えて、
「まあ予定通りできなくても仕方ないね、出来なかった分はモックにすればいいし。ところで昼ご飯なに食べに行く？」
とみたいなことを一日目から言い出す人がいます。何なんだ？と思います。仕事じゃないと思ってなめているんでしょうか。恐らくこの人は仕事でも手を抜いているのではないかと思います。
ハッカソンは所詮は遊びですが、大人の遊びというのは本気で、命がけでやらないと面白くありません。またハッカソンで有用な技能というのは仕事に有用な技能とかなり共通しています。「この人すごいな」と思うエンジニアやデザイナーは普段から刃を研ぎ澄ましています。油断すると一瞬で打ちのめされます。
そういう意味で、ハッカソンは仕事と同じ真剣勝負だと思います。全力で臨まないと後悔しか得られません。
最初から熱くなりました。
アジア人は自分以外に３人いました。後になってわかったことですが、中華系マレーシア人（ハンくん）、中華系インドネシア人（エリサ）、謎の中国人という３人で、結局日本人は自分だったようです。
ピッチとチームビルドタイム
ピッチ＆チームビルドの時間になりました。
いくら何でも「完全秘密裏に一人で開発するから発表のときだけ混ぜてくれ」というのはハッカソンの礼儀に反します。
ピッチをしても良かったのですが、やたらピッチに立つ人が多かったのと、万一誰かきて予定を狂わされたくなかったので、
ピッチタイムの間に自分のアプリ企画資料を書き、それをslackのチームビルド板にアップして、「来るもの拒まず」とだけ通知しておきました。
もちろん主催者にも伝えて了解してもらいました。
開発タイム
開発は、
という想定外の問題が想定通り発生しましたが、EyeEm技術者に相談したり、
アプリのアーキテクチャをサーバサイド中心に変更したりして、落ち着いて対応できました。
夜になりちょっと寂しい気持ちになっていた頃、二人の来客（ふらっと机に来るだけ）がありました。
ハンくん
数少ないアジア系の参加者で、マレーシアのペナン島からライプチヒに留学中の大学生。制作中のサイトに動きを入れたいのでjqueryでのやり方を教えてほしい、と突然聞きに来ました。
彼がどうして自分ならそれを解決できると思ったのか未だに不思議です。問題はshow()だけで解決したのですが、コピペばかりのGoogleMapのコードも動かないと嘆いていたので一緒に直しました。
フランシー
開発が山場に差し掛かるころ「あなたのアプリ資料を読んだわ。ちょっと話したいけど良い？」という声が降ってきました。誰も見てくれるな、と思ってこっそり資料を置いたのに、もっと手抜きして書くんだったと一瞬後悔しました。
でも後になって考えると、彼女への説明は良い仮想ピッチになったような気もします。彼女は企画意図をすぐ理解しただけでなく、
「背景色によってコメントが見えづらくなる」という問題に対しては、
「コメントテキストに反対色の縁取りを付ける」「コメントを枠線つき吹き出しにいれる」という解決策を、
「写真投稿からコメントが付く時間を十分空けてから、コメントのレイアウトを調整するユーザ負担がある」という潜在的問題に対しては、 「写真投稿時にユーザがコメントエリア（吹き出し等）を事前に設定しておき、後にコメントがされると自動的に配置されていく」
という解決策を提案してくれました。
各機能の実装優先順位が難しいところですが、とりあえずフロントで遊びたかったので、
吹き出しを付けたり外したりできるようにしました。
さらに、写真投稿者とコメント者の親密度に比例してコメントサイズを変える機能についても、
僕の構想ではユーザの相互コメント量から親密度を計算してサイズに反映、としていたのですが、
SNSでの「いいね」を加味するというアイデアを出してくれました。
とても頭の回転の速い人でした。
意外だったのは、「写真を文字などで装飾する文化はドイツにはない」とフランシーが言ったことでした。
「でも女性はデコレーション好きだから、プレゼンが良ければ審査員に訴求すると思うわ」と言ってくれて、これは発表時に背中を押してくれました。
フランシーのチームは、開発プランがまとまらない上に、唯一の開発者であるフランシーに負担が集中し、さらに他のチームメンバーは早々に帰宅してしまったらしく、若干投げやりになって気晴らしに話をしにきたらしいです。
彼女のチームは結局、翌日プレゼンできないという悲しい結果に終わりました。
このように崩壊するチームが出るのはどこのハッカソンも同じです。翌日助言のお礼を言いたかったのに、フランシーを見つけられませんでした。
プレゼン当日朝
翌朝会場に向かうUバーンに揺られながら、プレゼンのシミュレーションが頭の中で終わりました。
今回のPhotoHackDayで良いと感じたことの一つに、「プレゼンはデモのみ」ルールがありました。
パワーポイント的な説明資料なんて見たくないからとにかく持ち時間フルに使ってデモをしてほしい、というアナウンスが実に気持ち良かったです。
ただし審査員に向けての簡単な説明資料はプレゼン前に提出しなければならず、Slackで提出デッドライン時刻を質問したのですが、
「12時半までOKだよ。でも忘れないで、資料作りよりハックが大事だよ」
とコメントされ、うんその通りだね、と頷いてしまいました。
実装まで到達できず資料で構想を紹介してお茶を濁すようなプレゼンや、非エンジニアが登壇して美しくデザインされた資料で熱弁を振るうプレゼンをたまに見かけますが、やはりハッカソンは動くものを作るところであってほしいです。構想だけなら誰でも考えられます。アイデアソンやプレゼン大会に来たわけではありません。
かといって、疲れ切ったフランシーやかつての自分のように、過度の負担がエンジニアに集中するのも正しい姿ではなく、難しいところです。
ちなみに他に今回良かったことは、
- 参加無料
- Slack上でのスムーズなコミュニケーション
- 食事が非常に豪華で美味しい
- 主催者スタッフがフレンドリー
などです。
プレゼンタイム開始後
自分の発表の番が来るまでが、最後の追い込みです。
理想的にはPCを閉じて、観客席で足を組んでコーヒーでも飲みながら、他者の発表を拝聴するべきなのでしょう。
でもそんなお行儀の良いエンジニアがいるでしょうか？ もっと改善できたのに自分は全力を尽くさなかった、と毎夜枕を濡らしたいエンジニアがいるでしょうか？
ステージに上ってマイクを握るまで、戦いはまだ終わっていないのです。
＋αの機能やデザインの手直しなど、優先順位で後回しにしていた開発項目を時間の限り消化していきます。
今回やったことは３つ。
（１）タイトルの文字サイズの変更
観客が気に行ったチーム／アプリの名前を紙に書いて投票する形式でした。
名前がわからないと投票しようがないので、アプリ名「Commentie」を大きく表示しました。
（２）「秘密のボタン」を隠す（デフォルト非表示にする）
今回、プレゼンの秘策として「秘密のボタン」をつけました。 写真にあったコメントを自動生成する、というものです。
しかし時間がなかったために、プレゼンタイム開始時点では「秘密のボタン」は最初から表示されていました。 最初のノーマルな機能の説明時にも、観客の意識が秘密のボタンに行ってしまい、 「秘密のボタン」が観客に与える効果は半減してしまいます。
そこで、当初、
というように最初から秘密のボタンが出てネタバレ状態になっていたのを、
という動きになるように変更しました。
起承転結というと大げさですが、この場合、
- コメント付写真を使ったデモでノーマルな機能をさらっと紹介して、これで終わりです、という雰囲気を作る
- コメント無写真という、かわいそうな場合もありますよね、と言って「まだあるんです」と興味を引く
- その場合どうなるんでしょうか？といってデモ
- コメントが自動生成されたのでもうさみしくありません！
- 自動生成機能について説明してEyeEm-APIの活躍をアピール
という展開が理想です。 振り返ると、この変更が今回最大のポイントでした。
（３）自動生成コメントの多様化
上記が終わってまだ時間が余ったので、自動生成コメントを多様化しました。
まあ多様化といっても、Vision APIが返してくれる写真中の事物名称（mountain, flower, humanなど）に、
"Great"、"Amazing"、"Excellent"、"Nice"、"What a" などをランダムに付け足すだけです。
程なくして「次の発表チームは・・・Commentie、お願いします」というアナウンスが聴こえました。
プレゼン
PhotoHackDayはハッカソン参加者以外の観客がかなり来場していました。小さい子どもを連れた家族もいます。もしかすると参加者や主催者の家族なのかもしれませんが、いずれにせよ日曜の午後というプライベートの時間を割いて、自分の発表を見に来てくれた人達です。少しでも楽しんで帰ってほしいです。
マイクを握ったとき、一瞬、
「すみません、僕は日本から来た旅行者なので、英語が下手で聞き苦しいかもしれませんが、宜しくお願いします」
と前置きしたい衝動に駆られました。しかしこれを言った瞬間に自分は何かに負けて何かを失うことがわかっていたので我慢しました。
一体これまで何度、そのような卑屈な言い訳を繰り返して相手と自分を誤魔化してきたことでしょうか？
英語で苦労しているのはみんな同じです。それによく考えてみると、聴衆であるドイツ人にとっても英語は外国語です。
でも何か言いたかったので「大したことないアプリだからみなさん寝ていいですよ」とだけ言ってプレゼンを始めました。
僕はプレゼン大好きというか熱中するタイプで、結局それは英語でも変わりませんでした。とにかくアイデアをきちんと伝えたいという気持ちが常に緊張を上回ってしまうのです。開発期間は1日半でも１週間考え続けたアイデアです。出来の悪い不細工な我が子への愛情を、恥ずかしがらずに出すだけです。
さて、
「写真のURLをコピーして」「このボタンをクリックすると」というように、説明と操作を同時にこなしていき、
「SNSへのコメントが自動で重畳されて、吹き出しもつけれて、あと勿論、画像として保存できるんですよー」
というノーマルな機能の説明まですらすら終わってしまいました。
予想通り観客の反応は静かなもので、これで終わりと思っている人もいそうな感じです。うふふ。
いよいよOne More Thingの時間です。
「しかしコメントがある写真ばかりではありませんよね？ 例えば、この人の写真には誰もコメントしてくれる人がいないようです。何てかわいそうなんでしょう」
いわゆる外人特有の、胸に手を当てての「Ah...」が聞こえます。新たな展開に興味を引いたのがわかります。
「ではこの写真でアプリを実行してみましょう。もちろんコメントは現れませんね。。。」
「おや、何かメッセージが出てきました、読んでみましょう」
（観客笑い始める）
「ではこの秘密のボタンを押してみましょう。さて、何が起こるでしょうか？いいですか、押しますよ」
（静寂）
"Commentie" fuses photos & their comments into one image. No comments? Then #EyeEmVision generates them! #PHD4 pic.twitter.com/HQSAAsHIyg
— PhotoHackDay (@PhotoHackDay) 2015年11月29日
（コメントが自動生成される）
https://twitter.com/imagingmind/status/670972366953029632
（拍手、笑い声、口笛、足を鳴らす音）
「Let's me explain more, please!」（観客を鎮める）
「このコメントは適当なものではなく、EyeEm Vision APIによる事物認識結果を加工したもの、つまり妥当なものなのです！」
（拍手）
受賞者発表タイム
遠くから「Commentie!」と呼ぶ声が2回聴こえました。
1回目は、本当に自分ですか、と聞いて笑われながらカメラ付きドローンをもらい、
2回目は、さっきもらいましたが本当にまた自分ですか、と聞いて笑われながらAWS券をもらいました。
2回目だったと思いますが緊張して出ていくとき転びました。
観客が大きく拍手をしてくれたのを聞いて、一応印象には残っていたようだと安心しました。
ドローンの方はEyeEm-API賞なので、EyeEmのVisionAPIをきちんと使ってあげた事が良かったのでしょう。
実はアイデア段階ではfacebookアプリにしようかなとも思ったのですが、主催者であるEyeEmとしてはAPIを宣伝したいという思惑もあるでしょうし、エンジニアとしては、技術的本質に関わるものでなければ、多少主催者に擦り寄ることには何の抵抗もありません。
むしろそれくらいの気遣いはしても良いと思うのです。ご飯が本当に美味しかったですが、世の中本当にタダのものはありません。
twitterやブログ記事でも、EyeEm Vision APIによるコメント自動生成機能がメインに扱われている感があります。
https://www.eyeem.com/blog/2015/12/the-winning-hacks-from-photo-hack-day-4-berlin/www.eyeem.com
このブログ記事を読んで、はじめて自分が2位だったことを知りました。これで来年も参戦しなければならなくなりました。やれやれ。
その後
発表後、謎の中国人やその他多くの人が、日曜のミサでもないのに握手を求めてきました。
そのうちの数人は、「一緒に何かしよう」「仕事の話がしたい」といって声をかけてくれ、その後各々とミーティングや食事をすることになりました。
Zavenはシリコンバレーからヨーロッパに移住した起業家で、その後、起業家プレゼン大会に一緒に行きました。
「去年googleに会社を売りました」みたいな人がいて、なかなかのホットスポットぶりでした。
ヴォイチェクとはその後親しくなり、ちょっとした反省会をしました。
「僕は君の言っていることを100%理解できた。」と言ってくれて、心の中で号泣しました。
「特に、『コメントをくれる友達がいないとき』の仕掛けは、ハートウォーミングな演出で観客に届いたと思う」
と言うのを聞いて、最後まであきらめずに開発して本当に良かったと思いました。
ヴォイチェクはデザイナーですが、ハードウェアを含む幅広いプロジェクトに興味があり、EMOTIVを使ったアプリを一緒に作って別のハッカソンに殴り込む約束をしました。
エリサ＆アレックスもその後連絡をくれ、エリサがアルバイトしているインドネシア料理店で夕食を食べました。
アレックスはドイツ人ですが、フリーエンジニアとして東京やロンドンでも働いた経験があり、フリーエンジニアが外国やベルリンで仕事を得る上での実体験をいろいろ教えてくれました。ベルリンはスタートアップは確かに多いが、大企業や高給の仕事はやはりロンドンや東京が良い、ということでした。
エリサは東京やベルリンに語学学校の学生ビザで滞在しつつ、フルタイムのグラフィックデザイナー職を探している若者です。
親子ほど年の離れた二人は、数か月前の日本語好きMeetupで知り合い、PhotoHackDayへの参加を決めたそうです。
エリサはジャカルタで暮らしたくはなく、アレックスはベルリンで暮らしたくはなく、僕は東京で暮らしたくはありません。
エリサはベルリンや東京が良いと思っており、アレックスはロンドンや東京が良いと思っており、僕はベルリンが良いと思っています。
もっとよく話す必要がありそうです。手っ取り早いのは一定期間、各地で暮らしてしまう方法です。
振り返って
今回うまくいったのは運が良かった事もありました。
- ちょうど個人サイトを[手動で超シンプルなStatic Site Generatorに改造したところで、デモサイトをパッと作る準備ができていた
- 個人サイトで過去の遊びの作品をまとめたので、あの技はここで使ったはず、と思い出してコード再利用できた
また開発者としては、
- 開発した機能と工数が想定通りだったこと
- 1日目の夜9時くらいにはホテルに帰って、7時間くらい普通に寝たこと
が良かったと思います。徹夜してフラフラになる達成感も悪くありませんが、全力で臨むというのは寝ないとかレッドブルを積み上げるということではなく、プレゼンを含めて最大のパフォーマンスを発揮できるように調整するということです。
しかし何といっても今回の最大の成果は、英語のプレゼンが何とか通じたこと、でした。
「たぶん海外の開発者やハッカソンも日本とそんなに変わらないんだろうな」と想像はしていましたが、この問いにYesで答えられるようになりました。
海外旅行でもスカイダイビングでも何でも同じですが、「どうせ○○だろうから別に経験する必要はない」という分析は、客観的なものなら問題ないですが、憧れや言い訳の成分が混ざっているとコンプレックスに発酵しやすいです。さっさと経験するに限ります。ベン・スティラーの『LIFE!』がちょうどそんな映画でした。
ただしスカイダイビングには当面は挑戦しないと思います。万一命に関わる事故が起きてしまったとき、もっと作りたいものがあったのに、もっと勉強したかったのに、と間違いなく後悔するからです。びびっているだけかもしれませんが。
海外ハッカソンの場合、方法は非常に簡単です。Eventbrite->Skyscanner->HostelWorldの順に数回クリックするだけで、あとはキャンセルさえしなければ、物事は勝手に進んでいきます。
遣唐使船が沈む訳でもなく、黒船に密航しないと外国に行けない訳でもなく、数か月分の給料を使わないとジェット機に乗れない訳でもありません。ちょっとした挑戦をするのに、自分自身以外、外的な障害は何もありません。そこは日本人に生まれたことを非常に幸運に思うべきます。
とにかく英語に自信がなく、Startup Weeekend Tokyo（英語版）への参加や、IdeaConnectionやInnocentiveへの応募も躊躇していましたが、今後は多少違った態度で臨めるに違いないと思います。
出会った開発者の一部はドイツ以外から来ていて、非母国語の英語で仕事をしていました。 ヴォイチェクにしてもポーランドから来てベルリンのスタートアップで働いており、社内は英語のみのためドイツ語が全く話せません。 ハンくんの英語も少々怪しいところがありましたが、彼は僕のフロントエンドの知識を吸収しようと必死でした。
名前を忘れるほど多くの人と会話をしましたが、誰一人、僕が相手の英語を理解できなかったときに嫌な顔をしませんでした。
考えてみると、日本がたどたどしい外国人がこちらの日本語を理解できなかったとしても、普通は嫌な顔はしないでしょう。相手の熱意が伝わる限り。
語り得るものについては、沈黙してはならない。開発者なら。何か作ったなら。（
ヴィトゲンシュタイン自分）
自分からは以上です。
