Cordova アプリケーションでの MobileFirst Foundation の開発

improve this page | report issue

概説

http://cordova.apache.org/ から:

Apache Cordova は、オープン・ソースのモバイル開発フレームワークです。HTML5、CSS3、および JavaScript など、クロスプラットフォーム開発用の標準 Web テクノロジーを使用することができ、個々のモバイル・プラットフォームのネイティブ開発言語を使用せずに済みます。アプリケーションは、個々のプラットフォームを対象としたラッパー内で実行され、標準に準拠した API バインディングに依存して、各デバイスのセンサー、データ、およびネットワーク状況にアクセスします。

IBM Mobile Foundation は、複数の Cordova プラグインの形式で SDK を提供しています。Mobile Foundation SDKをCordova アプリケーションに追加する方法を説明します。

注: iOS アプリケーションのストアへの提出および検証のために Test Flight または iTunes Connect を使用して生成されたアーカイブ・ファイルおよび IPA ファイルにより、ランタイムの異常終了や失敗が発生する場合があります。詳細については、ブログ『IBM Mobile Foundation でのアプリ・ストアへの提出のための iOS アプリの準備』を参照してください。

ジャンプ先:

Cordova アプリケーション開発

Cordova を使用して開発されたアプリケーションは、以下の Cordova 提供の開発パスおよびフィーチャーを使用してさらに拡張できます。

フック

Cordova フックは、Cordova コマンドをカスタマイズする機能を開発者に提供するスクリプトで、例えば、カスタム・ビルド・フローの作成を可能にします。
詳しくは、Cordova フックに関する説明を参照してください。

マージ

Merges フォルダーを使用すると、プラットフォーム固有の Web リソース (HTML、CSS、および JavaScript のファイル) を保持することができます。その後、これらの Web リソースは、cordova prepare ステップ中に適切なネイティブ・ディレクトリーにデプロイされます。merges/ フォルダーの下に配置されたファイルは、関連プラットフォームの www/ フォルダー内の一致するファイルをオーバーライドします。詳しくは、Merges フォルダーに関する説明を参照してください。

Cordova プラグイン

Cordova プラグインは、ネイティブ UI エレメント (ダイアログ、タブ・バー、スピナーなど) の追加などの機能拡張に加え、マッピングおよび地理位置情報、外部コンテンツのロード、カスタム・キーボード、デバイス統合 (カメラ、コンタクト、センサー等) などのより高度な機能を提供できます。

Cordova プラグインは、GitHub.com 上、およびよく使用されている Cordova プラグインの Web サイト (Plugreg および NPM) にあります。

サンプル・プラグイン:

注: MobileFirst Cordova SDK がプロジェクトに追加されるときに、Cordova アプリケーションのデフォルトの動作を変更する (「戻る」ボタンの動作をオーバーライドするなど) と、送信時に、Google Play Store によってアプリケーションが拒否される原因となることがあります。 Google Play Store へのサブミットに関する他の障害については、Google サポートにお問い合わせください。

サード・パーティー製フレームワーク

Cordova アプリケーション開発は、IonicAngularJSjQuery MobileBackbone などのフレームワークを使用してさらに拡張できます。

統合ブログ投稿

サード・パーティー製パッケージ

アプリケーションの Web リソース等のミニファイおよび連結などの要件を達成するために、サード・パーティー製パッケージを使用してアプリケーションを変更できます。この目的でよく使用されているパッケージは、以下のとおりです。

MobileFirst API

MobileFirst Cordova SDK を Cordova アプリケーションに追加すると、API メソッドの MobileFirst セットが使用できるようになります。

使用可能な API メソッドの完全なリストについては、API リファレンスを参照してください。

MobileFirst SDK 開始フロー

Android Studio で、MobileFirst を使用する Android 用 Cordova アプリケーションの開始プロセスを検討できます。MobileFirst Cordova プラグイン cordova-plugin-mfp には、ネイティブの非同期ブートストラップ・シーケンスがあります。ブートストラップ・シーケンスは、Cordova アプリケーションがアプリケーションのメイン html ファイルをロードする前に完了する必要があります。

