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

ハイブリッド開発の開始

学習の目的

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

  • 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 間のランタイムブリッジを提供します。

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

純粋な HTML5 アプリケーションの場合

HTML5 アプリケーションでは、標準の Web テクノロジ (通常は HTML5、JavaScript および CSS) を使用し、モバイル Web ブラウザを通してアプリケーションを提供します。この「Write Once, Run Anywhere (一度書けば、どこでも実行できる)」というモバイル開発へのアプローチでは、複数のデバイスで動作するクロスプラットフォームのモバイルアプリケーションが作成されます。開発者は、HTML5 と JavaScript のみを使用して高度なアプリケーションを作成することもできますが、いくつかの課題があります。たとえば、セッション管理、安全なオフラインストレージ、ネイティブデバイス機能へのアクセスなどで問題が発生する可能性があります。

このトレイルでは純粋な HTML5 の開発は扱いません。

ネイティブおよびマルチプラットフォーム開発アーキテクチャの比較

次の表に、さまざまな開発シナリオの比較の概要を示します。

ネイティブ、React Native HTML5 ハイブリッド
グラフィック ネイティブ API HTML、キャンバス、SVG HTML、キャンバス、SVG
パフォーマンス 最速 高速 中程度の速度
デザイン ネイティブ エミュレート エミュレート
配布 アプリケーションストア Web App Store
カメラ はい ブラウザに依存 はい
通知 はい いいえ はい
連絡先、カレンダー はい いいえ はい
オフラインストレージ 安全なファイルシステム 安全ではない、共有 SQL、キー - 値ストア 安全なファイルシステム、共有 SQL (Cordova プラグイン使用)
地理位置情報 はい はい はい
スワイプ はい はい はい
ピンチ、スプレッド はい はい はい
接続 オンライン、オフライン ほぼオンライン オンライン、オフライン
開発手段 Objective-C、Swift、Java、Kotlin、JavaScript (React Native のみ) HTML5、CSS、JavaScript HTML5、CSS、JavaScript

接続アプリケーションの作成

重要

重要

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

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

接続アプリケーションを作成して保存すると、詳細が表示されます。
  • [コールバック URL][コンシューマ鍵] の値をコピーします。これらの値はアプリケーションの認証設定に使用します。
  • Mobile SDK アプリケーションではコンシューマの秘密は使用しないため、この値は無視できます。

ハイブリッドアプリケーションの作成

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

    • アプリケーション種別: hybrid_local
    • アプリケーション名: MyTrailHybridLocal
    • パッケージ名: com.mytrail.hybrid
    • 組織名: MyTrail, Inc.
    • 出力ディレクトリ: TrailHybridApps

    これで、ハイブリッドローカルアプリケーションが作成されました。スクリプトは、プロジェクトの作成が完了すると画面にプロジェクトディレクトリ名を出力します。たとえば、「Your application project is ready in <project directory name>」(アプリケーションプロジェクトが <プロジェクトディレクトリ名> に準備できました) と表示されます。

    プロジェクトの準備ができたというコマンドラインメッセージが表示されたら、新しいプロジェクトを更新して、接続アプリケーション設定を反映します。

  3. プロジェクトディレクトリで、UTF-8 に準拠しているテキストエディタを用いて www/bootconfig.json ファイルを開き、次のプロパティを更新します。
    • remoteAccessConsumerKey — この値はデフォルトのプレースホルダです。実際のアプリケーションでは、この値を接続アプリケーションからのコンシューマ鍵に置き換えます。
    • oauthRedirectURI — この値はデフォルトのプレースホルダです。実際のアプリケーションでは、この値を接続アプリケーションからのコールバック URL に置き換えます。
  4. コマンドプロンプトで、アプリケーションルートフォルダに変更し、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.0.0
    • 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 プロジェクトに自動的に含まれます。

サポートの取得

予期しない結果が発生しましたか? ハイブリッドモデルはユーザが制御できないものに依存しているため、予期しないことが発生する可能性があります。SalesforceMobileSDK Google+ コミュニティに質問することをお勧めします。

ハイブリッドアプリケーションの実行

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

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

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

  1. Xcode で [File (ファイル)] | [Open (開く)] を選択します。
  2. 新しいアプリケーションのディレクトリの platforms/ios/ ディレクトリに移動します。
  3. <app name>.xcodeworkspace ファイルをダブルクリックします。
  4. 左上隅にある [Run (実行)] ボタンをクリックするか、COMMAND-R キーを押します。

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 は自動的にプロジェクトを再インポートします。