Netscape DevEdge がW3C標準のショーケースとして再デビュー
初めに
Netscape DevEdge チームは、、高度な CSSやXMLの技術を使ってW3C標準に準拠したクロス・ブラウザのサイト作成をすることを目的としている世界中のウェブ開発者の役に立つことを考え、比較的短期間に大掛りなサイトの再デザインを実行しました。この再デザインの目的は、下記のようなことを実例で示すことにあります：
- クロス・ブラウであり、標準ベースのレイアウトやデザインの色々なテクニック
- 標準準拠で作成されたサイトのデザインがアクセシビリティの観点から利点のあること。
- ユーザに楽しんでもらえるユーザ経験ができるサイトを簡単に作成できること。
この再デザインは私達のチームが時折議論してきたことですが、2002年10月に再デザインされた wired.com を作成した Douglas Bowman さんの仕事に大変影響されたことも認めざるを得ません。(Bowman さんのインタービュ記事を読めばもっと詳しい情報が得られますので、ご参照ください。) ある意味でここで私達がやろうとしていることはこのデベロッパー向けのサイトでCSSを主に使用したレイアウトとクリーンなマーク付けで何が可能で何が可能ではないのかを探る最先端技術の試みといっていいと思います。
サイトユーザへの利点
- アクセシビリティを考慮したコンテンツ： テキストや項目の順序がスクリーン・リーダ、や小型デバイス、その他のユーザ・エイジェントでも利用できる。
- 高度のパーフォーマンス：複雑なテーブルやマーク付けのない軽い、速くロードするページでユーザ経験を向上する。
- カスタマイズできる：ユーザはDevEdgeを閲覧するのに自分の好みのテーマやフォントサイズを選ぶことができる。
チャレンジ
このプロジェクトを起こすにあたって幾つかの基本的なゴールがありました。それらは、
- XHTML 1.0 Transitional と CSS を使うことによってページのダウンロードを速めたりアクセシブルなコンテンツを提供するサイトにする。
- テンプレートが簡単に変えられるように簡単なマーク付けを使用する。
- 全文書の長さを平均25%削減する。
- レイアウトと見た目を中央集権的に制御する。
- ページのレイアウトを簡単な CSSのポジションニングで達成する。
- 特別なコードやブラウザ分別コードを使用せずにアクセシビリティを劇的に向上する。
現時点の自己評価は上記の6つのゴールのうち4つまでを達成したということです。恐らく5つ目も殆ど達成しています。現在適っていないのは、XHTML 1.0 Transitional を使うこと、そして文書の長さを平均25％減少させることです。
XHTMLを使用していない理由は？これは主にこのサイトの昔のコンテンツが HTML 4.xで作成されたもので、これらを全て変換するのは時間的にも有益ではないと判断したからです。その代わり、 HTML 4.01 Transitional を使うことにしました。このように古い HTML 4.xのコンテンツを残している事情からこのサイトの全てのコンテンツはW3Cの標準に対して検証されません。これらの古い文書も徐々に「掃除」をして行き、最終的には全て標準に照らし合わせて検証できるサイトにする計画です。
ページの長さを削減するゴールは野心的なものでした。ゴールには近くなったのですが、目的の5割程度で終わっています。その主な理由は以前から結構「痩せた」マーク付けだったからです。テーブルは使っていましたが、構造がすでに極めて単純化されたものだったのです。厳密に言えば、全てのページに使用される「テンプレート」のマーク付けだけならば、このサイトのナビゲーションをここまで便利にしなければ、50%の削減が達成できたはずなのです。この後者の点については又後で触れます。
デモに値する主要な仕様
ユーザの皆さんがお試しになれる新しい仕様を幾つか述べてみます：
デモ 1: ユーザが選択できるページのスタイル
ユーザがコントロールできるルック・エンド・フィールを見せるために、「スタイル・スイッチ」を使うことにしました。これでユーザは4つのテーマから選べことができ、デフォルトのフォントのサイズも変えることができます。 この効果を可能にしているのは基本的には Paul Snowdon さんの JS スクリプトですが、幾つかこのサイト用にカスタマイズしたところもあります。 もっと複雑なカスタマイゼーションも考慮しました。例えば、任意の要素をユーザの定義する色にする等です。しかし、最終的には比較的単純なデザインを使うことに落ち着きました。より高度なカスタマイゼーションも将来的に考えています。
ユーザがテーマを選択するとそのチョイスはnde-styleと呼ばれるクッキーに保存されます。このコンセプトを拡張すればこのサイトの違ったセクション毎に
スタイル・シートを保存することも可能ですし、ユーザの好みに合わせてサイトのレイアウトを殆ど完全に変えてしまうスタイル・シートを作ることも可能です。
同様なメカニスムでフォント・サイズを覚えておくことができます。クッキーの名前はnde-textsizeと言います。
デモの試し方：
- 「テーマ/スキン」のボタンの上にマウスを置いて、好みのテーマを選びます。
- + か - のキーをクリックしてフォントサイズを変えます。R をクリックすると元のサイズにリセットされます。
デモ 2: クロス・ブラウザ ダイナミック HTML メニュー
クロス・ブラウザなメニューの利点を謳歌することは簡単ですが、実際に高度 CSSのテクニックを使ってを書き始めると、さほど標準準拠でもない古いブラウザをサポートする為にしなければいけない努力の苦しさが良く分かりました。 完全に CSS のみのメニューと従来の JavaScriptを使用するメニューをいろいろと試した結果、DevEdge チームは高度 CSS に加えて JavaScriptを使用するというテクニックで Netscape Gecko、Internet Explorerそして Operaできれいに作動するメニューを作ることに成功しました。
このアプローチの一番の利点はメニューのマーク付けが入れ子の順不同リストに基づいていることです。これにより、マーク付けは軽いものになり、ビジュアルではないブラウザ、或いは携帯電話、パームなどの他のデバイス用の構造としても使えるからです。この実装を行うにあたって、私達は css/edge の「純粋 CSSメニュー」のデモと gazingus.org にある ダイナミック HTML メニューを参考にして、更に向上しました。 これにより比較的簡単にスタイルを変えることができて、複数のブラウザで利用可能な「軽い」JavaScriptを使ったメニューができ上がりました。 更に、JavaScriptの使用がＯＦＦになっているブラウザでも、CSS-2 標準に準拠したブラウザであればこのメニューは作動します。私達の経験から学び、あなたのサイトもこのコードを使用して向上させることができますので、ご利用ください。
デモの試し方：(英語版のページのみ）
- Netscape 7.x, IE 5.5以上, そして Opera 7以上のブラウザで英語版のホームページページなどの最上部のナビゲーション メニューの上にマウスを置きます。
- JavaScript を無効にする：初期設定でブラウザでは JavaScriptを使わないように設定しても、Netscape 7.x や Mozilla 1.0以降では メニューはちゃんと作動します。これは高度な CSS2 のサポートが Gecko レイアウトエンジンに含まれているからです。
デモ 3: アクセシビリティとユーザビリティを考慮にいれた構造
現行の再デザインの大きな目標の一つは以前にも増して DevEdgeのコンテンツをアクセシブルにするということでした。このゴールを可能にするために、デザイン・チームは最初から CSS のポジションニングを使ってレイアウトをすることに決めていました。これにより、ビジュアルにリッチなコンテンツを提供すると共に線的なアクセスしかできないノンビジュアルなスクリーン・リーダーのようなデバイスにも利用できるサイトにでき上がっています。
例を上げれば、最近のブラウザで見ると「検索」と「テーマ/スキン」のボックスは隣合わせに見えます。文書のソースを見ますと、「検索」は最上部のイメージのマストヘッドの一部であり、文書の最初の辺にあります。これに比べて、「テーマ/スキン」はページの最後のフッターの部分の前にあります。同様に、マストヘッドの直ぐ下にくるナビゲーション用のメニューはソースではページの全コンテンツの後にあります。
このサイトの見た目はページのソースの要素などの順序とは大幅に違っているために、DevEdgeは以前にも増してCSSを使わない無線や他のオルタナティブなブラウザでも利用できるようになっています。しかも、サイトの全レイアウトはマーク付けをノータッチで大幅に変えることができます。つまり、スタイルを修正してビジュアルな部分をいくら変えても、アクセシビリティはそのまま保持できるということになります。
更に、「記事」カテゴリーの文書を印刷するときにはプリント・フレンドリーなスタイル・シートが自動的に応用されます。[訳者注：西洋語のページにはこの機能をチェックするリンクが右下のボックスにありますが、日本語のページには現在リンクが存在しません。しかしこの機能自体は作動しています。] 印刷の時にはハイパーリンクをリンクのテキストの後に現すようになっていて、ウェブページ同様に印刷後もリンクが見れます。
デモの試し方：
- ページのソースを吟味して上記の説明を確認してください。
- アクセシビリティを WAVE Web アクセシビリティ検証ツールで検証してみてください。
- それから、ページをローカルドライブに保存してみてください。そこで色々な違ったリーダーやブラウザを使ってナビゲーションを試してください。テキストは有用に表示されるはずです。更に、同様な効果がスタイル・シートを無効にできるブラウザやCSSをサポートしていないブラウザでも出るようになっています。
- 「記事」カテゴリーの文書を印刷してみてください。ウェブページでは表には見えていない URL も印刷されるはずです。
その他の仕様や利点
表には現れていませんが、再デザインプロジェクトは他にも沢山の向上点があります。例えば：
- 自動的に RSSのデータフィードを生成している：これにより、新DevEdgeサイドバーや他の外部ニュース・フィードに自動的にニュースを配布できます。
- 自動的 PDFファイル生成： 記事の元となっている XMLのファイルを変換することにより自動的に Acrobat用の PDF ファイルを生成できます。
- 簡略なスクリプト： このサイトのスクリプトはそのまま複数のブラウザで作動します。このため、ブラウザ判別を極度に避けることができます。必要なのはJavaScriptを理解しない古いブラウザがスクリプトを見ないようにする判別だけです。
- より簡単で、より柔軟性のあるデザイン プロセス： CSSの使用により、文書の構造と表現を切り離すことに成功しているので、デザインを簡単に変えることもできます。一つのレイアウト デザインをベースにしてそのテーマバリエーションとして劇的に違ったものを簡単に提供することもできます。このような劇的なりスタイリングの例としては、nitot.comの標準に関するブロッグ、adactio.com の日記、alltheweb.comの検索エンジンなどがあります。
- コンテンツの再使用： テーブルを使用しないデザインにより、PC以外のデバイスにも対応しています。全てのユーザに同じマーク付きを提供できます。
- 地方化の簡易：違った言語のページを追加するのは特定言語用のCSSやテンプレートを使用することで、比較的簡単にできます。
このような向上はユーザ経験に直接のインパクトがないとしても、私達 DevEdge を維持するチームにとってはサイトをスムースに運営することに非常に役に立ち、このサイトの情報を世界の更に多くの人に見てもらうことができるという大きな利点があります。
ブラウザ互換性について
基本的にはどのブラウザでも DevEdge にアクセスできます。しかしながら、ビジュアルの観点からは DevEdge は最近の標準準拠のブラウザで最も効果を発する技術を使用しています。どのユーザ・エイジェントでもコンテンツは完全に閲覧できます。しかし、このサイトの CSS レイアウトは下記のブラウザやプラットフォームで特にその高度な仕様が利用できます。
設定：このサイトのデザイン効果をフルに楽しんでいただくには、クッキーと JavaScript 使用をＯＮにしておく必要があります。特にテーマ・スイッチはこれらが必要です。JavaScript を無効にしていても Netscape 7 以上 Mozilla 1 以上ではセクション・インデックスや CSSベースのメニューを通してサイトをナビゲートできます。
注意書き： 既知のバグや不完全な W3C CSS, DOM 標準の実装の為に、これらや他のブラウザで些細な問題があることはご了承ください。最近の標準を利用するために、また、7.xのユーザが劇的に増えている状況から、更にNetscape 4.x バージョンのブラウザのユーザが極端に減っていることからも、 4.x 用に特別処置をしないことに決定しました。Netscape 4.x をご使用のユーザもコンテンツを閲覧することはできますが、スタイルの効果は見れません。
- ビジュアル上のブラウザ間のレイアウト互換性：
- Netscape 6 以上 (全てのプラットフォーム)
- Mozilla 0.8 以上 (全てのプラットフォーム)
- Internet Explorer 5.5 以上 (Windows)
- Internet Explorer 5.0 以上(Macintosh)
- Opera 6 以上 (Windows)
- Javascriptベースのドロップ・ダウンメニューのブラウザ互換性：
- Netscape 7 以上 (全てのプラットフォーム)
- Mozilla 1.0 以上 (全てのプラットフォーム)
- Internet Explorer 5.5 以上(Windows)
- Opera 7 以上 (Windows)
上記以外のブラウザ/プラットフォームでこのサイトが効果的に閲覧できるときとか、サイトのクロス・ブラウザ用のコードの向上案とか、その他のフィードバックがありましたら、ご自由にお寄せください。
技術的な詳細
Netscape DevEdge で使われている CSS や JavaScript のコードを通して、このサイトを構築した過程での決定事項やそのプロセスをもっと学ぶことができます。