Ionic アプリケーションへの MobileFirst Foundation SDK の追加

improve this page | report issue

概説

このチュートリアルでは、Ionic CLI を使用して作成された新規または既存の Ionic アプリケーションに MobileFirst SDK を追加する方法について学習します。また、アプリケーションを認識するように MobileFirst Server を構成する方法と、プロジェクト内で変更する MobileFirst 構成ファイルに関する情報を見つける方法についても学習します。

MobileFirst Ionic SDK は、Cordova プラグインとともに Typescript ラッパーのセットとして提供され、NPM に登録されます。

入手可能なプラグインは次のとおりです。

  • cordova-plugin-mfp - コアの SDKプラグイン
  • cordova-plugin-mfp-push - プッシュ通知サポートを提供します
  • cordova-plugin-mfp-jsonstore - JSONStore サポートを提供します

サポート・レベル

MobileFirst プラグインでサポートされる Ionic Cordova プラットフォームのバージョンは次のとおりです。

  • cordova-ios: >= 4.1.1 と < 5.0
  • cordova-android: >= 6.1.2 と < 7.0
  • cordova-windows: >= 4.3.2 と < 6.0

ジャンプ先:

Ionic SDK コンポーネント

cordova-plugin-mfp

cordova-plugin-mfp プラグインは、Cordova 用のコア MobileFirst プラグインであり、必須です。他の MobileFirst プラグインのいずれかをインストールすると、cordova-plugin-mfp プラグインも自動的にインストールされます (まだインストールされていない場合)。

次の Cordova プラグインは、cordova-plugin-mfp の依存関係としてインストールされます。

  • cordova-plugin-device
  • cordova-plugin-dialogs
  • cordova-plugin-globalization
  • cordova-plugin-okhttp

cordova-plugin-mfp-jsonstore

cordova-plugin-mfp-jsonstore プラグインを使用すると、アプリケーションで JSONstore を使用できるようになります。JSONstore について詳しくは、JSONStore に関するチュートリアルを参照してください。

cordova-plugin-mfp-push

cordova-plugin-mfp-push プラグインは、Android アプリケーションに対し MobileFirst Server からのプッシュ通知を使用するために必要な許可を提供します。プッシュ通知を使用するための追加セットアップが必要です。 プッシュ通知について詳しくは、プッシュ通知に関するチュートリアルを参照してください。

cordova-plugin-mfp-fips

cordova-plugin-mfp-fips プラグインは、Android プラットフォームの FIPS 140-2 をサポートします。詳しくは、FIPS 140-2 サポートを参照してください。

cordova-plugin-mfp-encrypt-utils

cordova-plugin-mfp-encrypt-utils プラグインは、iOS プラットフォームでの Cordova アプリケーションの暗号化のための iOS OpenSSL フレームワークを提供します。詳しくは、Cordova iOS での OpenSSL の有効化を参照してください。

前提条件:

  • Ionic CLI および MobileFirst CLI が開発者のワークステーションにインストールされている。
  • MobileFirst Server のローカル・インスタンスまたはリモート・インスタンスが稼働している。
  • MobileFirst 開発環境のセットアップ、および Cordova 開発環境のセットアップの両チュートリアルを読む。
  • cordova-windows の場合、マシンにインストールされている Visual Studio と .NET のバージョンと互換性のある Visual C++ のバージョンがインストールされている必要があります。
  • ユニバーサル Windows アプリ向けの Visual Studio Tools の場合、作成される cordova-windows アプリケーションに、必要なサポート・ライブラリーがすべて揃っていることを確認する。

Mobile Foundation Ionic SDK の追加

以下の手順に従って、新規または既存の Ionic プロジェクトに Mobile Foundation Ionic SDK を追加し、それを MobileFirst Server に登録します。

開始する前に、MobileFirst Server が稼働していることを確認します。
ローカルにインストールされているサーバーを使用する場合は、コマンド・ライン・ウィンドウで、サーバーのフォルダーに移動し、コマンド ./run.sh を実行します。

SDK の追加

MobileFirst Ionic アプリケーション・テンプレートを使用してプロジェクトを作成することを検討してください。テンプレートを使用すると、MobileFirst 固有の必須プラグイン・エントリーが Ionic プロジェクトの config.xml ファイルに追加され、MobileFirst アプリケーション開発用に調整済みですぐに使用可能な、MobileFirst 固有の index.js ファイルが提供されます。

新規アプリケーション

  1. Ionic プロジェクトを作成します。ionic start projectName starter-template
    例えば、次のとおりです。

    ionic start Hello blank
    
    • 「Hello」は、フォルダー名であり、アプリケーションの名前です。
    • 「blank」は、スターター・テンプレートの名前です。

    テンプレートとして用意された index.js を使用することで、アプリケーションのマルチリンガル・トランスレーションや初期化オプションといった、MobileFirst の追加機能を使用できます (詳しくはユーザー向け資料を参照してください)。

  2. cd hello コマンドで、ディレクトリーを Ionic プロジェクトのルートに変更します。

  3. Ionic CLI コマンド ionic cordova plugin add cordova-plugin-name を使用して、MobileFirst プラグインを追加します。 以下に例を示します。

    ionic cordova plugin add cordova-plugin-mfp
    

    上記のコマンドは、MobileFirst コア SDK プラグインを Ionic プロジェクトに追加します。

  4. Ionic CLI コマンド ionic cordova platform add ios|android|windows|browser を使用して、サポートされる 1 つ以上のプラットフォームを Cordova プロジェクトに追加します。例えば、次のとおりです。

    cordova platform add ios
    
  5. ionic cordova prepare コマンドを実行して、アプリケーション・リソースを準備します。

    ionic cordova prepare
    

