目次


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

IBM Web Experience Factory と Worklight を併用したハイブリッド・アプリケーションの作成

Comments

コンテンツシリーズ

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

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

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

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

はじめに

モバイル・デバイス市場の急成長を受けて、組織は、何百種類ものモバイル・デバイスやインターネット接続デバイスで構成される新たな世界に向け、自社の Web サイトを拡大するという課題に直面しています。このシリーズの最初の記事では、ネイティブ、純粋な Web、およびハイブリッドという、モバイル・アプリケーション開発の 3 つの基本アプローチについて説明しました。デバイスのブラウザーを使用した純粋な Web アプリケーションのアプローチは最も容易であり、多くのシナリオにとって、さまざまなモバイル・デバイスとデスクトップ・デバイスに適用可能な最適の方法です。

とはいえ、モバイル・デバイスにインストールして、そのデバイスの機能を完全に利用できるアプリケーションが望まれるシナリオもたくさんあります。以前の記事で、純粋な Web とネイティブの各アプローチの長所をハイブリッド・アプリケーションがどのように兼ね備えているのか説明されています。IBM WebSphere Portal と IBM Worklight V5.0 を組み合わせることで、モバイル・デバイスにインストールして Web サイトへの完全なアクセスを提供し、デバイス機能を利用することのできるアプリケーションを作成することができます。パート 1では、この種のハイブリッド・アプリケーションを構築する基本手順が示されています。

この記事は、これまでのアプリケーション開発に関する記事の続編となるものです。ハイブリッド・アプリケーションの開発では、その大半が これまでの Web アプリケーションに共通する同種の機能で構成されることもしばしばあります。これらの機能は、データおよびサービスにアクセスするときや、フォーム、ビュー、ユーザー操作エレメントなどを備えた魅力的なユーザー・インターフェース画面を提供するときに必要とされます。中核となるアプリケーション機能に加えて、ネイティブ・デバイス機能へのアクセスを必要とするプレースを選択することになります。

例えば、機能の一部にデバイスのカメラを使用するアプリケーションを提供しなければならない組織が数多く存在します。銀行では、顧客が、預入する小切手の写真を撮れるようにすること、保険会社では、契約者が、事故現場の写真を撮れるようにすること、また (この記事の使用例のように) 市役所では、住人が、落書きや道路の穴などの問題を写真を添付して報告できるようにすることが望まれます。これらのシチュエーションではいずれも、カメラの利用は、アプリケーションの中のひとつの要素に過ぎません。

この記事では、データやサービスへのアクセス、すべてのモバイル・ユーザー・インターフェース画面、およびデバイスのカメラ利用におけるハイブリッド機能などを備えた、包括的なサンプル・ハイブリッド・アプリケーションの開発方法について説明します。

ソリューションのコンポーネント

この記事で説明するサンプルの作成に必要なコンポーネントとその他の考慮事項を以下に示します。

  • IBM Web Experience Factory V8.0

    IBM Web Experience Factory は、デスクトップ・ブラウザー、タブレット、スマートフォンで実行可能なマルチチャネルのポートレットおよび Web アプリケーションを迅速に開発する開発ツール兼フレームワークです。このツールはモデル・ベースの開発アプローチを採用しており、どのようなスキル・レベルの開発者でも、体裁のよいユーザー・インターフェースを備えた高機能のアプリケーションを迅速に作成することができます。

    製品機能の詳細については、IBM Web Experience Factory の製品情報を参照してください。資料と追加情報については wiki を参照してください。

  • IBM Worklight V5.0

    IBM Worklight プラットフォームは、ネイティブ・アプリケーション、ハイブリッド・アプリケーション、および Web アプリケーションの完全なライフサイクルの管理を可能にする一連のコンポーネントで構成されており、これらの各アプリケーションは iOS、Android、BlackBerry、Windows Phone などのさまざまなモバイル・プラットフォームに提供されます。 IBM Worklight Developer Edition V5.0 は、この記事で WebSphere Portal にアクセスするサンプルの作成に使用する開発環境です。

    IBM Worklight V5.0 の使用方法の詳細については、「Getting started with IBM Worklight」を参照してください。

  • IBM WebSphere Portal

    WebSphere Portal は、デスクトップ・デバイス用およびモバイル・デバイス用の両方の Web サイト・フレームワークを提供する市場をリードする製品です。WebSphere Portal は、ビジネスに応じて Web サイトをカスタマイズできるようにサイト・ナビゲーションとブランディングを提供します。このフレームワークはアナリティクスを使用してターゲットを絞ったコンテンツを提供し、Web サイトの有効性を評価することができます。その他の主要機能に、Web サイトへのロール・ベースのアクセスとコンテキスト依存があります。WebSphere Portal の強みは WebSphere Application Server にその基盤を置くことにあります。WebSphere Portal は、セキュリティー、統合 Web コンテンツ管理、パーソナライゼーション、仮想ポータルなどの豊富な機能リストを備えています。

    WebSphere Portal の価値は、こうした機能を背景にしてアプリケーションを Web サイト上に集約できることです。

    製品機能の詳細については、WebSphere Portal の製品情報を参照してください。

  • トポロジーの選択

    Worklight と WebSphere Portal のデプロイメントの計画にあたっては、サーバー・トポロジーの選択について考慮します。IBM Worklight Server が WebSphere Portal にアクセスするにはプロキシーが必要です。このサンプルは、同じ開発マシン上に配置された WebSphere Portal サーバーと Worklight サーバーでテストしました。リスト 2 は、WebSphere Portal URL の IP アドレスがトップページへのアクセスに使用されていることを示しています。これらのサーバーが異なるシステムに配置されているときは、このサンプルをデプロイするためにプロキシーが必要になります。IBM Worklight の教育用モジュール 45 には、WebSphere Portal サーバーでホストされている Web サイトなど、リモート Web サイトの使用方法が説明されています。

