WebSphere Portal を使用してレスポンシブ Web デザインを実装する: 第 2 回 デバイス・クラスを使用して特定の機器をターゲットに開発する

デバイス・クラスにより、さまざまな機器に合わせて WebSphere Portal ユーザー・インターフェースを最適化する

単一の Web サイトでコンテンツとレイアウトを機器に合わせて自動的に最適化する手法として、CSS メディア・クエリーを使用するレスポンシブ Web デザインが広く使われるようになっています。この記事では、WebSphere Portal のデバイス・クラス・メカニズムを利用して、特定の機器に合わせてリソースをフィルタリングし、テーマ内でのリソースの集約を最適化する方法を説明します。これらの手法によって、レスポンシブなテーマのパフォーマンスが向上するともに、より一貫したユーザー・エクスペリエンスがもたらされます。

Jonathan Lidaka, WebSphere Portal Front-end Engineer, IBM

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



David Nixon, WebSphere Portal Chief Programmer, IBM

author photo - david nixonDavid Nixon は、WebSphere Portal 8.0.0.1 の主任プログラマーです。長年、Portal および Portal Express に取り組んでいる彼は、テーマ開発、仮想ポータル機能、デプロイメント・シナリオなどの多数の領域でコードを提供してきました。



2013年 6月 20日

はじめに

この連載について

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

標準的なレスポンシブ・ユーザー・インターフェースでは、機器に応じてユーザー・インターフェースを最適化する CSS をクライアントがリクエストします。しかしこれによって、十分な帯域幅を持たないモバイル機器に大量のデータがダウンロードされる可能性があります。ほとんどの場合、すべての機器に対応するすべてのスタイルが必要になるわけではありません。例えば、画面サイズの小さい機器では、大きい画面に適用されるメディア・クエリーを利用することは決してないからです。

さらに、小さい画面用に最適化するために必要なすべてのスタイルを、デスクトップ PC 上に組み込んでおく価値もほとんどありません。デスクトップ PC ユーザーのほとんどは、小さい画面用の解像度でブラウズすることはなく、そのような場合は一時的にサイズを変更して別のアプリケーションと並べてコンテンツを表示します。また、デスクトップ PC のモニター上で、320 ピクセル、あるいは 480 ピクセルの画面幅に合わせてコンテンツが最適化されることを求めてはいません。それを求めるのは、このような解像度のモバイル機器を使用しているときです。

この連載の第 1 回では、テーマの共通アクションに含まれる要素の表示/非表示を切り替えるために、DeviceClass を使用する方法を説明しました。JSP の式ロジックを使用して DeviceClass を取得し、特定の機器に対しては、テーマのアクション要素がレンダリングされないようにしました。

連載第 2 回目となるこの記事では、並外れたレスポンシブ・エクスペリエンスを作成するために、WebSphere Portal に用意されているデバイス・クラスを使用してさらに制御を強化する方法を探ります。具体的には、特定のモバイル機器のリソースをターゲットにする方法、そしてナビゲーションをフィルタリングして、機器に応じてページのサブセットだけを表示する方法を説明します。第 1 回と第 2 回で説明している手法を組み合わせることで、テーマのパフォーマンスが向上するともに、ユーザー・エクスペリエンスがより一貫したものになります。


前提条件

今回の記事では前回作成したカスタム・テーマを拡張するので、連載第 1 回を復習してください。

WebSphere Portal

この記事を作成する際に私たちが使用したのは、WebSphere Portal バージョン 8.0 です。具体的に言うと、この記事では 8.0.0.1 フィックスパックが必要になります。8.0.0.1 にマイグレーションした後は、「enable-new-8001-features」構成タスクを使用して、新しいレスポンシブ・デザイン機能を有効にする必要があります。インストール手順については、WebSphere Portal のドキュメントを参照してください。

Web ブラウザー

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

WebDAV クライアント

Worklight で JavaScript を使用して WebSphere Portal のテーマを更新するには、WebDAV クライアントが必要です。記事のサンプルは AnyClient を使用して開発しましたが、皆さんは WebSphere Portal でサポートしているどの WebDAV を使用しても構いません。WebDAV に接続する方法の詳細については、記事「Connecting to the Portal WebDAV with 8.0」を参照してください。


基礎知識

