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

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

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

8.1項「電子メール、電話およびGoogleマップを使用するためのアプリケーション拡張の概要」
8.2項「電子メール・クライアントの統合」
8.3項「電話の統合」
8.4項「Googleマップの統合」
8.5項「ページ表示ディメンションについての考慮事項」

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

第4章「スキニング」で説明したスタイルシートの使用に加え、tr:goButtonおよびtr:goLinkコンポーネントを使用して電話番号、電子メール・アドレスおよびGoogleマップへのリンクを統合することによって、ADFモバイル・ブラウザ・アプリケーションをさらに調整できます。

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

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

tr:goButtonまたはtr:goLinkコンポーネントを使用します。
HTMLリンクの先頭にmailto:プロトコルを追加します。
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=howdy&cc=myboss@oracle.com&bcc=me@oracle.com&body=howdy partner!"/>

8.3 電話の統合

アプリケーションで電話番号の呼出しダイアログ・ボックスを起動するには、HTMLリンク内の電話番号の先頭にtel:プロトコルを追加します。

注意:

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

例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プロパティを次のように指定します。

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

注意:
住所の文字列は、単語間にカンマを含めて適切に書式設定する必要があります。また、空白文字はプラス記号(+)文字に置き換えます。

例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}"/>

例8-4のような住所の文字列では、空白文字ではなくプラス記号(+)文字を使用する必要があります。

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

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

http://maps.google.com/maps?saddr=200+Oracle+Parkway,+Redwood+City,+CA,+USA& daddr=1+Front+Street,+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スマートフォンの両方に対してビュー・ポートを設定しています。viewport指定の使用の詳細は、http://developer.apple.com/を参照してください。

例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;"/>
 </f:verbatim>