wiki:pne-xhtmlcss-note
 ここの情報は古いです。ご理解頂いた上でお取り扱いください。

XHTML+CSS化ノート

開発段階の内容

このプロジェクトの作業に参加するには

OpenPNEが大好きで、HTMLソースを改善したい! という熱意を持った方であれば、どなたでも大歓迎です! 以下の手順で作業に参加してください。お待ちしています!

  1. Trac を扱うため、 OpenPNE.jp に参加してください(このプロジェクトのために OpenPNE.jp に参加したい方は、海老原昂輔<ebihara@…> まで連絡いただければ招待メールを送信いたします)
  2. sns.openpne.jp 内の手嶋さんに連絡して OpenPNE のブランチコミット権限を得てください
  3. Skype チャットにて、どの班(後述)で参加したいか宣言してください

指針

OpenPNE2.12でXHTML+CSSプロジェクトの成果物を入れることをまずは目標とします。

OpenPNE2.12βの直前バージョンOpenPNE2.11.8のリリースが 2008/3/26 であり、大きな機能変更はこの日までに追加されていなければ 2.12 には入れられません。

限られた時間の中でこのプロジェクトの成果物を OpenPNE にとって最もいい形で入れるために、次の目標を各自が認識し、進めていきましょう。

  • テーブルレイアウトを廃し、CSSによるレイアウトに切り替える
  • XHTMLの構文適合性を満たす
  • XHTMLの目的適合性をある程度意識
    • 次のバージョンでは目的適合性をも高めたい。そのステップとなるようなマークアップ

大まかな進行の流れ

  1. OpenPNEに点在するありとあらゆるパーツをグルーピングし、マニュアル化する
  2. それぞれのパーツに対して適切なマークアップ、スタイルの適用をおこなう
  3. 全テンプレートを洗い、担当するパーツのみを 2. でおこなったマークアップに従い書き換えていく

作業体制

以下のように班を敷き、平行して作業を進めていきます。

パーツ毎にチケットを作成し、各班がそれぞれチケットをやりとりしながら進行していきます。

各班の詳しい作業内容などについては、各班名に貼られたリンク先にあるサブページを参照してください。

  • マークアップ班 - OpenPNEが出力するHTMLのうち各部位のマークアップをおこなう
  • テンプレート班 - マークアップ班のマークアップを参考に、テンプレート上で実際のマークアップをおこなう
  • パーツ・進捗管理班 - パーツや進捗の管理をおこなう
  • 広報班 - このプロジェクト自体や進捗などを広く世間に伝えていく

各班の動きをまとめるとどういう動きになるかというイメージはこちらのスプレッドシートを参照してください。

作業用ナビゲーション

Tracチケットレポート
[report:67 {67} XHTML+CSSプロジェクト作業用レポート]
SVNブランチ
source:OpenPNE/branches/prj/xhtmlcss
  • markup : マークアップ班がパーツのマークアップをしていくためのHTMLが格納されている
  • OpenPNE : テンプレート班がテンプレート書き換えをしていくために、OpenPNEのソースコードが格納されている。最終的にこのブランチが開発版にマージされる
  • partslist : パーツ・進捗管理班が管理するパーツリスト。パーツ毎に画像と対応チケット、修正リビジョンなどが提示してある
パーツリスト
wiki:pne-xhtmlcss/parts
マークアップ班の状況確認用HTML
http://xhtmlcss.openpne.jp/markup/
※実作業状況は source:OpenPNE/branches/prj/xhtmlcss/markup
テンプレート班の状況確認用SNS(オープン制)
http://xhtmlcss.openpne.jp/sns/
※実作業状況は source:OpenPNE/branches/prj/xhtmlcss/OpenPNE
テンプレート改善用スプレッドシート
http://spreadsheets.google.com/a/openpne.jp/ccc?key=pOJdcbQJU3VzTLa8tTpdWHg&hl=en

既存レイアウトの構造