アプリケーションの終了

既存の Ionic プロジェクトのルートに移動し、MobileFirst コア Ionic Cordova プラグインを追加します。

   ionic cordova plugin add cordova-plugin-mfp

MobileFirst API メソッドは、MobileFirst クライアント SDK がロードされた後で使用可能になります。 その後、mfjsloaded イベントが呼び出されます。

アプリケーションの登録

  1. コマンド・ライン・ウィンドウを開き、Ionic プロジェクトのルートに移動します。

  2. 次のコマンドで、MobileFirst Server にアプリケーションを登録します。

    mfpdev app register
    

mfpdev app register CLI コマンドは、まず、MobileFirst Server に接続してアプリケーションを登録し、次に、Ionic プロジェクトのルートにある config.xml ファイルを、MobileFirst Server を識別するメタデータで更新します。

各プラットフォームはアプリケーションとして MobileFirst Server に登録されます。

ヒント: 次のように、MobileFirst Operations Console からアプリケーションを登録することもできます。

  1. MobileFirst Operations Console をロードします。
  2. 「アプリケーション」の横の「新規」ボタンをクリックして、新規アプリケーションを登録し、画面に表示される指示に従います。

SDK の使用

MobileFirst API メソッドは、MobileFirst クライアント SDK がロードされた後で使用可能になります。 その後、mfjsloaded イベントが呼び出されます。
イベントが呼び出された後に初めて、さまざまな MobileFirst API メソッドを呼び出してください。

MobileFirst Ionic SDK の更新

MobileFirst Ionic Cordova SDK を最新リリースで更新するには、ionic cordova plugin remove cordova-plugin-mfp コマンドを実行して cordova-plugin-mfp プラグインを削除してから、ionic cordova plugin add cordova-plugin-mfp コマンドを実行してこのプラグインを再度追加します。

SDK のリリースは、SDK の NPM リポジトリーで調べることができます。

生成される MobileFirst Ionic SDK 成果物

config.xml

Ionic 構成ファイルは、アプリケーション・メタデータを含む必須の XML ファイルであり、アプリケーションのルート・ディレクトリーに保管されます。
MobileFirst Ionic SDK がプロジェクトに追加されると、Ionic が生成した config.xml ファイルは、名前空間 mfp: で識別された新規エレメントのセットを受け取ります。追加されるエレメントには、MobileFirst の各種フィーチャーおよび MobileFirst Server に関連した情報が含まれています。

config.xml ファイルに追加される MobileFirst 設定の例

<?xml version='1.0'encoding='utf-8'?>
<widget id="..." xmlns:mfp="http://www.ibm.com/mobilefirst/cordova-plugin-mfp">
    <mfp:android>
        <mfp:sdkChecksum>3563350808</mfp:sdkChecksum>
        <mfp:appChecksum>0</mfp:appChecksum>
        <mfp:security>
            <mfp:testWebResourcesChecksum enabled="false" ignoreFileExtensions="png, jpg, jpeg, gif, mp4, mp3" />
        </mfp:security>
    </mfp:android>
    <mfp:windows>
        <mfp:sdkChecksum>3563350808</mfp:sdkChecksum>
       <mfp:windows10>
          <mfp:sdkChecksum>...</mfp:sdkChecksum>
          <mfp:security>
             <mfp:testWebResourcesChecksum/>
          </mfp:security>
    </mfp:windows>
    <mfp:platformVersion>8.0.0.00-20151214-1255</mfp:platformVersion>
    <mfp:clientCustomInit enabled="false" />
    <mfp:server runtime="mfp" url="http://10.0.0.1:9080" />
    <mfp:directUpdateAuthenticityPublicKey>the-key</mfp:directUpdateAuthenticityPublicKey>
    <mfp:languagePreferences>en</mfp:languagePreferences>
</widget>
エレメント 説明 構成
widget config.xml 文書のルート・エレメント。 このエレメントには 2 つの必須属性が含まれています。
  • id: これは Cordova プロジェクト作成時に指定されたアプリケーション・パッケージ名です。 アプリケーションが MobileFirst Server に登録された後にこの値が手動で変更された場合、アプリケーションの再登録が必要です。
  • xmlns:mfp: MobileFirst プラグインの XML 名前空間。
