このセクションでは、ビーコン・クライアントMAFアプリケーションを作成します。続いて、Cordovaビーコン・プラグインをダウンロードしてアプリケーションに追加します。

1. New Galleryを使用して、Mobile Application Framework Applicationを新規作成します。
   
   

2. BeaconClientという名前を付け、「Finish」をクリックします。
   
   

3. 次に、iBeacon機能を含むCordovaプラグインを追加します。使用できるプラグインにはさまざまなものがありますが、このチュートリアルではProximity Beacon Monitoring and Transmission Pluginに基づくプラグインを使用しています。このプラグインはiOSとAndroidのいずれのデバイスにも有効です。
   
   これから使用するプラグインは、先ほどダウンロードしたlab.zipファイルに含まれています。解凍したファイルには、アプリケーションに追加する/cordova-plugin-ibeacon-master/ディレクトリが含まれます。
   
   
   

4. BeaconClient MAFアプリケーションに戻り、アプリケーションにプラグインを追加します。
   Application Resourcesパネルで、「Descriptors」→「ADF META-INF」の順にノードを開き、「maf-application.xml」を開きます。
   次に、「Plugins」タブを選択します。
   
   
   

5. プラグインの場所を設定します。下部にあるAdditional Plugins領域で緑色のプラス記号をクリックし、解凍ファイルのディレクトリ（/cordova-plugin-ibeacon-master/）にナビゲートし、このディレクトリを選択します。
   
   プラグインが有効なプラットフォームを設定することもできますが、このプラグインはiOSにもAndroidにも有効であるため、デフォルト値のままにします。
   
   
   

6. すべての作業内容を保存します。
   
   
   

CordovaプラグインはJavaScriptで記述されているため、インタフェースと交信してビジネス・ロジックを実行するために必要なコードを追加する必要があります。

1. 「ViewController」プロジェクトを右クリックして、「New」→「JavaScript File」を選択します。
   
   

2. ファイルの名前としてbeacon.jsと入力し、「OK」をクリックします。
   
   
   
   

3. ファイルにコードを追加します。ダウンロードしたlabs.zipファイルに含まれるbeaconJS.txtファイルからコードをコピーすることができます。先ほどダウンロードしなかった場合は、こちらからダウンロードできます。JDeveloper/myworkディレクトリと同じパーティションにある仮のディレクトリにファイルを保存して解凍します。
   
   このコードはいくつかの異なる処理を実行します。
   1：領域識別子を指定する
   2：アプリケーションが起動したら監視を開始する
   3：ビーコン領域への出入りを監視する
   4：ローカル通知を発行する
   5：距離測定を使用してビーコンを検出する
   6：見つかったビーコンをリストに追加する
   
   
   
   

    

4. すべての作業内容を保存します。
   
   

アプリケーションがバックグラウンドで動作しているときは、デバイスがビーコン領域に入ったことや領域から出たことをユーザーに通知する必要があります。ビーコン領域に入った、またはビーコン領域から出たときに、アプリケーションでローカル通知を受信できるように設定します。

1. まず、アプリケーション起動時にローカル通知イベント・リスナーを追加します。

   Applicationsウィンドウで、「ApplicationController」→「Application Sources」→「application」の順にノードを開き、「LifecycleListenerImpl.java」ファイルをダブルクリックします。
   
   

2. 以下のイベント・コードが含まれるようにstartメソッドを変更します。これはリスナーを起動するコードですが、まだNativeLocalNotificationListenerを作成していないため、リスナー名の下に赤い波線が表示されます。
   
   

   
   

   public void start()
   {

   EventSource evtSource = EventSourceFactory.getEventSource(
   EventSourceFactory.NATIVE_LOCAL_NOTIFICATION_EVENT_SOURCE_NAME);
   evtSource.addListener(new NativeLocalNotificationListener());

   }
         

   2つのimport文を追加します。
   
   import oracle.adfmf.framework.event.EventSource;
   import oracle.adfmf.framework.event.EventSourceFactory;

   

3. 次に、ローカル通知イベント・リスナー用の新しいJavaクラス（NativeLocalNotificationListener）を作成します。
   
   「ApplicationController」プロジェクトを右クリックして、「New」→「Java Class」の順に選択します。

   
   

