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

概説

このチュートリアルでは、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 コンポーネント
• MobileFirst Ionic SDK の追加
• MobileFirst Ionic SDK の更新
• 生成される MobileFirst Ionic SDK 成果物
• 次に使用するチュートリアル

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 server add コマンドを使用して、そのサーバーを追加します。

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>

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

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

mfpdev app config

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

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

• Mobile Foundation SDK の使用に関するチュートリアルを検討する
• アダプター開発に関するチュートリアルを検討する
• 認証とセキュリティーに関するチュートリアルを検討する
• 通知に関するチュートリアルを検討する
• すべてのチュートリアルを検討する