野口 竜司氏曰く
■「WEB標準化」に踏み込んだ"少数派"企業サイト
個人Blogや公共性の高いサイトに比べ、企業サイトが「CSS2＋XHTML/HTML」採用した例は非常に少ない（2004年現在）。そのような状 況下において、先行して「WEB標準化」に踏み込んだ"少数派"企業サイトを、海外/国内ともに探し出してきた。何はともあれ下記のサイトをチェックして みて欲しい。
○海外事例
SIEMENS Mobile
http://www.siemens-mobile.com/
AOL
http://www.aol.com/
Fast Company
http://www.fastcompany.com/
WIRED
http://www.wired.com/
○国内事例
マクロメディア
http://macromedia.com/jp/
コニカミノルタ
http://konicaminolta.jp/
National
http://national.jp/
JR東海 採用サイト
http://saiyo.jr-central.co.jp/
※ハイブリッド型(一部tableタグでレイアウト)の事例を含む
「世の中によくあるサイトと同じに見える」と感じられた方も多いと思う。それで正解である。"一見普通"に見えるのに、裏側では従来型と異なった構造を持 ち、実は"様々な効用"を享受しているのである。これが文書の論理構造と見栄えを"分離"するCSS2＋XHTML/HTML型の特徴だ。
■CSS2＋XHTML/HTMLは、軽い！集客に強い！アクセシブル！モバイルに強い！
次にCSS2＋XHTML/HTMLがなぜ"良薬"なのかを解説していきたい。
（1）サイトのデータ容量が重いためサーバー負荷が高く、表示も遅い！
（2）検索エンジンからの集客が弱い！
（3）アクセシビリティに関するJIS規格対応を会社から求められている！
（4）モバイルやウェブ以外の他キャリア対応の手間がかさむ！
Webサイト運営・企画に携わっているいる方なら、一度は上記のような悩みを抱えたことがあるのではないだろうか？ CSS2＋XHTML/HTMLを使った"分離型"サイト構築は、これらによく効く"薬"なのである。なぜなら、
（1）分離型は、軽い！
（2）分離型は、集客に強い！
（3）分離型は、アクセシブル！
（4）分離型は、モバイルにも強い！
、からである。
さあ、（1）～（4）について詳しく述べていこう。
■（1）軽い！ ～サーバー負荷の軽減と読み込み速度の向上～
○HTMLファイルサイズの30％～60％カット
例えば、CSS2＋XHTMLを早くから導入している弊社グループサイト「Dragon.jp」（ http://dragon.jp/ ）トップページのHTMLファイルは、たったの「9KB」しかない。
"分離型"を採用すると平均してHTMLファイルサイズが30％～60％カットできるといわれている。大量のページを軽量化できれば、サーバ負荷を軽減することも可能で、ページ総数が多い大規模サイトやヒット数の多いサイトほど、その効用は大きくなるだろう。
○描画速度の向上
HTMLファイルサイズを軽くできることに併せ、CSSファイルはブラウザーキャッシュで記憶させることができる。同じCSSで定義されている箇所の2 度目の読み込みがなくなり、ブラウザーへ描画する速度が格段に向上する。またtableタグ重複での見栄え調整がないため、tableタグを徐々に読み込 むといったユーザーストレスをなくすこともできる。
■（2）集客に強い！ ～SEOに対する有効性が高い～
○サーチエンジンクローラーと好相性
"分離型"をキチンと作成すれば無駄なコードがなくなり、サーチエンジンクローラーにとって解読しやすい状態にできる。
文書の持つ本来的な意味合いをXHTML/HTMLソース上でも再現できれば、情報の樹形図や要素間の強弱関係が正しくすることができ、自然とSEO的 に有効なソースが出来上がることになる。またGoogleでは、101KB以上のソースはインデックスしない仕組みになっているが、"分離型"はファイル サイズも軽いので、その心配も少なくなる。
○文字画像とプレーンテキストの併用が可能
これまで装飾的に文字を画像として扱いたい場合、SEO的にはalt対策くらいしかできなかった。"分離型"であれば、ブラウザー画面で文字画像表示、 ソース上でプレーンテキスト扱いという使い分けができるようになる。画像をCSS制御することによって、見栄えを自由に作りながら、キーワード出現の最適 化対策も同時に行えるのである。
■(3)アクセシブル！ ～アクセシビリティの高いページに変身～
○JIS規格でも"分離型"を推奨
日本規格協会（JIS）が2004年6月に公示したWEBアクセシビリティ規格（JIS X 8341-3)の中に「5.2 構造及び表示スタイル」という項目がある。この中で「表示スタイルと文書構造の分離」「表組みの要素をレイアウトのために使わない」といった推奨文がハッ キリ記載されている。このことは、「分離型でないサイトはそれだけでアクセシビリティ的なハンデを負う」ことを意味する。
○文章構造の正しさが音声ブラウザー閲覧をスムーズに
主に視覚障害をお持ちの方が利用する音声ブラウザーは、ソースを上から機械的に読んでいく。そのため、ソースが複雑な組み方をされている場合、本来の文 脈とは違う解釈をしたり、強弱の付け方がバラバラになってしまうことがある。"分離型"でソース記述する場合は、見出し/リスト/強調などを含めて文章の 論理構造を正確に記述することができるため、音声ブラウザーでもスムーズに閲覧することが可能になる。
■(4)モバイルにも強い！ ～シングルソース、マルチディバイスへの入り口～
○CSSで出力媒体を定義できる
CSSファイルは出力媒体ごとに表示状態をコントロールすることができる。１つのXHTML/HTMLソースでも、メディア別CSSを用意しておけば、 見栄えを各メディアに最適化できるのだ。身近な例で言えば、専用のCSSファイルを用意するだけで、サイト内のプリントアウトページを"全て"自動生成で きる。
○モバイル用ソースに一発変換
また、XHTML/HTML文章の大元をXMLで管理していれば、HTMLのモバイル対応版であるXHTML Basic文書などの作成も簡略化できる（CSS切り替えだけで対応できない場合は、XHTML/HTML側を書き換える必要がある)。XSLT（XML Stylesheet Language Transformations）を使うことで「XML←→XHTML←→モバイル用ソース」といった変換が可能だからだ。これまでウェブサイトとモバイ ルを同じように二重更新していたとしたら、情報更新の手間は激減するだろう。
■まとめ
これまで述べてきたように、CSS2＋XHTML/HTMLでの"分離型"サイトは、様々な悩みを解決してくれる。今後、先進ブラウザーの普及や新型制作ワークフロー体制の確立が進めば、より多くのメリットを享受できるようになるであろう。
事例では紹介していなかったが、実は「米Yahoo!（ http://www.yahoo.com/ ）」も"分離型"構造を採用した少数派サイトのひとつだ。このことからも見て取れるように、"分離型"は一時的な流行ではない。あっという間にウェブサイ ト構築のスタンダード仕様になるだろう。導入自体を悩むことはない、後はどのタイミングで取り組むかだけの問題であろう。
イー・エージェンシー（Dragon.jpグループ）では、自社およびお客様サイトにおいて、CSS2＋XHTML（分離型）のサイト構築を進めていま す。"分離型"導入に限らずSEO/アクセシビリティ/マルチディバイス対応などでお悩みでしたら、お気軽にお問い合わせください。（問い合わせ先： sales@e-agency.co.jp ）
個人Blogや公共性の高いサイトに比べ、企業サイトが「CSS2＋XHTML/HTML」採用した例は非常に少ない（2004年現在）。そのような状 況下において、先行して「WEB標準化」に踏み込んだ"少数派"企業サイトを、海外/国内ともに探し出してきた。何はともあれ下記のサイトをチェックして みて欲しい。
○海外事例
SIEMENS Mobile
http://www.siemens-mobile.com/
AOL
http://www.aol.com/
Fast Company
http://www.fastcompany.com/
WIRED
http://www.wired.com/
○国内事例
マクロメディア
http://macromedia.com/jp/
コニカミノルタ
http://konicaminolta.jp/
National
http://national.jp/
JR東海 採用サイト
http://saiyo.jr-central.co.jp/
※ハイブリッド型(一部tableタグでレイアウト)の事例を含む
「世の中によくあるサイトと同じに見える」と感じられた方も多いと思う。それで正解である。"一見普通"に見えるのに、裏側では従来型と異なった構造を持 ち、実は"様々な効用"を享受しているのである。これが文書の論理構造と見栄えを"分離"するCSS2＋XHTML/HTML型の特徴だ。
■CSS2＋XHTML/HTMLは、軽い！集客に強い！アクセシブル！モバイルに強い！
次にCSS2＋XHTML/HTMLがなぜ"良薬"なのかを解説していきたい。
（1）サイトのデータ容量が重いためサーバー負荷が高く、表示も遅い！
（2）検索エンジンからの集客が弱い！
（3）アクセシビリティに関するJIS規格対応を会社から求められている！
（4）モバイルやウェブ以外の他キャリア対応の手間がかさむ！
Webサイト運営・企画に携わっているいる方なら、一度は上記のような悩みを抱えたことがあるのではないだろうか？ CSS2＋XHTML/HTMLを使った"分離型"サイト構築は、これらによく効く"薬"なのである。なぜなら、
（1）分離型は、軽い！
（2）分離型は、集客に強い！
（3）分離型は、アクセシブル！
（4）分離型は、モバイルにも強い！
、からである。
さあ、（1）～（4）について詳しく述べていこう。
■（1）軽い！ ～サーバー負荷の軽減と読み込み速度の向上～
○HTMLファイルサイズの30％～60％カット
例えば、CSS2＋XHTMLを早くから導入している弊社グループサイト「Dragon.jp」（ http://dragon.jp/ ）トップページのHTMLファイルは、たったの「9KB」しかない。
"分離型"を採用すると平均してHTMLファイルサイズが30％～60％カットできるといわれている。大量のページを軽量化できれば、サーバ負荷を軽減することも可能で、ページ総数が多い大規模サイトやヒット数の多いサイトほど、その効用は大きくなるだろう。
○描画速度の向上
HTMLファイルサイズを軽くできることに併せ、CSSファイルはブラウザーキャッシュで記憶させることができる。同じCSSで定義されている箇所の2 度目の読み込みがなくなり、ブラウザーへ描画する速度が格段に向上する。またtableタグ重複での見栄え調整がないため、tableタグを徐々に読み込 むといったユーザーストレスをなくすこともできる。
■（2）集客に強い！ ～SEOに対する有効性が高い～
○サーチエンジンクローラーと好相性
"分離型"をキチンと作成すれば無駄なコードがなくなり、サーチエンジンクローラーにとって解読しやすい状態にできる。
文書の持つ本来的な意味合いをXHTML/HTMLソース上でも再現できれば、情報の樹形図や要素間の強弱関係が正しくすることができ、自然とSEO的 に有効なソースが出来上がることになる。またGoogleでは、101KB以上のソースはインデックスしない仕組みになっているが、"分離型"はファイル サイズも軽いので、その心配も少なくなる。
○文字画像とプレーンテキストの併用が可能
これまで装飾的に文字を画像として扱いたい場合、SEO的にはalt対策くらいしかできなかった。"分離型"であれば、ブラウザー画面で文字画像表示、 ソース上でプレーンテキスト扱いという使い分けができるようになる。画像をCSS制御することによって、見栄えを自由に作りながら、キーワード出現の最適 化対策も同時に行えるのである。
■(3)アクセシブル！ ～アクセシビリティの高いページに変身～
○JIS規格でも"分離型"を推奨
日本規格協会（JIS）が2004年6月に公示したWEBアクセシビリティ規格（JIS X 8341-3)の中に「5.2 構造及び表示スタイル」という項目がある。この中で「表示スタイルと文書構造の分離」「表組みの要素をレイアウトのために使わない」といった推奨文がハッ キリ記載されている。このことは、「分離型でないサイトはそれだけでアクセシビリティ的なハンデを負う」ことを意味する。
○文章構造の正しさが音声ブラウザー閲覧をスムーズに
主に視覚障害をお持ちの方が利用する音声ブラウザーは、ソースを上から機械的に読んでいく。そのため、ソースが複雑な組み方をされている場合、本来の文 脈とは違う解釈をしたり、強弱の付け方がバラバラになってしまうことがある。"分離型"でソース記述する場合は、見出し/リスト/強調などを含めて文章の 論理構造を正確に記述することができるため、音声ブラウザーでもスムーズに閲覧することが可能になる。
■(4)モバイルにも強い！ ～シングルソース、マルチディバイスへの入り口～
○CSSで出力媒体を定義できる
CSSファイルは出力媒体ごとに表示状態をコントロールすることができる。１つのXHTML/HTMLソースでも、メディア別CSSを用意しておけば、 見栄えを各メディアに最適化できるのだ。身近な例で言えば、専用のCSSファイルを用意するだけで、サイト内のプリントアウトページを"全て"自動生成で きる。
○モバイル用ソースに一発変換
また、XHTML/HTML文章の大元をXMLで管理していれば、HTMLのモバイル対応版であるXHTML Basic文書などの作成も簡略化できる（CSS切り替えだけで対応できない場合は、XHTML/HTML側を書き換える必要がある)。XSLT（XML Stylesheet Language Transformations）を使うことで「XML←→XHTML←→モバイル用ソース」といった変換が可能だからだ。これまでウェブサイトとモバイ ルを同じように二重更新していたとしたら、情報更新の手間は激減するだろう。
■まとめ
これまで述べてきたように、CSS2＋XHTML/HTMLでの"分離型"サイトは、様々な悩みを解決してくれる。今後、先進ブラウザーの普及や新型制作ワークフロー体制の確立が進めば、より多くのメリットを享受できるようになるであろう。
事例では紹介していなかったが、実は「米Yahoo!（ http://www.yahoo.com/ ）」も"分離型"構造を採用した少数派サイトのひとつだ。このことからも見て取れるように、"分離型"は一時的な流行ではない。あっという間にウェブサイ ト構築のスタンダード仕様になるだろう。導入自体を悩むことはない、後はどのタイミングで取り組むかだけの問題であろう。
イー・エージェンシー（Dragon.jpグループ）では、自社およびお客様サイトにおいて、CSS2＋XHTML（分離型）のサイト構築を進めていま す。"分離型"導入に限らずSEO/アクセシビリティ/マルチディバイス対応などでお悩みでしたら、お気軽にお問い合わせください。（問い合わせ先： sales@e-agency.co.jp ）
MovableTypeの記事のパーミッション
パーミッションを644にするための方法は、
ヘルプの中にあった。
mt.cfgの中の
# DBUmask 0022
# HTMLUmask 0022
# UploadUmask 0022
# DirUmask 0022
のコメントをはずす。
デフォルトが0111だそうだ。
エンコーディング続き。 ～「福」マジック～
POSTされてきたマルチバイト文字を取得後UTF-8へ変換。
このときmb_detect_encodingを使って元エンコードを取得すると、
「福島」
「福岡」
「福井」
のエンコードがうまく取得されずに文字化けする。。。
他にもあるかも。
mb_detect_encodingの多用はヨクナイ。
このときmb_detect_encodingを使って元エンコードを取得すると、
「福島」
「福岡」
「福井」
のエンコードがうまく取得されずに文字化けする。。。
他にもあるかも。
mb_detect_encodingの多用はヨクナイ。