SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

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

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

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

  • X ポスト
  • このエントリーをはてなブックマークに追加

サーバーのインストール

 作成したアプリケーションをテストするには、そのアプリケーションをローカル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 機器に固有のフォルダーの作成

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

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
モバイル・エンタープライズ・アプリケーションの統合プラットフォーム「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 でのクライアントとサービスの対話を指揮しています。...

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

【AD】本記事の内容は記事掲載開始時点のものです 企画・制作 株式会社翔泳社

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/6817 2012/10/22 14:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング