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モバイル・ブラウザ・アプリケーションを作成するには、次の手順を実行します。

アプリケーションおよびプロジェクトの作成による環境の構成
Webプロジェクトの追加
Apache MyFaces Trinidadコンポーネントで構成されたJSFページの追加
第4章「スキニング」の説明に従って、ADFモバイル・ブラウザのスキニングを使用してページ・レイアウトを最適化します。
シミュレータまたはデバイスでアプリケーションをテストします。

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

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

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

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

作業を始める前に、次のようにします。

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

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

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

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

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

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

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

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

注意:

モデル・プロジェクトに対してはビジネス・ロジックを定義できますが、生成したビュー・コントローラ・プロジェクトは使用しないでください。かわりに、次の手順を実行してモバイル・ビュー・コントローラ・プロジェクトを作成します。

「ファイル」を選択し、「新規」を選択します。「新規」ギャラリが表示されます。
「新規ギャラリ」で「カテゴリ」を展開し、「プロジェクト」→「汎用プロジェクト」を選択します。「OK」をクリックします。
汎用プロジェクトの作成ウィザードで、まずプロジェクト名を入力します。たとえば、図2-4に示すように、mvc (モバイル・ビュー・コントローラの省略名)と入力します。
「ADFモバイル・ブラウザ」を「選択可能」リストから「選択済」リストに移動することによって、プロジェクト用にADFモバイル・ブラウザ・テクノロジを選択します。

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

図2-4は、「選択可能」リスト内のADFモバイル・ブラウザ・テクノロジを示しています。ADFモバイル・ブラウザ・テクノロジを「選択済」リストに移動すると、次のテクノロジがプロジェクトで使用可能になり、また、図2-5に示すように、「選択済」リストにも表示されます。
- Java
- JSF(JavaServer Faces)
- JSPおよびサーブレット
図2-5 プロジェクト用に選択されたADFモバイル・ブラウザ・テクノロジおよびサポート・テクノロジ
「次へ」をクリックして「Java設定の構成」ページをナビゲートし、「終了」をクリックします。

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

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

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

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

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

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

図2-7は、ビジネス・コンポーネント・プロジェクトであるmodelを含むモバイル・アプリケーション(adfm)を示しています。

図2-7 ADFモバイル・ブラウザ・アプリケーションでのビジネス・コンポーネント・プロジェクトの作成

2.3.1 モバイルJSFページの作成によるADFモバイル・ブラウザ・アプリケーションの開発方法

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

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

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

注意:

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

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

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

注意:

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

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

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

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

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

「モバイル機器での表示」オプションがデフォルトで選択されているため、ビジュアル・エディタのページ・デザイナでは、図2-10のようにモバイル・デバイスのサイズが反映されます。

ヒント:

「ツール」をクリックしてから「プリファレンス」、「モバイル」の順に選択して、ビジュアル・エディタでページのサイズを変更できます。

さらに、JDeveloperによりADFモバイル・ブラウザ・ビュー・プロジェクトにtrinidad-config.xmlファイルが移入されます。このファイルはアプリケーションのデフォルト・スキンを設定するために使用します。詳細は、第4章「スキニング」を参照してください。

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(http://www.oracle.com/technetwork/index.html)を参照してください。

図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サポートが有効になっていることを確認するには、次の手順を実行します。

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