![閉じる [x]](http://dw1.s81c.com/i/c.gif){kind=small}
前回の記事で、Gentoo Linux Web サイトは全面的に装いを新たにしましたが、まだ本当に完全とはいえない点がいくつかあります。このシリーズの最終回となるこの記事では、サイトの最終的な仕上げを行い、将来を見越した、機能的にも申し分のない、洗練された、モジュラー XML ベースのサイトを作り上げます。前回の記事以降、サイトに欠けていたのは、次のような点です。
まず、サイトの装いは全面的に改められましたが、XML ベースなのはサイトの文書部分だけです。メインの「カテゴリー」ページは依然として生の HTML であり、内容をもっと整備、機能拡張しやすいものにするために XML/XSLT ソリューションに切り替える必要があります。
さらに、私の会社の開発者は生の HTML 自体に問題をいくつか発見しました。サイトは、Netscape 4.77 で表示すると特にひどい体裁になってしまいます。明らかにこれは問題です。また、新しいバージョンのブラウザーで生じるマイナーなレンダリングの問題が他にいくつかありますが、最も厄介なものはページ全体に完全に伸びきらない細くて黒い縦線です。この線のため、メイン・コンテンツ・エリアがフライング・ソーサーくんによって語られているという雰囲気を台無しにしてしまっています。その上、この文書ページは新しいメイン・カテゴリー・ページの洗練された外観にはまったく不釣合で、手を加える必要があるのは明らかでした。
Gentoo Linux サイトの最終手直しのプランは次のとおりです。まず、メイン・ページの HTML を全面的に修正して、全体的な外観はそのまま維持しながらも、ページのブラウザー互換性を高めます。同時に、ビジターから提案された表示に関する工夫を加え、既存の「guide」文書システムのブラウザー互換性の問題も修正します。
次に、サイトを完全に XML および XSLT に変換する予定です。この記事が終わるまでには、サイトに対する変更は、直接 HTML を編集するのではなく、XML または XSLT を修正することによって行われるようになり、xsltproc（参考文献を参照）を用いて自動的に生成されるようになります。このため、サイトの保守管理が一気に簡単になります。Gentoo Linux はコミュニティーの推進によるプロジェクトなので、こうすることで開発者（および私）が必要に応じてサイトを保守して改善することができます。多くの時間を節約し、ビジターを最新のコンテンツで迎えられるようにしてくれるので、大きな期待をかけています。
Netscape 4.x は依然として非常に幅広く利用されているブラウザーですが、このブラウザーで表示した際のサイトの見栄えをよくするために、どの程度の手間をかければよいか正確に判断するのは私にとって難しい問題です。大きな欠陥なく読める程度にサイトを改善するだけでよいのか、それともたとえ CSS をほとんど、あるいはまったく利用せず、既存の HTML に奇妙な互換性の応急処置を追加することになっても、完全無欠なサイトの外観を目指してあらゆる手を尽くすべきでしょうか。
結局私は、マイナーなバグに起因するテーブル・スペーシングやフォント表示の問題にあまり神経質にならずに Netscape 4.x でサイトが非常によい体裁になるように、HTML にいくつか大幅な変更を行うことにしました。すべてを 4.x 対応にするためにサイトの HTML に施した変更を一部ここで紹介します。(Gentoo Linux 開発チームは、こうした修正版をいくつか出しています)
第一に、Netscape 4.x には、ブロック要素の CSS 背景色を不正確に表示させてしまうバグがあります。たとえば、guide 文書の特定部分が本来次のように表示されるはずになっているとします。
図 1. A IE5 で表示されたサンプルの guide 文書
そして、背景色が CSS を使用して指定された場合に同じ部分を Netscape 4.x が表示すると次のようになります。
図 2. A Netscape 4.7 で表示されたサンプルの guide 文書；何らかの修正が必要
これはひどいものです。修正するために、次のような既存のブロックレベル要素が...
<p class="note">This paragraph doesn't look so good in 4.x</p> |
...次のようにテーブルで置き換えられました。
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td bgcolor="#ddffff"><p class="note">
This looks a whole lot better in 4.x</p></td>
</tr>
</table>
|
この応急処置は、背景表示の問題を修正してくれます。ただし、この「修正版」では、HTML に色情報を含める必要もあるので、そもそも CSS を使用するメリットを損なってしまいます。これは、特に私のような CSS のファンにとっては不幸な状況ですが、Netscape 4.x 対応のためには必要なのです。
ではここで、必ずしも画面の下まで伸びきらない黒い縦線の対処に取りかかりましょう。この問題については、4.x および 5.x ブラウザーの両方に効果のあるソリューションは見つけることができず、あらゆる 5.x バージョンが Netscape 4/x のバグを誘発し、あらゆる 4.x 互換バージョンが 5.x ブラウザーでひどい体裁になってしまいます。そこで私は、単純に黒い線をすべて取り除いてしまうことにしました。これでついに、普及しているあらゆるブラウザーでサイトはうまく機能します。次に、私はメイン・ページを作成するための guide のような構文を作成することにします。
メイン・ページにまったく新しいタグセットを導入する代わりに、できる限り多くの「guide」XML 文書タグを利用しようと試みることはなかなかのアイデアだと考えています（guide XML フォーマットの詳細については、このシリーズの第 2 回を参照してください）。そこで私は、guide XSL を作業のテンプレートとして利用し、新たな XSL を作り上げます。1、2 時間後には、guide のような構文を HTML メイン・ページに仕立てる XSL 変換のフル機能セットが得られます。新たなメイン・ページの改訂第 2 弾は、次のような体裁になります。
図 3. 新たなメイン・ページ改訂版
メイン・ページが新たな XML/XSLT バックエンドを使用するようになったので、私は「guide」システムの HTML 出力に注意を向けることにします。ホストの Netscape 4.7 互換性バグを修正する必要があることに加え、この新たに改訂されたメイン・ページの HTML とグラフィックスに適合するように、生成された HTML とグラフィックスを更新する必要もあります。すると、こんなアイデアが頭に浮かびました。「この新たなメイン・ページの XML/XSL をほんのわずかに微調整して、私の文書の HTML も生成できるようにしてみたらよいのでは」最終的に私は、ほとんどすべての「guide」XML タグのサポートを追加して、メイン・ページのコンテンツにも使えるようにしました。
このソリューションは、導入が非常に簡単であることがわかります。私は、左の「リンク・バー」を削除するように新しい XSLT ファイルを微調整し、文書ページを処理するときに出力 HTML に他のわずかな変更を行います。XSLT のほとんどはまだ同じなので、guide 文書とカテゴリー・ページの両方に 1 つのマスター XSLT テンプレートのセットを使用することができます。
図 4. 新たな XSL の仕組み
これで維持する XSLT テンプレートが 1 つのセットになったことに加え、両方の出力 HTML の体裁がいずれも同じマスター・ドキュメントをベースにしているため、同じ CSS スタイルシートを共用するようになりました。これはつまり、2 つの異なるスタイルシートと出力 HTML のセットの間で「外観の同期をとる」必要がないということです。さらに、ご覧のように、新しい文書 HTML は、新しいメイン・ページと完全な一致を見せています。
図 5. 新たなメイン・ページと完全に一致する新文書ページ
実際の導入はいとも簡単です。既存の guide XML 構文では、すべての文書が単一のマスター <guide> 要素の一部である必要があります。メイン・カテゴリー・ページのサポートを追加するため、私は新規マスター要素 <mainpage> を作成します。メイン・カテゴリー・ページを作成するため、すべてのものを <guide> 要素ではなく、<mainpage> 要素の中に収め、XSLT が出力に適切な変更を行います。これに加えて、必要な変更で大掛かりなものは、メイン・カテゴリー・ページ上のフローティング・テーブルの内容を指定するために使用されるオプションの <sidebar> 要素を追加することだけです。既存の<guide> XSLT テンプレートは、次のような体裁になります。
<xsl:template match="/guide">
<html> <head>
guide header goes here
</head>
<body>
top part of guide body HTML content goes here
<!--next, we insert our content-->
<xsl:apply-templates select="chapter" />
bottom part of guide body HTML content goes here
</body>
</html>
</xsl:template>
|
XSLT にあまりなじみがないという皆さんのために説明すると、このテンプレートは、<guide>
</guide> タグを HTML 文書のシェルと置き換えるよう XSLT プロセッサーに指示し、さらに <guide> 要素内の <chapter> 要素（開始/終了タグのペア）に循環的にテンプレートを適用して、結果として生じた出力を HTML シェルの中央に挿入するよう指示します。
ですから、メイン・カテゴリー・ページのサポートを追加するには、すべてのものが偶然単一の <mainpage> 要素に収められた場合に異なる HTML シェルが使用されるように指定する必要があります。これを行うために、私は次のように新たなテンプレートを追加します。
<xsl:template match="/mainpage">
<html>
<head>
mainpage header goes here
</head>
<body>
top part of mainpage body HTML content goes here
<!--next, we insert our content-->
<xsl:apply-templates select="chapter" />
bottom part of mainpage body HTML content goes here
</body>
</html>
</xsl:template>
|
他の XML 要素のほとんどすべて（<chapter>からずっと下のほうまで）が guide とメイン・カテゴリー・ページのいずれにも同一の HTML 出力を生成するので、他の XSLT テンプレートはほとんどすべて両方のタイプのページで共有することができます。したがって、2 つの「HTML シェル」を指定する単一の XSLT ファイルと XML-HTML XSLT テンプレートの共通セットでうまくやってゆくことができます。例によって、コードの再利用が好ましいことは確かです。
このシリーズの第 2 回で私が、cvs2cl.pl CVS Changelog 生成スクリプト（参考文献を参照）がXML 出力を生成することができ、最終的に新たな Web サイトに表示させる毎日の CVS Changelog ページの基準としてこの機能を利用したいと申し上げたことは、皆さんのご記憶にあるでしょうか。新たな XML バックエンドを備えれば、新規 Changelog ページを追加することはたやすい作業です。ここで、XML から HTML への変換の処理も扱ってくれる cvslog.sh スクリプトの機能強化バージョンを紹介します。
#!/bin/bash
#various paths
HOMEDIR=/home/drobbins
CVSDIR=${HOMEDIR}/gentoo/gentoo-x86
OUTLOG=${HOMEDIR}/gentoo/xmlcvslog.txt
OUTMAIL=${HOMEDIR}/gentoo/cvslog.txt
WEBDIR=/usr/local/httpd/htdocs
XSLTP=/opt/gnome/bin/xsltproc
TMPFILE=${HOMEDIR}/gentoo/xmlcvslog.tmp
USER=drobbins
#if $CVSMAIL is undefined, set it to "yes"
if [ -z "$CVSMAIL" ]
then
export CVSMAIL="yes"
fi
#the main script
cd $CVSDIR
cvs -q update -dP
yesterday=`date -d "1 day ago 00:00" -R`
today=`date -d "00:00" -R`
cvsdate=-d\'${yesterday}\<${today}\'
nicedate=`date -d yesterday +"%d %b %Y %Z (%z)"`
#generate cvs2cl.pl XML output
/usr/bin/cvs2cl.pl --xml -f $OUTLOG -l "${cvsdate}"
#use sed to remove "xmlns=" from cvs2cl.pl output
/usr/bin/sed -e 's/xmlns=".*"//' $OUTLOG > ${OUTLOG}.2
#convert cvs2cl.pl XML output to guide format using $XLSTP
$XSLTP ${WEBDIR}/xsl/cvs.xsl ${OUTLOG}.2 > $TMPFILE
#convert guide XML output to HTML format using $XLSTP
$XSLTP ${WEBDIR}/xsl/guide-main.xsl
$TMPFILE > ${WEBDIR}/index-changelog.html
#fix perms
chmod 0644 ${WEBDIR}/index-changelog.html
#automatically send cvs mail if $CVSMAIL is set to "yes"
if [ "$CVSMAIL" = "yes" ]
then
/usr/bin/cvs2cl.pl -f ${OUTMAIL} -l "${cvsdate}" mutt -x gentoo-cvs -s "cvs log for $nicedate" > ${OUTMAIL}
fi
|
このスクリプトは以前のバージョンに比べてかなり複雑なものになったような印象がありますが、実際には主要な行が 4、5 行追加されているだけです。その他の追加分は、コメントあるいは環境変数定義です。
ではここで、cvslog.sh スクリプトの新たな XML 関連部分がどのように機能するのか説明します。最初に、cvs2cl.pl を呼び出し、昨日修正されたすべてのファイルを含む XML ベースの Changelog を生成するようにこれに指示します。次に、この XML 出力が sed を通じて実行され、不必要なxmlns= 属性を XML から削除します。それから、このわずかに調整された XML をxsltproc に渡して、cvs.xsl で検出された処理を適用するようにこれに指示します。これらの命令は、XML 出力を cvs2cl.pl から適正な guide XML 文書に変換します。最後に、再びxsltproc を使用してこの guide XML 文書を Web 対応 HTML に変換しますが、これが我々の Web サーバーの htdocs ディレクトリーに渡されます。生成された HTML Changelog ページが全部そろい、次のような結果になります。
図6. 自動的に生成されたChagelogページ
cvs.xsl に含まれている XSLT の簡潔さに驚かれるかもしれません。この中で、<changelog>、<entry>、<file> の 3 つのテンプレートを指定します。さらに、（cvs2cl.pl が CVS コミッターのコメントを指定するために使用する）<date>、<author>、<msg> を始めとするソース XML 内の他のタグについてもいくつか触れておきます。cvs.xslは、ほんの 35 行ほどの長さであることを考えれば、かなりの作業を行ってくれます。
リスト 6. cvs.xsl を参照してください。
Gentoo Linux Web サイトの再設計を始めてからというもの、ユーザー中心のアクション・プランを作成し、新たな XML ベースのドキュメンテーション・システム、新しいロゴ、サイトの斬新な装いを設計し、残りのすべての部分を XML に変換して、新たな XML ベースの Changelog ページを追加するという作業に携わってきました。やれやれ。皆さんがこれまでの経過を楽しみ、途中で豊富なアイデアとひらめきに恵まれたのであれば幸いです。再設計に関する詳細とコードについての説明を求める声がありましたので、特集 Gentoo Linux XML Projects ページを開設して、ここに www.gentoo.org で使用した最新の XML、XSLT、スクリプト、ドキュメンテーションを掲載しています。この Projects ページに加えて、次の貴重な参考文献もぜひご覧ください。
-
http://www.gentoo.org で、装い新たなサイトをご覧になり、Gentoo Linux について理解を深めてください。
- Gentoo Linux guide XML システムを独自のプロジェクトの基礎として利用することに関心をお持ちであれば、Gentoo Linux XML Projects ページをぜひご覧ください。ここには最新の XML/XSLT 関連情報がすべて掲載されています。
-
IBM developerWorks XMLゾーンをご覧になって、ビギナーにもエキスパートにも参考になる豊富な記事、チュートリアル、ヒントをご確認ください。
- Daniel の「サイトを生き返らせる」シリーズをお読みください。
- World Wide Web Consortium（W3C）の CSS ページをご覧になって、CSS（カスケーディング・スタイル・シート）について理解を深めてください。XML、XSLT、および他の多数のテクノロジーについての詳細も参照できます。
- Xara X に関しては、ホームページXara.com を参照してください。Xara X は Windows 用のすばらしいベクトル・ドローイング・パッケージです。ほとんど無駄な部分がなく非常に高速なため、私のお薦めです。
- XSLT の詳細については、http://www.xslt.com を参照してください。
- ドラマ、ロマンス、サスペンス、こうしたものは、The Handbook of User-Centred Design からは得られません。しかし、ユーザー中心のデザイン哲学に関するすばらしいガイドラインならば、きっと見つかります。居眠りする前に最初の数章を読んでみてください。
- 目を覚ましたら、Sablotron について調べてみてください。http://www.gingerall.com から入手できる高速の優れた XSLT プロセッサーです。
- IBM の Ease of Use site では、技術革新、ユーザー中心の設計、ガイドライン、事例、技術、その他製品やサービスに関する全体的なユーザー経験の向上に役立つ参考資料を提供しています。
- IBM はユーザー中心の設計に関するトレーニング・コースを提供しています。詳細に関してはこちらを参照してください。
ニューメキシコ州アルバカーキ在住 の Daniel Robbins は、Gentoo Technologies,Inc. の社長兼 CEO で、PC 用の高機能 Linux である Gentoo Linux と、Linux 用の次世代ポート・システムである Portage system の作成者です。彼はまた、Macmillan 社の Caldera OpenLinux Unleashed、SuSE Linux Unleased、および Samba Unleashed の執筆陣のメンバーでもあります。Daniel は、2年生のときに初めて Logo プログラム言語に触れ、ほとんど中毒ともいえるほど Pac Man をやりすぎて以来、何らかの形でコンピューターにかかわってきました。彼がその後 SONY Electronic Publishing/Psygnosis で主導的なグラフィック・アーティストとして活躍しているのは、おそらくそのあたりに原因がありそうです。Daniel は妻の Mary と娘の Hadassah と一緒に過ごす時間を楽しんでいます。
タグ
スライダーバーを使用することで、より多く（少なく）タグを表示します。
人気のタグは、この特定のコンテンツ・ゾーン（例えば、Java テクノロジー、Linux や WebSphere など）に対するトップのタグを表示します。
マイ・タグは、この特定のコンテンツ・ゾーン（例えば、Java テクノロジー、Linux や WebSphere など）に対するお客様ご自身のタグを表示します。
記事の人気タグ |
記事のマイ・タグタグ・リストへスキップ
記事の人気タグ |
記事のマイ・タグ