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

既存または新規の Web アプリケーションに MobileFirst Web SDK を追加し、IBM MobileFirst™ Foundation 機能をアプリケーションに追加します。

始める前に

MobileFirst Web SDK のコピーを入手し、 Web アプリケーションのルート・ディレクトリーに、ibm-mfp-web-sdk SDK ディレクトリー、またはこれを含んでいる npm_modules ディレクトリー (SDK を npm からダウンロードした場合) を保存します。 Web SDK のコピーの取得については、MobileFirst Web SDK の入手を参照してください。

このタスクについて

MobileFirst JavaScript Web SDK モジュールでエクスポートされた API を使用するには、まず、適切なモジュールを Web アプリケーションにロードする必要があります。

ibmmfpf.js - JavaScript クライアント・サイド API をエクスポートするコア Web SDK モジュール。 MobileFirst Web アプリケーションを開発するには、このモジュールをロードする必要があります。このモジュールにより、例えば、アプリケーションに MobileFirst セキュリティー機能を追加できるようになります。
ibmmfpfanalytics.js (lib/analytics ディレクトリー内で提供) - Web 分析モジュール。このモジュールは、MobileFirst JavaScript Web 分析クライアント・サイド API をエクスポートします。このモジュールを使用して、Web アプリケーションに IBM MobileFirst Analytics 機能を追加します。 MobileFirst Analytics については、 Analytics および Logger を参照してください。

注: ibmmfpfanalytics.js は ibmmfpf.js に依存し、(使用される場合には) 最初にロードされなければなりません。

MobileFirst Web SDK は、JavaScript モジュールのロードに関して、以下の共通標準をサポートしています。

非同期モジュール定義 (AMD) の標準では、JavaScript モジュールが JavaScript コードから非同期でロードされます。 RequireJS などのモジュール・ローダーを使用して、非同期モジュールとその依存関係を定義します。その後、グローバル名前空間には影響せずに、JavaScript コード内でモジュールが必要な場所からモジュールをロードします。この方法は、特にブラウザー環境に適しており、クライアント Web アプリケーションの開発でよく使用されます。
サンプル MobileFirst スターター Web アプリケーション(MFPStarterWeb)、および Developer Center から入手できる Web アプリケーション・サンプルは、RequireJS を使用して MobileFirst Web SDK のモジュールを非同期的にロードする方法を示しています。スターター・サンプルと、そのサンプルのコピーの入手方法について詳しくは、サンプル MobileFirst アプリケーションの使用開始を参照してください。
CommonJs モジュールの標準では、モジュールをグローバル名前空間にインポートすることによって、JavaScript モジュールが同期的にロードされます。この標準を使用する Web アプリケーションでは、メイン HTML ファイルの <head> エレメントからモジュールをインポートします。この方法は、サーバー環境に適しており、Node.js サーバーの開発でよく使用されます。

上記のロード方法に対応した以下のいずれかの手順を選択して、Web SDK モジュールをロードします。

RequiredJS を使用した非同期ロード
HTML インポートを使用した同期ロード

注: 手順の例では、SDK ディレクトリーがアプリケーション・ディレクトリーのルートにあることを想定しています。別の場所に保管する場合は、サンプル内のスクリプト・パスを調整してください。例えば、npm で SDK をダウンロードし、SDK ディレクトリーが入っている node_modules ディレクトリーをアプリケーションのルート・ディレクトリーに保存した場合は、各 SDK モジュール名の前に node_modules/ を追加します。

手順

RequiredJS を使用した非同期ロード
1. RequireJS JavaScript モジュール・ローダーを入手します。詳細な手順については、 RequireJS の資料を参照してください。
  注: 以下の手順のコード例では、require.js とアプリケーションのメイン HTML および JavaScript ファイルがすべて、RequireJs の baseUrl として使用されるアプリケーション・ルート・ディレクトリーに保管されていることを想定しています。別の場所にスクリプトを保存することも可能で、その場合には例を調整してください。詳しくは、 RequireJS の資料を参照してください。
