サンプルハイブリッドアプリケーションについて
学習の目的
この単元を完了すると、次のことができるようになります。
- ContactExplorer サンプルハイブリッドアプリケーションを実行する。
- ContactExplorer アプリケーションのしくみを理解する。
- Salesforce OAuth プラグインを使用して、ユーザー認証とセッション保有時間を管理する。
ContactExplorer アプリケーションの実行
Mobile SDK に含まれている ContactExplorer サンプルアプリケーションを見てみましょう。ContactExplorer は、テンプレートアプリケーションよりも多くの機能を示すハイブリッドローカルアプリケーションです。Mac OS または Windows でこの練習問題を実行できますが、iOS ターゲットは Mac でのみ完全に検証できます。
この練習を開始する前に、次のディレクトリがあることを確認してください。
- SalesforceMobileSDK-Shared のコピーしたリポジトリを格納するディレクトリ (ルートディレクトリまたは簡単にアクセスできる場所にあるその他のディレクトリ)。
- Mobile SDK ハイブリッドアプリケーションを作成および開発するためのディレクトリ。Cordova プロジェクトには iOS ターゲットと Android ターゲットの両方を含めることができるため、プラットフォームに依存しないディレクトリに配置することをお勧めします。
まず、共有リポジトリをコピーしてから、forcehybrid を使用してアプリケーションを作成します。
- コマンドプロンプトまたはターミナルウィンドウで、cd を実行して、共有リポジトリをコピーする予定のディレクトリに移動します。
- 次のコマンドを実行します。
git clone https://github.com/forcedotcom/SalesforceMobileSDK-Shared.git
- cd を実行して、ハイブリッドプロジェクトを開発する予定のディレクトリに移動します。
- 次の値を使用して forcehybrid create を実行します。汎用ハイブリッドプロジェクトができたため、contactexplorer というサンプルコードを追加できます。
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>
- 次のコマンドを実行して、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/ のサブフォルダー 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
forcedroid スクリプトとその後のコマンドでは iOS プロジェクトと Android プロジェクトを作成します。これらはどちらも ContactExplorer サンプルアプリケーションをラップします。これで、いずれかのプラットフォームでアプリケーションを実行する準備ができました。iOS デバイスを使用する場合、developer.apple.com/library にある『Xcode User Guide』(Xcode ユーザーガイド) の説明に従ってシミュレーターのプロファイルを設定する必要があります。同様に、Android デバイスは developer.android.com/tools の説明に従って設定する必要があります。
アプリケーションを iOS で実行する手順は、次のとおりです。
- cd を実行して platforms/ios/ に移動します。
- open contactsApp.xcworkspace コマンドを実行します。
- Xcode で、[実行] をクリックします。
アプリケーションを Android で実行する手順は、次のとおりです。
- Android Studio で、<your-hybrid-projects-directory>/contactsApp/platforms/android プロジェクトをインポートするか、開きます。
-
[実行] をクリックします。
アプリケーションを実行すると、初期スプラッシュ画面が表示された後で Salesforce ログイン画面が表示されます。
Developer Edition 組織のユーザー名とパスワードを使用してログインします。アプリケーションから Salesforce データにアクセスできるようにするには、[Allow (許可)] をタップします。これでアプリケーションにログインしたため、取引先責任者と取引先のリストを取得できます。DE 組織から Salesforce 取引先責任者名を取得するには [SFDC の取引先責任者を取得] をタップし、取引先名を取得するには [SFDC の取引先を取得] をタップします。
タップするごとに、行が無限のリストに追加されます。完全なリストを表示するには、スクロールダウンします。
アプリケーションの動作を詳しく見てみましょう。
ContactExplorer アプリケーションについて
ContactExplorer アプリケーションの動作を詳しく見てみましょう。最も興味深いファイルは、index.html と inline.js の 2 つです。
- contactsApp プロジェクトで、www/index.html ファイルを開きます。
- 「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 ライブラリ
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.html と inline.js 両方のコードについて学習し、理解を深めておくことをお勧めします。では、Salesforce でのハイブリッドアプリケーションの操作に関する詳細な説明に移ります。ワクワクしますか? それでは進みましょう。
リソース