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

結婚した同僚に贈ったシステムの話

先週末の土曜日に同僚の結婚式がありました。
二次会の方に参加したのですが、いい会だった。


会社で、なにかプレゼントをしようということになり、お祝い用にシステムを作ってプレゼントしました。
内容は、写メで披露宴や二次会の最中の写真や、自分撮りした写真を送って、本文にメッセージ書いて送ると、二人に贈ったURLを開くと、フォトムービーとして見ることが出来るというものだ。


特別な技術は使用していないが、進め方が通常案件の進め方にも通じるものがあると思うので、エントリを書いてみた。

まず、企画

どんな企画にするかを2週間ぐらい前から練り始めました。
過去に写メや動画を携帯から送り、PC上のFlashでつなげて見れるというのはやったことがあったので、それをカスタマイズするという方向に決定。これはすんなり決まった。

設置場所などの決定

今回のシステム構成は、一般的なLAMP構成。Linux+Apach+MySQL+phpだ。これは、うちの通常案件と同じ。
他にも決めなければいけないものとして、設置サーバ、ドメインなどがある。
設置サーバは、会社所有の共用サーバにし、ドメインは、会社ドメインにサブドメインを切ることになった。
ソースの共有には、SVNを使うが、会社のSVNではコミットメールが流れてしまい、当日前にばれてしまう。なので、Assemblaを使ってみることにした。
http://www.assembla.com/

プロトタイプ作成

メール受信関連をphpを使って作成、Subjectや本文はDB上に保存をし、画像はconvertをかけて、[id].jpgという名前で実ファイルとして保存することにした。


ここまでが、前々日までに行っていたこと。

紙系の用意

実際に披露宴や二次会に参加した人に、写メを送ってもらうための、説明を書いた紙を用意するのと、二人にURLを伝える方法も工夫することになり、こちらは、営業の人がそれらしいのを買ってきてもらったりしていました。
開発部隊とは別なので、ちょっと進め方などは把握していませんでしたが。。。

ランチミーティング

前日のお昼に、プロジェクトにかかわるメンバーで、ランチMTGを行い、プロトタイプのブラッシュアップや残作業のタスク確認などをした。
まずは、作業の洗い出し。
・二人が見るフォトムービー画面のデザイン
・二人にURLを伝えるための方法
・来場した人に使い方を教える紙資料(カード)のデザイン
・来場した人にサンプルを見てもらうための携帯サイト
などなど。


まずは、フォトムービー画面のデザイン。
プロトタイプですでにある程度まで作りこまれていたのだが、デザインナーやディレクションから、画面イメージを紙に書いて共有。
デザイナーが外枠を作成することになり、それを開発が受け取って仕上げることになった。


次に、二人にURLを伝える方法。
一応Basic認証をかける予定なので、ID/PWも伝えなければならないが、ただ伝えるだけでは芸がないので、結婚証明書の用紙に、勝手に承認ということで、全社員の直筆サインと共に、URLなどを書いて贈るということになった。これはすでに決まっていて、営業さんが買ってきてくれていました。
結構重厚な感じ。


来場した人に、使い方を伝えるための紙資料ですが、これは、A5サイズを二つ折りにすることになった。
みんなが好き勝手にイメージを言う中で、デザイナーさんが裏紙に手書きでデザインイメージを書き、それを見てさらに話すという感じ。
文言は、たたき台を営業や管理部の人が作ってくれたのを、さらにディレクションが錬ることになった。


紙のカードだけでは伝わりにくいということで、携帯サイトを作り、そこにサンプルのフォトムービーを見れるようにしようということになり、それのデザインと文言の錬るのもカードと同様に。


大まかな流れと作業分担が決まったところで、ランチMTGが終わり、午後は通常の仕事をしつつ作業開始。

実作業

他部署の作業はちょっと見えないところもあったので、開発側ですが、メール受信システムはほぼ出来ているが少し修正。

