DOWNLOAD Oracle JDeveloper Studio Edition Sample iPhone CSS

TAGS mobile, adf, All

Oracle JDeveloperとOracle ADFを使用したApple iPhoneの開発

著者：Joe Huang

Oracle JDeveloperとOracle ADFを使用することで、開発者は誰でもiPhone用の強力なWebアプリケーションを迅速に作成できます。

2008年12月公開

Apple iPhoneは、2007年7月の初回発売以来18カ月で、もっとも売れ行きのよい商品となっています。 こうした成功のおもな要因は、iPhoneの強力なSafariブラウザが、通常はデスクトップ・ブラウザのみが対応しているJavaScript機能と AJAX機能に完全に対応しており、ほぼすべてのWebページを閲覧できる点です。 このコラムでは、 Oracle JDeveloperと Oracle Application Development Framework（Oracle ADF）Mobileを使用して、iPhone用に最適化 されたモバイルWebアプリケーションを開発する方法について説明します。

課題

3.5インチのiPhone画面を使用してアクセスするモバイル・ユーザー向けのWebアプリケーションの設計は、22インチのLCD モニターを使用してアクセスするデスクトップ・ユーザー向けのものとは大きく異なっています。 そのため、Web開発者にとって興味深い課題が発生しています。これは、現在市場に出回っているWeb開発ツールが、次の2つのカテゴリのいずれかに属し ているためです。

• デスクトップ向けWebブラウザ開発ツール：デスクトップ・ブラウザがサポートするAJAX/JavaScript機能を十分活 用するツールです。 17インチ以上（または解像度1,024x768以上）の画面サイズを対象としたユーザー・インタフェースを開発します。
• モバイル向けHTML Webブラウザ開発ツール：小画面（240x320）のユーザー・インタフェースを開発します。 すべてのモバイル・ブラウザに基本的なHTMLコンテンツを提供する最小限の共通機能を備えています。
• .

Oracle ADF Mobile Browserクライアントを使用すれば、簡単なHTMLコンテンツやWAP 2.0コンテンツしか処理できないモバイル・ブラウザとの互換性を完全に維持しつつ、iPhone用のSafariブラウザがサポートするAJAX機能を 活用できます。 さらに、iPhoneの画面サイズとモバイルでのWeb使用向けに最適化されたユーザー・インタフェースを開発できます。

Oracle ADFでのモバイル開発における基本事項

Oracle ADFは、Oracle ADF Mobileによりモバイル・アプリケーションの開発をサポートします。 モバイル・サポートの中核となるものは、MyFaces Trinidadコンポーネントの提供するJavaServer Faces（JSF）モバイル・レンダリング・キットと、Oracle JDeveloperデザインタイムのサポートにあります。 Oracle ADF Mobileのおもな機能には、たとえば次のようなものがあります。

• ブラウザのユーザー・エージェントの検出と機能の提供：Trinidadコンポーネントのモ バイル・レンダリング・キットは、ユーザー・エージェントを検出することでクライアントのブラウザ・タイプを特定し、検出したブラウザの機能に基づいてコ ンテンツを提供します。 たとえば、AJAX機能に完全対応していないモバイル・ブラウザに対してレンダリングを実行する場合、ページの部分更新機能が自動的に無効になります。 このメカニズムは、次のカテゴリに大別される多数のモバイル・ブラウザに対応しています。
• • iPhone用Safariブラウザ
  • BlackBerry用ブラウザ
  • Nokia S60用ブラウザ
  • Windows Mobile用ブラウザ
  • 基本的なHTMLブラウザ
• モバイル・ブラウザのレンダリングの最適化：モバイル・ブラウザの各種UIコンポーネントへ の対応方法はそれぞれ異なっており、モバイル・デバイスの搭載するフォーム・ファクタや解像度もそれぞれ異なっています。 Trinidadコンポーネントは、これらのUI要素を異なる方法でレンダリングし、各ユーザー・インタフェース用に表示とレイアウトを最適化します。そ のため、モバイル・デバイス別の検討が不要になります。
• Oracle ADF Modelへの完全対応：Oracle ADF Modelとビジネス・ロジック・コンポーネントはすべてモバイル開発に対応しており、Oracle JDeveloperデザインタイムのサポートとドラッグ・アンド・ドロップ機能を備えています。
• モバイル・ビューの作成とコンポーネント・パレット：Oracle JDeveloperの"Create JSF Page"ダイアログボックスを使用して、モバイル・デバイスをターゲットとして選択できます。 一度設定すれば、コンポーネント・パレットにはそのモバイル・ブラウザが対応するコンポーネントのみが表示されます。
• .
• ビュー・エディタの画面解像度対応：Oracle JDeveloperのビュー・エディタのサイズを、モバイル・デバイスの画面とほぼ同じサイズに設定できます。 この機能を使用すれば、実際のモバイル・デバイスでどのように表示されるかをおおよそ確認できます。

• モバイル・デバイスのレンダリング・キットは、Trinidadコンポーネントにのみ搭載されています。 Oracle ADF Facesコンポーネントには、現在モバイル向けのレンダリング・キットは搭載されていません。
• モバイル・デバイスは、Trinidadのサブセットをサポートしています。 サポートされるTrinidadコンポーネントの一部には、いくつかの制限があります。 詳しくは、Oracle Technology Network（OTN)の『 ADF Mobile Component Tags Summary』をご覧ください。

iPhone用に最適化されたOracle ADF Mobileアプリケーションの開発

Oracle ADFとOracle JDeveloperを使用してiPhone用に最適化されたモバイル・アプリケーションを開発する高度な手順の概要は、次のとおりです。

1. 既存のビジネス・ロジック・コンポーネントの開発または再利用：Oracle ADF Mobileは、Oracle ADF Modelとビジネス・ロジック・コンポーネントとの完全な互換性を備えているため、ほかのプロジェクトのビジネス・ロジック・コンポーネントを簡単に再 利用できます。 さらに、ビュー・エディタは、Oracle JDeveloperのデータ・コントロールのドラッグ・アンド・ドロップ機能に完全対応しています。
2. モバイル・アプリケーション向けのページ・フローとページ・ビューの開発：モバイル・アプリ ケーションのためのページ・フローとページ・ビューの開発プロセスは、JSFアプリケーションのための開発プロセスと基本的には同じです。 ビュー・エディタの便利な機能の1つは、モバイル・デバイスの解像度とほぼ同じキャンバス・サイズを設定できる機能です。 Oracle JDeveloperは少数の一般的なモバイル解像度をサポートしており、iPhoneの解像度は手動で追加できます。
3. iPhone用Safariブラウザのための最適化：いくつかの方法を使用して、 iPhone固有のルック・アンド・フィールとiPhoneサービスとの通信を実現し、ページ移動におけるユーザー・エクスペリエンスを向上できます。

ビュー・エディタへのiPhoneの解像度の追加

ビュー・エディタの画面解像度リストを使用すれば、視覚的にビューを設計できます。 Oracle JDeveloperは、240x240、240x260、240x320、320x240の解像度に標準対応しています。 iPhoneの画面解像度は、320x480です。

ビュー・エディタにiPhoneの解像度を追加するには、次の手順に従います。

1. まずは、次のファイルを検索し、一時的な場所にコピーします。 これはOracle JDeveloperの拡張ファイルであり、Oracle JDeveloperのモバイル開発をサポートします。

   <JDeveloper Install Home>/jdev/extenstions/oracle.wireless.dt.jar
                                         
   
   
                                       

2. 任意の解凍プログラムを使用してjarファイルを開き、dc.xmlというファイルを探します。dc.xmlファイルをテキス ト・エディタまたはOracle JDeveloperで開きます。 ビュー・エディタ内の、各種デバイス解像度のエントリ定義行に注目してください。 以下に例を挙げます。

   <reference-device name="320 X 240" displayable-name="320 X 240" width="320" height="240" TablesCapable="true" />
                                         
   
   
                                       

3. 320x240の解像度のエントリのすぐ前に、次の行を挿入します。

   <reference-device name="320 X 480" displayable-name="320 X 480" width="320" height="480" TablesCapable="true" />
                                         
   
   
                                       