cordova-plugin-mfp プラグインを Cordova アプリケーションに追加すると、アプリケーションの AndroidManifest.xml ファイルが装備されます。また、(MobileFirst の初期化を実行するように CordovaActivity ネイティブ・コードを拡張する) MainActivity ファイルも装備されます。

アプリケーションのネイティブ・コードのインスツルメンテーションは以下で構成されます。

  • MobileFirst の初期化を実行するための com.worklight.androidgap.api.WL API 呼び出しを追加します。
  • AndroidManifest.xml ファイルで以下を追加します。
    • MFPLoadUrlActivity というアクティビティー。このアクティビティーにより、cordova-plugin-crosswalk-webviewがインストールされていた場合に、MobileFirst を適切に初期化することができます。
    • カスタム属性 android:name="com.ibm.MFPApplication"。これを application エレメントに追加します (以下を参照)。

WLInitWebFrameworkListener の実装と WL オブジェクトの作成

MainActivity.java ファイルは、CordovaActivity クラスを拡張する初期の MainActivity クラスを作成します。WLInitWebFrameworkListener は、MobileFirst フレームワークが初期化される際に、通知を受信します。

public class MainActivity extends CordovaActivity implements WLInitWebFrameworkListener {

MFPApplication クラスは onCreate 内から呼び出され、アプリケーションを通して使用される MobileFirst クライアント・インスタンス (com.worklight.androidgap.api.WL) を作成します。onCreate メソッドは WebView フレームワークを初期化します。

@Overridepublic void onCreate(Bundle savedInstanceState){
super.onCreate(savedInstanceState);

if (!((MFPApplication)this.getApplication()).hasCordovaSplashscreen()) {
           WL.getInstance().showSplashScreen(this);
       }
   init();
   WL.getInstance().initializeWebFramework(getApplicationContext(), this);
}

MFPApplication クラスには、以下の 2 つの機能があります。

  • スプラッシュ画面が存在する場合にロードするための showSplashScreen メソッドを定義します。
  • 分析を使用可能にする 2 つのリスナーを作成します。これらのリスナーは、不要な場合に削除することができます。

WebView のロード

cordova-plugin-mfp プラグインは、Crosswalks WebView を初期化するために必要な以下のアクティビティーを AndroidManifest.xml ファイルに追加します。

<activity android:name="com.ibm.MFPLoadUrlActivity" />

このアクティビティーを使用して、以下のように Crosswalk WebView が非同期に初期化されるようにします。

MobileFirst フレームワークが初期化されて WebView へのロード準備ができた後、WLInitWebFrameworkResult が成功すると、onInitWebFrameworkComplete は URL に接続します。

public void onInitWebFrameworkComplete(WLInitWebFrameworkResult result){
if (result.getStatusCode() == WLInitWebFrameworkResult.SUCCESS) {
super.loadUrl(WL.getInstance().getMainHtmlFilePath());
   } else {
      handleWebFrameworkInitFailure(result);
   }
}

MobileFirst フレームワークは iOS プラットフォームで初期化され、MobileFirst を使用する Cordova アプリケーションで WebView を表示します。

main.m

main.m ファイルで、MobileFirst プラグインはデフォルトのメイン・アプリケーション AppDelegateMFPAppDelegate に置き換えます。

#import <UIKit/UIKit.h>
int main(int argc, char *argv[]) {
 @autoreleasepool
    {    
        int retVal = UIApplicationMain(argc, argv, nil, @"MFPAppDelegate");   
        return retVal;
    }
}
MFPAppDelegate.m

MFPAppDelegate.m ファイルは plugins フォルダーにあります。これは、デフォルトの Cordova AppDelegate.m ファイルを置き換えて、ビュー・コントローラーが WebView をロードする前に MobileFirst フレームワークを初期化します。

didFinishLaunchingWithOptions メソッドは、次のフレームワークを初期化します。

[[WL sharedInstance] initializeWebFrameworkWithDelegate:self];

初期化が成功すると、wlInitWebFrameworkDidCompleteWithResult は、MobileFirst フレームワークがロードされ、wlInitDidCompleteSuccessfully を呼び出し、データを受信するためのリスナーを作成したかどうかを確認します。wlInitDidCompleteSuccessfully は、デフォルトの index.html ページに接続する cordovaViewController を作成します。

iOS Cordova アプリケーションが Xcode でエラーなしでビルドされると、フィーチャーをネイティブ・プラットフォームと WebView に追加できるようになります。


MobileFirst Cordova プラグイン cordova-plugin-mfp には、ネイティブの非同期ブートストラップ・シーケンスがあります。ブートストラップ・シーケンスは、Cordova アプリケーションがアプリケーションのメイン HTML ファイルをロードする前に完了する必要があります。

Cordova アプリケーションに cordova-plugin-mfp プラグインを追加すると、アプリケーションの appxmanifest ファイルに index.html ファイルが追加されます。これにより、MobileFirst の初期化を実行するように CordovaActivity ネイティブ・コードが拡張されます。


Cordova アプリケーション・セキュリティー

IBM Mobile Foundation は、Cordova アプリケーションを保護する際に役立つセキュリティー・フィーチャーを提供します。

クロスプラットフォーム・アプリケーションのコンテンツの多くは、ネイティブ・アプリケーションよりもさらに容易に無許可な個人によって変更される可能性があります。クロスプラットフォーム・アプリケーションの一般的なコンテンツの多くは読み取り可能なフォーマットであるため、IBM MobileFirst Foundation では、ご使用のクロスプラットフォーム Cordova アプリケーションに高水準のセキュリティーを提供できるフィーチャーを用意しています。

詳しくは、MobileFirst セキュリティー・フレームワークに関する説明を参照してください。

以下のフィーチャーを使用して、Cordova アプリケーションのセキュリティーを強化します。

