目次


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

(パート 1) ハイブリッド・モバイル・アプリケーションと WebSphere Portal ページの統合

Comments

コンテンツシリーズ

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

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

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

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

はじめに

モバイル・チャネルは、販売やマーケティングなど、ほとんどとは言わないまでも多くの業種にとって欠かせない戦略的なチャネルとなっています。企業が Web サイトを通じて自社のブランドを管理するようになるにつれて、モバイル・デバイスへのコンテンツとアプリケーションの提供方法が共通の課題となっています。

IBM WebSphere Portal と IBM Worklight の共通部分について考察する前に、Web サイトとアプリケーションの違いについて理解することが重要です。

  • Web サイトでは Web コンテンツと複数の Web アプリケーションが 1 つのユーザー・エクスペリエンスに集約され、デスクトップ・ブラウザー、キオスク、スマートフォン、タブレットなどの複数のチャネルにわたって機能します。わかりやすい例として、ひいきの航空会社の Web サイトを挙げることができるでしょう。ほとんどの航空会社は、携帯電話やタブレットをサポートするモバイル Web サイトも設置しています。WebSphere Portal は、Web サイトの構築に適したプラットフォームです。
  • Web アプリケーションはカスタムビルトであり、多くの場合、特定の業務に対象が絞られています。例えば、飛行機の予約や座席の確保ができる、アプリケーション・ストアにあるひいきの航空会社のアプリケーションは Web アプリケーションの一例です。通常、Web アプリケーションには、デバイス上で実際に行える内容に絞った、Web サイトの機能の一部が含まれています。IBM WebSphere Application Server は、スタンドアロン Web アプリケーションの提供に適した選択肢です。IBM Worklight は、ネイティブ・アプリケーションとハイブリッド・アプリケーションの両方を作成する機能を提供し、WebSphere Application Server をバックエンドとして使用することも (ハイブリッド・アプリケーションを作成する場合)、WebSphere Portal をバックエンドとして使用することもできます (ハイブリッド Web サイトを作成する場合)。

次に、ネイティブ・アプリケーション、ハイブリッド・アプリケーション、Web アプリケーションのどれを開発するかを選択することになります。しかし、モバイル・チャネル技術の決定に影響を与える以下の 2 つの問いに答える必要があります。

  1. サポートする必要があるデバイスは何か
  2. アプリケーションの用途は何か

この質問への回答を促す基本的な検討事項として、次が挙げられます。ユースケースは何か。アプリケーションには GPS、カメラなどの特定のデバイス機能が必要か。アプリケーションには高品質な画面表示が必要か、それともモバイル・ブラウザーで十分か。開発対象のアプリケーションを選択するためには、これらの問いに対する答えが不可欠です。同様に、ネイティブ、ハイブリッド、純粋な Web がそれぞれ持つプラス面とマイナス面についても考える必要があります。

  • エンタープライズ・モバイル・アプリケーションの場合、ネイティブ・アプリケーションは極めて高コストであり、純粋なネイティブ開発には長期にわたるスケジュールが伴います。100% のネイティブ・アプリケーションを開発できる熟練した人材は確保が困難であり、コストがかさむ可能性があります。複雑なネイティブ・アプリケーションでは数名の技術専門家を必要とすることがあり、クロスプラットフォームの問題がさらなるコスト増を招くおそれがあります。初期開発以降は、オペレーティング・システムの継続的な更新に伴ってアプリケーションを継続的に更新する必要があり、アプリケーション・ストアに戻す承認を得るために更新済みのアプリケーションを再提出しなければなりません。
  • 対照的に、HTML5、CSS3、および JavaScript に基づく完全な Web アプリケーションや、Dojo や jQuery などのクライアント・サイド・フレームワークを使用する Web アプリケーションでは、モバイルに適した Web サイトを容易に構築できます。通常、開発コストは大幅に低下します。というのも、一般的な Web UI のスキルは確保しやすいからです。一般に、デバイスのオペレーティング・システムの更新は、モバイル Web サイトに影響を与えません。モバイル Web サイトは、複数のベンダー・デバイスにわたって機能するように開発することができます。こうした共通の Web 標準で構築された Web アプリケーションは、各種のデバイス間でコードを再利用することもできるため、保守コストと総所有コストを削減できます。さらに、更新の遅延または停止をもたらすアプリケーション・ストアのレビュー・プロセスや制約事項についても心配せずに済みます。

    このアプローチにおける 2 つの主な欠点は次のとおりです。

    • ブラウザーが提供するネイティブ機能しか利用できません。例えば、iOS デバイスではポテンショメーター、加速度センサー、および GPS を利用できますが、カメラは利用できません。
    • HTML/CSS/JavaScript で可能なグラフィカル表現しかできません。そのため、ネイティブ・スペースで利用できる忠実度と UI の一部の機能はブラウザー・スペースでは利用できません。
  • ハイブリッド・アプリケーションはそれぞれの長所を兼ね備えています。HTML/CSS/JavaScript での開発が容易になるとともに、ネイティブ・サービスでこれを強化し、アプリケーション・ストア用のアプリケーションを作成できます。(Worklight が使用し、同梱されている) Apache Cordova のようなテクノロジーにより、JavaScript を使用して Web マークアップからネイティブ機能を呼び出すことができます。例えば、navigator.camera.takeSnapshot のように単純な JavaScript 行を使用してカメラを呼び出すことができます。