4. 更新したdc.xmlファイルを、oracle.wireless.dt.jarファイルに保存します。 保存方法は、解凍プログラムでこのファイルを直接開き、指示に従ってファイルを保存する方法と、任意の解凍プログラムを使用してこのファイルをjarファ イルに追加する方法の2つがあります。
   
5. 元のoracle.wireless.dt.jarファイルのバックアップ・コピーを、jdev/extensionsディレク トリ内に作成します。 次に、更新したoracle.wireless.dt.jarファイルを、jdev/extensionsディレクトリ内にコピーします。
6. .
7. Oracle JDeveloperを再起動して、ビュー・エディタの解像度のドロップダウン・リストに追加したエントリが表示されることを確認します。

iPhone固有のルック・アンド・フィールの実現

Trinidadコンポーネントを使用してスキニングすることで、Oracle ADF MobileアプリケーションにiPhone固有のルック・アンド・フィールを設定できます。 さらに、同一のUIコンポーネント・セットにプラットフォーム固有のルック・アンド・フィールを設定できるため、各種モバイル・デバイスに合わせて同じア プリケーションを複数バージョン作成する必要はありません。

iPhoneのスキニングを実行するには、まず、JSFアプリケーションの実行時に各種モバイル・ブラウザの各種スタイルシートの適用 を可能にするロジックを実装します。 通常、Oracle ADF Mobileアプリケーションは複数のデバイス・タイプに対応する必要がありますが、複数のデバイスで問題なく機能する1つの共通スタイルシートを定義す るのは事実上不可能です。 そのため、まずはアプリケーションのページ・フローにマネージドBeanを作成し、メソッドの1つでブラウザ・タイプを検出して、そのプラットフォームで 使用するスキン・ファミリー名を返すよう設定します。 このメソッドは、Trinidad-config.xmlファイルで起動できます。以下に例を挙げます。

<skin-family>#{AgentUtil.phoneFamily}
                                  


                                

<skin>
                                  


 <id>iphone</id>
                                  


 <family>iphoneFamily</family>
                                  


 <render-kit-id>org.apache.myfaces.trinidad.desktop</render-kit-id>
                                  


 <style-sheet-name> styles/iPhone.css</style-sheet-name>
                                  


</skin>
                                  


                                

 private String IPHONE_SKIN = "iphoneFamily";
                                  


 private String SYMBIAN_SKIN = "symbianFamily";
                                  


 private String DEFAULT_SKIN = "minimalFamily";
                                  


                                   


 public String getPhoneFamily() {
                                  


 if (phoneFamily.isEmpty())
                                  


 {
                                  


 FacesContext fc = FacesContext.getCurrentInstance();
                                  


 HttpServletRequest req =
                                  


 (HttpServletRequest)fc.getExternalContext().getRequest();
                                  


 String agent = req.getHeader("User-Agent");
                                  


                                   


 if (agent != null && agent.indexOf("iPhone") > -1) {
                                  


 phoneFamily = IPHONE_SKIN;
                                  


 } else if (agent != null && agent.indexOf("Symbian") > -1) {
                                  


 phoneFamily = SYMBIAN_SKIN;
                                  


 } else {
                                  


 phoneFamily = DEFAULT_SKIN;
                                  


 }
                                  


 }
                                  


 return phoneFamily;
                                  


 }
                                  


                                

agent.indexOf("<UA String>")という関数に注意してください。  この関数は、<UA String>に入力された文字列を、要求するブラウザのUser Agentフィールドと照合します。   この関数は、部分照合を実行します。たとえば、サンプルにある agent.indexOf("iPhone")の 場合は、ブラウザのUser Agent文字列全体をチェックして、"iPhone"というパターンがないか確認します。   一致した場合（User Agentに iPhoneという文字列が含まれていた場合）は、 -1という戻り値が返されます。   このフィールドで指定する文 字列は、検索する文字列との一致が戻り値で保証される限り、必要に応じて長くも短くもできます。  こ こでは、テスト・ケースで機能するUser Agent文字列を指定する必要がありますが、通常使用されるパターンは、次のとおりです。