  • Cordova パッケージの Web リソースの暗号化
    Cordova アプリケーションの www フォルダーにあるコンテンツを暗号化し、アプリケーションが最初にインストールされて実行されたときに暗号化を解除します。この暗号化により、アプリケーションがパッケージ化されている間、そのフォルダーにあるコンテンツを表示または変更することがより困難になります。
  • Web リソース・チェックサム機能の有効化
    アプリケーションの開始時に、そのコンテンツを、アプリケーションが初めて開始されたときに収集された基準値となるチェックサム結果と比較して、整合性を確認します。このテストは、インストール済みのアプリケーションの変更を防ぐのに役立ちます。
  • FIPS 140-2 の有効化
    休止中のデータと動作中のデータの暗号化に使用される暗号化アルゴリズムが、必ず連邦情報処理標準 (FIPS) 140-2 に準拠するようにします。
  • 証明書ピン留め
    予想される公開鍵にホストを関連付けることで、中間者 (man-in-the-middle) 攻撃を防ぎます。

Cordova アプリケーション・リソース

Cordova アプリケーションの一部として、特定のリソースが必要です。それらは、ほとんどの場合、任意の Cordova 開発ツールで Cordova アプリケーションを作成すると生成されます。Mobile Foundation テンプレートを使用した場合、スプラッシュ画面およびアイコンも提供されます。

MobileFirst 機能の使用に対応した Cordova プロジェクトで使用するために、IBM 提供のプロジェクト・テンプレートを使用できます。この MobileFirst テンプレートを使用する場合、開始点として以下のリソースが使用可能になります。この MobileFirst テンプレートを使用しない場合、スプラッシュ画面とアイコンを除く、すべてのリソースが提供されます。このテンプレートを追加するには、Cordova プロジェクトの初期作成時に --template オプションおよび MobileFirst テンプレートを指定します。

いずれかのリソースのデフォルトのファイル名とパスを変更する場合は、Cordova 構成ファイル (config.xml) 内でもその変更を指定する必要があります。また、場合によっては、デフォルトの名前およびパスを mfpdev app config コマンドで変更できます。mfpdev app config コマンドで名前およびパスを変更できる場合は、特定のリソースについてのセクションにその旨の注記があります。

Cordova 構成ファイル (config.xml)

Cordova 構成ファイルは、アプリケーション・メタデータを含む必須の XML ファイルであり、アプリケーションのルート・ディレクトリーに保管されます。このファイルは Cordova アプリケーションを作成すると自動的に生成されます。mfpdev app config コマンドを使用して、このファイルを変更してカスタム・プロパティーを追加できます。

メインファイル (index.html)

このメインファイルは、アプリケーション・スケルトンを含む HTML5 ファイルです。このファイルは、アプリケーションの一般コンポーネントの定義および必要なドキュメント・イベントへの接続に必要なすべての Web リソース (スクリプトやスタイル・シートなど) をロードします。このファイルは、your-project-name/www ディレクトリーにあります。mfpdev app config コマンドを使用して、このファイルの名前を変更することができます。

サムネール・イメージ

サムネール・イメージでは、MobileFirst Operations Console でアプリケーションをグラフィカルに識別できます。これは、正方形イメージでなければならず、推奨されるサイズは 90 x 90 ピクセルです。
テンプレートを使用する場合、デフォルトのサムネール・イメージが提供されます。このデフォルト・イメージを、同じファイル名を使用して別のイメージでオーバーライドして置き換えることができます。thumbnail.png は、your-project-name/www/img フォルダーにあります。mfpdev app config コマンドを使用して、このファイルの名前またはパスを変更することができます。

スプラッシュ・イメージ

スプラッシュ・イメージは、アプリケーションの初期化中に表示されます。MobileFirst のデフォルト・テンプレートを使用する場合、スプラッシュ・イメージが提供されます。これらのデフォルトのイメージは、以下のディレクトリーに保管されています。

