Mashup Award 9でMashup賞を頂きました!

やぁみんな、元気かい?
オレは3週間ぶりの日曜の朝を満喫中さ。

ところで、Mashup Award(以下MA)って知ってるか?

リクルートさんが開催している「日本最大のウェブアプリケーション開発コンテスト」だ。
どれくらいの規模かというと、優勝賞金が200万円で、今年の応募作品数は460作品という規模だ。

今日の記事はその大会に出場して、Mashup賞という賞を頂いたMashupVisionという作品に関する日記みたいな記事を書いてみようと思う。

先に言っておくと、MashupVision自体の技術的なことには触れないぞ! そういうのは他のメンバーがそのうち書くはず!

大会の流れとメンバー紹介

上に優勝賞金が200万円という単語を書いたので分かっていただけると思うが、このコンテストでは最終的に勝ち残ったチームが最優秀賞という名誉ある賞を授与する事になる。

簡単に言うと、ウェブアプリケーションの天下一武道会のような大会なのだが、最後のステージに立つまでの道順が地域や時期ごと複数の経路がある。

文章にすると非常に分かりにくいので、公式サイトの図を勝手に使わせてもらうことにするよ。
diagram

今回オレたちが最初に出場したのは、図の右下に記載してあるハッカソンだ。大体の流れは見えてきただろうか?

次にメンバー紹介をさせてくれ。


清野 真衣子
清野 真衣子

バックエンド・ハードウェア・コンセプト担当

https://www.facebook.com/maiko.ando.523
https://twitter.com/ampersand_xyz

IT系のイベントに参加すると、男だと思ってましたと言われることがあるそうだが、わりと女子である。わりとね。
料理スキルがかなり高く、専業主婦なのかプログラマーなのかが分からないレベルに達している。

 


菅原 祐
菅原 祐

iOSプログラミング担当

https://twitter.com/yusuga_

寝ても覚めても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名という構成でテーブルに座っていた。

ハッカソン1

このハッカソンでは2日間という短い期間で開発を行う必要があるため、式場に行ってもマシンに向かっているという異様な光景になった。ちなみに北海道神宮だ。

ハッカソン2

1日目はこんな感じで終わった。

2日目も怒涛の作業を行い、なんとか発表時間までにプレゼンできる物が完成した。

これがMashupVisionの原型だ。

この時はMashupVisionではなく、iRobocop(アイ ロボコップ)という作品名でプレゼンを行った。コンセプトも最終のものとは違い、「iPhoneで安価なGoogleGlassを」という感じだった。

細かい話だが、ハッカソンに出場したときのチーム名「17」は「24-7」だ。24-7=17だな。

オレたちの他にも素晴らしい作品が集まったが、なんとか勝つことができた。

その他のチーム情報は、公式のブログを参照して頂きたい。

http://mashupawards.tumblr.com/post/61487367552/ma9-mashup-camp

そんなこんなで、2次予選に向けて動き出すことになった。

2013年10月19日15時05分54秒 5184 x 2487 Canon EOS Kiss X4 1-1000 秒 (f - 2.8)

2次予選へ

2次予選進出が決まってからの数週間、オレたちはあまりうまく動くことが出来なかった。

なぜかというと、佐藤 欣昭が東京に転勤してしまい、うまく共同作業を行うことができなくなっていたのだ。

オレたちは3日前に東京入りをする事を決め、その3日間で何とか形にする事にした。

作業場所は佐藤 欣昭の家だ。

2013年11月02日22時30分02秒 5184 x 3456 Canon EOS Kiss X4 1-60 秒 (f - 4.0)

菅原 祐清野 真衣子佐藤 欣昭たちが着々とプロダクトを作っていく。

ヘルメットも改良し、スキーのゴーグルをベースに仕上げてみた。遠目から見ると何なのか良く分からなくて格好よく見えるが、近くで見ると布である。ちなみにドンキホーテに売っていたヘッドバンドを巻きつけてある。

表面の金属っぽいものは、ハンズで買った塩ビ板だ。

2013年11月05日01時53分52秒 5184 x 3456 Canon EOS Kiss X4 1-100 秒 (f - 2.8)

そんな中、わりとやることが無かった川田 知愼は、PV作成に専念することになった。

PVの構成はなんとなく頭に浮かんでいたが、細かい部分まで詰め切れてなかった。

発表の内容は、PV+コントという時間割でいこうということになり、菅原 祐が女装して佐藤 欣昭とデートをするという内容でいくことになった。

菅原 祐清野 真衣子の服を着せたところ、わりと形になったので皆安心した。

2013年11月03日11時27分05秒 4176 x 2784 Canon EOS Kiss X4 1-50 秒 (f - 3.5)

服装+かつらで乗りきれると計算していたところ、佐藤 欣昭が女装にはブラジャーが必須だと頑なにクオリティを追求してきたため、清野 真衣子が所持していたブラジャーを菅原 祐に付けてもらうことになった。