• iPhone：iPhone用Safariブラウザの識別に使用
• Symbian：全Nokia S60用ブラウザの識別に使用
• BlackBerry9000：全BlackBerry 9000シリーズ用ブラウザの識別に使用
• BlackBerry88：全BlackBerry 8800シリーズ用ブラウザの識別に使用
• BlackBerry83：全BlackBerry 8300シリーズ用ブラウザの識別に使用
• BlackBerry：上記以外のBlackBerry用ブラウザの識別に使用
• Windows CE：全Windows Mobile用ブラウザの識別に使用
• Android：AndroidのWebKitベースのブラウザの識別に使用

スキニングとTrinidadコンポーネントを使用したiPhoneの共通UI要素の実装

次に、iPhone固有のルック・アンド・フィールを実現するため、iPhoneの共通UI要素の作成を支援するスタイルシートのスタ イル・クラスを定義します。 iPhoneのネイティブ・アプリケーションで使用される共通UI要素には、基本的に、ナビゲーション・パネル・リスト、フィールド・セット・パネル、ナ ビゲーション・バーの3つがあります。 それでは、各要素について詳しく見てみましょう。

ナビゲーション・パネル・リスト

ナビゲーション・パネル・リストでは、データ・リストが1列の表として表示されますが、各行は複数列からのデータを含みます。 ここで採用されているシナリオは、ユーザーがサマリー・データのリストにざっと目を通したあとで、行を選択してその行に関連する詳細情報を表示するという ものです。 次の例では、住宅の販売物件リストが表示されています。

<div class="panelBase">
                                  


 <tr:table value="#{bindings.HouseByZip1.collectionModel}"
                                  


 var="row"
                                  


 rows="6" width="100%"
                                  


 horizontalGridVisible="false">
                                  


 <tr:column sortProperty="Price" sortable="false">
                                  


 <tr:panelGroupLayout layout="vertical" styleClass="listing">
                                  


 <!—Place a small image in each row -->
                                  


 <!—row.image returns path to the image -->
                                  


 <tr:image styleClass="listingImage"
                                  


 source="#{row.Picture}"/>
                                  


 <!—Main text for each row is a commandLink -->
                                  


 <!—“goIntro” navigates to another view-->
                                  


 <tr:commandLink text="#{row.Street}"
                                  


 styleClass="listingLink"
                                  


 action="goIntro">
                                  


 <!—Save Data from selected row to a session variable-->
                                  


 <tr:setActionListener from="#{row}"
                                  


 to="#{sessionScope.houseDetails}"/>
                                  


 </tr:commandLink>
                                  


 <tr:outputText value="#{row.City}, $ #{row.Price}, #{row.Sf} Sq.Ft."
                                  


 styleClass="listingDetails"/>
                                  


 </tr:panelGroupLayout>
                                  


 </tr:column>
                                  


 </tr:table>
                                  


 </div>
                                  


                                

フィールド・セット・パネル

フィールド・セット・パネルは、通常、データのインスタンスの詳細な情報を表示する場合に使用され、別画面に移動するリンクや、関連す る詳細な情報を表示するビューを含みます。 フィールド・セット・パネルの例は、次のとおりです。上記の例に続いて、このビューに住宅の詳細な情報と、その住宅のより詳細な情報へのリンクが表示され ます。

<div class="panelBase">
                                  


 <tr:panelCaptionGroup>
                                  


 <div class="row">
                                  


 <tr:outputText styleClass="labelText" value="Street:"
                                  


 truncateAt="0"/>
                                  


 <tr:goLink styleClass="messageLink"
                                  


 destination="http://maps.google.com/maps?q=
                                  


 #{sessionScope.houseDetails.Street},+
                                  


 #{sessionScope.houseDetails.City},+
                                  


 #{sessionScope.houseDetails.Zip}"
                                  


 text="#{sessionScope.houseDetails.Street}"/>
                                  


 </div>
                                  


 <div class="row">
                                  


 <tr:outputText styleClass="labelText" value="City:"
                                  


 truncateAt="0"/>
                                  


 <tr:outputText styleClass="messageText"
                                  


 value="#{sessionScope.houseDetails.City}"/>
                                  


                                   


 </div>
                                  


 </tr:panelCaptionGroup>
                                  


 <tr:panelCaptionGroup>
                                  


 <div class="row">
                                  


 <tr:outputText styleClass="labelText" value="Price($):"/>
                                  


 <tr:outputText styleClass="messageText"
                                  


 value="#{sessionScope.houseDetails.Price}"/>
                                  


 </div>
                                  


 ......
                                  


 </tr:panelCaptionGroup>
                                  


 </div>
                                  


                                

