Oracle® Fusion Middleware

Oracle ADFモバイル・ブラウザ・アプリケーションの開発

12c (12.1.3)

E56273-02(原本部品番号:E41274-02)

2015年12月

Oracle JDeveloperを使用して、Apache MyFaces Trinidad Webクライアント・コンポーネントで構成されるモバイル・ブラウザ・ベースのアプリケーションを作成する方法について説明する、Oracle Application Development Framework (Oracle ADF)の開発者のためのドキュメント。

Oracle ADFモバイル・ブラウザ・アプリケーションの開発 12c (12.1.3)

E56273-02

Copyright © 2014, 2015 Oracle and/or its affiliates All rights reserved.

原本著者: John Bassett

原本協力著者: Mamallan Uthaman

このソフトウェアおよび関連ドキュメントの使用と開示は、ライセンス契約の制約条件に従うものとし、知的財産に関する法律により保護されています。ライセンス契約で明示的に許諾されている場合もしくは法律によって認められている場合を除き、形式、手段に関係なく、いかなる部分も使用、複写、複製、翻訳、放送、修正、ライセンス供与、送信、配布、発表、実行、公開または表示することはできません。このソフトウェアのリバース・エンジニアリング、逆アセンブル、逆コンパイルは互換性のために法律によって規定されている場合を除き、禁止されています。

ここに記載された情報は予告なしに変更される場合があります。また、誤りが無いことの保証はいたしかねます。誤りを見つけた場合は、オラクル社までご連絡ください。

このソフトウェアまたは関連ドキュメントを、米国政府機関もしくは米国政府機関に代わってこのソフトウェアまたは関連ドキュメントをライセンスされた者に提供する場合は、次の通知が適用されます。

U.S. GOVERNMENT END USERS: Oracle programs, including any operating system, integrated software, any programs installed on the hardware, and/or documentation, delivered to U.S. Government end users are "commercial computer software" pursuant to the applicable Federal Acquisition Regulation and agency-specific supplemental regulations. As such, use, duplication, disclosure, modification, and adaptation of the programs, including any operating system, integrated software, any programs installed on the hardware, and/or documentation, shall be subject to license terms and license restrictions applicable to the programs. No other rights are granted to the U.S. Government.

このソフトウェアもしくはハードウェアは様々な情報管理アプリケーションでの一般的な使用のために開発されたものです。このソフトウェアもしくはハードウェアは、危険が伴うアプリケーション(人的傷害を発生させる可能性があるアプリケーションを含む)への用途を目的として開発されていません。このソフトウェアもしくはハードウェアを危険が伴うアプリケーションで使用する際、安全に使用するために、適切な安全装置、バックアップ、冗長性(redundancy)、その他の対策を講じることは使用者の責任となります。このソフトウェアもしくはハードウェアを危険が伴うアプリケーションで使用したことに起因して損害が発生しても、オラクル社およびその関連会社は一切の責任を負いかねます。

OracleおよびJavaはOracle およびその関連企業の登録商標です。その他の名称は、それぞれの所有者の商標または登録商標です。

Intel、Intel Xeonは、Intel Corporationの商標または登録商標です。すべてのSPARCの商標はライセンスをもとに使用し、SPARC International, Inc.の商標または登録商標です。AMD、Opteron、AMDロゴ、AMD Opteronロゴは、Advanced Micro Devices, Inc.の商標または登録商標です。UNIXはThe Open Groupの登録商標です。

このソフトウェアまたはハードウェア、そしてドキュメントは、第三者のコンテンツ、製品、サービスへのアクセス、あるいはそれらに関する情報を提供することがあります。適用されるお客様とOracle Corporationとの間の契約に別段の定めがある場合を除いて、Oracle Corporationおよびその関連会社は、第三者のコンテンツ、製品、サービスに関して一切の責任を負わず、いかなる保証もいたしません。適用されるお客様とOracle Corporationとの間の契約に定めがある場合を除いて、Oracle Corporationおよびその関連会社は、第三者のコンテンツ、製品、サービスへのアクセスまたは使用によって損失、費用、あるいは損害が発生しても一切の責任を負いかねます。

目次

タイトルおよび著作権情報

はじめに

- ドキュメントのアクセシビリティについて

- 対象読者

- 関連ドキュメント

- 表記規則

1 Oracle ADFモバイル・ブラウザの概要

- 1.1 ADFモバイル・ブラウザについて

- 1.1.1 ADFモバイル・ブラウザでアプリケーションのパフォーマンスを向上させる方法

- 1.1.2 Java Server FacesおよびApplication Development Frameworkについて

- 1.1.3 ADFモバイル・ブラウザを使用したモバイル・アプリケーションの開発

- 1.2 サポートされているモバイル・ブラウザ機能

2 ADFモバイル・ブラウザ環境の構成

- 2.1 ADFモバイル・ブラウザ・アプリケーションの開発について

- 2.2 ADFモバイル・ブラウザの開発環境の構成

- 2.2.1 モバイル・アプリケーションおよびプロジェクトの作成方法

- 2.2.2 モバイル・アプリケーションおよびプロジェクト作成時の処理内容

- 2.3 ADFモバイル・ブラウザ・アプリケーションの開発

- 2.3.1 モバイルJSFページの開発方法

- 2.4 ADFモバイル・ブラウザ・アプリケーションのテスト

- 2.4.1 シミュレータでのADFモバイル・ブラウザ・アプリケーションのテスト方法

- 2.4.2 ブラウザの設定に関する必知事項

3 コンポーネントのサポート

- 3.1 Apache MyFaces Trinidadコンポーネントについて

- 3.1.1 サポートされている機能

- 3.1.2 部分ページ・レンダリング

- 3.1.3 ダイアログ

- 3.1.4 BlackBerryブラウザ4.5以前のバージョンに固有のレンダリング

- 3.2 入力コンポーネント

- 3.2.1 入力テキスト・フィールドの作成

- 3.2.2 リストの作成

- 3.3 出力コンポーネント

- 3.3.1 テキストの表示

- 3.3.2 イメージの表示

- 3.3.3 コンポーネントの表示(または非表示)

- 3.4 レイアウト・コンポーネント

- 3.4.1 ページの管理

- 3.4.2 ページのセクションの配置

- 3.4.3 空白の挿入

- 3.5 ナビゲーション・コンポーネント

- 3.5.1 ボタンの作成

- 3.5.2 リンクの作成

- 3.5.3 ナビゲーション・コンポーネント

- 3.6 データの視覚化(グラフおよびゲージ)

- 3.7 表およびツリー

- 3.7.1 表の作成

- 3.7.2 ツリーの作成

- 3.8 HTML <meta>タグの生成

- 3.8.1 <trh:meta>を使用したHTML <meta>タグの生成

- 3.8.1.1 モバイル・デバイスでのデフォルト・ビュー・ポート・サイズについて

- 3.9 サポートされないコンポーネントおよび属性

- 3.9.1 サポートされないコンポーネント

- 3.9.2 サポートされない属性

4 ADFモバイル・ブラウザ・アプリケーションのスキニング

- 4.1 ADFモバイル・ブラウザのスキニングについて

- 4.2 ADFモバイル・ブラウザのスキニングの実装

- 4.2.1ADFモバイル・スキンの拡張

- 4.3 ADFモバイル・ブラウザのスキニングの適用

- 4.3.1 ヘッダー

- 4.3.1.1 タイトルのみのヘッダーの作成

- 4.3.1.2 タイトルおよびリンク付きのヘッダーの作成

- 4.3.2 表コンポーネント

- 4.3.2.1 複数列の表

- 4.3.2.2 イメージおよびリンク付きの主要な詳細の追加

- 4.3.2.3 リンク付きの主要な詳細の作成

- 4.3.2.4 リンクなしの主要な詳細の作成

- 4.3.3 パネル・リスト・コンポーネント

- 4.3.4 panelFormLayout

- 4.3.5 パネル・アコーディオン

5 基本的なHTMLモバイル・ブラウザのサポート

- 5.1 基本的なHTMLモバイル・ブラウザのサポートについて

- 5.1.1 基本的なHTMLモバイル・ブラウザのサポート要件

- 5.2 基本的なHTMLモバイル・ブラウザ用のアプリケーションの開発

- 5.3 基本的なHTMLモバイル・ブラウザのスタイル設定

6 BlackBerry 4.2から4.5向けの設計ガイドライン

- 6.1 BlackBerryブラウザの表示動作について

- 6.2 折返しを回避するための表の書式設定

- 6.2.1 表内におけるフィールドの折返しの回避方法

- 6.3 ラベルおよびメッセージ・パネルの書式設定

- 6.4 列幅の書式設定

- 6.5 BlackBerryスマートフォンでの表示の差異に関する必知事項

- 6.5.1 最小フォント・サイズの変更

- 6.5.2 フォーム・ファクタの違い

7 幅が狭い画面のサポートおよびユーザー・エージェントの詳細のサポート

- 7.1 幅が狭い画面のサポートの特定

- 7.1.1 Trinidadによる幅が狭い画面の最適化の特定方法

- 7.2 EL式を使用したユーザー・エージェント機能の特定

- 7.2.1 ユーザー・エージェントの詳細の特定方法

- 7.2.2 ブラウザの機能の特定方法

8 ADFモバイル・ブラウザ・アプリケーションの拡張

- 8.1 電子メール、電話およびGoogleマップを使用するためのアプリケーション拡張の概要

- 8.2 電子メール・クライアントの統合

- 8.2.1 メールのプロパティの追加

- 8.3 電話の統合

- 8.4 Googleマップの統合

- 8.4.1 ルート案内のプログラミング

- 8.4.2 iPhone上でのGoogleマップのサポート

- 8.5 ページ表示ディメンションに関する必知事項

- 8.5.1 iPhone用のビュー・ポートの設定

はじめに

『Oracle ADFモバイル・ブラウザ・アプリケーションの開発』にようこそ。

ドキュメントのアクセシビリティについて