レイアウト構造をそれぞれ設計していき、IDの付け方やテンプレート設計方針を検討します。

  • 全テンプレート共通部分
    • ヘッダー
    • 共通ナビバー
    • フッター
  • 土台部分
    • 1ペインログイン画面
    • 1ペイン一般
    • 2ペイン看板(h_home等の9面表示)
    • 2ペインその他(メッセージボックスなど)
  • 各パーツ
    • ナビバー
    • インフォメーション欄
    • 自分顔
    • フレンドリスト
    • 最新情報リスト
    • ダイアログ

確認しておくべきこと

  1. XHTML+CSS化において、何を完成形とするか。
    1. 2008年1月時点では、XHTML+CSS化でなく改善を目標とした。
      • これは、idやclassの振り分け、目的適合性の評価をあまり厳密にしないという意味である。
      • どうしても2重線が必要なら div で包含するなど、マークアップに関して妥協が許される。
    2. 各ページがどうなっていればいいのか、仕様書(設計書)に相当するものが欲しい。
      • それが存在しないので、現状の結果を見て何がどうなっていればいいのかを確認している。
      • 曖昧な部分の設計(理想形)について、具体的に示して欲しい。
    3. HTML文書としてのワイヤーフレームの情報が欲しい(id名の参考のため)。
      • XHTML+CSS化する上で勝手に決めてしまっていいのか。
    4. 命名規則(書式)について。
      • クラス名など空白類文字を含むことのできない単語をどう表記するか。
        • キャメルケース : (LCC) openpneFormat, (UCC) OpenpneFormat
        • ハイフン : OpenPNE-Format
        • アンダースコア : OpenPNE_Format
      • ハイフン、アンダースコアでは単語の区切りが明確になる(単語の大文字小文字に依存しない)。
      • Java言語のように、変数の構造的意味によって表記を分けるか。
  2. XHTML+CSS化より上位の設計に関する内容について。
    1. header.tpl をインクルードしたページから、header.tpl に値を渡せるのか。
      • title要素の内容をページごとに表示したい。
    2. CSSは複数のファイルで設計するのか(マルチシートアプローチか)。
      • 保守性を考えてもワンシートアプローチの方が扱いやすいと思う。
  3. そもそも、現状のOpenPNEと示しているのは http://sns.openpne.jp でいいのか。
    1. 現状を知るために盛り上がっているOpenPNEの最新安定版として公式SNSを基にしたが問題はないか。
  4. 今後の作業形態について。
    1. 複数人で作業するとなるとガイドラインを作る必要がある。
      • ガイドラインの内容の策定をするために、ここに書いた内容を吟味する必要がある。
    2. 個人で作業するにしても、一定のルール(ガイドライン)をまとめる必要がある。
    3. 個人の場合は暗黙的に認識していればよいが、複数人の場合は明示的にする必要がありその分の手間がかかる。

パーツの設計について

