読者です 読者をやめる 読者になる 読者になる

Hack Day 2017でRecipe Mixerを作って、Fun賞を受賞しました! #hackdayjp

Hack Day 2017に参加してきました。

どうやら5回めの参加の模様

Hack Day( http://hackday.jp/ )というのは、土日の24時間(本当に12時〜翌日12時)という時間制約のもと「動く」プロダクトを開発し、その後90秒で発表するというYahoo!JAPANの名物イベントのOpen版です。
今回は昨年とほとんど同じメンバーで参加しました。


とりあえずの説明

今回作ったものは「Recipe Mixer」です。

料理というのはマルチタスク
複数の料理を並行に進めていく、というのはなかなか素人には難しいです。

そこで「Recipe Mixer」、これはそんなあなたを助けてくれるLineBotです。
指定したレシピをいい感じに合成して、「次やるべき作業」をLineで伝えてくれます。


参加メンバー

  • @kasahi 安定の仕切り役 プレイングマネージャ
  • @shamabe ライブコーダーなあの人 Hacker's Bar( http://hackers.bar/ )でライブコーディングをするなどHackerの鑑
  • ばりーさん なんだかんだで一緒にハッカソンに参加してます。今回僕が「だれかー混ぜてー」といったところ誘ってくださいました。
  • matsuchiさん 仕事はWebデザイナー、今回は発表もしたい とのこと
  • 僕 1月ごろに「だれかー混ぜてー」と言って混ぜてもらいました。

当日まで

去年の経験から、結局ぎりぎりにならないと決まらないのでは、なんて言いながら、気持ち少なめの打ち合わせ。
2週間前くらいから、夜に時間の合うときに「サイゼリヤ」で打ち合わせ (学生っぽい)

結構早めにLineBotをやろう、という話になりました。
しかし、なかなかLineBotを使った良いネタが出てきません。

いろいろ出した中で、これかなぁ・・・ ということで、決まったのが今回のネタでした。
全員の時間が合わず、全員で顔を合わせて打ち合わせ、というのができないまま当日を迎えます。

Hack Day 当日

11:30から開場ということで、少し早めに秋葉原に向かいます。
12:00から開発開始!
初めて全員がそろったので、まずは何を作るか、というところを話し合います。

ターゲットは誰なのか、どんなUIにするのか、開発はどのサーバを使うのか・・etc

大体みんなの認識があったのが14:00くらい
そして役割分担。

  • @kasahiさん matsuchiさんと連携し、デザインと、実際のLineBot上での表示を試行錯誤 + レシピを試しに正規化してみる
  • @shamabeさん LINEとの接続部分 LINEゲートウェイ的なもの ユーザの状態を管理し、適切なモジュールに処理を振り分ける。
  • ばりーさん MixRecipe前半のレシピの提案の部分
  • 僕 MixRecipe後半のレシピのマージと並べ替え部分
  • matsuchiさん プロダクトデザインと、プレゼン構成

まずはこれで!

僕はダミーのレシピデータを使って、後半部分を作っていましたが、なかなか難しい・・

夕方ごろ、用意された夕食を食べ終わっても、まだ、、みんな黙々と作業・・
不安になりはじめる。

なんとなくみんな作れているものの、結合するには至らない・・

とりあえずデータだ!ということで
手の空いた、@kasahiさんが、使えそうなレシピをステップに分け、DBに突っ込んで、APIから引けるようにしてくれました。

そうこうしているうちに、僕もダミーのデータで後半部分が動くようになったので、ダミーデータからAPIに切り替え、@shamabeさんの作ったゲートウェイと結合。なんとなく順番にレシピの手順を教えてくれる状態になりました。
ただ、なんかレシピのマージにバグがあって、思ったようにならない、、
豆腐をゆでろと指示が来た後に、豆腐を切れ みたいな感じになったりしてました・・

とかやってるともう深夜・・ 眠い頭に鞭打ちながらバグを直す・・

少し直しては、また別のところがおかしくなる、、というのを繰り返して、結局朝の7時過ぎくらいにまともに動くようになりました。

僕がこんな感じでバグと戦っている間にばりーさんの部分は作りこみが進み、いい感じにレシピを絞り込む対話ができるようになっていました。

また@kasahiさんがレシピを拡充し、「生姜焼き」「肉じゃが」「味噌汁」「ポテトサラダ」「きゅうりの浅漬け」などのメニューを混ぜることができるようになりました。

で、8時ごろから2時間ばかり仮眠・・
10時ごろに起きてきて、細かい部分をさらに作りこんだり、プレゼン資料をみんなで確認したりしていると12時。

あっという間の24時間でした。

発表はmatsuchiさんということで、僕は後ろで立っているだけでした。サーバ側のトラブルも無く、ほっと一安心。

発表のあとは展示。かなり多くの方が見に来てくださいました。「あしたから使ってみたい!」などと言ってくださる方もいて、手ごたえを感じました。
そして、授賞式。

見事 「Fun賞」をいただくことができました。

仕組み

レシピマージの仕組みは、かなり愚直にやっていて、

  • レシピを動作に分解する(何を、どうするか?)
  • 分解した動作の依存関係を記述する

このように下ごしらえしたレシピを混ぜ込んで、いわゆるトポロジカルソートをしています。
ただし、これだけだと自由度がありすぎるので、料理に特化した最適化をいくつか行っています。

  • 包丁を使う工程をなるべく早めにする
  • 火を入れる工程をなるべく後ろにする

といった条件を満たすように処理を工夫しました。

ともかくこのシステムはこの事前の「下ごしらえ」がキモでして、手作業とコンピュータのアルゴリズムをうまく組み合わせて実現しています。

また、レシピの動作には

  • タップされるまで進まない(野菜を切るなど、個人差の大きな作業)
  • 一定時間後に次の工程に自動的に進む (肉を焼くなど時間が大切な作業)
  • 一定時間後に指示を出すが、それまでは別の工程を進める(お湯を沸かすなど、時間が大切だが、並行してほかの作業ができる作業)

といったパターンを用意し、料理をうまくアシストできるようにしました。

感想

レシピのマージは実は僕が前からやってみたかったもので、今回その部分を作ることができてとても良かったです。
バグが結構あって、チームの皆さんをハラハラさせてしまったのがやや反省です。(プログラミングコンテストとか好きな方たちはこんなの余裕なんだろうなぁ・・と思ったりしました。)

毎度のことですが、一人ではこんな完成度の高いもの作れないし、ついついもっとおふざけ方向に走ったプロダクトを作りがちなので、チームの皆さんに感謝です。

開発ツール

今回はチーム内の仕様の共有に https://scrapbox.io/ を使ってみました。コロコロ仕様が変わるハッカソンにおいて仕様を書いて残せる、間違ってたらすぐ直せる というscrapboxのUIは非常に使いやすかったです。

ほかに使ったツールははGoogleSpreadshhet, gitbucket, facebook・・ くらいですね。ほかのチームがどんなツールを使ったのかも気になります。

過去のHack Day

Hack Dayは今回で5回めで、僕は過去4回も参加しました。宣伝的にリンクを置いておきます。

ほかの作品たち

YouTubeの録画映像を見ながら、全作品の「技術解説」している部分を抜き出してみました。参考にどうぞ