前提条件

ここで説明されているサンプルのモバイル・ハイブリッド・アプリケーションをこの記事の操作手順に従って作成するには、次のコンポーネントを正しくインストールして使用可能な状態にする必要があります。

  • IBM WebSphere Portal (V8.0 推奨)

    ここに記載されている、ポータル・テーマの Worklight JavaScript コードなどの情報は、WebSphere Portal V8.0 を対象としています。ただし、Web Experience Factory のサンプル・アプリケーションは、Web Experience Factory V8.0 がサポートしているすべてのサーバー・プラットフォームで実行できます。これらのプラットフォームには、IBM WebSphere Portal V7 .0 や IBM WebSphere Application Server V7、V8、V8.5 も含まれます。開発者のテスト目的に限り、WebSphere Application Server Community Edition または Apache Tomcat を使用することもできます。

    詳細については、「IBM WebSphere Portal V8 製品資料」を参照してください。

  • Eclipse

    このサンプルは Eclipse 3.7.2 (Indigo) に基づいています。このサンプルは Eclipse 3.7.2 Java EE Developers でテストしましたが、Classic や Java Developers でも機能します。

  • Android SDK

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

  • IBM Worklight 5.0 plugin for Eclipse

    Worklight plugin for Eclipse は、IBM Worklight ハイブリッド・アプリケーションを構築可能にするコンポーネントです。評価版は IBM Worklight の資料の『Additional resources』のセクションで入手できます。

    Worklight では Eclipse の一環としてサーバーがインストールされます。場合によっては、eclipse.ini を更新して 8080 から別の値 (例: 8085) にポートを変更する必要があります。Eclipse を開始すると Worklight Server が自動的に起動します。リスト 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 コードの統合には 2 つの選択肢があります。Worklight JavaScript で WebSphere Portal テーマを更新するか、Web Experience Factory アプリケーションにファイルを組み込むかができます。最初の方法に決めた場合は WebDAV クライアントが必要になります。Web Experience Factory アプリケーションを更新する場合、WebDAV は必要ありません。この 2 つの方法については、この記事の以降のセクションで説明します。このシリーズのパート 1 では、WebDAV ソフトウェアとして AnyClient を使用してテーマを更新しました。この方法を使用する場合は、その記事を参照して WebSphere Portal テーマの更新方法の詳細を確認できます。WebSphere Portal がサポートしているすべての WebDAV を使用できます。

    WebSphere Portal テーマを更新することに決めた場合は、「Connecting to the Portal WebDAV with 8.0」の記事を確認してください。

  • カスタム・テーマ

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

IBM Web Experience Factory とハイブリッド・アプリケーション

IBM Web Experience Factory は、WebSphere Portal や WebSphere Application Server 上で実行するマルチチャネルのモバイル Web アプリケーションの構築をサポートします。このツールのモデル・ベースの開発アプローチにより、最小限のコーディングによる非常に迅速な開発が可能になります。通常、これは「データ主導型」アプローチで実行されます。すなわち、ある種のデータ・ソースを指定し、使用する UI パターンを選択して、ポイント・アンド・クリック・インターフェースを使用してさまざまなオプションを構成することでアプリケーションを作成します。次に、Web Experience Factory のいずれかのカスタマイズ・ツールを使用して、外観と機能を自由に調整できます。

