やぁみんな、元気かい？
オレは3週間ぶりの日曜の朝を満喫中さ。
ところで、Mashup Award(以下MA)って知ってるか？
リクルートさんが開催している「日本最大のウェブアプリケーション開発コンテスト」だ。
どれくらいの規模かというと、優勝賞金が200万円で、今年の応募作品数は460作品という規模だ。
今日の記事はその大会に出場して、Mashup賞という賞を頂いたMashupVisionという作品に関する日記みたいな記事を書いてみようと思う。
先に言っておくと、MashupVision自体の技術的なことには触れないぞ！ そういうのは他のメンバーがそのうち書くはず！
大会の流れとメンバー紹介
上に優勝賞金が200万円という単語を書いたので分かっていただけると思うが、このコンテストでは最終的に勝ち残ったチームが最優秀賞という名誉ある賞を授与する事になる。
簡単に言うと、ウェブアプリケーションの天下一武道会のような大会なのだが、最後のステージに立つまでの道順が地域や時期ごと複数の経路がある。
文章にすると非常に分かりにくいので、公式サイトの図を勝手に使わせてもらうことにするよ。
今回オレたちが最初に出場したのは、図の右下に記載してあるハッカソンだ。大体の流れは見えてきただろうか？
次にメンバー紹介をさせてくれ。
バックエンド・ハードウェア・コンセプト担当
https://www.facebook.com/maiko.ando.523
https://twitter.com/ampersand_xyz
IT系のイベントに参加すると、男だと思ってましたと言われることがあるそうだが、わりと女子である。わりとね。
料理スキルがかなり高く、専業主婦なのかプログラマーなのかが分からないレベルに達している。
iOSプログラミング担当
寝ても覚めてもiOSの開発をしている根っからのプログラマーだ。彼の経歴はかなり変わっていて、実はPCを使う仕事についてから未だ2年も経っていない。
経歴2年未満であの技術力か！？とビックリされる方がいるかもしれないが、ビックリしているのはオレも同じである。
デザイン・LP担当
https://www.facebook.com/yoshiaki.st
https://twitter.com/yoshiakist
仕事的にはフロントエンドエンジニア的な事をよくやっている彼だが、今回の作品ではデザイナーに徹してくれた。というかここでエンジニアだと紹介しない限り、彼がデザイン専門職だと誤認している人が多数いるかもしれない。
サーバー・PV担当
https://www.facebook.com/tenchu0314
オレだ。今回の大会では裏方的な作業に徹していたが、いつの間にかPVを作ることになっていた。仕事では「Debianなら2秒だ」と良く言っているLAMP系のエンジニアだったりするが、本人はフルスタックエンジニアと言っている。
この4人の関係だが、24-7という会社の同僚である。（2013年11月18日現在）
諸事情により、24-7の同僚メンバーという括りで、この4人がMAに出場するのは最初で最後になってしまうのだが、それはまたの機会にお話しよう。
MA9 Mashup Camp札幌
がMAに出場しないか？と誘ってくれたのが事の始まりだった。
とはこの手のITイベントにあまり出たことが無かったため、お誘いがなければ興味すら示さなかったと思う。
そんなこんなでやってきたハッカソン会場。実はこの日、24-7に所属するディレクターの方の結婚式があり、15時から結婚式会場に向かわなければならないという状況にあった。そんな理由があり、当日はスーツ3名＋ドレス1名という構成でテーブルに座っていた。
このハッカソンでは2日間という短い期間で開発を行う必要があるため、式場に行ってもマシンに向かっているという異様な光景になった。ちなみに北海道神宮だ。
1日目はこんな感じで終わった。
2日目も怒涛の作業を行い、なんとか発表時間までにプレゼンできる物が完成した。
これがMashupVisionの原型だ。
この時はMashupVisionではなく、iRobocop(アイ ロボコップ)という作品名でプレゼンを行った。コンセプトも最終のものとは違い、「iPhoneで安価なGoogleGlassを」という感じだった。
細かい話だが、ハッカソンに出場したときのチーム名「17」は「24-7」だ。24-7=17だな。
オレたちの他にも素晴らしい作品が集まったが、なんとか勝つことができた。
その他のチーム情報は、公式のブログを参照して頂きたい。
http://mashupawards.tumblr.com/post/61487367552/ma9-mashup-camp
そんなこんなで、2次予選に向けて動き出すことになった。
2次予選へ
2次予選進出が決まってからの数週間、オレたちはあまりうまく動くことが出来なかった。
なぜかというと、が東京に転勤してしまい、うまく共同作業を行うことができなくなっていたのだ。
オレたちは3日前に東京入りをする事を決め、その3日間で何とか形にする事にした。
作業場所はの家だ。
たちが着々とプロダクトを作っていく。
ヘルメットも改良し、スキーのゴーグルをベースに仕上げてみた。遠目から見ると何なのか良く分からなくて格好よく見えるが、近くで見ると布である。ちなみにドンキホーテに売っていたヘッドバンドを巻きつけてある。
表面の金属っぽいものは、ハンズで買った塩ビ板だ。
そんな中、わりとやることが無かったは、PV作成に専念することになった。
PVの構成はなんとなく頭に浮かんでいたが、細かい部分まで詰め切れてなかった。
発表の内容は、PV＋コントという時間割でいこうということになり、が女装してとデートをするという内容でいくことになった。
にの服を着せたところ、わりと形になったので皆安心した。
服装＋かつらで乗りきれると計算していたところ、が女装にはブラジャーが必須だと頑なにクオリティを追求してきたため、が所持していたブラジャーをに付けてもらうことになった。
結果、確かに女装のクオリティが上がった。さすがデザイナーだと思った瞬間である。
ただ、が終始苦しそうであった事を忘れてはならない。
次の日、PVの撮影を新宿で行った。2次予選まであと1日である。動画編集が初体験だったオレは、めちゃくちゃ焦っていた。
公衆の面前でこの撮影をやりきった、とを賞賛して頂きたい。
そんなこんなで完成した最初のPVがこれだ。
我ながらなかなか良い感じに仕上がったと思うが、初見の人は見ても意味がわからないだろうという懸念はあった。
2次予選中の写真はあまり持っていないのだが、超格好いいオープニングと、撮影してくれていたつぶやきを転載しておくよ。
余談だが、チーム名は17から24-7に変更して登録した。
#ma9 16 Mashup Vision http://t.co/nu5tWEEGXT – http://t.co/VpVLqVitOt – なんてスマートなんだ！！！！１１１
— 楽天WEBSERVICE (@RakutenAPI) November 5, 2013
MashupVision 色んな意味ですごい。 #MA9 pic.twitter.com/lYrTGrOBSI
— ゆこたん (@yukotan) November 5, 2013
この日に結果が発表されるはずだったのだが、時間を押したため、後ほどの連絡ということで直ぐに解散になった。
Final Stageへ
後ほど連絡が来て、オレたちはFinal Stageへ行けることになった！
とは言っても、あと1周間しかない状況下でやりたいことが山ほどあった。
オレたちは2次予選の発表を何度も思い出し、良かった点・悪かった点を整理し、Final Stageへ向けてどのように動けばいいのかを整理した。
整理した結果、MashupVision本体の作り直し、PVの再撮影、アプリの安定化を主軸に動くことにした。本当は沢山の機能を追加したいという気持ちもあったが、数で勝負より質で勝負する方向にベクトルを合わせた。
取り急ぎ、本体の作り直しは東京に行ってからだと間に合わない可能性があると思い、事前にが試行錯誤していた。その中で生まれた3代目のMashupVisionがこれだ。
写真で良い感じに見えるかもしれないが、ここまでの制作に約10時間かかった。PVの撮影に間に合わせることが出来ないと判断したため、難しい形状での路線は断念する事になった…
それで急いでが作った4代目のMashupVisionがこれだ。
小学生の図工レベルであった。
4代目のMashupVisionを持ち、オレたちは東京へ。そして当たり前のようにの家に行った。
2次予選の時はホテルに泊まったりしていたのだが、時間とお金の節約のため、の家に居座ることにした。流石に人数分の布団が無いため、Amazonで事前に寝袋を買っていた。
は寝袋が気に入ったようで、終始寝袋で開発を行っていた。彼はとても寒がりなのだ。
モデルが女性なら「寝袋彼女」っていう写真集を出せそうだな。需要があるかどうかは分からないが。
PVの撮影を前日に控え、が作った4代目のMashupVisionで乗り切ろうかと考え始めていたんだが、なんとが徹夜で5代目のMashupVisionを仕上げてきた…！！
これにはとも予想外のクオリティで歓喜した。
直ぐに撮影した5代目のMashupVisionを見てくれ。
寝袋にもよく似合う。
完成したMashupVisionを持ち、オレたちは再び新宿の町に出かけた。
そんなこんなで完成したFinal Stage用のPVがこれだ。
え？見たこと無い映像だって？
そう、これはボツ案のPVなのだ。
PVの中にコントを入れてやってみようという事で、が考えてみたのだが、との話し合いの結果、もうちょっと真面目な路線で行くことになった。
オレたちはPVを撮影し直す決断をしたが、PVの撮影が終わったのは月曜日の昼過ぎだ。は半端無く焦っていた。
撮影の風景を見てくれ。
細かい話だが、が家にメガネを忘れたため、100均でメガネを買ってきて渡した。からメガネを取ると誰か分からないのだ。
とが見つめ合うシーンの時に、外国人のおっちゃんがすごい勢いでカメラをこっちに向けていたので、撮影のインパクトはかなりあったと思う。構図を見ていただければわかると思うが、普通に歩道で撮影している。かなり邪魔だったと思う…
そんなこんなで完成した最後のPVがこれだ。
我ながらなかなか良い感じに仕上がったと思う。
ここまで一度も発表練習をしてこなかったオレたちは、当日の午前1時くらいから発表練習を開始した。かなり焦っていたので、練習時の写真などはないのだが、台本を印刷してお互いに確認しあったりと、3時間以上の練習を行った。
発表練習はうまく行ったのだが、実はこの発表方法事態、かなりの綱渡り発表だったのだ。Final Stageの会場に居た人にしかわからないと思うが、iPhoneの画面をAirPlayでPCに映し、それをプロジェクターを通して映していた。
これを行うためのソフト（Reflector）が非常に不安定だったのだ。Bluetoothのヘッドセットや、4G回線でのサーバーとのやりとりなど、iPhone5sに負荷がかかっているのではないかと思っていたのだが、最後まで原因が不明だった。
オレたちはAirPlayの神様に祈りつつ、どうしてもプレゼン会場でAirPlayがつながらなかった時の事を考え、プレゼン中に行うデモと同じような物を事前に撮影する事にした。これが当日の朝である。
1つだけアップしておいたが、予備の動画はこんな感じで作成していた。
ギリギリまで用意をし、オレたちは会場に向かった。
発表前の写真なんだが、みんな緊張している…！
そしてオレたちの発表が始まった。AirPlayは直前まで繋がらず、司会の伴野さんに少し待ってもらってやっと繋がった。
AirPlayが繋がるまでの数秒間、とは、絶望的な気持ちになっていた。
PVの説明を行う
PVが終わり、MashupVisionの起動音が会場に響くと思った瞬間… 音声トラブルにより無音という事態に…！ そのまま乗り切るべく、が流れるはずの音声をアナウンスする方法でプレゼンを行った。
が登場し
と一緒にコントを開始。
最後は舞台に降り、複数顔検知で会場を巻き込んで終了！
発表が終わると、直ぐに投票が始まったのだが、ここで事件が2つ起こった。
投票は電話を使って行うものだったのだが、手が震えて自分以外のチームに1票入れてしまったのだ… もう一度出来るかと思ってかけ直すと、もう出来ませんというメッセージが… 番号をおした後に＃を押さなかったため、無効になっていたかもしれないが…
もしも1位と1票差だったらどうしようと嘆いて発表を待っていたところ、も致命的なミスをしてしまったらしく、どうやら発表時に音が鳴らなかったのは、iPhoneがマナーモードだったからという… 2人で悲しみに暮れていた…
そして優秀賞以外の授賞式が始まり、オレたちは2次予選の時から決まっていたMashup賞を頂いた！
そして優秀賞の発表が始まり、最後の最優秀賞の発表…！
残念…！
惜しくも電話投票で3位でした…！
でもまぁ、460チーム中の3位になれたということで、素晴らしい結果を残すことが出来たと思います！
負けた原因はコンセプトが分かりにくいものだったということだと思う。
最後に記念撮影をして解散！
皆さんお疲れ様でした！
また来年！
以上。