mfp:platformVersion 必須。 アプリケーションが開発された製品バージョン。 デフォルトで設定されます。 変更してはなりません。
mfp:directUpdateAuthenticityPublicKey オプション。 ダイレクト・アップデート認証性機能を有効にした場合、デプロイメント時にダイレクト・アップデート・パッケージがデジタル署名されます。 クライアントがパッケージをダウンロードした後、パッケージの認証性を検証するためにセキュリティー検査が実行されます。 このストリング値は、ダイレクト・アップデート .zip ファイルの認証に使用される公開鍵です。 mfpdev app config direct_update_authenticity_public_key key-value コマンドで設定されます。
mfp:languagePreferences オプション。 システム・メッセージの表示に使用されるロケールのコンマ区切りリストを含みます。 mfpdev app config language_preferences key-value コマンドで設定されます。
mfp:clientCustomInit WL.Client.init メソッドがどのように呼び出されるのかを制御します。 デフォルトでは、この値は false に設定され、WL.Client.init メソッドは MobileFirst プラグインが初期化された後に自動的に呼び出されます。 WL.Client.init が呼び出されるタイミングをクライアント・コードで明示的に制御するには、この値を true に設定します。 手動で編集されます。 enabled 属性に設定できる値は true または false です。
mfp:server クライアント・アプリケーションが MobileFirst Server との通信に使用する、デフォルトのリモート・サーバー接続情報。
  • url: url 値は、クライアントがサーバーに接続するためにデフォルトで使用する、MobileFirst Server プロトコル、ホスト、およびポートの値を指定します。
  • runtime: runtime 値は、アプリケーションが登録された MobileFirst Server ランタイムを指定します。 MobileFirst ランタイムについて詳しくは、MobileFirst Server 概要を参照してください。
  • サーバー url 値は mfpdev app config server コマンドで設定されます。
  • サーバー runtime 値は mfpdev app config runtime コマンドで設定されます。
mfp:ios このエレメントは、iOS プラットフォーム用のすべての MobileFirst 関連のクライアント・アプリケーション構成を含みます。
  • mfp:appChecksum
  • mfp:sdkChecksum
  • mfp:security
mfp:android このエレメントは、Android プラットフォーム用のすべての MobileFirst 関連のクライアント・アプリケーション構成を含みます。
  • mfp:appChecksum
  • mfp:sdkChecksum
  • mfp:security
mfp:windows このエレメントは、Windows プラットフォーム用のすべての MobileFirst 関連のクライアント・アプリケーション構成を含みます。
  • mfp:appChecksum
  • mfp:windowsphone8
  • mfp:windows8
  • mfp:windows10
mfp:windows8 このエレメントは、Windows 8.1 プラットフォーム用のすべての MobileFirst 関連のクライアント・アプリケーション構成を含みます。
  • mfp:sdkChecksum
  • mfp:security
mfp:windows10 このエレメントは、Windows 10 プラットフォーム用のすべての MobileFirst 関連のクライアント・アプリケーション構成を含みます。
  • mfp:sdkChecksum
  • mfp:security
mfp:windowsphone8 このエレメントは、Windows Phone 8.1 プラットフォーム用のすべての MobileFirst 関連のクライアント・アプリケーション構成を含みます。
  • mfp:sdkChecksum
  • mfp:security
mfp:appChecksum この値は、アプリケーション Web リソースのチェックサムです。 mfpdev app webupdate が実行されるときに計算されます。 ユーザーによる構成はできません。 チェックサム値は mfpdev app webupdate コマンドが実行されると更新されます。 mfpdev app webupdate コマンドについて詳しくは、コマンド・ウィンドウで mfpdev help app webupdate と入力してください。
mfp:sdkChecksum この値は、MobileFirst Operations Console SDK チェックサムであり、固有の MobileFirst SDK レベルを識別するために使用されます。 ユーザーによる構成はできません。 この値はデフォルトで設定されます。
mfp:security このエレメントには、MobileFirst セキュリティーについての、クライアント・アプリケーションのプラットフォーム固有構成が含まれます。 次を含む
  • mfp:testWebResourcesChecksum
mfp:testWebResourcesChecksum アプリケーションがモバイル・デバイス上で実行を開始するたびにその Web リソースの保全性を検証するかどうかを制御します。 属性:
  • enabled: 有効な値は true および false です。 この属性が true に設定されている場合、アプリケーションは Web リソースのチェックサムを計算し、アプリケーションが最初に実行されたときに保存しておいた値とこのチェックサムを比較します。
  • ignoreFileExtensions: チェックサム計算には、Web リソースのサイズによって、数秒かかる場合があります。 この時間を短縮するには、この計算において無視するファイル拡張子のリストを指定します。 この値は、enabled 属性が false の場合は無視されます。
  • enabled enabled 属性は mfpdev app config android_security_test_web_resources_checksum key-value コマンドで設定されます。
  • ignoreFileExtensions 属性は mfpdev app config android_security_ignore_file_extensions value コマンドで設定されます。

config.xml ファイルの MobileFirst 設定の編集

MobileFirst CLI を使用して次のコマンドを実行することで、上記の設定を編集できます。

mfpdev app config

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

これで MobileFirst Ionic SDK が組み込まれたので、以下の作業を行うことができます。

Last modified on October 05, 2018