- この記事を書いた人
- machida
以前、KUROIGAMENでも紹介したサービス「Happy1000DDays」の作者の@func09さんとまたコンビを組んで新しいサービスをリリース今日（2012年2月10日）にリリースしました。
ATND Groupingはこちら。
リポジトリはこちら
ATND Grouping
エンジニア X デザイナー ハッカソン
このサービスは、こちらもKUROIGAMENで紹介させていただいたイベント「エンジニア X デザイナー ハッカソン」で作ったものです。
イベント開催一週間前にエンジニアの応募者とデザイナーの応募者がくじ引きでペアを作って、あとはそれぞれTwitterやSkypeやLingrなどを使って何を作るかを決めて、軽く準備をしたら、あとはイベント当日のぶっつけ本番。一日でサービスを動くところまで作ってみんなの前で発表をする、というかなり参加者は大変な目に合うハードなイベント。で、このくじ引きで運命のいたずらか、またもや@func09さんとコンビになってしまいました。とりあえず@func09さんとは二回目だし、とにかく以前の話も当日の進め方もスムーズでした。その分、他のチームに比べて圧倒的に新鮮さがありませんでしたが…。
ハッカソン自体とてもいいイベントになったのですが、そのレポートは次回ゆっくりさせていただきます。今回は今日リリースした「ATND Grouping」作成の裏側を紹介。
事前の打ち合わせ
ペアが発表されて、まずはSkypeで打ち合わせ。一日で作れるものということでとりあえず作るものはシンプルで機能の少ないものである必要があります。シンプルな分、目的は明確でピンポイントな問題を解決するものになっていくのですが、こういうコンパクトなツール系のサービスが好きなのでテンションが上がります。
今回解決する問題は「イベントに参加をしてもいつも同じメンバーが固まってしまって、なかなか新しい出会いがない」、「素敵な出会いを社交性の無さで逃すのはもったいない」、「せっかくイベントに参加してもぼっちだった」という問題を解決するツールを作ることにしました。立食の懇親会などならまだいいのですが、席が決まってるところ、特に会場が座席だったりするとなかなか席を立って離れた席の人と話すのは難しいですよね。
せっかくたくさんの人がいるのに、限られた人としか話せない、という問題を解決するために、参加者をランダムでグルーピングする、というツールを作ることにしました。
ここで一つ考えたのは、さらにイベントを合コンに絞ったツール。スマホでサービスのページにアクセスする。ここに、「男」と「女」の名前入力欄がある。自分が男だったら、男の欄に名前を入れて、隣の人にスマホを渡す。隣の人が女だったら、女の欄に名前を入れてスマホを隣の人へ … 、と参加者全員の入力が終わったら「シャッフル」というボタンを押すと、男女が均等に混ざった状態でグルーピングされる、というツールでした。
MTGを進めていく中で、これよりATNDのAPIを使ってイベント参加者を自動で取ってきて、任意のグループ数を入力してシャッフルボタンをクリックするだけでグルーピングできるツールを作りたい感じになって、結局それを作ることになりました（なんでそうなったんだっけなー？忘れてしまいました）。MTGの時間は一時間くらい。昼食の時間に僕はオフィスでサンドウィッチをもしゃもしゃ食べながらSkypeをやってました。
事前の準備
デザイナー側の僕は、実装はPC、スマホを一種類のviewでCSSの「@media screen and (max-device-width: 480px)」で分岐をさせるだけで実装しようというのは決めてました。一日でスマホ、PCのデザインをやるということに挑戦するの心配でしたが、せっかくなので何かチャレンジの要素も含めておこうと。当日この辺の実装でハマって無駄な時間を取られないようにスマホ用のHTMLやCSSのおさらいはやっておきました。そうそう、「@media screen and (max-device-width: 480px)」があまりに長いので、辞書登録をしてすぐに出せるようにしておきました（これでかなり作業効率が上がったのでオススメ）。
今回はATNDのAPIを使ったサービスということで、もしATNDのロゴの画像データが配られてたら使うかもしれないので事前に探しておきました。結局ありませんでした。
あとは、Githubにリポジトリを用意して、当日やることをGithubのIssuesに登録。このIssue達をひたすら消していけば最終的に使えるものが出来る、というところまでやることを洗いだしました。
事前の準備はまぁこんなところ。
当日
当日は大枠ができるまで、僕の方は素のHTMLでデザイン作業。一旦大枠が出来たらGithubからリポジトリをクローンしてそこにデザインをあてていく、という進め方でした。
今回使ったものは、「Rails」、「MongoDB」、「Haml」、「Sass」、「Heroku」…といった感じ。@func09さんが僕のMacにMongoDBのダウンロードやセッティングで時間がかかってしまうのではないかと心配されてましたが、以前、KUROIGAMENでも紹介させていただいたmyGengoハッカソンでMongoDBを使ったことがあったのでたまたますぐに使える状態になっていたので、スムーズにローカルの環境も構築できました。まさかあのときの環境構築がこんなところで役に立ったりするとは。myGengoハッカソンでお世話になったsugyanさんありがとうございます！
あとはひたすらモクモク。結局発表できる状態になったのは終了時間の一時間前くらいでした。ちょっとしたツールでもやっぱり結構時間はかかってしまいますが、とりあえずみんなの前で発表ができる状態までいって一安心。あとは余った時間で発表のスライドを準備したりなど。
その後
イベント終了後に、エラーの処理やバグつぶしなど、新たに見つかったIssueをGithubに登録。仕事の合間に僕も@func09さんもちょこちょこそれらを潰していって、やっと今日のリリースに辿りつけました。
そうそう、余談ですがクリスマスイブの日に開催した一人ハッカソンでもこのサービスのリデザインをやってました。デザインの方は最初の作り始めたときから時間が少し経っていて、僕のテンションを維持するためにガラッと変えてしまいました。Tech系のイベントを想定して、僕が参加するTech系のイベントは男の参加者が圧倒的に多いので、男の子っぽく秘密基地のようなデザインにしました。
というわけで、機会がありましたら「ATND Grouping」を是非使ってみてください！