WebSphere Portal では、共通のプロパティーを持つ機器を 1 つのグループにするための抽象化として、デバイス・クラスを使用します。前回の記事で、テーマに関する EL Bean を使用して DeviceClass を取得し、その DeviceClass を使って動的コンテンツ・スポット内での表示/非表示を切り替える方法を説明しました。今回の記事では、WebSphere Portal に用意されているデフォルトのデバイス・クラスを使用して、特定の機器のユーザー向けに Portal のリソースをフィルタリングして最適化する方法を説明します。


モジュール化されたスタイルをデバイス・クラスでフィルタリングしてテーマ内で使用する

機器に固有のスタイルを作成する

連載の第 1 回では、すべてのレスポンシブ・スタイルを、WebDAV クライアント上にあるカスタム・テーマのマスター CSS レイヤーの中に配置しました。スタイルを機器に固有のものにするためには、スタイルをメディア・クエリーごとに個々のファイルに分割する必要があります。

  1. タブレット機器とスマートフォン機器のそれぞれに使用する、2 つの CSS ファイルを新規に作成します。これらのファイルのベースは、前回の記事で変更した master.css ファイルです。以下の場所に配置されている master.css ファイルをコピーしてください。
    fs-type1:themes/<customTheme>/css/master.css
  2. このファイルを同じ場所 (可能な場合) または別の場所に貼り付け、同じフォルダー内にコピーを作成して master_tablet.css というファイル名にします。
  3. 同じようにしてファイルをもう一度貼り付け、今度は master_smartphone.css というファイル名にします。
  4. master.css を開きます。
  5. master.css ファイルには、圧縮および縮小化された状態のデスクトップ用のスタイルと、タブレットとスマートフォンそれぞれの機器をターゲットとする 2 つのメディア・クエリーが含まれています。

    master.css 内で、最大幅 800 ピクセルと定義されたタブレット機器用のメディア・クエリーと、最大幅 480 ピクセルと定義されたスマートフォン機器用のメディア・クエリーを見つけます (リスト 1 を参照)。
    リスト 1. タブレット用およびスマートフォン用のメディア・クエリー
    /* tablet devices */
    @media screen and (max-width: 800px){
    ...
    }
    /* smartphone devices */
    @media screen and (max-width: 480px){
    ...
    }
  6. 上記のメディア・クエリーを両方とも master.css から削除します。このファイルは、デスクトップ機器のスタイルをレンダリングする場合にのみ必要となるからです。
  7. master_tablet.css を開きます。
  8. master_tablet.css 内でスマートフォン機器のメディア・クエリーを見つけます (リスト 2 を参照)。
    リスト 2. スマートフォンのメディア・クエリー
    /* smartphone devices */
    @media screen and (max-width: 480px){
    ...
    }
  9. master_tablet.css はタブレット機器のスタイルをレンダリングするためだけに必要なので、このファイルからスマートフォンのメディア・クエリーを削除します。master_smartphone.css ファイルについては、変更する必要はありません。スマートフォン機器で最適化されたルック・アンド・フィールをレンダリングするには、スマートフォンのメディア・クエリーとタブレットのメディア・クエリーが両方とも必要になるからです。スマートフォン用のスタイルは、タブレットのメディア・クエリーに設定されたスタイルを増補する形を取ります。ただし、必要であれば、これらのスタイルをフィルタリングして、不要なタブレット用のスタイルを削除しても構いません。

3 つのファイルで共通のスタイルを共有するには、import 文を使用することもできます。一般的な例では、デスクトップ用のスタイルをタブレットおよびスマートフォンのファイルにインポートして、これらの機器のメディア・クエリーはそのまま残します。デスクトップ用のスタイルをインポートする場合には、以下のコード行を使用します。
@import url("master.css");

この作業はオプションであり、レスポンシブ・デザインを正常に実装するために必須というわけではありませんが、こうすることでコードを保守しやすくなります。現時点で、カスタム・テーマの CSS フォルダーには 3 つのファイルがあります。特定の機器用にレンダリングするには、これらのファイルをテーマのモジュール内で定義します。

機器固有のリソースを使用するようにテーマのモジュールを更新する