4. NativeLocalNotificationListenerという名前を付け、「OK」をクリックします。

   
   

5. labファイルを解凍した場所にナビゲートし、NativeLocalNotificationListener.txtファイルを開きます。下のすべてのコードをコピーして、元のファイルの内容と置き換えます。
   
   このコードは、デバイスがビーコン領域内にあるかどうかを判定し、通知を送信します。
   
   先ほどファイルをダウンロードしなかった場合は、こちらからダウンロードできます。
   
   

   
   

6. すべての作業内容を保存します。
   

次に、2つのクラスを作成します。1つはビーコン・プロパティとアクセス・メソッドを定義するクラスで、もう1つはビーコン領域の監視を開始/停止するクラスです。2つ目のBeanは、検出したビーコンのリストも保持します。

1. 次は、ViewControllerプロジェクトでいくつかの作業を行います。「ViewController」プロジェクトを右クリックし、メニューから「New」→「Java Class」を選択します。
   
   
   

2. クラス名としてBeaconと入力し、「OK」をクリックします。
   
   
   

3. zipファイルがある場所（/labs/）からbeaconJava.txtファイルを開きます。ファイル全体をコピーし、MAFコードをファイルの内容に置き換えます。
   
   このファイルは、ビーコンの5つのプロパティ（uuid、major、minor、proximity、identifier）と、それぞれのgetterメソッドとsetterメソッドを定義します。
   
   
   
   
   

4. 次に、監視の開始/停止およびビーコン・リストの管理を行うクラスを作成します。再度、「ViewController」プロジェクトを右クリックし、メニューから「New」→「Java Class」を選択します。
   
   
   

5. クラス名としてBeaconManagerと入力し、「OK」をクリックします。
   
   
   

6. 先ほどと同様に、zipファイルがある場所（/labs/）からbeaconManagerJava.txtファイルを開きます。ファイル全体をコピーし、MAFコードをファイルのコードに置き換えます。
   
   
   
   
   

7. すべての作業内容を保存します。
   
   

このセクションでは、BeanManagerクラスからデータ・コントロールを作成し、UIの開発を容易にします。

1. 「BeaconManager.java」ファイルを右クリックして、メニューから「Create Data Control」を選択します。

   

2. Create Bean Data Controlウィザードで、「Next」、「Finish」の順にクリックします。

   
   
   

3. データ・コントロールの定義を含むファイル（DataControls.dcx）がエディタに表示されます。「BeaconManager」ノードを開き、beaconsコレクション、およびビーコンを監視/追跡するメソッドを確認します。beaconsコレクションを選択すると、ビーコンの5つの属性が表示されます。

   

4. 作業内容を保存します。
   

5. すべてのエディタ・タブを閉じてIDEを少し整理します。
   メニュー・バーの下で、最後のタブの右側にマウスを移動します。続いて、右クリックして「Close All」を選択します。

   

次に、AMXページを含むMAF機能を作成します。UIには、ビーコン領域の監視を開始/停止するためのボタン、監視されている領域の通知、およびデバイスがビーコン領域内に入ったときに存在するビーコンの詳細が含まれます。

1. 新しい機能を、このページの開始点として作成します。エディタで「maf-feature.xml」ページを開きます。

   
   

2. 右側にある緑色のプラス記号をクリックして、新しい機能を作成します。

   
   
   

3. 機能名をBeaconにして、「OK」をクリックします。

   
   

4. 機能のコンテンツとしてAMXページを追加します。「Content」タブをクリックし、TypeプロパティがMAF AMX Pageに設定されていることを確認します。次に、Fileプロパティの右にある緑色のプラス記号をクリックしてページを作成します。

   
   

5. ページにBeacon.amxという名前を付け、「Primary Action」ページ・ファセットを選択解除します。HeaderファセットとSecondary Actionファセットのみが選択されている必要があります。
   
   「OK」をクリックします。

   
   

6. ページ・ファセット・コンポーネントを作成および定義します。
   
   Facet-header出力テキスト・コンポーネントの値をBeacon Clientに設定します。
   
   
   
   

