(この記事は、日本アイ・ビー・エム株式会社発行の「IBM developerWorks」から、日本アイ・ビー・エム株式会社の許可を得て転載したものです)
はじめに
IBM Mobile Foundationの一部となっているIBM Worklightは、さまざまな機器のプラットフォームで実行可能なWebベースの技術を使用して、迅速にモバイル・アプリケーションを作成するための堅牢なプラットフォームです。この記事では、第1回(あとでリンク)の続きとして、モバイル・ユーザーがタスクのToDoリストを作成して管理するために使用できる「Todo」という名前の完全に機能する自己完結型モバイル・アプリケーションの開発プロセスを進めます。このプロセスの中で、マルウェアによる攻撃や機器の盗難があった場合に機密情報を守るための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...(項目のフィルタリング…)」をタップします。
以上の機能をアプリケーションに追加するために行う最初のステップは、コードをアプリケーション内で特定の役割を果たすモジュールに分割することです。Todoアプリケーションは、以下のモジュールで構成されることになります(図2を参照)。
- Constantモジュール: アプリケーションで使用するさまざまな定数の取得や設定を行います。
- Listモジュール: 現行セッションのリストを保管し、イベントを処理します。イベントには、リストへの新規項目の追加、完了項目へのマーク付け、完了マークが付いた項目の削除などがあります。
- Vaultモジュール: リストの暗号化および復号を行います。Worklightの暗号化オフライン・キャッシュ機能を利用するのは、このモジュールです。
コードを構造化するには、JavaScriptの世界で広く普及している「モジュール・パターン」を使用します(「参考文献」を参照)。リスト1に、モジュール・パターンのスケルトンを記載します。名前空間(MYAPP)に含まれるオブジェクト(Module1)には、自動実行関数 (即時関数) を割り当てます。このオブジェクトで使用するグローバル・オブジェクト (つまり、ウィンドウ。ほとんどのクライアント・サイドJavaScriptでは、ウィンドウがグローバル・オブジェクトの役目を持ちます) やベンダー・ライブラリー (つまり、jQueryなど。モジュールの外部でPrototype.jsや別のライブラリーが$を使用しているとしても、モジュール内で$を使用することができます) はこの関数に渡すようにするのが賢明です。また、依存関係をリストアップして、依存関係にローカル変数を割り当てるのも望ましいプラクティスです。それは、キーと値のペアを検索するよりも、ローカル変数にアクセスしたほうが早いからです。
以下はその一例です。
var eoc = WL.EncryptedCache; eoc.open()
いずれかのモジュールの中でopen関数を呼び出す必要が生じるたびに、JavaScriptでWLオブジェクトを検索し、続いてopen関数が含まれる別のオブジェクトを指すEncryptedCacheキーを検索するよりも、上記のように変数を割り当てるほうが賢い方法です。
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の関数内で宣言された変数はコードの実行時に「ホイスト」される (関数の先頭で宣言されたように扱われる)こと、また変数を使用し忘れると、望ましくない結果(同じ名前のグローバル変数が上書きされるなど)になる場合があることが挙げられます。
//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の一部として作成して、テンプレートを代わりに使用することは避けてください (「参考文献」を参照)。