「はじめてのハッカソンvol.19 」に参加してきました。


先日参加したイベント「CSS3の新レイアウト「Flexbox」ハンズオン 〜Flexでコレできるかな?〜」で知り合った「デザイン イリューム」のみまさんの主催イベント 「はじめてのハッカソン」 に参加してきました。

ハッカソン(英語: hackathon 、別名:hack day ,hackfest ,codefest )とはソフトウェア開発分野のプログラマやグラフィックデザイナー、ユーザインタフェース設計者、プロジェクトマネージャらが集中的に作業をするソフトウェア関連プロジェクトのイベントである。

ハッカソン – Wikipedia

ハッカソンはプログラマーが集まってやるものだと思っていたのですが、イベント告知をふと見る 「デザイナーやマークアップエンジニアも募集しています!」 とのこと。

これは行ってみるしかない!ということで、今回は マークアップエンジニア枠 での参加となりました。

チーム分け

当日、チーム分けが発表され、私のチームはこんな感じ。

合計4名でバランスのいいチームでした。

他のチームにはディレクターがいたり、エンジニア3名で構成されたチームもあり、それぞれのチームが独自のフローで開発を行っていました。

アイデア出し

自己紹介をしつつアイデア出し。

今回は 「音声感情認識API」 が提供されており、それを絡めて何かやろう!ということだけを決めてアイデアを出していきました。

たまたま自己紹介の中の「最近面白いアプリ」という項目があり、そこで「snow」があがったので、音声感情認識と絡めて 「電話版snowとかどう?」という 何気ない発言からアイデア出しが加速した 時はとてもワクワクしました。

何気ないキーワードの組み合わせから突然アイデア出しにエンジンがかかるので、尻込みせずにどんどん発言していくのが大事です!

結局、色んな方向に話が拡大しつつも、時間と実装の面も考慮して実装内容を詰めていったところで午前が終了。

実装作業

実装内容と役割を分担したところで、実際に作業開始。

時間制限と、各自異なる分野異なる環境で普段開発を行っているので、基本的に 共通言語は無い ものと思わなければいけません。

早速バックエンドチームがAPIの仕様策定から、何を引き渡すのか?という話をはじめて、デザイナーが必要であろう素材を作り始めたところで

私「(あれ、何したらいいんだ)」

今まで指示通りのオペレーションばかりしていたツケがこういうところで出てくるのだなと痛感。。。
普段から自分で考えてやっていかないとほんとだめですね。

そうはいってもエンジニアの端くれですので、プロトタイピングも兼ねてビュー部分の実装をHTML/CSSオンリーで進めていきました。 アニメーションや状態の切り替えは 「男は黙ってjQuery」 ということでフルjQuery実装。下手にフレームワークを使うより、より共通に近いであろうjQueryを採用しました。

「あれ、jsonデータってどうやって取得するん」
「あれ、API叩くって、そもそもなんやったっけ」

などとサーバ連携を数えるレベルでしたことなく、classの付け外しやクリックイベントくらいでしかjQueryを使ったことがない私が変な汗をかきそうになったりもしましたが、なんとかgoogle先生で解決。

そういうの、何度か写経したことは絶対あるんですけどね、教本とかで。 写経して「ふーんなるほどね」となったところで、何も身についてないのが現実でした。 実案件ですんなり使えて初めて身についたと言えるですね。

成果報告

成果報告の時点で思ったことが一つあります。

それは、「なんとか発表できる形を整える」 こと。

時間をたっぷり使えれば1から10まで自分の理想通りにいくかもしれませんが、ハッカソンは時間制限があります。

ここでの発表の形がそれぞれのチームで違ったのが面白かったです。

わたしのチームは取り決めをしていたわけではありませんが「とにかくデモページを動かす」というところに持って行こうとしていました。

結果、付加機能をかなりそぎ落とし、かなりミニマムな状態でしたがデモページをリリースできたのは良かったと思います。

終了時点で「最低限の機能+かなり完成形に近い付加機能」という状態だったのも、いい形で終えることができたのではないでしょうか。

他の2チームの発表も非常に参考になりました。

片方のチームは「フル実装されたプロトタイプをXDで作成」 もう片方は「スライドに仕様をわかりやすくまとめて発表」 と、それぞれ異なるアウトプットの形に持って行っていました。

「フル実装されたプロトタイプをXDでプレゼン」はディレクターがいたチームの報告で行われていました。デザイナーとディレクターでしっかり作り込まれたプロトタイプと、超ロジカルな要件定義、ターゲットユーザ、ペルソナ設定の説得力には驚きました。

また、「スライドに仕様をわかりやすくまとめて発表」を行っていたのはエンジニア3人で構成されたチームによって行われていました。作るアプリの特性上、視覚で分かりやすくできるものではなかったのですが、データの流れなどを丁寧に説明しておりなるほどと納得できました。

「アイデアを殺してでも実物が存在する状態にもっていく」にひたすらこだわったのはデザイナーとフロントエンドエンジニアが実装に関わったわたしのチームならではの発想だったのかなと思いました。実際にモノが存在しているという状態にもっていけたのはこっそり満足しています(笑)

まとめ

わたしが伝えたかったハッカソンの魅力は以下の通りです!

「はじめてのハッカソン」はエンジニアだけのイベントじゃありません!
どの職種でもモノづくりに関わる人はみんなが活躍できるし楽しめるイベントだと思いました!

次回参加するときまでに、もっとサーバサイドとの連携に用いる技術を習得すると決めました!