受信するメアドについて

まずは、システムエラーでうまく写真が受信できなかった場合に、再送をお願いするわけにはいかないので、そこに対応するために以下のような構成にした。
1. m@example.com をリダイレクタとして作成
 -> m-reg@example.com
 -> xxxx@example.com (開発者のメアド)
2. m-reg@example.com でシステム起動
これで、m-regがエラーになったとしても、転送自体は問題なく動いているので、開発者に届いたメールから復旧できるようにした。

次に届いたメールについて

送られてきたメールが、間違いや、不適切な内容。または、写真の縦横が回転してしまっている場合があります。
なので、これに対応するための仕組みを考えてみた。


不適切な内容はDB側で削除日時を登録することで論理削除にすることにした。
物理削除でもよかったのだが、操作ミス時に復旧の時間を早くするために論理削除にしました。


回転のずれについては、写メ受信時に、800x600にリサイズするところで、90度、180度、270度に回転した画像も同時に作成しておいて、シンボリックリンクで使用するファイルを決定することにした。
ファイル名は [id].jpgなので、1_0.jpg、1_1.jpg、1_2.jpg、1_3.jpgという風に実体の画像を作成し、それを、1.jpgという名前にシンボリックリンクを張った。
phpの場合、realpath関数を使うことで、シンボリックリンク元ファイル名を取得できるので、それをもとに次に回転する角度を判別するという手法をとりました。


帰ってきてから、目視でチェックしてデータ修正でもよかったのだが、二人にはURLを披露宴で伝えるので、帰宅して見られる前に調整しておきたいので、リアルタイムで作業ができる仕組みを構築した。
方法としては、メール受信時に開発者の携帯メアドに、本文と、削除・回転ができる管理画面のURLをついたメールを送り、届いたものを片っ端から目視チェックして対応した。

来場者に配るカードについて

こちらは、デザイナーさんが頑張ってました。
アイコンや画像の配置。フォントの選択などやはりセンスって大事だなぁと思った。

写真撮り

まずは、自分たちの写真を投稿すべく、金曜日の夕方から写真撮り大会になった。
仕組みがあると、そこで面白いこと遊べることをするのは、ある種才能だと思いました。
営業部が面白いチーム写真を撮ったのを皮切りに、どの部署も面白いポーズとかで写真をとっていた。


開発から贈ったのはこんなソース

while (Love is true) {
    echo "Happy!";
}

当日

社長や役員さんが、披露宴から参加していたので、家で起きたぐらいから、自分の携帯にチェック用のメールが届いてきました。
それを見ることで、ほぼリアルタイムで披露宴の内容が見れたのは思わぬ役得だったかもしれない。


私は、二次会から参加。
すでに来ていた人にカードを渡しつつ、自分の携帯でサンプルのフォトムービーを見せて投稿のお願いをし、あとは、入口で来た人に説明とお願いをしたりした。
会の最中にもパチパチ携帯で撮って送ったが、自分の携帯のカメラ性能が思ったよりも良くないことに気づいた・・・シャッタースピードがピントを合わせるためか、遅すぎる。

今日

今日、新婦から見た感想をききました。
とても喜んでくれたみたいでよかった〜

最後に

絵がないとうまく伝わらないかもしれませんが、とても完成度が高く、このままサービスにしたいぐらいのものが出来ました。
なにより喜んでもらえてよかった。


それと、この作業をしているの自体がとても楽しかった。
部署を超えた一体感と、作業が進んでいる感じと、同じ方向を向いて、よりよくしていこうという意識の共有など。
普段の仕事とはまったく違った空気感で作業ができたのはなんなのか。終わった後に飲みながら話をしたけど、何が原因かはよくわからなかったです。
でも、そのスパイスを見つけて、普段の仕事にも織り込めていけたらいいなぁと思いました。

修正

タイトルを「送った」から「贈った」に変えた。
誤字脱字をちまちま修正…