「XHTML&CSS 超高速コーディング術」レビュー

fast_coding_makino.jpg

時代はファーストリリースの流れへ

じっくりコンテンツを考え、技術を吟味し、慎重にリリースする時代は終を告げた。 失敗するパターンの典型だ。 今はいかに早くリリースし、マーケットを把握してベクトルを合わせていくかが重要な時代。

そんな時代にこの本が出てきたのは必然であるようにも思えます。 コーディング専門集団「牧野工房」が大藤 幹さんという大物を引っさげて(?)降臨。 「XHTML&CSS超高速コーディング術」です。

とまぁ、大げさに書き始めてしまいましたが、この本のコンセプトは要するに「いかにコーディングワークフローをシンプルにして手戻りをなくすかの実践的ノウハウ集」です。

対象はずばり「コーディングしている人」と「そのグループ取りまとめ役」と言えましょう。

自社メソッドに溺れるな!

制作会社に入っていると、つい自社ルールにがんじがらめになってしまって、広い視点で制作フローの改善を考えたりすることができません。 自転車操業的な制作会社なんかは特にそうですね。

その中では、遠回りなようで本当に遠回りな作業がさも当たり前であるかのようにルール付けされていることも少なくありません。 Excelファイルの肥大化、ツールに溺れた開発環境、コーディングスキルなど。

その結果、大幅な手戻りがあっても「まあ、この業界はそんなもんだし…」と栄養ドリンクを飲みながら目の下にクマを作ってコーディングに勤しんでいる方も多いかと思います。

この本は、そんな方に読んでもらいたい「楽をする方法」が載ってます。 栄養ドリンクとおさらばできるかはあなた次第ですが。笑

目次

  • はじめに
  • 刊行によせて
  • 本書の例題で使用するファイルのダウンロード

第1章 コーディング専門サービス 牧野工房

  • コーディングに特化したサービス
  • 受注から納品までの流れ

第2章 ムダな作業は可能な限り発生させない

  • コーディング作業が長引く原因
  • 仕様・構成が後から変更される
  • 原稿・素材が後から変更される
  • スキル不足によるコーディングのミス

第3章 サイトの設計と情報の管理

  • きちんと記録してハッキリと分かるように示す
  • 仕様書を準備する
  • ワイヤーフレームの活用
  • 管理表によるタスクの管理

第4章 コーディングの基本と作業の順序

  • コーディングの基本設計
  • 共通する作業からはじめる
  • きちんと理解しておくべきCSSの基礎知識
  • コーディングの基本ルール

第5章 例題で学ぶコーディング作業の流れとポイント

  • 入稿から準備まで
  • 案件テンプレートの内容
  • コーディングの例題について
  • 外側の枠組みから作る
  • ヘッダの作成
  • フッタの作成
  • グローバルナビの作成
  • サイドバーの作成
  • メインコンテンツの作成

第6章 実戦向けコーディング・テクニック

  • CSSハックに対する考え方
  • テーブルの表示の微妙な差異を解消する
  • 任意の幅の画像とキャプションを左揃えの状態で中央に配置する
  • 新着情報の表示にテーブルを活用する
  • マイナスのマージンを活用したリストのカラム表示
  • 画像を使ったアクセシブルなロールオーバー
  • マージンを活用した配置位置の調整

第7章 ツールの活用

  • 牧野工房で使用しているツール
  • クリップNOTE
  • Taskbar ++
  • Win Merge
  • CleanArchiver
  • Dropbox
  • CopyExt – 拡張コピー
  • WinTree
  • Thunderbird
  • Firefoxアドオン

付録

  • 牧野工房コーディング・ガイドラインについて
  • 基本指針・概要
  • HTML関連ルール
  • CSS関連ルール

索引

個人的に役に立ったポイント

手戻りを想定

いかに挙げるような事に対する対策が書いてあります。

  • とつぜん「印刷対応して」と言われること。
  • コンテンツを途中で「変更して」と言われること。
  • コーディングミス(新人くんやバイトくん)が起きること。

サイト管理

  • 「クライアントへの仕様書(シンプル!)」「ToDO」「ページ別進捗」が1つのExcelファイルにまとまってる。
  • 進捗を○の数で%表示させてる。

共通作業

  • ページテンプレート以外にも、「パーツテンプレート」を用意して1ページに見本表示できるようにしている。
  • 事前にターゲットブラウザチェックしとく。
  • bodyタグにclassとidを指定して、デザイン共通化を効率的に管理してる。

コーディング

IE6対策

  • 「position:relative」には「zoom:1」をセットに。
  • ナビゲーションには印刷対応を考慮して「CSSスプライト」ではなく、背景画像とimgの「visibility:hidden」を組み合わせる。
  • 「float」では「display:inline」もセットで指定。
  • コメントタグは終了タグ直後ではなく、は終了タグ直前に。

共通

  • 文字サイズ変更を考慮して、CSSのwidthは基本的に指定しない。
  • 現時点での%フォント指定の最適解。

まとめ?

といった感じで、現役コーダーはいろいろと参考になるところは多いので必読。 何しろ「コーディング専門集団」のノウハウ集ですから。

全体的には「牧野工房」さんのメソッドがオンパレードなんですが、ところどころに現れる大藤 幹さんの技術コラム(?)みたいなものも参考になりました。

コラムも技術論なので、本当に遊びの部分がないのですが、意外とアッサリとした読み口で数時間もあれば読めてしまうのではないでしょうか。 あ、サンプルコードをしつこく追ってしまうと当然、時間がかかってしまいますよ。

大事なことなので、もう一度。 コーダーは必読だよ!

このページをシェアする

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

2009-12-28