Portal 8.0.0.1 のテーマ最適化フレームワークには、機器を基準にリソースをフィルタリングするメカニズムが組み込まれて強化されています。次のステップでは、テーマのモジュールを更新し、カスタム・テーマのマスター CSS レイヤーに対して機器に固有のコントリビューションを定義します。

  1. 以下の場所に配置されたモジュール・コントリビューション・ファイル theme.json を開きます。
    fs-type1:themes/<customTheme>/contributions/theme.json
  2. theme.json ファイル内で、wp_theme_portal_80 モジュールを見つけます (リスト 3 を参照)。
    リスト 3. theme.json 内の wp_theme_portal_80 モジュール
    {
    "id":"wp_theme_portal_80",
    	"prereqs":[{
    		"id":"wp_client_main"
    	},{
    		"id":"wp_client_ext"
    	}],
    	"contributions":[{
    		"type":"head",
    		"sub-contributions":[{
    			"type":"js",
    			"uris":[{
    				"value":"/js/head.js"
    			}]
    		}, {
    			"type":"css",
    			"uris":[{
    				"value":"/css/master.css"
    			}, {
    				"value":"/css/masterRTL.css",
    				"type":"rtl"
    			}]
    		}]
    	}]
    }
  3. 上記に示されているように、wp_theme_portal_80 モジュールでは、ヘッド・コントリビューションの下でマスター CSS レイヤー用のコントリビューションを組み込んでいます。現状では、master.css コントリビューションは機器に固有ではありません。すべての機器に対して、言語に応じた同じファイルが使用されるようになっています。Portal 8.0.0.1 には、双方向言語の場合に組み込むファイルを指定するための type 属性と同じような新しい属性が導入されています。それは、組み込むファイルが対象としているデバイス・クラスを指定する deviceClass 属性です。この属性を使用して、タブレット用とスマートフォン用に別々の新しいコントリビューションを追加します (リスト 4 を参照)。
    リスト 4. theme.json に追加されたタブレットおよびスマートフォンの CSS コントリビューション
    {
    "id":"wp_theme_portal_80",
    	"prereqs":[{
    		"id":"wp_client_main"
    	},{
    		"id":"wp_client_ext"
    	}],
    	"contributions":[{
    		"type":"head",
    		"sub-contributions":[{
    			"type":"js",
    			"uris":[{
    				"value":"/js/head.js"
    			}]
    		}, {
    			"type":"css",
    			"uris":[{
    				"value":"/css/master.css"
    			}, {
    				"value":"/css/masterRTL.css",
    				"type":"rtl"
    			},{
    				"value":"/css/master_tablet.css",
    				"deviceClass":"tablet"
    			},{
    				"value":"/css/master_smartphone.css",
    				"deviceClass":"smartphone"
    			}]
    		}]
    	}]
    }
  4. 開発モードが有効に設定されていれば、追加された新規コントリビューションはすぐに使用できる状態になります。開発モードが有効に設定されていない場合は、Portal サーバーを再起動してください。

    開発モードを有効にするには、WP ConfigService リソース環境プロバイダー (REP) 内の resourceaggregation.development.mode プロパティーを true に設定します。WP ConfigService REP には、WAS コンソールで「Resources (リソース)」 > 「Resource Environment (リソース環境)」 > 「Resource Environment Providers (リソース環境プロバイダー)」の順にナビゲートすることでアクセスすることができます。

テーマに含まれるデバイス・クラス固有のスタイルをテストする