さらに、Web Experience Factory はマルチチャネル・サポートを備えており、さまざまなデバイス・タイプ (スマートフォン、タブレット、デスクトップなど) に合わせて最適化されたレンダリングを生成する単一のソース・モデルを開発できます。これにより、単一のソース・コード・ベースを維持しながら、すべてのデバイスに最適なエクスペリエンスを提供できます (Web Experience Factory のモバイル機能とマルチチャネル機能の詳細については「参考資料」を参照してください)。ハイブリッド・アプリケーションを構築するために、Worklight を Web Experience Factory のモバイルとマルチチャネルのサポートとともに使用できるようになりました。これらのハイブリッド・アプリケーションはデバイスにインストールされ、カメラや通知のようなネイティブ・デバイス機能を利用できます。ハイブリッドというアプローチによって、Web Experience Factory のモバイル Web 機能をすべて使用して、アプリケーションの UI とデータ・アクセスの各部分を構築できます。その後、JavaScript をわずかに使用することで、純粋なモバイル Web アプリケーションでは利用できないデバイス機能 (カメラなど) にアクセス可能になります。さらに、そのアプリケーションを、アプリケーション・ストアなどからデバイスにインストールできます。

Web Experience Factory を使用してこの種のハイブリッド・アプリケーションを構築する場合、そのアプリケーションはデバイスにインストールされますが、元々はサーバー・ベースのハイブリッド・アプリケーションであるため、ほぼすべての機能は Web Experience Factory によって生成され、サーバーからロードされます。デバイスにインストールされるアプリケーションは、ブラウザー・ウィンドウを収めたシェルですが、ブラウザー UI は装備していないため、それがブラウザーであることはユーザーには分かりません。このブラウザー・ウィンドウは、Web Experience Factory のアプリケーションが実行されるサーバーを指しています。純粋なモバイル Web アプリケーションのアプローチとともにこのハイブリッド・アプローチを使用することで、幅広いモバイル・アプリケーションのニーズに応え、標準に基づく Web テクノロジーを使用してすべてを構築することができます。そして、Web Experience Factory のモデル・ベースのツールを使用する場合、以下の付加的なメリットがあります。

  • データ・ソースからアプリケーション UI が自動生成されるデータ主導型アプローチを使用することで、コーディングをほとんどまたはまったく必要とせずに、極めて迅速にアプリケーションを開発できます。
  • Web Experience Factory のマルチチャネルのプロファイル作成機能を使用すると、さまざまなデバイス・タイプに向けて異なるバリエーションを生成できます。目がくらむほどたくさんのモバイル・デバイスが継続的にリリースされる状況下で、この機能はユーザーから高い支持を得ていることが判明しています。
  • Web Experience Factory のポイント・アンド・クリックのコネクター (ビルダー) を使用して、さまざまなデータ・ソース (データベース、Web サービス、REST サービス、Domino、SAP など) に容易にアクセスできます。

モバイル・アプリケーションと完全なモバイル Web サイトの開発

Web Experience Factory を使用した開発では、任意のアプリケーション・モデルを、WebSphere Portal 上のポートレット、または、スタンドアロンの Web アプリケーション、あるいはとして実行することもできます。または、その両方として実行することができます。したがって、同じツールとアプリケーション・コードまたはアプリケーション・モデルを両方の環境で使用できます。モバイル・アプリケーションのみが必要な場合は、Web Experience Factory のモデルを WebSphere Application Server にデプロイできます。完全なモバイルまたはマルチチャネル Web サイトが必要な場合、モデルは WebSphere Portal 上のポートレットとしてデプロイされます。

サンプル・アプリケーション

この演習用に組み込まれているサンプル・アプリケーションCitizen Reports (市民レポート) は、落書きや道路の穴、標識の損傷などの問題について市役所に報告するアプリケーションです。このアプリケーションはモバイル・デバイスにインストールされ、ユーザーは新規レポートを提出し、報告する問題の写真を撮ります (図 1)。ユーザーは、提出済みの既存レポートを表示してその状況を確認することもできます。レポートに関するデータはサーバー上のデータベースに格納されます。

図 1. メインスクリーンと既存レポートの表示

新規レポートを作成するには「File New Report (新規レポートの提出)」をタップし (図 1、最初のパネル)、新規レポートのデータを入力するフォームを表示します (図 2、最初のパネル)。入力項目には、デバイスの GPS から取得されたジオタギング情報 (緯度と経度) が自動的に含まれます。「写真を撮影」をタップするとカメラが起動します。写真を撮影して承認されるとサムネールが表示され (図 2、2 番目のパネル)、残りのフィールドを入力できます (図 2、3 番目のパネル)。

図 2. 写真を添付した新規レポートの提出

