Oracle® Fusion Middleware Oracle Application Development Frameworkモバイル・ブラウザ開発者ガイド 11gリリース1 (11.1.1.7.0) B72413-01 |
|
前 |
この章では、ADFモバイル・ブラウザ・アプリケーションに電子メール、電話およびGoogleマップを追加する方法について説明します。
この章の内容は次のとおりです。
第4章「スキニング」で説明したスタイルシートの使用に加え、EL (式言語)式を使用してtr:goButton
およびtr:goLink
コンポーネントを定義することにより、ADFモバイル・ブラウザ・アプリケーションをさらに調整して電子メール、電話およびGoogleマップのサポートを含めるようにできます。
Webアプリケーションから電子メール・アプリケーションを起動するには、次の手順を実行します。
tr:goButton
またはtr:goLink
コンポーネントを使用します。
HTMLリンクの先頭にmailto:
プロトコルを追加します。
HTMLリンクにdestination
プロパティを設定します(例8-1では、EL式#{sessionScope.empDetails.Email}
で記載されています)。
例8-1 mailto:プロトコルを使用したiPhoneの電子メール・クライアントの統合
<tr:goLink styleClass="messageText" text="#{sessionScope.empDetails.Email}" destination="mailto:#{sessionScope.empDetails.Email}"/>
mailto:
プロトコルでは、表8-1に示すメールのプロパティを追加できます。
表8-1 メールのプロパティ
プロパティ | 構文 |
---|---|
複数の受信者 |
各電子メール・アドレスを区切るカンマ(,) |
メッセージの件名 |
|
CC受信者 |
|
BCC受信者 |
|
メッセージ・テキスト |
|
これらのプロパティを指定するには、例8-2の#{sessionScope.empDetails.Email}?subject=hello
のように電子メール・アドレスの後ろに疑問符(?
)を付加し、続けてプロパティを追加します。それぞれのプロパティはアンパサンド(&
)で区切ります。
電話番号の呼出しダイアログ・ボックスを起動するには、次の手順を実行します。
tr:goButton
またはtr:goLink
コンポーネントを使用します。
tel:
プロトコルを、電話番号の前に付加します。
注意: この電話番号は、RFC 2806プロトコル( |
電話番号にdestination
プロパティを設定します(例8-3では、EL式#{sessionScope.empDetails.PhoneNumber}
で記載されています)。
使用可能なデータを示すマップを表示するためのリンクをアプリケーション内に作成するには、tr:goLink
コンポーネントのdestination
プロパティを次のように指定します。
tr:goButton
またはtr:goLink
コンポーネントを使用します。
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}"/>
アドレス文字列内の各EL式は、例8-4に示すようにプラス符号(+
)で連結する必要があります。EL式とEL式の間にスペースが含まれていてはなりません。
Googleマップで提供されるルート案内を使用するためにADFモバイル・アプリケーションを有効にするには、GoogleマップのURL内で、疑問符(?
)の後ろの部分を、出発地点と到着地点を示す文字列(saddr=<starting address>&daddr=<destination address>
)に変更します。この形式を使用して、California、Redwood City、200 Oracle ParkwayにあるOracle本社からCalifornia、San Francisco、1 Telegraph Hillまでのルートを表す場合は、次のように指定します。
http://maps.google.com/maps? saddr=200+Oracle+Parkway,+Redwood+City,+CA,+USA &daddr=1 +Telegraph +Hill, +San +Francisco, +CA, +USA
注意: 現時点で、この他にApple社およびGoogle社から公開されているAPIはありません。 |
iPhoneのSafariでは、GoogleマップおよびYouTubeアプリケーションの両方がサポートされており、ターゲットWebサイトを使用してURLを開くかわりに、特定のURLコールを自動的に捕捉してネイティブ・アプリケーションを起動します。たとえば、ユーザーがGoogleマップのHTMLリンク(http://maps.google.com
)をクリックすると、Safariでは、GoogleマップのWebサイトにナビゲートするかわりにネイティブなGoogleマップ・アプリケーションを起動します。ネイティブなGoogleマップ・アプリケーションでは、maps.google.com
でサポートされている一部のURLパラメータを処理できるため、エンド・ユーザーは場所を指定してピンをドロップできます。
ズーム比率を正しく保持するには、ページのヘッダー内にviewport
メタ・タグを追加します。viewport
はデバイス固有のメタ・タグであり、ページを正しい比率で表示するために使用されます。例8-6では、iPhoneおよびBlackBerryスマートフォンの両方に対してビュー・ポートを設定しています。ビューポートの詳細は、iOS Developer Library(http://developer.apple.com/library/ios/navigation/
)から入手可能な『iOS Human Interface Guidelines』を参照してください。
例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では、
|
モバイル・ブラウザ・アプリケーションによっては、デスクトップの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>