目次


WebSphere Portal と IBM Worklight による卓越したモバイル Web エクスペリエンスの提供

(パート 2) WebSphere Portal ページにおける複数デバイス・サポートの統合

Comments

コンテンツシリーズ

このコンテンツは全#シリーズのパート#です: WebSphere Portal と IBM Worklight による卓越したモバイル Web エクスペリエンスの提供

このシリーズの続きに乞うご期待。

このコンテンツはシリーズの一部分です:WebSphere Portal と IBM Worklight による卓越したモバイル Web エクスペリエンスの提供

このシリーズの続きに乞うご期待。

はじめに

IBM Worklight プラットフォームを使用すると、iOS、Android、BlackBerry などのさまざまなデバイス環境に向けてアプリケーションを作成できます。Worklight が使用する、付属の Apache Cordova のようなテクノロジーを利用すると、JavaScript を介して Web マークアップからネイティブ機能を呼び出すことができます。

この記事では、IBM WebSphere Portal と統合するハイブリッド iOS アプリケーションの作成プロセスを解説します。ポータルにアクセスしたデバイスを特定するプロセスと、iOS または Android の適切なリソースを組み込んでそのアプリケーション内でネイティブ機能をサポート可能にするプロセスについて説明します。

前提条件

この記事は、このシリーズのパート 1 で提供した情報を補足するものです。パート 1 のサンプル・ソリューションを完了してから、ここで概説する手順を進めてください。

パート 1 で定めた前提条件に加えて、ここで述べるサンプル・ハイブリッド・アプリケーションを構築するためには、Apple Xcode をインストールしておく必要があります。この記事は、Apple iPhone をサポートする Worklight ハイブリッド・アプリケーションに基づいて作成されています。そのサンプルは Apple Xcode バージョン 4.4.1 でテストされており、Apple OS X でのみ使用可能です。

