ヘッダーをスキップ
Oracle® Fusion Middleware Oracle Application Development Frameworkモバイル・ブラウザ開発者ガイド
11gリリース1 (11.1.1.7.0)
B72413-01
  目次へ移動
目次
前
前 		  

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

この章では、ADFモバイル・ブラウザ・アプリケーションに電子メール、電話およびGoogleマップを追加する方法について説明します。

この章の内容は次のとおりです。

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

第4章「スキニング」で説明したスタイルシートの使用に加え、EL (式言語)式を使用してtr:goButtonおよびtr:goLinkコンポーネントを定義することにより、ADFモバイル・ブラウザ・アプリケーションをさらに調整して電子メール、電話およびGoogleマップのサポートを含めるようにできます。

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

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

  1. tr:goButtonまたはtr:goLinkコンポーネントを使用します。

  2. HTMLリンクの先頭にmailto:プロトコルを追加します。

  3. 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}"/>

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}?subject=helloのように電子メール・アドレスの後ろに疑問符(?)を付加し、続けてプロパティを追加します。それぞれのプロパティはアンパサンド(&)で区切ります。

例8-2 電子メールのプロパティの追加

<tr:goLink styleClass="messageText"
           text="#{sessionScope.empDetails.Email}"
           destination="mailto:#{sessionScope.empDetails.Email}?subject=hello
                                                               &cc=myboss@example.com
                                                               &bcc=me@example.com
                                                               &body=good morning!"/>

8.3 電話の統合

電話番号の呼出しダイアログ・ボックスを起動するには、次の手順を実行します。

  1. tr:goButtonまたはtr:goLinkコンポーネントを使用します。

  2. tel:プロトコルを、電話番号の前に付加します。


    注意:

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

  3. 電話番号にdestinationプロパティを設定します(例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プロパティを次のように指定します。

  1. tr:goButtonまたはtr:goLinkコンポーネントを使用します。

  2. destination=をGoogleマップのURL(例8-4に示したdestination=http://maps.google.com/maps)として定義します。

  3. 場所を検索するため、GoogleマップのURLの後ろに?q=を追加します。

  4. ターゲットとなる場所の住所の文字列を使用して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-4に示すようにプラス符号(+)で連結する必要があります。EL式とEL式の間にスペースが含まれていてはなりません。

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

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はありません。

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スマートフォンの両方に対してビュー・ポートを設定しています。ビューポートの詳細は、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では、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>
  前
前 
  目次へ移動
目次