▼ 考慮すべき内容

  • (#)パーツの段落的構造(h2要素による区切り、上位のワイヤーフレーム)はどうするか。
  • ターゲットブラウザは何か。
  • 管理画面からカスタマイズ可能な箇所はどこか(事実上でなく設計的に)
  • マイページなどを3カラムにする可能性は考慮するのか。
  • 余白など改善した方がよさそうな部分が多く見られるが、どこまで変えていいのか。
  • CSS, JSが無効な状態で閲覧された場合への考慮はどうするか。
  • 印刷に対応するか。

▼ パーツのチェックポイント

  • (x-x)は、その内容を持つパーツのひとつ。
  • サイズ
    • 各パーツのサイズ width, height は何ピクセルか。
  • ボーダー
    • 外枠は2重である必要があるか。
    • 2重線の間隔は何ピクセルか。
    • 外枠の色は #ccc (204,204,204) でいいのか。
    • (2-4) 内部の枠線は必要か。
    • (3-8) 1pxと2pxのボーダーの違いは必要か。
  • 背景色
    • 見出しの背景色は #36b3d1 (54,179,209) でいいのか。
    • (1-1) 背景色がついている部分は本当に色が必要か。
  • テキスト
    • 行の高さ line-height は変えてもいいのか。
    • (2-9) (3-3) (3-7) 折り返し位置を変えてもいいのか。
    • (1-2) 太字にする部分は見出し以外に決まっているのか。
    • (2-13) "※" は必要か。
  • レイアウト
    • (1-1) 2列でなく2段にしてもいいのか。
    • (2-11) フォームの配置を変えてもいいのか。
    • (3-1) 「他のメンバーの~」リンクテキストの位置を変えてもいいのか。
    • (3-4) ボタンの位置を変えてもいいのか。
  • 装飾
    • (2-16) フォームにある矢印画像は必要か。
    • (3-7) 1位と2位以下の見栄えの違いは何か。
    • 角丸ボックスにする可能性はあるか。
  • 余白
    • ボックスの padding (特に上下)の値は何ピクセルか。
    • (2-15) テキストの左余白は何ピクセルか。
    • (8-9) 日記などのテキスト表示欄の padding は何ピクセルか。
    • (8-12) 画像と文字の間隔は無くていいのか。
    • (8-19) マイフレンド管理の見栄えは今のままでいいのか。
    • (9-4) 下部文章の左右余白は今のままでいいのか。
    • (9-5) 写真のURIを入力するテキストフィールドの長さは今のままでいいのか。
    • (9-8) テキストエリアの padding は何ピクセルか。
    • フォーム関連要素の padding は付けるか。

まえがき

用語

語は文脈によって意味を変えることがあります。XHTML+CSSプロジェクトに於いて登場する文章の誤解を避けるために予め用語を確認しておきます。

CSS
  • Cascading Style Sheets (CSS) を意味します。
  • CSS云々といった場合、CSSのバージョン(レベル)は限定せず、一般的に利用されている全てを意味します。
HTML
  • HyperText Markup Language (HTML) を意味します。
  • ここでは、暗黙的に HTML 4.01 を意味します。
  • 全てのマークアップ規則 (Strict / Transitional / Frameset) を総括的に指します。
  • 小文字で(htmlと)表記している場合には次のものを指す場合があります。
    • html要素(HTML要素の一つ、ルート要素)
    • 拡張子 html
HTML構造
  • HTML要素によってマークアップされた一部、あるいは全部の構造のことを意味します。
HTML要素
  • ここでは、(X)HTMLで定義されている要素、及び利用され得る要素(ブラウザの独自要素)を意味します。
OpenPNEテンプレート
  • このプロジェクトで扱う(テンプレート)ファイル、またはその内容を指します。
  • OpenPNEテンプレートを(X)HTML+CSS化することが、このプロジェクトの目的です。
XHTML
  • Extensible HyperText Markup Language (XHTML) を意味します。
  • ここでは、暗黙的に XHTML 1.0 を意味します。
  • 全てのマークアップ規則 (Strict / Transitional / Frameset) を総括的に指します。
(X)HTML
  • HTMLとXHTMLを総称した表現です。
XHTML+CSS化
クロスブラウザ
  • 一般的には、DHTML(Dynamic HTML)に関する語ですが、ここでは、(X)HTML+CSSに関して使います。
  • 異なるプラットフォーム(環境)でも、同様の結果(表示)が実現できることを意味します。
  • 特に、ここでは、同一の結果でなく同様の結果(理想的な結果の範疇)であればよいことを意味します。
コンポーネント (Components)
  • パーツのことです。パーツを参照してください。
  • ベース(基盤)レイアウトを司るボックスをコンテナ(Container)と呼んだものに対してコンポーネントと名付けました。
  • コンポーネントというと別の分野で語弊が生じる可能性があるので、パーツという語を積極的に利用します。
スタイルシート
  • ここでは、CSSのことを指します。
スタイル指定
  • ここでは、CSS(で定義されているプロパティ)を用いて、(X)HTML要素へスタイルを指定することを意味します。
パーツ
  • OpenPNEに存在する「最新情報」や「マイフレンドリスト」などの内容の一塊を指します。
  • 「最新日記・レビュー」はパーツですが、その中の「最新日記」や「最新レビュー」をそれぞれパーツと見做すかは曖昧です。
ブラウザ
  • ここでは、ウェブブラウザのことを指します。
  • モダンブラウザとレガシーブラウザという区別もあります。
    • モダンブラウザとは、最近のブラウザでCSSへの準拠がある程度満たされているブラウザの総称です。
    • レガシーブラウザとは、モダンブラウザに対してCSSへの準拠があまり満たされていないブラウザの総称です。
    • 同じ種類のブラウザでも、バージョンによって区別されます。
    • これらは厳密に区分されておらず、文脈や状況によって区分が異なるブラウザもあります。
  • ここで用いるブラウザの名称(略称)を以下に示します。
ボックス
  • あるブロックレベル要素の一塊を指します。
  • HTMLレベルのワイヤーフレームの各部位がそれぞれ一つのボックスといえるかもしれません。
  • ブロックレベル要素で包含されていない部位も、他と区別して認識可能な一塊であればボックスと表現することがあります。
内容
  • 一般的な意味での "内容" を指す場合と、HTMLとしての内容を指す場合があります。
  • ここでいうHTMLとしての内容とは、ある要素に対して、その要素開始タグとその要素終了タグに含まれた中身を指します。
    • <p><strong>XHTML+CSS化</strong>とは</p> というHTML記述に関して、"<strong>XHTML+CSS化</strong>とは" はp要素の内容で、"XHTML+CSS化"はstrong要素の内容です。
妥当性
  • (X)HTMLに関して、(X)HTMLの適正さで示した構文適合性を意味します。
  • (X)HTMLが妥当であるとは、構文適合性を満足していることを意味します。
要素
  • HTMLに於ける要素を意味します。
  • 一般には、その要素開始タグの先頭からその要素終了タグの末尾までを意味しますが、ここでは、要素タグのことを要素と表現することがあるかもしれません。

(X)HTMLの目的

Webリソースの形式として(X)HTMLが広く採用されているのはマークアップ言語としての目的が大きな理由です。 マークアップ言語はプレーンテキスト(テキストファイル)として扱われます。 そのため、テキスト(HTML文書)を解釈できるパーサ(ブラウザ)があれば環境に依存せずリソースを利用することができます。 しかしながら、どんな環境でもコンテンツの内容を理解するには内容が適切にマークアップされていることが必要です。 一部の環境での表示結果さえ良ければいいというのであれば画像やFlashを用いた方が効率的です。 Webリソースの形式としての(X)HTMLの利点を生かすには、その特性を理解し、できる限り適切に扱うことが求められます。

(X)HTMLの適正さ

(X)HTMLはプレーンテキストであるため、自身の情報もテキストとして記述します。 (X)HTMLのバージョンは文書型定義(Document Type Definition)として明示され、この記述をDTD宣言(あるいは、文書型宣言)といいます。 製作者は、ある文書型の仕様に基づいて(X)HTMLを作成し、その文書型を宣言します。 つまり、(X)HTMLの仕様を違反していないかという基準が一つの適正さの判断基準になります。 (X)HTMLの仕様に対する違反(文法違反)を評価する基準として構文適合性 (Validity)という語があります。

構文適合性を良くすることは重要ですが、それだけでは適正さに欠ける部分があります。 (X)HTMLとしての記述(HTML要素など)の使い方が本来の目的に合っているか、仕様に対して不適切でないかという基準があります。 目的が適切かを評価する基準として目的適合性 (relevance)という語があります。

(X)HTML+CSSによる文書をみたとき、構文適合性(妥当性)と目的適合性がきちんと考慮されていれば(X)HTMLに関しては適正であるといえます。

なお、構文適合性(妥当性)を検証するためのツールが提供されています。

CSS対応の実態

PCブラウザに関して言えば、2008年現在、IE, Firefox, Opera, Netscape, Safari といったブラウザの比較的新しいバージョンが一般的に利用されています。 ブラウザは(X)HTMLやCSSなどの仕様を基にパーサが実装されていますが、その実装はブラウザによって異なる部分があり、場合によっては適切に実装されていないことがあります。 (X)HTML+CSSに関する作業で問題となるのは、この実装差異、実装不備にどう対応するかということです。 特に、現在日本で利用者が最も多いブラウザは Windows OS と併せて利用されている IE(version 6, 7) ですが、IEが実装不備を多く抱えていることが大きな障害となっています。

(X)HTML+CSSによる文書

(X)HTMLの仕様、CSSの仕様、一般的なブラウザの実装状況を知った上でないと、ある程度適切なウェブページを作ることは困難です。 さらに、ブラウザの実装差異や実装不備に対応するには、各種ブラウザのバグを認識し、効率的なバグへの対策を知る必要もあります。 適正さに欠けるウェブページが氾濫しているのは、言語の仕様を学習するだけでは理想の結果を得られないことからの妥協策が一般化してしまった背景があります。 しかしながら、本来の(X)HTMLの目的を意識し、正しく効率的なマークアップ及びスタイル指定により製作していくことが保守性や柔軟性の向上、トラフィックの削減といったメリットのためにも重要です。

目的適合性を考える

あるページを適正なXHTML+CSSでするには妥当性はもちろん、目的適合性を十分考慮する必要があります。 ある内容をどうマークアップすればいいか、あるいは画像として埋め込むかといったことを判断しなければなりません。 妥当性は文法違反の有無が判断基準であるため検証プログラムによって評価できますが、目的適合性は製作者(人間)にしか評価できません。 また、目的適合性に関しては判断基準が一意でなく、適切であると思われる方法が複数存在することがしばしばあります。 その複数の方法の中から最も適切であるものを決めることも効率的なマークアップをするためには必要です。

ある内容に対して適切であると思われるマークアップの方法が複数あるとき、そのページ全体の中でその内容がどうなっていればよいかを考えることが最適なマークアップを決定するための判断材料になります。 「見出し」と「(見出しに対する)内容」という組み合わせと見做せる内容があったとき、これを「hn要素」と「p要素(あるいは、リスト要素など)」とするか、「dt要素」と「dd要素」とするか、あるいは別の要素を用いるのが適しているのかは状況によって異なります。 適切と思われる方法が複数考えられるときは、他の要因(そのページ内の他の記述)との関係性などを考慮して判断できます。 また、実装不備に対応するためのCSSのスタイル指定でHTML構造に依存せざるを得ない場合もあるため、スタイル指定がしやすいマークアップに決定することもあります。 念を押しますが、見栄えのためのマークアップは(悪い意味で)逆説的であり不適切です。

OpenPNEテンプレートをXHTML+CSS化する

XHTML+CSS化とは

一般的に、XHTML+CSS化という言葉は意味が定められていませんが、ここでは、適正なXHTMLとCSSによって対象物を設計することを指すことにします。 しかしながら、(X)HTMLとCSSを広い意味で改善することを意味する場合があるかもしれません。

XHTML+CSS化の方針

  1. 現状のOpenPNEの構造を明確にする。
    • OpenPNEテンプレートの構造(includeの規則など)を把握する。
  2. 完成形はどうなっているべきかを現状から読み取る。
  3. 各ページがどんなパーツを持つか、ページごとの構造を明確にする。
  4. スタイル指定を考慮して、パーツの共通点を抜き出しグルーピングする。
  5. 目的適合性を考慮して、パーツをXHTML+CSSで書き直す(XHTML+CSS化を行う)。
  6. 改善に関して、パーツのマークアップ(アプローチ)を決定する。
    • パーツになくてはならない固有のデザインがないかなどを確認する。
  7. ガイドラインを作成しつつ、公開に向けたパーツのマークアップを行う。
    1. http://takai.sns.dazai.pne.jp/ からHTMLソースを保存
    2. tracにSVNで差分を取りながらそのページをXHTML+CSS化
    3. XHTML+CSS化した結果(差分)を見ながらOpenPNEテンプレート書き換え
  8. パーツ以外(headerやfooterなど)の部分のマークアップを行う。

OpenPNEの各ページ、各パーツに関する仕様書(設計書)が存在しないため、どこがどうなっているべきかという設計を現状から読み取る必要があります。 設計書自体を作る必要はありませんが、目的適合性やスタイル指定の効率化を考慮すると設計書の内容と同等の情報が必要になります。 このため、どんなパーツがあるか(方針3)を調べた後に、パーツがどうなっていればいいかという認識を併せてパーツのグルーピング(方針4)を行う必要があります。

パーツの区分ができれば、その分類と実際のパーツの差異を確認しつつパーツの設計(XHTML+CSS化)を行います。 ある分類(パーツグループ)の設計がテンプレート化(形式化)できれば、全てのパーツをそのテンプレートに併せてマークアップします。 CSSを適用した結果、各パーツが理想的な表示になれば完了となります。

ただし、あるグループのパーツがターゲットブラウザで理想的な表示になるかを逐次確認する必要があります。 XHTML+CSSによるページの製作者は、場合によっては実装不備に対してスタイル指定だけで対応できず、HTML構造を変更する可能性があることを十分承知しておくべきです。 クロスブラウザを実現するためには、ターゲットブラウザ全ての実装不備を考慮する必要があります。

これまでの作業内容

  • 2007/12/12
    • 基本方針の考案
    • (方針1) 現状のOpenPNEテンプレートの構造の認識
  • 2007/12/17 - 12/18
    • ベースレイアウト(コンテナ)のテンプレートの考察(以下3種に絞った)
      • 2カラム (マイホーム、マイページ確認、フレンドトップ、コミュニティトップ)
      • サイドバー付 1カラム (日記、メッセージ、ランキング、…)
      • 1カラム (フレンドリスト、コミュニティリスト、コミュニティメンバー、…)
    • SNS(OpenPNE)ログイン後にユーザとしてアクセスできるページのリストアップ
    • リストアップしたページにある全てのコンポーネントを画像として保存
      • 作業にはWinshotを利用して png 形式で保存
  • 2007/12/25 - 12/26
    • (方針3) 「ページAには、これだけのパーツがあり、そのパーツはグループPである」という分類のパーツリスト作成 ページ別パーツ一覧
    • (方針2) いくつかのパーツの現状(tableの乱用)の設計を認識
  • 2008/01/16
    • (方針4) 「このグループには、これらのパーツがあり、そのパーツはページXにある」という分類のパーツリスト作成 グループ別パーツ一覧
    • パーツのマークアップについて議論し、方針を(X)HTML+CSSによる改善と改め直した。
  • 2008/01/22 - 01/23
  • 2008/01/28
    • (方針6) パーツの設計について議論
      • 作業しつつ随時チャットで確認していく形にすることに決まった。
    • OpenPNE2.12.0で反映させることが前提なので、更に(X)HTML+CSS化のレベルを下げて速度重視で設計することを目標とした。
      • table要素の乱用を省き、簡単にマークアップを改める程度を想定
      • パーツごとにidを振る予定だが、期限的な問題でstyle属性を利用する可能性もある。
    • OpenPNEテンプレートファイルを実際に書き換えるための準備(インクルードの仕方などの認識)
  • 2008/01/31
    • (方針6) パーツの設計について確認
    • 書き換えたソースでの表示結果を確認するためのOpenPNEを http://takai.sns.dazai.pne.jp/ に用意
    • (方針7) XHTML+CSS化とOpenPNEテンプレートの書き換えを分業することにした。
Last modified 9 years ago Last modified on Jul 4, 2008, 11:32:52 PM