WebSphere Portal を使用してレスポンシブ Web デザインを実装する: 第 1 回 デフォルトのテーマを出発点にする

1 つのテーマで複数の機器に対応する WebSphere Portal ユーザー・インターフェースをレスポンシブ・デザイン手法によって最適化する

複数の機器に対応したエクスペリエンスを作成することは不可欠ですが、ターゲットにする機器を適切な機器のセットにするのが難しい場合もあります。特定のユーザー機器に合わせて設計する必要性を取り除くために、1 つの Web サイトのコンテンツとレイアウトを画面サイズ、機器の種類、機器の向きなどに応じて自動的に最適化する手法として、レスポンシブ Web デザイン (Responsive Web Design: RWD) がよく使われるようになっています。この記事では、WebSphere Portal のテーマをその根本からレスポンシブ Web エクスペリエンスに変換する方法を説明します。高度な CSS 手法により、柔軟なレイアウトと伸縮性のある要素を使用して様々な画面解像度にリアルタイムで対応するテーマを実装することができます。

Jonathan Lidaka, WebSphere Portal Front-end Engineer, IBM China

Jon Lidaka は、IBM の Research Triangle Park Development Lab を拠点に活躍するフロントエンド・エンジニアです。Portal 開発では、主にアクセシビリティーと国際化対応に焦点を置いたテーマの開発、そして管理ポートレットや Web アプリケーション・インテグレーターなどの各種コンポーネントに貢献しました。現在は、Portal を対象としたモバイル開発活動を主導しています。彼は複数の IBM カンファレンスで、モバイル機器用のユーザー・インターフェース設計と Portal テーマの最適化について講演を行いました。


developerWorks 貢献著者レベル

Scott Consolatti, WebSphere Portal Front-end Engineer, IBM

Scott Consolatti は、IBM の Research Triangle Park Development Lab を拠点に活躍するフロントエンド・エンジニアです。Portal の開発では、主に新しいモジュール式テーマ・アーキテクチャーを焦点としたテーマの開発に貢献しました。また、ウィジェットや CSA、そしてパーソナライゼーションを含む各種のコンポーネントにも貢献しました。さらに、IBM Mashup Center と IBM Lotus ActiveInsight をはじめ、さまざまな IBM 製品のユーザー・インターフェースの開発に従事し、ユーザー・インターフェース関連の特許を多数取得しています。現在は、WebSphere Portal のデフォルト・テーマ内でのモバイル・エクスペリエンスの実現化に重点的に取り組んでいます。



2012年 11月 08日

この連載について

この連載では、WebSphere Portal 内でレスポンシブ Web デザイン (Responsive Web Design: RWD) の概念を統合したユーザー・インターフェースを開発する手順を説明します。レスポンシブ・デザインを使用すれば、Web の設計作業が最大限有効に生かされることになります。それは、RWD は画面の解像度や、機器の向き、機器の能力などに応じて自動的にユーザー・インターフェースを最適化する手段となるためです。伸縮性のある要素を使用して、それぞれの機器の特性に柔軟に適応するサイトにすれば、これから新たに登場する画面サイズにもそのまま使用することができます。

はじめに

今日のビジネスには、複数の機器に対して最適化される極めて優れた Web エクスペリエンスを作成することが不可欠です。最近のユーザーは、彼らが使用しているモバイル機器でもデスクトップ・コンピューターと同じくらい簡単に Web ブラウズができることを期待するようになっています。

モバイル機器をターゲットにする場合、まずはネイティブ・アプリケーションの検討から始まるのが通常です。けれども、ネイティブ・アプリケーションの所有コストは高く、限られたコードしか再利用できません。代わりとなるソリューションは、モバイル機器専用の Web サイトを作成することですが、そうなると、最終的には多数のコード・リソースを保守しなければならない結果となり、現実的なソリューションではありません。

Ethan Marcotte 氏が公開した記事では、Web サイトにアクセスする機器の種類および画面サイズがさまざまに変わる状況に対し、柔軟で流動的かつ適応性のある Web サイトを作成するという現実的なソリューションを説明しています。大きな反響があった、このレスポンシブ Web デザインに関する記事を読んでください (記事の終わりにある「参考文献」を参照)。


前提条件

WebSphere Portal

この記事を作成する際に私たちが使用したのは、WebSphere Portal バージョン 8.0 です。記事で説明するコードのほとんどは、HTML、CSS、JavaScript、JSP のどれを扱っているかに関わらず、あらゆるテーマ開発者にとって中核的なコードとなります。

Web ブラウザー

Web ブラウザーには、Firebug 拡張機能をインストールした Mozilla Firefox 4 以降のバージョンを使用することをお勧めします。ただし、CSS3 をサポートするブラウザーであれば、記事で紹介する手法で作成した Web サイトを適切にレンダリングできるはずです。最近のブラウザーには独自の開発ツールが組み込まれていることがほとんどですが、記事の例では Firebug を使用します。