記入を終えたフォームは送信されます。画像とフォーム・フィールドがサーバーに送信され、データベースが更新されて画像を含む新規レポートが表示されます。新規レポートがデータベースのレポートの更新済みリストに表示されています (図 3、3 番目のパネル)。

図 3. 写真を追加した新規レポート

WebSphere Portal が管理する市役所の Web サイトにおけるハイブリッド・アプリケーションの使用

図 4 の画面キャプチャーは、WebSphere Portal を使用して構築および管理する完全な Web サイトの一部として、同一の Web Experience Factory のモデルをデプロイする方法を示しています。この Web サイトは、多くの異なるアプリケーションと Web コンテンツで構成されています。これらの画像は Android デバイスで実行されるネイティブ・アプリケーションを示しています。アプリケーションは、この端末に、WebSphere Portal がホストする市役所の完全な Web サイトへのアクセスを提供されます。Citizen Reports ポートレットにナビゲートすると、ハイブリッドのカメラ機能を利用できます。

図 4. Android の Citizens Reports ハイブリッド・アプリケーション

ハイブリッド・アプリケーションのアーキテクチャー

このアプリケーションは、以下に示す 2 つの別個の部分で構成されています。

  • ハイブリッド・シェル・アプリケーション: Worklight を使用して構築され、モバイル・デバイスにインストールされて Worklight サーバーにデプロイされます。
  • サーバー・ホスト・アプリケーション: Web Experience Factory を使用して構築され、WebSphere Portal または WebSphere Application Server にデプロイされます。

図 5 は、Worklight との併用する際の WebSphere Portal の全体的なデプロイメント・トポロジーを示しています。右上にあるインストール済みのハイブリッド・アプリケーションは、ポータル・サーバーと Worklight サーバーの両方にアクセスします。純粋な Web クライアント (デスクトップ、タブレット、スマートフォン) は、ポータル・サーバーにのみアクセスします。純粋な Web クライアントとハイブリッド・クライアントは、ポータル・サーバーとポートレットを同様に扱うことが分かります。ただし、ハイブリッド・クライアントのコンテキストで実行すると、ポートレットで付加的なネイティブ・デバイス機能を利用できます。この例では、Citizen Reports ポートレットはすべてのクライアントで利用可能ですが、ハイブリッド・アプリケーションのコンテキストで使用すると、さらにカメラ機能も利用できます。

図 5. WebSphere Portal と Worklight のトポロジー

Web Experience Factory アプリケーションの構築方法

Citizen Reports アプリケーションは、以下の 2 つの層で構成されるプロバイダー/コンシューマー・モデルのアーキテクチャーに基づいて Web Experience Factory で構築されます。

  • プロバイダー・モデルまたはデータ・アクセス・モデルは、データとサービスへのアクセスを提供します。
  • コンシューマー・モデルまたは UI モデルは、プロバイダー・モデルを使用してデータとサービスにアクセスします。

このアーキテクチャーにより、UI モデルは、使用中の特定のバックエンド・データ・ソースの知識を必要とせずに構築されます。バックエンド・データの詳細はすべてプロバイダー・モデルによって処理され、このモデルはコンシューマー・モデルが使用するクリーンなサービス・インターフェースを提供します。プロバイダー層は必要なデータ操作を実行し、複数のサービスやデータ・ソースにアクセスできます。図 6 は、プロバイダー・モデルとコンシューマー・モデルを組み合わせてアプリケーションを構築する仕組みを示しています。

図 6. Web Experience Factory のプロバイダー/コンシューマー・アーキテクチャー

データ・アクセスとサービス・プロバイダーのモデル

この例のプロバイダー・モデル (CitizenReportProvider.model) では、レポート・データの格納にデータベース表が使用されます。

このモデルの SQL Table Create ビルダーは、完全なサービス・プロバイダー機能を生成する作業をすべて行います。このビルダーは、表の作成 (必要な場合) とデータベース表への CRUD (作成、読み取り、更新、削除) アクセスのいずれにも使用されます。さらに、表を作成するときに小さな XML ファイルから表を事前に取り込みます。列名のリストは、初期サンプル・データを格納した XML ファイルから取得されます。

これは、Web Experience Factory ビルダーを使用して、簡単なバックエンド・データへのアクセスを可能にする方法の一例です。Web サービス、REST サービス、Lotus Domino、SAP など、他のタイプのデータ・ソースへのアクセスに使用する類似したビルダーもあります。

Web Experience Factory のすべてのサービス・プロバイダー・モデルで利用できる機能の 1 つに、テスト・サポートがあります。1 つのチェック・ボックスにより、サービス・インターフェースの各操作のテストに使用する包括的なテスト・ハーネスを自動生成することができます。このテスト・サポートでは、プロバイダー・モデルを「実行」して、各操作のテストのリンクを含むページを表示できます。

