Jeremy Nortey / Carlos Andreu / Raj Balasubramanian [著] 2012/10/29 14:00
このエントリーをはてなブックマークに追加

1 2 3 4 →

 IBM Worklightプラットフォームを紹介するこの連載では、多種多様なIBMソフトウェア製品を利用してモバイル・アプリケーションを作成する方法を説明します。第2回では、引き続きWorklightアプリケーションの開発プロセスを説明します。そのなかで、ハイブリッド・アプリケーションを作成する際のベスト・プラクティスを明らかにするとともに、Worklightの暗号化オフライン・キャッシュ機能について説明します。

(この記事は、日本アイ・ビー・エム株式会社発行の「IBM developerWorks」から、日本アイ・ビー・エム株式会社の許可を得て転載したものです)

はじめに

 IBM Mobile Foundationの一部となっているIBM Worklightは、さまざまな機器のプラットフォームで実行可能なWebベースの技術を使用して、迅速にモバイル・アプリケーションを作成するための堅牢なプラットフォームです。この記事では、第1回(あとでリンク)の続きとして、モバイル・ユーザーがタスクのToDoリストを作成して管理するために使用できる「Todo」という名前の完全に機能する自己完結型モバイル・アプリケーションの開発プロセスを進めます。このプロセスの中で、マルウェアによる攻撃や機器の盗難があった場合に機密情報を守るためのWorklightクライアント・ランタイムのセキュリティー対策機能である、暗号化オフライン・キャッシュ機能について説明します。

Worklightの基礎知識

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

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

 現時点で、EclipseIDEにはIBM Worklight Studioがセットアップされていて、皆さんは単純な「Hello World」タイプのアプリケーションをiOSとAndroidにデプロイする方法を十分理解できているはずです。今回は、第1回で開発を始めたTodoアプリケーションから取り掛かります。第1回で作成した初期アプリケーションをダウンロードして、Worklight Studio環境にインポートしてください(あるいは、この記事に付属のTodoアプリケーション・プロジェクト・ファイルをダウンロードすることもできます)。

アプリケーションの開発

サンプル・アプリケーションの使用

 この記事で説明するサンプル・アプリケーションは、例を示すことのみを目的とした演習として紹介しているものです。JavaScriptには大量のアプリケーション・ロジックが(特にjQueryを使用して) 取り込まれることになるため、読みやすく、信頼性が高く、矛盾のないような形でアプリケーション・ロジックを構造化するためのベスト・プラクティス、そして名前空間の使用方法に関するプラクティスなどを説明します。

 図1に、Todoモバイル・アプリケーションを実行するユーザーの一般的な操作フローを示します。要約すると、ユーザーは以下の操作を行います。

  • アプリケーションを開きます。
  • オフライン・データをセキュアに保管するためのパスコードを入力し、「Start(スタート)」をタップして2番目のパネルに進みます。
  • 最初のフィールドに新しい「Todo」項目を表すテキストを入力した後、「Add Item(項目の追加)」ボタンをタップして、その項目をリストに追加します。
  • リスト内の項目をタップして「完了」のマークを付け、項目が選択された状態にします。「Remove Done(完了項目の削除)」をタップして、完了マークが付いたすべての項目を削除します。
  • パネルに表示されている項目をフィルタリングする場合は、2番目のテキスト・フィールドに項目の名前またはその一部を入力し、「Filter Items...(項目のフィルタリング…)」をタップします。
図1.サンプル・アプリケーションのパネル
図1.サンプル・アプリケーションのパネル

 以上の機能をアプリケーションに追加するために行う最初のステップは、コードをアプリケーション内で特定の役割を果たすモジュールに分割することです。Todoアプリケーションは、以下のモジュールで構成されることになります(図2を参照)。

  • Constantモジュール: アプリケーションで使用するさまざまな定数の取得や設定を行います。
  • Listモジュール: 現行セッションのリストを保管し、イベントを処理します。イベントには、リストへの新規項目の追加、完了項目へのマーク付け、完了マークが付いた項目の削除などがあります。
  • Vaultモジュール: リストの暗号化および復号を行います。Worklightの暗号化オフライン・キャッシュ機能を利用するのは、このモジュールです。
図2.モジュールおよびモジュール間のやりとり
図2.モジュールおよびモジュール間のやりとり

 コードを構造化するには、JavaScriptの世界で広く普及している「モジュール・パターン」を使用します(「参考文献」を参照)。リスト1に、モジュール・パターンのスケルトンを記載します。名前空間(MYAPP)に含まれるオブジェクト(Module1)には、自動実行関数 (即時関数) を割り当てます。このオブジェクトで使用するグローバル・オブジェクト (つまり、ウィンドウ。ほとんどのクライアント・サイドJavaScriptでは、ウィンドウがグローバル・オブジェクトの役目を持ちます) やベンダー・ライブラリー (つまり、jQueryなど。モジュールの外部でPrototype.jsや別のライブラリーが$を使用しているとしても、モジュール内で$を使用することができます) はこの関数に渡すようにするのが賢明です。また、依存関係をリストアップして、依存関係にローカル変数を割り当てるのも望ましいプラクティスです。それは、キーと値のペアを検索するよりも、ローカル変数にアクセスしたほうが早いからです。

 以下はその一例です。

