DOWNLOAD
 Oracle JDeveloper Studio Edition
 Sample iPhone CSS

   TAGS
mobile, adf, All

開発者:Java

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 JDeveloperOracle 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コンテンツを提供する最小限の共通機能を備えています。
  • .
この2つのツールで開発できるのは、次善策(安全策)がとられたユーザー・インタフェースによる、大規模なページのダウンロードが必要なWebサイトか、 Safariブラウザのサポートする高度なAJAX機能を活用していない簡単な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用に最適化する方法については、以下のとおりです。

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

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

図1

ビュー・エディタに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}
                                  
AgentUtilは、マネージドBeanのクラス名であり、phoneFamilyは、スキン・ファミリーを文字列として返すメソッドです。 Trinidad-skins.xmlファイルでは、各種スキン・ファミリーと、プロジェクト内のCSSファイルの対応部分を定義できます。 たとえばiPhoneの場合、スキン・ファミリーは次のように定義できます。
<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>
AgentUtil.phoneFamilyメソッドは、iPhone使用時にiphoneFamilyを返します。 これで、styles/iPhone.cssにあるスタイルシートが使用されます。 AgentUtil.phoneFamilyメソッドのサンプル・コードは、以下のとおりです。サンプル・コードには、iPhoneやSymbianなど のモバイル・ブラウザを使用する場合のコードのみが含まれています。 ブラウザは必要に応じて追加できます。
 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ベースのブラウザの識別に使用

詳細な手順は、次のバージョンの『 Oracle ADF Mobile Developer Guide』に公開されます。 TrinidadベースのアプリケーションのCSSファイル定義方法の詳細については、 こちらの文書を 参照してください。

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

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

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

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

図2

これに対応するコードは、次のとおりです。
<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>
listingImageなどのスタイル・クラスの定義については、 こ ちらのリンクからiPhoneのCSSファイルのサンプルをダウンロードしてご確認ください。

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

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

図3

これに対応するコードは、次のとおりです。
<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>
panelBaseスタイルは、この画面のピンストライプ(細い縦縞)の背景を表示します。 2つのpanelCaptionGroupコントロールは、データを2つのグループに分けて表示します。 さらに、Streetフィールドはtr:goLinkコンポーネントであるため、iPhoneのGoogle Mapsアプリケーションを起動できます。 この機能については、次の項で説明します。

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

ナビゲーション・バー

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

図4

ナビゲーション・バーのコードは、次のとおりです。
<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>
ここでも、listingImageなどのスタイル・クラスの定義については、iPhoneのCSSファイルを参照してください。

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}"/>
さらに、iPhoneは、RFC 2086プロトコルに部分対応しています。そのため、たとえば電話番号をダイヤルして、数秒間一時停止し、内線番号をダイヤルすることも可能です。 また、電話番号に文字を含めることもできます。その場合、iPhoneはその文字に対応する番号をダイヤルします。 これについては、見本の電話番号を使用した次のサンプル・コードをご覧ください。
<tr:goLink styleClass="messageLink"
                                  
destination="tel:1-800-use-jdev;pp8”
text="1-800-use-jdev"/>
これで、iPhoneが1-800-873-5338にダイヤルし、2秒待機(pp)して、8にダイヤルします。

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

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

<tr:goLink styleClass="messageLink"
                                  
destination="mailto:#{sessionScope.houseDetails.AgentEmail}"
text="#{sessionScope.houseDetails.AgentEmail}"/>
ユーザーがこのgoLinkにアクセスすると、iPhoneの電子メール・クライアントが起動し、To:フィールドに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>
                                  
たとえば、次のコードを記述すれば、houseDetail.Street変数、houseDetail.City変数、および houseDetail.Zip変数で指定した場所にピンをドロップできます。
<tr:goLink styleClass="messageLink"
                                  
destination="http://maps.google.com/maps?q=#{sessionScope.houseDetails.Street},
+#{sessionScope.houseDetails.City},
+#{sessionScope.houseDetails.Zip}"
text="#{sessionScope.houseDetails.Street}"/>
さらに、この機能を使用してドライブ・ルートをプログラミングすることもできます。 この場合、Google MapsのURL形式は、次のようになります。
http://maps.google.com/maps?saddr=<Start_Address>&daddr=<destination_address>
</destination_address>
これは非常に強力な機能で、Oracle ADFとOracle JDeveloperの開発者は、わずか数行のコードを記述するだけで、ドライブ・ルート機能を起動できます。 ユーザーは、Oracle ADF Mobileビューのリンクをクリックするだけで、Google Maps機能を使用して位置やドライブ・ルートを表示できます。

結論

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

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

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


Joe Huangは、Oracle ADF Mobileの Product Managerです。