はじめに

この数年の間、IBM はモバイル分野に多大な投資を行い、そのコアとなるソフトウェア製品が各種のモバイル機器に対応することを確実にするとともに、モバイル・アプリケーションを作成するためのツールとアプリケーション・ランタイムを提供しています。IBM が製品ポートフォリオ全体にわたってモバイル機能全般をさらに拡充することを可能にしたのが、IBM Worklight です。

IBM Worklight は、オープンで幅広い機能を持つ高度なモバイル・アプリケーション・プラットフォームです。IBM Worklight では、標準準拠のテクノロジーとツール、モバイル用に最適化されたミドルウェア、各種のセキュリティー・メカニズム、そして統合管理と分析機能を使用して、HTML5 アプリケーション、ハイブリッド・アプリケーション、ネイティブ・アプリケーションを効率的に開発、実行、管理することができます。

この記事では、Worklight の導入編として、モバイル・アプリケーション開発者の基本的なワークフローを確立し、アプリケーション開発用の Worklight 環境をセットアップする方法を紹介するなかで、単純な「Hello World」アプリケーションを作成する方法を説明します。連載の第 2 回では、セットアップしたこの Worklight 環境を使用して反復型アプリケーション開発を行い、「Todo」と名付けたタスク・リスト・アプリケーションを作成する単純な使用ケースを中心に、機能的なアプリケーションを作成する方法を説明します。その後の記事では、他の IBM 製品との統合をしていくことで、Worklight の機能とフィーチャーを紹介します。

Worklight の基礎知識

Worklight は、IBM Mobile Foundation に不可欠の優れたモバイル・エンタープライズ・アプリケーション・プラットフォーム (MEAP) です。Worklight プラットフォームは、以下の 4 つの主要コンポーネントで構成されています。

• IBM Worklight Studio: Worklight アプリケーションを作成するための Eclipseベースの IDE です。
• IBM Worklight デバイス・ランタイム・コンポーネント: モバイル機器上で実行されるモバイル・アプリケーション・プログラムの作成を容易にする SDK を構成するコンポーネントです。
• IBM Worklight Server: エンタープライズおよびインターネット情報ソースとのセキュアな接続を実現する Java ベースのサーバーです。
• IBM Worklight Console: モバイル・アプリケーション・エコシステム全体の管理および監視を支援するため専用の Web ベースの UI です。

図 1 に、これらのコンポーネントを図示します。

モバイル・アプリケーションを開発する際の作業の大まかな流れは、従来のアプリケーションを開発する場合と同様です。この開発手順は、以下のように要約することができます (図 2 を参照)。

1. Worklight をセットアップして、アプリケーションの作成を開始します。
2. 通常の開発およびテスト・プロセスに従い、アプリケーションを実行またはシミュレーションして、アプリケーションの機能を検証します。
3. 準備が整ったと判断したら、主要なユーザーからフィードバックを得るために、テスト・アプリケーションを公開します。
4. フィードバックに基づき、引き続きアプリケーションの改善に取り組むか、さらにテスト・ユーザーの数を増やしてアプリケーションを公開します。
5. テスト・アプリケーションの使用範囲を広げることにした場合は、アプリケーションをローカル・アプリケーション・リポジトリーすなわちプライベート・アプリケーション・リポジトリー上で限られたユーザーに対して公開することも、エンタープライズ・アプリケーション・リポジトリーすなわちパブリック・アプリケーション・リポジトリー (Apple App Store、Google Play など) に公開することもできます。

この記事の残りでは、Worklight のセットアップ、そして関連する機器の SDK のセットアップを行い、空のサンプル・アプリケーションを作成する方法を説明します。このプロセスの目的は、確実に、アプリケーションを機器で表示できるようにした上で、ローカル Worklight サーバーに公開できるようにすることです。この記事で完成したサンプル・アプリケーションが、今後のモバイル・アプリケーション開発の基礎となります。

上に戻る

環境のセットアップ