結果、確かに女装のクオリティが上がった。さすがデザイナーだと思った瞬間である。
ただ、菅原 祐が終始苦しそうであった事を忘れてはならない。

次の日、PVの撮影を新宿で行った。2次予選まであと1日である。動画編集が初体験だったオレは、めちゃくちゃ焦っていた。

2013年11月04日13時10分03秒 3372 x 2248 Canon EOS Kiss X4 1-100 秒 (f - 2.8)

公衆の面前でこの撮影をやりきった、佐藤 欣昭清野 真衣子を賞賛して頂きたい。

そんなこんなで完成した最初のPVがこれだ。

我ながらなかなか良い感じに仕上がったと思うが、初見の人は見ても意味がわからないだろうという懸念はあった。

2次予選中の写真はあまり持っていないのだが、超格好いいオープニングと、撮影してくれていたつぶやきを転載しておくよ。
余談だが、チーム名は17から24-7に変更して登録した。

この日に結果が発表されるはずだったのだが、時間を押したため、後ほどの連絡ということで直ぐに解散になった。

Final Stageへ

後ほど連絡が来て、オレたちはFinal Stageへ行けることになった!
とは言っても、あと1周間しかない状況下でやりたいことが山ほどあった。

オレたちは2次予選の発表を何度も思い出し、良かった点・悪かった点を整理し、Final Stageへ向けてどのように動けばいいのかを整理した。

整理した結果、MashupVision本体の作り直し、PVの再撮影、アプリの安定化を主軸に動くことにした。本当は沢山の機能を追加したいという気持ちもあったが、数で勝負より質で勝負する方向にベクトルを合わせた。

取り急ぎ、本体の作り直しは東京に行ってからだと間に合わない可能性があると思い、事前に清野 真衣子が試行錯誤していた。その中で生まれた3代目のMashupVisionがこれだ。

2013年11月09日04時18分59秒 3304 x 2202 Canon EOS Kiss X4 1-30 秒 (f - 2.8)

写真で良い感じに見えるかもしれないが、ここまでの制作に約10時間かかった。PVの撮影に間に合わせることが出来ないと判断したため、難しい形状での路線は断念する事になった…

それで急いで川田 知愼が作った4代目のMashupVisionがこれだ。

2013-11-09 03.17.40

小学生の図工レベルであった。

4代目のMashupVisionを持ち、オレたちは東京へ。そして当たり前のように佐藤 欣昭の家に行った。

2次予選の時はホテルに泊まったりしていたのだが、時間とお金の節約のため、佐藤 欣昭の家に居座ることにした。流石に人数分の布団が無いため、Amazonで事前に寝袋を買っていた。

菅原 祐は寝袋が気に入ったようで、終始寝袋で開発を行っていた。彼はとても寒がりなのだ。

2013年11月10日10時19分15秒 4544 x 2765 Canon EOS Kiss X4 1-25 秒 (f - 2.8)

2013年11月11日22時02分42秒 2048 x 1365 Canon EOS Kiss X4 1-60 秒 (f - 3.2)

2013年11月11日22時02分46秒 2048 x 1365 Canon EOS Kiss X4 1-60 秒 (f - 3.5)

2013年11月11日22時02分54秒 2048 x 1365 Canon EOS Kiss X4 1-60 秒 (f - 3.2)

2013年11月11日22時03分05秒 2048 x 1365 Canon EOS Kiss X4 1-60 秒 (f - 2.8)

2013年11月11日22時03分21秒 2048 x 1365 Canon EOS Kiss X4 1-60 秒 (f - 3.5)

2013年11月11日22時03分36秒 2048 x 1365 Canon EOS Kiss X4 1-60 秒 (f - 4.0)

2013年11月11日22時05分43秒 2048 x 1365 Canon EOS Kiss X4 1-60 秒 (f - 2.8)

モデルが女性なら「寝袋彼女」っていう写真集を出せそうだな。需要があるかどうかは分からないが。

PVの撮影を前日に控え、川田 知愼が作った4代目のMashupVisionで乗り切ろうかと考え始めていたんだが、なんと清野 真衣子が徹夜で5代目のMashupVisionを仕上げてきた…!!

これには菅原 祐佐藤 欣昭川田 知愼とも予想外のクオリティで歓喜した。

直ぐに撮影した5代目のMashupVisionを見てくれ。

2013年11月10日10時29分19秒 3449 x 2300 Canon EOS Kiss X4 1-60 秒 (f - 4.0)

2013年11月10日10時29分25秒 2048 x 1365 Canon EOS Kiss X4 1-60 秒 (f - 4.0)

寝袋にもよく似合う。

2013年11月11日22時06分56秒 4166 x 2777 Canon EOS Kiss X4 1-60 秒 (f - 2.8)

完成したMashupVisionを持ち、オレたちは再び新宿の町に出かけた。

そんなこんなで完成したFinal Stage用のPVがこれだ。

え?見たこと無い映像だって?
そう、これはボツ案のPVなのだ。

PVの中にコントを入れてやってみようという事で、川田 知愼が考えてみたのだが、菅原 祐佐藤 欣昭清野 真衣子との話し合いの結果、もうちょっと真面目な路線で行くことになった。

