"1/2" というサービスを作ってた24時間くらいのはなしをします

4/22から4/23にかけての24時間、クックパッド主催の「第2回 開発コンテスト24」というのに参加しました。

• エンジニア向け「第2回 開発コンテスト24」開催 | クックパッド株式会社

がいよう

「半径3メートル以内の世界でもっと もっとひっついてたいのさ」というコンセプトで、ブラウザのタブをみんなでリアルタイムに共有するというサービス、"1/2 Real-time Tab Sync" を作りました。

• 1/2 - Real-time Tab Sync

作ったサービスの解説もあるけどそれより何より、つくっていた24時間がとても楽しい時間だったので、わたしが「第2回 開発コンテスト24」をどのように過ごしたかをメインに紹介します。
一緒に作ってた @darashi さんと @june29 さんもまた別の視点から同じ24時間を記録してくれていて、神の視点的に眺めると面白いかもしれません。最後に書く特権で、ところどころふたつのエントリの内容に委譲するよ。

• 半径3メートル以内の世界でもっともっとひっついてたくて「1/2」をつくりました - 準二級.jp
• 「できればいいのに」が現実になる場所: 1/2 Real-time Tab Sync の開発に混ぜてもらいました - dara日記

4/22(金) 21:00くらい 「着席しています」

金曜の21時くらいはふつうにお仕事でコード書いてました。
ふと Twitter を見るとフォローしてる何人かの発言から、クックパッド主催のコンテストが開催されてるとのこと。24時間でなにかプロダクトを開発するというこのコンテストについては、去年のレポートを見たことがあって覚えてました。開始と同時にテーマが発表されるのもあって、わたしのタイムラインでは何人かが発表されたテーマについて盛り上がってました。
発表されたテーマを見て、「普遍的でかつ個人的で、流石の設定やなー」とか思った覚えがあります。

課題:
（普段の生活で）半径3m以内にいる人が困っていることを解決する

エンジニア向け「第2回 開発コンテスト24」開催 | クックパッド株式会社

のんきに(お仕事しながら)小ネタつぶやいたりしてました。

http://twitter.com/kei_s/status/61400866330128384
そしたら @masa_edw さんがお題に対してほぼ満点ともいえる tweet を...!!!

http://twitter.com/masa_edw/status/61405935364616192
川本真琴好きとして思いつくのに遅れをとってキークヤシー！とか思いながらお仕事を終えて23:00前くらいに帰路についたのでした。

4/22(金) 23:00くらい 「帰路にて」

会社からの帰り道も @masa_edw さんの才能に嫉妬しながら、ぼんやりとコンテストについて考えていました。半径3m以内のひとかー誰がいるかなーと考えていたら、先の @darashi さんのエントリにもある、ペアプロの光景を思い出しました。そのとき感じた「screen だけじゃなくてブラウザも同期できればいいのにね」は、半径3m以内の人(ほんとは札幌と東京で800kmくらいあるんだけど)が困ってることだな、と思い当たりました。そこでもう少し具体的に考え始め、全体の設計をしてみました。

• WebSocket で通信して、複数のブラウザをほぼリアルタイムに更新することができないかな
• カーソルの軌道を WebSocket で通信して描画するのもよさそう。(@ursm さんの通称「ホータルサイト」に憧れて)
• WebSocket なら Node.js (+ Socket.io ) つかってみたい。Node.js ちょうたのしそう
• Google Chrome 拡張機能を使えば、片方が更新したらそれを検知してサーバに送信できそう。Chrome 拡張から WebSocket を使うのは buzztter の Chrome 拡張 で既に出来ているらしい

という感じで、Chrome 拡張と Node.js を触れるプロダクトにしようと考えました。
さらには

もっともっとひっついてたいのさ (タブが)

とワードが浮かんできて、これはやってみる価値がありそうだ*1、とおもいました。

4/22(土) 0:00くらい 「手遊び」

