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

概説

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 アプリケーション開発
• MobileFirst API
• MobileFirst SDK 開始フロー
• Cordova アプリケーション・セキュリティー
• Cordova アプリケーション・リソース
• アプリケーションの Web リソースのプレビュー
• JavaScript コードの実装
• Android 用の CrossWalk サポート
• iOS 用の WKWebView のサポート
• 発展的なチュートリアル
• 次に使用するチュートリアル

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) にあります。

サンプル・プラグイン:

• cordova-plugin-dialogs
• cordova-plug-inprogress-indicator
• cordova-plugin-statusbar

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

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

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

統合ブログ投稿

• MobileFirst Foundation 8.0 を使用した AngularJS アプリケーションのビルドのベスト・プラクティス
• Ionic ベースのアプリケーションでの Mobile Foundation の統合
• Ionic 2 ベースのアプリケーションでの Mobile Foundation の統合

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

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

• uglify-js
• clean-css

MobileFirst API

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

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

MobileFirst SDK 開始フロー

public class MainActivity extends CordovaActivity implements WLInitWebFrameworkListener {

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

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

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

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

[[WL sharedInstance] initializeWebFrameworkWithDelegate:self];

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 Playground、Visual Studio Code、WebStorm、WebEssentials、Eclipse) に対してオートコンプリートを提供します。

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 に置換できます。

注: CrossWalk プロジェクトは、コミュニティーおよびその保守担当者によって保守されなくなりました。 このため、CrossWalk のバグや問題が、CrossWalk WebView での MobileFirst SDK の機能に影響する可能性があります。 したがって、ご使用のアプリケーションで CrossWalk WebView を使用しないことをお勧めします。

これを追加するには、以下のようにします。

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

   cordova plugin add cordova-plugin-crosswalk-webview
   

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

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

   cordova build
   

iOS 用の WKWebView サポート

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

詳しくは、Cordova WKWebView プラグインを参照してください。

アップデート: Cordova アプリケーションで cordova-plugin-wkwebview-engine プラグインを使用すると、エラー「クロス・オリジン要求は HTTP にのみサポートされます (Cross origin requests are only supported for HTTP)」がスローされ、ダイレクト・アップデートが失敗します。これを克服するために、アプリケーションには cordova-plugin-wkwebviewxhrfix と呼ばれる追加のプラグインが必要です。障害はここから検索できます。

参考文献

Cordova についてさらに詳しく学習するには、以下を参照してください。

• Cordova 概要
• Cordova ベスト・プラクティス、テスト、デバッグ、考慮事項、および最新情報の入手
• Cordova アプリケーション開発の開始

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

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