2. アプリケーションのメイン HTML ファイル (通常、index.html) の <head> タグに <script> タグを追加して、 RequireJS をロードします。 <script> タグの type 属性には text/javascript、src 属性には require.js、data-main 属性にはアプリケーションのメイン JavaScript ファイルへのパス (ファイル拡張子 .js は付けない) をそれぞれ設定して、require.js のロード後に、指定されたスクリプトをロードするように RequireJs に指示します。 require.js を追加するための代替方法を含め、詳しくは、RequireJS の資料を参照してください。以下は、JavaScript ファイル index.js を使用するアプリケーションの例です。このファイルは、reuiqre.js スクリプトと一緒にアプリケーションのルート・ディレクトリーに保管されています。
```
<html>
    <head>
        <script type="text/javascript" src="require.js" data-main="index"></script>
    </head>
</html>
```
3. RequireJS で作成された require オブジェクトのメソッドを使用して、アプリケーションの JavaScript コードからアプリケーション・スクリプトをロードします。
  RequireJS でスクリプトをロードする方法は、いくつかあります。このステップでは、require.config メソッドを使用して SDK JavaScript モジュールのモジュール ID を構成する方法を示しています。その後、RequireJS の require 関数を使用して、スクリプト・パスを指定する代わりに、構成した ID を使用してモジュール・スクリプトをロードします。詳細と代替方法については、RequireJS の資料を参照してください。
  1. アプリケーションのメイン JavaScript ファイル (例えば、index.js など) で、RequireJs で作成された require オブジェクトの config メソッドを使用して、ロードする SDK モジュールを構成します。この構成では、スクリプト・モジュールのパスを指定し、各モジュールに ID を割り当てます。この ID が後でスクリプトのロードに使用されます。以下の例では、モジュール ID mfp を ibmmfpf.js モジュールに、モジュール ID ibmmfpfanalytics を ibmmfpfanalytics.js モジュールにそれぞれ割り当てています。
```
require.config({
    'paths': {
        'ibmmfpfanalytics': 'ibm-mfp-web-sdk/lib/analytics/ibmmfpfanalytics',
        'mfp': 'ibm-mfp-web-sdk/ibmmfpf'
}
});
```
    注:
    - ibmmfpfanalytics.js を使用する場合は、構成パスで ibmmfpf.js の前にそれを追加してください。
    - 構成するスクリプト・モジュールの名前は、拡張子 .js を付けずに指定します。
  2. RequireJS の require 関数を使用して、構成した SDK モジュールをアプリケーションの JavaScript コード内からロードします。モジュールは、必要なときに非同期でローカル名前空間にロードされます。以下の例では、前のステップで構成したモジュール ID mfp と ibmmfpfanalytics を使用して、 SDK モジュール ibmmfpf.js と ibmmfpfanalytics.js をロードします。
```
require(['ibmmfpfanalytics','mfp'], function(wlanalytics, WL)
```
    注: ibmmfpfanalytics.js を使用する場合は、ibmmfpf.js の前にそれをロードしてください。
HTML インポートを使用した同期ロード 各モジュールの <script> タグを追加して、アプリケーションのメイン HTML ファイル (通常、index.html) の <head> タグから必要なモジュールをロード (インポート) します。 script エレメントの type 属性に text/javascript を、その src 属性にターゲット・モジュールの名前をそれぞれ設定します。以下の例では、Web SDK のコア・モジュールと分析モジュールの両方をロードします。
```
<html>
    <head>
        ...
        <script src="ibm-mfp-web-sdk/lib/analytics/ibmmfpfanalytics.js"></script>
        <script src="ibm-mfp-web-sdk/ibmmfpf.js"></script>
    </head>
</html>
```
注: ibmmfpfanalytics.js を使用する場合は、ibmmfpf.js の前にそれをロードしてください。

次のタスク

コア Web API の初期化メソッドを使用して SDK を初期化してから、Web SDK API を使用してアプリケーションを開発します。詳しくは、MobileFirst SDK の初期化を参照してください。