進行状況の追跡を始めよう
Trailhead のホーム
Trailhead のホーム

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

学習の目的

この単元を完了すると、次のことができるようになります。

  • ContactExplorer サンプルハイブリッドアプリケーションを実行する。
  • ContactExplorer アプリケーションのしくみを理解する。
  • Salesforce OAuth プラグインを使用して、ユーザ認証とセッション保有時間を管理する。

ContactExplorer アプリケーションの実行

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

この練習を開始する前に、次のディレクトリがあることを確認してください。
  • SalesforceMobileSDK-Shared からコピーしたリポジトリを含めるディレクトリ — ルートディレクトリ、またはその他の簡単にアクセスできるディレクトリ。
  • Mobile SDK ハイブリッドプロジェクトの作成および開発用のディレクトリ。Cordova プロジェクトには iOS ターゲットと Android ターゲットの両方を含めることができるため、プラットフォームに依存しないディレクトリに配置することをお勧めします。

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

  1. コマンドプロンプトまたはターミナルウィンドウで、cd を実行して、共有リポジトリをコピーする予定のディレクトリに移動します。
  2. 次のコマンドを実行します。
    git clone https://github.com/forcedotcom/SalesforceMobileSDK-Shared.git
  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>

    汎用ハイブリッドプロジェクトができたため、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
    メモ

    メモ

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

    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

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

アプリケーションを iOS で実行する手順は、次のとおりです。
  1. cd を実行して platforms/ios/ に移動します。
  2. open contactsApp.xcworkspace コマンドを実行します。
  3. Xcode で、[実行] をクリックします。
アプリケーションを Android で実行する手順は、次のとおりです。
  1. Android Studio で、<your-hybrid-projects-directory>/contactsApp/platforms/android プロジェクトをインポートするか、開きます。
  2. [実行] をクリックします。

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

モバイルログイン画面

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

サンプルハイブリッドアプリケーション

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

サンプルハイブリッド取引先責任者

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

ContactExplorer アプリケーションについて

ContactExplorer アプリケーションの動作を詳しく見てみましょう。最も興味深いファイルは、index.html と inline.js の 2 つです。

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

force.js ライブラリ

index.html ファイルの最上部付近で、アプリケーションは Mobile SDK JavaScript ライブラリを読み込みます。
<!-- include force.js for REST transaction support -->
<script src="js/force.js"></script>
このライブラリには、すべての Mobile SDK ハイブリッドアプリケーションの基盤となる基本的な JavaScript 機能が含まれます。この機能がネイティブコードをコールし、トークンの更新と低レベルのネットワークコールを実装します。force.js でカバーされるその他の機能として、REST API ラッパー関数やユーザエージェントの構築があります。

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

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