XHTML&CSS超高速コーディング術

著者 : 大藤幹

• ソシム (2009年12月1日発売)

作品紹介・あらすじ

コーディング専門のプロ集団「牧野工房」が蓄積したWebコーディング技法と実践ノウハウを大公開。

感想・レビュー・書評

[山賊さんの感想 · 2014年9月4日]

　XHTMLとCSSのコーディングについて書かれた本。大藤幹さんと、コーディング代行サービス牧野工房の共著となっている。この本が執筆されるきっかけとなったのは大藤さんが参加したWebコンソーシアムで牧野工房のスタッフと出会ったことから始まる。コンソーシアムの後に牧野工房が開催するセミナーに参加した大藤さんが、適切な説明と的確な回答をするスタッフに感心して本の出版をもちかけたそうだ。スタッフへのインタビューから原稿に仕上げているようだ。よって牧野工房で使われているコーディングルールや方針、行われている効率的なコーディング手法がメインの内容となっている。
　コーディング専門サービス牧野工房、ムダな作業を可能な限り発生させない、サイトの設計と情報管理、コーディングの基本と作業の順序、例題で学ぶコーディング作業の流れとポイント、実戦向けコーディングテクニック、ツールの活用、牧野工房コーディングガイドラインという10章で構成されている。
　「コーディング専門サービス牧野工房」では、受注から納品までの流れがフローチャートで示されている。この後の章でフローチャートの工程が一つ一つ説明されることになる。受注から納品までの概要がざっと紹介されていた。
　「ムダな作業を可能な限り発生させない」では、コーディングの経験不足から生じる手戻りや、クライアントからの変更や追加による手戻りを最小限に減らす方法について書かれてあった。効率化するための分析、分析から導き出した答えも合理的だ。実際の案件で起こった失敗や気付きからムダを省くことを徹底した結果、効率的にコーディングを行える環境ができたそうだ。
　「サイトの設計と情報管理」では、主にドキュメンテーションについて解説してあった。仕様書やTodoリスト、ページ別作業進捗状況を一元化したExcelファイル、ワイヤーフレームについて解説してある。
　仕様書には制作に必要なクライアント側の要求をあらかじめ記入しておいてもらう。また後々出てくるであろうトラブルによって時間を浪費する恐れのある懸案に関しても、仕様書であらかじめ確認してもらうつくりになっている。
　Todoリストは発生した作業を記録していく形式のシートで、ページ別シートはページ毎の作業進捗を管理するシートになる。複数のスタッフで同じファイルを作成する事が前提になっているため、ページ別シートでは列順に作業項目が並んでいる。終わった作業は担当者が○を付けるため、自分の作業がいつ始まるのかが分かるようになっている。作業が終わった項目の○はカウントされるので、カウントの合計で作業の進捗状況が％で表示される。またクライアントから変更があった場合はTodoリストに変更内容を書き込む仕様になっている。追加変更があった場合は、ページ別シートに関連する項目のセル背景を赤く変更するようにしているそうだ。作業しているスタッフは変更がすぐわかるので、それ以上の手戻りを最低限に抑えることができると書いてあった。
　「コーディングの基本と作業の順序」でコーディングの説明に入っていく。コーディングも効率化されており、ムダが少なくなるよう工夫されている。テンプレートをあらかじめ作成しておき、テンプレートからファイルに組み込んでいくことでコーディング時間を短縮している。スタッフによってばらばらな方法で作業するのではなく、あらかじめ下調べしておいたり手戻りの少ない方法をマニュアル化して作業方法を統一してあるそうだ。CSSのボックスモデルや、float解除の方法、CSSハックについてもこの章で説明してあった。
　例題で学ぶコーディング作業の流れとポイントでは、１ページのファイルをXHTML、CSSファイルのテンプレートを使って作成していく。XHTMLファイルはよく使うレイアウト、テキスト、フォームなどのテンプレートが用意してある。同じようにCSSもリセット、レイアウト、ヘッダ、フッタ、グローバルナビゲーション、コンテンツ、フォームパーツなどに分けてテンプレートが用意してある。
　また牧野工房ではシャドーコーディングという手法を採用している。コーディングに取り掛かる前にカンプデザインを観察し、どういった方法でコーディングしていくのかを頭の中でシュミレーションするそうだ。コーディングする順序はサイト全体で共通しているパーツから作成していく。bodyの背景からレイアウトへ、レイアウトから各パーツへという具合に作成していくのだそうだ。レイアウトの大枠から細部のパーツへ作りこんでいくことで、細部の直しが大枠の手直しにつながらないよう工夫してある。
　ツールの活用では、牧野工房でコーディングに使われているツールが紹介されている。XHTML＆CSSの本に出てくるようなFirefoxのアドオンやDropboxの他に、不要なアーカイブを掃除してくれるCleanArchiverが紹介されていた。他にもテンプレートからコピーしたコードをいくつもストックでき、テンプレート化したものを履歴から呼び出せるクリップノートなどが紹介されていた。
　上述したように牧野工房では様々ある手法で効率の良い方法を選択し、マニュアルに一本化している。どの方法も手法を選択した理由が述べられており説得力があった。実践的な内容なので制作の際には参考になるだろう。コーディングの効率化やドキュメンテーションについては新しく学ぶ知識が多いので、頭の中で整理できていなく長々書いてしまった。