listingImageなどのスタイル・クラスの定義については、iPhoneのCSSファイルを参照してください。

ナビゲーション・バー

ナビゲーション・バーには、iPhoneアプリケーションの主要なナビゲーション機能が表示されます。 1つ前の例では、ナビゲーション・バーは画面の最上部に表示されており、ボタンを指でクリックすると、別のビューが表示されるようになっています。 それでは、ナビゲーション・バーについて詳しく見てみましょう。

<tr:panelHeader text="Details" styleClass="toolbar" rendered="true">
                                  


 <tr:commandLink text="Agent" styleClass="button"
                                  


 disabled="false"
                                  


 rendered="true"
                                  


 action="toAgent"/>
                                  


 <tr:commandLink text="Intro" styleClass="backButton"
                                  


 disabled="false"
                                  


 rendered="true"
                                  


 action="backtoIntro"/>
                                  


 </tr:panelHeader>
                                  


                                

iPhoneサービスとの通信

モバイル・デバイスのブラウザには、通常、電話機能や電子メール機能などのオンデバイス・サービスと通信する基本機能がいくつか搭載さ れていますが、iPhoneは、iPhone Google Mapsアプリケーションと通信する機能により、一歩先に進んでいるといえます。 Oracle ADFとOracle JDeveloperを使用すれば、こうした機能をわずか数行のコードで活用できます。 また、電話番号や住所などが保存されているバインディング・レイヤーに簡単にアクセスできるため、ユーザーがデータベース・フィールドにある電話番号を簡 単にダイヤルできます。

電話サービス

iPhone用Safariには、ページ上の電話番号を認識し、ユーザーがその番号をクリックしてダイヤルできる機能が組み込まれてい ます。 ただし、この機能は常に正常に機能するわけではありません。 電話番号がoutputTextフィールドに表示されているだけでは、iPhoneがそれを電話番号として認識するとは限りません。

確実に電話番号として認識されるようにするには、電話番号をtr:goLinkコンポーネントに表示して、goLinkの destination属性にtel:を追加する必要があります。 houseDetailsセッション変数とAgentPhoneフィールドに含まれる電話番号をダイヤルするサンプル・コードは、次のとおりです。

<tr:goLink styleClass="messageLink"
                                  


 destination="tel:#{sessionScope.houseDetails.AgentPhone}"
                                  


 text="#{sessionScope.houseDetails.AgentPhone}"/>
                                  


                                

<tr:goLink styleClass="messageLink"
                                  


 destination="tel:1-800-use-jdev;pp8”
                                  


 text="1-800-use-jdev"/>
                                  


                                

電子メール・クライアント

iPhone用Safariブラウザには、iPhoneの電子メール・クライアント用のインタフェースも搭載されています。 電子メールの送信先を入力して電子メール・クライアントを起動するには、tr:goLinkコンポーネントを使用して電子メール・フィールドを表示し、さ らにtr:goLinkコンポーネントのdestination属性にmailto:を追加する必要があります。以下に例を挙げます。

<tr:goLink styleClass="messageLink"
                                  


 destination="mailto:#{sessionScope.houseDetails.AgentEmail}"
                                  


 text="#{sessionScope.houseDetails.AgentEmail}"/>
                                  


                                

iPhoneは、ほかの電子メール・フィールドの移入にも対応しています。 goLinkコンポーネントに次のdestination属性を追加すれば、これらを実行できます。