最終的な目標は「ToDo」アプリケーション (囲み記事を参照) を作成することですが、この記事の当面の目標は、モバイル・アプリケーションのビルド、デプロイ、そしてデバイス・シミュレーターでのテストを行うまでの基本的な開発ワークフローを確立することです。この目標を達成するために、まずは数少ない簡単なステップで Worklight 開発環境をセットアップするところから始めます。

1. Eclipse Java 開発用エディションの最新バージョンをダウンロードして、インストールします。

   Eclipse をダウンロードする必要がある場合は、Eclipse ダウンロード・サイトからダウンロードすることができます。この記事では、Eclipse がインストール済みであることを前提とします。詳細については、Worklight の「Getting Started」ページの資料を参照してください。

2. Worklight Eclipse プラグインをインストールします。

   Eclipse へのプラグインのインストールに慣れている読者であれば、この作業には何の問題もないはずです。Eclipse から「Help (ヘルプ)」 > 「Install New Software (新規ソフトウェアのインストール)」の順にナビゲートして、右上のほうにある「Add (追加)」ボタンをクリックします (図 3 を参照)。「Add Repository (リポジトリーの追加)」ダイアログが表示されたら、以下の情報を入力します。

   • Name (名前): Worklight Studio
   • Location (ロケーション): http://public.dhe.ibm.com/ibmdl/export/pub/software/mobile-solutions/worklight/wdeupdate/
   
   
   図 3. Eclipse プラグインのインストール
   
   
   

   ウィザードに順に表示されるステップに従って、必要な環境をダウンロードしてインストールします。

3. 機器に固有の SDK をインストールします。

   この連載で紹介するのは、Android 機器と iOS 機器の両方で機能する Worklight アプリケーションです。

   1. Android SDK をインストールします (オプション)。

      Android 開発者向けサイトで説明している手順に従って、Worklight Studio と同じ Eclipse のシェルで Android SDK およびシミュレーターをインストールします。

   2. iOS SDK をインストールします (オプション)。

      Apple 開発者向けサイトで説明している手順に従って、Mac OS マシンに Xcode をインストールします。Mac を持っていない場合、開発した Worklight アプリケーションの iOS 機器上での動作をシミュレートすることはできません。その代わりとなる方法については、以降の記事で Worklight Build オプションを使用して説明します。今回のところは、Mac をお持ちでない場合には、iOS に固有の手順を無視してください。

4. 新規 Worklight プロジェクトを開始します。

   Eclipse に新しい Worklight プロジェクトを作成できる状態になったので、「File (ファイル)」 > 「New (新規)」 > 「Worklight Project (Worklight プロジェクト)」(図 4 を参照) の順にナビゲートします (「Worklight Project (Worklight プロジェクト)」が表示されない場合は、「File (ファイル)」 > 「New (新規)」 > 「Other (その他)」 > 「Worklight Project (Worklight プロジェクト)」の順にナビゲートしてみてください)。プロジェクト・フォルダーの名前には、「Todo Project」と入力します。

   
   
   図 4. 新規 Worklight プロジェクトの作成
   
   
   
5. プロジェクトに新規アプリケーションを追加します。

   最後に、この新規に作成したプロジェクトの「apps」フォルダーに新しい Worklight アプリケーションを追加する必要があります。それには、「Todo Project」フォルダーの下にある「apps」フォルダーを右クリックして、「New (新規)」 > 「Worklight Application (Worklight アプリケーション)」(図 5 を参照) の順に選択します (このメニュー項目が表示されない場合は、「New (新規)」 > 「Other (その他)」 > 「Worklight Application (Worklight アプリケーション)」を選択してみてください)。このアプリケーションには「Todo」という名前を付けます。

   
   
   図 5. プロジェクトへのアプリケーションの追加
   
   
   

   Worklight によって、Worklight アプリケーションの開発に必要となるファイル構造が自動的に生成されます。HTML、JavaScript、CSS ファイルなど、アプリケーションを作成するために必要なファイルはすべて、「common」フォルダーに格納します。アプリケーションに「Todo」という名前を付けた時点で、アプリケーションの作成作業のこのパートは完了です。

   
   
   図 6. 「apps」フォルダーの構造
   
   
   

