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

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

この章は次の項を含みます:

2.1項「ADFモバイル・ブラウザの開発環境について」
2.2項「ADFモバイル・ブラウザの開発環境の構成」
2.3項「ADFモバイル・ブラウザ・アプリケーションの開発」
2.4項「ADFモバイル・ブラウザ・アプリケーションのテスト」

2.1 ADFモバイル・ブラウザの開発環境について

ADFモバイル・ブラウザ・アプリケーションの開発方法は、ADF Webアプリケーションの開発方法とほぼ同じですが、ADFモバイル・ブラウザ・アプリケーションの開発ではApache MyFaces Trinidadコンポーネントで構成されるモバイルJSFページのみを使用する点が異なります。

注意:

ページ・フラグメント、ダイアログ内のポップアップおよびリージョン・サポートを除き、ADFモバイル・ブラウザ・アプリケーションの開発にはADFタスク・フローを使用できます。ADFタスク・フローを使用するADFモバイル・ブラウザ・アプリケーションでは、trinidad-simpleスキン・ファミリのみがサポートされます。

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

アプリケーションおよびプロジェクトの作成による環境の構成
Webプロジェクトの追加
Apache MyFaces Trinidadコンポーネントを使用したJSFページの追加

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

ADFモバイル・ブラウザ・アプリケーションとデスクトップ・ブラウザ用のADF Webアプリケーションの開発方法は、Webプロジェクトの作成の点でのみ異なります。詳細は、2.3項「ADFモバイル・ブラウザ・アプリケーションの開発」を参照してください。

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

環境を構成するには、まず、ADFモバイル・ブラウザ・テクノロジを備えたプロジェクトを含むADFモバイル・ブラウザ・アプリケーションを作成します。

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

「ファイル」を選択し、「新規」を選択します。

図2-1 新規ギャラリ
「新規ギャラリ」で「一般」を展開し、「アプリケーション」、続いて「Fusion Webアプリケーション(ADF)」を選択し、「OK」をクリックします。
図2-2に示すように、「Fusion Webアプリケーション(ADF)の作成」ウィザードの「アプリケーションの名前付け」ページでアプリケーションの名前を入力し、必要に応じて「ディレクトリ」フィールドにアプリケーションの場所を入力します。

図2-2 「アプリケーションの名前付け」ページ

「終了」をクリックします。

「Fusion Webアプリケーション(ADF)」を選択すると、モバイル・ビュー・プロジェクトによって使用されるモデル・プロジェクトが作成されます。図2-3は、「アプリケーション・ナビゲータ」に表示された、アプリケーションのModelプロジェクトおよびその生成済View Controllerプロジェクトを示しています。

図2-3 「アプリケーション・ナビゲータ」に表示されたFusion Webアプリケーションとそのプロジェクト

注意:

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

次のように、モバイルModel View Controllerを作成します。

「ファイル」、「新規」を選択して作成します。「新規」ギャラリが表示されます。
「新規ギャラリ」で「カテゴリ」を展開し、「プロジェクト」、続いて「カスタム・プロジェクト」を選択し、「OK」をクリックします。

「カスタム・プロジェクトの作成」ウィザードで、まずプロジェクト名を入力します。たとえば、mvc(Model View Controllerの省略名)と入力します。

ヒント:

モバイル・デバイスへのURLの入力を簡単にするために、アプリケーションとプロジェクトの両方に対して、小文字で短い名前を入力します。

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

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

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

図2-5 ADFモバイル・ブラウザ・プロジェクト用に選択されたADFモバイル・ブラウザおよびサポート機能
アプリケーションでADFタスク・フローを使用する場合は、「ADFページ・フロー」機能を「選択済」ウィンドウに追加します。図2-6に示すように、「ADFページ・フロー」機能により、ADF Faces、ADFページ・フロー、TrinidadおよびXMLテクノロジが追加されます。

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

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

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

図2-7に示すように、「アプリケーション・ナビゲータ」のFusion Webアプリケーション(adfm)内に、モバイルModel View Controllerプロジェクト(mvc)が表示されます。

図2-7 「アプリケーション・ナビゲータ」のモバイルADF Model View Controllerプロジェクト

Model View Controllerプロジェクトを作成することで、モバイル・アプリケーションのページ・フロー定義ファイルfaces-config.xmlも作成されます。ページ・フロー作成の詳細は、『Oracle Fusion Middleware Oracle Application Development Framework Webユーザー・インタフェース開発者ガイド』「ページ・フローの定義」を参照してください。

ADFモバイル・ブラウザ機能を追加したため、Apache MyFaces Trinidadライブラリが自動的にワークスペースにロードされており、図2-10に示すように、モバイルJSFページの作成時にはTrinidadコンポーネント・パレットがロードされます。

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

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

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

ADFモバイル・ブラウザ・アプリケーションの開発では、最初にJSPページを作成してから、そこにApache MyFaces Trinidadコンポーネントを移入します。

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

「ファイル」を選択し、「新規」を選択します。
「新規ギャラリ」で「カテゴリ」を展開し、「Web層」、続いて「JSF/Facelets」を選択し、「ページ」を選択します。「OK」をクリックします。

注意:

「フィルタ条件」リストから、「プロジェクト・テクノロジ」(デフォルト)を選択する必要があります。

図2-8 JSFページの場合の「新規ギャラリ」

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

注意:

アプリケーションに「ADFモバイル・ブラウザ」機能を追加済であるため、図2-9に示すように、デフォルトで「モバイル機器での表示」オプションが選択されます。

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

図2-10は、page1.jspというモバイルJSPページのデザイナを示しています。
「コンポーネント・パレット」で、図2-10のように「Trinidad」を選択してから、Apache MyFaces Trinidadコンポーネントを使用してページを作成します。ページの作成方法は、デスクトップ用のADF Webページの作成方法と同じです。

図2-10 Trinidadコンポーネント・パレットの使用

2.3.2 モバイルJSFページ作成時の処理内容

「モバイル機器での表示」オプションがデフォルトで選択されているため、ビジュアル・エディタのページ・デザイナでは、図2-10のようにモバイル・デバイスのサイズが反映されます。このオプションにより、次のADFスキン関連の構成ファイルとスタイルシートも作成され、ADFモバイル・ブラウザに構成されます。表2-1は、ADFモバイル・ブラウザView ControllerプロジェクトのWebコンテンツ・フォルダにある、これらのファイルを示しています。

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

スキニング・ファイル	場所	説明
`trinidad-config.xml`	モバイルView ControllerプロジェクトのWEB-INFノード	ADFモバイル・ブラウザ・アプリケーションで使用されるスキンを定義します。このファイルをモバイル・コンテキストで使用する場合の詳細は、4.2項「ADFモバイル・ブラウザのスキニングの実装」を参照してください。『Oracle Fusion Middleware Oracle Application Development Framework Webユーザー・インタフェース開発者ガイド』の「trinidad-config.xmlでの構成」も参照してください。
`trinidad-skins.xml`	モバイルView ControllerプロジェクトのWEB-INFノード	モバイルJSFページを作成すると自動的に生成されるスキン・ファイルをリストします。デフォルトでは、これらは`mobile.css`と`richmobile.css`です。『Oracle Fusion Middleware Oracle Application Development Framework Webユーザー・インタフェース開発者ガイド』の4.2項「ADFモバイル・ブラウザのスキニングの実装」およびtrinidad-skins.xmlでの構成に関する項も参照してください。
`mobile.css`	モバイルView Controllerプロジェクトのスタイル・ノード	基本的なHTMLブラウザと、古いバージョンのスマートフォンで使用されるブラウザに使用されます。
`richmobile.css`	モバイルView Controllerプロジェクトのスタイル・ノード	iOSまたはAndroidで動くブラウザなど、Webkitベースのスマートフォン・ブラウザに使用されます。

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」の順に選択するとアクセスできます)。

注意:

レイアウトに問題が発生するため、「One Column」表示を選択しないでください。

BlackBerry Browser 4.x

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

「Options」→「Browser Configuration」を選択します。
次の表が選択されていることを確認します。
- Support JavaScript
- Allow JavaScript Popup
- Support HTML Tables