tyoshikawa1106のブログ

- Force.com Developer Blog -

SFDC:モバイルアプリの開発環境構築 (ハイブリッド開発編)

Salesforceモバイルアプリのハイブリッド開発についてです。

f:id:tyoshikawa1106:20160118202650p:plain

Getting Started with Hybrid Development Unit | Salesforce Trailhead

ハイブリッド開発の種類

f:id:tyoshikawa1106:20160118202817p:plain

ハイブリッド開発のための Mobile SDK のインストール

f:id:tyoshikawa1106:20160118203100p:plain


androidの場合はこちら。
f:id:tyoshikawa1106:20160118203138p:plain


あとはDeveloper環境と接続アプリケーションの設定が必要になります。
f:id:tyoshikawa1106:20160118203218p:plain

開発環境の準備と開発の流れ

Mobile SDK ハイブリッドアプリケーションを作成する前に、Node.js、Mobile SDK npm パッケージ、Cordova ビルドツールをインストールする必要があります。

接続アプリケーションの設定

ざっくりこんな感じです。
f:id:tyoshikawa1106:20160118205501p:plain

コールバックURLは一時的な値にして後で変更します。

mysampleapp://auth/success

Node.js と npm をインストールする

Node.jsは公式サイトからインストールします。

https://nodejs.org/en/

f:id:tyoshikawa1106:20160118204014p:plain

Cordova ビルドツール(Cordova コマンドラインをインストール)

f:id:tyoshikawa1106:20160118203417p:plain

Apache Cordova


npm installコマンドでインストールできるみたいです。

$ npm install -g cordova

f:id:tyoshikawa1106:20160118203719p:plain

詳細は公式サイトに記載があります。
f:id:tyoshikawa1106:20160118203552p:plain

forcedroid または forceios をインストール

forcedroid (Android用)
$ sudo npm install -g forcedroid
forceios (iOS用)
$ sudo npm install -g forceios


今回はiOS用で進めます。
f:id:tyoshikawa1106:20160118204543p:plain

ハイブリッドアプリケーションを作成する

インストールしたパッケージに応じて「forcedroid create」または「forceios create」と入力します。

今回はiOSアプリなのでこちら。

$ forceios create


以下のプロパティを指定します。(値は任意)

  • アプリケーション種別: hybrid_local
  • アプリケーション名: MyTrailHybridLocal
  • ターゲットディレクトリ: TrailHybridApps
  • パッケージ名: com.mytrail.hybrid
  • (forceios のみ) 組織名: com.mytrail.hybridlocal
  • (forceios のみ) 接続アプリケーション ID: 接続アプリケーションからコンシューマキーを貼り付けます
  • (forceios のみ) 接続アプリケーションコールバック URI: 接続アプリケーションからコールバック URL を貼り付けます

f:id:tyoshikawa1106:20160118214449p:plain

注意

f:id:tyoshikawa1106:20160118214818p:plain


正常に実行できるとこんな感じです。
f:id:tyoshikawa1106:20160131220436p:plain


ターゲットディレクトリに指定した『TrailHybridApps』の中に必要なファイル一式が作成されます。
f:id:tyoshikawa1106:20160131220700p:plain

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

次のコマンドで実行できます。

$ cordova emulate ios

f:id:tyoshikawa1106:20160131221025p:plain


実行するとエミュレータが起動してSalesforceのログインページが表示されます。
f:id:tyoshikawa1106:20160131221120p:plain:w200


ログイン後は次のようにユーザ一覧が表示されました。
f:id:tyoshikawa1106:20160131221404p:plain:w200

初期表示画面の設定

ログイン後に最初に表示される画面を変更したい場合は、bootconfig.jsonファイルを編集します。
f:id:tyoshikawa1106:20160131221807p:plain


次のようにStartPageのところを"/apex/VFPageName"という感じで指定するとVisualforceページを表示できるようになります。(たぶんこんな感じ...)
f:id:tyoshikawa1106:20160131222020p:plain


こちらのサイトがわかりやすかったです。

Force.comをmBaaSとして利用したハイブリッド(Cordova)アプリ開発