【Web制作の現場】小畑式マークアップ術：アーキテクチャダイアグラムからの実装

前回紹介させていただきました「アーキテクチャダイアグラム」について、

さらに掘り下げていきたいと思います。

前号を見逃した方は、バックナンバーよりご覧ください。

アーキテクチャダイアグラムからの実装（その２）

前回は、「一瞬でディレクトリ構造を作る手法」をお伝えいたしました。

ざっくりとしかお伝えしておりませんが、感じはわかったのではないでしょうか？

今回は、「一瞬で全ファイルを生成する方法」をお伝えいたします。

それでは、詳しく見ていきましょう！

（準備するもの）

• アーキテクチャダイアグラム
• csvファイル
• HTMLテンプレートファイル（パターンがある場合はその分準備する）
• bpTran( http://goo.gl/WQFtt )
• KanjiTranslator( http://goo.gl/LwR0J )

※この手法はWindowsマシンが必要です。

【ステップ１】

テンプレートとなるHTMLファイルを制作します。

この時に、「モジュール」という考え方が必要です。

それぞれの構成要素を「部品」としてとらえます。

HTMLを構成するのは、パズルのようなものです。

このパズルを完成させるのに「部品」が必要になってきます。

この時に注意して欲しいのが文字コード。

bpTranがshift-jisしか扱えないので、テンプレートファイルはshift-jisで制作することになります。

【ステップ２】

HTMLテンプレートができたら、HTMLファイルに入れ込みたい内容をcsvファイルにまとめていきます。

アーキテクチャダイアグラムの「ディレクトリマップ」を活用します。

csvファイルには「変数」と「値」を入力していきます。

変数は、日本語でも英語でもどちらでもかまいません。

例）

変数：見出し

値：会社概要

このcsvファイルの作り方で、今後の作業効率が変わってきます。

事前に設計を行うことで、少ない労力で最大の成果を得ることができるのです。

【ステップ３】

HTMLテンプレートとcsvファイルができたら、保存用のフォルダを用意してbpTranを実行！

【ステップ４】

一瞬で大量のファイルが生成することができます。

あとは、細かな調整を行なっていくのです。

※文字コード変換とか、各ディレクトリに振り分けるとか。

今回のポイントは、

設計にどれだけ時間を掛けれるか？

~~~~~~~~~~~~~~~~~~~~~~~~~~~~

です。

自分の手をなるべく動かさずに、大量のページを生成できるこの手法。

実際にコードを書く前に、サイト全体を見渡して、どこが共通か、どこがイレギュラーか、など「部品」を洗い出していきます。

コードを書くだけが、マークアップデザインエンジニアのお仕事ではありません。

今時のコーダーは、頭で考えられるようにならないとダメなんです。

文字ベースですと、なかなか伝えづらい部分ではあるのですが、雰囲気だけでも、感じ取っていただければと思います。

あとは、実際にご自分で、触ってみてください。