先月に会社の同期の結婚式があって、自分は新郎とよく一緒にご飯食べたりする仲だったため2次会の幹事をやりました。 幹事と新郎新婦で相談しまして2次会の余興に何か変わったことをやりたいということになり、新郎新婦ともにエンジニアで当日の参加者もエンジニアの人がほとんどということで、タイピング対決やろうと1ヶ月くらい前に決まりました。

メインの開発は、共通の友人である @hecomi さんにお願いしました。 実装の内容とか実際の画面の様子については彼のブログにありますので、ぜひそちらも見てください。

ゲームは、写真と写真に関する文が問題として表示されて新郎新婦がその文章を入力し、先に入力できた方にポイントが入っていく、という流れになっています。 見ている人が楽しめるように、新郎新婦がそれぞれのノートPCで入力した文字が、ちゃんと1文字ずつプロジェクタの画面に表示され、同時に2人の表情をWebカメラで撮影していてそれも画面に表示しています。サーバはnodejsですが、プロジェクタに表示する画面も新郎新婦ゲーム画面もブラウザなので、当日何かあっても他のマシンで動くようにしてなっています。

自分はjavascript書いたことないのでメインの実装には加わらず、サポートということで一緒にシステム構成や画面デザインの相談をしたり、レポジトリ作ったりテストしたりバグ報告したり簡単な部分だけイジったりなどなどやってました。

自分が関わった中で苦労した部分

  • 画面構成

    ゲーム画面では、640x480 の画面に 問題の画像+問題の文章、2人の入力文字、2人のポイント、2人の顔の映像 を載せるために画面がごちゃごちゃしちゃうので、その配置をあれこれ悩みました。自分もデザイン案をcssで1つ作ったけど結局それは不採用になりました

  • 音が鳴らない

    本番では画面を出すマシン(自分のMacBook Air)とBGMのマシン(別の幹事のWinマシン)が分かれていて、ゲームの効果音は画面を出すマシンから出すために、2つのマシンからの音を合成するして出す必要がありました。当日家でテストしたときはちゃんと鳴っていたんですけど、会場でやってみると2つのマシンから音を合わせるのがうまくいかず、その場でhecomiさんが音だけ同期して鳴らす新たなページを作って対応したりしましたが、結局効果音をちゃんと鳴らせませんでした。 あと少しでも時間があればなんとかなったので、心残り。

  • タイピングゲームの問題作り

    当日入り口で参加者にメッセージと一緒に写真を撮ってもらい、その写真とメッセージを問題に使う、ということをしました。 なので、2次会中に写真係からデータを貰って使えそうな写真を何枚か選び、ゲーム画面に合わせて写真をトリミングして、書いてあるメッセージを問題として打ち込む、という作業を一人でやってたんですが、幹事の他の仕事もやってたので時間的にかなりきつかったです。ここを誰かに手伝ってもらえばよかったと思います。

  • (ゲーム作り)

    自分でも少し作ってみました。自分が考えていた構成もhecomiさんが作ったものとほとんど一緒で、画面はブラウザにしてwebsocketで通信、サーバの部分だけnode.js分かんないから何か他の言語で書こうと考えてました。 でも、ゲーム以外にも説明画面やらログイン画面やら結果発表画面やらその後のスペシャル画面やらあり、とにかく状態管理が多くて、心が折れました。 それを短期間で一人で実装して、いい感じのアニメーションや効果音までつけてくれたhecomiさんはすごいです。

まとめ

1週間前までは、このままで間に合うのかという心配な状態で、結局当日も披露宴との間の時間や会場入ってからもデバッグするような感じでしたが、まあなんとか当日最後まで動作してくれてとても盛り上がったので、ホッとしました。
新郎新婦も喜んでくれたので、よい企画だったのではないかと思います。

せっかくなのでソースコードを公開したいと思いますが、gitのログなどにプライベートな写真や文章が入ってしまっているので、今整理中です。