図 7 は、各操作のテストのリンクを含む、生成されたテスト・ハーネスのメインページを示しています。図 8 は、listReports 操作のテスト結果を示しています。サンプル・データベース表のすべてのデータを確認できます。

図 7. 生成されたテスト・ハーネスのページ
図 8. 生成されたテスト・ハーネスのリスト・ページ

ユーザー・インターフェースとサービス・コンシューマーのモデル

この例のコンシューマー・モデルまたはユーザー・インターフェース・モデル (CitizenReport.model) では、すべてのアプリケーション UI が構築されます。このモデルは、プロバイダー・モデルで定義されているサービス・インターフェースを参照し、プロバイダーの実装に関する情報から隔離されています。この例では、Web Experience Factory のハイレベルな 3 つの UI ビルダーがすべてのアプリケーション画面を生成するために使用されます。データのビューとフォームは、プロバイダー・サービスのスキーマに基づいて自動生成されます。これは、Web Experience Factory の迅速なデータ主導開発機能の一端を示すものです。

  • Page Navigation ビルダーは、「View Citizen Reports (市民レポートの表示)」と「新規レポートの作成」のアクションが表示される初期画面 (mainMenu) の生成に使用されます。各アクションにはアイコンが関連付けられています。
  • View and Form ビルダーは、listReports および retrieveReports サービス操作のスキーマを使用して、既存レポートを表示するリスト画面と詳細画面を生成します。このビルダーはまた、希望のフォーマットを使用してデータを取得/レンダリングするためのサポート・コードをすべて生成します。さらに、必要な場合は「更新」機能を生成することもできます。
  • Input Form ビルダーは、createReports サービス操作のスキーマを使用して、新規レポートの作成用フォームを生成します。このビルダーはまた、フォーム入力の格納と検証、その収集された入力によるサービス操作の呼び出しに必要なサポート・コードをすべて生成します。

これらの 3 つのビルダーを使用して画面とサポート・コードをすべて生成したら、他のビルダーを追加してアプリケーションのカスタマイズと拡張を行います。このカスタマイズに使用する主なビルダーを以下にいくつか示します。

  • Theme ビルダーを使用して mobile_gray UI テーマを適用し、モバイルのルック・アンド・フィールをアプリケーションに付与します。さらに、このビルダーで「テーマ・プロパティーをオーバーライド」のオプションを使用して、アプリケーションのスタイルの微調整に使用される CSS ファイルを適用することもできます。ここで言う「テーマ」とはポートレット内のルック・アンド・フィールの制御に使用する Web Experience Factory のテーマのことであり、ポータル全体のナビゲーション、外観、および操作性を制御するポータル・テーマとは異なります。
  • Data Layout ビルダーはリスト・ページに使用し、各レポートの小さなサムネール写真など、体裁のよいモバイルの表示スタイルに表示を変換します。このビルダーを使用すると、定義済みのデータ・レイアウト・テンプレートにより、さまざまな表示を生成できます。各レイアウト・テンプレートは、データ・フィールド用のプレースホルダーのロケーションを含む HTML スニペットに基づいています。このビルダーの「データ・レイアウト」セクションの「名前」列でプレースホルダー、「値」列で割り当てフィールド名を確認できます。下の図 9 は、選択したレイアウトにおけるロケーションへのフィールドの割り当てを示しています。
    図 9. Data Layout ビルダーによるフィールドの割り当て
  • Data Field Settings ビルダー (図 10) は、アプリケーションの各データ・フィールドの外観と動作を制御するために使用されます。このビルダーは、共通フィールド・タイプのすべての外観と動作 (フォーマット設定、妥当性検査、タイプの編集、ピッカー、ルックアップ・テーブルなど) を定義する Rich Data Definition 共有ライブラリーを参照します。この機能により、これらの設定を 1 つの場所ですべて定義できます。すべてのポートレットの全ページの各フィールドに望みどおりの動作が自動的に付与されます。Data Field Settings ビルダーではフィールド・タイプを選択すると、ラベル、ソート、表示設定、ルックアップ・テーブルなどの他のオプションを設定できます。
    図 10. Data Field Settings ビルダー
  • Geolocation ビルダー (図 11) は、デバイスの GPS ロケーションへのアクセスに使用されます。これにより、レポートを提出した場所の緯度と経度が自動的に新規レポートにジオタギングされます。この地理位置情報のサポートは、Worklight または ハイブリッドのいずれにも依存せず、HTML5 の地理位置情報のサポートのみで実装されています。Client Event Handler ビルダーは、GeoLocationClient イベントを listen するために使用されます。イベントを受信すると、その緯度と経度が隠しフィールドとテキスト・フィールド (表示用) に設定されます。
    図 11. Geolocation ビルダー