WebDAV クライアント

WebSphere Portal でテーマを更新するには、WebDAV クライアントが必要です。記事のサンプルは AnyClient を使用して開発しましたが、皆さんは WebSphere Portal でサポートしているどの WebDAV クライアントを使用しても構いません。記事ではローカル・マシンにコピーしたファイルにコードを配置する方法を説明するので、皆さんもお使いのローカル・マシンにファイルをコピーしてから、変更後のファイルを WebDAV にコピーすることを前提とします。

WebDAV に接続する方法の詳細については、記事「Connecting to the Portal WebDAV with 8.0」を参照してください。

カスタム・テーマ

レスポンシブ Web デザイン手法を適用する前に必要な作業は、独自のカスタム・テーマを作成することです。Portal 8.0 テーマはサービス・フィックスパックによって更新される可能性があるため、このテーマを直接変更するのは避け、代わりに Portal 8.0 テーマのコピーを作成してください。こうすることで、テーマが機能するために必要なすべての要素が確実に揃うようになり、さらに変更がフィックスパックによって上書きされることもありません。新しいカスタム・テーマを作成するには、記事「Create a copy of the theme」で説明している手順に従います。

また、以下の概念 (右に示す記事で説明しています) を十分に理解してください。


基礎知識

デフォルトでは、WebSphere Portal 8.0 のデフォルト・テーマはモバイル機器用に最適化されていません。レスポンシブな Portal テーマを作成するには、以下の 2 つの要素が欠かせません。

メディア・クエリー
機器の向き、画面サイズ、そしてその他の属性をベースに CSS を使用することを可能にするのは、メディア・クエリーです。メディア・クエリーは、CSS をインクルードする際に <link/> 要素に設定することも、CSS に直接インライン化することもできます。この記事では、サーバーに対するリクエスト数を増やさないために、メディア・クエリーを直接 CSS に組み込みます。メディア・クエリーを使用することは、if 条件を作成して特定のスタイルのセットを有効にするようにブラウザーに指示することと同じです。

流動的な要素
流動的な要素は、固定された値ではなく、パーセンテージを使用してコンテナーの幅を定義します。パーセンテージにより、さまざまなフォーム・ファクターに応じて最適化を行う、伸縮性のあるコンテナーが作成されます。この概念は、ナビゲーション、フッター、レイアウト・コンテナーをはじめ、テーマを構成する多くの部分に適用されます。

この記事では、さまざまなフォーム・ファクターに応じて最適化を行う、単純なソリューションに焦点を当てますが、使用可能な機能についても考慮します。また、特定の機器に対して最適化された画像を提供することも重要です。この点については、連載の今後の記事で取り上げる予定です。

テーマの領域を調べるために使用する Firebug

Firebug は、ブラウザー内に多数の開発者用ツールを提供する Firefox の拡張機能です。Firebug を使用することで、あらゆる Web ページの CSS、HTML、およびインライン JavaScript を検査、編集、デバッグできるようになります。記事ではこのツールを、テーマをレスポンシブにするために調整が必要な (テーマの) 静的領域を識別するために使用します。Firebug に関する十分な知識がない場合は、developerWorks の記事「Firebug を使ってオンザフライでアプリケーションをデバッグ、調整する」を参照してください。


テーマをレスポンシブにする

早速、テーマにレスポンシブな要素を追加しましょう。前提として、カスタム・テーマの作成が完了していなければなりません。記事の手順で行う変更をその都度確認できるように、ページにカスタム・テーマが設定されていることを確認してください。

WebSphere Portal 8.0 テーマのスタイルの紹介

WebSphere Portal テーマは、パフォーマンスを向上させるために、デフォルトのスタイルを 1 つにまとめたレイヤーを使用します。これらのスタイルは、WebDAV 上ではカスタム・テーマの中に保管されます。WebDAV 上での保管場所は以下のとおりです。

	fs-type1:themes/<customTheme>/css/

レイヤー・ファイルには、「master.css」および「masterRTL.css」という名前が付けられており、これらのファイルは「wp_theme_portal_80」モジュールによって組み込まれます。このモジュールは、以下のファイル内でテーマ固有のコントリビューションとして定義されています。

	fs-type1:themes/<customTheme>/contributions/theme.json

ページの構造を定義するこれらのスタイルは、WebSphere Portal 8.0 HTML マークアップを共有するあらゆるテーマで使用することができます。レイヤーは、2 つありますが、その理由は、1 つは双方向言語のユーザー用 (masterRTL.css)、もう 1 つは非双方向言語のユーザー用 (master.css) に必要となるためです。双方向バージョンの場合、ページは右から左の方向でレイアウトされます。このようなスタイルシートが使用されるのは、アラビア語やヘブライ語などの双方向言語のページです。

