Skip to main content

ハイブリッド開発の開始

学習の目的

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

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

メモ

日本語で受講されている方へ
このバッジの Trailhead ハンズオン Challenge は英語以外の言語には対応していません。Trailhead Playground の [言語] を [English] に、[地域] を [アメリカ合衆国] に切り替えてください。こちらの指示に従ってください。

ハイブリッド開発の概念について

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 のデバッグツールを使用してハイブリッドアプリケーションのデバッグを行う方法についても学習します。

純粋な 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. 入力を促すメッセージに対して次の値を入力します。
    • プラットフォーム: ios、android、ios,android のいずれか

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

      一部の Windows デバイスでは、forcehybrid create コマンドが失敗します。このエラーを回避するには、cordova plugin add salesforce-mobilesdk-cordova-plugin@v11.1.0 --force を実行してください。この問題は Mobile SDK 12.0 のリリースで修正されます。

  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 プロジェクトに自動的に含まれます。

サポートの取得

予期しない結果が発生しましたか? ハイブリッドモデルはユーザーが制御できないものに依存しているため、予期しないことが発生する可能性があります。「Mobile SDK」Trailblazer Communityに質問することをお勧めします。

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

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

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

重要

重要

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

無料で学習を続けましょう!
続けるにはアカウントにサインアップしてください。
サインアップすると次のような機能が利用できるようになります。
  • 各自のキャリア目標に合わせてパーソナライズされたおすすめが表示される
  • ハンズオン Challenge やテストでスキルを練習できる
  • 進捗状況を追跡して上司と共有できる
  • メンターやキャリアチャンスと繋がることができる