var eoc = WL.EncryptedCache; eoc.open()

 いずれかのモジュールの中でopen関数を呼び出す必要が生じるたびに、JavaScriptでWLオブジェクトを検索し、続いてopen関数が含まれる別のオブジェクトを指すEncryptedCacheキーを検索するよりも、上記のように変数を割り当てるほうが賢い方法です。

リスト1. モジュール・パターンのスケルトン
MYAPP.Module1 = (function (global, $) { 
//List dependencies: jQuery 1.7.2

//List private variables

//List private functions
var _init = function () {
console.log("I'm ready!");
}

//List one time initialization procedures 

//public API
return {
init : _init
};

}(window, jQuery)); //MYAPP.Module1

 ここで、賢いコーディング・スタイルの規約を紹介しておきます。サンプル・コードでは、定数には大文字を使用し、プライベート関数の前にはアンダーバーを追加してプライベート変数と区別します。この規約を拡張し、変数を必要とするあらゆる関数の先頭で、1つのvarで複数の変数を宣言する「single var pattern」を使用することができます。このようにする理由としては、JavaScriptの関数内で宣言された変数はコードの実行時に「ホイスト」される (関数の先頭で宣言されたように扱われる)こと、また変数を使用し忘れると、望ましくない結果(同じ名前のグローバル変数が上書きされるなど)になる場合があることが挙げられます。

リスト2. ホイストの例
//Example of Hoisting 
myname = "global";

function func() {
alert(myname); //returns: "undefined" 
var myname = "local";
alert(myname); //returns: "local"

 モジュールを駆動するのは、クロージャーと呼ばれる基本構成概念です (「参考文献」を参照)。JavaScriptでは、クロージャーが参照する関数のローカル変数は、関数がリターンした後もそのまま保持されます。これは、JavaScriptで関数によって定義されるスコープに密接に関係します。リスト1に示されているクロージャーの使用例を見てください。ここで、_init() はプライベート関数であるため、MYAPP.Module1に割り当てられた自動実行関数の外部ではアクセスできませんが、このプライベート関数への参照を持つオブジェクトを返すことは可能です。したがって、MYAPP.Module1.init()とすれば、プライベート関数に簡単にアクセスすることができます。この仕組みを可能にするのが、クロージャーです。

 JavaScript は、プログラミング・パターンについて書かれたほぼすべての本で説明されているObserverパターンと同様のイベント指向プログラミング言語です。JavaScriptのスクリプトでは、ユーザーがスクロールしたとき、HTMLタグをクリックしたとき、リンクにマウス・ポインターを重ねたときなどをはじめ、ユーザーが行うさまざまな操作のたびに、イベントが発生します。イベントはリッスンする対象とすることも、独自のイベントをトリガーすることもできます。

 従うべき重要なプラクティスには、「関心の分離」もあります。これは、マークアップ、スタイル、アプリケーション・ロジックをそれぞれ切り離しておくことを意味します。HTMLコードは、アプリケーションの構造だけを記述していなければなりません。HTMLにインライン JavaScript関数を含めることは避けるべきです。それには、イベント駆動型のコーディング・スタイルを適用することができます。つまり、インライン呼び出しが必要な特定の要素をHTMLに含める代わりに、その要素に必要なアクションをトリガーする特定のイベントを観察します。こうすることにより、アプリケーション・ロジックをHTMLのあちこちに分散させるのではなく、JavaScript内だけに集めることができます。同様に、HTMLをJavaScriptの一部として作成して、テンプレートを代わりに使用することは避けてください (「参考文献」を参照)。


1 2 3 4
→
INDEX
Worklightを使用する: 第2回 構造化モジュールを開発してIBM Worklightの暗号化オフライン・キャッシュ機能を使用する
Page1
はじめに
Worklightの基礎知識
アプリケーションの開発
Constantモジュール
Listモジュール
Vaultモジュール
まとめ
ダウンロード
参考文献
こちらの関連記事もおすすめです

プロフィール
Jeremy Nortey Jeremy Nortey

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


プロフィール
Carlos Andreu Carlos Andreu

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


プロフィール
Raj Balasubramanian Raj Balasubramanian

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


記事へのコメント・トラックバック機能は2011年6月に廃止させていただきました。記事に対する反響はTwitterやFacebook、ソーシャルブックマークサービスのコメントなどでぜひお寄せください。

スポンサーサイト