後藤裕文ブログ - gotto blog

gotto blog

最近の記事

リンク

プロフィール

後藤裕文(ごとうひろぶみ)

提案が多めのソフトウェアエンジニアです。 デザイナーやライターなどエンジニア以外のスタッフと密接に協力してシステムを開発するのを得意にしています。

詳しく読む

2010年08月25日 14時00分

私の仕事のやりかた(2) magic方式

私の仕事で特徴があるのがmagic方式と呼ぶやりかたです。 ウェブアプリケーションを作るときはほとんどこのやり方を使います。 受注開発で使うことが多いのですが自主開発でも使えます。 実はこの名前は正式な名前ではなく、みんながただそう呼んでいるだけです。 この手順を簡単に説明します。

このやり方に興味がある方はお気軽にご連絡ください。
連絡先:gotcha(a)friendlylab.co.jp (a)を@に置き換えてください。

1. 最初の打ち合わせ

単純な要望やアイディアからどんなものを作るかを、わいわい話しながら考えていきます。 参加者にはデザインができる人を必ず含めます。 デザイナーがスケッチを書きながら話すこともあります。

2. デザイン作成

最初の打ち合わせの後で、デザイナーにラフなデザインを作ってもらいます。 デザインはフォトショップなどを使います。 仕様がある程度決まっているときはここでかなりきっちりと作ってしまいます。 このデザインを見ながらみんなでまた打ち合わせをします。 実際の画面を見ながら話すといろいろなアイディアが出てきます。 抽象的な仕様を考えると出てきやすい無駄な機能が出にくくなります。 この段階でかなりイメージが共有できて、仕様についてもおおむね合意が形成できます。

3. HTMLとJavaScript

デザインの打ち合わせを元にHTML化します。 ユーザーインターフェースだけに関わるようなJavaScriptはここで作ってしまいます。 データ等はダミーのものを入れておきます。 ここまでくると本物そっくりです。 非常に正確なイメージの共有ができます。

4. 説明書の作成

HTMLができているということはスクリーンショットも撮れるということです。 スクリーンショットなどを使ってアプリケーションの説明書を先に作ります。 この説明書で最終的な合意を取ります。 実は最近は人手不足でこのステップが省略されていました。 仲間が増えたのでこれからこのステップを復活させる予定です。

5. magicアトリビュートの追加

次のプログラム生成のためにHTMLにmagicアトリビュートを追加します。 例えば、「<input type="text" name="UserName">」は「<input type="text" name="UserName" magic="氏名">」のようにします。 アトリビュートを追加するときにダミーで入れたデータを消す必要はありません。

アトリビュートのmagicはタイプしやすく忘れにくいという言葉の中から選びました。 HTMLのネームスペースを使うと覚えにくくなるので、あえて多少反則ですがこのような方法にしています。 また、idやnameやtitleを使わないのは、CSSやJavaScriptと名前の取り合いをすることを防ぐためです。

magicは書き変わるエレメントや繰り返し表示されるエレメントに指定します。 magicの値はそのエレメントがどのような役割があるのかを日本語で書きます。 ロジックやパラメータは一切記述しません。

このようにシンプルなルールなのでHTMLが書けるデザイナーなら30分もあれば書き方を習得できます。 私たちは難しい使い方をマスターしたデザイナーさんと仕事がしたいのではありません。 その仕事にふさわしいセンスを持ったデザイナーと仕事がしたいのです。

6. プログラムの作成

magic方式ではPHP言語を使います。 他の言語用のフレームワークはまだありませんが、小規模なので簡単に作れます。

PHPのスクリプトでHTMLからプログラムを自動生成します。 ここで生成されるのはコントローラーとビューです。 コントローラはユーザーの操作を受け付けるプログラム、ビューはユーザーに画面を表示するプログラムです。 このプログラムはHTMLの内容をそのまま表示するだけですが、すぐにプログラムを使った表示を確認できます。

元になったHTMLは本番稼働後もテンプレートとして使われます。 デザインの変更が入ったときも、HTMLを書き換えるだけで対応できます。 PHPのプログラムとテンプレートは同じディレクトリにあります。 つまり、CSSやJavaScripのパスを書き換える必要はありません。

magic方式ではただのHTMLがそのままテンプレートとして機能します。 既存の静的なページに動的な機能を加えたいときも、HTMLにmagicを追加するだけでテンプレートして利用できます。 HTMLを分解バラバラにする必要はありません。

7. モデルの作成

モデルはデータの保存や検索や加工や検査などを行うプログラムです。 モデルはコントローラーとビューからファサードデザインパターンを使ってアクセスされます。 このため、MはVCからほぼ完全に隠蔽されます。 モデルを作るときには説明書から機能を洗い出して作ります。

モデルはアプリケーションを作るのに必要な最もシンプルな方法で作ります。 データベースではなくフラットファイルが都合が良ければそれでいいのです。 アプリケーションのニーズが増えてきたらモデルだけデータベースにアップグレードできます。 もちろん、モデルはコントローラーとビューの前に作っておくことも可能です。

8. コントローラー+ビューとモデルの結合

ユーザーインターフェース(HTML)から生成されたコントローラー+ビューと、機能の洗い出しで作ったモデルを結合します。 2つのプログラムをボタンで留めて行くような作業です。 この作業のためにフレームワークにいくつか便利な機能が用意されています。

9. できあがり

以上でできあがりです。 説明書と比較して同じように動作するか確認します。 上記の通り、各ステップで作ったものは次のステップで活用可能です。 同じようなものを作り直すような手間はほとんどありません。

最近のプロジェクトでは私はコントローラーとビューのコーディングだけを担当しています。 仕事の切れ目がはっきりしているので、責任分担が分かりやすいのも特徴です。