サンプルハイブリッドアプリケーションについて

Mobile SDK に含まれている ContactExplorer サンプルアプリケーションを見てみましょう。ContactExplorer は、テンプレートアプリケーションよりも多くの機能を示すハイブリッドローカルアプリケーションです。Mac OS または Windows でこの練習問題を実行できますが、iOS ターゲットは Mac でのみ完全に検証できます。

まず、共有リポジトリをコピーしてから、forcehybrid を使用してアプリケーションを作成します。

1. コマンドプロンプトまたはターミナルウィンドウで、cd を実行して、共有リポジトリをコピーする予定のディレクトリに移動します。
2. 次のコマンドを実行します。

   git clone https://github.com/forcedotcom/SalesforceMobileSDK-Shared.git

   Copy
3. cd を実行して、ハイブリッドプロジェクトを開発する予定のディレクトリに移動します。
4. 次の値を使用して forcehybrid create を実行します。

   Enter the target platform(s) separated by commas (ios, android): ios,android
   Enter your application type (hybrid_local or hybrid_remote, leave empty for hybrid_local): <press RETURN>
   Enter your application name: contactsApp
   Enter the package name for your app (com.mycompany.myapp): com.acmeapps.contactexplorer
   Enter your organization name (Acme, Inc.): AcmeApps.com
   Enter output directory for your app (leave empty for the current directory): <press RETURN>

   Copy
   汎用ハイブリッドプロジェクトができたため、contactexplorer というサンプルコードを追加できます。
5. 次のコマンドを実行して、cp コマンドのプレースホルダーをローカルパスに置換します。

   cd contactsApp
   cordova plugin add cordova-plugin-contacts
   cordova plugin add cordova-plugin-statusbar
   cordova plugin remove com.salesforce
   cordova plugin add https://github.com/forcedotcom/SalesforceMobileSDK-CordovaPlugin --force
   cp -RL <local path to SalesforceMobileSDK-Shared>/samples/contactexplorer/* www/
   cordova prepare

   Copy
   Windows ユーザー: Windows では、Unix の cp コマンドを copy コマンドに置き換えます。ただし、/samples/contactexplorer/ のサブフォルダー js と css 内のファイルは、他のパスにあるソースファイルの別名であることに注意してください。必ず、別名ではなくソースファイル自体をコピーしてください。次に例を示します。

   cd contactsApp
     cordova plugin add cordova-plugin-contacts
     cordova plugin add cordova-plugin-statusbar
     cordova plugin remove com.salesforce
     cordova plugin add https://github.com/forcedotcom/SalesforceMobileSDK-CordovaPlugin --force
     rem Make a path variable
     set SHAREDPATH=C:\SalesforceMobileSDK-Shared\
     md www
     cd www
     md css
     copy %SHAREDPATH%\samples\common\jquery.mobile-1.3.1.min.css css
     md js
     copy %SHAREDPATH%\test\MockCordova.js js
     copy %SHAREDPATH%\libs\cordova.force.js js
     copy %SHAREDPATH%\libs\force.js js
     copy %SHAREDPATH%\dependencies\jquery\jquery.min.js js
     copy %SHAREDPATH%\samples\common\jquery.mobile-1.3.1.min.js js
     cordova prepare

   Copy
   
   

forcedroid スクリプトとその後のコマンドでは iOS プロジェクトと Android プロジェクトを作成します。これらはどちらも ContactExplorer サンプルアプリケーションをラップします。これで、いずれかのプラットフォームでアプリケーションを実行する準備ができました。iOS デバイスを使用する場合、developer.apple.com/library にある『Xcode User Guide』(Xcode ユーザーガイド) の説明に従ってシミュレーターのプロファイルを設定する必要があります。同様に、Android デバイスは developer.android.com/tools の説明に従って設定する必要があります。

アプリケーションを実行すると、初期スプラッシュ画面が表示された後で Salesforce ログイン画面が表示されます。

Developer Edition 組織のユーザー名とパスワードを使用してログインします。アプリケーションから Salesforce データにアクセスできるようにするには、[許可] をタップします。これでアプリケーションにログインしたため、取引先責任者と取引先のリストを取得できます。DE 組織から Salesforce 取引先責任者名を取得するには [SFDC の取引先責任者を取得] をタップし、取引先名を取得するには [SFDC の取引先を取得] をタップします。

タップするごとに、行が無限のリストに追加されます。完全なリストを表示するには、スクロールダウンします。

アプリケーションの動作を詳しく見てみましょう。

1. contactsApp プロジェクトで、www/index.html ファイルを開きます。
2. 「function onDeviceReady()」を検索します。

force.js を使用してユーザーセッションを開始するには、force.login() をコールします。コンテナ内で実行中のアプリケーションにユーザーがログインした後、アプリケーションが Salesforce リソースにアクセスしようとすると、必要に応じてネットワークプラグインがトークンを更新します。ContactExplorer サンプルを基にした次のコードは、一般的な force.login() の実装を示します。

デバイスから準備が完了したことが通知されたら、force.login() メソッドをコールしてログイン画面を post します。

/* Do login */
force.login(
    function() {
        console.log("Auth succeeded"); 
        // Call your app’s entry point
        // ...
    },
    function(error) {
        console.log("Auth failed: " + error); 
    }
);

