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 がサポートされるようにします。
ジャンプ先
- 前提条件
- MobileFirst Web SDK の追加
- MobileFirst Web SDK の初期化
- Web アプリケーションの登録
- MobileFirstWeb SDK の更新
- 同一生成元ポリシー
- セキュア・オリジン・ポリシー
- 次に使用するチュートリアル
前提条件
-
Web 開発環境をセットアップするための、サポートされる Web ブラウザーの前提条件を参照してください。
-
NPM コマンドを実行するには、Node.js をインストールする必要があります。
MobileFirst Web SDK の追加
SDK を新規または既存の Web アプリケーションに追加するには、まず最初に SDK をご使用のワークステーションにダウンロードした後、SDK を Web アプリケーションに追加します。
SDK のダウンロード
- コマンド・ライン・ウィンドウで、Web アプリケーションのルート・フォルダーに移動します。
- 次のコマンドを実行します。
npm install ibm-mfp-web-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.
sessionMode : true //This is an optional paramter. Setting this to true ensures that MFP related data is stored in the session rather than in the local storage. If this option is set to false or not set at all, default is local storage.
};
WL.Client.init(wlInitOptions).then (
function() {
// Application logic.
});
- mfpContextRoot: MobileFirst Server が使用するコンテキスト・ルート。
- applicationId: アプリケーションの登録時に定義したアプリケーション・パッケージ名。
Web アプリケーションの登録
アプリケーションの登録は、MobileFirst Operations Console から、または MobileFirst CLI から行えます。
MobileFirst Operations Console から
- 好みのブラウザーを開き、
http://localhost:9080/mfpconsole/という URL を入力することで MobileFirst Operations Console をロードします。 - 「アプリケーション」の横の「新規」ボタンをクリックして、新規アプリケーションを作成します。
- プラットフォームとして「Web」を選択し、任意の名前と ID を指定します。
- 「アプリケーションの登録」をクリックします。
MobileFirst CLI から
コマンド・ライン・ウィンドウで、Web アプリケーションのルート・フォルダーに移動し、コマンド mfpdev app register を実行します。
MobileFirst Web SDK の更新
SDK のリリースは、SDK の NPM リポジトリーで調べることができます。
MobileFirst Web SDK を最新リリースで更新するには、次のようにします。
- 当該 Web アプリケーションのルート・フォルダーに移動します。
- 次のコマンドを実行します。
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 が組み込まれたので、以下の作業を行うことができます。
- Mobile Foundation SDK の使用に関するチュートリアルを検討する
- アダプター開発に関するチュートリアルを検討する
- 認証とセキュリティーに関するチュートリアルを検討する
- すべてのチュートリアルを検討する
Inclusive terminology note: The Mobile First Platform team is making changes to support the IBM® initiative to replace racially biased and other discriminatory language in our code and content with more inclusive language. While IBM values the use of inclusive language, terms that are outside of IBM's direct influence are sometimes required for the sake of maintaining user understanding. As other industry leaders join IBM in embracing the use of inclusive language, IBM will continue to update the documentation to reflect those changes.