新しい機器固有のモジュール・コントリビューションをテストして、リソース・アグリゲーターによって適切な CSS ファイルが取得されることを確認するには、リクエストをモニターしてユーザー・エージェントを変更できるブラウザーを使用しなければなりません。この記事では、Firebug および User Agent Switcher 拡張機能がインストールされた Firefox ブラウザーを使用します。

  1. ページに組み込まれる個々のファイルを表示するために、テーマ・モジュール化トレース・ストリングを使用可能にします。それには、「Administration (管理)」 > 「WebSphere Portal」 > 「Portal Analysis (ポータルの分析)」 > 「Enable Tracing (トレースを使用可能にする)」の順にナビゲートします。そして、以下のトレース・ストリングを「Enable Tracing (トレースを使用可能にする)」ポートレットに追加します。
    com.ibm.wps.resourceaggregator.CombinerDataSource.RemoteDebug=all
  2. カスタム・テーマをページに割り当て、モバイル機器以外の機器でレンダリングします。前回の記事では、ブラウザーのサイズを変更すると、動的に最適化されたコンテンツが表示されましたが、デフォルトの master.css ファイルからメディア・クエリーを削除したので、新しい機器固有のスタイルではそのような表示にはなりません。
  3. Firefox の User Agent Switcher 拡張機能からタブレット機器を選択します (図 1 を参照)。User Agent Switcher を最近インストールした場合、必要に応じて、この拡張機能に機器を追加してください。機器の追加方法に関して支援が必要な場合は、この拡張機能の作成者の Web サイト上のヘルプにアクセスしてください。
    図 1. User Agent Switcher からタブレット機器を選択する
    タブレットを選択するためのドロップダウンのスクリーン・キャプチャー
  4. Firebug パネルを開いて、タブレット機器のページを最新の表示にします。
  5. Firebug パネルで「Net (ネット)」タブを選択します。
  6. このパネルには、ページに組み込まれているすべてのリクエストとファイルが表示されます。このリストに、master_tablet.css ファイルが含まれているはずです。必要に応じて、CSS ファイルだけが表示されるようにリストをフィルタリングすることができます (図 2 を参照)。
    図 2. Firebug に表示されたタブレットの CSS
    Firebug ページ上のタブレット CSS のすべてのリクエストとファイルを表示する画面のスクリーン・キャプチャー
  7. Firefox の User Agent Switcher 拡張機能から、今度はスマートフォン機器を選択します (図 3 を参照)。
    図 3. User Agent Switcher からスマートフォン機器を選択する
    スマートフォンを選択するためのドロップダウンのスクリーン・キャプチャー
  8. スマートフォン機器のページを最新の表示にします。
  9. Firebug パネルで「Net (ネット)」タブを選択します。
  10. このリストには、master_smartphone.css ファイルが含まれているはずです (図 4 を参照)。
    図 4. Firebug に表示されたスマートフォン用 CSS
    Firebug ページ上のスマートフォン用 CSS のすべてのリクエストとファイルを表示する画面のスクリーン・キャプチャー
  11. このように、ページにアクセスする機器に基づいて、その機器用に調整されたリソースを指定することができます。さらに、これらのページには実機でアクセスすることもできます。その場合、その特定の機器に応じて最適化されたテーマと、必須のリソースだけが表示されます。Portal 8.0.0.1 の場合、デフォルトでそのまま使用できるテーマでは、スタイルを機器固有のリソースにグループ分けしています。

デバイス・クラスを使用して動的コンテンツ・スポットをフィルタリングする

Portal 8.0.0.1 で導入されたもう 1 つの新しいテーマ最適化メカニズムは、デバイス・クラスを基準とした動的コンテンツ・スポットのフィルタリングを可能にします。これにより、JSP 内にさらにロジックを追加することなく、レンダリングするマークアップを制御することができます。このメカニズムを使用することで、テンプレート内で直接マークアップを制御できるという柔軟なレスポンシブ・デザイン手法が可能になります。

新しい動的コンテンツをカスタム・テーマ Web アプリケーションに追加する

フィルタリング・メカニズムの機能を披露するには、モバイル機器で表示する新しい動的コンテンツを作成する必要があります。新しい JSP をテーマ EAR に追加するプロセスは単純です。一連の動的なカスタム・リソースを独自に作成する方法は、連載の前回の記事で説明したとおりです。

  1. カスタム・テーマの footer.jsp ファイルを見つけてコピーします。このファイルは、以下の場所にあります。

<wp_profile>\installedApps\<cell>\<CustomThemeEAR>.ear\<CustomTheme>.war\themes\html\dynamicSpots

  1. footer.jsp を貼り付けて、footer_mobile.jsp というファイル名に変更します。
  2. footer_mobile.jsp を開き、ファイルの先頭に div 要素を追加します。この要素に、これがモバイル用コンテンツであることを示すテキストを含めます (リスト 5 を参照)。
    リスト 5. div 要素を footer_mobile.jsp に追加する
    <div>Footer mobile content</div>
    <%@ page session="false" buffer="none" %>
    <%@ page trimDirectiveWhitespaces="true" %>
    .
    .
    .
  3. JSP のリロード機能を有効にしていない場合は、Web アプリケーションを再起動します。

デバイス・クラスを基準に動的コンテンツをフィルタリングするようにテーマ・テンプレートを更新する