ログインプロセスの完了後、サンプルアプリケーションに index.html (www フォルダー内) が表示されます。ページの読み込みが完了してモバイルフレームワークの準備ができたら、jQuery(document).ready() 関数によって regLinkClickHandlers() がコールされます。この関数 (inline.js 内) が、サンプルアプリケーションのさまざまな関数のクリックハンドラーを設定します。たとえば、#link_fetch_sfdc_contacts ハンドラーは、force オブジェクトを使用してクエリを実行します。

$j('#link_fetch_sfdc_contacts').click(function() {
    logToConsole("link_fetch_sfdc_contacts clicked");
    force.query("SELECT Name FROM Contact LIMIT 25", 
        onSuccessSfdcContacts, onErrorSfdc); 
});

force オブジェクトは、OAuth 2.0 との初期のやりとりの中で設定され、認証されたユーザーのコンテキストで REST API へのアクセス権を付与します。ここで DE 組織の全取引先責任者の名前を取得します。次に、onSuccessSfdcContacts() によって、index.html ページ上に取引先責任者がリストとして表示されます。

$j('#link_fetch_sfdc_accounts').click(function() {
    logToConsole("link_fetch_sfdc_accounts clicked");
    force.query("SELECT Name FROM Account LIMIT 25", 
        onSuccessSfdcAccounts, onErrorSfdc); 
});

#link_fetch_sfdc_contacts ハンドラーと同様に、#link_fetch_sfdc_accounts ハンドラーは REST API によって取引先レコードを取得します。#link_reset と #link_logout ハンドラーによって、表示されたリストのクリアとユーザーのログアウトがそれぞれ実行されます。

このアプリケーションでは、デバイスからも取引先責任者を取得できます。これは同等の Web アプリケーションではできない操作です。次のクリックハンドラーは、Cordova の取引責任者プラグインをコールすることにより、デバイスの取引責任者クエリを取得します。

$j('#link_fetch_device_contacts').click(function() {
    logToConsole("link_fetch_device_contacts clicked");
    var options      = new ContactFindOptions();
    // empty search string returns all contacts
    options.filter   = ""; 
    options.multiple = true;
    options.hasPhoneNumber = true;
    var fields       = 
        [navigator.contacts.fieldType.displayName, 
            navigator.contacts.fieldType.name];
    navigator.contacts.find(fields, onSuccessDevice, 
        onErrorDevice, options);
});

このハンドラーは、cordova-plugin-contacts の ContactFindOptions オブジェクトと navigator.contacts オブジェクトを使用して、検索を絞り込んで実行します。navigator.contacts.find() をコールして、デバイスから取引先責任者とその電話番号を記載したリストを取得します。onSuccessDevice() 関数 (ここには示されていません) によって、取引先責任者リストが index.html ページに表示されます。

force.js ライブラリ

<!-- include force.js for REST transaction support -->
<script src="js/force.js"></script>

force.js ライブラリを読み込むと、グローバル force オブジェクトが作成されます。このオブジェクトは、ライブラリの機能へのエントリポイントです。前述のとおり、salesforceSessionRefreshed 関数は、force インスタンスを使用して force.query() などのネットワークコールを実行します。

この概要は短くまとめてありますが、内容は豊富です。ContactExplorer アプリケーションの他の UI ウィジェットは、ここで説明したウィジェットと同様に動作します。お時間のあるときに、index.html と inline.js 両方のコードについて学習し、理解を深めておくことをお勧めします。では、Salesforce でのハイブリッドアプリケーションの操作に関する詳細な説明に移ります。ワクワクしますか? それでは進みましょう。