• 複数の受信者の追加：電子メール・アドレスをコンマ（,）で区切って追加
• 電子メールの件名：subject=<件名のテキスト>
• Cc受信者：cc=<電子メール・アドレス>
• Bcc受信者：bcc=<電子メール・アドレス>
• メッセージ・テキスト：body=<メッセージ・テキスト>

たとえば、次のコードを使用すれば、電子メールの件名、Cc受信者、メッセージ・テキストが事前移入されます。

<tr:goLink styleClass="messageLink"
                                  


 destination="mailto:john.doe@oracle.com,
                                  


 jane.doe@oracle.com?subject=Questions?
                                  


 cc=myname@myhome.com?
                                  


 body=I have questions for you”
                                  


 text="#{sessionScope.houseDetails.AgentEmail}"/>
                                  


                                

iPhone用Google Maps

iPhone用Safariブラウザでは、http://maps.google.comの呼出しをインターセプトして、iPhone 上でGoogle Mapsアプリケーションを起動できます。 iPhoneは、Google Mapsアプリケーションに搭載されている、特定の住所にピンをドロップする機能に部分対応しています。 一度ピンをドロップすると、iPhoneユーザーはGPSと"Getting Directions"機能を使用してその住所に移動し、その住所がどう見えるかをストリート・レベルで表示できます。

この機能にアクセスするには、tr:goLinkコンポーネントを使用して、goLinkコンポーネントのdestination属性 にGoogle MapsとそのアドレスへのURLを移入します。 Google MapsのURLは、次の形式にする必要があります。

http://maps.google.com/maps?q=<Address_Field>
                                  


                                

<tr:goLink styleClass="messageLink"
                                  


 destination="http://maps.google.com/maps?q=#{sessionScope.houseDetails.Street},
                                  


    +#{sessionScope.houseDetails.City},
                                  


 +#{sessionScope.houseDetails.Zip}"
                                  


 text="#{sessionScope.houseDetails.Street}"/>
                                  


                                

http://maps.google.com/maps?saddr=<Start_Address>&daddr=<destination_address>
</destination_address>

結論

iPhoneは、モバイル・デバイスの"使いやすさ"を再定義しました。つまり、iPhoneは、ほとんどすべての人が、トレーニング なしで簡単に使用できます。 その理由は周知のとおり、 iPhoneのコア・アプリケーションのユーザー・インタフェースが、デバイス・ハードウェアと完全に連動するためです。 iPhone上で稼動するほかのアプリケーションはすべて、このユーザー・インタフェース規格に準拠している必要があります。準拠していない場合、アプリ ケーションの使用時において"使いやすさというメリット"が損なわれます。 このコラムでは、Oracle ADFとOracle JDeveloperを使用して、こうしたユーザー・インタフェースを簡単に開発する方法について説明しました。

今すぐ開始するための追加リソース

以下のリソースは、Oracle ADFとOracle JDeveloperを使用したiPhoneのアプリケーション開発を開始する手助けになります。

• Oracle ADF Mobileチュートリアル： 『Creating a Mobile Browser-friendly ADF Application』
• Oracle ADF Mobileのサンプル・アプリケーション・プロジェクト：このプロジェクトは、Oracle ADF Mobileチュートリアルに基づいています。 Oracle ADF Mobileチュートリアルで説明されているように、このプロジェクトを一度実行すれば、Fusion Order Demoスキーマがデータベースに配置されます。
• Oracle ADF Mobileのデモ・サイト：iPhoneからこのサイトに移動して、実行中のアプリケーションを確認できます。 この記事のサンプル・コードは、Oracle OpenWorld 2008用に開発されたアプリケーションから抜粋しています。
• 『 Oracle ADF Mobile Developer Guide』
• Oracle JDeveloper & ADF Discussion Forum
• Apache MyFaces Trinidadプロジェクト：すべてのモバイル・レンダリング・サポートは、Trinidadコンポーネントにより提供されます。 Trinidadコンポーネントの詳細と使用方法については、このプロジェクトのWebサイトを参照してください。
• Apple iPhone WebApp Developer Center：iPhoneのスタイルガイドとCSSリファレンスへのリンクが掲載されています。 iPhoneのCSSサンプルをカスタマイズする場合に便利です。
• .