次のステップは、モバイル機器の新しい動的コンテンツを使用するようにテーマ・テンプレートを更新することです。それには、新しい POC URI メカニズムを使用して footer_mobile.jsp を指すように、フッターの動的コンテンツ・スポットを更新します。

  1. テーマ・テンプレートを開きます。この記事では、英語用にローカライズされた以下のテンプレートを使用します。
    fs-type1:themes/<customTheme>/nls/theme_en.html
  2. フッターの動的コンテンツ・スポットを見つけます (リスト 6 を参照)。
    リスト 6. フッターの動的コンテンツ・スポット
    <a rel="dynamic-content" href="dyn-cs:id:80theme_footer"></a>
  3. href の値を、直接 JSP を指す POC URI に置き換えます (リスト 7 を参照)。Portal 8.0.0.1 で導入された POC URI スキーマは mvc です。これを使用して、デバイス・クラスをフィルタリングすることができます。
    リスト 7. 直接 JSP を指す POC URI を使用したフッターの動的コンテンツ・スポット
    <a rel="dynamic-content" href=" mvc:res:/customTheme 
    /themes/html/dynamicSpots/footer.jsp"></a>
  4. URI を動的コンテンツ・スポットに組み込んだ後、この変更を WebDAV に反映して、ブラウザーにテーマをロードします。この変更を行った後でも、テーマをロードできること、そしてフッターが表示されることを確認してください。フッターは、すべての機器で表示されるはずです。
  5. ここで、デバイス・クラスによるフィルターを導入するために、動的コンテンツ・スポットの URI をリスト 8 に置き換えます。この URI はデフォルトで footer.jsp を指します。タブレット機器の場合は footer_mobile.jsp を指すことになります。スマートフォン機器の場合は、このスポットからのコンテンツは一切表示しません。タブレット用のコンテンツが表示される理由は、mvc スキーマを使用する場合、デバイス・クラスに固有の代替 POC URI を <device class>@<poc uri> という形で定義できるためです。スマートフォンの場合、POC URI が定義されていないため、コンテンツはレンダリングされません。
    リスト 8. 直接 JSP を指す POC URI を使用したフッターの動的コンテンツ・スポット
    <a rel="dynamic-content" href=" 
    mvc:res:/customTheme/themes/html/dynamicSpots/footer.jsp,smartphone@,
    tablet@res:/customTheme/themes/html/dynamicSpots/footer_mobile.jsp"></a>
  6. テーマ・テンプレートを変更した後は、User Agent Switcher からタブレット機器を選択すると、ページのフッター領域に「Footer mobile content」というテキストが表示されるようになります (図 5 を参照)。
    図 5. 新しいターゲットが指定された動的コンテンツを表示しているタブレット機器のフッター
    新しいターゲットが指定された動的コンテンツを表示しているタブレット機器のフッターのスクリーン・キャプチャー
  7. ユーザー・エージェントをスマートフォン機器に変更して、フッターのコンテンツがレンダリングされないことを確認します。
  8. リスト 9 とリスト 10 に、フッターのコンテンツ・スポット内でテストできるその他のサンプル URI を記載します。
    リスト 9. デフォルト URI に加え、スマートフォンおよびタブレットの場合に共通で指す POC URI が指定されたフッターのコンテンツ・スポット
    <a rel="dynamic-content" href=" 
    mvc:res:/customTheme/themes/html/dynamicSpots/footer.jsp,smartphone/tablet@
    res:/customTheme/themes/html/dynamicSpots/footer_mobile.jsp"></a>
    リスト 10. デフォルト URI は指定されず、スマートフォンおよびタブレットの場合に共通のコンテンツが指定されたフッターのコンテンツ・スポット
    <a rel="dynamic-content" href=" 
    mvc:smartphone/tablet@res:/customTheme/themes/html/dynamicSpots/footer_mobile.jsp
    "></a>

デバイス・クラスに基づいて複数のビューを使用可能にするこの新しい URI スキーマは、Web エクスペリエンスに動的なマークアップを組み込む際に、柔軟性に極めて優れたフレームワークになります。詳細については、WebSphere Portal 製品ドキュメントのトピック「mvc:URI スキーム」を参照してください。


デバイス・クラスを使用してページ・ナビゲーションをフィルタリングする

