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

improve this page | report issue

概説

任意の開発環境およびツールを使用して、モバイルまたはデスクトップの MobileFirst Web アプリケーションを開発することができます。
このチュートリアルでは、MobileFirst Web SDK を Web アプリケーションに追加する方法と、その Web アプリケーションを MobileFirst Server に登録する方法について学習します。

MobileFirst Web SDK は、JavaScript ファイルのセットとして提供されており、 NPM で入手できます
この SDK には、次のファイルが含まれています。

  • ibmmfpf.js: SDK のコアです。
  • ibmmfpfanalytics.js: MobileFirst Analytics がサポートされるようにします。

ジャンプ先

前提条件

  • Web 開発環境をセットアップするための、サポートされる Web ブラウザーの前提条件を参照してください。

  • NPM コマンドを実行するには、Node.js をインストールする必要があります。

MobileFirst Web SDK の追加

SDK を新規または既存の Web アプリケーションに追加するには、まず最初に SDK をご使用のワークステーションにダウンロードした後、SDK を Web アプリケーションに追加します。

SDK のダウンロード

  1. コマンド・ライン・ウィンドウで、Web アプリケーションのルート・フォルダーに移動します。
  2. 次のコマンドを実行します。npm install ibm-mfp-web-sdk

このコマンドにより、次のようなディレクトリー構造が作成されます。

SDK フォルダーの内容

SDK の追加

Mobile Foundation Web SDK を追加するには、Web アプリケーション内で標準の方法で SDK を参照します。
また、この SDK は AMD もサポートしているので、RequireJS などのモジュール・ローダーを使用して SDK をロードすることができます。

標準

HEAD エレメント内で ibmmfpf.js ファイルを参照します。

<head>
    ...
    ...
    <script type="text/javascript" src="node_modules/ibm-mfp-web-sdk/ibmmfpf.js"></script>
</head>

RequireJS の使用

HTML

<script type="text/javascript" src="node_modules/requirejs/require.js" data-main="index"></script>

JavaScript

require.config({
	'paths': {
		'mfp': 'node_modules/ibm-mfp-web-sdk/ibmmfpf'
	}
});

require(['mfp'], function(WL) {
    // application logic.
});

重要: Analytics サポートを追加する場合は、ibmmfpfanalytics.js ファイル参照を、ibmmfpf.js ファイル参照の前に配置します。

MobileFirst Web SDK の初期化

コンテキスト・ルートアプリケーション ID の値を、Web アプリケーションのメインの JavaScript ファイル内に指定することによって、Mobile Foundation Web SDK を初期化します。

var wlInitOptions = {
mfpContextRoot : '/mfp', // "mfp" is the default context root in the Mobile Foundation
    applicationId : 'com.sample.mywebapp' // Replace with your own value.
};

WL.Client.init(wlInitOptions).then (
    function() {
        // Application logic.
});
  • mfpContextRoot: MobileFirst Server が使用するコンテキスト・ルート。
  • applicationId: アプリケーションの登録時に定義したアプリケーション・パッケージ名。

Web アプリケーションの登録

アプリケーションの登録は、MobileFirst Operations Console から、または MobileFirst CLI から行えます。

MobileFirst Operations Console から

  1. 好みのブラウザーを開き、http://localhost:9080/mfpconsole/ という URL を入力することで MobileFirst Operations Console をロードします。
  2. 「アプリケーション」の横の「新規」ボタンをクリックして、新規アプリケーションを作成します。
  3. プラットフォームとして「Web」を選択し、任意の名前と ID を指定します。
  4. 「アプリケーションの登録」をクリックします。

Web プラットフォームの追加

MobileFirst CLI から

コマンド・ライン・ウィンドウで、Web アプリケーションのルート・フォルダーに移動し、コマンド mfpdev app register を実行します。

MobileFirst Web SDK の更新

SDK のリリースは、SDK の NPM リポジトリーで調べることができます。
MobileFirst Web SDK を最新リリースで更新するには、次のようにします。

  1. 当該 Web アプリケーションのルート・フォルダーに移動します。
  2. 次のコマンドを実行します。npm update ibm-mfp-web-sdk

同一生成元ポリシー

MobileFirst Server がインストールされているサーバー・マシンとは異なるサーバー・マシンで Web リソースがホストされていると、同一生成元ポリシー違反がトリガーされます。「同一生成元ポリシー」セキュリティー・モデルは、未検証のソースによる潜在的なセキュリティー脅威から保護することを目的としています。このポリシーに従って、ブラウザーは、Web リソース (スクリプトなど) が、同じ生成元 (URI スキーム、ホスト名、およびポート番号の組み合わせとして定義される) から生じているリソースのみと対話するようにします。 同一生成元ポリシーについて詳しくは、The Web Origin Concept の仕様、特に 3. Principles of the Same-Origin Policy を参照してください。

MobileFirst Web SDK を使用した Web アプリケーションは、サポートするトポロジー内で処理される必要があります。例えば、同じ単一の生成元を維持しながら、要求を適切なサーバーに内部的にリダイレクトするには、リバース・プロキシーを使用します。

代替方法

次のいずれかの方法を使用することで、ポリシー要件を満たせます。

  • 例えば、IBM MobileFirst Foundation Developer Kit で使用されているのと同じ WebSphere Application Server の Liberty プロファイル・アプリケーション・サーバーから、Web アプリケーション・リソースを提供する。
  • リバース・プロキシーとして Node.js を使用して、アプリケーション要求を MobileFirst Server にリダイレクトする。

詳しくは、Web 開発環境のセットアップ・チュートリアルを参照してください。

セキュア・オリジン・ポリシー

開発中に Chrome を使用すると、localhost ではないホストと HTTP の両方を使用するアプリケーションのロードを、この ブラウザーが許可しない場合があります。原因は、このブラウザーに実装され、デフォルトで使用される、セキュア・オリジン・ポリシーです。

これに対処するため、次のフラグを付けて Chrome ブラウザーを開始することができます。

--unsafely-treat-insecure-origin-as-secure="http://replace-with-ip-address-or-host:port-number" --user-data-dir=/test-to-new-user-profile/myprofile
  • 「test-to-new-user-profile/myprofile」は、フラグが機能するよう、新しい Chrome ユーザー・プロファイルとしての役目を果たすフォルダーの場所に置き換えます。

セキュア・オリジンについて詳しくは、この Chormium 開発者向け資料をお読みください。

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

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

Last modified on November 23, 2017