Oracleのアクセシビリティについての詳細情報は、Oracle Accessibility ProgramのWebサイト(http://www.oracle.com/pls/topic/lookup?ctx=acc&id=docacc)を参照してください。

Oracle Supportへのアクセス

サポートをご購入のOracleのお客様は、My Oracle Supportにアクセスして電子サポートを受けることができます。詳細情報は(http://www.oracle.com/pls/topic/lookup?ctx=acc&id=info)か、聴覚に障害のあるお客様は(http://www.oracle.com/pls/topic/lookup?ctx=acc&id=trs)を参照してください。

対象読者

このドキュメントは、モバイル・デバイス用ブラウザ・アプリケーションの開発者を対象としています。

関連ドキュメント

詳細は、次の関連ドキュメントを参照してください。

- Oracle Fusion Middleware Oracle Application Development Frameworkの理解

- Oracle JDeveloperによるアプリケーションの開発

- Oracle Fusion Middleware Oracle Application Development FrameworkによるFusion Webアプリケーションの開発

- Oracle Fusion Middleware Oracle ADF FacesによるWebユーザー・インタフェースの開発

- Oracle Fusion MiddlewareでのOracle ADFアプリケーションの管理

- Oracle JDeveloper 12cリリース・ノート(JDeveloper 12cのインストール内およびOracle Technology Networkにあります)

- Oracle JDeveloperのオンライン・ヘルプ

表記規則

このマニュアルでは次の表記規則を使用します。

規則

意味

太字

太字は、操作に関連するGraphical User Interface要素、または本文中で定義されている用語および用語集に記載されている用語を示します。

イタリック体

イタリックは、ユーザーが特定の値を指定するプレースホルダ変数を示します。

固定幅フォント

固定幅フォントは、段落内のコマンド、URL、サンプル内のコード、画面に表示されるテキスト、または入力するテキストを示します。

1 Oracle ADFモバイル・ブラウザの概要

この章では、Oracle Application Development Frameworkモバイル(ADFモバイル)・ブラウザの概要について説明します。

この章には次の項が含まれます:

- 1.1項「ADFモバイル・ブラウザについて」

- 1.2項「サポートされているモバイル・ブラウザ機能」

1.1 ADFモバイル・ブラウザについて

Oracle Application Development Frameworkモバイル(ADFモバイル)ブラウザでは、様々なタイプのスマートフォンやフィーチャー・フォンで使用されるモバイル・ブラウザの要件に合う、ブラウザ・ベースのエンタープライズ・モバイル・アプリケーションを作成できます。ADFモバイルの標準ベースのフレームワークを使用して、たとえば、スマートフォンでユーザーが経費レポートを承認したり、企業の連絡先情報を検索したりすることが可能なWebアプリケーションを作成できます。ADFモバイル・ブラウザでは、モバイル・フォン自体のフォーム・ファクタとそのモバイル・ブラウザの機能の両方に基づいてコンテンツの自動検出および配信を行えるため、アプリケーションをデプロイする前に1回だけビルドすれば済みます。つまり、ADFモバイル・ブラウザ・アプリケーションは、多くのモバイル・ブラウザと互換性があるため、特定のモバイル・ブラウザの制限にとらわれる必要はないということです。

注意:
ADFモバイル・ブラウザおよびOracleのモバイル戦略の詳細は、Oracle Technology Network (http://www.oracle.com/technetwork/index.html)のOracle ADFモバイル・ブラウザのページを参照してください。

ADFモバイル・ブラウザのレンダラにより、確実にターゲット・ブラウザがコンテンツを正しく使用できるようになります。HTML、JavaScript、CSS (Cascading Style Sheets)、DOM (Document Object Model)、XMLHttpRequest (XHR) APIに関するブラウザ固有の実装の差異だけではなく、システム・パフォーマンスの違いも処理されます。たとえば、ブラウザでXMLHttpRequestインタフェースがサポートされておらず、サーバーに部分的なページ・リクエストを送信できない場合、ADFモバイル・ブラウザにより、アプリケーションで自動的にページ全体の送信に戻してページを正常に機能させることができます。

1.1.1 ADFモバイル・ブラウザでアプリケーションのパフォーマンスを向上させる方法

ADFモバイル・ブラウザのレンダラは、ワイヤレス・ネットワーク上でモバイル・フォンに送信されるWebページのペイロードを最小化することによって、パフォーマンスが向上するように最適化されています。待機時間が長く帯域幅が小さいワイヤレス・ネットワークを使用するモバイル環境では、最適なエンドユーザー・エクスペリエンスを実現するうえで、部分ページ・レンダリング(PPR)が不可欠です。AJAX (Asynchronous JavaScript and XML)をサポートしているモバイル・ブラウザの場合、ADFモバイル・ブラウザは、特定のコンポーネントに対してPPRをサポートします。これにより、サーバーからのリクエスト・データ量を最小化し、アプリケーションの応答性を向上させることができます。3.1.2項「部分ページ・レンダリング」も参照してください。

注意:
ADFモバイルは、スマートフォン・ブラウザのAJAX機能を活用しますが、正常に機能を低下させて、単純なHTMLブラウザもサポートします。

1.1.2 Java Server FacesおよびApplication Development Frameworkについて

Java Server Faces (JSF)は、機能および動作を定義する事前作成コンポーネントを使用してユーザーがアプリケーションを作成できるようにするための標準であり、JSR-127によって規定されています。図1-1に示すように、JSFでは、Webアプリケーションの開発を単純化するModel-View-Controller (MVC)メカニズムが採用されています。そのレンダーキットは、コンポーネントを特定のマークアップ言語に変換したり、特定のマークアップ言語をコンポーネントに変換したりします。このキットのレンダラはコンポーネントと、それらがブラウザ要求をどのように解釈するかを表すマークアップを生成します。

JSF開発では、マークアップではなくコンポーネントに焦点を当てます。JSFを使用して、JSFコンポーネント・タグを含むJSPページを作成します。(FacesServletを介して)ユーザーがこのページにアクセスすると、JSFではユーザーのデバイスで指定したレンダーキットが使用され、出力が適切になるようにマークアップがエンコードされます。たとえば、ユーザーのデバイスでデスクトップ・ブラウザに対しHTMLを指定すると、レンダーキットのマークアップ・エンコーディングがHTMLページになります。適切なコンテンツのレンダリングに加え、JSFではユーザーによる操作がサポートされています。

図1-1 ADFモバイルのアーキテクチャ

Application Development Framework (ADF)は標準的なJSFテクノロジに基づいて構築されており、次のものを提供します。

- 大規模なコンポーネント・セット(JSFでは基本的なコンポーネントのみが提供されるため)。

- これらのコンポーネントをHTMLブラウザでサポートするレンダラ(AJAXテクノロジを使用したアプリケーション用のレンダーキットを含む)。

- コンバータ、バリデータおよびイベント。

1.1.3 ADFモバイル・ブラウザを使用したモバイル・アプリケーションの開発

ADFモバイル・ブラウザはJava Server Faces (JSF)のコンポーネント・モデルに基づいて構築されているため、モバイル・ブラウザ用のアプリケーションを迅速に開発できます。そのモバイル固有の機能がJSFに拡張されたことで、デスクトップ(またはタブレット)用JSFアプリケーションを開発するのと同じ方法を使用してモバイル・アプリケーションを開発できるようになりました(Oracle Fusion Middleware Oracle ADF FacesによるWebユーザー・インタフェースの開発を参照してください)。

注意:
ADFモバイル・ブラウザ・アプリケーションは、スマートフォンまたはフィーチャー・フォンで使用されるモバイル・ブラウザ上で実行することを意図しています。デスクトップ・ブラウザ上での実行を意図したものではありません。

ADFモバイル・ブラウザ・アプリケーションの開発方法は、ADF Webアプリケーションの開発方法とほぼ同じですが、アプリケーションのJSFページをApache MyFaces Trinidadコンポーネント脚注1から構築する点が異なります。60を超えるApache MyFaces Trinidadコンポーネントをサポートすることで、ADFモバイルでは豊富なコンポーネント・セットが提供されます。

注意:
ADFモバイル・ブラウザ・アプリケーションの開発に、ADF Facesリッチ・クライアント・コンポーネントを使用することはできません。Apache MyFaces Trinidadコンポーネントを使用する必要があります。

モバイル向けに最適化されたスタイル・シート(これは、ADFモバイル・ブラウザ・プロジェクトに自動的に含まれます)により、各コンポーネントがデバイスのブラウザに適切にレンダリングされるようになります。デスクトップ・ブラウザ・アプリケーションを拡張して、スマートフォンまたはフィーチャー・フォンで実行できるようにすることが可能です。それには、そのモデルおよびコントローラ・レイヤーを再利用し、ADF Facesコンポーネントに対応するApache MyFaces Trinidadコンポーネントを使用して新しいビュー・レイヤーをアセンブルします。詳細は、2.2項「DFモバイル・ブラウザの開発環境の構成」および4.2項「ADFモバイル・ブラウザのスキニングの実装」を参照してください。

注意:
ADF Facesコンポーネントを使用して、最新スマートフォンのブラウザで実行するアプリケーションを作成できます。旧式のデバイスや古い機能を持つ携帯電話を対象としたブラウザベースのアプリケーションについては、ADFモバイル・ブラウザを使用してください。このガイドでは、Apache Trinidadコンポーネントを使用したJavaServerページの作成方法について説明します。ADF Facesコンポーネントの詳細は、Oracle Fusion Middleware Oracle ADF FacesによるWebユーザー・インタフェースの開発を参照してください。サポートされているモバイル・ブラウザの詳細は、認定情報(http://www.oracle.com/technetwork/developer-tools/jdev/documentation/index.html)を参照してください。

1.2 サポートされているモバイル・ブラウザ機能

ADFモバイルでは、AndroidスマートフォンやiOSスマートフォンで使用されるものなど、様々なタイプのタッチスクリーン・ユーザー・インタフェースがサポートされています。ADFモバイルはApple標準をサポートしているため、iOSスマートフォンでは、ネイティブのiOSユーザー・インタフェースが提供されます。表1-1に、ADFモバイルがサポートしているモバイル・ブラウザおよび機能を示します。

注意:
ADFモバイル・ブラウザでは、HTMLおよびJavaScriptがサポートされている必要があります。第5章「基本的なHTMLモバイル・ブラウザのサポート」を参照してください。

表1-1 サポートされているブラウザおよびサポートされているモバイル機能

ブラウザ

JavaScriptサポート

CSSサポート

PPRサポート

Android Webkit

はい

はい

はい

Apple iPhone Safari

はい

はい

はい

BlackBerryバージョン4.2から4.5

いいえ

はい

いいえ

BlackBerryバージョン4.6以上

はい

はい

はい

Microsoft Windows Mobile 5

はい

はい

(どちらかといえば)あり

Microsoft Windows Mobile 6

はい

はい

はい

Nokia s60シリーズ

はい

はい

いいえ

単純なHTML (Opera Mini、Opera MobileおよびSkyfireなど)

いいえ

はい

いいえ

脚注の説明

脚注1: Apache MyFaces Trinidadコンポーネント・セットは、Apache Software Foundationに無償提供された、第1世代のADF Facesコンポーネント・セットです。

2 ADFモバイル・ブラウザ環境の構成

この章では、ADFモバイル・ブラウザの開発環境を構成する方法、ADFモバイル・ブラウザ・ビューを作成する方法、およびアプリケーションを構築してテストする方法について説明します。

この章には次の項が含まれます:

- 2.1項「ADFモバイル・ブラウザ・アプリケーションの開発について」

- 2.2項「ADFモバイル・ブラウザの開発環境の構成」

- 2.3項「ADFモバイル・ブラウザ・アプリケーションの開発」

- 2.4項「ADFモバイル・ブラウザ・アプリケーションのテスト」

2.1 ADFモバイル・ブラウザ・アプリケーションの開発について

ADFモバイル・ブラウザ・アプリケーションは、モバイル・デバイス用に最適化されているADF Facesアプリケーションです。そのため、モバイル・ブラウザ・アプリケーションは、標準のADF Facesアプリケーション用に作成されたモデル・プロジェクトを使用できます。または、ADFモバイル・ブラウザ・ビュー・コントローラ・プロジェクトを既存のADF facesアプリケーションに追加することができます。ADFモバイル・ブラウザ・ビュー・コントローラ・プロジェクトの作成後、Apache MyFaces Trinidadコンポーネントによって作成されたJSFページからモバイル・ブラウザ・アプリケーションを構築できます。

ADFモバイル・ブラウザ・アプリケーションを作成するには、次の手順を実行します。

- アプリケーションおよびモデル・プロジェクトの作成による環境の構成

ヒント:
既存のADFアプリケーションのビジネス・ロジック・コンポーネントを使用できます。

- ADFモバイル・ブラウザ・ビュー・コントローラ・プロジェクトを追加します。

- ADFタスク・フローまたはADFページ・フローを作成します。

注意:
ADFモバイル・ブラウザ・アプリケーションで使用されるADFタスク・フローは、ページ全体のみをサポートしています。ページ・フラグメント、ダイアログ内のポップアップ、またはリージョンはサポートしていません。ADFページ・フローを使用するADFモバイル・ブラウザ・アプリケーションでは、trinidad-simpleスキン・ファミリのみがサポートされます。

- Apache MyFaces Trinidadコンポーネントで移入されたJSFページを追加します。

- ADFモバイル・ブラウザ・スキニングを使用してページ・レイアウトを最適化します。

- スマートフォンまたはスマートフォン・シミュレータでアプリケーションをテストします。

2.2 ADFモバイル・ブラウザの開発環境の構成

ADFモバイル・ブラウザ・アプリケーション開発には、モバイル向けに最適化されたビュー・コントローラ・プロジェクトが必要です。

2.2.1 モバイル・アプリケーションおよびプロジェクトの作成方法

環境を構成するには、まず、ADFモバイル・ブラウザ・テクノロジを備えたプロジェクトを含むADFモバイル・ブラウザ・アプリケーションを作成します。カスタム・プロジェクトの作成ウィザードに表示される使用可能なテクノロジのリストからTrinidadを選択して明示的にプロジェクトに追加し、Apache MyFaces Trinidadコンポーネントをプロジェクトに含める必要があります。

始める前に:

必要に応じてADFモデル・プロジェクトを作成します。それ以外の場合、ADFモバイル・ブラウザ・アプリケーションでは、モデル・プロジェクトを既存のADFアプリケーションと共有できます。

ADFモバイル・ブラウザ・アプリケーションおよびADFモバイル・ブラウザ・プロジェクトを作成するには、次の手順を実行します。

1. 「ファイル」→「新規」→「アプリケーション」を選択します。

図2-1 新規ギャラリ

2. 「新規ギャラリ」で、「アプリケーション」→「ADF Fusion Webアプリケーション」を選択します。「OK」をクリックします。

3. 図2-2に示すように、「ADF Fusion Webアプリケーションの作成」ウィザードの「アプリケーションの名前付け」ページでアプリケーションの名前を入力し、必要に応じて「ディレクトリ」フィールドにアプリケーションの場所を入力します。

図2-2 ADFモバイル・ブラウザ・アプリケーションの名前付け

4. 「終了」をクリックします。
「ADF Fusion Webアプリケーション」を選択すると、モバイル・ビュー・プロジェクトによって使用されるモデル・プロジェクトが作成されます。図2-3は、「アプリケーション」ウィンドウに表示された、アプリケーションのモデル・プロジェクトおよび生成済のビュー・コントローラ・プロジェクトを示しています。

図2-3 「アプリケーション」ウィンドウ内のFusion Webアプリケーションとそのプロジェクト

注意:
生成されたビュー・コントローラ・プロジェクトを使用してモデル・プロジェクト内でビジネス・ロジックを設計しないでください。かわりに、次の手順を実行してモバイル・ビュー・コントローラ・プロジェクトを作成します。

5. 次のように、モバイル・ビュー・コントローラ・プロジェクトを作成します。

1. 「ファイル」→「新規」→「プロジェクト」を選択します。

2. 「カスタム・プロジェクト」を選択し、「OK」をクリックします。

3. 図2-4に示されているように、「カスタム・プロジェクトの作成」ウィザードで、まずプロジェクト名を入力します。たとえば、mvc(モバイル・ビュー・コントローラの省略名)と入力します。

ヒント:
モバイル・デバイスのブラウザでより容易に識別される、短いURL文字列を作成するには、小文字、ADFモバイル・ブラウザ・プロジェクトの短縮名、およびその.jspxページを使用してください。2.4項「ADFモバイル・ブラウザ・アプリケーションのテスト」も参照してください。

4. 「ADFモバイル・ブラウザ」を「選択可能」リストから「選択済」リストに移動することによって、プロジェクト用にADFモバイル・ブラウザ機能を選択します。

図2-4 ADFモバイル・ブラウザ・プロジェクト用のADFモバイル・ブラウザ・テクノロジの選択

図2-4は、「選択可能」ウィンドウ内の「ADFモバイル・ブラウザ」機能を示しています。「ADFモバイル・ブラウザ」機能を「選択済」ウィンドウに移動すると、Java、JSF (JavaServer Faces)、JSPおよびサーブレット、およびXMLテクノロジがプロジェクトで使用可能になり、図2-5に示すようにこれらも「選択済」ウィンドウに表示されます。

図2-5 ADFモバイル・ブラウザ・プロジェクト用に選択されたADFモバイル・ブラウザおよびサポート機能

5. 図2-6に示すようにTrinidadを「使用可能」リストから「選択済」リストに移動し、プロジェクト用のApache MyFaces Trinidadコンポーネントを選択します。

図2-6 ADFモバイル・ブラウザ・プロジェクトへのApache MyFaces Trinidadコンポーネントの追加

6. アプリケーションでADFタスク・フローを使用する場合は、「ADFページ・フロー」機能を「選択済」ウィンドウに追加します。図2-7に示すように、「ADFページ・フロー」機能により、ADF FacesおよびADFページ・フローを含むその他のテクノロジが追加されます。

図2-7 ADFモバイル・ブラウザ・プロジェクトへの「ADFページ・フロー」機能の追加

6. 「次へ」をクリックして「Java設定の構成」ページをナビゲートし、「終了」をクリックします。

2.2.2 モバイル・アプリケーションおよびプロジェクト作成時の処理内容

図2-8に示すように、「アプリケーション」ウィンドウのFusion Webアプリケーション(adfm)内に、モバイル・ビュー・コントローラ・プロジェクト(mvc)が表示されます。

図2-8 「アプリケーション」ウィンドウのモバイルADFモバイル・ブラウザ・ビュー・コントローラ・プロジェクト

ビュー・コントローラ・プロジェクトを作成することで、モバイル・アプリケーションのページ・フロー定義ファイルfaces-config.xmlも作成されます。ページ・フローの作成の詳細は、Oracle Fusion Middleware Oracle ADF FacesによるWebユーザー・インタフェースの開発のページ・フローの定義に関する項を参照してください。

ADFモバイル・ブラウザおよびADFページ・フロー・テクノロジをADFモバイルのカスタム・ビュー・プロジェクトに追加すると、次のADFスキン関連構成ファイルとスタイル・シートが作成されます。それらの構成ファイルとスタイル・シートにより、ターゲットのモバイル・ブラウザにコンポーネントが適切にレンダリングされるようになります。表2-1は、ADFモバイル・ブラウザ・ビュー・コントローラ・プロジェクトのWebコンテンツ・フォルダにある、これらのファイルを示しています。

表2-1 スキニング関連のアーティファクト

スキニング・ファイル

場所

説明

mobile.css

モバイル・ビュー・コントローラ・プロジェクトのスタイル・ノード

基本的なHTMLブラウザと、古いバージョンのスマートフォンで使用されるブラウザに使用されます。4.2項「ADFモバイル・ブラウザのスキニングの実装」も参照してください。

richmobile.css

モバイル・ビュー・コントローラ・プロジェクトのスタイル・ノード

iOSやBlackBerryなどで動くスマートフォンに使用されます。4.2項「ADFモバイル・ブラウザのスキニングの実装」も参照してください。

2.3 ADFモバイル・ブラウザ・アプリケーションの開発

モバイル・ブラウザ・アプリケーションの開発では、Webプロジェクト内にWebページを作成します。通常、アプリケーションには、ユーザー・インタフェースを実装する場合はWebプロジェクトを、ビジネス・レイヤーを実装する場合はADFビジネス・コンポーネントまたはOracle EclipseLinkプロジェクトを作成します。

2.3.1 モバイルJSFページの開発方法

ADFモバイル・ブラウザ・アプリケーション・ページの作成では、最初にJSFページを作成してから、そこにApache MyFaces Trinidadコンポーネントを移入します。通常、モバイル・アプリケーションのJSFページを作成する前に、まずfaces-config.xmlファイルを使用してナビゲーション・ルールを作成します。

モバイルJSFページを作成するには、次の手順を実行します。

1. 「アプリケーション」ウィンドウでモバイル・ビュー・コントローラ・プロジェクトを選択し、「新規」→「ページ」を選択します。

2. 図2-9に示すように、「JSFページの作成」ダイアログで、JSFページの名前を入力します。必要に応じて、ページのディレクトリの場所を入力します。FaceletsまたはJSP XMLを選択できます。

3. 図2-9 「JSFページの作成」ダイアログ・ボックス

図2-10は、page1.jsfというモバイルJSFページのデザイナを示しています。

4. 「コンポーネント」ウィンドウで、図2-10のように「Trinidad」を選択してから、Apache MyFaces Trinidadコンポーネントを使用してページを作成します。これらのコンポーネントの表示を最適化するには、第4章「ADFモバイル・ブラウザ・アプリケーションのスキニング」で説明されているスタイルおよびパターンを参照してください。図2-10は、af_m_toolbarスタイル・クラスをtr:panelHeaderコンポーネントに適用する様子を示しています。これにより、スマートフォン上でページ・ヘッダーがツールバーのような要素としてレンダリングされるようになります。

図2-10 Trinidadコンポーネントの使用

2.4 ADFモバイル・ブラウザ・アプリケーションのテスト

スマートフォン、スマートフォン・シミュレータまたはデスクトップ・ブラウザ上で、ADFモバイル・ブラウザ・アプリケーションをテストできます。実際のスマートフォンまたはスマートフォン・シミュレータでテストすると、デスクトップ・ブラウザ上でテストした場合よりも正確な結果が得られます。

デスクトップ・ブラウザを使用したADFモバイル・ブラウザ・アプリケーションのテストでは、テスト環境がかなり画一的になるため、おおよその結果しか得られません。デスクトップ・ブラウザではWebページの外観および動作が似ており、ビジネス・ロジックがまったく同じように実行されるためです。一方で、実際のスマートフォンを使用したアプリケーションのテストでは、モバイル・ブラウザの機能によってデスクトップ・ブラウザの場合とは異なる方法で動作が制御されるため、より正確な結果が得られます。Webサーバーがモバイル・ブラウザに固有のページを生成してページのルック・アンド・フィールを最適化するため、デスクトップ・ブラウザよりも通常は小さいモバイル・ブラウザでは、デスクトップ・ブラウザとは異なる方法でページがレンダリングされます。

また、ADFモバイル・ブラウザ・アプリケーションをスマートフォン上で直接テストする場合には、テストが必要なすべてのデバイスにはアクセスできない可能性があります。さらに、多くのモバイル・デバイスは、インターネットのみにアクセスでき、ファイアウォールの後ろにある開発環境にはアクセスできないため、ファイアウォールによってテストが複雑になることがあります。そのような場合は、かわりのテスト方法としてスマートフォン・シミュレータを使用できます。たとえば、BlackBerryスマートフォン・シミュレータ(図2-11)またはWindows Mobileデバイス・エミュレータ(図2-13)でアプリケーションをテストするには、RIM社の開発者サイト(http://us.blackberry.com)からスマートフォン・シミュレータをダウンロードするか、Microsoft社の開発者サイト(http://www.microsoft.com)からデバイス・エミュレータをダウンロードします。その後、それらを構成してWebサーバーに接続する必要があります。ADFモバイル・ブラウザのシミュレータおよびエミュレータのダウンロードおよび構成の詳細は、Oracle Technology NetworkのOracle ADFモバイルでのモバイル・アプリケーション開発に関するページにある、ADFモバイルおよびJDeveloperでのモバイル・デバイス・シミュレータの実行に関するドキュメントを参照してください。このページにアクセスするには、Oracle Technology NetworkのOracle Application Development Frameworkの概要ページ(http://www.oracle.com/technetwork/developer-tools/adf/overview/index.html)で「Oracle ADF Mobile」を選択します。

図2-11 BlackBerryスマートフォン・シミュレータでのADFモバイル・ブラウザ・アプリケーションのテスト

2.4.1 シミュレータでのADFモバイル・ブラウザ・アプリケーションのテスト方法

アプリケーションは、デスクトップ・ブラウザでテストした後、シミュレータでテストできます。デスクトップ・ブラウザに表示されたURLを使用できますが、localhostのIPアドレス(127.0.0.1)を使用している場合は、コンピュータのネットワークIPアドレスに変更する必要があります。

ヒント:
ネットワークIPアドレスを取得するには、Windowsシステムの場合はipconfigコマンド・インタフェースを、LinuxまたはUNIXシステムの場合はifconfigコマンドを使用します。

図2-12 デスクトップ・ブラウザでのADFモバイル・ブラウザ・アプリケーションのテスト

たとえば、Windows Mobile 6エミュレータを使用してアプリケーションをテストする場合は、アドレスをデスクトップのlocalhostのIPアドレス(127.0.0.1、図2-12)からコンピュータのネットワークIPアドレス(192.0.2.253、図2-13)に変更します。

図2-13 Windows Mobileデバイス・エミュレータでのADFモバイル・ブラウザ・アプリケーションのテスト

また、ページ名の後に続くセッション指定を削除する必要があります。ページ名には通常、.jspxまたは.jspが追加されます。図2-12では、ページ名homeに.jspxが追加されています。

アプリケーションをデバッグするには、一般的に、コードのサイクルを繰り返した後でアプリケーションをテストします。変更されたアプリケーションをテストするには、次のいずれかまたは両方を実行する必要があります。

- ページのリフレッシュ

- ブラウザ・キャッシュのクリア

ヒント:
同じアプリケーションを開発する場合、URLは変化しないため、再入力する必要はありません。

2.4.2 ブラウザの設定に関する必知事項

ADFモバイル・ブラウザ・アプリケーションを適切に表示するには、Windows MobileおよびBlackBerryのブラウザ用にブラウザの設定を調整する必要があります。

Microsoft Windows Mobile 5および6、Microsoft Pocket Internet Explorer

表示を最適化するには、「Fit to Screen」表示を選択します(「Menu」、「View」、「Fit to Screen」の順に選択するとアクセスできます)。

注意:
「1列」ビュー・オプションを選択すると、レイアウトに問題が生じます。このオプションは選択しないでください。

BlackBerryブラウザ4.n

ADFモバイル・ブラウザは、JavaScriptのサポートが有効になっている場合にのみ動作します。JavaScriptサポートが有効になっていることを確認するには、次の手順を実行します。

1. 「Options」→「Browser Configuration」を選択します。

2. 次の表が選択されていることを確認します。

- Support JavaScript

- Allow JavaScript Popup

- Support HTML Tables

3 コンポーネントのサポート

この章では、ADFモバイル・ブラウザでサポートされているApache MyFaces Trinidadコンポーネントについて説明します。

この章には次の項が含まれます:

- 3.1項「Apache MyFaces Trinidadコンポーネントについて」

- 3.2項「入力コンポーネント」

- 3.3項「出力コンポーネント」

- 3.4項「レイアウト・コンポーネント」

- 3.5項「ナビゲーション・コンポーネント」

- 3.6項「データの視覚化(グラフおよびゲージ)」

- 3.7項「表およびツリー」

- 3.8項「HTML <meta>タグの生成」

- 3.9項「サポートされないコンポーネントおよび属性」

3.1 Apache MyFaces Trinidadコンポーネントについて

ADFモバイル・ブラウザでは、60を超えるApache MyFaces Trinidadコンポーネントがサポートされているため、モバイル・デバイスの画面に適切にレンダリングする豊富なコンポーネント・セットを使用してアプリケーションを構築できます。詳細は、Apache MyFaces Trinidadのサイト(http://myfaces.apache.org/trinidad/)を参照してください。

3.1.1 サポートされている機能

ADFモバイル・ブラウザでは、次のレンダラ固有の機能がサポートされています。

- 部分ページ・レンダリング

- ダイアログ

3.1.2 部分ページ・レンダリング

待機時間が長く帯域幅が小さいネットワークを使用するモバイル環境では、モバイル・ユーザー向けのアプリケーションの応答性が低下します。画面のリフレッシュは遅くなり、モバイル・ユーザーの操作性は低くなります。ADFモバイル・ブラウザでサポートされている部分ページ・レンダリング(PPR)を使用すると、モバイル・デバイスの画面更新時に全体をリフレッシュする必要がなくなるため、サーバーからのリクエスト・データ量を最小化することによって低速な接続による画面更新への悪影響を抑えることができます。AJAX (Asynchronous JavaScript and XML)がサポートされていないブラウザでは、PPRのかわりにページ全体のレンダリングが使用されます。たとえば、(JavaScriptがサポートされていない)基本的なHTMLブラウザでページを送信すると、ページ全体がリフレッシュされます。

注意:
BlackBerry 4.5(およびそれ以前のバージョン)のブラウザでは、PPRがサポートされていません。特定のフォーム関連コンポーネントにautosubmit属性を指定すると、ユーザーがフィールドから出た後にページが送信されます。その後で、ページの部分リフレッシュではなく、完全リフレッシュが行われます。

3.1.3 ダイアログ

ADFモバイル・ブラウザでは、ダイアログ(ユーザー入力を取得するためにアプリケーションで使用されるページ)がサポートされています。モバイル・ブラウザではダイアログ・ボックス(ポップアップ・ウィンドウ)を含む新しいウィンドウを開くことができないため、現在のページの状態が自動的に保存された後、ブラウザのメイン・ウィンドウ内に新しいページとしてダイアログ・ボックスが表示されます。

3.1.4 BlackBerryブラウザ4.5以前のバージョンに固有のレンダリング

BlackBerry 4.5以前のバージョン用のブラウザでは、リスト・サブレベル内の箇条書き(tr:panelListコンポーネント内のものなど)がインデントされずに大きく表示されます。BlackBerryの表処理では、ブラウザで水平スクロールがサポートされていないため、複雑なレイアウトが影響を受ける可能性があります。かわりに表の行が折り返されて複数の表示行になるため、レイアウトが崩れる場合があります。詳細は、第6章「BlackBerry 4.2から4.5向けの設計ガイドライン」を参照してください。

3.2 入力コンポーネント

ADFモバイル・ブラウザでは、ユーザー入力をサポートするコア・コンポーネントである、入力テキスト・フィールドおよびリストがサポートされています。

3.2.1 入力テキスト・フィールドの作成

次のコンポーネントを使用して入力フィールドを作成できます。

- tr:inputColor

注意:
モバイル・ブラウザでは、tr:inputColorコンポーネント用のインラインchooseColorまたはcolorダイアログはサポートされていません。

- tr:inputDate

- tr:inputHidden

- tr:inputText

注意:
基本的なHTMLブラウザでは、tr:inputTextコンポーネントのautosubmit属性がサポートされていません。

注意:
幅が狭い画面のデバイス(画面の幅が240ピクセル未満であるデバイス)では、Trinidadによりtr:inputTextコンポーネントが最適化されます。詳細は、第7章「幅が狭い画面のサポートおよびユーザー・エージェントの詳細のサポート」を参照してください。

3.2.2 リストの作成

次のコンポーネントを使用してリストを作成できます。

- tr:panelChoice

- tr:panelList

- tr:selectBooleanCheckBox

- tr:selectBooleanRadio

- tr:selectItem

注意:
モバイル・ブラウザでは、tr:selectItemコンポーネントのdisabled属性がサポートされていません。

- tr:selectManyCheckBox

- tr:selectManyListBox

- tr:selectOneChoice

- tr:selectOneListBox

- tr:selectOneRadio

- tr:resetButton

注意:
基本的なHTMLブラウザでは、tr:resetButtonコンポーネントのautosubmit属性がサポートされていません。

3.3 出力コンポーネント

ADFモバイル・ブラウザでは、モバイル・デバイス・アプリケーションでの出力をサポートするApache MyFaces Trinidadのコア・コンポーネントが使用されます。これらのコンポーネントには、テキストおよびイメージを表示するコンポーネント、さらにテキストを表示または非表示にするコンポーネントがあります。

3.3.1 テキストの表示

次のコンポーネントを使用すると、テキストを表示できます。

- tr:iterator

- tr:message

- tr:messages

注意:
コンポーネント固有のメッセージは、デスクトップ・ブラウザで表示されるのと同じようにモバイル・ブラウザで表示されるのではありません。そうではなく、メッセージ・コンポーネント(tr:messageまたはtr:messages)がWebページに配置された領域に表示されます。

- tr:outputDocument

- tr:outputForwarded

- tr:outputLabel

- tr:outputText

3.3.2 イメージの表示

次のコンポーネントを使用すると、イメージを表示できます。

- tr:icon

- tr:image

- tr:panelTip

3.3.3 コンポーネントの表示(または非表示)

次のコンポーネントを使用すると、アイテムの表示または非表示が可能になります。

- tr:panelAccordion

注意:
モバイル・ブラウザは、ページ全体の更新のみをサポートします。tr:panelAccordionコンポーネントのpartialTriggers属性はサポートされていません。

- tr:panelTabbed

注意:
モバイル・ブラウザ内のスペースを節約するために、レンダラは意図的にtr:panelTabbedコンポーネントの上部と下部の両方にタブ・バーを表示しません。属性位置の有効な値は、topおよびbottomです。bothが指定されている場合、レンダラはタブを上部に表示します。

- tr:showDetail

注意:
tr:showDetailコンポーネントでは、詳細表示の矢印は表示されません。かわりに、[+]および[-]記号が表示されます。

- tr:showDetailHeader

注意:
tr:showDetailHeaderコンポーネントでは、モバイル・ブラウザに詳細表示の矢印は表示されません。

- tr:showDetailItem

注意:
tr:showDetailItemコンポーネントでは、モバイル・ブラウザに詳細表示の矢印は表示されず、flex属性はサポートされていません。

3.4 レイアウト・コンポーネント

ADFモバイル・ブラウザでサポートされているレイアウト・コンポーネントには、ページ自体を管理するコンポーネント(tr:document、tr:formなど)や、tr:group、tr:panelFormLayout、tr:panelGroupLayoutのようなページの各セクションをレイアウトするコンポーネントがあります。

3.4.1 ページの管理

次のコンポーネントを使用すると、ページを管理できます。

- tr:document

- tr:form

注意:
ADFモバイル・ブラウザでは、tr:formコンポーネントのdefaultCommand属性はサポートされていません。

- tr:page

注意:
ADFモバイル・ブラウザでは、tr:pageコンポーネントのtr:pageファセットはサポートされていません。

3.4.2 ページのセクションの配置

次のADF Facesのコア・タグでは、モバイル・デバイス・アプリケーション用のページ・レイアウトがサポートされています。

- tr:group

- tr:panelBorderLayout

注意:
tr:panelBorderLayoutコンポーネントでは、topおよびbottomファセットのみがサポートされています。ADFモバイル・ブラウザでは、次のファセットはサポートされていません。

- left

- right

- start

- end

- innerLeft

- innerRight

- innerStart

- innerEnd

これらのサポートされていないファセットを使用している場合、tr:panelBorderLayoutコンポーネントはレンダリングされません。

- tr:panelBox

- tr:panelFormLayout

- tr:panelGroupLayout

- tr:panelHeader

- tr:panelHorizontalLayout

注意:
ADFモバイル・ブラウザでは、tr:panelHorizontalLayoutコンポーネントのhalign=end属性はサポートされていません。

- tr:panelLabelAndMessage

注意:
幅が狭い画面のデバイス(画面の幅が240ピクセル未満であるデバイス)では、Trinidadによりtr:panelLabelAndMessageコンポーネントが最適化されます。詳細は、7.1項「幅が狭い画面のサポートの特定」を参照してください。

- tr:panelPage

- tr:panelPageHeader

注意:
ADFモバイル・ブラウザでサポートされているのは、tr:panelPageHeaderコンポーネントの次のファセットのみです。

- branding

- brandingApp

- navigation1

- navigation2

- tr:panelRadio

注意:
幅が狭い画面のデバイス(画面の幅が240ピクセル未満であるデバイス)では、Trinidadによりtr:panelRadioコンポーネントが最適化されます。詳細は、7.1項「幅が狭い画面のサポートの特定」を参照してください。

- tr:panelCaptionGroup

3.4.3 空白の挿入

次のコンポーネントは、ページの領域割当てを制御します。

- tr:separator

- tr:spacer

- tr:subform

3.5 ナビゲーション・コンポーネント

ADFモバイル・ブラウザでは、ユーザーがアプリケーションの他のページや外部の場所にナビゲートできるようにする、ボタン、リンク、ブレッドクラムなどのコンポーネントがサポートされています。

3.5.1 ボタンの作成

ADFモバイル・ブラウザでは、次のボタン・タイプがサポートされています。

- tr:commandButton

注意:
icon属性を設定するとtext属性が表示されなくなるため、ボタンにはテキストまたはイメージのいずれかを定義できますが、両方は定義できません。disabled属性をtrueに設定すると、icon属性が設定されたtr:commandButtonコンポーネントがリンクを持たない静的イメージとしてレンダリングされます。

- tr:goButton

tr:goButtonコンポーネントを使用して電子メール、電話およびGoogleマップをアプリケーションに統合する方法の詳細は、第8章「ADFモバイル・ブラウザ・アプリケーションの拡張」を参照してください。

3.5.2 リンクの作成

ADFモバイル・ブラウザでは、ハイパーリンクを作成するための次のコンポーネントがサポートされています。

- tr:commandLink

注意:
基本的なモバイルHTMLブラウザではtr:commandLinkコンポーネントが入力要素としてレンダリングされるため、その子コンポーネントはレンダリングできません。基本的なモバイルHTMLブラウザでの入力要素の詳細は、5.2項「基本的なHTMLモバイル・ブラウザ用のアプリケーションの開発」を参照してください。

- tr:goLink

tr:goLinkコンポーネントを使用して電子メール、電話およびGoogleマップをアプリケーションに統合する方法の詳細は、第8章「ADFモバイル・ブラウザ・アプリケーションの拡張」を参照してください。

3.5.3 ナビゲーション・コンポーネント

ADFモバイル・ブラウザでは、次のナビゲーション・コンポーネントがサポートされています。

- tr:breadcrumbs

注意:
幅が狭い画面のデバイス(画面の幅が240ピクセル未満であるデバイス)では、Trinidadによりtr:breadcrumbsコンポーネントが最適化されます。詳細は、第7章の「幅が狭い画面のサポートの特定」を参照してください。

- tr:commandNavigationItem

注意:
次のコンポーネントでdisabled属性をtrueに設定した場合、tr:commandNavigationItemはレンダリングされません。

- tr:selectOneListBox

- tr:selectOneChoice

- tr:processChoiceBar

- ヒント(choice)を含むtr:navigationPane

- tr:selectRangeChoiceBar

- tr:navigationPane

注意:
宛先の値があるtr:navigationPane hint = "choice"は、基本的なHTMLブラウザではサポートされていません。

注意:
幅が狭い画面のデバイス(画面の幅が240ピクセル未満であるデバイス)では、Trinidadによりtr:navigationPaneコンポーネントが最適化されます。詳細は、第7章の「幅が狭い画面のサポートの特定」を参照してください。

- tr:train

注意:
tr:trainコンポーネントでは、各アイテムが一覧表示されるのではなく、yのxとして表示されます。これはADFモバイル・ブラウザの表示専用コンポーネントであり、yのxのコンポーネントをクリックしてアプリケーション内をナビゲートすることはできません。ナビゲートできるようにするには、別個のリンクまたはボタンを追加する必要があります。

- tr:processChoiceBar

注意:
幅が狭い画面のデバイス(画面の幅が240ピクセル未満であるデバイス)では、Trinidadによりtr:processChoiceBarコンポーネントが最適化されます。詳細は、7.1項「幅が狭い画面のサポートの特定」を参照してください。

- tr:selectRangeChoiceBar

注意:
幅が狭い画面のデバイス(画面の幅が240ピクセル未満であるデバイス)では、Trinidadによりtr:selectRangeChoiceBarコンポーネントが最適化されます。詳細は、第7章の「幅が狭い画面のサポートの特定」を参照してください。

3.6 データの視覚化(グラフおよびゲージ)

ADFモバイル・ブラウザでは、『Oracle Fusion Middleware Oracle Application Development FrameworkによるFusion Webアプリケーションの開発』のデータバインドされたADFデータ視覚化コンポーネントの作成に関する項に記載されたデータ視覚化ツール(DVT)がサポートされています。

ADFモバイル・ブラウザでは、次のグラフ・タイプがサポートされています。

- 面

- 棒

- 棒(横)

- バブル

- 組合せ(横棒および折れ線)

- ファンネル

- 折れ線

- パレート

- 円

- レーダー

- 散布図/極

- スパーク

- 株価

ADFモバイル・ブラウザでは、次のゲージ・タイプがサポートされています。

- ダイアル

- ステータス・メーター

- ステータス・メーター(垂直)

- LED

Oracle JDeveloperにはDVTが組み込まれているため、グラフおよびゲージをすばやく追加できます。これらのコンポーネントをアプリケーションに追加するには、まずドラッグ・アンド・ドロップ操作によりデータ・コントロールをエディタ・ウィンドウに移動し、続いてコンテキスト・メニューから「トリニダード・ゲージ」または「トリニダード・グラフ」を選択します。たとえば、図3-1は、コレクションをエディタにドラッグするときに表示されるコンテキスト・メニューを示しています。

図3-1 データ・コントロールのドラッグ・アンド・ドロップによるDVTの作成

「トリニダード・グラフ」または「トリニダード・ゲージ」オプションを選択すると、図3-2に示すように、DVTウィザードが表示されて「コンポーネント・ギャラリ」ページが開きます。このページで、DVTのタイプを選択します。

注意:
ADFモバイル・ブラウザは、静的グラフおよびゲージのみをサポートしており、これらは、PNGイメージとしてレンダリングされます。このイメージ形式がサポートされているすべてのモバイル・デバイスで、グラフおよびゲージを表示できます。

図3-2 DVTウィザードのコンポーネント・ギャラリ

3.7 表およびツリー

ADFモバイル・ブラウザ・アプリケーションでは、構造化データを表の行および列または階層ツリーとして表示できます。

3.7.1 表の作成

ADFモバイル・ブラウザでは、次のコンポーネントで構成される表がサポートされています。

- tr:table

注意:
ADFモバイル・ブラウザでは、tr:tableコンポーネントのallDetailsEnabled属性がサポートされていません。この属性は常にfalseに設定されます。

- tr:column

注意:
tr:columnタグをネストして列グループを作成した場合、列グループのヘッダー・ファセットはレンダリングされません。

単一列を持つ表を作成すれば、モバイル・デバイスでの表の表示を最適化できます。

3.7.2 ツリーの作成

ADFモバイル・ブラウザでは、tr:treeコンポーネントがサポートされています。

注意:
tr:treeは、基本的なHTMLブラウザではレンダリングされない可能性があります。

3.8 HTML <meta>タグの生成

<meta>タグでは、ブラウザ内でページを表示する方法を指定します。例3-1に示す<meta>タグの使用例では、アプリケーションを全画面モードで表示するように設定するとともに、Apple iPhoneおよびiPadなどのデバイス用にビュー・ポートの幅を設定しています。また、この例では、<meta>タグを使用して、指定したセクションの数の後にページをリロードする方法を設定しています。

例3-1 <meta>タグを使用したページ動作の設定

<meta name="viewport"
content="width=device-width, user-scalable=no">
<meta name="apple-mobile-web-app-capable"
content="yes">
<meta http-equiv="refresh"
content="2;url=./test/index.jspx">

Appleデバイス上で動作するアプリケーションにおける<meta>タグの使用の詳細は、『Safari HTML Reference』の「Supported Meta Tags」の項にあるApple固有のメタ・タグ・キーの説明を参照してください。このドキュメントは、iOS開発者ライブラリ(http://developer.apple.com/library/ios/navigation/)から入手できます。

3.8.1 <trh:meta>を使用したHTML <meta>タグの生成

<trh:meta>コンポーネント・タグでは、HTML <meta>タグを生成できます。例3-2では、このコンポーネントを使用して次の処理を行っています。

- モバイル・デバイスでのビュー・ポート・ディメンションを構成します。

- ユーザーによるモバイル・デバイスでのビュー・ポートのサイズ変更を無効化します。

- iOSデバイスのホーム画面にあるブックマークを使用してWebページをSafariではなく独自のプロセスで起動できるように有効化します。

- 2秒後に別のページにナビゲートするようにページを構成します。

例3-2 <trh:meta>を使用した各種HTML <meta>タグの生成

<af:document ...>
<f:facet name="metaContainer">
<af:group id="metaContainer">
<trh:meta name="viewport"
content="width=device-width, user-scalable=no"/>
<trh:meta name="apple-mobile-web-app-capable"
content="yes"/>
<trh:meta type="httpEquiv"
name="refresh"
content="2;url=./test/index.jspx"/>
</af:group>
</f:facet>
</af:document>

3.8.1.1 モバイル・デバイスでのデフォルト・ビュー・ポート・サイズについて

一般的にWebページでは、ページの両側が空白になるように、ハードコード化された幅が指定されています。デスクトップ・ブラウザでページを表示する場合にはこれは問題ではありませんが、同じページをモバイル・デバイスで表示するとこの空白が原因で文字が小さくなってしまうことがあります。さらに、表示されるページ・コントロールもユーザーが指先で操作するには小さすぎる場合があるため、ページを拡大してから操作することが必要になります。Apple社(iOS)、Google社(Android)、Microsoft社(Windows Phone 7)の各オペレーティング・システムでは、標準的なビュー・ポート幅が想定されてページが小さな画面に収まるようにレンダリングされるため、Webページをモバイル・デバイスで表示したときにこのサイズ調整が行われます。

モバイル・デバイスのネイティブ解像度で適切にページを表示できるようにするため、例3-3に示すように、<trh:meta>タグ内でviewportメタ・キーを使用してビュー・ポート・ディメンションを指定できます。

例3-3 ビュー・ポート・ディメンションの設定

<af:document ...>
<f:facet name="metaContainer">
<trh:meta name="viewport"
content="width=device-width"/>
</f:facet>
...
</af:document>

viewportメタ・キーのwidthプロパティには特定のピクセル数を設定できる他、例3-3に示すようにdevice-width定数を使用することもできます。Apple (iOS)システムでは、ページの幅に設定された値が縦方向と横方向の両方で同じになります(つまり、Safariブラウザでは縦の幅に設定された値が横の幅に使用されます)。

注意:
iPhone 4のRetinaなどの高解像度ディスプレイ上にあるピクセルは、iPhone 3GSなどの低解像度デバイス上にあるピクセルと1対1では対応していません。このようにiPhone 4のディスプレイ上により多くのピクセルが存在しても、iPhone 3GS用のwidthプロパティに定義されたピクセル数は、iPhone 4でも物理的に同じ長さであるとみなされます。

3.9 サポートされないコンポーネントおよび属性

ADFモバイル・ブラウザは、一部のApache MyFaces Trinidadコンポーネントまたは特定のコンポーネント属性をサポートしていません。

3.9.1 サポートされないコンポーネント

ADFモバイル・ブラウザでは、次のコンポーネントはサポートされていません。

- tr:chart

- tr:chooseColor

- tr:chooseDate

- tr:inputFile

- tr:inputListOFVariables

- tr:inputNumberSpinbox

- tr:legend

- tr:media

- tr:navigationTree

- tr:panelButtonBar

- tr:panelPopup

- tr:panelSideBar

- tr:poll

- tr:progressIndicator

- tr:selectManyShuttle

- tr:selectOrderShuttle

- tr:singleStepButtonBar

- tr:statusIndicator

- tr:switcher

- tr:treeTable

3.9.2 サポートされない属性

ADFモバイル・ブラウザは、いずれのApache MyFaces Trinidadコンポーネントでも次の属性をサポートしていません。

- accessKey

- shortDesc (tooltip)

4 ADFモバイル・ブラウザ・アプリケーションのスキニング

この章では、ADFモバイル・ブラウザ・アプリケーションのスキニングについて説明します。

この章には次の項が含まれます:

- 4.1項「ADFモバイル・ブラウザのスキニングについて」

- 4.2項「ADFモバイル・ブラウザのスキニングの実装」

- 4.3項「ADFモバイル・ブラウザのスキニングの適用」

4.1 ADFモバイル・ブラウザのスキニングについて

スキニングを使用すると、デバイスに依存したスタイルシートの自動配信を通じて、各種のデバイスで一貫したページを表示できるようになります。これらのスタイルシートにより、様々なモバイル・ブラウザで同じページ定義を共有しながら、ページを最適に表示できます。アプリケーションのルック・アンド・フィールの設定が可能なこれらのスタイルシート内では、コンポーネントのサイズ、位置および外観を設定することによってそのコンポーネントを特定のブラウザ向けに調整することに加え、ブラウザのタイプごとにコンポーネントを表示するか非表示にするかを指定します。

注意:
ブラウザでは、Cascading Style Sheets (CSS)構文がサポートされている必要があります。

4.2 ADFモバイル・ブラウザのスキニングの実装

2.2.2項「モバイル・アプリケーションおよびプロジェクト作成時の処理内容」で述べているように、JDeveloperは2つのモバイル固有のスタイルシートmobile.cssとrichmobile.cssを、図4-1で示すようにADFモバイル・ブラウザ固有のビュー・コントローラ・プロジェクト内に作成します。

図4-1 ADFモバイル・ブラウザ・プロジェクト内のCSSファイル

表4-1は、ADFモバイル・ページに提供されるスキニング・ファイルを示しています。

表4-1 ADFモバイル・ブラウザのスキン

CSSファイル

スキン・ファミリ

使用

mobile.css

mobile

基本的なHTMLブラウザに使用。このファミリは、Windows MobileおよびBlackBerry、バージョン4.6以上でのレンダリングに使用します。第5章「基本的なHTMLモバイル・ブラウザのサポート」を参照してください。

richmobile.css

richmobile

Webkitレンダリング・エンジンを使用するスマートフォン・ブラウザに使用します。これらのブラウザは、Nokia S60や、iOSデバイスおよびAndroidデバイスでも使用されます。

ADFモバイル・ブラウザ・ビュー・コントローラ・プロジェクトを作成すると、trinidad-config.xmlファイル内の<skin-family>要素に、ブラウザのユーザー・エージェントに適切なレンダーキットを選択する次のEL式が移入されます。

#{requestContext.agent.type == 'desktop'?'richmobile': 'mobile'}

ADFモバイル・ブラウザ・フレームワークは、このレンダーキットに定義されたスタイルを適用します。例4-1に示されているこの式は、ADFモバイル・ブラウザ・アプリケーションでモバイルおよびリッチモバイル・スキン・ファミリを使用できるようにするために、trinidad-config.xmlファイルに追加する必要があります。

注意:
trinidad-config.xmlファイルにこの文が含まれていることを確認してください。

例4-1 Trinidad-config.xml内のスキン・ファミリ選択ロジック

<?xml version="1.0" encoding="windows-1252"?>
<trinidad-config xmlns="http://myfaces.apache.org/trinidad/config">
<skin-family>#{requestContext.agent.type == 'desktop'? 'richmobile': 'mobile'}</skin-family>
</trinidad-config>

例4-2に示されているtrinidad-skins.xmlファイルでは、EL式を使用して適用されるデフォルトのスキン・ファミリを定義します。

例4-2 ADFモバイル・ブラウザ<skin>定義が移入されたtrinidad-skins.xml

<?xml version="1.0" encoding="windows-1252"?>
<skins xmlns="http://myfaces.apache.org/trinidad/skin">
<skin>
<id>richmobile</id>
<family>richmobile</family>
<render-kit-id>org.apache.myfaces.trinidad.desktop</render-kit-id>
<style-sheet-name>styles/richmobile.css</style-sheet-name>
<extends>trinidad-simple.desktop</extends>
</skin>
<skin>
<id>mobile</id>
<family>mobile</family>
<render-kit-id>org.apache.myfaces.trinidad.pda</render-kit-id>
<style-sheet-name>styles/mobile.css</style-sheet-name>
<extends>trinidad-simple.pda</extends>
</skin>
</skins>

4.2.1 ADFモバイル・スキンの拡張

richmobile.cssおよびmobile.css以外のCSSファイルを呼び出すように、trinidad-config.xmlファイルとtrinidad-skins.xmlファイルを構成することができます。richmobile.cssおよびmobile.cssファイルを、特定のモバイル・デバイスまたはプラットフォームへ@ルールを使用してレンダリングするように変更することもできます。

モバイル機能を非モバイル・プロジェクトに追加するには、次の手順を実行します。

1. スキンを作成します。これには、ADFモバイル・ブラウザ・ビュー・プロジェクトのWEB-INFノード内でtrinidad-skins.xmlファイルを作成することが含まれています。

2. スタイルシートを作成します。

3. trinidad-config.xmlファイル(WEB-INFノードにあります)でスキン・ファミリを設定します。
詳細は、Apache MyFaces Trinidadの開発ガイドライン (http://myfaces.apache.org/trinidad/devguide/skinning.html)の「Create a Skin—An Overview」を参照してください。

Apache MyFaces Trinidadでは、スキン・ファミリが1つのレンダーキットと1つの一意なCSSファイルに関連付けられます。Trinidadでは、Webkitベースのモバイル・ブラウザにはデスクトップ・レンダーキットが、そしてその他のすべてのモバイル・ブラウザにはPDAレンダーキットが使用されるため、2つのスキン・ファミリを作成してその両方がこれらのレンダーキットおよびCSSファイルの1つを参照することにより、すべてのモバイル・ブラウザをサポートできます。@agentおよび@platformセレクタ・ルールを使用して、ブラウザの名前、バージョン、またはプラットフォームに基づいたレンダリングを有効にします。詳細は、Apache MyFaces Trinidadの開発ガイドライン (http://myfaces.apache.org/trinidad/devguide/skinning.html)の「Skinning CSS Features」を参照してください。

4.3 ADFモバイル・ブラウザのスキニングの適用

CSSスタイルは多くのコンポーネントに自動的に適用されますが、styleClass属性を定義して、コンポーネントのレンダリングを最適化することができます。

4.3.1 ヘッダー

<tr:panelHeader>コンポーネントにstyleClass属性を追加すると、アプリケーションでタイトルのみのヘッダーだけでなく、タイトルとリンクの両方が付いたヘッダーも表示できます。

4.3.1.1 タイトルのみのヘッダーの作成

タイトルのみのヘッダーを作成するには、例4-3に示すように、styleClass="af_m_toolbar"を<tr:panelHeader>コンポーネントに追加します。

例4-3 タイトルのみのヘッダーを作成するための属性の追加

<tr:panelHeader styleClass="af_m_toolbar" text="Welcome"/>

図4-2は、このADFモバイル・ブラウザ属性により、タイトルのみのヘッダーがApple iPhone上でどのように作成されるかを示しています。

図4-2 Apple iPhone上でのタイトルのみのヘッダー

表4-2は、タイトルのみのヘッダーがWindows Mobileデバイス、BlackBerryスマートフォンおよびNokia Webkit上でどのように表示されるかを示す例です。

表4-2 様々なプラットフォーム上に表示されたタイトルのみのヘッダー

プラットフォーム

例

BlackBerry 4.6

Windows Mobile

Nokia Webkit

BlackBerry 4.2

4.3.1.2 タイトルおよびリンク付きのヘッダーの作成

図4-3に示すように、ヘッダー内にリンクおよびタイトルを追加できます。図4-3は、Apple iPhone上に表示されたこのタイプのヘッダーを示しています。

図4-3 Apple iPhone上でのヘッダー内のタイトルおよびリンク

4.3.1.1項「タイトルのみのヘッダーの作成」で説明したように、<tr:panelHeader>要素内にstyleClass="af_m_toolbar"を追加することによって、ヘッダーのタイトル(図4-3ではTransferというタイトル)を定義します。例4-4に示すように、リンクは、子である<tr:commandLink>要素内にボタン(それぞれstyleClass="af_m_backButton"およびstyleClass="af_m_button")として定義されています。例4-4の<tr:panelHeader>要素には、これらの属性(太字)が含まれています。

例4-4 ヘッダーへのタイトルおよびリンクの追加

<tr:panelHeader styleClass="af_m_toolbar"
text="Transfer">
<tr:commandLink styleClass="af_m_backButton"
text="Back"
action="back"/>
<tr:spacer rendered="#{requestContext.agent.skinFamilyType eq 'blackberryminimal'}"
height="5" width="105"/>
<tr:spacer rendered="#{requestContext.agent.skinFamilyType eq 'windowsmobile'}"
height=""
width="28"/>
<tr:commandLink styleClass="af_m_button"
text="Sign Off"
action="signoff"/>
</tr:panelHeader>

表4-3は、タイトルおよびリンクを含む<tr:panelHeader>がWindows Mobileデバイス、BlackBerryスマートフォンおよびNokia Webkit上でどのように表示されるかを示す例です。

表4-3 様々なプラットフォーム上に表示されたタイトルおよびリンク付きのヘッダー

プラットフォーム

例

BlackBerry 4.6

Windows Mobile

Nokia Webkit

BlackBerry 4.2

4.3.2 表コンポーネント

styleClass属性を使用すると、ADFモバイル・ブラウザ・アプリケーション内の表コンポーネントを様々なブラウザ上で適切にレンダリングできます。

4.3.2.1 複数列の表

ターゲット・プラットフォーム上でスタイルを適切に適用するためにstyleClass属性を含める必要があるパネル・ヘッダーとは異なり、表の列ヘッダーには属性は必要ありません。かわりに、3.7.1項「表の作成」で説明した<tr:columns>コンポーネントを使用します。図4-4では、列ヘッダーがApple iPhoneでレンダリングされる様子を示しています。

図4-4 Apple iPhone上での列ヘッダーおよびセル

例4-5は、<tr:columns>要素(太字)の定義方法を示しています。

例4-5 列ヘッダーの作成

<tr:table  var="row" …./>
<tr:column  headerText="LastName">
<tr:outputText value="#{row.bindings.LastName.inputValue}"/>
</tr:column>
<tr:column  headerText="FirstName">
<tr:outputText value="#{row.bindings.FirstName.inputValue} "/>
</tr:column>
<tr:column headerText="Phone">
<tr:outputText value="#{row.bindings.Phone.inputValue}"/>
</tr:column>
</tr:table>

表4-4は、列ヘッダーがWindows Mobileデバイス、Nokia WebkitおよびBlackBerryスマートフォン上でどのように表示されるかを示す例です。

表4-4 様々なプラットフォーム上での列ヘッダー

プラットフォーム

例

BlackBerry 4.6

Windows Mobile

Nokia Webkit

BlackBerry 4.2

4.3.2.2 イメージおよびリンク付きの主要な詳細の追加

図4-5は、styleClassの値af_m_listingLinkおよびaf_m_listingDetailsを使用して作成した、表内のリンクおよび詳細です。

図4-5 Apple iPhone上にレンダリングされたイメージ、リンクおよび詳細

例4-6に示すように、これらの機能を作成するには、<tr:panelGroupLayout>コンポーネントを<tr:column>コンポーネントの子として追加します。次に、styleClass="af_m_listingLink"およびstyleClass="af_m_listingDetails"属性をpanelGroupLayoutの<tr:commandLink>および<tr:outputText>サブコンポーネントに追加します。tr:panelGroupLayout、tr:commandLinkおよびtr:outputTextの詳細は、第3章「コンポーネントのサポート」を参照してください。

例4-6 詳細付きのリンクの追加

<tr:table  horizontalGridVisible="false"
var="row"
width="100%">
<tr:column>
<tr:image source="#{row.bindings.TypeIconUrl.inputValue}"/>1
</tr:column>
<tr:column inlineStyle="width:100%;">
<tr:panelGroupLayout layout="vertical">
<tr:commandLink text="#{row.bindings.DescShort.inputValue}"
action="detail"
styleClass="af_m_listingLink">
</tr:commandLink>
<tr:outputText value="#{row.bindings.Balance.inputValue}"
styleClass="af_m_listingDetails">
</tr:outputText>
</tr:panelGroupLayout>
</tr:column>
</tr:table>

表4-5は、イメージ、リンクおよび詳細がWindows Mobileデバイス、Nokia WebkitおよびBlackBerryスマートフォン上でどのように表示されるかを示す例です。

表4-5 様々なプラットフォーム上に表示されたイメージ、リンクおよび詳細

プラットフォーム

例

BlackBerry 4.6

Windows Mobile

Nokia Webkit

BlackBerry 4.2

4.3.2.3 リンク付きの主要な詳細の作成

図4-6は、表内に主要な詳細およびリンクを作成する方法を示しています。

図4-6 Apple iPhone上にレンダリングされたリンク付きの主要な詳細

4.3.2.2項「イメージおよびリンク付きの主要な詳細の追加」で説明したイメージ付きの主要なリンクおよび詳細の追加と同様、これらの機能を作成するには、<tr:panelGroupLayout>コンポーネントを<tr:column>コンポーネントの子として追加します。次に、例4-7に示すように、styleClass="af_m_listingLink"およびstyleClass="af_m_listingDetails"属性をpanelGroupLayoutの<tr:commandLink>および<tr:outputText>サブコンポーネントに追加します。tr:panelGroupLayout、tr:commandLinkおよびtr:outputTextの詳細は、第3章「コンポーネントのサポート」を参照してください。

例4-7 主要な詳細およびリンク

<tr:table  horizontalGridVisible="false"
var="row"
width="100%">
<tr:column>
<tr:panelGroupLayout layout="vertical">
<tr:commandLink text="#{row.bindings.Email.inputValue}"
styleClass=" af_m_listingLink">
</tr:commandLink>
<tr:outputText value="#{row.bindings.FirstName.inputValue}"
styleClass="af_m_listingDetails"/>
</tr:panelGroupLayout>
</tr:column>
</tr:table>

表4-6は、リンクおよび詳細がWindows Mobileデバイス、Nokia WebkitおよびBlackBerryスマートフォン上でどのように表示されるかを示す例です。

表4-6 様々なプラットフォーム上に表示されたイメージおよびリンク

プラットフォーム

例

BlackBerry 4.6

Windows Mobile

Nokia Webkit

BlackBerry 4.2

4.3.2.4 リンクなしの主要な詳細の作成

図4-7に示すように、af_m_listingPrimaryDetailsおよびaf_m_listingDetailsスタイル・クラスを使用すると、リンクとして機能しない詳細を作成できます。これらの動作は、4.3.2.2項「イメージおよびリンク付きの主要な詳細の追加」で説明した主要な詳細とは異なります。

図4-7 Apple iPhone上でのリンクなしの主要な詳細

例4-8に示すように、リンクなしの主要な詳細を作成するには、styleClass="af_m_listingPrimaryDetails"およびstyleClass="af_m_listingDetails"を<tr:outputText>要素に追加します。この要素は、(<tr:column>要素の子である)<tr:panelGroupLayout>要素の子です。

例4-8 リンクなしの主要な詳細の追加

tr:table  horizontalGridVisible="false"
var="row"
width="100%">
<tr:column>
<tr:panelGroupLayout layout="vertical">
<tr:outputText value="#{row.bindings.Amount.inputValue}
styleClass="af_m_listingPrimaryDetails">
</tr:outputText>
<tr:outputText value="#{row.bindings.FromAccountName.inputValue} "
styleClass="af_m_listingDetails"/>
</tr:panelGroupLayout>
</tr:column>
</tr:table>

表4-7は、リンクなしの詳細がWindows Mobileデバイス、Nokia WebkitおよびBlackBerryスマートフォン上でどのように表示されるかを示す例です。

表4-7 様々なプラットフォーム上に表示されたリンクなしの詳細

プラットフォーム

例

BlackBerry 4.6

Windows Mobile

Nokia Webkit

BlackBerry 4.2

4.3.3 パネル・リスト・コンポーネント

図4-8に示すように、<tr:panelGroupLayout>コンポーネント内でstyleClassの値をaf_m_panelBaseとして定義すると、<tr:panelList>コンポーネントにパディングが適用されます。

図4-8 Apple iPhone上でのパディングのレンダリング

例4-9に示すように、子の<tr:panelList>コンポーネントにstyleClass属性を含める必要はありません。<tr:panelList>および<tr:panelGroupLayout>の使用の詳細は、3.2.2項「リストの作成」および3.4項「レイアウト・コンポーネント」を参照してください。

例4-9 panelListコンポーネントへのパディングの追加

<tr:panelGroupLayout styleClass="af_m_panelBase">
<tr:panelList>
<tr:commandLink text="Welcome" action="welcome"/>
<tr:commandLink text="Branch" action="branch"/>
</tr:panelList>
</tr:panelGroupLayout>

表4-8は、Windows Mobileデバイス、Nokia WebkitおよびBlackBerryスマートフォン上での<tr:panelList>コンポーネント内のパディングを示す例です。

表4-8 様々なプラットフォーム上で適用された<tr:panelList>へのパディング

へのパディング" width="100%">

プラットフォーム

例

BlackBerry 4.6

Windows Mobile

Nokia Webkit

BlackBerry 4.2

4.3.4 PanelFormLayout

図4-9に示すように、<tr:panelGroupLayout>コンポーネント内でstyleClass属性の値をaf_m_panelBaseとして定義すると、子の<tr:panelFormLayout>コンポーネントにパディングが適用されます。

図4-9 Apple iPhone上でpanelFormLayout内にレンダリングされたパディング

例4-10に示すように、<tr:panelFormLayout>コンポーネントにstyleClassを追加する必要はありません。

例4-10 panelFormLayoutコンポーネントへのパディングの適用

<tr:panelGroupLayout styleClass="af_m_panelBase">
<tr:panelFormLayout labelWidth="35%" fieldWidth="65%">
<tr:selectOneChoice value="#{transferBean.transferFromAccount}"
label="From:" showRequired="false">
<f:selectItems value="#{bindings.AccountView1.items}"/>
</tr:selectOneChoice>
<tr:selectOneChoice  value="#{transferBean.transferToAccount}"
showRequired="false"
unselectedLabel="- select -"
label="To:">
<f:selectItems value="#{bindings.AccountView1.items}"/>
</tr:selectOneChoice>
<tr:inputText id="amount"
columns="#{requestContext.agent.capabilities.narrowScreen ? '8' : '12'}"
required="false" showRequired="false"
value="#{transferBean.transferAmount}"
label="Amount:">
<f:converter converterId="Bank10.amountConverter"/>
</tr:inputText>
<tr:panelLabelAndMessage label="Date: ">
<tr:outputText value="#{transferBean.transferDate}"/>
</tr:panelLabelAndMessage>
<f:facet name="footer">
<tr:panelGroupLayout>
<tr:spacer rendered="#{requestContext.agent.skinFamilyType eq
'blackberryminimal'}"
height="5"
width="75"/>
<tr:commandButton text="Submit"
action="#{transferBean.validateTransferRequest}"/>
</tr:panelGroupLayout>
</f:facet>
</tr:panelFormLayout>
</tr:panelGroupLayout>

表4-9は、Windows Mobileデバイス、Nokia WebkitおよびBlackBerryスマートフォン上での<tr:panelList>コンポーネント内のパディングを示す例です。

表4-9 様々なプラットフォーム上で適用された<tr:panelFormLayout>コンポーネントへのパディング

コンポーネントへのパディング" width="100%">

プラットフォーム

例

BlackBerry 4.6

Windows Mobile

Nokia Webkit

BlackBerry 4.2

4.3.5 パネル・アコーディオン

図4-10に示すように、<tr:panelGroupLayout>コンポーネント内でstyleClass属性の値をaf_m_panelBaseとして定義すると、その<tr:panelAccordion>コンポーネントにパディングが適用されます。

図4-10 Apple iPhone上でパネル・アコーディオンに適用されたパディング

例4-11に示すように、<tr:panelAccordion>コンポーネントにstyleClass属性を追加する必要はありません。

例4-11 <tr:panelAccordion>コンポーネントへのパディングの適用

<tr:panelGroupLayout styleClass="af_m_panelBase">
<tr:panelAccordion discloseMany="true">
<tr:showDetailItem text="Name" disclosed="true">
<tr:panelFormLayout fieldWidth="70%" labelWidth="30%">
...
</tr:panelFormLayout>
</tr:showDetailItem>
<tr:showDetailItem text="Contact" disclosed="true">
<tr:panelFormLayout fieldWidth="70%" labelWidth="30%">
...
</tr:panelFormLayout>
</tr:showDetailItem>
<tr:showDetailItem text="Address">
<tr:panelFormLayout fieldWidth="70%" labelWidth="30%">
...
</tr:panelFormLayout>
</tr:showDetailItem>
</tr:panelAccordion>
</tr:panelGroupLayout>

表4-11は、Windows Mobileデバイス、Nokia WebkitおよびBlackBerryスマートフォン上での<tr:panelAccordion>コンポーネント内のパディングを示す例です。

表4-10 様々なプラットフォーム上での<tr:panelAccordion>

を示しています。" title="様々なプラットフォーム上での<tr:panelAccordion>" width="100%">

プラットフォーム

例

BlackBerry 4.6

Windows Mobile

Nokia Webkit

BlackBerry 4.2

5 基本的なHTMLモバイル・ブラウザのサポート

この章では、基本的なHTMLモバイル・ブラウザに対するADFモバイル・ブラウザのサポートについて説明します。

この章には次の項が含まれます:

- 5.1項「基本的なHTMLモバイル・ブラウザのサポートについて」

- 5.2項「基本的なHTMLモバイル・ブラウザ用のアプリケーションの開発」

- 5.3項「基本的なHTMLモバイル・ブラウザのスタイル設定」

5.1 基本的なHTMLモバイル・ブラウザのサポートについて

モバイル・デバイスの基本的なHTMLブラウザではJavaScriptがサポートされないため、その強力な機能性は、BlackBerryスマートフォンやApple iPhoneのブラウザなど、ADFモバイル・ブラウザによってサポートされる他のブラウザよりも劣ります。1.2項「サポートされているモバイル・ブラウザ機能」にリストされているブラウザ以外にも、ADFモバイル・ブラウザでは、一般的なほとんどのブラウザが基本的なHTMLモバイル・ブラウザとみなされます。(ただし、ADFモバイル・ブラウザによって特定のモバイル・ブラウザが認識されない可能性もあります。)

5.1.1 基本的なHTMLモバイル・ブラウザのサポート要件

ADFモバイル・ブラウザのサポートの最小要件は、XHTML Basic、またはWAP2.nブラウザを含むXHTML Mobile Profileです。

注意:
ADFモバイル・ブラウザでは、XHTML BasicまたはXHTML Mobile ProfileのいずれもサポートしないWAP1.nブラウザはサポートされていません。

5.2 基本的なHTMLモバイル・ブラウザ用のアプリケーションの開発

ADFモバイル・ブラウザでは、ブラウザの機能または制限に適合したページがモバイル・ブラウザに提供されるため、基本的なHTMLモバイル・ブラウザに固有のユーザー・インタフェースを作成する必要はありません。ただし、これらのブラウザではJavaScriptサポートがないために、一部のHTML要素の機能が制限されます。

- 基本的なHTMLモバイル・ブラウザでは、autosubmit属性はサポートされていません。フォーム送信によりコンポーネントの自動送信機能に対応する場合にのみ、フォームに送信ボタンを追加してください。組込み自動送信機能を備えたコンポジット・コンポーネントでは、ユーザーがフォームを送信できるようにするため、ADFモバイル・ブラウザにより送信ボタンが追加されます。

- 基本的なHTMLモバイル・ブラウザでは、フォーム送信リンクはサポートされていません。すべての送信要素は、ボタンとしてレンダリングされます。基本的なHTMLモバイル・ブラウザでは、このような入力要素の子コンポーネントはサポートされていません。そのため、tr:commandLinkコンポーネントの子コンポーネントを基本的なHTMLモバイル・ブラウザでレンダリングすることはできません。tr:commandLinkの詳細は、3.5.2項「リンクの作成」を参照してください。

5.3 基本的なHTMLモバイル・ブラウザのスタイル設定

ADFモバイル・ブラウザでは、基本的なHTMLモバイル・ブラウザに対して基本的なCSSサポートが提供されます。これらのほとんどのブラウザではCSSがサポートされていますが、CSSがサポートされていないブラウザ上でもADFモバイル・ブラウザ・アプリケーションを実行できます。ただし、その場合はユーザー・インタフェースが使用しづらくなる可能性があります。予防措置として、できるだけ多くのブラウザ上でADFモバイル・ブラウザ・アプリケーションをテストしてください。

6 BlackBerry 4.2から4.5向けの設計ガイドライン

この章では、BlackBerryブラウザ4.2から4.5の動作に対応する方法について説明します。

この章には次の項が含まれます:

- 6.1項「BlackBerryブラウザの表示動作について」

- 6.2項「折返しを回避するための表の書式設定」

- 6.3項「ラベルおよびメッセージ・パネルの書式設定」

- 6.4項「列幅の書式設定」

- 6.5項「BlackBerryスマートフォンでの表示の差異に関する必知事項」

6.1 BlackBerryブラウザの表示動作について

BlackBerryブラウザの動作は、水平スクロールを使用してページを表示しないという点で、他のブラウザとは異なります。かわりに、ページは画面の幅にあわせて表示されます。

6.2 折返しを回避するための表の書式設定

ブラウザ上において長い単語がフィールド間で折り返されるため、表の書式設定時に、複数のフィールドを含む行で長い単語を使用しないようにします。

注意:
この章で使用している単語とは、一連の文字列のことです。この場合、単語に空白文字は含まれません。

BlackBerryブラウザのデフォルト・モードではブラウザの幅が物理的な画面の幅に制限されるため、行内に収まらないフィールドは次の行に表示されます。アプリケーションで複数の要素を1行に表示するには、フィールドの全体の幅をブラウザの幅以下にする必要があります。他のブラウザと同様、BlackBerryブラウザでは複数の行が必要に応じて折り返されます。フィールド内にある最も長い単語のサイズよりも列の幅を小さくすることはできません。

6.2.1 表内におけるフィールドの折返しの回避方法

表の行内にあるすべてのフィールドが入力フィールドである場合、フィールドが折り返されないようにするには、行のサイズ属性値の合計が次の式を満たしていることを確認します。

3*Number of columns + the Sum of the size attributes in all columns <=X, when X=48

一般的に、表の列内にあるフィールドのサイズは、次の式を満たしている必要があります。

3 * Number of Columns +
Sum of size attributes in all input field columns +
Sum of number of characters in longest words in all output field columns <=X, when X=48

これでもフィールドが折り返される場合は、行内に収まるまでXの値を小さくします。

6.3 ラベルおよびメッセージ・パネルの書式設定

プログラミングによる処理の柔軟性を維持するため、nowrap属性がサポートされており、この属性をTrinidadコンポーネントに対して明示的にプログラムすることで挿入できます。ページのプログラム時にコンポーネント定義にnowrapを追加した場合、問題が発生する可能性があります。

6.4 列幅の書式設定

列を書式設定する場合は、tr:panelFormLayoutコンポーネント内のラベルとフィールドの両方にパーセント幅を設定して、その合計の幅が100%になるようにします。

6.5 BlackBerryスマートフォンでの表示の差異に関する必知事項

次の要因で、同じアプリケーションが異なるデバイス上では違って表示されることがあります。

- 最小フォント・サイズの変更

- フォーム・ファクタの違い

6.5.1 最小フォント・サイズの変更

ユーザー・プリファレンスで最小フォント・サイズを変更すると、ADFモバイル・ブラウザ・レンダラの書式設定機能が影響を受けます。たとえば、図6-1に示すように、フォントがデフォルト・サイズである6ポイントに設定されている場合、入力フィールドおよびそれに対応するラベルは適切に並んで表示されます。

図6-1 デフォルト・フォント・サイズの6ポイントで表示されたアプリケーション

一方、フォント・サイズを10ポイントに拡大すると、入力フィールドがそれに対応するラベルの下に移動するため、レイアウトが崩れます。この結果、ページが読みづらくなります。

図6-2のページは、表示画面に対して大きすぎます。

図6-2 フォント・サイズの拡大

6.5.2 フォーム・ファクタの違い

画面のサイズが異なると、表示に影響が出ることがあります。(図6-1に示すように)フォント・サイズがデフォルトの6ポイントになっている場合でも、別のデバイス上では同じアプリケーションが異なって表示されます。図6-3では、入力フィールドが辛うじてデバイスの画面に収まっていますが、同じアプリケーションを他のデバイス(図6-1)で実行したときは表示スペースにまだ余裕がありました。

図6-3 フォント・サイズ6ポイントで辛うじて画面に収まっている入力フィールドおよびラベル

さらに、あるデバイスの画面上で適切に表示された入力フィールドが、異なるタイプのデバイスの画面上では窮屈に表示される場合もあります。

図6-4に示したアプリケーションでは、表のセルの幅が不十分であるため、テキストが折り返されています。

図6-4 折り返されたテキスト

7 幅が狭い画面のサポートおよびユーザー・エージェントの詳細のサポート

この章では、Trinidadインフラストラクチャによって幅が狭い画面のサポートを特定する方法、およびEL式を使用してユーザー・エージェントの詳細を公開する方法について説明します。

この章には次の項が含まれます:

- 7.1項「幅が狭い画面のサポートの特定」

- 7.2項「EL式を使用したユーザー・エージェント機能の特定」

7.1 幅が狭い画面のサポートの特定

モバイル・デバイスには、様々な画面の幅の機種があります。その結果、WebアプリケーションのUIコンポーネントが、画面の幅が240ピクセルであるデバイス上では適切にレンダリングされても、画面の幅が100ピクセルしかないデバイス上でのアプリケーション実行時には正しくレイアウトされないことがあります。このような場合、Trinidadでは幅が狭い画面のデバイス向けにレンダリングが最適化されます。Trinidadでは、画面の幅が240ピクセル未満であるデバイスは、幅が狭い画面のデバイスであるとみなされ、それにあわせて次のコンポーネントのレンダリングが最適化されます。

- tr:breadcrumbs

- tr:inputText

- tr:navigationPane

- tr:panelFormLayout

- tr:panelLabelAndMessage

- tr:panelRadio

- tr:processChoiceBar

- tr:selectRangeChoiceBar

7.1.1 Trinidadによる幅が狭い画面の最適化の特定方法

Trinidadでは画面の幅が240ピクセル未満であるデバイスのみが、幅が狭い画面のデバイスであるとみなされるため、240ピクセルよりも一般的に画面の幅が広いiPod (Safariブラウザ)またはBlackBerryスマートフォン(BlackBerryブラウザ)は、これには該当しません。Windows Mobileブラウザの場合、Trinidadにより、UA-pixelsリクエスト・ヘッダーから画面の幅が特定され、画面の幅が240ピクセル未満である場合にのみ、幅が狭い画面の最適化が適用されます。一方、他のすべてのユーザー・エージェントでは、Trinidadにより幅が狭い画面のデバイス用にレンダリングが最適化されます。

7.2 EL式を使用したユーザー・エージェント機能の特定

Trinidadでは、EL式#{requestContext.agent}を使用して、リクエストしているユーザー・エージェントの詳細が公開されます。この式により、リクエストしているユーザー・エージェントを説明するagentオブジェクトが返されます。この式に詳細の名前または機能の名前のプロパティを追加することによって、Trinidadから、ユーザー・エージェントの名前、バージョン、プラットフォーム、プラットフォームのバージョン、モデル(BlackBerryのみ)、およびブラウザのJavaScriptとPPR(部分ページ・レンダリング)のサポートを含む詳細が返されるように指定できます。ユーザー・エージェント詳細の公開の詳細は、7.2.1項「ユーザー・エージェントの詳細の特定方法」を参照してください。ブラウザの機能を特定する場合の詳細は、7.2.2項「ブラウザの機能の特定方法」を参照してください。

7.2.1 ユーザー・エージェントの詳細の特定方法

Trinidadでリクエストが受信されると、タイプ、エージェントの名前とバージョン、およびエージェントのプラットフォーム名とプラットフォーム・バージョンを含む、様々なユーザー・エージェントの詳細(表7-1)を示すユーザー・エージェント文字列が解析されます。Trinidadでは、EL式#{requestContext.agent.<detail-name>}を使用してこれらの詳細が公開されます。たとえば、ユーザー・エージェントのタイプに適したカテゴリ(つまり、デスクトップ・ブラウザ用のdesktopまたはモバイル・ブラウザ用のPDA)を取得するために、Trinidadでは、EL式内で次のようにtype詳細が使用されます。

#{requestContext.agent.type}

注意:
Trinidadでは、PlatformNameおよびPlatformVersionのような詳細について、ユーザー・エージェント文字列からこれらを解析できなかった場合にnull値を返すことがあります。

表7-1 EL式を通じて公開されるブラウザの詳細

詳細の名前

説明

type

ユーザー・エージェントのタイプを識別します。デスクトップおよびモバイル・ブラウザについて、それぞれ値はdesktopおよびPDAです。モバイル・デバイス上でSafariを実行した場合、すべてのデスクトップ・ブラウザ機能が提供されるため、エージェント・オブジェクトによりこの詳細がデスクトップ・タイプとして公開されます。

agentName

エージェントの名前。

agentVersion

エージェントのバージョン。

platformName

エージェントが実行されるプラットフォーム。

platformVersion

エージェントが実行されるプラットフォームのバージョン。

hardwareMakeModel

モバイル・デバイスのモデル。

7.2.2 ブラウザの機能の特定方法

Trinidadでは、ユーザー・エージェントに割り当てる機能に基づいて、ユーザー・エージェントのリクエストに対するレスポンスを送信します。これらの機能には、ユーザー・エージェントのJavaScriptおよびPPRのサポートが含まれます。これらの一部の機能(表7-2)は、EL式#{requestContext.agent.capabilities}を通じて公開されます。

Trinidadによってユーザー・エージェントに割り当てられる具体的な機能を特定するには、EL式#{requestContext.agent.capabilities.<capability-name>}を使用します。たとえば、TrinidadによってJavaScript機能がユーザー・エージェントに割り当てられるかどうかを特定するには、次のEL式を使用します。

# {requestContext.agent.capabilities.scriptingSpeed!='none'}

表7-2 EL式を通じて公開されるブラウザの機能

機能の名前

詳細

narrowScreen

Trinidadで幅が狭い画面のデバイス用にレンダリングが最適化されるかどうかを示します。Trinidadで幅が狭い画面のデバイス用にレンダリングが最適化される場合は、true(ブール型)が返されます。

scriptingSpeed

ユーザー・エージェントに対するJavaScriptサポートを示します。ユーザー・エージェントによってJavaScriptがサポートされていない場合は、none(文字列型)が返されます。

partialRendering

ユーザー・エージェントに対するPPRサポートを示します。ブラウザによってPPRがサポートされている場合は、true(ブール型)が返されます。

8 ADFモバイル・ブラウザ・アプリケーションの拡張

この章では、ADFモバイル・ブラウザ・アプリケーションに電子メール、電話およびGoogleマップ機能を追加する方法について説明します。

この章には次の項が含まれます:

- 8.1項「電子メール、電話およびGoogleマップを使用するためのアプリケーション拡張の概要」

- 8.2項「電子メール・クライアントの統合」

- 8.3項「電話の統合」

- 8.4項「Googleマップの統合」

- 8.5項「ページ表示ディメンションに関する必知事項」

8.1 電子メール、電話およびGoogleマップを使用するためのアプリケーション拡張の概要

第4章「ADFモバイル・ブラウザ・アプリケーションのスキニング」で説明したスタイルシートの使用に加え、EL (式言語)式を使用してtr:goButtonおよびtr:goLinkコンポーネントを定義することにより、ADFモバイル・ブラウザ・アプリケーションをさらに調整して電子メール、電話およびGoogleマップのサポートを含めるようにできます。

8.2 電子メール・クライアントの統合

Webアプリケーションから電子メール・アプリケーションを起動するには、次の手順を実行します。

1. tr:goButtonまたはtr:goLinkコンポーネントを使用します。

2. HTMLリンクの先頭にmailto:プロトコルを追加します。

3. HTMLリンクにdestinationプロパティを設定します(例8-1では、式言語文#{sessionScope.empDetails.Email}として記載されています)。

例8-1 mailto:プロトコルを使用したiPhoneの電子メール・クライアントの統合

<tr:goLink styleClass="messageText"
text="#{sessionScope.empDetails.Email}"
destination="mailto:#{sessionScope.empDetails.Email}"/>

8.2.1 メールのプロパティの追加

mailto:プロトコルでは、表8-1に示すメールのプロパティを追加できます。

表8-1 メールのプロパティ

プロパティ

構文

複数の受信者

各電子メール・アドレスをカンマ(,)で分割

メッセージの件名

subject =<subject text>

CC受信者

cc=<name@address.com>

BCC受信者

bcc=<name@address.com>

メッセージ・テキスト

body=<Message Text>

これらのプロパティを指定するには、例8-2の#{sessionScope.empDetails.Email}?のように電子メール・アドレスの後ろに疑問符(?)を付加し、続けてプロパティを追加します。それぞれのプロパティはアンパサンド(&)で分割します。

例8-2 電子メールのプロパティの追加

<tr:goLink styleClass="messageText"
text="#{sessionScope.empDetails.Email}"
destination="mailto:#{sessionScope.empDetails.Email}?subject=hello
&cc=myboss@oracle.com
&bcc=me@oracle.com
&body=good morning!"/>

8.3 電話の統合

電話番号の呼出しダイアログ・ボックスを起動するには、次の手順を実行します。

1. tr:goButtonまたはtr:goLinkコンポーネントを使用します。

2. tel:プロトコルを、電話番号の前に付加します。

注意:
この電話番号は、RFC 2806プロトコル(http://www.ietf.org/rfc/rfc2806.txt)の構成要素をサポートしている必要があり、これによりエンド・ユーザーによる電話番号のダイアル後にポーズを追加したり内線番号をダイアルしたりできます。Apple社はRFC 2086のどの構成要素をサポートしているか明示していないため、各構成要素を自分でテストする必要があります。

3. 電話番号にdestinationプロパティを設定します(例8-3では、EL式#{sessionScope.empDetails.PhoneNumber}で記載されています)。

例8-3 呼出しダイアログ・ボックスの有効化

<tr:goLink styleClass="messageText"
text="#{sessionScope.empDetails.PhoneNumber}"
destination="tel:#{ sessionScope.empDetails.PhoneNumber}"/>

8.4 Googleマップの統合

使用可能なデータを示すマップを表示するためのリンクをアプリケーション内に作成するには、tr:goLinkコンポーネントのdestinationプロパティを次のように指定します。

1. tr:goButtonまたはtr:goLinkコンポーネントを使用します。

2. destination=をGoogleマップのURL(例8-4に示したdestination=http://maps.google.com/maps)として定義します。

3. 場所を検索するため、GoogleマップのURLの後ろに?q=を追加します。

4. ターゲットとなる場所の住所の文字列を使用してq=を定義します。この値には、完全な住所、都市名、ランドマークなど、Googleマップによって検索して特定することが可能な任意の項目を含めることができます。複数の項目が見つかった場合、Googleマップにより複数のピンが自動的にドロップされます。

注意:
text文字列に記載されるアドレスは、単語間のカンマを含め、正しい書式になっている必要があります。destination文字列では、スペースをプラス符号(+)文字に置き換えます。

例8-4は、Googleマップ・アプリケーションを起動して200 Oracle Parkway上にピンをドロップする、tr:goLinkコンポーネントの定義方法を示しています。

例8-4 Googleマップでの場所の指定

<tr:goLink styleClass="messageAddrText"
text="200 Oracle Parkway, Redwood City, CA, USA"
destination="http://maps.google.com/maps?q=200+Oracle+Parkway,+Redwood+City,+CA,+USA"/>

例8-5では、EL式で表された住所を使用して場所を指定しています。

例8-5 EL式を使用したGoogleマップでの場所の指定

<tr:goLink styleClass="messageAddrText"
text="#{sessionScope.empDetails.StreetAddress},
#{sessionScope.empDetails.City},
#{sessionScope.empDetails.StateProvince},
#{sessionScope.empDetails.CountryName}"
destination=" http://maps.google.com/maps?q=#{sessionScope.empDetails.StreetAddress},
+#{sessionScope.empDetails.City},
+#{sessionScope.empDetails.StateProvince},
+#{sessionScope.empDetails.CountryName}"/>

アドレス文字列内の各EL式は、例8-5に示すようにプラス符号(+)で連結する必要があります。EL式とEL式の間にスペースが含まれていてはなりません。

8.4.1 ルート案内のプログラミング

Googleマップでは、ルート案内もサポートされています。GoogleマップのURL内で、疑問符(?)の後ろの部分を、出発地点と到着地点を示す文字列(saddr=<starting address>&daddr=<destination address>)に変更します。この形式を使用して、California、Redwood City、200 Oracle ParkwayにあるOracle本社からCalifornia、San Francisco、1 Telegraph Hillまでのルートを表す場合は、次のように指定します。

http://maps.google.com/maps?
saddr=200+Oracle+Parkway,+Redwood+City,+CA,+USA
&daddr=1+Telegraph+Hill,+San+Francisco,+CA,+USA

注意:
現時点で、この他にApple社およびGoogle社から公開されているAPIはありません。

8.4.2 iPhone上でのGoogleマップのサポート

iPhoneのSafariでは、GoogleマップおよびYouTubeアプリケーションの両方がサポートされており、ターゲットWebサイトのURLを開くかわりに、特定のURLコールを自動的に捕捉してネイティブ・アプリケーションを起動します。たとえば、ユーザーがGoogleマップのHTMLリンク(http://maps.google.com)をクリックすると、Safariでは、GoogleマップのWebサイトにナビゲートするかわりにネイティブなGoogleマップ・アプリケーションを起動します。ネイティブなGoogleマップ・アプリケーションでは、maps.google.comでサポートされているURLパラメータを処理できるため、ユーザーは場所を指定してピンをドロップできます。

8.5 ページ表示ディメンションに関する必知事項

ズーム比率を正しく制御するには、ページのヘッダー内にviewportメタ・タグを追加します。viewportはデバイス固有のメタ・タグであり、ページを正しい比率で表示するために使用されます。例8-6では、iPhoneおよびBlackBerryスマートフォンの両方に対してビュー・ポートを設定しています。ビューポートの詳細は、iOS Developer Library (http://developer.apple.com/library/ios/navigation/)から入手可能な『iOS Human Interface Guidelines』を参照してください。

例8-6 ビュー・ポートの設定

<trh:head title="Online Banking Demo">
<meta http-equiv="Content-Type"
content="text/html; charset=windows-1252"/>
<f:verbatim rendered="#{requestContext.agent.skinFamilyType eq 'blackberry'}">
<meta name="viewport"
content="width=device-width;
height=device-height;
initial-scale=1.0;
maximum-scale=1.0;
user-scalable=0;"/>

</f:verbatim>
<f:verbatim rendered="#{requestContext.agent.skinFamilyType eq 'iPhonewebkit'}">
<meta name="viewport"
content="width=device-width;
initial-scale=1.0;
maximum-scale=1.0;
user-scalable=0;"/>
</f:verbatim>
</trh:head>

注意:
バージョン4.6以降のBlackBerryでは、viewportに似たHandheldFriendlyメタ・タグがサポートされています。ヘッダーに次の行を追加すると、ページの比率が適切に調整されます。
<meta name="HandheldFriendly" content="True">

8.5.1 iPhone用のビュー・ポートの設定

モバイル・ブラウザ・アプリケーションによっては、デスクトップのSafariブラウザ上では正しく表示できても、画面の小さなiPhone上では正しく比率が調整されず、画面に対して表示範囲が大きすぎることがあります。この結果、iPhone上でページが縮小されて読みづらくなります。例8-6内の次の行は、iPhoneのviewport指定を<head>要素内で設定して、iPhone上でアプリケーションを適切に表示する方法を示しています。

<f:verbatim rendered="#{requestContext.agent.skinFamilyType eq 'iPhonewebkit'}">
<meta name="viewport"
content="width=device-width;
initial-scale=1.0;
maximum-scale=1.0;
user-scalable=0;"/>

オラクルの法律上の注意点について

コピーライトについて

Copyright © 1994-2016, Oracle and/or its affiliates.All rights reserved.

ライセンス制約の保証と結果的に生じる損害の免責

このソフトウェアおよび関連ドキュメントの使用と開示は、ライセンス契約の制約条件に従うものとし、知的財産に関する法律により保護されています。ライセンス契約で明示的に許諾されている場合もしくは法律によって認められている場合を除き、形式、手段に関係なく、いかなる部分も使用、複写、複製、翻訳、放送、修正、ライセンス供与、送信、配布、発表、実行、公開または表示することはできません。このソフトウェアのリバース・エンジニアリング、逆アセンブル、逆コンパイルは互換性のために法律によって規定されている場合を除き、禁止されています。

保証免責

ここに記載された情報は予告なしに変更される場合があります。また、誤りが無いことの保証はいたしかねます。誤りを見つけた場合は、オラクルまでご連絡ください。

制限付権利について

このソフトウェアまたは関連ドキュメントを、米国政府機関もしくは米国政府機関に代わってこのソフトウェアまたは関連ドキュメントをライセンスされた者に提供する場合は、次の通知が適用されます。

U.S. GOVERNMENT END USERS: Oracle programs, including any operating system, integrated software, any programs installed on the hardware, and/or documentation, delivered to U.S. Government end users are "commercial computer software" pursuant to the applicable Federal Acquisition Regulation and agency-specific supplemental regulations.As such, use, duplication, disclosure, modification, and adaptation of the programs, including any operating system, integrated software, any programs installed on the hardware, and/or documentation, shall be subject to license terms and license restrictions applicable to the programs.No other rights are granted to the U.S. Government.

危険な用途への使用について

このソフトウェアまたはハードウェアは様々な情報管理アプリケーションでの一般的な使用のために開発されたものです。このソフトウェアまたはハードウェアは、危険が伴うアプリケーション(人的傷害を発生させる可能性があるアプリケーションを含む)への用途を目的として開発されていません。このソフトウェアまたはハードウェアを危険が伴うアプリケーションで使用する際、安全に使用するために、適切な安全装置、バックアップ、冗長性(redundancy)、その他の対策を講じることは使用者の責任となります。このソフトウェアまたはハードウェアを危険が伴うアプリケーションで使用したことに起因して損害が発生しても、Oracle Corporationおよびその関連会社は一切の責任を負いかねます。

商標と登録商標について

OracleおよびJavaはオラクルおよびその関連会社の登録商標です。その他の社名、商品名等は各社の商標または登録商標である場合があります。

Intel、Intel Xeonは、Intel Corporationの商標または登録商標です。すべてのSPARCの商標はライセンスをもとに使用し、SPARC International, Inc.の商標または登録商標です。AMD、Opteron、AMDロゴ、AMD Opteronロゴは、Advanced Micro Devices, Inc.の商標または登録商標です。UNIXは、The Open Groupの登録商標です。

第三者のコンテンツ、製品、サービスに対する免責事項

このソフトウェアまたはハードウェア、そしてドキュメントは、第三者のコンテンツ、製品、サービスへのアクセス、あるいはそれらに関する情報を提供することがあります。適用されるお客様とOracle Corporationとの間の契約に別段の定めがある場合を除いて、Oracle Corporationおよびその関連会社は、第三者のコンテンツ、製品、サービスに関して一切の責任を負わず、いかなる保証もいたしません。適用されるお客様とOracle Corporationとの間の契約に定めがある場合を除いて、Oracle Corporationおよびその関連会社は、第三者のコンテンツ、製品、サービスへのアクセスまたは使用によって損失、費用、あるいは損害が発生しても一切の責任を負いかねます。

アルファ版およびベータ版ドラフト・ドキュメントについて

このドキュメントが試作版の場合:

このドキュメントは試作版であり、デモおよび暫定使用のみを目的としたものです。このソフトウェアを使用するハードウェアに限定するものではありません。Oracle Corporationおよびその関連会社は、このドキュメントに関して一切の責任を負わず、いかなる保証もいたしません。また、このドキュメントを使用したことによって損失、費用、あるいは損害が発生しても、一切の責任を負いかねます。

非公開のアルファ版およびベータ版ドラフト・ドキュメントについて

このドキュメントが非公開の試作版の場合:

このドキュメントに含まれる情報は、情報の共有のみを目的としたものであって、顧客諮問委員会(Customer Advisory Board)のメンバーとしてのお客様の立場でのみ、またはお客様のベータ・トライアル契約のみに従って検討されるべきものとします。マテリアル、コード、または機能の提供をお約束するものではなく、購入決定を行う際の判断材料とすべきではありません。このドキュメントに記載されている特徴または機能の開発、リリースおよび時期については、オラクルの裁量により決定されます。

このドキュメントには、ソフトウェアまたは印刷物などの形式を問わず、オラクルが独占的な権利を有する財産的情報が含まれています。この機密資料へのアクセスと使用は、お客様とオラクルとの間で締結され、お客様が遵守に同意した、Oracle Master Agreement、Oracle License and Oracle Services Agreement (オラクル・ライセンスおよびサービスに関する契約書)、Oracle PartnerNetwork Agreement、Oracle Distribution Agreementまたはその他のライセンス契約の条件に従うものとします。このドキュメントとその内容の開示、コピー、複製および配布には、オラクルによる事前の承諾を必要とします。このドキュメントはライセンス契約の一部となるものではなく、オラクルおよびその子会社や関連会社との契約を構成するものではありません。

ドキュメントのアクセシビリティについて

オラクルのアクセシビリティについての詳細情報は、Oracle Accessibility ProgramのWebサイトhttp://www.oracle.com/pls/topic/lookup?ctx=acc&id=docacc を参照してください。

Oracle Supportへのアクセス

サポートをご契約のお客様には、My Oracle Supportを通して電子支援サービスを提供しています。詳細情報はhttp://www.oracle.com/pls/topic/lookup?ctx=acc&id=infoか、聴覚に障害のあるお客様はhttp://www.oracle.com/pls/topic/lookup?ctx=acc&id=trsを参照してください。