Worklight で iOS 環境を作成する

  1. Worklight で iPhone の環境を新規に作成するには、プロジェクト・エクスプローラーを開いて apps フォルダーで WLPortalApp を右クリックし、「新規」 > 「Worklight 環境」 を選択します (図 1)。
    図 1. Worklight 環境の新規作成
  2. 「新規 Worklight 環境」パネルが表示されます (図 2)。今回のサンプルでは「iPhone」 を選択します。iPad のような他の iOS デバイスに対する環境の作成を必要とする場合は、このパネルでその追加オプションを指定します。「終了」をクリックします。
    図 2. Eclipse で表示された Worklight 環境
  3. Worklight Studio は、iPhone デバイスのネイティブ・アプリケーションでプロジェクトを更新します (図 3)。
    図 3. プロジェクトへの iPhone ネイティブ・アプリケーションの追加
  4. 次に、iOS ネイティブ・アプリケーションのメイン・クラス・ファイルを開きます (図 4)。このファイルは \WLPortal\apps\WLPortalApp\iPhone\native\classes\WLPortalApp.m にあります。これは変更されるファイルであり、パート 1 の WLPortalApp.java ファイルと似ています。すべての iOS アプリケーションは Objective-C で作成されています (参考資料を参照)。
    図 4. iOS ネイティブ・アプリケーションのメイン・クラス・ファイル
  5. iOS アプリケーション内にポータルを表示するには、ポータル URL をロードするようにランチャー・メソッドを変更する必要があります。変更する Worklight バージョン 5.0.5 のメソッドは didFinishLaunchingWithOptions であり (リスト 1a)、バージョン 5.0.6 のメソッドは didFinishWLNativeInit です (リスト 1b)。基本的に、このメソッドはデフォルトで作成される内部 HTML ファイルを起動します。
    リスト 1a. Worklight バージョン 5.0.5 で使用される WLPortalApp.m の didFinishLaunchingWithOptions メソッド
    /**
     * This is main kick off after the app inits, the views and Settings are setup here.
     */
    - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:
    (NSDictionary *)launchOptions 
    {
        BOOL ret = [super application:application didFinishLaunchingWithOptions:
    launchOptions];
       
        /*
         * If you need to do any extra app-specific initialization, you can do it here.
         **/
        
        return ret;
        }
    リスト 1b. Worklight バージョン 5.0.6 で使用される WLPortalApp.m のdidFinishWLNativeInit メソッド
    /**
     * This is main kick off after the app inits, the views and Settings are setup here. 
     */
    -(void) didFinishWLNativeInit:(NSNotification *)notification {
        /*
         * If you need to do any extra app-specific initialization, you can do it here.
         * Note: At this point webview is available.
         **/
    }
  6. リスト 1 のコード・ブロックを リスト 2a および 2b のコードに置き換えます。この新しいコードは、ポータルに向けられたアプリケーションを Web ビューで自動的に起動します。
    リスト 2a. アプリケーションを Portal URL に向ける、Worklight バージョン 5.0.5 の didFinishLaunchingWithOptions メソッド
    -(BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:
    (NSDictionary *)launchOptions
    {
        BOOL superResult = [super application:application didFinishLaunchingWithOptions:
    launchOptions];
        NSURL* remoteURL = [NSURL URLWithString:@"http://9.99.999.999:10039/wps/portal”];
        NSURLRequest* request = [NSURLRequest requestWithURL:remoteURL];
        [self.viewController.webView loadRequest:request];
        return superResult;
        }
    リスト 2b. アプリケーションを Portal URL に向ける、Worklight バージョン 5.0.6 のdidFinishWLNativeInit メソッド
    /**
     * This is main kick off after the app inits, the views and Settings are setup here. 
     */
    -(void) didFinishWLNativeInit:(NSNotification *)notification {
        NSURL* remoteURL = [NSURL URLWithString:@"http://9.99.999.999:10039/wps/portal"];
        NSURLRequest* request = [NSURLRequest requestWithURL:remoteURL];
        [self.viewController.webView loadRequest:request];
    }

    この例にある IP アドレスは、ハイブリッド・アプリケーションでレンダリングする WebSphere Portal サーバーの IP アドレスである必要があります。
  7. \WLPortal\apps\WLPortalApp\iphone\native にあるファイル Cordova.plist (Worklight バージョン 5.0.5) または worklight.plist (Worklight バージョン 5.0.6) を開きます。
  8. 属性キー OpenAllWhitelistURLsInWebView を見つけて「true」に設定します (リスト 3)。
    リスト 3. true に設定された OpenAllWhitelistURLsInWebView
    <key>OpenAllWhitelistURLsInWebView</key>
    <true/>
  9. これでアプリケーションがセットアップされました。次にアプリケーションがビルドおよびデプロイされることを確認する必要があります。図 5 が示すように、「すべてをビルドしてデプロイ」コマンドを使用すると Web アプリケーションの変更に基づいてネイティブ・アプリケーションが再デプロイされます。「すべてをビルドしてデプロイ」コマンドを実行するには、アプリケーションを右クリックして「実行」 > 「すべてをビルドしてデプロイ」を選択します。
    図 5. ビルドおよびデプロイの選択
  10. ビルド・プロセスが開始すると、Eclipse の右下の状況バナーで進行状況を確認できます。プロセスが完了すると、 Application 'YourApp' deployed successfully with all environments というメッセージが Worklight コンソールに表示されます。iOS と Android の両方のアプリケーションが更新されています。
  11. 11. 次に、iOS シミュレーターでアプリケーションを表示します。そのためには、Eclipse でプロジェクトの下にある iphone をまず右クリックし、「実行」 > 「Xcode プロジェクト」を選択します (図 6)。これにより Xcode が起動し、アプリケーションがコンソールに表示されます (図 7)。
    図 6. Xcode プロジェクトとしてのアプリケーションの実行
    図 7. Xcode に表示されたアプリケーション
  12. このアプリケーションは iPhone デバイス用に作成したので、シミュレーターを iPhone に変更します。そのためには、コンソール左上の「実行」アイコンの横にある下矢印をクリックし、「iPhone 5.1 シミュレーター」を選択します (図 8)。
    図 8. iPhone へのシミュレーターの変更
  13. 左上にある「実行」アイコンを選択すると (図 9)、シミュレーターがアプリケーションを起動します (図 10)。
    図 9. Xcode の「実行」ボタン
    図 10. iPhone シミュレーターによるアプリケーションの実行

iOS および Android に対して WebSphere Portal テーマを更新する

モバイル・デバイスのオペレーティング・システムを識別し、正しいファイル・セットを組み込んで Worklight リソースにアクセスするために、ここで WebSphere Portal テーマを更新する必要があります。モバイル・デバイスのオペレーティング・システムの識別は、WebSphere Portal のデバイス・クラス・メカニズムが行います。Android 用および iOS 用のすぐに使用可能なスマートフォン・クライアントは、smartphone という 1 つのデバイス・クラスに統合されています。オペレーティング・システムに基づいてリソースをロードするには、クライアントを区別する必要があります。

  1. iPhone クライアントを更新して Android と区別して識別されるようにするには、リスト 4 の xmlaccess スクリプトを実行します。
    リスト 4. XMLAccess スクリプトによる iPhone および Adroid Mobile のデバイス・クラスの変更
    <?xml version="1.0" encoding="UTF-8"?>
    <request type="update" 
    	 version="8.0.0.0" 
    	 xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
    	 xsi:noNamespaceSchemaLocation="PortalConfig_8.0.0.xsd">
        <portal action="locate">
            <client action="update" domain="rel" manufacturer="Apple" markup="html" 
    uniquename="wps.client.iphone">
                <useragent-pattern>.*iPhone.*</useragent-pattern>
      <client-capability update="remove">com.ibm.portal.devicesupport.deviceclass=
    smartphone</client-capability>
      <client-capability update="set">com.ibm.portal.devicesupport.deviceclass=
    smartphone-ios</client-capability>     	
                <client-capability update="set">HTML_4_0</client-capability>
            </client>
        </portal>
    </request>

    以前に smartphone デバイス・クラスを使用していた場合は、新規クラスの smartphone-ios を使用するためにカスタム・ロジックや静的テンプレートを更新する必要があります。

  2. パート 1 ではカスタム・テーマを作成し、そのテーマの一部で動的カスタム・リソースを含む新しい Web アプリケーション EAR を作成しました。/<wp_profile>/installedApps/<node>/<custom_ear>/<custom_war>/themes/html/dynamicSpots/ にある head.jsp ファイルを開きます。head.jsp ファイルの最後にリスト 5 のコードを追加します。このコードは、デバイス・クラスを取得して JSP 変数で設定します。
    リスト 5. デバイス・クラスの取得
    <c:set var="deviceClass" scope="request" value="${wp.clientProfile['DeviceClass']}"
    />
  3. デバイス・クラスを取得するコード行の後で、取得した情報を使用して iOS または Android のスマートフォン・デバイスを確認します (リスト 6)。
    リスト 6. iOS または Android のスマートフォンを確認するロジック
    <c:if test="${deviceClass == 'smartphone'}">
    <!--android devices -->
    <c:if test="${deviceClass == 'smartphone-ios'}">
    <!--ios devices -->
    </c:if>
  4. テーマがポータルにアクセスしているデバイスを識別する準備が整ったので、Worklight から WebSphere Portal に iOS 固有のファイルを移動することができます。パート 1 で使用したファイルの多くはデバイス間で共通となりますが、共有されていないファイルには名前空間 ios が含まれます。WebSphere Portal に組み込む必要がある JavaScript を定義するファイルが WLPortalApp.html です。このファイルは \WLPortal\apps\WLPortalApp\iphone\native\www\default\ にあります。
  5. iPhone 用に特別に作成する必要がある最初のファイルが静的プロパティー・ファイルです。静的プロパティーは HTML ファイルの先頭で定義されます (リスト 7)。
    リスト 7. iPhone デバイスの静的プロパティー
     var WL = WL ? WL : {};
    
     /**
      * WLClient configuration variables.
      * Values are injected by the deployer that packs the gadget.
      */
    
      WL.StaticAppProps = {
     "APP_DISPLAY_NAME": "WLPortalApp",
     "APP_SERVICES_URL": "\/apps\/services\/",
     "APP_VERSION": "1.0",
     "ENVIRONMENT": "iphone",
     "LOGIN_DISPLAY_TYPE": "embedded",
     "WORKLIGHT_ROOT_URL": "\/apps\/services\/api\/WLPortalApp\/iphone\/"
    };
  6. この HTML ファイルから JavaScript を取得し (リスト 7)、staticprops.ios.js という新しい JavaScript ファイル 内に使用可能な方法で組み込みます。ロケーション fs-type1:themes/<customTheme>/worklight/common/js/ にこの新規ファイルを配置します (図 11)。
    図 11. 新規ファイル staticprops.ios.js の作成
  7. 名前を変更して共通の JavaScript フォルダーにコピーする必要があるもう 1 つのファイルが wlcommon.js です。このファイルは \WLPortal\apps\WLPortalApp\iphone\native\www\default\common\js\ にあります。
    図 12. iOS 固有の名前に変更された wlcommon.js
  8. Worklight から WebSphere Portal にコピーする必要がある次の一連のファイルは、wlclient フォルダーにあります。これらのファイルは、名前空間「ios」を使用して名前を変更する必要があります。
    • checksum.js
    • cordova.js

    \WLPortal\apps\WLPortalApp\iphone\native\www\default\wlclient\js\ にあるこれらのファイルは、現状のままコピーすることができます。

    • json2.js
    • wpgap.ios.js

    ファイル名の変更が完了したら、WebSphere Portal のロケーション fs-type1:themes/<customTheme>/worklight/wlclient/js/ に 4 つのファイルをすべてコピーします。

    図 13. wlclient JavaScript フォルダーの新規ファイル
  9. これで、Worklight API に必要なすべてのファイルが正しく配置されました。次にこれらのファイルを WebSphere Portal にアクセスするデバイスに基づいてページに組み込む必要があります。Android 用に組み込む必要がある JavaScript は、パート 1 で作成した wl_client モジュールから直接取得できます。Android モバイル・デバイスの head.jsp に適切なスクリプトの組み込みエレメントを追加します (リスト 8)。
    リスト 8. head.jsp に追加された Android モバイル・デバイスの JavaScript
    <c:if test="${deviceClass == 'smartphone'}">
    <!--android devices -->
    	<script type="text/javascript" src='<r:url uri="dav:fs-
    type1/themes/customTheme/worklight/common/js/staticprops.js" allowRelativeURL="true" 
    mode="download" lateBinding="false"/>'></script>
    	<script type="text/javascript" src='<r:url uri="dav:fs-
    type1/themes/customTheme/worklight/wlclient/js/cordova.js" allowRelativeURL="true" 
    mode="download" lateBinding="false"/>'></script>
    	<script type="text/javascript" src='<r:url uri="dav:fs-
    type1/themes/customTheme/worklight/common/js/wljq.js" allowRelativeURL="true" 
    mode="download" lateBinding="false"/>'></script>
    	<script type="text/javascript" src='<r:url uri="dav:fs-
    type1/themes/customTheme/worklight/common/js/base.js" allowRelativeURL="true" 
    mode="download" lateBinding="false"/>'></script>
    	<script type="text/javascript" src='<r:url uri="dav:fs-
    type1/themes/customTheme/worklight/wlclient/js/messages.js" allowRelativeURL="true" 
    mode="download" lateBinding="false"/>'></script>
    	<script type="text/javascript" src='<r:url uri="dav:fs-
    type1/themes/customTheme/worklight/common/js/wlcommon.js" allowRelativeURL="true" 
    mode="download" lateBinding="false"/>'></script>
    	<script type="text/javascript" src='<r:url uri="dav:fs-
    type1/themes/customTheme/worklight/wlclient/js/diagnosticDialog.js" allowRelativeURL=
    "true" mode="download" lateBinding="false"/>'></script>
    	<script type="text/javascript" src='<r:url uri="dav:fs-
    type1/themes/customTheme/worklight/wlclient/js/deviceAuthentication.js" 
    allowRelativeURL="true" mode="download" lateBinding="false"/>'></script>
    	<script type="text/javascript" src='<r:url uri="dav:fs-
    type1/themes/customTheme/worklight/wlclient/js/window.js" allowRelativeURL="true" 
    mode="download" lateBinding="false"/>'></script>
    	<script type="text/javascript" src='<r:url uri="dav:fs-
    type1/themes/customTheme/worklight/wlclient/js/worklight.js" allowRelativeURL="true" 
    mode="download" lateBinding="false"/>'></script>
    	<script type="text/javascript" src='<r:url uri="dav:fs-
    type1/themes/customTheme/worklight/wlclient/js/wlclient.js" allowRelativeURL="true" 
    mode="download" lateBinding="false"/>'></script>
    	<script type="text/javascript" src='<r:url uri="dav:fs-
    type1/themes/customTheme/worklight/wlclient/js/wlfragments.js" allowRelativeURL=
    "true" mode="download" lateBinding="false"/>'></script>
    	<script type="text/javascript" src='<r:url uri="dav:fs-
    type1/themes/customTheme/worklight/wlclient/js/encryptedcache.js" allowRelativeURL=
    "true" mode="download" lateBinding="false"/>'></script>
    	<script type="text/javascript" src='<r:url uri="dav:fs-
    type1/themes/customTheme/worklight/wlclient/js/checksum.js" allowRelativeURL="true" 
    mode="download" lateBinding="false"/>'></script>
    	<script type="text/javascript" src='<r:url uri="dav:fs-
    type1/themes/customTheme/worklight/wlclient/js/wlgap.android.js" allowRelativeURL="
    true" mode="download" lateBinding="false"/>'></script>
    </c:if>
  10. 次に、iOS デバイスの適切な JavaScript を head.jsp に追加します。基本的に、このリストは Android モバイル・デバイスの場合と同じであり、\WLPortal\apps\WLPortalApp\iphone\native\www\default\ にある WLPortalApp.html で定義されているスクリプトの組み込みに基づいて検証することができます。ただし、名前空間が「ios」であるファイルは該当する Android ファイルの代わりに使用され、json2.js が追加されています (リスト 9)。
    リスト 9. head.jsp に追加された iOS モバイル・デバイスの JavaScript
    <c:if test="${deviceClass == 'smartphone-ios'}">
    <!-- ios devices -->
    	<script type="text/javascript" src='<r:url uri="dav:fs-
    type1/themes/customTheme/worklight/common/js/staticprops.ios.js" allowRelativeURL=
    "true" mode="download" lateBinding="false"/>'></script>
    	<script type="text/javascript" src='<r:url uri="dav:fs-
    type1/themes/customTheme/worklight/wlclient/js/cordova.ios.js" allowRelativeURL=
    "true" mode="download" lateBinding="false"/>'></script>
    	<script type="text/javascript" src='<r:url uri="dav:fs-
    type1/themes/customTheme/worklight/common/js/wljq.js" allowRelativeURL="true" mode=
    "download" lateBinding="false"/>'></script>
    	<script type="text/javascript" src='<r:url uri="dav:fs-
    type1/themes/customTheme/worklight/common/js/base.js" allowRelativeURL="true" mode=
    "download" lateBinding="false"/>'></script>
    	<script type="text/javascript" src='<r:url uri="dav:fs-
    type1/themes/customTheme/worklight/wlclient/js/messages.js" allowRelativeURL="true" 
    mode="download" lateBinding="false"/>'></script>
    	<script type="text/javascript" src='<r:url uri="dav:fs-
    type1/themes/customTheme/worklight/common/js/wlcommon.ios.js" allowRelativeURL=
    "true" mode="download" lateBinding="false"/>'></script>
    	<script type="text/javascript" src='<r:url uri="dav:fs-
    type1/themes/customTheme/worklight/wlclient/js/diagnosticDialog.js" allowRelativeURL=
    "true" mode="download" lateBinding="false"/>'></script>
    	<script type="text/javascript" src='<r:url uri="dav:fs-
    type1/themes/customTheme/worklight/wlclient/js/deviceAuthentication.js" 
    allowRelativeURL="true" mode="download" lateBinding="false"/>'></script>
    	<script type="text/javascript" src='<r:url uri="dav:fs-
    type1/themes/customTheme/worklight/wlclient/js/window.js" allowRelativeURL="true" 
    mode="download" lateBinding="false"/>'></script>
    	<script type="text/javascript" src='<r:url uri="dav:fs-
    type1/themes/customTheme/worklight/wlclient/js/worklight.js" allowRelativeURL="true" 
    mode="download" lateBinding="false"/>'></script>
    	<script type="text/javascript" src='<r:url uri="dav:fs-
    type1/themes/customTheme/worklight/wlclient/js/wlclient.js" allowRelativeURL="true" 
    mode="download" lateBinding="false"/>'></script>
    	<script type="text/javascript" src='<r:url uri="dav:fs-
    type1/themes/customTheme/worklight/wlclient/js/wlfragments.js" allowRelativeURL=
    "true" mode="download" lateBinding="false"/>'></script>
    	<script type="text/javascript" src='<r:url uri="dav:fs-
    type1/themes/customTheme/worklight/wlclient/js/encryptedcache.js" allowRelativeURL=
    "true" mode="download" lateBinding="false"/>'></script>
    	<script type="text/javascript" src='<r:url uri="dav:fs-
    type1/themes/customTheme/worklight/wlclient/js/checksum.ios.js" allowRelativeURL=
    "true" mode="download" lateBinding="false"/>'></script>
    	<script type="text/javascript" src='<r:url uri="dav:fs-
    type1/themes/customTheme/worklight/wlclient/js/json2.js" allowRelativeURL="true" 
    mode="download" lateBinding="false"/>'></script>
    	<script type="text/javascript" src='<r:url uri="dav:fs-
    type1/themes/customTheme/worklight/wlclient/js/wlgap.ios.js" allowRelativeURL="true" 
    mode="download" lateBinding="false"/>'></script>
    </c:if>

    実動を開始するときは、デバイス固有のファイル・セットごとに JavaScript 層を作成することが有用と思われます。これにより、ページ・レンダリングに対する要求が減り、パフォーマンスの向上に役立ちます。

  11. これで Android JavaScript ファイルが head.jsp ファイルを介して組み込まれたので、fs-type1:themes/<customTheme>/profiles/ にある profile_worklight.json ファイルから wl_client モジュールを削除する必要があります。
    リスト 10. 元の profile_worklight.json モジュール・セット
     "moduleIDs": [
    	"wp_theme_portal_80",
    	"wp_portlet_css",
    	"wp_one_ui",
    	"wp_one_ui_dijit",
    	"wp_legacy_layouts",
    	"wp_client_ext",
    	"wp_status_bar",
    	"wp_theme_menus",
    	"wp_theme_skin_region",
    	"wp_theme_high_contrast",
    	"wp_layout_windowstates",
    	"wl_client",
    	"wl_init"
     ],
    リスト 11. wlclient 削除後の profile_worklight.json ファイル
     "moduleIDs": [
    	"wp_theme_portal_80",
    	"wp_portlet_css",
    	"wp_one_ui",
    	"wp_one_ui_dijit",
    	"wp_legacy_layouts",
    	"wp_client_ext",
    	"wp_status_bar",
    	"wp_theme_menus",
    	"wp_theme_skin_region",
    	"wp_theme_high_contrast",
    	"wp_layout_windowstates",
    	"wl_init"
     ],
  12. wl_client モジュールがプロファイルから削除されたので、その前提条件を wl_init モジュールから削除する必要があります。そのためには、fs-type1:themes/<customTheme>/contributions にある worklight.json コントリビューション・ファイルを開き、前提条件の定義を削除します。
    リスト 12. 元の wl_init モジュール定義
    {
      "id":"wl_init",
      "prereqs":[{
    	 "id":"wl_client"
      },{
    	 "id":"wp_client_main"
      },{
    	 "id":"wp_client_ext"
      }],
      "contributions":[{
    	 "type":"config",
    	 "sub-contributions":[{
    		"type":"js",
    		"uris":[{
    			"value":"/worklight/common/js/init.js"
    		}]
    	}]
      }]
    }
    リスト 13. wl_client の前提条件が削除された wl_init モジュール
    {
    	"id":"wl_init",
    	"prereqs":[
    	{
    		"id":"wp_client_main"
    	},{
    		"id":"wp_client_ext"
    	}],
    	"contributions":[{
    		"type":"config",
    		"sub-contributions":[{
    			"type":"js",
    			"uris":[{
    "value":"/worklight/common/js/init.js"
    			}
    			]
    		}]
    	}]
    }

WebSphere Portal にアクセスしているデバイスをポータルで検出するための準備と、Worklight との適切な統合に必要なファイル・セットを組み込むための準備がすべて整いました。

アプリケーションをテストする

この演習はパート 1 の続きであるため、Worklight API のテスト用サンプルが既に用意されています。このサンプルは、デバイスの名前とバージョンをページの上部に表示します。テストでは、この情報が Android エミュレーターと iOS シミュレーターの両方で正しく表示されることを確認します。

  1. もう一度、アプリケーションを右クリックして「すべてをビルドしてデプロイ」を選択することで、アプリケーションのビルドとデプロイを行います。Eclipse の右下の状況バナーで進行状況を確認できます。
  2. プロセスが完了したら、「WLPortalWLPortalAppAndroid」を右クリックして「実行」 > 「Android アプリケーション」を選択します。これにより Android エミュレーターが起動し、Android アプリケーションで WebSphere Portal が表示されます。Android アプリケーションによる WebSphere Portal アプリケーションのレンダリング完了後、カスタム・テーマと Worklight プロファイルを適用したページにナビゲートします。このページで匿名アクセスが許可されていない場合は、ログインしてこのページにナビゲートします。デバイス設定がロードされるまでに数秒かかりますが、その情報はページの上部に表示されます (図 14 参照)。
    図 14. Worklight API サンプルによる WebSphere Portal を表示する Android エミュレーター
  3. WLPortalApp の下にある iphone を右クリックし、「実行」 > 「Xcode プロジェクト」を選択します。これにより、Xcode アプリケーションが起動します。このアプリケーションを iOS シミュレーターで実行する必要があります。アプリケーションを実行すると、WebSphere Portal が表示されます。
  4. このアプリケーションによる WebSphere Portal アプリケーションのレンダリング完了後、カスタム・テーマと Worklight プロファイルを適用したページに再度ナビゲートします。デバイスの名前とバージョンがページの上部に表示されます (図 15 参照)。
    図 15. Worklight API による WebSphere Portal を表示する iOS シミュレーター

まとめ

IBM WebSphere Portal を使用することで、ネイティブのデバイス機能を、マルチチャネル Web アプリケーションで利用できるように、簡単に調整することができます。Android および iOS の双方向けに作成された Worklight シェルは必要に応じて、アプリケーション・ストアでの公開や MDM 経由のデプロイが可能な成果物にパッケージ化することもできます。その結果、さまざまなデバイス向けに調整されたネイティブのデバイス・サービスを含むまでに拡張された、WebSphere Portal のマルチチャネル Web サイト管理機能をすべて利用できます。このシリーズの以降の記事では、シングル・サインオン認証の構成、Worklight と Web Exeperience Factory の統合についてそれぞれ考察します。


ダウンロード可能なリソース


関連トピック


コメント

コメントを登録するにはサインインあるいは登録してください。

static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=60
Zone=Lotus
ArticleID=974035
ArticleTitle=WebSphere Portal と IBM Worklight による卓越したモバイル Web エクスペリエンスの提供: (パート 2) WebSphere Portal ページにおける複数デバイス・サポートの統合
publish-date=06132014