HTML Data LayoutDisplay ManagerData Field ModifierAttribute Setter などの他のビルダーは、アプリケーション UI の詳細なカスタマイズに使用します。

このサンプルでは、レコードの削除もサポートされています。この操作は、詳細ページに適用される Button ビルダーで呼び出す、単純なアクション・リストで実行されます。

上述の各ビルダーを使用することで、体裁のよい高機能のモバイル Web アプリケーションが構築されます。このアプリケーションにより、ユーザーはデータベースに保管されている市民レポートのレコードを表示、作成、および削除することができます。次に、Worklight ライブラリーを使用してデバイスのカメラにアクセスする方法について説明します。この方法は 2 つの部分から成ります。最初に、JavaScript ライブラリーをアプリケーションで利用可能にする必要があります。次に、カメラを呼び出して写真ファイルをサーバーにアップロードするために、適切な JavaScript コードを追加する必要があります。

Worklight と JavaScript ライブラリーのアプリケーションでの利用

カメラなどのネイティブ・デバイス機能へのアプリケーション・アクセスは、Worklight が提供する JavaScript API を介して行われます。この API には、Cordova オープン・ソース・ライブラリー API とともに Worklight API も含まれます。これらの JavaScript API ライブラリーは、アプリケーションのサーバー・ベースのページからロードする必要があります。そのために、JavaScript ライブラリーをアプリケーションの WAR ファイルに組み込むこと (このサンプルで実行) も、ここで説明されているように JavaScript ファイルを WebSphere Portal テーマに組み込むこともできます。このサンプルでは、プロジェクトの WebContent/worklight フォルダーの下にこれらの JavaScript ファイルがすべて配置されます。その下には、Worklight プロジェクトで使用しているフォルダーに対応する commonwlclient のフォルダーがあります。これらのファイルをモデルに組み込むために、必要なすべての JavaScript ファイルへのスクリプト・タグ参照を備えた HTML ページの worklight_support.html が使用されます。この worklight_support.html ファイルは、以下の 2 つのビルダーを使用してモデルのページに挿入されます。

  • Imported Page ビルダーは、worklight_support.html ファイルからモデル・ページの worklight_js を作成します。
  • Inserted Page ビルダーは、インポートされたページをモデル内の他の全ページの HEAD タグに挿入します。その際、「ページの場所」入力の「拡張」オプションが使用されます。

JavaScript および Worklight API を使用したデバイス・カメラへのアクセスと画像のアップロード

Worklight API へのアクセスに使用されるすべての JavaScript は、Client JavaScript ビルダーでモデルに取り込まれた camera_support.js ファイル内にあります。このファイルには、以下に示す 2 つの関数呼び出しがあります。

  • 写真を撮影」ボタンのアクションは、関数 takePicture を呼び出します。これは、Button ビルダーで指定されます。
  • 送信」ボタンでは、Attribute Setter ビルダーが関数 uploadPhoto への呼び出しを前に付加します。この関数は、入力フォームを送信する直前に呼び出されます。

takePicture 関数は、メソッド getPicture を呼び出すことでデバイスをカメラ・モードにします (リスト 2)。

リスト 2. getPicture
navigator.camera.getPicture(onTakePictureSuccess, onTakePictureFail,
	{ quality: 50, destinationType: Camera.DestinationType.FILE_URI });

onTakePictureSuccess 関数はコールバック・メソッドであり、写真の撮影後に呼び出され、ユーザーによって確認されます。この関数は、画像の URL (デバイス上のローカル URL) を JavaScript 変数の capturedImageURL に保存し、HTML の <img> タグに「src」を設定することでその画像のサムネールを表示します。

uploadPhoto 関数は、最初に非表示の入力値をいくつかフォームで設定し、プロパティーの一部が設定済みの FileUploadOptions オブジェクトを作成して、サーバーに画像をアップロードする upload メソッドを呼び出します (リスト 3)。

リスト 3. upload
ft.upload(capturedImageURL, uploadUrl, onUploadSuccess, onUploadFail, options);

uploadUrl 値は、このモデルの uploadAction アクション・リストの URL です。この URL を取得するために、uploadAction を参照する Link ビルダーがこのモデルで使用されます。結果として得られるタグは非表示ですが (スタイルの設定は display:none)、JavaScript コードがこのタグを使用してリスト 4 に示す行の URL を取得します。

リスト 4. 変数 uploadUrl の設定
var uploadUrl = document.getElementById("upload_link").href;

ファイルのアップロードを可能にする作業に必要なコンポーネントがもう 1 つあります。リスト 5 に示す Java スクリプトレットは、Text ビルダーを使用してページに挿入します。この allowFileUpload への呼び出しにより、このセッションのアップロード・アクションを使用可能にするようにサーバーに通知されます。

リスト 5. allowFileUpload
<% com.bowstreet.webapp.util.FileUpload.allowFileUpload(webAppAccess); %>

Web Experience Factory アプリケーションのインストールと実行

Web Experience Factory アプリケーションをインストールして実行するには、次の手順に従います。

  1. モバイルおよび Dojo のフィーチャー・セットを含む Web Experience Factory プロジェクトを作成し、これを WebSphere Portal サーバーに公開します。
  2. プロジェクトを右クリックし、「インポート」 > 「Web Experience Factory アーカイブ」を選択して、サンプルの ZIP ファイルを選択します。
  3. samples/worklight フォルダーで CitizenReportProvider モデルを開きます。SQL Table Create ビルダーを開き、「Fetch Data Source Names (データ・ソース名のフェッチ)」をクリックします。SQL DataSource のドロップダウン・メニューでjdbc/CloudscapeForWEF を選択します。このデータ・ソースが存在しない場合は、これを作成するように提案されます。ビルダー内をスクロールダウンし、「テーブルの作成」ボタンをクリックします。これにより、データベース表の作成と取り込みが行われます。
  4. CitizenReport モデルを開いて実行します。データベースの既存レポートを表示できることを確認します。
  5. WebSphere Portal のテストでは、テスト・ポータル・サーバーにプロジェクトを公開し、ポートレットをページに追加します。

この時点でモデルの実行は可能ですが、カメラは利用できません。「写真を撮影」ボタンをクリックすると、インストール済みアプリケーションのコンテキストでアプリケーションを実行する必要があることを知らせるメッセージが表示されます。次のセクションでは、Worklight を使用してサーバー・ベースのアプリケーションを指す Android ネイティブ・シェル・アプリケーションを作成する方法について説明します。

Worklight Studio を使用した Android ネイティブ・シェルの構築と実行

IBM Worklight Studio を使用してネイティブ・シェル・アプリケーションを構築します。この作業を行う手順は、このシリーズのパート 1 に記載されています。パート 1 に記載されている手順をすべて完了し、このサンプルの追加ステップをここから続けます。

このサンプルは Android アプリケーションを構築しますが、そのプロセスは Apple iOS アプリケーションの場合とよく似ています。パート 1 の説明に従って Worklight アプリケーションを作成したら、このアプリケーションのアクセス権と WebSphere Portal にデプロイされた Web Experience Factory アプリケーションの URL を変更します。

ハイブリッド・アプリケーションにアクセス権を追加する必要があります。そのためには、Worklight アプリケーションで AndroidManifest.xml ファイルにナビゲートします。この例では、Worklight プロジェクトに WLWEFCitizen という Worklight アプリケーションがあります。「WLWEFCitizen」 > 「Android」 > 「ネイティブ」の順にナビゲートし、AndroidManifest.xml を開きます。ファイル編集領域の下部にある 5 番目のタブをクリックし、リスト 6 に示すアクセス権を追加します。

リスト 6. AndroidManifest.xml へのアクセス権の追加
	<uses-permission android:name="android.permission.CAMERA" />
	<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
	<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
	<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
図 12. AndroidManifest.xml の Android のアクセス権

先に述べたもう 1 つの変更は、アプリケーションの Java コードにおける URL の更新です。

Eclipse 内で、アプリケーションを初期化する Java クラスを開きます (リスト 7)。このファイルは\WLPortal\apps\WLWEFCitizen\android\native\src\com\WLWEFCitizen\WLWEFCitizen.jav にあります。

リスト 7. WLWEFCitizen.java の内容
package com.WLWEFCitizen;

import android.os.Bundle;

import com.worklight.androidgap.WLDroidGap;

public class WLWEFCitizen 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());
	}		
}

アプリケーションは、このクラスを使用してコントロールを HTML ページに転送します。このページは \WLWEFCitizen\apps\WLWEFCitizen\common\WLWEFCitizen.html にあります。

このファイルは、変更してそのサーバーのアドレスとポートに転送されるようにする必要があります。スタンドアロンの Web Experience Factory モデルの URL を使用することも、WebSphere Portal の URL を使用してアプリケーションにポートレットとしてアクセスすることもできます。そのためには、onCreate メソッドを変更してサーバーの URL をロードし、クッキー・マネージャーを使用することができます (リスト 8)。