オレたちはPVを撮影し直す決断をしたが、PVの撮影が終わったのは月曜日の昼過ぎだ。川田 知愼は半端無く焦っていた。

撮影の風景を見てくれ。

2013年11月11日11時42分35秒 5184 x 3456 Canon EOS Kiss X4 1-640 秒 (f - 2.8)

2013年11月11日11時44分53秒 2048 x 1365 Canon EOS Kiss X4 1-400 秒 (f - 2.8)

2013年11月11日12時10分50秒 2048 x 1365 Canon EOS Kiss X4 1-250 秒 (f - 2.8)

2013年11月11日12時24分53秒 2048 x 1365 Canon EOS Kiss X4 1-800 秒 (f - 2.8)

細かい話だが、清野 真衣子が家にメガネを忘れたため、100均でメガネを買ってきて渡した。清野 真衣子からメガネを取ると誰か分からないのだ。

2013年11月11日13時48分15秒 4560 x 3040 Canon EOS Kiss X4 1-30 秒 (f - 2.8)

佐藤 欣昭清野 真衣子が見つめ合うシーンの時に、外国人のおっちゃんがすごい勢いでカメラをこっちに向けていたので、撮影のインパクトはかなりあったと思う。構図を見ていただければわかると思うが、普通に歩道で撮影している。かなり邪魔だったと思う…

そんなこんなで完成した最後のPVがこれだ。

我ながらなかなか良い感じに仕上がったと思う。

ここまで一度も発表練習をしてこなかったオレたちは、当日の午前1時くらいから発表練習を開始した。かなり焦っていたので、練習時の写真などはないのだが、台本を印刷してお互いに確認しあったりと、3時間以上の練習を行った。

発表練習はうまく行ったのだが、実はこの発表方法事態、かなりの綱渡り発表だったのだ。Final Stageの会場に居た人にしかわからないと思うが、iPhoneの画面をAirPlayでPCに映し、それをプロジェクターを通して映していた。

これを行うためのソフト(Reflector)が非常に不安定だったのだ。Bluetoothのヘッドセットや、4G回線でのサーバーとのやりとりなど、iPhone5sに負荷がかかっているのではないかと思っていたのだが、最後まで原因が不明だった。

オレたちはAirPlayの神様に祈りつつ、どうしてもプレゼン会場でAirPlayがつながらなかった時の事を考え、プレゼン中に行うデモと同じような物を事前に撮影する事にした。これが当日の朝である。

2013-11-10 08.46.34

2013-11-12 11.54.19

1つだけアップしておいたが、予備の動画はこんな感じで作成していた。

ギリギリまで用意をし、オレたちは会場に向かった。

2013-11-12 15.04.12

発表前の写真なんだが、みんな緊張している…!

そしてオレたちの発表が始まった。AirPlayは直前まで繋がらず、司会の伴野さんに少し待ってもらってやっと繋がった。

AirPlayが繋がるまでの数秒間、菅原 祐川田 知愼は、絶望的な気持ちになっていた。

PVの説明を行う清野 真衣子

PVが終わり、MashupVisionの起動音が会場に響くと思った瞬間… 音声トラブルにより無音という事態に…! そのまま乗り切るべく、清野 真衣子が流れるはずの音声をアナウンスする方法でプレゼンを行った。

佐藤 欣昭が登場し

菅原 祐と一緒にコントを開始。

最後は舞台に降り、複数顔検知で会場を巻き込んで終了!

発表が終わると、直ぐに投票が始まったのだが、ここで事件が2つ起こった。

投票は電話を使って行うものだったのだが、手が震えて自分以外のチームに1票入れてしまったのだ… もう一度出来るかと思ってかけ直すと、もう出来ませんというメッセージが… 番号をおした後に#を押さなかったため、無効になっていたかもしれないが…

もしも1位と1票差だったらどうしようと嘆いて発表を待っていたところ、菅原 祐も致命的なミスをしてしまったらしく、どうやら発表時に音が鳴らなかったのは、iPhoneがマナーモードだったからという… 2人で悲しみに暮れていた…

そして優秀賞以外の授賞式が始まり、オレたちは2次予選の時から決まっていたMashup賞を頂いた!

そして優秀賞の発表が始まり、最後の最優秀賞の発表…!

残念…!

惜しくも電話投票で3位でした…!

でもまぁ、460チーム中の3位になれたということで、素晴らしい結果を残すことが出来たと思います!

負けた原因はコンセプトが分かりにくいものだったということだと思う。

最後に記念撮影をして解散!

皆さんお疲れ様でした!

また来年!

以上。

川田 知愼

札幌でWebプログラマーをやっています。 2013年まで色々な会社を転々としていましたが、その後は3人でIT会社をやってます。基本的に多趣味な人間なので、ブログネタはごちゃごちゃしてます。ネット上では「ふぐ」という名前を名乗ってることが多いため、奥さんからも「ふぐ」と呼ばれています。