とはいえ Chrome 拡張を作るのは初めてのことでした。まずはチュートリアルを見つつサンプルを作るところからスタート。Chrome 拡張自体の開発のしやすさもあってサンプルはすぐにできました。
つづいて実際に "1/2" としてのコードを書き始めました。起動ボタンとしてアイコンを出す方法、JS を拡張のバックグラウンドで走らせる方法、バックグラウンドのコードからブラウザの描画部分との通信(Chrome の独特の実装でとっつきにくかった)など、ひとつひとつ調べながら潰していきました。
実際のところ、コンテスト自体にはあまり思い入れがなく*2、「コンテストを名目に、勉強も兼ねて遊んでみよう。どっかで少しでもつまづいたらそこでおしまいにしよう。最悪でも(順調に行っても)土曜日が拘束されるまで。日曜はなにしようかな*3」という具合で始めてました。なので、このあたりの初期の段階で詰まっていたら、"1/2" は、いくつもある書きかけプロダクトのひとつになっていたと思います。できてよかった。
拡張側に WebSocket 通信がのっけられた段階で、バックエンドの Node.js を書き始めました。バックエンドのお仕事は通信を横流しするだけだし、Socket.io は既に触ったことがあったのですんなり。

4/22(土) 4:00くらい 「大ハマリだ！」

この時間くらいになって Chrome でタブが更新されたら WebSocket に投げる、という部分を実装し始めました。詳細は省きますが Chrome 拡張のタブアップデート周りに大ハマリしてました*4。イベントリスナとメッセージングの仕組みがこんがらがってだんだんヤラれてきたので、6:00ごろ睡眠デバッグに任せて寝ることにします。JS 力が足りなかった...!

4/22(土) 12:00くらい 「ご確認のほど、よろしくお願い致します」

睡眠デバッグの成果はというと、綺麗とは言えないものの、どうにか実装できるコードが出来上がりました。タブの更新を WebSocket で Node.js に流して、Node.js がほかのクライアントに投げる、という部分を作ったあたりで、ふと感じました。

このサービス、Chrome が複数ないとテストできない...!

13:00くらいまで Twitter も見ずにひとりで作業してたのですが、某IRCにいるだろう @darashi さんと @june29 さんを釣るべく覗いてみるとふたりでネタ出しをしてたので

13:05:47 >kei-s< やってるよー
13:05:53 なんと
13:06:03 >kei-s< けっこういいとこまできた
13:06:10 いいねいいね
13:06:55 >kei-s< 3m 以内のペアプロ相手に、skype 経由で URL 送って開いてもらうとか面倒なので、タブを sync させましょう
13:07:07 >kei-s< chrome extension + node.js
13:07:14 おおお

ということで @june29 さんにテストにつきあってもらいました。
Skype 通話をしながらテストをしてると、これはかなり面白い体験だというのが分かってきて、テンションがあがってきました。テスト用に使ったURLは cookpad.co.jp で、関係者の皆様本当にすみません。
そうこうしてると @darashi さんも IRC にいらっしゃったので即座に Skype をつなぎました。

さあここからはチーム戦。

4/22(土) 14:30くらい 「いつものかんじだなぁ」

まずはここまで自分だけで育ててた git リポジトリを github に置き二人を招待、コードを見てもらいます。その後はすぐに戦略会議。
「リリースまでに必要なことはなんだ？」

• ルーム機能の実装 (この時点では接続した人がすべて同じタブを共有してた)
• バックエンドのデプロイ先とデプロイ手順の確立
• Chrome Extension の配布方法
• サービスの顔のフロントエンド、利用方法の説明

二人の担当した部分は先のエントリにあるとおり、わたしはデプロイと Chrome 拡張側のルーム機能を作っていきました。全員自宅にいて(東京は雨がひどかった)Skype で話しながら、「Github に Push しましたー」「Pull しております」「Pushed!」「Pulled!」などと話しながら、各々のやれることをやっていく、というふつうのやり方で、ひとつずつ作り上げていきました。途中、Skype の INPUT に川本真琴の曲を流そうと試行錯誤したものの設定に手間取って叶わず、というのもあり。

4/22(土) 19:30くらい 「keep ( product.shippable? == true )」