以降の手順では、master.css ファイルを直接更新して、レスポンシブ・デザインを実現するコードを組み込みます。

メディア・クエリーを作成する

メディア・クエリーは、さまざまな機器に合わせてテーマを最適化します。この例でデスクトップ・コンピューター以外の機器として焦点を当てるのは、スマートフォンとタブレットです。設計に導入されたメディア・クエリーは、ブレークポイントと呼ばれることがよくあります。ターゲットとする機器ごとに複数のブレークポイントを使用することができますが、この例では向きの変更やその他のマイナーなブレークポイントについては無視し、各機器で 1 つのブレークポイントに焦点を絞ります。

WebDAV の fs-type1 エントリー・ポイントに接続し、カスタム・テーマまでナビゲートして、前のセクションで説明した master.css ファイルをローカル・マシンにコピーしてください。このファイルには、かなり長い 1 行の CSS が詰め込まれることになります。けれども、この例ではユーザー・インターフェースのデスクトップ・コンピューターの部分には手をつけずにスタイルを追加して最適化を進めるため、それで問題ありません。

追加する最初のクエリーは、タブレットを対象としたものです。つまり、ターゲットは、画面の幅が 800 ピクセル未満の機器となります。master.css ファイルの終わりに、リスト 1 に記載するメディア・クエリーをコピーしてください。

リスト 1. 幅 800 ピクセル未満の画面を調べるメディア・クエリー
@media screen and (max-width: 800px) {

}

この記事全体をとおして、master.css にコードを追加するなどして更新を行った後は、必ずファイルを WebDAV にコピーしてください。上記のメディア・クエリーを配置すると、画面サイズが 800 ピクセル未満の場合には、この構造の中に含まれるあらゆるスタイルがレンダリングされることになります。

2 つ目のクエリーは、スマートフォンを対象に追加します。したがって、ターゲットとするのは、画面の幅が 480 ピクセル未満の機器です。master.css ファイルの終わりに、リスト 2 に記載するメディア・クエリーをコピーしてください。

リスト 2. 幅 480 ピクセル未満の画面を調べるメディア・クエリー
@media screen and (max-width: 480px) {

}

このメディア・クエリーを配置することで、画面サイズが 480 ピクセル未満の場合には、この構造の中に含まれるすべてのスタイルがレンダリングされることになります。リスト 3 に、以上の 2 つのブレークポイントを配置した master.css を記載します。

