|
|
この章では、ポータル フレームワークを使用して、Workshop for WebLogic で開発するポータルの外観と動作全体を開発する方法について説明します。ブラウザにポータルを表示し、目的の結果を得るには基本となるフレームワークのどの部分を変更する必要があるかがわかるようになります。さらに、ルック アンド フィール エディタについても説明します。ルック アンド フィール エディタを使用すると、ポータルで使用するテキスト スタイルを対話形式で変更できます。
WebLogic Portal の表示フレームワークの中心は、ルック アンド フィール フレームワークです。ルック アンド フィールによって、ポータル ページの要素の配置と動作からポートレット タイトルバーに使用されるカラーに至るまで、ポータル アプリケーションの外観が決まります。
ポータル開発者はアプリケーション コードを使用して、ポータル管理者はステージング環境とプロダクション環境で、さらにエンド ユーザはプロダクション環境で、強力なレベルでユーザ インタフェースをカスタマイズできる WebLogic Portal の訪問者ツールを使用して、動的なポータルの表示フレームワークの一部として、ルック アンド フィールを変更できます。
ルック アンド フィール フレームワークに含まれる主な要素を次に示します。
この節では、各コンポーネントについて簡単に説明します。以降の節では、これらのコンポーネントを作成し、操作する方法について説明します。
ルック アンド フィール ファイル (.laf) は XML ブロックで、.portal XML ファイルのあらゆる場所に挿入されます。ルック アンド フィール ファイルは比較的単純です。このファイルは特定のスキンとスケルトンを参照します。図 7-1 に示すように、スキンは、画像のセット、JavaScript 関数、CSS ファイルを提供し、これらはスケルトン JSP が参照します。スケルトン JSP は、ポータル XML コンポーネントを最終的な HTML 出力に変換します。
ポータルに対して別のルック アンド フィールを選択すると、ポータルの表示に使用されるスキンとスケルトンも場合によっては変更されます。
オプションで、ルック アンド フィール ファイルは、スキンおよびスケルトンのクロモソームを参照することもできます。これについては後ほど説明します。
スキンは、デスクトップ インタフェースのすべてのコンポーネントによって使用される全体的なカラー、グラフィック、およびスタイルを提供します。WebLogic Portal の視点から見ると、スキンは画像、カスケーディング スタイル シート (CSS)、および JavaScript ファイルの組み合わせで、これによってポータル コンポーネントを直接変更することなく、ポータルのルック アンド フィールを変更できます。画像およびスタイルに対する参照は、ポータル定義にハードコードするのではなくスキン内で行います。
ポータル XML を HTML に変換するスケルトン JSP には、特定の画像名 (ポートレット タイトルバーのボタンなど)、CSS スタイル、および JavaScript 関数の参照が含まれています。
ポータルの表示フレームワークは、ポータル ファイルを構成する XML をエンド ユーザがブラウザで表示する HTML に変換します。HTML への変換は JSP を介して行われます。これらの JSP がスケルトンを構成します。
スケルトンは、ポータル コンポーネントの物理的な境界を設定し、ポータルの表示に必要なスキンの画像、CSS クラス、および JavaScript 関数を参照します。1 つのポータル Web プロジェクトに複数のスケルトンを設定できます。デスクトップ用のルック アンド フィールを選択すると、特定のスキンとスケルトンが使用されます。
デスクトップからポートレットのタイトルバーに至るまで、ポータル コンポーネントの各タイプには、そのコンポーネントを表示するスケルトン ファイルと呼ばれる JSP ファイルが関連付けられます。スケルトン ファイルには、単純なものと複雑なものがあります。たとえば、各デスクトップは、デスクトップを表示する開始 <HTML> タグと終了 <HTML> タグを提供する shell.jsp というスケルトン ファイルを使用します。これに対して、ポートレット タイトルバーは、より複雑な titlebar.jsp というスケルトン ファイルを使用します。このファイルは、タイトルバーに使用するボタン グラフィックを参照し、タイトルバーの要素の相対的な位置を決定するロジックを含みます。
テーマは、ブック、ページ、またはポートレットのルック アンド フィールをオーバーライドする方法を提供します。これにより、これらのコンポーネントの表示および動作を、その他のポータル デスクトップのルック アンド フィールとは異なるものにすることができます。たとえば、ポートレットにテーマを設定して、ポートレットの境界線をギザギザの付いた線で表示したり、ポートレットのタイトルバーを赤に変えたり、別のポートレット タイトルバー ボタンを表示したりできます。
スキンとスケルトンの両方で、またはそのうちの一方でテーマを使用できます。上記の例では、スケルトンのテーマがギザギザの付いたポートレットの境界線を制御し、スキンのテーマに変更した CSS とタイトルバーのイメージを含めます。
スキンとスケルトンのテーマは、通常のスキンとスケルトンと同じリソース タイプで構成されます。通常、テーマ スキンおよびスケルトンは、ルック アンド フィール全体をオーバーライドするのに必要なファイルだけを提供しますが、完全なルック アンド フィールをテーマとして使用することもできます。また、テーマをルック アンド フィールとして使用することもできます。図 7-2 は、テーマに含まれるリソース タイプを示します。
たとえば、アラート テーマが titlebar.jsp というスケルトン ファイルを提供する場合、ポータル フレームワークは、親スケルトンの titlebar.jsp ファイルではなく、このスケルトン ファイルを使用します。
ルック アンド フィールのオプション機能であるジーンは、ルック アンド フィールの操作において、さらに高度なレベルの柔軟性、制御、および保守の容易性を提供します。ジーンは、CSS カラー プロパティなどの、ルック アンド フィールの特定の特性を定義します。これは、ルック アンド フィールで変数として参照できます。
たとえば、ルック アンド フィールに wlp.portlet.border.color という名前のジーンが定義されている場合、文字による色の定義ではなく、このジーンの名前を CSS ファイルで使用できます。このジーンの色の値が #ff0000 と定義されている場合、このジーンの変数を使用する CSS はこの色の値を取得します。ジーンの定義で色の値を変更するだけで、このジーンを使用するすべての CSS ファイルが自動的に更新されます。
クロモソームとは、1 つまたは複数のジーンを含むファイルです。名前が同じで値が異なるジーンを含む複数のクロモソームファイルを作成できます。ルック アンド フィール ファイル内の異なるクロモソームを参照するだけで、コア ルック アンド フィール ファイルを変更せずに、完全に異なるルック アンド フィールをシミュレートできます。
また、JavaScript 関数でジーンを使用することもできます。
ジーンの使用は、ルック アンド フィールにおいて以下の利点があります。
シェルは、ポータルのヘッダ領域とフッタ領域を定義します。シェルにポートレット、JSP、および HTML ファイルを組み込んで、ヘッダまたはフッタに表示するコンテンツを定義できます。
ポータル ページで使用するレイアウトは、ページ内のポートレットおよびブックの配置場所を決定する構造を提供します。レイアウトは、たとえば HTML テーブルまたは CSS ベースのアプローチを使用して実装できます。
メニューは、ポータル ページで使用するナビゲーション スタイルを決定します。WebLogic Portal は、2 種類のメニューを提供しています。1 つは、単一レベルの 1 行分のタブで、もう 1 つは、複数レベルのネストされたドロップダウン形式のページ ナビゲーションです。
WebLogic Portal は、アプリケーションで使用できるデフォルトのルック アンド フィールをいくつか提供しています。これらの既存のルック アンド フィールを必要に応じて変更することもできますし、独自のルック アンド フィールを作成することもできます。
この節では、カスタム ルック アンド フィールを開発する方法について説明します。ただし、既存のルック アンド フィールをわずかに変更するだけで要件が満たされる場合は、カスタム ルック アンド フィールを開発する必要はありません。「既存のルック アンド フィールのオーバーライド」を参照してください。
GroupSpace アプリケーションに対するデフォルトのルック アンド フィールの変更方法や、新しいルック アンド フィールの作成方法については、『GroupSpace ガイド』を参照してください。
WebLogic Portal 8.1 で作成したルック アンド フィールは、9.2 ポータル Web プロジェクト (の適切なディレクトリ) にインポートするだけで使用できます。ジーンなどの新しい機能を使用しない場合は、従来のルック アンド フィールをアップグレードする必要はありません。
従来のルック アンド フィールをアップグレードするには、Workshop for WebLogic Platform 9.2 で、ポータル Web プロジェクトから .laf ファイルを開きます。このようにすると、9.2 で使用される skin.xml ファイルおよび skeleton.xml ファイルを作成するようメッセージが表示されます。これらの新しいファイルを作成することで、WebLogic Portal の新しいルック アンド フィール機能を使用する準備ができます。
| 注意 : | WebLogic Portal 8.1 では、skin.properties ファイルにもテーマの設定を含めることができました。WebLogic Portal 9.2 では、テーマはスタンドアロンのルック アンド フィールで、独自の skin.xml ファイルを使用します。WebLogic 8.1 の skin.properties ファイルに、WebLogic 9.2 のルック アンド フィールで再利用するテーマの詳細が含まれている場合は、これらのテーマ設定をテーマの skin.xml ファイルに手動で追加する必要があります。 |
新しいルック アンド フィールを作成する場合、既存のルック アンド フィールを新しいルック アンド フィールの基礎として使用します。既存のルック アンド フィール、特に WebLogic Portal の定義済みルック アンド フィールのいずれかを使用することで、ポータルを適切に表示するために必要な必須ルック アンド フィール ファイルを用意できます。
ルック アンド フィール ファイルを作成する前に、新しいルック アンド フィールの最良の基礎として使用できる既存のスキンとスケルトンを決定します。
ルック アンド フィールを作成するには、次の手順を実行します。
このウィンドウで、新しいルック アンド フィールの基礎として使用する既存のルック アンド フィールを選択できます。次の指示をガイダンスとして使用してください。
大量のスキンまたはスケルトン、あるいはその両方でオーバーライドを行う場合は、以下の指示に従います。
このオプションは、スキンのみ、スケルトンのみ、あるいは両方に使用できます。
比較的少ないスキンやスケルトンを選択したスキンやスケルトンにオーバーライドする場合は、以下の指示に従います。
たとえば、新しいルック アンド フィールの基礎として「クラシック」スキンを使用し、<your_skin>/images/titlebar-button-edit.gif ファイルだけを作成した場合、このグラフィックはクラシック スキンのグラフィックをオーバーライドします。その他すべてのクラシック スキンのリソースがルック アンド フィールに使用されます。
各ルック アンド フィールには skin.xml と skeleton.xml ファイルがなければなりません。
以降の節では、ルック アンド フィール エディタの操作を含む、新しいルック アンド フィールの操作について説明します。
スキンとは、ボタン グラフィック、テキスト スタイル、色、マウスオーバ動作、およびその他の要素のポータルでの表示方法および動作方法を定義する、グラフィック、カスケーディング スタイル シート (CSS)、および JavaScript です。スキンは、スケルトンと組み合わせられて、ポータル デスクトップのルック アンド フィールを構成します。
各スキンには、スキン リソースを含む独自の /images、/css、および /js (JavaScript) サブディレクトリがあります。ルック アンド フィールの画像、CSS ファイル、および JavaScript ファイルを作成し、これらのディレクトリに格納します。また、スキンのルート ディレクトリ以外の共通の場所にグローバル ルック アンド フィール リソースを格納することもできます。スキンは、スキンのルート ディレクトリに格納された skin.xml ファイルに基づいて、どのリソースを使用するか認識します。skin.xml は、ルック アンド フィールで使用される画像、CSS、および JavaScript ファイルの検出用のパスをスキンに通知します。
skin.xml ファイルをコンフィグレーションする場合は、次のガイドラインに従ってください。
<skin>
<images>
<search-path>
<path-element>images</path-element>
<path-element>../default/images</path-element>
</search-path>
</images>
</skin>
このブロックは、スキンの画像サブディレクトリを調べ、そのディレクトリで見つからないファイルについては、デフォルト スキンの画像ディレクトリを探すようにスキンに指示します。
<html>
<scripts>
<script src="my.js" type="text/javascript" />
<search-path>
<path-element>js</path-element>
<path-element>../default/js</path-element>
</search-path>
</scripts>
</html>
JavaScript 関数を HTML 出力にインライン化する場合は (ジーンを使用する場合など)、以下のエントリ タイプを使用します。
<html>
<scripts>
<script content-uri="my.js" type="text/javascript" />
</scripts>
</html>
<html>
<scripts>
<script type="text/javascript">
alert("Hello World!");
</script>
</scripts>
</html>
<html>
<styles>
<style content-uri="my.css" type="text/css" />
<search-path>
<path-element>css</path-element>
<path-element>../default/css</path-element>
</search-path>
</styles>
</html>
<html>
<styles>
<style type="text/css">
.bea-portal-body
{
margin: 0px;
padding: 0px;
background-color: #ffffff;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #000000;
}
</style>
<search-path>
<path-element>css</path-element>
<path-element>../default/css</path-element>
</search-path>
</styles>
</html>
以下に structure.xml ファイルのサンプルを示します。
<?xml version="1.0" encoding="UTF-8"?>
<structure xmlns="http://www.bea.com/servers/portal/framework/laf/1.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.bea.com/servers/portal/framework/laf/1.0.0 laf-structure-1_0_0.xsd">
<specializations>
<localizations>
<localization locale="ja"/>
</localizations>
<classifications path="classifications">
<classification name="nokia"/>
<classification name="mozilla"/>
</classifications>
</specializations>
<themes>
<theme name="red_theme" path="../../redtheme"/>
<theme name="holiday" path="holiday"/>
</themes>
</structure>
| 注意 : | スケルトンは、CSS スタイル名、JavaScript 関数、画像名などのルック アンド フィール リソースの名前をハード コーディングします。リソース名をデフォルトの名前から変更する場合は、スケルトン JSP 全体でこれらの名前を変更する必要があります。 |
ポートレットのタイトル バーで使用するアイコンのグラフィックは、スキンの /images ディレクトリに格納します。ポートレットの異なる状態とモード (最小化、最大化、ヘルプ、編集) でこれらのグラフィックのうちどれを使用するか指定するために、これらのグラフィックの名前を、ポータル Web プロジェクトの WEB-INF/netuix-config.xml ファイルで宣言します。ポートレットのタイトル バー アイコンで使用するグラフィックの名前を変更する場合は、ファイル名と netuix-config.xml にあるそれらのグラフィックの対応するエントリを変更します。
ポータル デスクトップは、ブック、ページ、ポートレットなどの相互に階層構造の関係にあるポータル コンポーネントの集合です。 (ブックには、ページ、ページにはポートレットなどが含まれます)。ポータル コンポーネントの大部分は XML ファイルで、ブラウザでそれらを表示するには HTML への変換が必要です。この表示はスケルトンの機能です。
各ポータル コンポーネントには、<web_project>/framework/skeletons ディレクトリに 1 つまたは複数の対応するスケルトン JSP ファイルがあります。たとえば、ポートレットのタイトルバーには、そのタイトルバーを表示する、対応するスケルトン JSP ファイルがあります。ポータル デスクトップが表示されると、各ポータル コンポーネントのスケルトン JSP は (関連するクラスと共に) ロジックを実行し、作成される HTML を HTML ファイルの階層の適切な位置に挿入します。
スケルトンは、スキンと組み合わせられて、ポータル デスクトップのルック アンド フィールを構成します。ポータル デスクトップのルック アンド フィールを選択すると、ルック アンド フィールは使用するスケルトンとスキンをポイントします。
スケルトン JSP を開くと、<render:beginRender> セクションと <render:endRender> セクションがあることがわかります。表示プロセス中、各スケルトンは 2 度呼び出されます。これにより、HTML 階層が適切に構築されます。たとえば、ポートレット タイトル バー自体の beginRender セクションが出力され、その後、タイトル バーの子であるボタンの beginRender セクションが出力されます。ボタンには子がないので、ボタンの endRender セクションがその後出力されます。最後に、すべてのボタンが完全に表示された後で、タイトル バー自体の endRender セクションが出力されます。
また、スケルトンは、WebLogic Portal API を使用して特定のタイプの情報を取得します。たとえば、選択したコンポーネントのプロパティ ビューに開発者が入力したプレゼンテーション コンテキストやスタイル オーバーライドなどの情報です。
要約すると、スケルトン JSP は、API コール、JSP タグ、および HTML の断片を結合して、最終的に HTML でポータル デスクトップを表示します。
WebLogic Portal は、提供しているルック アンド フィールで一連のスケルトンを提供しています。この節では、独自のルック アンド フィール用の独自のスケルトンを開発する方法について説明します。たとえば、特定のモバイル機器で適切な表示を行う必要がある場合など、独自のスケルトンを作成する必要があります。
作成する各スケルトン専用の skeleton.xml ファイルを、そのスケルトンのルート ディレクトリに格納する必要があります。
独自のスケルトンを開発する場合は、次のガイドラインに従ってください。
<skeleton>
<render-format>
<preset>HTML_4_01_TRANSITIONAL</preset>
</render-format>
</skeleton>
<preset> 要素で使用できる値は、XHTML_1_0_STRICT、HTML_1_0_TRANSITIONAL、HTML_4_01_STRICT、HTML_4_01_TRANSITIONAL、HTML_4_01_STRICT_NO_SYSTEM_ID、HTML_4_01_TRANSITIONAL_NO_SYSTEM_ID、HTML_3_2、および NONE。
<content-type-overrides>
<override classification="nokia" content-type="application/xhtml+xml" />
</content-type-overrides>
ここで、classification は WEB-INF/client-classifications.xml で定義されたデバイス タイプの名前です。content-type では値「text/html」も使用できます。
テーマを使用することで、ポータル デスクトップの個々のブック、ページ、およびポートレットのルック アンド フィール全体をオーバーライドできます。これにより、「テーマ化」したこれらのコンポーネントの表示および動作を、ポータル デスクトップのその他のコンポーネントとは異なるものにすることができます。また、WebLogic Portal のマルチチャネル フレームワークと組み合わせて使用する、モバイル機器などの特定のデバイス用のルック アンド フィールをテーマを使用して開発できます。
また、以下の手順に従ってルック アンド フィールの .theme ファイルを作成すれば、ルック アンド フィールをテーマとして使用できます。
また、テーマを完全なルック アンド フィールとして使用する場合は、テーマ ディレクトリに structure.xml を作成することもできます。
ルック アンド フィールの /skin および /skeleton ディレクトリで structure.xml ファイルを使用しない場合は、これらのスキンおよびスケルトンのサブディレクトリとしてテーマを格納します。
| 注意 : | ユニークなリソースを作成する場合は、親スキン、親スケルトン、テーマ スキン、テーマ スケルトンのいずれかで、それらのリソースを参照する必要があります。 |
テーマの作成後、選択したブック、ページ、またはポートレットのプロパティ ビューでそのテーマを選択できます。
ジーンは、CSS スタイルまたは JavaScript ファイルに変数として挿入された単純なテキスト文字列として実装されます。ジーンは XML .chromosome ファイルで定義します。
重要 : ジーンを使用するには、「スキンの操作」の説明に従って、CSS エントリおよび JavaScript エントリが参照されるのではなく、HTML 内にインライン化されるように、skin.xml または skeleton.xml でそれらのエントリをコンフィグレーションする必要があります。
.chromosome ファイルで、次のように「bodyColor」というジーンを定義し、値として「赤」を割り当てることができます。
<gene name="bodyColor">
<value>#FF0000</value>
</gene>
CSS ファイルで、次のように bodyColor を変数として使用できます。
body {
border:1px solid ${bodyColor}
};
ページをブラウザで表示すると、インライン化されたスタイルの定義は次のようになります。
body {
border:1px solid #FF0000
};
このジーンを CSS ファイルで使用する場合、各 CSS ファイルで値を手動で変更するのではなく、ジーンの値そのものだけを変更して、すべてのコンフィグレーション済み CSS ファイルに変更が反映されるようにする必要があります。
また、複数のルック アンド フィールで同じジーン名を使用し、各ルック アンド フィールで異なるジーン値を指定することもできます。
ジーンを使用する各スキン、スケルトン、およびテーマには独自のクロモソームが必要です。クロモソームが単なる複製でも独自のものを使用する必要があります。クロモソームファイルは、skin.xml および skeleton.xml と同じディレクトリに格納します。
| 注意 : | ジーンの値は、他のジーンの参照により定義できます。 |
<netuix:lookAndFeel
skinChromosome="holiday"
skeletonChromosome="holiday"
default.chromosome のマスター ファイルを作成すると、すべてのジーンを 1 つの場所に保存して、他の .chromosome ファイルでジーンをオーバーライドできます。ルック アンド フィール フレームワークは、.laf ファイルで指定したクロモソームでジーンを検出できないと、default.chromosome ファイルでジーンを探します。
ルック アンド フィール フレームワークは、参照するジーンがクロモソームで定義されているかどうかチェックしません。フレームワークはジーンを検出できないと、HTML 出力にジーンの変数を単純に出力します。
新しいルック アンド フィールを作成する前に、次の説明に従い、既存のルック アンド フィールをオーバーライドできるかどうか検討します。
テーマを使用して、個々のブック、ページ、およびポートレットのルック アンド フィールをオーバーライドできます。
ジーンを使用して、CSS および JavaScript ファイルで使用する変数に対して異なる値を定義できます。これにより、比較的少ない開発作業で、異なるルック アンド フィールをシミュレートできます。
WebLogic Portal 共有 J2EE ライブラリから、スキン、スケルトン、またはテーマ ファイルをコピーします (マージ済みプロジェクト ビューからファイル システムにコピーします)。これらのファイルのファイルベースの変更されたコピーが、実行時にライブラリ リソースの代わりに使用されます。
選択したポータル コンポーネントのプロパティ ビューで、プレゼンテーション プロパティのオーバーライド (CSS 値など) を入力できます。
ルック アンド フィールのトラブルシューティングを行う場合、またはルック アンド フィールを微調整する場合、以下のガイダンスを使用してください。
ルック アンド フィール エディタを使用すると、ポータルのテキスト要素で使用されるテキスト スタイルを対話形式で変更できます。技術的には、このエディタは、ポータルの skin.xml ファイルで参照されているカスケーディング スタイル シート (CSS) ファイルを変更します。たとえば、ルック アンド フィール エディタを使用して、ポータルの見出しのサイズ、リスト要素の色、テーブル セルの周囲のパディングなどを変更できます。
また、ルック アンド フィール エディタを使用して、ポータルのルック アンド フィール ファイル (.laf ファイル) のプロパティ (参照するスキン ファイルやスケルトン ファイルなど) を変更できます。
ルック アンド フィール エディタを使用すると、ポータルのルック アンド フィールを簡単に変更し、結果を直ちに確認できます。ポータルで使用されるテキスト スタイルを対話形式で変更できます。ポータルのテキストを選択し、フォント サイズや色、パディングなどのテキストの特性を変更できます。変更を行うと、エディタの表示領域に変更が直ちに反映されます。
ポータルのスキンは、ポータルの全体的なルック アンド フィールを定義するときに有効です。ポータルの skin.xml ファイルは、スキンで使用する 1 つまたは複数の CSS ファイルを指定します。ポータルの HTML テキストは、指定された CSS ファイルを参照し、CSS ファイルに含まれているスタイル定義を使用します。特定のテキスト スタイルのフォント サイズを変更すると、ルック アンド フィール エディタによって、CSS ファイル内のスタイルの定義が変更されます。変更は、エディタの表示領域に表示される HTML に直ちに反映されます。
次の図は、ルック アンド フィール エディタの各部分を示しています。この節では、これらの各部分について詳しく説明します。
ナビゲータ パネルには、ポータル プロジェクトのファイル構造が表示されます。このパネルでは、編集するポータルのルック アンド フィール ファイルを探して選択します。
ルック アンド フィール (.laf) ファイルには、ポータルのルック アンド フィールを定義するスキンとスケルトンへの参照が含まれます。ルック アンド フィール エディタを使用するには、ナビゲータ ビューで、編集するポータルの .laf ファイルを見つける必要があります。ファイルを見つけたら、ファイル名をダブルクリックしてルック アンド フィール エディタを開きます。ポータルの .laf ファイルは、ポータル Web プロジェクトの framework/markup/lookandfeel フォルダにあります。たとえば、図 7-5 では、ナビゲータ ビューでファイル mycustom.laf が選択され表示されています。
スタイル階層ビューには、選択したスタイルの CSS カスケードが表示されます。カスケードは CSS スタイルの階層であり、HTML ドキュメント構造によって定義されます。カスケードを表示すると、継承されたスタイル プロパティを見つけて適切に処理するために役立ちます。図 7-6 では、portlet-section-header スタイルが選択されています。portlet-section-header スタイルは、階層の bea-portal-window-content の下にあることに注意してください。
これは、portal-window-content からだけでなく、階層の上位にあるすべてのスタイル クラスから portlet-section-header にプロパティが継承される可能性があることを意味します。継承の詳細については、「CSS 継承」を参照してください。スタイル階層ビューでスタイルを選択すると、そのスタイル定義と継承されたスタイル プロパティが [スタイルの説明] ウィンドウに表示されます。次の節を参照してください。
[スタイルの説明] ウィンドウでは、選択したスタイルのプロパティと継承されたスタイル プロパティを一目で確認できます。図 7-7 に示す [スタイル情報] セクションは、スタイルが定義されている CSS ファイルから直接取得されます。また、示されている [継承されたスタイル] リストも、ルック アンド フィール エディタで現在開いている HTML テキストのドキュメント構造から直接構築されます。[継承されたスタイル] リストは、ドキュメント階層の上位にあるスタイルから継承されたスタイル プロパティと各プロパティの値を示します。たとえば、portlet-section-header は、bea-portal-body スタイルから font-family プロパティを継承していることがわかります。
[継承されたスタイル] リストの値を理解するには、HTML と CSS の基本知識があると役に立ちます。
| ヒント : | この節では、CSS 継承についてごく簡単に説明します。CSS に関する書籍と Web サイトは多数あります。この重要な主題の詳細については、それらを参照してください。 |
HTML ドキュメントは階層状に構成されています。これは、HTML ドキュメントの各要素には、1 つまたは複数の子要素、1 つの親要素、および複数の祖先要素が存在する可能性があることを意味します。CSS の中心機能は、HTML ドキュメント階層の下位方向に向かってスタイルが「継承」されることです。たとえば、図 7-8 は、単純な HTML ドキュメントの階層を表しています。
このドキュメントのすべてのテキストの色を青にする場合は、body タグに青を定義します。CSS 継承によって、body より下位のすべての要素 (具体的には li と h1) も青になります。一方、リスト要素以外のすべて要素を青にするには、ul タグに別の色、たとえば赤を定義します。これで、すべての li 要素は、親である ul から赤という色を継承します。同時に、h1 タグは青になります (h1 タグは body から色を継承します)。
ルック アンド フィール エディタは、選択したスタイルに継承されるすべてのスタイルを表示します。したがって、スタイルのフォント サイズを変更する場合、そのスタイルにフォント サイズが定義されていないときは、フォント サイズがどのスタイルから継承されているかを一目で確認できます。その後、次の節で説明するように、簡単にプロパティを変更できます。
| ヒント : | この便利な機能がないと、特定のスタイルがどのスタイルを継承しているかを判断するのは困難です。一般的には、階層の CSS ファイルを開いて内容を確認し、特定のスタイル プロパティがどこで定義またはオーバーライドされているかを調べる必要があります。 |
前の節で説明したように、変更するプロパティが、選択したテキストに関連付けられた CSS スタイル クラスに定義されていない場合があります。たとえば、ルック アンド フィール エディタで見出しを選択した場合、フォント サイズがその見出しのスタイルのプロパティではないことがあります。この場合、変更するプロパティは継承されたプロパティの可能性があります。
ルック アンド フィール エディタでは、特定のスタイルの継承されたプロパティを表示し、編集できます。たとえば、テキストのフォント サイズを変更するとします。編集するスタイルを選択 (たとえば、表示領域でテキストをクリック) した後、font-size はそのテキストの CSS スタイルのプロパティではないことがわかりました。[継承されたスタイル] リストを見ると、font-size は、カスケードの上位にあるスタイルに定義されていることがわかりました。
この時点で、現在定義されている場所 (カスケードの上位の場所) の font-size プロパティを編集するか、変更するテキストのスタイルにこのプロパティを直接追加するかを決める必要があります。カスケードの上位にあるプロパティを変更した場合、このプロパティを継承している他のテキストのプロパティが間違って変更される可能性があります。状況に応じて、どちらにするかを決定します。選択したスタイルで直接変更した場合、継承されたスタイルはオーバーライドされ、そのスタイルで新しいプロパティ値が使用されます (再びオーバーライドされない限り、階層の下位のスタイルでも同じ値が使用されます)。
| ヒント : | 継承されたスタイルにプロパティを追加するか、既存のプロパティを変更するには、[継承されたスタイル] リストのスタイル名をダブルクリックします。次に、CSS スタイル ウィザードを使用して、変更を行います。 |
HTML ドキュメントは階層状に構成されています。これは、HTML ドキュメントの各要素には、1 つまたは複数の子要素、1 つの親要素、および複数の祖先要素が存在する可能性があることを意味します。CSS の中心機能は、HTML ドキュメント階層の下位方向に向かってスタイルが継承されることです。たとえば、次のツリー図は、簡単な HTML ドキュメント階層を表しています。
このドキュメントのすべてのテキストの色を青にする場合は、body タグに青を定義します。CSS 継承によって、body より下位のすべての要素 (具体的には li と h1) も青になります。一方、リスト要素以外のすべて要素を青にするには、ul タグに別の色、たとえば赤を定義します。これで、すべての li 要素は、親である ul から赤という色を継承します。同時に、h1 タグは青になります (h1 タグは body から色を継承します)。
ルック アンド フィール エディタは、選択したスタイルに継承されるすべてのスタイルを表示します。したがって、スタイルのフォント サイズを変更する場合、そのスタイルにフォント サイズが定義されていないときは、フォント サイズがどのスタイルから継承されているかを一目で確認できます。その後、次の節で説明するように、簡単にプロパティを変更できます。
表示領域には、編集対象の CSS スタイルを使用する HTML が表示されます。ルック アンド フィール エディタを起動すると、テキスト要素の代表的なサンプルを示すデフォルトの HTML ページが表示されます。
| 注意 : | ルック アンド フィール エディタは、ルック アンド フィール (.laf) ファイルを開くことで起動します。表示領域に表示される HTML ファイルは、.laf ファイルのスキンで参照しているのと同じ CSS ファイルを参照している必要があります。デフォルトの HTML ページをエディタにロードした場合、この接続は自動的に確立されます。しかし、ポータルからエディタに HTML をロードした場合は、ポータルがエディタと同じ .laf ファイルを参照していることを確認する必要があります。 |
アウトライン ビューには、ポータルの skin.xml ファイルで参照されているファイルが表示されます。このパネルで、次のプロパティを編集できます。
図 7-9 は、[ドキュメント構造] パネルの一部を示しています。この図では、css/portlet.css ファイルが展開され、その中に定義されているスタイルが表示されています。スタイルをダブルクリックして、プロパティを追加または変更できます。.css ファイル、スタイル名、またはスタイル プロパティをクリックし、プロパティ ビューで値を編集することもできます。
図 7-10 に示すように、このパネルを使用して CSS スタイルにアクセスするだけでなく、ポータルに関連付けられたルック アンド フィール ファイルにアクセスしてそのプロパティを編集できます。すべてのプロパティを変更できます。新しいスキン ファイルとスケルトン ファイルを選択することもできます。ルック アンド フィール ノードがドキュメント構造の最上部にあることに注意してください。
プロパティ ビューでは、選択した CSS スタイルまたはルック アンド フィール ファイルの値を対話形式で変更できます。プロパティ ビューにプロパティを表示するには、次のいずれかの操作を行います。
Javadoc で説明されている次のパッケージを使用すると、ルック アンド フィールに対しプログラム操作を数多く実行できます。
シェルとは、ポータル デスクトップのメイン コンテンツ領域 (ブック、ページ、およびポートレット) を囲む表示領域です。最も重要な点は、シェルがデスクトップのヘッダ領域とフッタ領域に表示されるコンテンツを制御することです。
特定の JSP、ページ フロー、HTML ファイル、およびポートレットを使用して、ヘッダまたはフッタにコンテンツを表示するように、シェルをコンフィグレーションできます。
ヘッダ/フッタの組み合わせごとに、新しいシェルを作成します。
GroupSpace がポータル Web プロジェクトで有効な場合は、communityFiles/shell/communityHeaderFooter.shell もコピーできます。
<netuix:jspContent contentUri="/my_jsps/campaign_header.jsp"/>
JSP または HTML ファイルに、HTML タグの <html>、<head>、<title>、または <body> が含まれていないことを確認します。これは、JSP または HTML ファイルが、これらのタグがすでに存在する単一の HTML ファイルに挿入されるからです。<div>、<table>、<p>、またはその他任意のネストされた HTML タグを使用するだけで、ファイルを書式設定できます。
また、<netuix:jspContent> タグで次の属性を使用することで、ヘッダまたはフッタ JSP 用のエラー JSP およびバッキング ファイルをポイントできます。
errorUri - contentUri JSP に問題がある場合に使用されるエラー JSP へのパス (プロジェクトを基準とした相対パス) を入力します。
backingFile - ヘッダまたはフッタ JSP を表示する前に事前処理 (認証など) を行うためのクラスが必要な場合は、そのクラスの完全修飾名を入力します。このクラスでは、インタフェース com.bea.netuix.servlets.controls.content.backing.JspBacking を実装するか、com.bea.netuix.servlets.controls.content.backing.AbstractJspBacking を拡張します。
<netuix:pageflowContent action="showHeader" backingFile=""
contentUri="/communityFiles/shell/CommunityShellController.jpf"
refreshAction="showHeader"/>
<netuix:portletInstance
title="Visitor Tools Menu"
markupType="Portlet"
markupName="portlet"
instanceLabel="instLblVisitorToolsMenu"
contentUri="/visitorTools/visitorMenu.portlet"/>
| 注意 : | シェルでは、ポートレット内で動作するように設計された機能は使用しないでください。たとえば、コンテンツ コントロールは、シェル内で直接使用するようには設計されておらず、ポートレット内で使用するように設計されています。シェルで、ポートレットベースの機能を使用する場合は、ポートレットをシェルに組み込んでください。 |
レイアウトとは、ブックやポートレットを配置できるポータル ページの領域のことです。レイアウトにより、これらのリソースをさまざまな方法で整理できます。WebLogic Portal は、ポータルで使用できる一連の定義済みレイアウトを提供しています。これらは、ポータル エディタでページを選択してから、プロパティ ビューで選択できます。
WebLogic Portal が提供する定義済みレイアウト ファイルに加えて、次の節で説明する方法でカスタム レイアウトを作成できます。
図 7-11 に示すように、WebLogic Portal には、独自のレイアウトの作成に使用できるボーダー レイアウト、フロー レイアウト、グリッド レイアウトの 3 種類の標準レイアウトが用意されています。
各タイプのレイアウトを作成するには、必要に応じて .layout ファイルをコンフィグレーションします。たとえば、上 (N)、左 (W)、および右 (E) 領域だけを使用するボーダー レイアウトを作成できます。
各タイプの標準レイアウトには、HTML として表示するための、対応するスケルトン JSP ファイル borderlayout.jsp、flowlayout.jsp、および gridlayout.jsp があります。
標準レイアウトが提供している内容以上のレイアウトを作成する場合は、カスタム レイアウトを作成する必要があります。「カスタム レイアウトの作成」を参照してください。
title - レイアウト選択用のドロップダウン メニューに表示する名前を指定します。
description - 選択したレイアウトの説明を指定します。
たとえば、fourcolumn.layout のコピーを変更してボーダー レイアウトを作成する場合は、columns 属性を layoutStrategy 属性に置き換えて、値を変更します。
htmlLayoutUri - 作成した .html.txt ファイルへのパス (プロジェクトを基準とした相対パス) を指定します。たとえば、/framework/markup/layout/yourNewLayout.html.txt などです。
markupName - markupName は他のレイアウトとの間でユニークにする必要があります。
ボーダー レイアウトを作成する場合、使用できるプレースホルダは 5 つまでです。
title - プレースホルダのタイトルを入力します。layoutStrategy 属性を title に設定したボーダー レイアウトを使用する場合は、タイトルに「north」、「south」、「east」、「west」、または「center」と入力して、ボーダー レイアウト内のプレースホルダの配置を決定します。
description - プレースホルダの説明を入力します。
flow - オプションです。ブックおよびポートレットをレイアウトに追加したときに、自動的に水平または垂直に配置されるように制御する場合は、「true」と入力します。
usingFlow - オプションです。flow 属性を true に設定する場合は、この属性値に「vertical」または「horizontal」と入力します。この値は、ブックおよびポートレットをプレースホルダ内で縦 (垂直) に配置するか、または横 (水平) に配置するかを決定します。
width - オプションです。プレースホルダの幅を設定します。
markupType - 必須です。「Placeholder」と入力します。
markupName - 必須です。プレースホルダの ID として使用されます。各プレースホルダには、レイアウト全体においてユニークな markupName が必要です。
order に設定する場合、開始 <netuix:placeholder> タグと終了 </netuix:placeholder> タグの間に「North」、「South」、「East」、「West」、または「Center」と入力して、レイアウト内の各プレースホルダの配置を決定します。たとえば、<netuix:placeholder>North</netuix:placeholder> は、プレースホルダを上プレースホルダに指定します。
これで、ポータル エディタでページを選択し、プロパティ ビューでレイアウトを選択することで、ポータルでレイアウトを使用できます。
ニーズを満たす WebLogic Portal の標準レイアウトがない場合は、カスタム レイアウトを作成できます。カスタム レイアウトを作成する場合、次の 3 つのファイルを作成する必要があります。
カスタム レイアウトのレイアウト ファイルは、標準レイアウトの作成に使用するファイルと同じタイプです。このファイルの中身は、レイアウト パラメータを定義する XML のブロックです。レイアウト ファイルには、.layout 拡張子を付けます。このファイルは、/WEB-INF を除く、Web アプリケーション ディレクトリ内の任意の場所に格納できます。
.layout ファイルは手動で作成する必要があります (テキスト エディタまたは XML エディタを使用)。初めて作成する場合は、ポータル Web プロジェクトの /framework/markup/layout ディレクトリにある共有 J2EE ライブラリの既存のレイアウトをコピーすることをお勧めします。
カスタム レイアウトを作成する方法をわかりやすく説明するために、例を示します。次の例では、横に広がる 1 つの行を上に配置し、その下に 2 つの列を配置したカスタム レイアウトを作成します。下の 2 つの列は、30% と 70% の幅の比率で配置します。
このレイアウト ファイルには、spanningtwocolumn.layout という名前を付けます。ファイルは次のようになります。
<netuix:layout title="Spanning Two Column" description="One row and two columns."
type="spanning"
skeletonUri="/customskeletons/spanningtwocolumnlayout.jsp"
htmlLayoutUri="/framework/markup/layout/spanningtwocolumn.html.txt"
iconUri="/framework/markup/layout/spanningtwocolumn.gif"
markupType="Layout" markupName="spanningTwoColumnLayout">
<netuix:placeholder title="top" description="The top spanning placeholder."
markupType="Placeholder"
markupName="spanningTwoColumn_top">
</netuix:placeholder>
<netuix:placeholder title="left" description="The bottom left placeholder"
markupType="Placeholder"
markupName="spanningTwoColumn_left">
</netuix:placeholder>
<netuix:placeholder title="right" description="The bottom right placeholder"
markupType="Placeholder"
markupName="spanningTwoColumn_right">
</netuix:placeholder>
</netuix:layout>
この例では、<netuix:gridLayout> などの 3 種類の標準レイアウト タグの代わりに、汎用的な <netuix:layout> タグを使用しています。また、この例では、テーブル セルを表す 3 つのプレースホルダを使用しています。
| 注意 : | カスタム レイアウトでは skeletonUri 属性が重要です。これは、カスタム レイアウトを表示するためのカスタム スケルトン JSP を通常は開発するためです。この属性は、ポータル表示フレームワークに、使用する JSP を指示します。 |
<netuix:markupDefinition>、<netuix:locale/>、および <netuix:markup/> 要素は、コードをわかりやすくするために省略しています。実際の .layout ファイルにはこれらの要素を記述してください。
この例には、表示を行うカスタム スケルトンが必要です (skeletonUri 属性で指定)。この JSP を作成して、レイアウトが使用されるルック アンド フィールにコピーする必要があります。レイアウト ファイルと同じく、カスタム レイアウト JSP を最も簡単に作成するには既存の JSP をコピーします。
どのスケルトン ファイルにも、次の JSP タグを使用します。
beginRender タグの本体は begin render 段階でのみ評価され、endRender タグの本体は end render 段階で評価されます。
カスタム スケルトン JSP (/customskeletons/spanningtwocolumnlayout.jsp) を次に示します。
%@ page import="com.bea.netuix.servlets.util.RenderToolkit,
com.bea.netuix.servlets.controls.layout.LayoutPresentationContext,
java.util.List,
com.bea.netuix.servlets.controls.layout.PlaceholderPresentationContext"
%>
<%@ taglib uri="render.tld" prefix="render" %>
<%
RenderToolkit toolkit = RenderToolkit.htmlInstance();
LayoutPresentationContext layout =
LayoutPresentationContext.getLayoutPresentationContext(request);
%>
<render:beginRender>
<table
<% toolkit.writeId(out, layout.getPresentationId()); %>
<% toolkit.writeAttribute(out, "class", layout.getPresentationClass(), "layout-custom"); %>
cellspacing="0"
>
<tbody>
<%
List children = layout.getChildren("layout:placeholder");
// 省略可能なプロパティを取得して表示できる。
// String property = layout.getProperty("myProperty");
for (int i = 0; i < children.size(); i++)
{
PlaceholderPresentationContext placeholderPresentationContext =
(PlaceholderPresentationContext)children.get(i);
if (i == 0)
{
%>
<tr>
<td colspan="2" width="100%" valign="top" class="layout-placeholder-container">
<% toolkit.renderChild(placeholderPresentationContext, request); %>
</td>
</tr>
<%
}
else if (i == 1)
{
%>
<tr>
<td width="30%" valign="top" class="layout-placeholder-container">
<% toolkit.renderChild(placeholderPresentationContext, request); %>
</td>
<%
}
else if (i == 2)
{
%>
<td width="70%" valign="top" class="layout-placeholder-container">
<% toolkit.renderChild(placeholderPresentationContext, request); %>
</td>
</tr>
<%
}
}
%>
</render:beginRender>
<render:endRender>
</tbody>
</table>
</render:endRender>
| 注意 : | この例では width が JSP にハードコード化されています。ハードコード化しない場合、width はプレースホルダの属性としてレイアウト ファイルで指定する必要があります。その場合、width は次のようにスケルトンで参照できます。 |
<render:writeAttribute name="width" value="<%= placeholderPresentationContext != null ? placeholderpresentationContext.getWidth() : null %>"/>
rowspan=2 などその他のプロパティは、プロパティ属性の名前/値ペアとして渡せます。また、endtop を指定して、行/列が広げられた、より汎用的なレイアウトを作成できます。
これで、カスタム レイアウトは完全に機能します。html.txt ファイルをまだ作成していなくても、レイアウトをテストできます。これを行うには、ポータル ファイルを作成し、ページを選択して、プロパティ ビューの [レイアウト] フィールドでカスタム レイアウトを選択します。
| 注意 : | .portal ファイルで .layout ファイルを使用した後に、.layout ファイルを変更した場合、その変更は .portal ファイルには反映されません。これは、.portal ファイルでレイアウトを使用したときに、.portal ファイルにはレイアウトのマークアップがコピーされているためです。変更を反映させるには、いったん別のレイアウトを選択してから、元のレイアウトを選択し直す必要があります。 |
.html.txt は、ツールでのみ使用される HTML の断片です。このファイルにより、レイアウトを視覚的に表現できるため、開発者または管理者はポートレットを適切なプレースホルダに配置できます。
この例では、カスタム .html.txt ファイル /framework/markup/layout/spanningtwocolumn.html.txt は、次のようになります。
<table class="portalLayout" id="thePortalLayout" width="100%" height="100%">
<tr>
<td class="placeholderTD" valign="top" width="100%" colspan="2">
<placeholder number="0"></placeholder>
</td>
</tr>
<tr>
<td class="placeholderTD" valign="top" width="30%">
<placeholder number="1"></placeholder>
</td>
<td class="placeholderTD" valign="top" width="70%">
<placeholder number="2"></placeholder>
</td>
</tr>
</table>
ナビゲーション メニューでは、ポータル デスクトップのさまざまなページを選択することができます。WebLogic Portal は、ナビゲーション メニューのデフォルト セットを用意しています。次のものがあります。
デフォルト メニューが提供する動作とは異なるナビゲーション メニューの動作が必要な場合は、ルック アンド フィールの /skeletons ディレクトリにある singlelevelmenu.jsp または multilevelmenu.jsp スケルトンを共有 J2EE ライブラリからファイル システムにコピーして、必要な変更を行います。複数レベル メニューの動作を変更する場合は、スキンの /js サブディレクトリにあるスキンの menu.js ファイルも変更する必要があります。
ページ タブで画像を使用するには (選択したブックのプロパティ ビューで [ロールオーバ画像]、[選択済み画像]、[未選択画像])、その画像へのパスを入力します。このパスは、skin.xml ファイルで指定されたルック アンド フィールの画像検索パスを基準とした相対パスです。
たとえば、skin.xml の画像検索パスが <path-element>images</path-element> で、メニュー画像がスキンの /images ディレクトリに格納されている場合、プロパティ ビューで単に画像ファイルの名前を入力します。メニュー画像がポータル Web プロジェクトの /images サブディレクトリに格納されている場合は、../../../../images/my_rollover.gif のようにグラフィックへのパスを入力します。
インターネットは、ポータルまたは Web サイトを使用して、単一ポイントからさまざまなユーザと通信する機能を提供します。多くの組織で必要なのは、特別なニーズを持つユーザをサポートするための、業界または政府の標準を満たす Web サイトを提供することです。特定の要件がない場合でも、さまざまなユーザのニーズを満たすようにサイトを設計することが重要です。
WebLogic Portal は、アクセスしやすいポータルおよびアプリケーションの設計、開発、および管理をサポートする柔軟なアーキテクチャを提供しています。たとえば、ユーザ プリファレンス、ブラウザ属性、リクエスト属性に基づいて、特定のユーザ インタフェースを対象にする機能を提供しています。
WebLogic Portal によるユーザ インタフェースの構築の詳細については、「ルック アンド フィールの作成」を参照してください。
Web サイトを開発する場合、次の一般的なガイドラインを使用して、アクセシビリティを高めることができます。完全なリストについては、使用する実装に関連する、業界または政府の規定を参照してください。
テキスト タグ - テキスト以外のすべての要素に対応するテキストを付けます (たとえば、「alt」、「longdesc」を使用して、または要素のコンテンツとして)。
マルティメディア プレゼンテーション - マルティメディア プレゼンテーションには、同等の役割を果たす代わりの手段を同期させて提供します。
色 - 色によって表現される全ての情報は、その色を再現できない場合でも利用できるように Web ページを設計します。 (たとえば、前後関係やマークアップなどによって)。
読みやすさ (スタイル シート) - 関連するスタイル シートなしでも読めるようにドキュメントを編成します。
サーバ側の画像マップ - サーバ側の画像マップの各アクティブ領域には、テキストによるリンクも付加します。
クライアント側の画像マップ - 利用できる幾何学図形で領域が定義できない場合を除き、サーバ側の画像マップではなく、クライアント側の画像マップを使用します。
データ テーブル (簡単な行ヘッダおよびカラム ヘッダ) - データ テーブルには、行ヘッダおよびカラム ヘッダを指定します。
データ テーブル (複数レベルの行ヘッダおよびカラム ヘッダ) - 行ヘッダまたはカラム ヘッダの論理レベルが複数あるデータ テーブルでは、マークアップを使用してデータ セルおよびヘッダ セルを関連付けます。
フレーム - フレームの特定や操作を容易にするために、各フレームにはタイトルを付けます。
フリッカ率 - 2Hz を超える周波数、および 55Hz 未満の周波数によるちらつきが画面に発生しないようにページを設計します。
テキストのみのページによる代替 - 他の方法で条項に準拠できない場合は、Web サイトをこの節の条項に準拠させるために、同等の情報または機能を持つテキストのみのページを用意します。プライマリ ページを変更した場合は、テキストのみのページのコンテンツも更新する必要があります。
スクリプト - スクリプト言語を使用してコンテンツを表示したり、インタフェース要素を作成したりする場合、支援技術で読み込める有効なテキストで、スクリプトが提供する情報を認識できるようにする必要があります。
アプレットおよびプラグイン - クライアント システムにアプレット、プラグイン、またはその他のアプリケーションがないとページ コンテンツを解釈できない Web ページでは、Section 508 §1194.21(a) - (l) に準拠するプラグインまたはアプレットへのリンクをページ内に埋め込む必要があります。
電子フォーム - 電子フォームをオンラインで完了するように設計する場合は、ユーザが支援技術を使用して、フォームを完了および送信するのに必要な情報、フィールド要素、および機能 (すべての指示やキューなど) にアクセスできるフォームを作成する必要があります。
ナビゲーション リンク - ユーザがナビゲーション リンクの繰り返しをスキップできる方法を用意します。
時間遅延 - 特定の時間内の応答が必要な場合は、ユーザにアラートを提示し、応答のために十分な時間を与える必要があります。
W3C Web Content Accessibility Guidelines
* http://www.w3.org/WAI/w3c.htm - Checklist of Checkpoints for Web Content Accessibility Guidelines 1.0
* http://www.w3.org/TR/WCAG10/full-checklist.html
CLF Accessibility best practices
http://www.cio-dpi.gc.ca/clf-upe/1/1d_e.asp
Adaptive Computer Technology Training Center (Canada)
http://www.cio-dpi.gc.ca/clf-upe/standards/1-1/references/references_e.asp
Guidelines for U.K. Government Web Sites
以下のツールを使用して、Web ページのコードを検証できます。これらのツールはコードの修正は行いませんが、HTML 4.0、W3C、Section 508、および一般的なアクセシビリティの問題に関連する事項で、修復が必要なもの、必要ないものをレポートします。
* W3C Web Accessibility Initiative の Web ツール ページ - Web コンテンツのアクセシビリティの評価、修復、および変換ツール
http://www.w3.org/WAI/ER/existingtools.html
* W3C HTML Validator - W3C HTML Validation Service は、HTML ドキュメントが W3C HTML と XHTML 勧告、およびその他の HTML 標準に準拠しているかどうかチェックします。
* CSS Validator - カスケーディング スタイル シート (CSS) を使用している場合は、CSS Validator を使用してください。http://jigsaw.w3.org/css-validator/
詳細については、W3C の評価および修復ツール ページを参照してください。http://www.w3.org/TR/2000/WD-AERT-20000426
Bobby ツールは、優先レベルおよび Section 508 の問題によって、W3C アクセシビリティの問題を識別します。http://bobby.watchfire.com/bobby/html/en/index.jsp を参照してください。
注意 : Bobby の無償版では、一度に 1 ページずつテストできます。
Lynx Viewer は、ページのコンテンツが Lynx (テキストのみ対応のブラウザ) でどの程度利用できるか示す HTML ページを生成します。視覚障害のあるユーザにとって、サイトがどの程度有用であるかを示すと共に、古い技術を使用するユーザにとっても適切な指標になります。(http://www.delorie.com/web/lynxview.html を参照)。
  
|