残り1時間半。このあたりになると大体の実装ができてきました。この時間からのキーワードは「shippable? (出荷できる？)」。大きな機能追加は出来なさそうなので小さな機能追加を作ってみるものの、上手くいかなさそうと判断したらすぐに戻して、常に「出荷できる状態」を保つ、というのをやっていました。このあたりは @darashi さんの「プロダクトにする力」だなーと感心してしまいます。

4/22(土) 20:30くらい 「醍醐味」

バックエンドのデプロイや拡張の登録などを行い、最後の最後、コンテストへの登録作業に入りました。紹介文面を考える悪乗りタイムはサービスを作りきった醍醐味ですね。コンテストの中の人が吹いてくれれば万々歳でございます。

ブラウザとブラウザ 瞳と瞳と 手と手
同じもの同じ感じかたしてるの 愛してる 愛してる 愛してる
あたしまだ懲りてない 大人じゃわかんない
届かないって 言われたって このままジャンプしたい

4/22(土) 20:55くらい 「おつかれさまでした」

登録完了。いやはや結局作りきることができました。はい、おつかれさまでした。おふたりともいきなり参加してくれて、ほんとうにありがとうございました！

かんそう

今回は、わたしのサービス(と小ネタ)の思いつきから二人に参加してもらってサービスをつくりました。@june29 さんのブログや @darashi さんのエントリにもあるように、こんなふうに作ったサービスは実は初めてではありません。しかしそのどれも、誰かが「こんなんつくったんだけどさー」から始まっています。それは決して空想のアイデアではなく、拙いながらも「動くもの」を種にして、水を与え光を与え、育てているサービスです。
種を見せるには、手を動かす必要があります。頭の中を覗かせることはできません。いいアイデアが浮かんだとき、それを種として手渡すことができないと、誰も分かってくれません。いいアイデアだけが降ってきても、見せられなければ無いも同然です。種を作るためには、基礎体力をつけることが大事だと感じています。今回のコンテストに参加したのも、アイデアを見せつけたいという気持ちより、自分の基礎体力をつけるために触ったことのない技術に挑戦するよい機会だと思ったからです。どんなに良いアイデアでも24時間で作りきらなければいけない、逆に言えば、ドツボにハマりまくっても24時間で終わるということです。とってもよい企画だとおもいます。
いつ浮かんでくるかわからない、世界を変えてしまうかもしれないアイデアを大切にするためにも、少しづつでも出来ることをふやしていきたいです。

ここからは後日談

4/23(æ—¥)

けっこう気を張ってたようで、ぐっすり寝てた*5。

4/24(月)

• 第2回「開発コンテスト24」受賞作品発表 | クックパッド株式会社

「特別賞」て、本当にびっくりしました。上のとおり、スタート時点では作りきる気持ちもそこまでなく、ダシにして遊んでたようなものなのですが、二人の参加のおかげで「プロダクト」まで作り上げることができました。ありがとうありがとう。
こっそり、渾身の紹介文が晒されたのが嬉しかったりもする。

まとめ

こんな感じで、充実した 4/22~4/23 の24時間を過ごすことができました。以下、謝辞。

• @darashi さん
• @june29 さん
• @masa_edw さん (あの tweet がなかったらスタートしてなかったでしょう)
• @ursm さん (ホータルサイトのコードを参考にさせてもらいました)

そしてなにより、

• 素晴らしいコンテストを開催してくれた、クックパッドのみなさま

本当にありがとうございました！

おまけ

川本真琴さんにもありがとう。last.fm の履歴が物語っています。

おまけのおまけ 6/8

第2回「開発コンテスト24」表彰式に参加して LT してきたときの資料を貼り付けます。

1/2 Real-time Tab Sync

View more presentations from Kei Shiratsuchi

おまけのおまけのおまけ 6/8

と言われたのでコードを公開しました。private を public にする簡単なお仕事。
kei-s/onehalf - GitHub

*1:「これで勝つる」状態

*2:関係者の方々すみません

*3:原稿を書くお仕事はあったのですが...関係者の方々すみません

*4:chrome.tabs.onUpdated, changeInfo.status start "complete" - Chromium-extensions | Google グループ このあたり

*5:原稿用のコードも少し進めましたよ。関係者の方々すみません...