  • iOS: /res/screen/ios/
  • Android: /res/screen/android/
  • Windows: /res/screen/windows/

各種のディスプレイに適したもの、iOS および Windows 向けのもの、異なるバージョンのオペレーティング・システム向けのものなど、さまざまなデフォルト・スプラッシュ・イメージが含まれています。テンプレートで提供されているデフォルト・イメージを独自のスプラッシュ・イメージに置き換えることができます。また、テンプレートを使用していない場合は、イメージを追加できます。MobileFirst テンプレートを使用して Android プラットフォーム用のアプリケーションをビルドした場合、cordova-plugin-splashscreen プラグインがインストールされます。このプラグインが統合されている場合、Mobile Foundation で使用されるイメージの代わりに、Cordova が使用するスプラッシュ・イメージが表示されます。フォルダーに含まれている screen.png フォーマットのイメージは、Cordova 標準スプラッシュ・イメージです。Cordova config.xml ファイルの設定を変更することで、表示するスプラッシュ・イメージを指定できます。

MobileFirst テンプレートを使用していない場合に表示されるデフォルト・スプラッシュ・イメージは、Mobile Foundation プラグインで使用されるイメージです。デフォルト MobileFirst ソース・スプラッシュ・イメージのファイル名の形式は、splash-string.9.png です。

ユーザー独自のスプラッシュ・イメージの使用について詳しくは、『Cordova アプリケーションへのカスタム・スプラッシュ画面およびアイコンの追加』を参照してください。

アプリケーション・アイコン

アプリケーション・アイコン用のデフォルト・イメージがテンプレートで提供されます。これらのデフォルトのイメージは、以下のディレクトリーに保管されています。

  • iOS: /res/icon/ios/
  • Android: /res/icon/android/
  • Windows: /res/icon/windows/

デフォルト・イメージを独自のイメージに置き換えることができます。カスタム・アプリケーション・イメージは、置き換えようとしているデフォルトのアプリケーション・イメージのサイズと一致する必要があり、同じファイル名を使用する必要があります。さまざまなディスプレイおよびオペレーティング・システム・バージョンに適した各種デフォルト・イメージが用意されています。

ユーザー独自のスプラッシュ・イメージの使用について詳しくは、『Cordova アプリケーションへのカスタム・スプラッシュ画面およびアイコンの追加』を参照してください。

スタイル・シート

アプリケーション・ビューを定義する CSS ファイルをアプリケーション・コードに組み込むことができます。

スタイルシート・ファイルは /www/css ディレクトリーにあり、以下のプラットフォーム固有のフォルダーにコピーされます。