7. secondaryファセットのボタンを削除します。
   
   Data Controlsウィンドウで、「BeaconManager」ノードを開いて「startMonitoring」操作を選択します。次に、これをStructureウィンドウにドラッグし、Secondary facetにドロップします。
   
   ポップアップ・メニューで「MAF button」を選択します。

   
   
   

8. Edit Action Bindingペインで「OK」をクリックします。

   

9. このボタンは、アプリケーションでビーコンの監視が行われていない場合のみ、表示する必要があります。
   
   「Button」を選択し、Renderedプロパティを#{applicationScope.monitoring != true}に設定します。また、TextプロパティをStartに設定します。
   
   作業内容を保存します。

   
   

10. 監視を停止するための別のボタンをsecondaryファセットに追加します。
    
    Data ControlsからStructureウィンドウに「stopMonitoring」操作をドラッグし、Secondaryファセットにドロップします。ポップアップ・メニューで「MAF button」を選択します。

    
    
    Edit Action Bindingペインで「OK」をクリックします。

    
    

11. Startボタンと同様に、このボタンはシステムによる監視が行われている場合にのみ表示します。
    
    「stopMonitoring」ボタンを選択し、Renderedプロパティを#{applicationScope.monitoring == true}に、TextプロパティをStopに設定します。
    
    作業内容を保存します。

    
    

12. この後のいくつかのステップでは、監視および距離測定のステータスを表示する4つの出力コンポーネントを追加します。
    
    まず、デバイスでビーコンの監視が行われていないときに表示する出力テキスト・コンポーネントをPanel Pageに追加します。
    Componentsペインから「Text and Selection」領域を開き、「Output Text」コンポーネントをStructureウィンドウにドラッグしてPanel Pageにドロップします。

    
    

13. 出力テキストを選択して次のプロパティを設定し、デバイスで監視が行われていないときにテキストが表示されるようにします。上側の最初の図はデザインタイム・ビューで、2つ目の図は、デバイスで監視が行われていないときのランタイム・ビューです。
    
    Rendered：#{applicationScope.monitoring != true}
    Text：Not monitoring a region.
    
    作業内容を保存します。

    
    
    
    

14. 最初の出力テキスト・コンポーネントの下にもう1つ出力テキスト・コンポーネントを追加します。次に、デバイスで監視が行われている場合は領域の詳細が表示されるように、プロパティを設定します。ここでも、最初の図はデザインタイム・ビューで、2つ目の図は、デバイスで監視が行われているときのランタイムのページです。
    
    Rendered：#{applicationScope.monitoring == true && applicationScope.ranging != true}
    Value：Monitoring region:#{applicationScope.region}
    
    作業内容を保存します。

    
    
    
    

15. 3つ目の出力テキスト・コンポーネントをPanel Pageに追加し、デバイスが領域内に入り距離測定モードになったときにテキストが表示されるようにプロパティを設定します。
    
    Rendered：#{applicationScope.ranging == true}
    Value：Ranging region:#{applicationScope.region}

    
    
    
    

16. 4つ目の出力テキスト・コンポーネントをページに追加し、ビーコンが検出されたらヘッダー・テキストが表示されるようにします。
    
    Rendered：#{applicationScope.ranging == true}
    Value：Beacons located

    
    
    
    
    4つの出力テキスト・コンポーネントを含むStructureウィンドウは、次の図のようになります。
    
    
    

17. 次にページに追加するのは、入場した領域内でアドバタイジングしているすべてのビーコンのリストです。
    
    Data ControlsからStructureウィンドウに「beacons」コレクションをドラッグし、Panel Pageにドロップします。ポップアップ・メニューで「MAF List View」を選択します。

    
    

18. ListView Galleryで、「Main-Sub Text」を選択し、1つ目のVariationと2つ目のStyleを選択し、「OK」をクリックします。

    

19. 各ビーコンについて識別子と近接度（proximity）を表示する必要があるため、Edit List Viewペインで最初のElementのValue Bindingをidentifierに設定し、2つ目のElementのValue Bindingをproximityに設定します。「OK」をクリックします。

    

