Worklight を使用する: 第 1 回 初めての Worklight アプリケーションに着手する

iOS および Android 対応のアプリケーションをセットアップする

IBM では優れたモバイル・エンタープライズ・アプリケーション・プラットフォーム (MEAP) である IBM Worklight V5 によって、製品ポートフォリオ全体にわたってモバイル機能を拡充しています。Worklight プラットフォームを紹介するこの連載では、多種多様な IBM 製品を利用してモバイル・アプリケーションを作成する方法を説明します。第 1 回で説明するのは、Worklight 開発環境をセットアップして、単純なアプリケーションを作成するプロセスです。このサンプル・アプリケーションは、今後の記事で反復型開発の基礎として使用します。

Jeremy Nortey, Software Developer, IBM

Jeremy Nortey は、Software Group に所属する IBM Mobile Foundation のソフトウェア開発者として、モバイル・ソリューションのソフトウェアおよび品質保証を開発しています。iOS を専門としており、余暇は iPhone のネイティブ・アプリケーションの作成に費やしています。サッカーとランニングも趣味にしています。



Carlos Andreu , Software Developer, IBM

Carlos Andreu は、IBM Software Group のソフトウェア開発者で、現在はハイブリッド・アプリケーション、Android アプリケーション、iOS アプリケーションを構築するためのフレームワークの作成に取り組んでいます。彼は、最新のトレンドと技術関連のブログを追ったり、読書、テレビ、そしてあらゆるジャンルの音楽を楽しんだり、さまざまなことに興味を持っています。彼についての詳細は、http://dev.yapr.org/carlosandreu を参照してください。



Raj Balasubramanian, Consulting IT Architect, IBM Mobile Foundation, IBM

Raj Balasubramanian は、IBM Mobile Foundation に取り組んでいる IBM Software Group の製品アーキテクトです。彼は、IBM Worklight と IBM Mobile Foundation でのクライアントとサービスの対話を指揮しています。開発を担当する前は、顧客関連を指揮し、SOA、BPM、Web 2.0、およびポータル技術を中心としたアプリケーションおよびインフラストラクチャー関連のプロジェクトを実現してきました。彼は技術に関するあらゆるものから、歴史、数学、物理に関心を持っています。現在、オースチンにあるテキサス大学で博士号取得に励んでいるところです。彼の技術的および個人的な経歴については、http://balasubramanians.com/blog に掲載されている彼個人のブログ Gurukulam を読んでください。



2012年 7月 12日

はじめに

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

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

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

Worklight の基礎知識

今すぐ Worklight を入手してください

無償で有効期限のない IBM Worklight Developer Edition 5.0 を今すぐダウンロードしてください!

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 に、これらのコンポーネントを図示します。

図 1. Worklight コンポーネント
Worklight コンポーネント

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

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

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


環境のセットアップ

連載で最終的に作成するサンプル・アプリケーションは、極めて単純な「ToDo」アプリケーションです。このアプリケーションでは、ユーザーが単純なタスクのリストを作成すると、そのリストが表として表示され、ユーザーは各タスクの日付を確認したり、タスクを削除したり、キーワードを基準にタスクをフィルタリングしたりすることができます。アプリケーションのフロントエンド (jQuery Mobile で作成) についての説明や、アプリケーションの作成に関する詳細な説明は第 2 回で行います。

最終的な目標は「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 プラグインのインストール
    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 プロジェクトの作成
    新規 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」フォルダーの構造
    「apps」フォルダーの構造

サーバーのインストール

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

図 7. ローカル・サーバーでのアプリケーションのビルドとデプロイ
ローカル・サーバーでのアプリケーションのビルドとデプロイ

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

図 8. ローカル・サーバー・コンソール
ローカル・サーバー・コンソール

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

図 9. ローカル・サーバー・コンソールへのアクセス
ローカル・サーバー・コンソールへのアクセス

アプリケーションの開発

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

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

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

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

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

    図 10. jQuery の詳細
    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 ライブラリー
    Todo アプリケーションの参照 jQuery ライブラリー
  4. テンプレート・コードを追加します。

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

    図 12. jQuery Mobile アプリケーションのボイラープレート・コード
    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」フォルダー) がワークスペースに出現します。

図 15. ビルドとデプロイ
ビルドとデプロイ

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

図 16. Android アプリケーションの実行
Android アプリケーションの実行
図 17. Android アプリケーションのテスト
Android アプリケーションのテスト

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

図 18. iOS アプリケーションのビルドとデプロイ
iOS アプリケーションのビルドとデプロイ
図 19. テスト用の機器またはシミュレーターの選択
テスト用の機器またはシミュレーターの選択
図 20. iPhone アプリケーションのテスト
iPhone アプリケーションのテスト

まとめ

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

参考文献

学ぶために

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

コメント

developerWorks: サイン・イン

必須フィールドは(*)で示されます。


IBM ID が必要ですか?
IBM IDをお忘れですか?


パスワードをお忘れですか?
パスワードの変更

「送信する」をクリックすることにより、お客様は developerWorks のご使用条件に同意したことになります。 ご使用条件を読む

 


お客様が developerWorks に初めてサインインすると、お客様のプロフィールが作成されます。会社名を非表示とする選択を行わない限り、プロフィール内の情報(名前、国/地域や会社名)は公開され、投稿するコンテンツと一緒に表示されますが、いつでもこれらの情報を更新できます。

送信されたすべての情報は安全です。

ディスプレイ・ネームを選択してください



developerWorks に初めてサインインするとプロフィールが作成されますので、その際にディスプレイ・ネームを選択する必要があります。ディスプレイ・ネームは、お客様が developerWorks に投稿するコンテンツと一緒に表示されます。

ディスプレイ・ネームは、3文字から31文字の範囲で指定し、かつ developerWorks コミュニティーでユニークである必要があります。また、プライバシー上の理由でお客様の電子メール・アドレスは使用しないでください。

必須フィールドは(*)で示されます。

3文字から31文字の範囲で指定し

「送信する」をクリックすることにより、お客様は developerWorks のご使用条件に同意したことになります。 ご使用条件を読む

 


送信されたすべての情報は安全です。


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=60
Zone=Mobile development, WebSphere
ArticleID=824376
ArticleTitle=Worklight を使用する: 第 1 回 初めての Worklight アプリケーションに着手する
publish-date=07122012