サンプル・ソリューション

この記事では、ハイブリッド・アプリケーションを介して Worklight 5.0 と WebSphere Portal 8.0 を統合するサンプル・ソリューションの構築手順について概説します。このセクションでは、このソリューションに関わるコンポーネントと手順の実行に必要な関連する前提条件について説明します。

コンポーネント

  • Worklight

    Worklight プラットフォームは、ネイティブ・アプリケーション、ハイブリッド・アプリケーション、および Web アプリケーションの完全なライフサイクルの管理を可能にする一連のコンポーネントで構成されており、これらの各アプリケーションは iOS、Android、BlackBerry、Windows Phone などのさまざまなモバイル・プラットフォームに提供されます。IBM Worklight Developer Edition 5.0 は高性能で柔軟なモバイル統合開発環境であり、ダウンロードして無料で使用することができます。ここでは、Worklight Developer Edition を使用して WebSphere Portal にアクセスするサンプル・アプリケーションを構築します。

  • WebSphere Portal

    WebSphere Portal は、デスクトップおよびモバイル・デバイス、双方への Web サイト・フレームワーク提供における市場リーダーです。WebSphere Portal は、ビジネスに応じてサイトをカスタマイズできるようにサイト・ナビゲーションとブランディングを提供します。このフレームワークではアナリティクスによりターゲットを絞ったコンテンツを提供し、サイトの有効性を評価します。その他の主要機能としては、役割ベースのアクセス制御とコンテキストに応じたコンテンツがあります。WebSphere Portal の強みは、その基盤である WebSphere Application Server から生まれています。WebSphere Portal は、セキュリティー、統合 Web コンテンツ管理、コンテンツ・ターゲティング、仮想ポータルなどの豊富な機能を備えています。WebSphere Portal の最大の価値は、こうした機能を背景にしてアプリケーションを Web サイト上に集約できることです。

  • レスポンシブ Web デザイン

    今日の企業にとって、複数のデバイスにわたって最適化されている卓越した Web エクスペリエンスを生み出すことは極めて重要です。現在のユーザーは、スマートフォンでもデスクトップ・コンピューターと同じくらい容易に Web ページをブラウズできることを期待しています。とはいえ、モバイル・デバイスをターゲットにする場合でも、通常はネイティブ・アプリケーションを検討することから始まります。前述のとおり、ネイティブ・アプリケーションの所有コストは高く、コードの再利用は限られています。もう 1 つのソリューションは、モバイル・デバイス専用の代替 Web サイトを作成することです。この場合は、結果的に多くのコード・リソースを保守することになるため、あまり現実的なソリューションとは言えません。

    レスポンシブ Web デザイン (「参考資料」を参照) は、柔軟で流動的かつ適応性のある Web サイトを作成することで、デバイス画面の方向や画面サイズの変化に対応する、実際的なソリューションです。レスポンシブ Web デザインの概念を用いると、多機能な Web アプリケーションとハイブリッド・アプリケーションのいずれにおいても、画面の解像度や向き、機能について、ユーザー・インターフェースを自動的に最適化することができます。その結果、Web デザインの取り組みを最大限に活かせるようになります。

  • トポロジーの選択

    Worklight と WebSphere Portal のデプロイメントを計画すると、サーバー・トポロジーの選択の問題に直面します。IBM Worklight Server が WebSphere Portal にアクセスするにはプロキシーが必要です。このサンプルは、同じ開発マシン上に配置された WebSphere Portal と Worklight サーバーでテストしました。リスト 3 は、WebSphere Portal URL の IP アドレスがトップページへのアクセスに使用されていることを示しています。これらのサーバーが異なるシステムに配置されているときは、このサンプルをデプロイするためにプロキシーが必要になります。「Getting started with IBM Worklight」資料の Module 45 には、リモート Web サイトの使用方法が説明されています。例えば、WebSphere Portal サーバーでホストされている Web サイトなどです。

他の IBM 製品が Web アプリケーションやハイブリッド・アプリケーションを構築するニーズを満たしていることもあります。例えば、アプリケーション開発のその他のオプションとして、IBM Rational Application Developer と IBM Web Experience Factory が挙げられます。

前提条件