上に戻る

サーバーのインストール

作成したアプリケーションをテストするには、そのアプリケーションをローカル Worklight サーバーに公開する必要があります。そのための手順には、Worklight サーバーのインストール手順も含まれています。上記で作成したアプリケーションをビルドして実行することでテストするには、IBM Worklight Studio V5 に含まれているローカル・サーバーを使用することができます。アプリケーションを右クリックして、「Build All and Deploy (すべてをビルドしてデプロイ)」を選択してください。すると、ポート 8080 でローカル・サーバーが起動し、プロジェクトがアクティブになり、アプリケーションがデプロイされてブラウザーでテストできる状態になります。

一連のイベントの進行状況は、コンソールに表示されます (図 8 を参照)。

ブラウザーで http://localhost:8080/console にナビゲートすることで、ローカル・サーバーのサーバー・コンソールにアクセスすることができます。コンソールにアクセスすると、デプロイされた Todo アプリケーションが表示されます。

上に戻る

アプリケーションの開発

反復型開発のプロセスを理解できるように、この「Hello World」アプリケーションでは、開発環境の構築からシミュレーションまでの最初の反復プロセスを実演します。第 2 回では、完全な Worklight アプリケーション開発モデルを紹介するために、このアプリケーションに Todo アプリケーションの実際の画面とアプリケーション・ロジックを追加します。この初歩的なアプリケーションを作成するには以下の手順を実行します。

1. JavaScript ライブラリーを選択します。

   この例のために選択した JavaScript ライブラリーは、jQuery Mobileです。Dojo Mobile や Sencha Touch などのライブラリーを使用することもできます。あるいは、純粋な JavaScript を使用して、アプリケーションを一から作成することもできます。

2. ライブラリーをダウンロードします。

   この例では、以下の jQuery ライブラリーをダウンロードする必要があります。

   • JQuery 1.7.1
   • JQuery Mobile 1.1.0
   
   
   図 10. jQuery の詳細
   
   
   
3. ファイルを Worklight に移します。

   以下のファイルを common/js フォルダーに移します。

   • jquery-1.7.1.min.js
   • jquery.mobile-1.1.0-rc.1.min.js

   以下のファイルを common/css フォルダーに移します。

   • jquery.mobile-1.1.0-rc.1.css
   • jquery.mobile.structure-1.1.0-rc.1.min.css
   • jquery.mobile-1.1.0-rc.1/images

   図 11 に、上記のファイルを Worklight プロジェクトに追加した後のファイル構造を示します。

   
   
   図 11. Todo アプリケーションの参照 jQuery ライブラリー
   
   
   
4. テンプレート・コードを追加します。

   jQuery Mobile のドキュメントに、単純なモバイル・アプリケーションの作成を開始するための標準的なボイラープレート・コードが記載されています (図 12 を参照)。このコードを必ず、Todo アプリケーションの <body> タグの中に含めてください。

   
   
   図 12. jQuery Mobile アプリケーションのボイラープレート・コード
   
   
   
5. 機器に固有の環境を作成します。

   Todo アプリケーションは、Android 機器と iPhone 機器の両方を対象にビルドすることになっているため、それぞれの機器のタイプに対応する Worklight 環境を作成する必要があります。まず、「Todo」フォルダーを右クリックして「Worklight」 > 「Worklight Environment (Worklight環境)」の順に選択し、「Next (次へ)」をクリックします (図 13 を参照)。

   
   
   図 13. 機器の選択ウィザード
   
   
   

   リストから「iPhone」と「Android phones and tablets (Android フォンおよびタブレット)」を選択して、「Finish (完了)」をクリックします (図 12 を参照)」。これによって、iPhone および Android 用の追加プロジェクトと追加フォルダー構造が「Todo」フォルダーに作成されます。

   
   
   図 14. 機器に固有のフォルダーの作成
   
   
   

