unoh.github.com

1人のエンジニアがフォト蔵リニューアルを通して学んだこと(前編)

Wed Nov 08 21:42:20 -0800 2006

naoyaです。
いつも技術系の記事が多いのですが、今日はすこし別のテーマでエントリしたいと思います。
僕は入社してからフォト蔵チームで、フォト蔵のバグ修正や機能拡張を行ってきました。
現在、フォト蔵は11月1日にサイトデザインの大幅なリニューアルを行い、現在は試用期間中です。僕もフォト蔵チームで、フォト蔵をオープンして以来3回目となるサイトデザインのリニューアルに設計当初から参加できる貴重なチャンスを得ることができました。
なので、今回はフォト蔵のリニューアルを通して体験したこと、学べた、感じたことについて書きたいと思います。

フォト蔵のリニューアル開始時(2006年7月下旬頃)は、次のような人員体制でした。
・リーダー:1人
・デザイナー:1人
・エンジニア:1人(僕)


第一章:リニューアル開始


リニューアルにあたっての最初の作業は、美人デザイナーsashaさんがサイトデザインのモックアップ画を Photoshopを使って作るところから始まりました。このとき僕は実際の作業がなかったためあまり参加できませんでしたが、リーダーとsashaさんとの間で念入りにリニューアル前のサイトデザインの問題点、フォト蔵ユーザからいただいた貴重なたくさんの意見、今後のフォト蔵の方向性、などをもとにリニューアル後のデザインコンセプトを固めていったようです。モックアップの作成途中には、僕もsashaさんとモックアップ画を見ながら、いろいろと議論しました。
このとき感じたのは、僕はエンジニアなのでプロトタイプのプログラムを作る、いわゆるプロトタイピング開発をした方が早いと感じていましたが、振り返ってみると最初はデザイン画を作っていった方が結果的にはよかったです。どうしても最初エンジニアが設計してしまうと技術的な問題にフォーカスしがちになってしまい、本来のサイトデザインをリニューアルする意義が薄れてしまうこともあると思います。今回のフォト蔵リニューアルでは、デザイナーがあまり技術的な問題を考えずに(僕は当初から技術的な問題ばかり気にしていましたが・・・)、サイトデザインを作れたことがよかったと思います。
モックアップ画を作る作業とはいっても、現在のフォト蔵すべてのページを作るわけにはいかなかったので、一番使われるメインページを中心に合計11枚のモックアップ画が出来上がりました。


第二章:実装開始


モックアップ画ができたところで、いよいよ実装を開始することになりました。ウノウではソースコードをSVNで管理しているのですが、サイトデザインのリニューアルにあって専用のブランチを作ることになりました。理由は、トランクの方はすでに本番サーバで稼働しているため安定動作させないといけないことと、リニューアル中でもバグ修正など緊急案件に対応することがあるためです。ブランチを作る作業は、リーダーから僕に一任されました。僕はSVNでブランチを作って開発することが初めてだったので、トランクの変更を定期的にブランチに反映させる作業がなかなかうまくいかずに、何度かブランチを作り直しました。このときにSVNでの作業が簡単になるようにいくつか専用のシェルスクリプトを作成しました。
このときちょうどアルバイトのひらっちが1人増えてトランク側の作業を担当してくれることになったので、僕は定期的にトランクの変更をブランチに変更させる作業をしながら、リニューアルにあたっての基盤作りを行いました。
基盤作りとき特に気をつけたのは、リニューアル後も前のサイトデザインにすぐに切り替えられるようにしたことです。具体的には、サイトデザインを決定するPHPのグローバルフラグを追加することで実現しました。このときは、リニューアル時に試用期間を設けることまで考えていませんでしたが、この下地があったので、すぐに試用期間を設けることができました。

基盤作りが一通り済んだところで、リーダーと僕で基盤となるソースコードを見ながらペアプログラミングを行い改良点などを指摘してもらいました。一通りの基盤ができたところで、いよいよリニューアルのページ作成にとりかかりました。ページ作成にとりかかるときにsashaさんと相談して僕はPHPのロジックやビュー側のソースコード変更、sashaさんはCSSの作成と担当を明確に分けました。明確に分けた理由は、特にCSSの方ですがIDやクラス名などが人それぞれで命名規則が違ってくるので、最初から二人でCSSを変更するときもsashaさん一人に任せて命名規則をあわせた方が、今後のメンテナンスもしやすいと思ったためです。
あわせて、ページの作成順序も相談して一番使われるページがフォト蔵には5ページあるので、まずはそのページを一通り作ってから、メインページからリンクしているページを順番に作成していくことにしました。このときの作業ルーチンは、次のような感じでした。

僕:メインページをある程度作る
 ↓
sashaさん:メインページのCSSを定義してデザイン調整する(必要であれば、ビューのソースコードも変更する)
 ↓
僕:その間に別のメインページを作成する、デザイン調整中ロジックコードの変更が必要な場合は随時対応する
 ↓
sashaさん:別のメインページを作成する
 ↓
(※この繰り返し)

こうして5つのメインページがある程度できてきましたが、最初の頃は担当は明確に分けたもののあまり分業はあまりできず、二人で何度もページのこの部分はどうするかといった内容を常に細かく確認していました。このとき、僕は作業効率がすこし悪いと感じてはいたのですが、最初のこそは意思統一が重要だと思ったので、思ったことはすぐに相談したりしました。振り返ってみると、僕はすぐに思ったことをsashaさんに相談したのでデザイン調整の作業を中断させて作業効率を落としていたと思うので、1日の中で15分くらいで十分だと思うので毎日問題点や進捗を確認する打ち合わせをした方がよかったと思います。


こうして、フォト蔵のリニューアルは進んでいったのですが、この後のことは次回の後編に書きたいと思います。


# フォト蔵は、11月14日まで新デザインのお試し期間中ですので、ぜひともフォト蔵の新デザインを体験してください!!!