ハイブリッド開発の開始

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

• 2 種類のハイブリッドアプリケーションを説明する。
• ハイブリッド開発のための Mobile SDK をインストールする。
• Cordova を使用して Mobile SDK ハイブリッドアプリケーションを作成する。
• ハイブリッドアプリケーションを実行する。

Mobile SDK は、ネイティブアプリケーションに代わるクロスプラットフォームとして、ハイブリッドアプリケーションの開発を提供します。ハイブリッドアプリケーションは、HTML5 Web アプリケーションの開発の容易さと、iOS や Android のネイティブ機能とを統合したものです。これらのアプリケーションは、Web アプリケーションコードを解析してネイティブコードとして実行するモバイルコンテナで実行されます。Apache Cordova テクノロジーを基盤に構築されたこのコンテナでは、開発者がコードを HTML5、JavaScript、および CSS で記述できます。内部では、ハイブリッドアプリケーションは Salesforce Mobile SDK プラグインを使用する Cordova アプリケーションです。

ハイブリッドアプリケーションは、次の 2 つのカテゴリのいずれかになります。

• ハイブリッドローカル — ハイブリッドローカルアプリケーションは、モバイルコンテナでローカルに実行される Web アプリケーションです。これらのアプリケーションは、force.js ライブラリを使用して開発され、その HTML、JavaScript、および CSS ファイルをユーザーのデバイス上に保存します。
• ハイブリッドリモート — ハイブリッドリモートアプリケーションは、モバイルコンテナを介して Visualforce ページを配信します。これらのアプリケーションは、その HTML、JavaScript、および CSS ファイルの一部またはすべてを Salesforce サーバー上に保存します。

forcehybrid npm ユーティリティを使用してハイブリッドプロジェクトを作成します。その後、Cordova コマンドラインを使用して、さらなるプラグインおよび Android または iOS ターゲットを追加できます。既存の Web アプリケーションのソースファイルを新しいプロジェクトにコピーするだけで、そのアプリケーションを再利用できます。

ハイブリッドプロジェクトには、各ターゲットプラットフォームの Mobile SDK コンテナも含まれます。このコンテナは、設定のほとんどいらないネイティブプロジェクトです。Web または Visualforce アプリケーションとデバイスの OS 間のランタイムブリッジを提供します。

では始めましょう。この単元の最後にある Challenge を実行するには、「Install Mobile SDK Developer Tools (Mobile SDK 開発者ツールのインストール)」プロジェクトを完了する必要があります。まだ完了していない場合には、そのプロジェクトに移動して、開発環境を正しく設定してください。先に進む準備が整ったら、基本的なハイブリッドローカルアプリケーションを作成し、そのアプリケーションを見ていきます。その後、Mobile SDK のサンプルアプリケーションの 1 つを例にとって、どのように force.js ライブラリが使用されているかを確認し、ハイブリッドリモートアプリケーションについて学習します。Safari や Chrome のデバッグツールを使用してハイブリッドアプリケーションのデバッグを行う方法についても学習します。

重要

このモジュールの前提条件として、接続アプリケーションについての手順が含まれる「Salesforce Mobile SDK の基礎」モジュールを完了する必要があります。接続アプリケーションを作成せずにこの単元の Challenge を完了することはできません。

Salesforce サービスに接続するには、すべてのモバイルアアプリケーションに Salesforce 接続アプリケーションが必要です。接続アプリケーションは、アプリケーションが Salesforce と通信を行い、Salesforce API に安全にアクセスするための認証を行います。

1. ターミナルウィンドウまたは Windows コマンドプロンプトで、forcehybrid create と入力します。
2. 入力を促すメッセージに対して次の値を入力します。
   • プラットフォーム: ios、android、ios,android のいずれか

   • アプリケーション種別: hybrid_local
   • アプリケーション名: MyTrailHybridLocal
   • パッケージ名: com.mytrail.hybrid
   • 組織名: MyTrail, Inc.
   • 出力ディレクトリ: TrailHybridApps
