ハイブリッド開発の開始

学習の目的

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

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

メモ

日本語で受講されている方へ
Challenge は日本語の Trailhead Playground で開始し、かっこ内の翻訳を参照しながら進めていってください。Challenge での評価は英語データを対象に行われるため、英語の値のみをコピーして貼り付けるようにしてください。日本語の組織で Challenge が不合格だった場合は、(1) この手順に従って [Locale (地域)] を [United States (米国)] に切り替え、(2) [Language (言語)] を [English (英語)] に切り替えてから、(3) [Check Challenge (Challenge を確認)] ボタンをクリックしてみることをお勧めします。

翻訳版 Trailhead を活用する方法の詳細は、自分の言語の Trailhead バッジを参照してください。

始める前に

このモジュールのステップを進める前に、同じ Trailhead Playground を使って「Mobile SDK 開発者ツールの設定」のハンズオン Challenge を実施してください。このモジュールのハンズオン Challenge の作業は、そのバッジで実施した作業をもとに進めます。

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

では始めましょう。この単元の最初に記載されている、事前に取得が必要なバッジがすべて取得済みであることを確認してください。先に進む準備が整ったら、基本的なハイブリッドローカルアプリケーションを作成し、そのアプリケーションを見ていきます。その後、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 アプリケーションではコンシューマーの秘密は使用しないため、この値は無視できます。

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

重要:

Mobile SDK に必要なツールの設定をまだ行っていない場合は、Trailhead の「Mobile SDK 開発者ツールの設定」モジュールを受講してください。

ターミナルウィンドウまたは Windows コマンドプロンプトで、forcehybrid create と入力します。
入力を促すメッセージに対して次の値を入力します。

プラットフォーム: 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 のリリースで修正されます。

これで、ハイブリッドローカルアプリケーションが作成されました。スクリプトは、プロジェクトの作成が完了すると画面にプロジェクトディレクトリ名を出力します。たとえば、「Your application project is ready in <project directory name>」(アプリケーションプロジェクトが <プロジェクトディレクトリ名> に準備できました) と表示されます。プロジェクトの準備ができたというコマンドラインメッセージが表示されたら、新しいプロジェクトを更新して、接続アプリケーション設定を反映します。
プロジェクトディレクトリ名>
プロジェクトディレクトリで、UTF-8 に準拠しているテキストエディターを用いて www/bootconfig.json ファイルを開き、次のプロパティを更新します。

remoteAccessConsumerKey — この値はデフォルトのプレースホルダーです。実際のアプリケーションでは、この値を接続アプリケーションからのコンシューマー鍵に置き換えます。
oauthRedirectURI — この値はデフォルトのプレースホルダーです。実際のアプリケーションでは、この値を接続アプリケーションからのコールバック URL に置き換えます。

コマンドプロンプトで、アプリケーションルートフォルダーに変更し、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 プロジェクトの両方が作成されます。

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

ターミナルウィンドウまたはコマンドプロンプトウィンドウに戻ります。
cd でアプリケーションのプロジェクトディレクトリに移動します。
(省略可能 — 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 から実行する手順は、次のとおりです。

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

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

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

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

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

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

ヘルプをお探しですか?

もっと探す