リスト 8. WebSphere Portal URL を使用する onCreate メソッド
public void onCreate(Bundle savedInstanceState) {
   super.onCreate(savedInstanceState);
   CookieSyncManager.createInstance(appView.getContext());
   CookieManager.getInstance().removeSessionCookie();
   // For accessing via WebSphere Portal:
   // super.loadUrl("http://10.0.2.2:10039/wps/portal",false);
   // For the standalone Web Experience Factory model:
   super.loadUrl(
      "http://10.0.2.2:10039/WL/webengine/samples/worklight/CitizenReport",
      false);
}

CookieSyncManager と CookieManager の依存関係のインポートを必ず追加してください (リスト 9)。

リスト 9. 依存関係のインポート
import android.webkit.CookieSyncManager;
import android.webkit.CookieManager;

リダイレクトのために、メソッドをもう 1 つ定義して認証ページを機能させる必要があります。リスト 10 に示す loadUrl メソッドを追加します。WLWEFCitizen.java の最終的な内容をリスト 11 に示します。

リスト 10. この loadUrl メソッドの追加
public void loadUrl(String url) {
	loadUrl(url,false);
}
リスト 11. WLWEFCitizen.java の最終的な内容
package com.WLWEFCitizen;

import android.os.Bundle;
import android.webkit.CookieSyncManager;
import android.webkit.CookieManager;

import com.worklight.androidgap.WLDroidGap;

public class WLWEFCitizen extends WLDroidGap {
	@Override
	public void onCreate(Bundle savedInstanceState) {
	   super.onCreate(savedInstanceState);
	   CookieSyncManager.createInstance(appView.getContext());
	   CookieManager.getInstance().removeSessionCookie();
	   // For accessing via WebSphere Portal:
	   // super.loadUrl("http://10.0.2.2:10039/wps/portal",false);
	   // For the standalone Web Experience Factory model:
	   super.loadUrl(
	       "http://10.0.2.2:10039/WL/webengine/samples/worklight/CitizenReport",
	       false);
	}	
	
	public void loadUrl(String url) {
		loadUrl(url,false);
	}
}
図 13. IBM Worklight アプリケーションでの IBM Web Experience Factory アプリケーションの URL

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

アクセス権とアプリケーション URL でハイブリッド・フレームワークを適応させたので、Android エミュレーターを使用してこのサンプルをテストすることができます。そのためには、アプリケーションをもう一度構築してデプロイします。これを実行するには、アプリケーションを再度右クリックして「すべてをビルドしてデプロイ」を選択します。

Eclipse の右下の状況バナーで進行状況を確認できます。プロセスが完了したら、「WLWEFWLWEFCitizenAndroid」 を右クリックして「実行」 > 「Android アプリケーション」を選択します。これにより Android エミュレーターが起動し、Android アプリケーションに WebSphere Portal が表示されます。

ハイブリッド・アプリケーションが Citizen Reports ポータル・アプリケーションを更新またはインストールした後、デバイス設定のロードに数秒かかります。ページの上部にそれが表示されます (図 14)。

図 14. IBM Worklight アプリケーションに表示された Web Experience Factory の Citizen Reports アプリケーション

まとめ

ここで説明した IBM Worklight V5.0 とサーバーがホストするハイブリッド・モードの使用により、Worklight のモバイル・アプリケーション機能と IBM WebSphere Portal および IBM Web Experience Factory の優れた利点を組み合わせることができます。

  • IBM WebSphere Portal は、任意の数のアプリケーションとコンテンツから成る、すべてのモバイル・デバイスまたはデスクトップ・デバイスがアクセス可能な完全な Web サイトの作成と管理のために、優れたフレームワークを提供します。
  • IBM Web Experience Factory は、モデル・ベースのデータ主導型ツールを使用することで、マルチチャネルの包括的なモバイル Web アプリケーションの非常に迅速な開発を可能にします。
  • IBM Worklight は、(例えばアプリケーション・ストアから) デバイスにインストールして、ネイティブ・デバイス機能や通知などへのアプリケーション・アクセスが可能なアプリケーションを実現します。

中核的なアプリケーション開発に Web Experience Factory を使用することで、迅速な開発ツールとコード・ベース (モデル) を以下の対象に対してそれぞれ一元化することができます。

  • ハイブリッド・アプリケーションと純粋な Web アプリケーション
  • デスクトップ・デバイスとモバイル・デバイス
  • WebSphere Portal と WebSphere Application Server のデプロイ

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


関連トピック


コメント

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

static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=60
Zone=Lotus
ArticleID=976286
ArticleTitle=WebSphere Portal と IBM Worklight による卓越したモバイル Web エクスペリエンスの提供 (パート 4): IBM Web Experience Factory と Worklight を併用したハイブリッド・アプリケーションの作成
publish-date=07042014