  • iOS: /platforms/ios/www/css
  • Android: /platforms/android/assets/www/css
  • Windows: /platforms/windows/www/css

スクリプト

アプリケーションのさまざまな機能 (対話式ユーザー・インターフェース・コンポーネント、ビジネス・ロジック、バックエンド照会の統合など) を実装する JavaScript ファイルをアプリケーションに組み込むことができます。

JavaScript ファイル index.js がテンプレートによって提供され、your-project-name/www/js フォルダーに置かれます。このファイルは、以下のプラットフォーム固有のフォルダーにコピーされます。

  • iOS: /platforms/ios/www/js
  • Android: /platforms/android/assets/www/js
  • Windows: /platforms/windows/assets/www/js

アプリケーションの Web リソースのプレビュー

Cordova アプリケーションの Web リソースは、iOS シミュレーター、Android エミュレーター、Windows エミュレーター、または物理デバイスのいずれかでプレビューできます。Mobile Foundation では、IBM MobileFirst Foundation Mobile Browser Simulator と Simple Browser レンダリングの 2 つの追加のライブ・プレビュー・オプションを使用できます。

セキュリティー制限: Web リソースはプレビュー可能ですが、そのシミュレーターですべての MobileFirst JavaScript API がサポートされているわけではありません。特に、OAuth プロトコルは完全にはサポートされていません。ただし、WLResourceRequest を使用したアダプターの呼び出しをテストすることはできます。このケースでは、次のようになります。

  • セキュリティー検査はサーバー・サイドでは実行されず、セキュリティー・チャレンジは Mobile Browser Simulator 内で実行されているクライアントに送信されません。
  • 開発環境で MobileFirst Server を使用しない場合、許可スコープのリスト中にアダプターのスコープが含まれている機密クライアントを登録してください。機密クライアントは MobileFirst Operations Console で「ランタイム/設定」メニューを使用して定義できます。機密クライアントについて詳しくは、 機密クライアント (Confidential clients) を参照してください。

注: 開発環境での MobileFirst Server には、無制限の許可スコープ (「*」) を持つ機密クライアント「test」が含まれています。デフォルトで、mfpdev app preview はこの機密クライアントを使用します。

Simple Browser

Simple Browser プレビューでは、アプリケーションの Web リソースは、「アプリケーション」として扱われることなく、デスクトップ・ブラウザーでレンダリングされ、Web リソースのみの簡単なデバッグが可能です。

Mobile Browser Simulator

Mobile Browser Simulator は、エミュレーターまたは物理デバイスにアプリケーションをインストールすることなく、デバイス・フィーチャーをシミュレートすることによって Cordova アプリケーションをテストできるようにする Web アプリケーションです。

サポートされるブラウザー:

  • Firefox バージョン 38 以降
  • Chrome 49 以降
  • Safari 9 以降

プレビュー

  1. コマンド・ライン・ウィンドウから、次のコマンドを実行します。

     mfpdev app preview
    
  2. プレビュー・オプションを選択します。

     ? Select how to preview your app: (Use arrow keys)
     ❯ browser: Simple browser rendering
     mbs: Mobile Browser Simulator
    
  3. プレビューするプラットフォームを選択します (追加されたプラットフォームのみが表示されます)。