3. これで、ハイブリッドローカルアプリケーションが作成されました。スクリプトは、プロジェクトの作成が完了すると画面にプロジェクトディレクトリ名を出力します。たとえば、「Your application project is ready in <project directory name>」(アプリケーションプロジェクトが <プロジェクトディレクトリ名> に準備できました) と表示されます。プロジェクトの準備ができたというコマンドラインメッセージが表示されたら、新しいプロジェクトを更新して、接続アプリケーション設定を反映します。プロジェクトディレクトリ名>
4. プロジェクトディレクトリで、UTF-8 に準拠しているテキストエディターを用いて www/bootconfig.json ファイルを開き、次のプロパティを更新します。
   • remoteAccessConsumerKey — この値はデフォルトのプレースホルダーです。実際のアプリケーションでは、この値を接続アプリケーションからのコンシューマー鍵に置き換えます。
   • oauthRedirectURI — この値はデフォルトのプレースホルダーです。実際のアプリケーションでは、この値を接続アプリケーションからのコールバック URL に置き換えます。
5. コマンドプロンプトで、アプリケーションルートフォルダーに変更し、cordova prepare を実行します。

重要

ルートレベルの www/ フォルダーで変更を行ったら、必ずコマンドプロンプトに移動して、アプリケーションルートフォルダーから cordova prepare を実行します。このコマンドは、変更をプラットフォーム固有のフォルダーにコピーします。次に例を示します。

cd ~/<your local path>/TrailHybridApps
cordova prepare

これで、forcehybrid ユーティリティでの作業は完了です。プラットフォームに「android」と入力した場合は、Cordova プロジェクトと platforms/android/ サブフォルダーが作成され、Android Studio で開くことができます。プラットフォームを「ios」に設定すると、Xcode ワークスペースが含まれる platforms/ios/ サブフォルダーが作成されます。プラットフォームを「ios,android」に設定すると、iOS ワークスペースと Android プロジェクトの両方が作成されます。

プロジェクトをまだビルドしないでください。まだすべては完了していません。

1. ターミナルウィンドウまたはコマンドプロンプトウィンドウに戻ります。
2. cd でアプリケーションのプロジェクトディレクトリに移動します。
3. (省略可能 — Mac のみ) 2 つ目のプラットフォームを「事後に」追加する場合は、次の値を入力します。
   • iOS サポートを追加する場合:

     cordova platform add ios@5.1.1

   • Android サポートを追加する場合:

     cordova platform add android@8.1.0

Cordova プラグインについて

ハイブリッドアプリケーションの基本的な機能を強化するために、開発者がサードパーティの Cordova プラグインを追加することがよくあります。独自のアプリケーションの場合、cordova plugin add plug-in_name に続いて cordova prepare をコールすることにより、外部プラグインを追加できます。

Android プロジェクトを含む forcehybrid アプリケーションに他のプラグインを追加するには、一旦 Salesforce プラグインを削除し、後で追加し直します。このステップは、iOS のみの forcehybrid アプリケーションには適用されません。次に例を示します。

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

重要

Mobile SDK で提供される他のプラグインの場合は、cordova plugin add をコールしないでください。これらのプラグインは、forcehybrid プロジェクトに自動的に含まれます。

アプリケーションの設定が完了したので、Xcode (iOS アプリケーションの場合) または Android Studio (Android アプリケーションの場合) で実行しましょう。

Android でアプリケーションを実行する

アプリケーションを Android Studio から実行する手順は、次のとおりです。

1. ようこそ画面から [プロジェクトをインポート (Eclipse ADT、Gradle など)] を選択します。または、Android Studio がすでに実行されている場合は、[ファイル] | [新規] | [プロジェクトをインポート] を選択します。
2. <your_project_dir>/platforms/android を選択して、[OK] をクリックします。Gradle ラッパーを使用するように促されたら、その指示を受け入れます。
3. ビルドが終了したら、android ターゲットを選択し、メニューまたはツールバーのいずれかで [「android」を実行] をクリックします。
4. 接続されている Android デバイスまたはエミュレーターを選択します。

Salesforce にログインすると、アプリケーションに組織のユーザーのリストが表示されます。

重要

Android Studio で Gradle ラッパーバージョンの更新を提案された場合は、提案を受け入れます。このプロセスが完了すると、Android Studio は自動的にプロジェクトを再インポートします。

• Cordova 3.5 ドキュメント
• ハイブリッドアプリケーションのクイックスタート
• HTML5 およびハイブリッド開発
• https://github.com/forcedotcom/SalesforceMobileSDK-Shared