サイトのデザインに、モバイル機器でアクセスする場合にのみ、あるいはデスクトップ・ブラウザーでアクセスする場合にのみ表示されるように意図されたページを組み込むケースがあります。このようなナビゲーション・フィルターを設定するには、メタデータを Portal ページに適用します。デバイス・クラスによるフィルタリングは、デフォルトで無効になっていますが、content.topology.filter.deviceclass カスタム・プロパティーを WP ConfigService リソース環境プロバイダーに追加すると、有効に設定できるようになります。詳細については、WebSphere Portal 製品ドキュメントのトピック「コンテンツ・モデルのフィルター処理」を参照してください。

重要: フィルターはオプトイン・モデルです。フィルタリングが有効にされた後は、特定のクラスのサポート対象としてマークされていないページは表示されません。したがって、デバイス・クラスをサポートしているものとしてマークされているページが 1 つもない場合、フィルタリングを有効にすると意外な結果を招くことがあります。例えば、デバイス・クラスによるフィルタリングが有効になっていて、ページがスマートフォン (“smartphone”) をサポートするものとしてマークされていなければ、スマートフォンでアクセスした Portal ページには、図 6 のような内容が表示されます。

図 6. デバイス・クラスによるフィルタリングが有効にされたページに対し、そのページではサポートしていない機器でアクセスした場合の表示
コンテンツが定義されていない旨を表示するページのスクリーン・キャプチャー

もう 1 つ注意する点として、フィルタリングは階層の各レベルで適用されるため、ナビゲーション・モデルに組み込まれるように各レベルでオプトイン (選択) しなければなりません。

一例として、Portal 8.0 のサンプル・コンテンツの図 7 に示す部分について検討します。

図 7. Portal 8.0 のテーマおよびページ
Portal 8.0 のテーマおよびページのスクリーン・キャプチャー
  • ibm.portal.home (ラベル)
    • ibm.portal.Home.Welcome (ページ)
    • ibm.portal.Home.Getting Started (ページ)
    • rwd.smartphone (ページ)
    • rwd.tablet (ページ)
  • ibm.portal.HiddenPages (ラベル)
    • wps.Login (ページ)

“ibm.portal.home” ラベルが “smartphone” デバイス・クラスをサポートしていない場合、その下位にあるサブページは、それが “smartphone” をサポートするものとしてマークされているとしても表示されません。Portal 8.0.0.1 で定義しているデバイス・クラスは、“smartphone” と “tablet” ですが、必要に応じて他のデバイス・クラスをシステムに追加することもできます。デバイス・クラスの作成および割り当てについての詳細は、WebSphere Portal 製品ドキュメントのトピック「デバイス・クラス」を参照してください。

サポートされるデバイス・クラスをページに適用するには、xmlaccess スクリプトを使用します。このスクリプト内で、<device-class /> 要素を使用して、ページに設定したいデバイス・クラスを見つけます (リスト 11 を参照)。

リスト 11. xmlaccess スクリプト内でデバイス・クラスを見つける
<device-class action="locate" objectid="smartphone" 
uniquename="wps.deviceclass.smartphone"/>

デバイス・クラスが見つかったら、<supported-deviceclass /> 要素を使用して、そのデバイス・クラスのサポートをコンテンツ・ノードに設定することができます (リスト 12 を参照)。

リスト 12. コンテンツ・ノードにデバイス・クラスのサポートを設定する
<content-node action="update" uniquename="rwd.smartphone">
      <supported-deviceclass update="set" classref="smartphone" />
</content-node>

リスト 13 に、”rwd.smartphone” ページと階層内のその他の必要なポイントに “smartphone” デバイス・クラスを追加するサンプル・スクリプト全体を記載します。

リスト 13. スマートフォン機器のフィルタリングを適用するサンプル xmlaccess スクリプト
<request type="update" version="8.0.0.1" 
  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
  xsi:noNamespaceSchemaLocation="PortalConfig_8.0.0.xsd">
  <portal action="locate">
    <device-class action="locate" objectid="smartphone" 
  uniquename="wps.deviceclass.smartphone"/>
    <content-node action="update" uniquename="ibm.portal.Home">
      <supported-deviceclass update="set" classref="smartphone" />
    </content-node>
    <content-node action="update" uniquename="ibm.portal.Home.Welcome">
      <supported-deviceclass update="set" classref="smartphone" />
    </content-node>
    <content-node action="update" uniquename="ibm.portal.HiddenPages">
      <supported-deviceclass update="set" classref="smartphone" />
    </content-node>
    <content-node action="update" uniquename="wps.Login">
      <supported-deviceclass update="set" classref="smartphone" />
    </content-node>

    <content-node action="update" uniquename="rwd.smartphone">
      <supported-deviceclass update="set" classref="smartphone" />
    </content-node>
  </portal>