ここで説明したサンプルのモバイル・ハイブリッド・アプリケーションを構築するには、次のソフトウェア製品とフィーチャーを正しくインストールして使用可能な状態にする必要があります。

  • WebSphere Portal 8.0

    インストール手順については WebSphere Portal の資料を参照してください。

  • Eclipse

    Eclipse のダウンロード。このサンプルは Eclipse 3.7.2 (Indigo) に基づいており、Eclipse IDE for Java EE Developers でテストしました (Eclipse Classic および Eclipse IDE for Java Developers も機能すると思われますが、このサンプルではテストしていません)。

  • Android SDK

    Eclipse をインストールしたら、次のステップは Android SDK を追加することです。このサンプルは Android SDK 2.3.3 (API 10) でテストしました。

    Oracle Java JRE が Android SDK の前提条件となります。インストールが完了したら、「ウィンドウ」 > 「設定」 > 「Java」 > 「インストール済みの JRE」の順にナビゲートし、JRE を使用するために Eclipse インスタンスを構成することができます (図 1 参照)。

    図 1. Eclipse での Oracle JRE の設定
  • Worklight

    このサンプルでは IBM Worklight 5.0 以降を必要とします。それ以前のバージョンでは機能しません。開発を目的に無料で IBM Worklight Developer Edition 5.0 をダウンロードすることができます。プラグインによる Eclipse の更新方法の詳細は、「Getting started with IBM Worklight」資料のセットアップのモジュールで参照できます。

    Worklight では Eclipse の一環としてサーバーがインストールされます。場合によっては、eclipse.ini を更新して 8080 から別の値 (8085 など) にポートを変更する必要があります。Eclipse を開始すると Worklight サーバーが自動的に起動します。リスト 1 は -Dworklight_port を設定した eclipse.ini のファイル内容の例を示しています。

    リスト 1. eclipse.ini
    -startup
    plugins/org.eclipse.equinox.launcher_1.2.0.v20110502.jar
    --launcher.library
    plugins/org.eclipse.equinox.launcher.win32.win32.x86_64_1.1.100.v20110502
    -showsplash
    org.eclipse.platform
    --launcher.XXMaxPermSize
    256m
    --launcher.defaultAction
    openFile
    -vmargs 
    -Dworklight.port=8085
    -Xms40m
    -Xmx384m
  • WebDAV クライアント

    Worklight JavaScript で WebSphere Portal のテーマを更新するには、WebDAV クライアントが必要です。このサンプルは AnyClient を使用して開発しました。WebSphere Portal がサポートしているすべての WebDAV クライアントを使用できます。詳細については、「Connecting to the Portal WebDAV with 8.0」を参照してください。

  • カスタム・テーマ

    Worklight JavaScript をテーマに適用する前に独自のカスタム・テーマを作成する必要があります。WebSphere Portal テーマをコピーすると、テーマが機能するために必要な要素が各自のテーマにすべて含まれるようになり、フィックスパックによって変更が上書きされることもありません。サービス・フィックスパックによって更新される可能性があるため、WebSphere Portal テーマは直接変更しないでください。代わりに、この記事の操作手順に従ってテーマのコピーを作成してください。

Worklight アプリケーションを作成する

  1. Eclipse を開始します。Worklight コンソールでサーバーが起動しているのが分かります (図 2)。
    図 2. Worklight サーバーの起動
  2. アプリケーションの構築を開始するには、Worklight プロジェクトを新規に作成する必要があります。Eclipse から「新規」 > 「その他」 > 「Worklight プロジェクト」の順にナビゲートし、「次へ」をクリックします (図 3)。
    図 3. Worklight プロジェクトの新規作成
  3. プロジェクトの名前を指定します。図 4 ではプロジェクト名として WLPortalが指定されています。デフォルトで選択されている「ハイブリッド・アプリケーション」をそのまま使用し、「次へ」をクリックします。
    図 4. Worklight プロジェクトの名前指定
    Figure 4. Name your Worklight project
    Figure 4. Name your Worklight project
  4. Worklight プロジェクトのハイブリッド・アプリケーションの名前を指定します (この場合は WLPortalApp)。この例では JavaScript パッケージが存在しませんが、このパネルで追加することもできます (図 5)。
    図 5. ハイブリッド・アプリケーションの名前指定
  5. 「終了」をクリックします。プロジェクトとアプリケーションの成果物が作成されます。この処理には数分かかることがあります。完了すると、デザイン・パースペクティブに切り替えてプロジェクト・エクスプローラーでプロジェクトを表示するように促されることがあります (図 6)。
    図 6. Eclipse で表示されたプロジェクト
  6. 次に、ハイブリッド・アプリケーションを構築する Worklight 環境を作成します。apps フォルダーで WLPortalApp を右クリックし、「新規」 > 「Worklight 環境」を選択します (図 7)。
    図 7. Worklight 環境の新規作成
  7. 「新規 Worklight 環境」パネルが表示されます (図 8)。今回のサンプルはハイブリッド Android アプリケーションのみを対象とするため、「Android の電話およびタブレット」を選択します。他のデバイスのオペレーティング・システムに対する環境の作成を必要とする場合は、このパネルでその追加オプションを指定します。「終了」をクリックします。
    図 8. Eclipse で表示された Worklight 環境
  8. Worklight Studio は、ネイティブ・アプリケーションのプロジェクトのビルドおよび更新を行います (図 9)。このネイティブ・プロジェクトの名前は Worklight Project/WorklightApplication/Platform です。Worklight Studio はこのアプリケーションのライフサイクルを管理します。このアプリケーションは変更しないでください。プロジェクトで最初に作成した Web アプリケーションをビルドしてデプロイすると、ネイティブ・アプリケーションはアプリケーションの変更で上書きされます。
    図 9. ネイティブ・アプリケーションのビルド
  9. アプリケーションをセットアップしたので、アプリケーションがビルドおよびデプロイされることを確認します。図 10 が示すように、「すべてをビルドしてデプロイ」コマンドを使用すると Web アプリケーションの変更に基づいてネイティブ・アプリケーションが再デプロイされます。「すべてをビルドしてデプロイ」コマンドを実行するには、アプリケーションを右クリックして「実行」 > 「すべてをビルドしてデプロイ」を選択します。
    図 10. ビルドおよびデプロイの選択

    ビルド・プロセスが開始すると、Eclipse の右下の状況バナーで進行状況を確認できます。プロセスが完了すると、「Application 'YourApp' deployed successfully with all environments」というメッセージが Worklight コンソールに表示されます (図 11)。

    図 11. ログに表示された成功メッセージ
  1. Android アプリケーションを実行するには、プロジェクト・エクスプローラーで「WLPortalWLPortalAppAndroid」プロジェクトを右クリックし、「実行」 > 「Android アプリケーション」を選択します。これにより Android エミュレーターが起動し (まだ実行していない場合)、新しいアプリケーション・インスタンスがロードされます。場合によっては、エミュレーターの初期画面を開いてアプリケーションを表示する必要があります。図 12 はビルドしたアプリケーションの表示です。
    図 12. エミュレーターでレンダリングされたアプリケーション