[doroayumiさんの感想 · 2013年7月31日]

高速でコーディングの技術を学ぶ。取り入れられる物が多くためになった。

[あめさんの感想 · 2012年9月10日]

もっと早く読んでおけば良かった！そもそも2008年の本なのに。
そうしたらいまの案件でこんなに手戻りすることもなかっただろうに…。無駄な作業で時間が取られる項目、ほぼすべて当てはまってた…！！こんなことも知らないで、私はぶっつけで仕事をしていたのね。

ツールのHowto本かと思ったら、もっと根本的な解決法を教えてくれている。

全てマニュアル化、どこに対応するのか手順を決めてから、シャドーコーディングを２回挟んでコーディングする。なるほどなるほど。

もちろん、わかりやすいcssの書き方、IE6対応の考え方など、実際のコードも載ってて、本当に参考になった。

「こんなときにはこうする」の手順・ルールが明文化されていなきゃいけないんだね。それが出来てないからうちの会社は工数ばっかりかかるんだね…。

[kkta49さんの感想 · 2011年9月25日]

実務ベースの話に好印象。

[katsuragawaさんの感想 · 2011年3月28日]

WEBサイトのリニューアルのために参考とした書籍。HTMLによる要素の記述とCSSによる視覚デザインの分離。概念的に理解していたけれども、実務にその効率的な作業を落とすために参考にした本。結局、リニューアル作業そのものがボツになったので役には立たなかったが、HTMLやCSSを読み書きでき、しかし正しく分業することを知らない、僕のような中途半端な知識があるヒトには良著だと思う。

[ひはらさんの感想 · 2010年3月18日]

ひとりでこつこつとXHTMLとCSSを勉強している人は目を通した方がいいです。実務でサイトを制作している人は買う前にざっと眺めてみて。

[なかにしゆうすけさんの感想 · 2010年1月24日]

参考になるところとそうじゃないところの差がすごくある本です。対象はHTMLとCSSのコーディングをする人で実務が1年未満でコーディング愛があふれでている人だと思うよ。3年以上やってる人には退屈かもです。

著者プロフィール

1級ウェブデザイン技能士。ウェブデザイン技能検定特別委員、若年者ものづくり競技大会ウェブデザイン職種競技委員。現在の主な業務は、コンピュータ・IT関連書籍の執筆のほか、全国各地での講演・セミナー講師など。
著書は『プロを目指す人のHTML&CSSの教科書』（マイナビ出版）、『今すぐ使えるかんたんEx HTML&CSS 逆引き事典』（技術評論社）、『詳解HTML&CSS&JavaScript辞典』（秀和システム）など60冊を超え、HTML5プロフェッショナル認定試験の公式サイトにおけるサンプル問題も多数提供している。
Chapter 1～2、Appendix担当。

「2022年 『HTML5プロフェッショナル認定試験 レベル1 対策テキスト＆問題集　Ver2.5対応版』 で使われていた紹介文から引用しています。」