リスト 3. メディア・クエリーが配置された main.xml ファイル
.wpthemeMenuAnchor {display:inline-table !important;}.wpthemeMenuBorder {top: -9999px.... 
@media screen and (max-width: 800px) {

}

@media screen and (max-width: 480px) {

}

テーマの構造がレスポンシブになるように更新する

ここまでの作業でセットアップした 2 つの構造には、デスクトップ・コンピューター用のスタイルを無効にして、タブレットとスマートフォン用にテーマを最適化するスタイルが含まれます。テーマの中でレスポンシブにしなければならない領域を特定するための最初のステップは、Firebug を使用して DOM を調べ、幅が設定されている構造を見つけることです。

DOM を調べるには、Firebug ツールバーの左側にある矢印ボタンを選択します (図 1 を参照)。

図 1. Firebug のインスペクター
Firebug のインスペクター

インスペクターを使ってページ上の領域にマウス・カーソルを重ねると、スタイルに定義された幅を確認することができます。ページ上の要素にマウス・カーソルを重ねていくうちに、「wpthemeFrame」というスタイル・クラスが設定されたページ・ラッパーがあることに気付くはずです (図 2 を参照)。さらに、ナビゲーション、メイン・コンテンツ、フッターなどのページの主要な領域内には、スタイル・クラスが「wpthemeInner」となっている構造があります (図 3 を参照)。

図 2. ページ・ラッパー要素
ページ・ラッパー要素
図 3. ページの内部構造
ページの内部構造

この 2 つのスタイル・クラスは、静的な値で定義されています。そのため、ターゲットとする機器に正確に対応するようにスタイル・クラスの幅を変更し、クラスが定義された構造を柔軟にしなければなりません。それには、wpthemeFrame の min-width を、レスポンシブ・デザインで対応する最小幅に設定します (この例では 320px)。次に、ページの主要な領域のすべてに伸縮性を持たせるために、wpthemeInner に幅をパーセントで設定します (この例では、100% と指定します)。wpthemeFrame と wpthemeInner のスタイル定義を、max-width を 800 ピクセルに定義したタブレット・メディア・クエリーにコピーします (リスト 4 を参照)。これにより、これらのスタイルは 800 ピクセル未満のすべての画面サイズに適用されることになります。つまり、タブレットとスマートフォンの両方の機器に適用されるということです。

リスト 4. wpthemeFrame および wpthemeInner のレスポンシブな構造を作成する
@media screen and (max-width: 800px) {
	.wpthemeFrame {
		min-width: 320px;
	}
		
	.wpthemeInner { 
		width: 100%;
	}
}

機器の種類に応じて変更する対象となる次のアイテムは、編集モード (Edit Mode) のトグルとプロジェクト・メニューです (図 4 を参照)

図 4. 編集モード (Edit Mode) のトグルとプロジェクト・メニュー
編集モード (Edit Mode) のトグルとプロジェクト・メニュー

タブレットやスマートフォンのユーザーに編集モードの機能が必要ないと思う場合には、これらの機器のビューで編集モードの機能を非表示にするのが妥当です。それには、該当する要素を非表示にするスタイルを追加するだけです。リスト 5 に記載する「utb-project-quicklink」と「utb-project-info」の CSS を追加してください。

リスト 5. 編集モードの機能が表示されないようにする
@media screen and (max-width: 800px) {
	.wpthemeFrame {
		min-width: 320px;
	}
		
	.wpthemeInner { 
		width: 100%;
	}
	.utb-project-quicklink, 
	.utb-project-info {
		display: none;
	}
}

これにより、図 5 に示すようにタブレット上ではページのサイズが変更されて、編集機能が非表示になります。

図 5. 編集機能が非表示になった状態
編集機能が非表示になった状態

サイズの小さい画面用に最適化する際に制御しなければならない可能性のあるもう 1 つのページ要素は、ユーザーに表示するナビゲーションの量です。この例では、上部のナビゲーションを 480 ピクセル未満の画面サイズでのレンダリングから除外します。さらに、画面の表示面積を節約するために、スマートフォン用の最適化では検索入力ボックスも削除します。そのために必要な作業は、編集モードのトグルを非表示にしたときと同じ方法で、該当する要素を非表示にするスタイルを設定することだけです。リスト 6 に太字で示されたコードを、スマートフォンをターゲットとするメディア・クエリーに追加してください。

リスト 6. 上部ナビゲーションが表示されないようにする
@media screen and (max-width: 480px) {
	.wpthemeHeader,
	.wpthemeSearch {
		display:none;
	}
}
図 6. スマートフォンで上部ナビゲーションと検索機能が非表示になっている状態
スマートフォンで上部ナビゲーションと検索機能が非表示になっている状態

レスポンシブ・デザインでスタイルを使ってマークアップを非表示にする方法は迅速かつ簡単に行えるため、最善の手法になる場合もあります。この後の「上級編」セクションでは、スタイルを使用する代わりにロジックをセットアップする方法を説明します。ロジックをセットアップすると、機器を分類するためのクラスを利用して、レンダリングするマークアップを制御することができます。

小型の機器に合わせてテーマを最適化するときには、重要な点として、これらの機器では入力メカニズムも変わることを考慮しなければなりません。タブレットやスマートフォンでは、ユーザーがタッチ・イベントを使用してページ上の項目を選択することができます。したがって、指でページ上の項目を簡単に選択できるようにしなければなりません。サイズが小さい画面で密集しがちな領域の 1 つは、フッターです。密集状態を緩和して、簡単にタッチ・イベントを行えるようにするには、フッターで適切な間隔を確保する必要があります。それには、フッターのリンク周りにスペースを追加して、フォント・サイズを大きくし、列が伸縮できるようにします。リスト 7 に記載するコードを、タブレット用のメディア・クエリー (つまり、max-width を 800px に設定したメディア・クエリー) に追加してください。

リスト 7. ページのフッターに適切な間隔を追加する
	.wpthemeFooter li { 
		margin: 10px 0;
	}
	
	.wpthemeFooter a{
		font-size: 1.25em
	}
	
	.wpthemeFooterCol {
		width: 30%;
		padding: 0 1%;
	}
	
	.wpthemeCol {
		margin-left: 0;
	}
図 7. 小型の機器向けに適切な間隔が設定されたページ・フッター
小型の機器向けに適切な間隔が設定されたページ・フッター

スマートフォンの表示領域はデスクトップ・コンピューターやタブレットよりも小さいので、ページ内の異なる領域の判別とタッチ・イベントの使用を簡単に実現しつつ、項目を並べて表示するのは一層難しくなります。ページをスマートフォン用に最適化するために必要なことは、ページのいくつかの要素を重ねることです。ページ内でこのようにして最適化すべき対象領域となるのは、ナビゲーション、レイアウト、フッターの 3 つの領域です。

レイアウト領域に関しては、タブレットとスマートフォンの両方に対してコンテナーを最適化するのが妥当です。以下の例でターゲットとする既製のレイアウトには、すべて列があります。また、異なる画面サイズや異なる機器でポートレットがどのように重ねられるかを確認できるように、ページにコンテンツを追加することも忘れないでください。レイアウトを重ねるリスト 8 のコードをタブレット用のメディア・クエリーにコピーします。このコードは、画面の幅が 800 ピクセル未満のすべての機器に適用されます。図 8 を参照してください。

リスト 8. レイアウト・コンテナーを重ねるスタイル
.wpthemePrimaryContainer.wpthemeCol,
.wpthemeSecondaryContainer.wpthemeCol,
.wpthemeTertiaryContainer.wpthemeCol {
	padding: 0 2.5%;
	width: 95%;
}

ナビゲーション領域とフッター領域に関しては、要素を重ねるスタイルは、スマートフォンに対してのみ適用します。スマートフォン用のメディア・クエリーにリスト 9 のコードをコピーしてください (図 8 を参照)。

リスト 9. ナビゲーションとフッターを重ねるスタイル
.wpthemeCommonActions.wpthemeRight,
.wpthemePrimaryNav.wpthemeLeft {
	clear:both;
}

.wpthemeBanner .wpthemeNavContainer1,
.wpthemePrimaryNav.wpthemeLeft,
.wpthemeNavListItem.wpthemeLeft,
.wpthemeNavListItem a{
	float: none;
}

.wpthemePrimaryNav .wpthemeNavListItem {
	background: -moz-linear-gradient(top, #474747 0%, #111111 100%); 
	background: -webkit-gradient(
		linear, left top, left bottom, 
		color-stop(0%,#474747), color-stop(100%,#111111));
	border-top: 1px solid #1A1A1A;
}

.wpthemePrimaryNav li a,
.wpthemePrimaryNav li a :focus,
.wpthemePrimaryNav li a:hover,
.wpthemePrimaryNav li a:active,
.wpthemePrimaryNav .wpthemeSelected a, 
.wpthemePrimaryNav .wpthemeSelected a:focus, 
.wpthemePrimaryNav .wpthemeSelected a:hover,
.wpthemePrimaryNav .wpthemeSelected a:active {
	padding: 10px;
}

.wpthemeFooter{
	margin: 0 2.5%;
}

.wpthemeFooterCol {
	width:100%;
	padding:0
}
図 8. 主要な領域であるナビゲーション、レイアウト、フッターがスマートフォン用に重ねられた様子
主要な領域であるナビゲーション、レイアウト、フッターがスマートフォン用に重ねられた様子

クリックして大きなイメージを見る

図 8. 主要な領域であるナビゲーション、レイアウト、フッターがスマートフォン用に重ねられた様子

主要な領域であるナビゲーション、レイアウト、フッターがスマートフォン用に重ねられた様子

ナビゲーション・リンクを重ねると、スマートフォンでの典型的なパターンが生成されますが、リンクをクリックすると新しいページに移動するのか、それともリンクを選択するとコンテンツが展開されたり折り畳まれたりするのかは、常に明らかであるとは限りません。ユーザーに対し、ナビゲーション・リンクがページのコンテキストを変更するものであることを明らかに示すには、ページ・セクションに矢印を追加します。それには、WebDAV に新しい画像を追加する必要があります。この画像は、記事の「ダウンロード」セクションから入手できるサンプル・ファイルに「arrow.png」という名前で用意されています。画像をダウンロードしたら、その画像を WebDAV の以下の場所に配置します。

	fs-type1:themes/<customTheme>/css/images/

画像を WebDAV にコピーすると、ファイル構造は図 9 に示すような状態になります。

図 9. WebDAV 上の新しい矢印画像
WebDAV 上の新しい矢印画像

画像が WebDAV 上に配置された後は、この画像をスタイルで使用できるようになります。この画像を追加する対象となるのはナビゲーション・リンクです。主要なナビゲーション・リンクの定義は master.css 内のスマートフォン・メディア・クエリーの下にすでに設定されているので、この定義に background 属性を新しく追加します (リスト 10 を参照)。

リスト 10. スマートフォンの主要なナビゲーションに矢印を追加する
.wpthemePrimaryNav li a,
.wpthemePrimaryNav li a :focus,
.wpthemePrimaryNav li a:hover,
.wpthemePrimaryNav li a:active,
.wpthemePrimaryNav .wpthemeSelected a, 
.wpthemePrimaryNav .wpthemeSelected a:focus, 
.wpthemePrimaryNav .wpthemeSelected a:hover,
.wpthemePrimaryNav .wpthemeSelected a:active {
	background: url(images/arrow.png) no-repeat scroll right center transparent;
	padding: 10px;
}

この新しい background 属性を設定した後にページを最新の表示にすると、ナビゲーション・リンクの領域で各項目の右側に矢印が表示されるはずです (図 10 を参照)。

図 10. スマートフォンでのナビゲーションの表示
スマートフォンでのナビゲーションの表示

機器に適したビューポートを設定する

スマートフォンのブラウザーでは、デスクトップ・コンピューターをターゲットとしたマークアップを表示するのに適した広いビューポート幅に Web ページが拡大されてしまうことがよくあります。このように、意図せぬジェスチャーによってテーマが拡大されて使いにくくなるという事態は、確実に防がなければなりません。

リスト 11 に一例として、ビューポートの幅を自動的に機器の画面と同じ幅にする meta タグを記載します。initial-scale プロパティーは、ページがロードされた時点での初期ズーム・レベルを設定します。maximum-scale と minimum-scale は、機器でのズーム機能のパラメーターを設定するプロパティーです。この 2 つのプロパティーには両方とも、初期ズーム・レベルと同じ値がそれぞれ最大値、最小値として設定されているため、ユーザーがページ上でズームイン、ズームアウトすることはできません。ここでは小さい画面サイズに合わせてユーザー・インターフェースを最適化しようとしているので、ズームイン/ズームアウトを無効にするのは納得のいくことです。真に最適化されたレスポンシブ・デザインには、本来、ズーム機能は必要ないはずです。

リスト 11. 機器の表示のズーム機能を無効にするビューポートの設定
<meta name="viewport" content="width=device-width, initial-scale=1, 
maximum-scale=1, minimum-scale=1">

上記 (リスト 11) の meta タグは、テーマの <head> 要素に組み込みます。そのためには、WebDAV の fs-type1 エントリー・ポイントに接続して、カスタム・テーマの theme.html テンプレートまでナビゲートします。ローカライズされたデフォルト・テンプレートを使用しているとすれば、これらのテンプレートは以下の場所にあります。

	fs-type1:themes/<customTheme>/nls/

theme_en.html ファイルをローカル・マシンにコピーして、そのコピーを開きます。テンプレート内で <head> 要素を見つけてください。この要素は、リスト 12 のような内容になっているはずです。

リスト 12. テーマ・テンプレートの head 要素
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- rel=dynamic-content indicates an element that is replaced with the contents 
produced by the specified href. dyn-cs:* URIs are resolved using the 
WP DynamicContentSpotMappings resource environment provider. These values can
also be set using theme metadata if a theme is specified in the URI 
(e.g. @tl:oid:theme_unique_name). -->
<link rel="dynamic-content" href="co:head">
<link rel="dynamic-content" href="dyn-cs:id:80theme_head">
<!-- rendering is delegated to the specified href for each locale -->
</head>

先ほどの meta タグ・サンプルをテーマ・テンプレートの <head> 要素に組み込みます (リスト 13 を参照)。この作業が終わったら、テンプレートを WebDAV に再びコピーします。

リスト 13. テーマ・テンプレートの head 要素
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, 
maximum-scale=1, minimum-scale=1">
.
.
.
</head>

これで、テーマはすべての機器で適切なスペースを設けるようになり、ズーム機能は無効にされます。


上級編: 動的コンテンツを変更する

前のセクションでは、テーマの静的 css リソース内のメディア・クエリーが制御する display:none スタイルを使って特定の要素を非表示にする方法を学びました。その一方、パフォーマンスのためには、特定の機器に対しては非表示にする要素をページから完全に削除し、機器に返されるレスポンスのサイズを必要最小限にするほうが望ましいはずです。

特定の機器で要素をページから完全に削除するには、Portal EL (Expression Logic) Bean の ClientProfileBean に含まれる DeviceClass を使用します。EL Bean は、テーマの JSP リソースで使用することができます。これにより、プレゼンテーション層とアプリケーション層 (例えば、Portal Model API) との通信が可能になります。

テーマの静的リソースを使用するには WebDAV を使用しますが、それとは異なり、テーマの動的 jsp リソースを使用するにはテーマのエンタープライズ・アプリケーション (ear) を使用します。それは、動的 jsp リソースをコンパイルして実行するには、サーブレット・コンテキストにアクセスする必要があるためです。

テーマの動的 jsp リソースは、動的コンテンツ・スポットにより、theme.html 内のテーマの静的リソースにリンクされます。動的コンテンツ・スポットの詳細については、「Working with dynamic content spots」を参照してください。

新しい動的コンテンツのセットを作成する

作業を進める前に、記事の冒頭で独自のカスタム・テーマを作成した際に、「Create a copy of the theme (テーマのコピーの作成)」に記載されているすべてのステップおよびサブセクションの内容を完了していることを確認してください。

サブセクション「Copy the dynamic resources for your theme (テーマに合わせた動的リソースのコピー)」では、jsp ファイルで独自のテーマの ear を作成する方法を説明しています。

サブセクション「Bind your theme to the context root of the web app (Web アプリケーションのコンテキスト・ルートへのテーマのバインド)」では、テーマの ear のコンテキスト・ルートを Portal サーバーに登録する方法を説明しています。

サブセクション「Modify the dynamic resource references for your theme (テーマに合わせた動的リソース参照の変更)」では、独自のカスタム動的コンテンツ・スポットを作成する方法を説明しています。

上記の内容は、以下のように要約することができます。

  • 動的コンテンツ・スポットは、theme.html の中で dyn-cs アンカー・タグの形で表されます。例えば、<a rel="dynamic-content" href="dyn-cs:id:customTheme_commonActions"></a> のような形です。
  • dyn-cs ID (例えば、customTheme_commonActions) は、WebSphere Integrated Solutions Console 内の WP DynamicContentSpotMappings リソース環境プロバイダー (Resource Environment Provider: REP) の custom プロパティーにマッピングされます。
  • custom プロパティーの値 (例えば、res:/customTheme/themes/html/dynamicSpots/commonActions.jsp) は、テーマの ear の動的 jsp リソースにマッピングされます。

この commonActions.jsp を、動的コンテンツを EL Bean で更新する例として使用します。

EL Bean で動的コンテンツを更新する例

<wp_profile>\installedApps\<cell>\<CustomThemeEAR>.ear\<CustomTheme>.war\themes\html\dynamicSpots にあるカスタム・テーマの commonActions.jsp ファイルを見つけて編集します。

追加しなければならない最初のタグは、c:set タグです。このタグで、clientProfile EL Bean の DeviceClass を使用して、deviceClass という変数に現在の機器のタイプを設定します。リスト 14 に記載する行を、ファイルの先頭のインクルードの後に追加してください。

リスト 14. 現在の機器のタイプを取得するための EL Bean
<%-- Renders links for Login/Logout and Help that are shown in the banner --%>
<c:set var="deviceClass" scope="request" value="${wp.clientProfile['DeviceClass']}" />

	<ul class="wpthemeCommonActions wpthemeRight">

これで、条件に応じて特定の要素をページから削除するための準備ができました。まず始めに削除するのは、スマートフォン上のユーザー・プロファイルを編集するためのユーザー名のリンクです。このリンクを削除するには、ユーザー名のリンクのコード・ブロックを c:if タグで囲み、タグの中で deviceClass 変数を使用して機器を比較します。ユーザー名のリンクの <li> ブロックをリスト 15 に記載する 2 行で囲んでください。

リスト 15. 機器のタイプに応じてユーザー名のリンクを削除するための if ブロック
<c:if test="${deviceClass != 'smartphone'}">
<li class="wpthemeFirst">	
<portal-internal:adminlinkinfo name="SELFCARE">
<portal-navigation:urlGeneration contentNode="<%=wpsContentNode%>" 
	layoutNode="<%= wpsCompositionNode %>" 
	portletWindowState="Normal" 
	themeTemplate="" 
	portletParameterType="render">
<portal-navigation:urlParam type="render" name="ao" value="thm"/>
<portal-navigation:urlParam type="render" name="OCN" 
	value="<%= wpsNavigationNodeID %>" />
	<a href="<%wpsURL.write(escapeXmlWriter);%>">
		<c:out value="${wp.user[themeConfig['user.displaynameattribute']]}" />
	</a>
   </portal-navigation:urlGeneration>
   </portal-internal:adminlinkinfo>
</li>
</c:if>

すぐに使用できるように用意されている機器のタイプには、desktop、tablet、smartphone の 3 つがあります。これとは別の機器のタイプも追加で構成できるので、次第に機器のタイプを増やしていくことができます。詳細については、記事「Device Classes」を参照してください。

次に必要となる作業は、スマートフォンとタブレット上でアクション・メニューのリンクを削除することです。アクション・メニューの <li> ブロックをリスト 16 に記載する 2 行で囲みます。

リスト 16. 機器のタイプに応じてアクション・メニューを削除するための if ブロック
<c:if test="${(deviceClass != 'tablet') && (deviceClass != 'smartphone')}">
<li>
<%--
This creates the Actions context menu for page actions.  We use the
&#36; HTML entity to encode the $ character so that it won't be interpreted
as a JSP expression here and will show up as literals.
--%>
.
.
.
</li>
</c:if>

最後に、スマートフォン上のサインアップ・リンクを削除します。サインアップの <li> ブロックをリスト 17 に記載する 2 行で囲んでください。

リスト 17. 機器のタイプに応じてサインアップ・リンクを削除するための if ブロック
<c:if test="${deviceClass != 'smartphone'}">
<li class="wpthemeFirst">
	<portal-internal:adminlinkinfo name="SELFCARE">
	<portal-navigation:urlGeneration allowRelativeURL="true" 
		contentNode="<%=wpsContentNode%>" 
		layoutNode='<%= wpsCompositionNode %>' 
		portletWindowState="Normal" 
		themeTemplate="">
	<portal-navigation:urlParam type="render" name="ao" value="thm"/>
	<portal-navigation:urlParam type="render" name="OCN" 
	   value="<%= wpsNavigationNodeID %>" />
		<a href='<% wpsURL.write(escapeXmlWriter); %>'>
			<portal-fmt:text key="link.enrollment" bundle="nls.engine"/>
		</a>
	</portal-navigation:urlGeneration>
	</portal-internal:adminlinkinfo>
</li>
</c:if>

テーマの ear で jsp のリロードが有効になっている場合、ページを次にロードするときに jsp の変更が自動的に適用されます。jsp のリロードが有効にされていない場合、簡単な代わりの方法として、コンパイルされた jsp のクラス・ファイル _commonActions.class を、<wp_profile>\temp\<cell>\WebSphere_Portal\<CustomThemeEAR>\<CustomTheme>.war\themes\html\dynamicSpot にある一時フォルダーから削除します。このクラス・ファイルを削除した後、jsp をコンパイルすると、次にページをロードするときに変更が適用されることになります。あるいは、テーマの Web アプリケーションを再起動して変更を適用させるという方法もあります。

この記事の「ダウンロード」セクションから入手できるサンプル・ファイルに、テーマの別の領域もレスポンシブにするための追加スタイルが用意されています。これらの領域の 1 つは、以下の図に示すセカンダリー・ナビゲーションです。

以上の作業を完了した後にページをタブレットで実行すると、図 11 のように表示されます。ページから、アクション・メニューがなくなっていることに注目してください。要素のマークアップは非表示にされるのではなく、ページから完全に削除されており、パフォーマンスのためには最も望ましい状態になっています。

図 11. タブレット上のレスポンシブなテーマ
タブレット上のレスポンシブなテーマ

ページをスマートフォンで実行すると、ページは図 12 のように表示され、ユーザー名のリンクもアクション・メニューも表示されません。タブレットの場合と同じく、要素のマークアップは非表示にされるのではなく、ページから完全に削除されており、パフォーマンスのためには最も望ましい状態になっています。

図 12. スマートフォン上のレスポンシブなテーマ
スマートフォン上のレスポンシブなテーマ

まとめ

連載第 1 回目の記事では、レスポンシブ Web デザインの概念を統合したテーマを開発する基本的な手順を説明しました。この手順を完了した今、自動的に機器のタイプに対応するカスタム・テーマが完成しました。

レスポンシブ・デザインを適用すれば、多額の追加費用をかけずにモバイル機器に対応することができますが、レスポンディブ・デザインでは、画面の表示面積以外にも考慮すべきことがあります。連載の次回の記事では、タッチ・イベントやコンテンツの優先順位付けなどの機器の機能を利用して、ひときわ素晴らしい Web エクスペリエンスをもたらす方法を紹介します。


ダウンロード

内容ファイル名サイズ
Responsive design sample filesrwd_sample_files.zip10KB

参考文献

学ぶために

製品や技術を入手するために

議論するために

コメント

developerWorks: サイン・イン

必須フィールドは(*)で示されます。


IBM ID が必要ですか?
IBM IDをお忘れですか?


パスワードをお忘れですか?
パスワードの変更

「送信する」をクリックすることにより、お客様は developerWorks のご使用条件に同意したことになります。 ご使用条件を読む

 


お客様が developerWorks に初めてサインインすると、お客様のプロフィールが作成されます。会社名を非表示とする選択を行わない限り、プロフィール内の情報(名前、国/地域や会社名)は公開され、投稿するコンテンツと一緒に表示されますが、いつでもこれらの情報を更新できます。

送信されたすべての情報は安全です。

ディスプレイ・ネームを選択してください



developerWorks に初めてサインインするとプロフィールが作成されますので、その際にディスプレイ・ネームを選択する必要があります。ディスプレイ・ネームは、お客様が developerWorks に投稿するコンテンツと一緒に表示されます。

ディスプレイ・ネームは、3文字から31文字の範囲で指定し、かつ developerWorks コミュニティーでユニークである必要があります。また、プライバシー上の理由でお客様の電子メール・アドレスは使用しないでください。

必須フィールドは(*)で示されます。

3文字から31文字の範囲で指定し

「送信する」をクリックすることにより、お客様は developerWorks のご使用条件に同意したことになります。 ご使用条件を読む

 


送信されたすべての情報は安全です。


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=60
Zone=Mobile development, WebSphere, Java technology
ArticleID=844155
ArticleTitle=WebSphere Portal を使用してレスポンシブ Web デザインを実装する: 第 1 回 デフォルトのテーマを出発点にする
publish-date=11082012