次に、WebSphere Portal ページを呼び出すコードをアプリケーションに追加します。

Worklight JavaScript で WebSphere Portal テーマを更新する

  1. WebSphere Portal と Worklight を統合する最初のステップは、Android アプリケーション内にポータルを表示することです。そのためには、WebSphere Portal に接続するハイブリッド・アプリケーションをネイティブ・ラッパー内に作成します。アプリケーションを初期化する Java クラスを Eclipse で開きます (リスト 2a および 2 b)。Java クラスは \WLPortal\apps\WLPortalApp\android\native\src\com\WLPortalApp\WLPortalApp.java にあります。
    リスト 2a. Worklight バージョン 5.0.5 の WLPortalApp.java
    package com.WLPortalApp;
    
    import android.os.Bundle;
    
    import com.worklight.androidgap.WLDroidGap;
    
    public class WLPortalApp extends WLDroidGap {
    	@Override
    	public void onCreate(Bundle savedInstanceState) {
    	   super.onCreate(savedInstanceState);
    	   //DeviceAuthManager.getInstance().setProvisioningDelegate(
    	   <Use default ProvisioningDelegateImpl class or replace 
    	   with your IProvisioningDelegate implementation>);
    	   super.loadUrl(getWebMainFilePath());
    	}		
    	}
    リスト 2b. Worklight バージョン 5.0.6 の WLPortalApp.java
    package com.WLPortalApp ;
    
    import android.os.Bundle;
    
    import com.worklight.androidgap.WLDroidGap;
    
    public class WLPortalApp extends WLDroidGap {
    	
    	@Override
    	public void onCreate(Bundle savedInstanceState){
    		super.onCreate(savedInstanceState);
    	}
    	
    	/**
         * onWLInitCompleted is called when the Worklight runtime 
         * framework initialization is complete
         */
    	@Override
    	public void onWLInitCompleted(Bundle savedInstanceState){
    		super.loadUrl(getWebMainFilePath());
    		// Add custom initialization code after this line
    	}
    }
  1. アプリケーションはリスト 2a および 2b に表示されているクラスを使用して、\WLPortal\apps\WLPortalApp\common\WLPortalApp.html にある HTML ページにコントロールを転送します。このファイルが WebSphere Portal の IP アドレスとポートに転送されるようにファイルを変更する必要があります。Worklight バージョン 5.0.5 でこれを実行するには、onCreate メソッドを変更して WebSphere Portal URL をロードし、クッキー・マネージャーを使用します (リスト 3a)。バージョン 5.0.6 では、onWLInitCompleted メソッドを変更します (リスト 3b)。
    リスト 3a. Worklight バージョン 5.0.5 で WebSphere Portal URL を使用する onCreate メソッド
    public void onCreate(Bundle savedInstanceState) {
    	   super.onCreate(savedInstanceState);
    	   CookieSyncManager.createInstance(appView.getContext());
    	   CookieManager.getInstance().removeSessionCookie();
    	   super.loadUrl("http://9.99.999.999:10039/wps/portal",false);
    	   }
    リスト 3b. Worklight バージョン 5.0.6 で WebSphere Portal URL を使用する onCreate メソッド
    public void onWLInitCompleted(Bundle savedInstanceState){
    		CookieSyncManager.createInstance(appView.getContext());
    		CookieManager.getInstance().removeSessionCookie();
    super.loadUrl("http://9.99.999.999:10039/wps/portal",false);
    }
  2. CookieSyncManager と CookieManager のインポートの依存関係を必ず追加してください (リスト 4 参照)。
    リスト 4. CookieSyncManager と CookieManager の依存関係
    import android.webkit.CookieSyncManager;
    import android.webkit.CookieManager;
  3. リダイレクトのために、メソッドをもう 1 つ定義して認証ページを機能させる必要があります (リスト 5 参照)。これらの更新結果はリスト 6a および 6b に表示されています。
    リスト 5. この loadUrl メソッドの追加
    public void loadUrl(String url) {
    	loadUrl(url,false);
    	}
    リスト 6a. Worklight バージョン 5.0.5 における WLPortalApp.java の最終的な内容
    package com.WLPortalApp;
    
    import android.os.Bundle;
    import android.webkit.CookieSyncManager;
    import android.webkit.CookieManager;
    
    import com.worklight.androidgap.WLDroidGap;
    
    public class WLPortalApp extends WLDroidGap {
    	@Override
    	public void onCreate(Bundle savedInstanceState) {
    		   super.onCreate(savedInstanceState);
    		   CookieSyncManager.createInstance(appView.getContext());
    		   CookieManager.getInstance().removeSessionCookie();
    		   super.loadUrl("http://9.99.999.999:10039/wps/portal",false);
    	}	
    	
    	public void loadUrl(String url) {
    		loadUrl(url,false);
    	}
    	}
    リスト 6b. Worklight バージョン 5.0.6 における WLPortalApp.java の最終的な内容
    package com.WLPortalApp ;
    
    import android.os.Bundle;
    import android.webkit.CookieSyncManager;
    import android.webkit.CookieManager;
    
    import com.worklight.androidgap.WLDroidGap;
    
    public class WLPortalApp extends WLDroidGap {
    	
    	@Override
    	public void onCreate(Bundle savedInstanceState){
    		super.onCreate(savedInstanceState);
    	}
    
    	@Override
    	public void onWLInitCompleted(Bundle savedInstanceState){
    		CookieSyncManager.createInstance(appView.getContext());
    		CookieManager.getInstance().removeSessionCookie();
    	super.loadUrl("http://9.99.999.999:10039/wps/portal",false);
    	}
    	
    	public void loadUrl(String url) {
    		loadUrl(url,false);
    	}	
    }
  4. Worklight バージョン 5.0.5 の場合、ハイブリッド・コンテナ Web ビューですべてのリンクが開くことを確認するには、cordova.xml で stay-in-webview プリファレンスを設定します (ロケーション: \WLPortal\apps\WLPortalApp\android\native\res\xml\cordova.xml)。バージョン 5.0.6 ではファイルが config.xml になります (ロケーション: \WLPortal\apps\WLPortalApp\android\native\res\xml\config.xml)。この設定は次のように行います。

    <preference name="stay-in-webview" value="true" />

    非ローカルのポータル・サーバーを使用している場合は、このロケーションでセキュリティー・ポリシーを変更することもできます。デフォルトのセキュリティー・ポリシーでは、すべてのネットワーク・アクセスがブロックされます。特定のネットワーク・ドメインおよびサブドメインのへのアクセスを cordova.xml 内で宣言できます。詳細については、この記事を参照してください。

  5. ここで、アプリケーションをもう一度右クリックして「すべてをビルドしてデプロイ」を選択できます。Eclipse の右下の状況バナーに進行状況が表示されます。プロセスが完了したら、「WLPortalWLPortalAppAndroid」を右クリックして「実行」 > 「Android アプリケーション」を選択します。これにより Android エミュレーターが起動し、Android アプリケーションに WebSphere Portal が表示されます (図 13 参照)。
    図 13. WebSphere Portal を表示するアプリケーションを実行するエミュレーター
  6. この時点で、以前に作成した WebSphere Portal 8.0 テーマに基づくカスタム・テーマが必要になります。WebDAV ユーティリティーを使用して以下の作業を行う必要があります。
    • テーマ・テンプレート (theme.html) の更新
    • Worklight JavaScript ファイルのテーマへのコピー
    • 新規テーマ・プロファイルで定義されるモジュールの作成

    WebDAV ユーティリティー (このサンプルでは AnyClient を使用) を起動して fs-type1 エントリー・ポイントに接続します。ロード後、図 14 に示すフォルダー構造が表示されます。

    図 14. fs-type1 の WebDAV フォルダー構造
  7. カスタム・テーマにナビゲートします (例: fs-type1:themes/<customTheme>)。カスタム・テーマ内に worklightフォルダーを作成します (図 15)。
    図 15. 作成された worklight フォルダー
  8. WebSphere Portal でロードする Worklight ライブラリーの JavaScript ファイルを Eclipse で見つけます。そのフォルダー wlclientcommon は、\WLPortal\apps\WLPortalApp\android\native\assets\www\default\ にあります。WebDAV で作成した worklight フォルダーに wlclient と common の 2 つのフォルダーをコピーします。
  9. WebSphere Portal URL を挿入する前にアプリケーションがロードしたメイン HTML ファイルを開きます (ロケーション: \WLPortal\apps\WLPortalApp\android\native\assets\www\default\WLPortalApp.html)。このファイルには、WebSphere Portal に統合する必要がある 2 つの部分があります。というのも、このファイルはアプリケーションではこれ以上使用されないからです。
    • 最初のセクションは <head> エレメント内にある静的 JavaScript ファイルです (リスト 7)。
      リスト 7. WLPortalApp.html のヘッド・エレメント内にある静的 JavaScript
      <script type="text/javascript">
          // Define WL namespace.
          var WL = WL ? WL : {};
      
          /**
      
           * WLClient configuration variables.
      
           * Values are injected by the deployer that packs the gadget.
      
           */
      
          WL.StaticAppProps = {
          "APP_DISPLAY_NAME": "WLPortalApp",
          "APP_LOGIN_TYPE": "never",
          "APP_SERVICES_URL": "\/apps\/services\/",
          "APP_VERSION": "1.0",
          "ENVIRONMENT": "android",
          "LOGIN_DISPLAY_TYPE": "embedded",
          "LOGIN_REALM": null,
          "WORKLIGHT_ROOT_URL": "\/apps\/services\/api\/WLPortalApp\/android\/"
      };</script>
    • 2 番目のセクションは <body> エレメントに設定されている onload です。これは Worklight クライアントの初期化を行います (リスト 8)。
      リスト 8. body に設定されている、Worlight JavaScript を初期化する onload メソッド
      <body id="content" onload="WL.Client.init({})" style="display: none">

    これらの 2 つのセクションは、モジュールの成果物としてテーマに組み込む必要があります。この HTML ファイルから JavaScript を取得し、それぞれの JavaScript ファイル内に使用可能な方法で組み込みます。Worklight ライブラリーの <customTheme>/worklight/common/js フォルダーで 2 つのファイルを新規に作成し、図 16 に示すように init.jsstaticprops.js の名前を付けます (ロケーション: fs-type1:themes/<customTheme>/worklight/common/js/)。

    図 16. 新規ファイル init.js と staticprops.js の作成
  10. 先ほど作成した staticprops.js ファイルをローカル・マシンにコピーして開きます (リスト 9)。静的 JavaScript を HTML ページからこのファイルにコピーします。
    リスト 9. staticprops.js ファイルの内容
    var WL = WL ? WL : {};
    WL.StaticAppProps = {
        "APP_DISPLAY_NAME": "WLPortalApp",
        "APP_LOGIN_TYPE": "never",
        "APP_SERVICES_URL": "\/apps\/services\/",
        "APP_VERSION": "1.0",
        "ENVIRONMENT": "android",
        "LOGIN_DISPLAY_TYPE": "embedded",
        "LOGIN_REALM": null,
        "WORKLIGHT_ROOT_URL": "\/apps\/services\/api\/WLPortalApp\/android\/"
    };

    WebDAV の <customTheme>/worklight/common/js フォルダーに更新済みの staticprops.js ファイルをコピーして戻します。

  11. 先ほど作成した init.js ファイルをローカル・マシンにコピーして開きます (リスト 10)。HTML ページで設定されているインライン onload を置き換える onload 関数を作成するために、WebSphere Portal テーマに組み込まれている i$ API がここで使用されます。
    リスト 10. init.js ファイルの内容
    i$.addOnLoad(function(){	
    	WL.Client.init({});
    });

    WebDAV の <customTheme>/worklight/common/js フォルダーに init.js ファイルをコピーして戻します。

    i$ API の詳細については、WebSphere Portal 8.0 Javadoc を参照してください。テーマ最適化フレームワークを使用したモジュールの作成方法の詳細については、WebSphere Portal wiki を参照してください。

  12. 新規テーマ・モジュールの定義前に作成する必要がある最後の成果物が Worklight JavaScript をテストするサンプルです。このサンプルのテストでは、Cordova API が WebSphere Portal テーマ内で利用可能であり、Cordova API で設定されているサンプルに基づいていることが確認されます。
    このサンプルは WebSphere Portal における API の使用のテストのみを目的としているため、再利用の価値は限られており、サンプル・コードのモジュールを作成する必要はありません。コード・スニペットをテーマ・テンプレートに直接配置し、ローカライズされたテーマ・テンプレートをマシンにコピーします。テーマ・テンプレートは、WebDAV 上のカスタム・テーマ (fs-type1:themes/<customTheme>/nls/theme_en.html) にあります (図 17)。
    図 17. ローカライズされたテーマ・テンプレートによるサンプル・コードの追加
  13. テーマ・テンプレートを開き、テンプレートの下のほうにある <a rel="dynamic-content" href="co:config"></a> 動的コンテンツ・エレメントを見つけます。Cordova API の deviceready サンプルをこの動的コンテンツ・スポットの後に配置します (リスト 11 参照)。
    リスト 11. WebSphere Portal での Cordova API のテストに使用するサンプル
    <div class="wpthemeComplementaryContent" 
            id="wpthemeComplementaryContent" 
    		role="region" 
    		aria-labelledby="wpthemeComplementaryContentText">
      <span class="wpthemeAltText" id="wpthemeComplementaryContentText">
    	Complementary Content
      </span>
      <a rel="dynamic-content" href="co:config"></a>
      <script type="text/javascript">
      document.addEventListener("deviceready", onDeviceReady, false);
      function onDeviceReady() {	
            var element = document.getElementById('deviceProperties');
            element.innerHTML = 'Device Name: '     + device.name + '<br/>' + 
                                'Device Version: '  + device.version;
      }
      <script>
    </div>
  14. Cordova をテストする JavaScript の準備が完了したら、デバイス情報を表示するテーマ・テンプレート内にエレメントを挿入する必要があります。テーマ・テンプレートの <body> エレメントの直下に "deviceProperties" の id を持つエレメントを配置します。リスト 12 はその例を示しています。
    リスト 12. テーマ・テンプレートのデバイス・プロパティー・エレメン
    <p id="deviceProperties">Loading device info</p>
  15. テーマ・テンプレートを開いたままにして、ID を値が "content" の <body> エレメントに追加します (リスト 13)。これは、Worklight の init メソッドで必要となります。
    リスト 13. body エレメントへの新規 ID の追加
    <body id="content" class="lotusui30dojo tundra locale_en">
  16. HTML ページの項目と Worklight JavaScript のテスト用サンプルを個別ファイルとしてテーマに組み込んだので、これらを新規モジュールに成果物として定義できます。そのためには、WebDAV のカスタム・テーマの下にあるコントリビューション・フォルダー内の JSON コントリビューション・ファイルとして新規テーマ・コントリビューションを登録します。このフォルダー内のファイルは自動的にスキャンされ、定義済みのコントリビューションはそのコントリビューション自体を定義するテーマに登録されます (テーマ固有のコントリビューションの作成方法について詳しくは、「テーマ固有のコントリビューションの登録」を参照してください)。
    1. カスタム・テーマの下にある contributions フォルダーを開き、ファイル worklight.json を作成します。このファイルにより、以下の要素ごとに 2 つの新規モジュールが定義されます。
      • Worklight JavaScript ライブラリー・ファイル
      • Worklight 初期化 onload

      この 2 つのモジュールは、それぞれ wl_client および wl_init として識別されます。

    2. ローカル・マシンに worklight.json ファイルをコピーし、リスト 14 の内容をこのファイルに挿入します。
      リスト 14. worklight.json ファイルの内容
      {
         "modules":[{
            "id":"wl_client",
            "contributions":[{
               "type":"config",
                  "sub-contributions":[
                  {
                     "type":"js",
                     "uris":[{"value":"/worklight/common/js/staticprops.js"}]
                  },
                  {
                     "type":"js",
                     "uris":[{"value":"/worklight/wlclient/js/cordova.js"}]
                  },
                  {
                     "type":"js",
                     "uris":[{"value":"/worklight/common/js/wljq.js"}]
                  },
                  {
                     "type":"js",
                     "uris":[{"value":"/worklight/common/js/base.js"}]
                  },
                  {
                     "type":"js",
                     "uris":[{"value":"/worklight/wlclient/js/messages.js"}]
                  },
                  {
                     "type":"js",
                     "uris":[{"value":"/worklight/common/js/wlcommon.js"}]
                  },				
                  {
                     "type":"js",
                     "uris":[{"value":"/worklight/wlclient/js/diagnosticDialog.js"}]
                  },
                  {
                     "type":"js",
                     "uris":
                        [{"value":"/worklight/wlclient/js/deviceAuthentication.js"}]
                  },
                  {
                     "type":"js",
                     "uris":[{"value":"/worklight/wlclient/js/window.js"}]
                  },
                  {
                     "type":"js",
                     "uris":[{"value":"/worklight/wlclient/js/worklight.js"}]
                  },
                  {
                     "type":"js",
                     "uris":[{"value":"/worklight/wlclient/js/wlclient.js"}]
                  },
                  {
                     "type":"js",
                     "uris":[{"value":"/worklight/wlclient/js/wlfragments.js"}]
                  },
                  {
                     "type":"js",
                     "uris":[{"value":"/worklight/wlclient/js/encryptedcache.js"}]
                  },
                  {
                     "type":"js",
                     "uris":[{"value":"/worklight/wlclient/js/checksum.js"}]
                  },
                  {
                     "type":"js",
                     "uris":[{"value":"/worklight/wlclient/js/wlgap.android.js"}]
                  }]
              }]
         },
         {
            "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"
                  }]
               }]
            }]
         }
         ]
      }
    3. WebDAV の <customTheme>/contributions フォルダーに worklight.json ファイルをコピーして戻します。
  17. これで、Worklight JavaScript ライブラリーがテーマ・モジュールに定義されました。JavaScript をテストするサンプルはテーマ・テンプレートに直接配置されたので、テスト終了後に容易に削除できますが、サンプル・コードのプロファイルではモジュールは不要です。最後のステップは、モジュールを取得してテーマ・プロファイルで定義することです。カスタム・テーマ (fs-type1:themes/<customTheme>/profiles/profile_lightweight.json) にある軽量プロファイルを開いて新規プロファイルを作成します。このファイルをローカル・マシンにコピーし、ファイル名を profile_worklight.json に変更します。
  18. profile_worklight.json ファイルを開き、コントリビューションとして定義したモジュール wl_client および wl_init を追加します (リスト 15)。
    リスト 15. プロファイルで定義されたモジュール ID 配列の例
    "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”
    	],
  19. プロファイル名を、ページ・プロパティー・ダイアログで選択するときに容易に識別できるように変更します。そのためには、英語タイトル (または使用予定のロケール) を見つけてそのタイトルを「Lightweight」から「Worklight」に変更します (リスト 16 および 17)。
    リスト 16. 変更前のプロファイル・タイトル
    {
    	"value":"Lightweight",
    	"lang":"en"
    },
    リスト 17. 変更後のプロファイル・タイトル
    {
    	"value":"Worklight",
    	"lang":"en"
    },
  20. WebDAV の <customTheme>/profiles/ ディレクトリーに profile_worklight.json ファイルをコピーして戻します。ブラウザーのキャッシュをクリアして WebSphere Portal を再起動し、新規プロファイルが使用可能であることを確認します。
    WebSphere Portal で IBM Worklight JavaScript を適用するために必要なすべてのテーマ成果物の準備が整いました。これ以降、モジュールを定義したプロファイルを取得して Worklight の成果物を取り込み、ページに適用することができます。適用されるカスタム・テーマでページを作成します (まだ作成していない場合)。ページ作成の詳細については、「ページの作成とナビゲーション」を参照してください。
    プロファイルをページに適用し、Worklight に対する変更を表示するには 2 とおりの方法があります。次のいずれかの方法を利用できます。
    • テーマのデフォルトとしてプロファイルを設定
    • 特定のページ専用にプロファイルを設定

    どちらの方法でもプロファイルを設定できるため、変更を表示できますが、特定のページにプロファイルを設定するほうが容易です。この操作を行うには、カスタマイズ・シェルフ内で利用できる「ページ・プロパティー」ダイアログを開き、「拡張」タブで、利用可能なテーマ・プロファイルのドロップダウン・メニューを見つけます (図 18)。詳細については、「テーマ・プロファイルの変更」を参照してください。

    図 18. ページ・プロパティー・ダイアログのプロファイル・メニュー