20. 次に、アプリケーションが距離測定モードになっている場合のみリストが表示されるように設定します。
    
    「List View」コンポーネントを選択し、Renderedプロパティを#{applicationScope.ranging == true}に設定し、Style Classをadfmf-listView-insetListに設定します。

    

21. すべての作業内容を保存します。
    

22. 最後に、新しい機能にJavaScriptコードを含めます。
    
    再度、「maf-feature.xml」ファイルを開き、「Beacon」機能を選択します。 次に、「Content」タブをクリックしてIncludes領域まで下にスクロールし、緑色のプラス記号をクリックします。

    
    

23. Insert Includeダイアログ・ボックスで、Fileプロパティの右側にある水色の歯車アイコンをクリックします。次に、resources\jsディレクトリにナビゲートして「beacon.js」ファイルを選択します。
    

    
    

24. 「OK」をクリックしてEdit Propertyペインを閉じ、再度「OK」をクリックしてInsert Includeペインを閉じます。

    
    

25. すべての作業を保存します。これでAMXページが完成しました。

開発した機能をテストするには、このアプリケーションをiOSデバイスまたはAndroidデバイスにデプロイする必要があります。シミュレータやエミュレータでは動作しないためです。このセクションでは、デプロイメント・プロファイルを作成してデバイスにデプロイします。iOSデバイスにデプロイする場合は、証明書とプロビジョニング・ファイルが必要です。このセクションでは、これらのコンポーネントのインストールと構成については説明しません。一連の手順のうち一部については、iOSとAndroidの両方のスクリーンショットを表示します。

1. iOSデバイスにデプロイする場合は、プロビジョニング・プロファイルで指定したApp IDと一致するアプリケーションIdを設定する必要があります。この設定が必要なのはiOSデプロイメントのみです。Androidデバイスにデプロイする場合は次のステップに進みます。
   
   「maf-application.xml」ファイルを開き、「Application」タブをクリックします。
   
   次に、プロビジョニング・プロファイルで指定したApp Idと一致する値をIdプロパティに設定します。下の図では、idの最後の部分のみ表示しています。
   
   
   
   

2. Idプロパティからフォーカスを外し、すべての作業内容を保存します。

3. アプリケーションをデプロイします。
   
   デプロイするデバイスに応じて、メニューから「Application」→「Deploy」→「iOS1」（または「Android1」）の順に選択します。
   
   
   
   

4. Androidにデプロイする場合は、「Deploy application to device」を選択して「OK」をクリックします。

   
   
   iOSにデプロイする場合は、「Deploy distribution package」を選択して「OK」をクリックします。

   
   

5. アプリケーションをデプロイしたら、それをデバイスに移動する必要があります。Androidデバイスの場合は、デバイスを接続してアプリケーションをデバイスにドラッグ・アンド・ドロップします。
   
   iOSの場合は少し異なり、iTunesを使用する必要があります。次の3つの手順は、MacからiOSデバイスにアプリケーションを移動する方法を示しています。
   
   iOSにデプロイする場合は、デバイスを接続してiTunesを開きます。
   メニューから「File」→「Add to Library」の順に選択します。

   
   

6. JDeveloperで作成された.ipaファイルを探す必要があります。
   
   アプリケーションを作成したディレクトリにナビゲートし、/deploy/iOS1/ディレクトリを開きます。次に、「BeaconClient.ipa」を選択して「Open」をクリックします。

   
   

7. iTunesでデバイスを選択し、「Apps」ノードを選択します。
   次に、下にスクロールしてBeaconClientアプリケーションを表示します。「Install」→「Apply」の順にクリックします。

   
   

8. 同期が完了したら、BeaconClientのアイコンを探します。

   
   

9. アイコンをダブルクリックしてアプリケーションを起動します。「Start」ボタンをクリックすると、監視中のビーコン領域が表示されます。アドバタイズを行っているビーコン領域がないため、ビーコンの検索は開始されません。アプリケーションが距離測定モードになるのは、デバイスがビーコン領域内にある場合のみです。
   

   
   
   次のパートでは、デプロイするとビーコンとして動作する別のMAFアプリケーションを作成します。そのため、BeaconClientは異なる動作をします。