</request>

前述のサンプル階層では、このスクリプトによってスマートフォン用のページ構造が表示されることになります (図 8 を参照)。

図 8. スマートフォンでのページ構造
スマートフォンでのページ構造を示す画面のスクリーン・キャプチャー
  • ibm.portal.home (ラベル): ”smartphone” をオプトイン
    • ibm.portal.Home.Welcome (ページ): ”smartphone” をオプトイン
    • ibm.portal.Home.Getting Started (ページ): “smartphone” ユーザーに対しては表示されません
    • rwd.smartphone (ページ): ”smartphone” をオプトイン
    • rwd.tablet (ページ): “smartphone” ユーザーに対しては表示されません
  • ibm.portal.HiddenPages (ラベル): ”smartphone” をオプトイン
    • wps.Login (ページ): ”smartphone” をオプトイン

リスト 14 に、”tablet” デバイス・クラスをサイトに適用する、同様のサンプル・スクリプトを記載します。

リスト 14. タブレット機器のフィルタリングを適用するサンプル xmlaccess スクリプト
<request type="update" version="8.0.0.1" 
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
xsi:noNamespaceSchemaLocation="PortalConfig_8.0.0.xsd">
  <portal action="locate">
    <device-class action="locate" objectid="tablet" 
uniquename="wps.deviceclass.tablet"/>
    <content-node action="update" uniquename="ibm.portal.Home">
      <supported-deviceclass update="set" classref="tablet" />
    </content-node>
    <content-node action="update" uniquename="ibm.portal.Home.Welcome">
      <supported-deviceclass update="set" classref="tablet" />
    </content-node>
    <content-node action="update" uniquename="ibm.portal.HiddenPages">
      <supported-deviceclass update="set" classref="tablet" />
    </content-node>
    <content-node action="update" uniquename="wps.Login">
      <supported-deviceclass update="set" classref="tablet" />
    </content-node>
    <content-node action="update" uniquename="rwd.tablet">
      <supported-deviceclass update="set" classref="tablet" />
    </content-node>
  </portal>
</request>

この場合も、前述のサンプル階層では、このスクリプトによってタブレット用のページ構造が表示されることになります (図 9 を参照)。

図 9. タブレットでのページ構造
タブレットでのページ構造を示す画面のスクリーン・キャプチャー
  • ibm.portal.home (ラベル): ”tablet” をオプトイン
    • ibm.portal.Home.Welcome (ページ): ”tablet” をオプトイン
    • ibm.portal.Home.Getting Started (ページ): “tablet” ユーザーに対しては表示されません
    • rwd.smartphone (ページ): “tablet” ユーザーに対しては表示されません
    • rwd.tablet (ページ): ”tablet” をオプトイン
  • ibm.portal.HiddenPages (ラベル): ”tablet” をオプトイン
    • wps.Login (ページ): ”tablet” をオプトイン

このように、<supported-deviceclass /> メタデータ要素を使用することで、デバイス・クラスに基づいたモバイル機器でのページ構造を制御することができます。


コンテンツ・ターゲット指定 (パーソナライズ) 機能を使用してページ・ナビゲーションをフィルタリングする

Portal 8.0.0.1 から、ページ (またはポートレット) の表示/非表示を定義するルール定義の一部として、デバイス・クラスを使用できるようになりました。ルール定義にデバイス・クラスを使用するには、Portal 管理の「Manage Pages (ページの管理)」にナビゲートします。ナビゲーションに組み込むページまたは除外するページを見つけて、ページ・プロパティーを編集します。「Advanced (拡張)」セクションで、ページの表示/非表示ルールを定義します。詳細については、WebSphere Portal 製品ドキュメントのトピック「Personalization」および「可視性ルール」を参照してください。

以降に記載する例では、以下のページ階層を使用します。

  • Home (ラベル)
    • Welcome (ページ)
    • Getting Started (ページ)
    • Targeting Desktop (ページ)
    • Targeting Smartphone (ページ)
    • Targeting Tablet (ページ)

「Targeting Smartphone」ページには、「Is Smartphone」という名前の表示/非表示ルールを定義します (図 10 を参照)。