上に戻る

iOS 機器と Android 機器にデプロイ可能なアプリケーションのビルド

Worklight は、「common」という名前の 1 つのフォルダーに格納された共通ソース・ファイル (HTML、CSS、および JavaScript) と、プラットフォームごとのフォルダーに格納されたプラットフォーム固有のファイル (Android 用のファイルは「android」フォルダーに、iPhone 用のファイルは「iphone」フォルダーに格納されるといった具合です) で構成されます。例えば、iOS と Android のビルドは jQuery を使用するので、「jquery.js」ファイルが「common」フォルダーに置かれます。iOS 固有のコードがある場合には、JavaScript コードは「ios-plugin.js」ファイルに記述されて、「common/js」フォルダーではなく「iphone/js」フォルダーに格納されることになります。Worklight は共通ファイルを特定の機器の環境のそれぞれに対応させます。

ソース・コードをデプロイする準備ができたら、後は、Android アプリケーションを右クリックして「Run As (実行)」 > 「Build All and Deploy (すべてをビルドしてデプロイ)」の順に選択するだけです (図 15 を参照)。この操作によって、アプリケーションのタイトルが名前として付けられた新しいフォルダー (「<アプリケーション名>Android」フォルダー) がワークスペースに出現します。

次に、その生成されたアプリケーション・プロジェクトを右クリックして、「Run As (実行)」 > 「Android Application (Android アプリケーション)」の順に選択します (図 16 を参照)。実際の Android フォンが USB で接続されていて、設定で開発モードが有効になっていれば、アプリケーションが Android フォンで自動的に実行されます。そうでない場合は、既存の AVD (Android Virtual Device) でアプリケーションが実行され、それによってエミュレーターが起動されて、上記で入力した「Hello World」文字列が表示されます (図 16 と図 17 を参照)。

アプリケーションを iOS 機器にデプロイする手順も、Android の場合と同様です。iPhone アプリケーションを右クリックして「Run As (実行)」 > 「Build All and Deploy (すべてをビルドしてデプロイ)」の順に選択し、生成されたアプリケーション・プロジェクトを右クリックして、「Run As (実行)」 > 「Xcode project (Xcode プロジェクト)」の順にクリックします (図 18 を参照)。Xcode で、実際の機器を選択するか、iPhone または iPad シミュレーターを選択してから、「Run (実行)」ボタンをクリックします (図 19 を参照)。図 20 に、iPhone 環境で実行中のアプリケーションを示します。

上に戻る

まとめ

この入門記事では、Worklight 開発環境をセットアップし、iPhone と Android の両方を対象とした単純な「Hello World」サンプル・アプリケーションを作成しました。このセットアップには Worklight サーバー・ランタイムとすべてのサポート・ソフトウェアが組み込まれているため、Todo アプリケーションにアプリケーション・ロジックとコンテンツを追加する準備はできています。今回の記事で行った手順では、アプリケーションを作成して機器またはシミュレーターでテストするという開発ワークフローの反復をどのように行うことになるかを大まかに示しました。

参考文献

学ぶために

• Worklight 製品情報
  
  
• Worklight ドキュメント
  
  
• Apple 開発者向けサイト
  
  
• Worklight の開始手順
  
  
• ボイラープレート・コード
  
  
• Worklight Studio
  
  
• IBM developerWorks Mobile development ゾーン
  
  
• IBM developerWorks WebSphere
  
  

製品や技術を入手するために

• IBM Worklight Developer Edition 5.0
  
  
• Eclipse Java 開発用エディション
  
  
• jQuery 1.7.1
  
  
• jQuery Mobile 1.1.0
  
  

著者について

この記事を評価する

コメント

上に戻る

目次

• はじめに
• Worklight の基礎知識
• 環境のセットアップ
• サーバーのインストール
• アプリケーションの開発
• iOS 機器と Android 機器にデプロイ可能なアプリケーションのビルド
• まとめ
• 参考文献
• 著者について
• コメント