     ❯◯ android
     ◯ ios
    

ヒント: さまざまな CLI コマンドについて詳しくは、『CLI を使用した MobileFirst 成果物の管理』チュートリアルを参照してください。

ライブ・プレビュー

ライブ・プレビューを使用して、応用コード (HTML、CSS、および JS) をリアルタイムで編集できるようになりました。
リソースに変更を加えた後、変更を保存すると、即時にブラウザーに変更が反映されます。

ライブ再ロード

物理デバイスまたはシミュレーター/エミュレーターでのプレビュー時に同様の効果を得るには、cordova-plugin-livereload プラグインを追加します。使用法については、プラグイン GitHub のページを参照してください

エミュレーターまたは物理デバイス上でのアプリケーションの実行

アプリケーションをエミュレートするには、Cordova CLI コマンド cordova emulate ios|android|windows を実行します。例えば、次のとおりです。

cordova emulate ios

開発ワークステーションに接続されている物理デバイス上でアプリケーションを実行するには、Cordova CLI コマンド cordova run ios|android|windows を実行します。例えば、次のとおりです。

cordova run ios

JavaScript コードの実装

WebView リソースの編集は、JavaScript のオートコンプリートを可能にする IDE を使用すると便利です。

Xcode、Android Studio、および Visual Studio は、Objective C、Swift、C#、および Java を編集するための全編集機能を提供しますが、JavaScript の編集を支援する方法については制限される場合があります。JavaScript の編集を容易にするには、MobileFirst Cordova プロジェクトに MobileFirst API エレメントのオートコンプリートを可能にする定義ファイルを含めます。

各 MobileFirst Cordova プラグインは、MobileFirst JavaScript ファイルごとに d.ts 構成ファイルを提供します。d.ts ファイル名は対応する JavaScript ファイル名と一致し、プラグイン・フォルダー内に配置されます。例えば、メインの MobileFirst SDK の場合、ファイルは次の場所に配置されます。[myapp]\plugins\cordova-plugin-mfp\typings\worklight.d.ts

d.ts 構成ファイルを使用すると、TypeScript をサポートしているすべての IDE (TypeScript PlaygroundVisual Studio CodeWebStormWebEssentialsEclipse など) でオートコンプリートが使用できるようになります。

WebView のリソース (HTML ファイルおよび JavaScript ファイル) は、[myapp]\www フォルダーに配置されます。プロジェクトが cordova build コマンドでビルドされる場合、または cordova prepare コマンドが実行される場合、これらのリソースは、[myapp]\platforms\ios\www フォルダー、[myapp]\platforms\android\assets\www フォルダー、または [myapp]\platforms\windows\www フォルダー内の対応する www フォルダーにコピーされます。

前述の IDE の 1 つでメイン・アプリケーション・フォルダーを開くと、コンテキストが保持されます。IDE エディターは関連する d.ts ファイルにリンクされるようになり、入力したとおりに MobileFirst API エレメントをオートコンプリートします。

Android 用の CrossWalk サポート

Android プラットフォーム用の Cordova アプリケーションでは、デフォルトの WebView を CrossWalk WebView に置換できます。
これを追加するには、以下のようにします。

  1. コマンド・ライン・ウィンドウから、次のコマンドを実行します。

    cordova plugin add cordova-plugin-crosswalk-webview
    

    このコマンドにより、アプリケーションに CrossWalk WebView が追加されます。
    表に出ないところで、MobileFirst Cordova SDK は、CrossWalk WebView を使用するように Android プロジェクト・アクティビティーを調整します。

  2. 次のコマンドを実行して、プロジェクトをビルドします。

    cordova build
    

iOS 用の WKWebView のサポート

Cordova iOS アプリケーションで使用されているデフォルトの UIWebView を、Apple の WKWebView に置換できます。
追加するには、コマンド・ライン・ウィンドウからコマンド cordova plugin add cordova-plugin-wkwebview-engine を実行します。

詳しくは、Cordova WKWebView プラグインに関する説明を参照してください。

発展的なチュートリアル

Cordova に関する詳細は以下を参照してください。

次に使用するチュートリアル

始めに Cordova アプリケーションに MobileFirst SDK を追加し、すべてのチュートリアルセクションで MobileFirst 提供のフィーチャーを検討します。

Last modified on April 11, 2017