この章では、ADFモバイル・ブラウザ・アプリケーションに電子メール、電話およびGoogleマップ機能を追加する方法について説明します。
この章には次の項が含まれます:
第4章「ADFモバイル・ブラウザ・アプリケーションのスキニング」で説明したスタイルシートの使用に加え、EL (式言語)式を使用してtr:goButton
およびtr:goLink
コンポーネントを定義することにより、ADFモバイル・ブラウザ・アプリケーションをさらに調整して電子メール、電話およびGoogleマップのサポートを含めるようにできます。
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}"/>
mailto:
プロトコルでは、表8-1に示すメールのプロパティを追加できます。
表8-1 メールのプロパティ
プロパティ | 構文 |
---|---|
複数の受信者 |
各電子メール・アドレスをカンマ(,)で分割 |
メッセージの件名 |
|
CC受信者 |
|
BCC受信者 |
|
メッセージ・テキスト |
|
これらのプロパティを指定するには、例8-2の#{sessionScope.empDetails.Email}?
のように電子メール・アドレスの後ろに疑問符(?
)を付加し、続けてプロパティを追加します。それぞれのプロパティはアンパサンド(&
)で分割します。
電話番号の呼出しダイアログ・ボックスを起動するには、次の手順を実行します。
tr:goButton
またはtr:goLink
コンポーネントを使用します。
tel:
プロトコルを、電話番号の前に付加します。
注意: この電話番号は、RFC 2806プロトコル(http://www.ietf.org/rfc/rfc2806.txt )の構成要素をサポートしている必要があり、これによりエンド・ユーザーによる電話番号のダイアル後にポーズを追加したり内線番号をダイアルしたりできます。Apple社はRFC 2086のどの構成要素をサポートしているか明示していないため、各構成要素を自分でテストする必要があります。 |
電話番号に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マップにより複数のピンが自動的にドロップされます。
注意: text 文字列に記載されるアドレスは、単語間のカンマを含め、正しい書式になっている必要があります。destination 文字列では、スペースをプラス符号(+ )文字に置き換えます。 |
例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-5に示すようにプラス符号(+
)で連結する必要があります。EL式とEL式の間にスペースが含まれていてはなりません。
Googleマップでは、ルート案内もサポートされています。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 (https://developer.apple.com
)から入手可能な『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では、viewport に似たHandheldFriendly メタ・タグがサポートされています。ヘッダーに次の行を追加すると、ページの比率が適切に調整されます。
|
モバイル・ブラウザ・アプリケーションによっては、デスクトップの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;"/>