CodeZine(コードジン)

特集ページ一覧

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

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

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2012/10/22 14:00

目次

サーバーのインストール

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

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

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

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

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

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

アプリケーションの開発

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

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

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

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

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

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

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

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

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

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

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

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

  • LINEで送る
  • このエントリーをはてなブックマークに追加

バックナンバー

連載:モバイル・エンタープライズ・アプリケーションの統合プラットフォーム「IBM Worklight」

著者プロフィール

  • Jeremy Nortey(Jeremy Nortey)

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

  • Carlos Andreu(Carlos Andreu)

    Carlos Andreu は、IBM Software Group のソフトウェア開発者で、現在はハイブリッド・アプリケーション、Android アプリケーション、iOS アプリケーションを構築するためのフレームワークの作成に取り組んでいます。彼は、最新のトレンドと技術関連のブログを追ったり、読書...

  • Raj Balasubramanian(Raj Balasubramanian)

    Raj Balasubramanian は、IBM Mobile Foundation に取り組んでいる IBM Software Group の製品アーキテクトです。彼は、IBM Worklight と IBM Mobile Foundation でのクライアントとサービスの対話を指揮しています。...

あなたにオススメ

All contents copyright © 2005-2021 Shoeisha Co., Ltd. All rights reserved. ver.1.5