図 10. スマートフォン機器をターゲットとした表示/非表示ルール
スマートフォン機器をターゲットとした表示/非表示ルールのスクリーン・キャプチャー

「Targeting Tablet」ページには、「Is Tablet」という名前の表示/非表示ルールを定義します (図 11 を参照)。

図 11. タブレット機器をターゲットとした表示/非表示ルール
タブレット機器をターゲットとした表示/非表示ルールのスクリーン・キャプチャー

「Targeting Desktop」ページには、「Is Desktop」という名前の表示/非表示ルールを定義し、機器がスマートフォンでもタブレットでもない場合にページを表示するようにします (図 12 を参照)。追加の機器を導入する場合は、条件を追加する必要があります。

図 12. デスクトップ機器をターゲットとした表示/非表示ルール
デスクトップ機器をターゲットとした表示/非表示ルールのスクリーン・キャプチャー

以上のルールをさまざまなページに対して設定して、ページの表示/非表示を制御します。例えば、「Targeting Smartphone」ページには、図 13 に示すように「Is Smartphone」ルールが適用されます。「Is Tablet」ルールと「Is Desktop」ルールは、それぞれ他の 2 つのページに対して適用することができます。

図 13. 「Targeting Smartphone」ページに対して設定された表示/非表示ルール
「Targeting Smartphone」ページに対して設定された表示/非表示ルールのスクリーン・キャプチャー

デスクトップ・ブラウザーで「Home」ラベルまでナビゲートすると、図 14 のように表示されます。

図 14. デスクトップの表示/非表示ルールを使用して表示されるページ
デスクトップの表示/非表示ルールを使用して表示されるページのスクリーン・キャプチャー
  • Home (ラベル)
    • Welcome (ページ)
    • Getting Started (ページ)
    • Targeting Desktop (ページ) での表示/非表示ルール「Is Desktop」
    • Targeting Smartphone (ページ) での表示/非表示ルール「Is Smartphone」
    • Targeting Tablet (ページ) での表示/非表示ルール「Is Tablet」

iPhone 機器でアクセスすると、同じ領域が図 15 のように表示されます。

図 15. スマートフォンの表示/非表示ルールを使用して表示されるページ
スマートフォンの表示/非表示ルールを使用して表示されるページのスクリーン・キャプチャー

さらに、iPad でアクセスすると、同じ領域が今度は図 16 のように表示されます。

図 16. タブレットの表示/非表示ルールを使用して表示されるページ
タブレットの表示/非表示ルールを使用して表示されるページのスクリーン・キャプチャー

1 つの欠点として、名前が設定されていないページは表示/非表示ルールをサポートしません。ユーザーがログインしていない場合で、このサンプルのページが匿名ユーザーに対して表示可能になっている場合、これらのページがすべて表示されることになります (図 17 を参照)。

図 17. 名前が設定されていないため、表示/非表示ルールが機能しないページ
すべての表示/非表示ルールを使用して表示されるページのスクリーン・キャプチャー

2 つのモードのフィルタリングを混在させることに関して注意しなければならないことは、もう 1 つあります。前述のとおり、ナビゲーションのフィルタリングはオプトイン・モデルであり、これがターゲット指定ルールより優先されます。したがって、スマートフォンに対して表示可能にするためにターゲット指定ルールをページに追加したとしても、そのデバイス・クラス用のオプトインが必ず追加されていなければなりません。これは混乱を招く可能性があることから、両方のフィルターを使用するのではなく、どちらか一方のフィルターだけを使用するのが最善です。


まとめ

WebSphere Portal のデバイス・クラス抽象化を使用して、特定の機器のグループを対象に開発することにより、モバイル機器のユーザー・インターフェースのデザインとパフォーマンスを最適化することができるだけでなく、それぞれの機器に最適なコンテンツを表示するようにサイトをパーソナライズすることもできます。このような制御の強化は、顧客満足度を高めたり、並外れたレスポンシブ・エクスペリエンスをもたらしたりする上で有効です。


ダウンロード

内容ファイル名サイズ
Responsive design sample filesrwd2_sample_files.zip19KB

参考文献

学ぶために

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

議論するために

コメント

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=934634
ArticleTitle=WebSphere Portal を使用してレスポンシブ Web デザインを実装する: 第 2 回 デバイス・クラスを使用して特定の機器をターゲットに開発する
publish-date=06202013