もう一週間とも、まだ一週間とも
ぐでーっとだけどかいた。
"1/2" というサービスを作ってた24時間くらいのはなしをします
4/22から4/23にかけての24時間、クックパッド主催の「第2回 開発コンテスト24」というのに参加しました。
がいよう
「半径3メートル以内の世界でもっと もっとひっついてたいのさ」というコンセプトで、ブラウザのタブをみんなでリアルタイムに共有するというサービス、"1/2 Real-time Tab Sync" を作りました。
作ったサービスの解説もあるけどそれより何より、つくっていた24時間がとても楽しい時間だったので、わたしが「第2回 開発コンテスト24」をどのように過ごしたかをメインに紹介します。
一緒に作ってた @darashi さんと @june29 さんもまた別の視点から同じ24時間を記録してくれていて、神の視点的に眺めると面白いかもしれません。最後に書く特権で、ところどころふたつのエントリの内容に委譲するよ。
4/22(金) 21:00くらい 「着席しています」
金曜の21時くらいはふつうにお仕事でコード書いてました。
ふと Twitter を見るとフォローしてる何人かの発言から、クックパッド主催のコンテストが開催されてるとのこと。24時間でなにかプロダクトを開発するというこのコンテストについては、去年のレポートを見たことがあって覚えてました。開始と同時にテーマが発表されるのもあって、わたしのタイムラインでは何人かが発表されたテーマについて盛り上がってました。
発表されたテーマを見て、「普遍的でかつ個人的で、流石の設定やなー」とか思った覚えがあります。
課題:
エンジニア向け「第2回 開発コンテスト24」開催 | クックパッド株式会社
（普段の生活で）半径3m以内にいる人が困っていることを解決する
のんきに(お仕事しながら)小ネタつぶやいたりしてました。
そしたら @masa_edw さんがお題に対してほぼ満点ともいえる tweet を...!!!
川本真琴好きとして思いつくのに遅れをとってキークヤシー！とか思いながらお仕事を終えて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(月)
「特別賞」て、本当にびっくりしました。上のとおり、スタート時点では作りきる気持ちもそこまでなく、ダシにして遊んでたようなものなのですが、二人の参加のおかげで「プロダクト」まで作り上げることができました。ありがとうありがとう。
こっそり、渾身の紹介文が晒されたのが嬉しかったりもする。
まとめ
こんな感じで、充実した 4/22~4/23 の24時間を過ごすことができました。以下、謝辞。
- @darashi さん
- @june29 さん
- @masa_edw さん (あの tweet がなかったらスタートしてなかったでしょう)
- @ursm さん (ホータルサイトのコードを参考にさせてもらいました)
そしてなにより、
- 素晴らしいコンテストを開催してくれた、クックパッドのみなさま
本当にありがとうございました！
おまけのおまけ 6/8
第2回「開発コンテスト24」表彰式に参加して LT してきたときの資料を貼り付けます。
1/2 Real-time Tab Sync
View more presentations from Kei Shiratsuchi
ノストラダムス
歌詞に時代を感じてしまいますね。
zsh のプロンプトに、各種 VCS のブランチ名表示と、git の変更を表示
zsh の prompt に、svn やら git やらのブランチ名を表示し、git のときだけ変更点を(詳し目に)表示する zshrc の設定を、いろんなものを参考に書きました。
コードは最後の方にあります。
こんなかんじになる
- ブランチ名を右側に表示
- git add した直後
- 変更があるとき
- untracked なファイルがあるとき
- 組み合わさっているとき
ファイルの削除・リネーム、unmerged なファイルの場合の表示もある。割愛。
参考にさせてもらったところ
基本的には id:mollifier さんの、zsh で Git の作業コピーに変更があるかどうかをプロンプトに表示する方法 - mollifier delta blogを参考に、zsh の vcs_info を使っています。上の例がゴテゴテしていると感じる方は、リンク先のほうがスッキリしていてよいでしょう。
調べているうちに oh-my-zsh で git の細かい変更点を表示している例があったものの、それだけのために oh-my-zsh を導入するのは大きすぎると感じたので、うらやましくなって git の変更点表示部分を参考にして、そこだけ書きました。
コード
こんなかんじ。git コマンドを実際に投げてるので重いと感じることもあるかも。自分の macbook ではそんなに感じませんでした。色などお好みで変更するとよいでしょう(といいつつそこまで変更しやすくできてない)。
https://github.com/kei-s/dotfiles/blob/master/.zshrc にわたしの使ってる .zshrc があるのでそちらも参考にどうぞ。rvm のバージョンを表示をしたりもしてます。
たなおろし
ビックリするくらい読めなくなっててビックリする。
- 作者: 村上春樹
- 出版社/メーカー: 新潮社
- 発売日: 2009/05/29
- メディア: 単行本
- 購入: 45人 クリック: 1,408回
- この商品を含むブログ (1247件) を見る
- 作者: 村上春樹
- 出版社/メーカー: 新潮社
- 発売日: 2009/05/29
- メディア: 単行本
- 購入: 40人 クリック: 432回
- この商品を含むブログ (925件) を見る
- 作者: 北村薫
- 出版社/メーカー: 文藝春秋
- 発売日: 2006/05/01
- メディア: 文庫
- 購入: 6人 クリック: 43回
- この商品を含むブログ (136件) を見る
- 作者: 湊かなえ
- 出版社/メーカー: 双葉社
- 発売日: 2008/08/05
- メディア: 単行本
- 購入: 25人 クリック: 692回
- この商品を含むブログ (755件) を見る
- 作者: 伊藤計劃
- 出版社/メーカー: 早川書房
- 発売日: 2007/06
- メディア: 単行本
- 購入: 26人 クリック: 817回
- この商品を含むブログ (326件) を見る
- 作者: 舞城王太郎
- 出版社/メーカー: 新潮社
- 発売日: 2009/11/27
- メディア: 単行本
- 購入: 8人 クリック: 388回
- この商品を含むブログ (115件) を見る
- 作者: 西尾維新
- 出版社/メーカー: 講談社
- 発売日: 2009/12/11
- メディア: 単行本
- 購入: 2人 クリック: 121回
- この商品を含むブログ (81件) を見る
- 作者: Chad Fowler,でびあんぐる
- 出版社/メーカー: オーム社
- 発売日: 2010/02/26
- メディア: 単行本（ソフトカバー）
- 購入: 24人 クリック: 683回
- この商品を含むブログ (126件) を見る
- 作者: 植松努
- 出版社/メーカー: ディスカヴァー・トゥエンティワン
- 発売日: 2009/11/05
- メディア: 単行本（ソフトカバー）
- 購入: 4人 クリック: 389回
- この商品を含むブログ (19件) を見る
- 作者: グレッグイーガン,Greg Egan,山岸真
- 出版社/メーカー: 早川書房
- 発売日: 2003/07/01
- メディア: 文庫
- 購入: 16人 クリック: 266回
- この商品を含むブログ (200件) を見る
- 作者: 望月守宮
- 出版社/メーカー: 講談社
- 発売日: 2009/01/09
- メディア: 新書
- 購入: 3人 クリック: 32回
- この商品を含むブログ (40件) を見る
- 作者: 米澤穂信
- 出版社/メーカー: 東京創元社
- 発売日: 2004/12/18
- メディア: 文庫
- 購入: 16人 クリック: 414回
- この商品を含むブログ (658件) を見る
- 作者: 舞城王太郎
- 出版社/メーカー: 講談社
- 発売日: 2010/07/07
- メディア: 新書
- 購入: 3人 クリック: 51回
- この商品を含むブログ (56件) を見る
- 作者: 舞城王太郎
- 出版社/メーカー: 講談社
- 発売日: 2010/07/15
- メディア: 文庫
- 購入: 1人 クリック: 32回
- この商品を含むブログ (52件) を見る
- 作者: 米澤穂信
- 出版社/メーカー: 文藝春秋
- 発売日: 2010/06/10
- メディア: 文庫
- 購入: 12人 クリック: 132回
- この商品を含むブログ (226件) を見る
Ruby逆引きレシピで作る、忙しい人のための『地獄のミサワの「女に惚れさす名言集」』
これは Ruby逆引きレシピAdvent Calendar の参加エントリです。
12/23を担当します。前日の担当は @sandinist さんで、 Ruby逆引きレシピAdvent Calendar（12/22） レシピ184：コードの不吉なにおいを検出したい でした。
Ruby 逆引きレシピ すぐに美味しいサンプル&テクニック 232 (PROGRAMMER’S RECIPE)
- 作者: 島田浩二,設樂洋爾,村田賢太,前田智樹,谷口文威
- 出版社/メーカー: 翔泳社
- 発売日: 2009/07/25
- メディア: 単行本（ソフトカバー）
- 購入: 16人 クリック: 349回
- この商品を含むブログ (77件) を見る
地獄のミサワの「女に惚れさす名言集」にはたくさんの惚れさせ画像がありますが、忙しい人にとっては、すべての惚れさせ画像を閲覧するのはとても大変です。しかし、そんな人でもruby逆引きレシピにあるレシピを使えば、簡単に惚れさせ画像を閲覧できてしまいます。
準備
元となる惚れさせ画像は、Ruby逆引きレシピAdvent Calendar で12/17担当の @june29 さんによる 地獄のRuby札幌の「女に惚れさす逆引きレシピ集」 - 準二級.jp で簡単に取得することができます。便利。
たくさんの画像を素早く見る
こんなコードを書きました。
これを実行すると、こんな画像をつくることができます。
- アニメーションgifで見る、忙しい人のための『地獄のミサワの「女に惚れさす名言集」』 (けっこう重い！)
- 全員分をひとつにまとめたアニメーションgif (10.4MB！重い！要注意！)
たくさんの画像を一度に見る
これでもまだ見る時間がないって？
じゃあ、そのアニメーションgif？っていうの？
全部俺が混ぜてやりますよ。
これを実行すると、先の名言はこんなふうになります。それぞれの画像の平均値をとり、ひとつの画像に混ぜることができます。
- 平均値画像で見る、忙しい人のための『地獄のミサワの「女に惚れさす名言集」』 (そんなに重くない！)
これで、どんなに忙しくても、すぐに惚れさせ画像を見ることができますね！フゥー！フゥーウフ！フワーン！
まとめ
レシピ153「画像にエフェクトをかけたい」を参考にして、RMagickを使って画像処理をしてみました。画像処理は見た目が派手になるので面白いですね。こんなことをサクっとできるのもRuby逆引きレシピのおかげです！
ちなみに、すべての惚れさせ画像を混ぜあわせるとこんな感じになりました。
「虚空のミサワ」ってかんじ。
ネタに困った末に人のネタに乗っかったエントリを書いても動じない