Android エミュレーターを使用してハイブリッド・アプリケーションをテストする

プロファイルを WebSphere Portal ページに適用したため、Android エミュレーターを使用してサンプルをテストできるようになりました。

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

まとめ

IBM Worklight を使用すると、マルチチャネル Web アプリケーションとデバイス・チャネルおよびデバイス配信チャネルとの情報のやりとりが、簡単に可能になります。Worklight シェルは、認証、セキュリティー、アプリケーション起動、通知などを処理するデバイス上のネイティブ・クライアント・コードのシン・レイヤーであり、組織やビジネスの特定のニーズに合わせることができます。このシェルは Web コンテンツ (アプリケーションの核心) の起動を行います。IBM WebSphere Portal では、他のポートレットとともに、Worklight のネイティブ・サービスを利用するマークアップなど、複数のポートレットの集約が可能です。その場合、Worklight シェルは標準的な方法で提供され、WebSphere Portal によって管理される Web サイトを指します。また、Worklight シェルは必要に応じて、アプリケーション・ストアでの公開や MDM 経由のデプロイが可能な成果物としてパッケージ化することもできます。その結果、ネイティブ・デバイス・サービスにまで拡張された、WebSphere Portal のマルチチャネル Web サイト管理のフル機能がユーザーに提供されます。

本シリーズでは今後、WebSphere Portal テーマ内でのネイティブ機能の活用、Worklight と WebSphere Portal の間の認証構成、Worklight と Web コンテンツ管理によるユーザー・デバイスへのソーシャル・サービスのネイティブ統合の提供、Worklight を使用した IBM Rational Application Developer と IBM Web Experience Factory ポートレットの強化について考察する記事を予定しています。


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


関連トピック


コメント

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

static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=60
Zone=Lotus
ArticleID=971097
ArticleTitle=WebSphere Portal と IBM Worklight V5.0 による卓越したモバイル Web エクスペリエンスの提供: (パート 1) ハイブリッド・モバイル・アプリケーションと WebSphere Portal ページの統合
publish-date=05162014