本文書はAlloy Conceptsの日本語訳です。
本ガイドでは Alloy フレームワークの重要なコンセプトについて説明します。Model View Controller フレームワークや、Convention over Configuration (設定より規約)設計、widgets、そして Backbone.js と Underscore.js のビルトイン対応について説明します。
Alloy は Model View Controller (MVC) のパラダイムを利用して、アプリケーションを3つの異なるコンポーネントに分割します。
- Model は、ルールやデータ、アプリケーションの状態を含んだビジネスロジックを提供します。
- View は、データを表示やモデルデータ操作のための GUI コンポーネントをユーザに提供します。
- Controller は、 Model と View のコンポーネント間をつなぐアプリケーションロジックを提供します。
たとえばカレンダーアプリにおいて、Model にはイベントやリマインダ、招待、連絡先情報が含まれます。View はユーザに対してカレンダーのデータやリマインダを表示したり、ユーザがイベントを登録できるようにしたりします。リマインダにおいて、 Controller は Model のデータをチェックし、 'reminder' View をユーザに対して起動します。イベント追加では、 Controller は 'add event' View を開いて、ユーザがデータを入力したら model にイベント情報を追加します。
MVC の利点は、機能を分離することでコードの再利用ができるようになることえす。たとえば、Controller のコードをほとんど同じにして、 Model のデータを変えないまま、異なるデバイスに対して特別な view を用意することができます。
Backbone.js は元々は WEB アプリケーションのために設計された、軽量な MVC フレームワークです。Alloy の Model は Backbone.js の上に構築されているので、Backbone のリッチな Model とコレクションの API を利用することができます。特別な JSON オブジェクトを吐き出す JavaScript ファイルを使って Model を定義しますが、それは、Model とコレクションをカスタマイズするための Backbone の拡張機能を利用しています。Model の作成方法の詳細は、 Alloy Model を参照してください。また、 Backbone.js の詳細は http://backbonejs.org/ を参照してください。
Alloy の View は Titanium UI コンポーネントをもとに作られています。View は XML で記述され、Titanium Style Sheets (.tss) を用いて装飾します。これらはコンポーネントの作成を抽象化しているので、 Titanium API を直接呼び出す必要がありません。Alloy は View を作成するためのコードを生成します。View の作成方法の詳細は、 Alloy View を参照してください。
Alloy の Controller は一般に、 Alloy の View と1対1に対応しています。Controller は抽象レイヤーを介さずに直接 Titanium SDK API を利用します。Controller はすべての View コンポーネントにアクセスできます。Controller の作成方法の詳細は、 Alloy Controller を参照してください。
また、Alloy は Underscore.js をビルトインでサポートしています。 Underscore.js は、配列・イテレーター用のヘルパーなど、一連の有用な機能を提供します。詳細については http://underscorejs.org/ を参照してください。
Alloy は、Titanium SDK を用いて、XML とスタイルシートを通した UI コンポーネント作成を抽象化しています。Alloy が Titanium SDK の機能を実装していなかったり、機能が UI に関連しなかった場合、あなたは常に Alloy Controller のコードの中で Titanium SDK API を利用したり、機能を実装するために CommonJS モジュールを作成したりすることができます。以下の項目では、Alloy が titanium SDK の何を抽象化しているのかを示します。
画像のような Asset を Alloy で利用する場合、Titanium SDK のマニュアルにある Resources フォルダへの参照は全て、 app/assets フォルダへの参照と置き換えてください。たとえば、 Icons and Splash Screens のマニュアルではファイルを Resources/android か Resources/iphone フォルダに配置するように書かれています。Alloy では、これらのファイルを app/asset/android か app/asset/iphone フォルダに配置してください。
- Titanium.UI.* Objects
- Titanium.Android.Menu
- Titanium.Facebook.LoginButton
- Titanium.Map
- Titanium.Media.VideoPlayer
Titanium.UI.createButton();- XML 要素です。名前空間は書かないでください。いくつかの要素については、 ns 属性をつける必要があるかもしれません。詳細は [Alloy_XML_Markup.md#Namespace] を参照してください。
<!-- Creates a button -->
<Button />- TSS 要素です。名前空間は書かないでください。オブジェクトが Titanium.UI の他の名前空間に所属していて、 Alloy で名前空間が暗黙に指定されていない場合、要素の名前でスタイルを指定することはできません。代わりに、セレクタ (XML のクラス属性) か id (XML の id 属性を) を使ってスタイルを作成してください。ALloy が暗黙的に名前空間を指定しているオブジェクトの一覧は、[Alloy_XML_Markup.md#Namespace] を参照してください。
// Does not create a button. Used to style all Button objects in the associated view.
"Button":{
// Button attributes
}Titanium Object properties
Titanium.UI.createButton({
text: "Foobar",
top: 0,
width: Ti.UI.SIZE
});- プロパティが文字列や数字、Titanium SDK の定数で表現される場合、XML 要素になります。Titanium のオブジェクトを保持するプロパティの一部は、XML タグを用いてインラインで表現することができます。詳細は [Alloy_XML_Markup.md#Property_Mapping] を参照してください。
<Button title="Foobar" top="0" width="Ti.UI.SIZE"/> プロパティが文字列や数字、Titanium SDK の定数、ディレクトリ、配列で表現される場合は TSS の属性になります。ALloy Globals や CFG 名前空間にメソッドや値を定義して、それらに TSS ファイルから間接的に参照することもできます。詳細は [Alloy_Styles_and_Themes] を参照してください。
"Button":{
title: "Foobar",
top: 0,
width: Ti.UI.SIZE
}Titanium Object methods
var button = Titanium.UI.createButton();
button.setTitle('Push Me!');Controller のコードの中で使います。Controller でオブジェクトを参照できるように XML でオブジェクトの id 属性を定義する必要があります。
// Need to give the object an ID, for example, <Button id="button" />
$.button.setTitle('Push Me!');Titanium Object events
var button = Titanium.UI.createButton();
button.addEventListener('click', doClick);関連する Controller に callback を紐付けるための XML 属性で表現します。イベント名の先頭を大文字にして、 'on' を名前の頭につけてください。
<!-- doClick needs to be declared in the associated controller -->
<Button onClick="doClick"/>開発をシンプルにするために、Alloy は設定ファイルを利用する代わりに、アプリケーションを体系化するためのディレクトリ構造と名付けの規約を利用しています。ALloy は各ファイルが特定の場所に存在する前提で動作します。以下の命名規則に従わないファイルやフォルダはすべて Alloy に無視されます。たとえば生成時に、Alloy は必須の app/views/index.xml と app/controllers/index.js を見に行き、それから、任意の関連ファイル app/styles/index.tss を参照します。Alloy がはじめの画面で使われる View と Controller を Resources/alloy/controllers/index.js に生成するのに、これらのファイルが必要です。
Alloy project で使われるディレクトリとファイルの一覧を下記に示します。
| パス | 説明 |
|---|---|
| app | アプリケーションの Model, View, Controller と assets を格納します。すべての作業はここで行われます。下記の各フォルダの説明を参照してください。 |
| app/alloy.jmk | ビルド設定のファイルです。 [Build_Configuation_File_(Alloy.jmk).md] を参照。 |
| app/alloy.js | コンポーネントを事前設定したり、メインの Controller が実行される前に Alloy のメソッドを上書きする際に使われる初期化ファイルです。[Initializer_File_(alloy.js)]を参照。 |
| app/config.json | プロジェクト設定ファイルです。詳細は [Project_Configuration_File_(config.json)] 参照。 |
| app/assets | 画像の assets や、 Resources ディレクトリにコピーされる必要のあるファイルを格納します。コードからファイルを参照するのに 'app/assets' のパスは不要です。 |
| app/controllers | app/views/filename.xml という view に対応した filename.js というフォーマットで Controller を格納します。詳細は [Alloy_Controllers] を参照。 |
| app/lib | アプリケーション特有のライブラリを格納します。普通は CommonJS のフォーマットを利用します。詳細は [Library_Code] を参照。 |
| app/migrations | _filename.js 形式でデータベースの migration ファイルを格納します。詳細は [Migrations] を参照。 |
| app/models | filename.js 形式で Model を格納します。詳細は [Alloy_Models.md] 参照 |
| app/styles | filename.tss 形式で View のスタイルを格納します。このスタイルは app/views/filename.xml に対応した View に適用されます。詳細は [Titanium_Style_Sheets.md] を参照。 |
| app/themes | 全体の GUI の assets やスタイルをカスタマイズするためのテーマを格納します。詳細は [Themes] を参照 |
| app/views | filename.xml 形式で View を格納します。オプションで app/controllers/filename.js と app/styles/filename.tss 関係します。詳細は [Alloy_XML_Markup.md] 参照。 |
| app/widgets | Widget ファイルを格納します。各 Widget は app のようなディレクトリ構造を保持します。詳細は [Widgets] 参照。 |
| i18n | 国際化と地域化のファイルを格納します。Titanium アプリと使い方は同じです。詳細は [Internationalization] 参照。 |
| Resources | app ディレクトリをもとに Alloy によって生成された Titanium のファイルが格納されます。アプリケーションをビルドすると、すべてのファイルは上書きされます。詳細は [Compilation_Process.md] を参照。 |
Notes: lib, migrations, themes, widgets フォルダは、新しいプロジェクトを作成した際に自動的には作られません。 migrations と widgets フォルダは、これらのいずれかのコンポーネントが生成された際に Alloy の CLI で作成されます。lib と themes のフォルダは手動で作成する必要があります。
alloy.jmk ファイルは、新しいプロジェクトを作成した際に自動的には作成されません。このファイルを作成するには CLI を利用してください。
Controller や View、スタイルはプラットフォーム依存の Resource を持っているかもしれません。その場合、 android, blackberry, ios, mobileweb または tizen という名前のフォルダをコンポーネントのフォルダの下に作成し、 Android や iOS, モバイルウェブなどのプラットフォーム依存のファイルをそれぞれ追加してください。
たとえば、iOS 特有の view と Andorid 特有の Controller は以下のように配置されます。
- app
- controllers
- android
- index.js
- index.js
- android
- views
- ios
- index.xml
- index.xml
- ios
- controllers
代わりに Controller や View やスタイルの中で特別な書式のコードや属性を書いて、プラットフォーム特有のコードやコンポーネントを適用することもできます。詳細は [Controller_Conditional_Code.md] と [View_Conditional_Code.md] を参照してください。
また、assets フォルダは Titanium プロジェクトにある 'Resources' フォルダと同じように、プラットフォーム特有のファイルや解像度依存の画像を配置することができます。詳細は [Platform-Specific Resources] を参照してください。
Widgets は Alloy 駆動の Titanium プロジェクトに簡単に組み込める、自己完結したコンポーネントです。コードを複数のアプリケーションで再利用したり、同じアプリケーションの中で何度も利用するために考えだされました。Widgets は専用の Model や View や Controller, スタイル、assets を保持し、app ディレクトリと同じ構成で Alloyo プロジェクト内に配置されます。
プロジェクトで Widgets を利用する方法の詳細は [Importing Widgets] を参照してください。
Widgets の作成方法の詳細は [Creating Widgets] を参照してください.
利用可能な Widgets の詳細は Alloy API documentation と Alloy github repository を参照してください。
Alloy には、アニメーションや文字列操作、表示単位の変換といった単純な特定の機能のための追加のユーティリティがあります。これらのユーティリティを 'builtins' を呼びます。これらのユーティリティを利用するには、 Controller で 'alloy' を root ディレクトリに指定して require する必要があります。たとえば、'shake' ボタンをクリックすることで現在の View を振動させるのにアニメーションの機能を利用する場合、以下のコードを Controller に追加します。
var animation = require('alloy/animation');
$.shake.addEventListener('click', function(e) {
animation.shake($.view);
});Builtin の機能や利用方法の詳細は [Alloy builtins API documentation] を参照してください。
本項では、 Alloy の CLI がどのように app フォルダのファイルを Titanium プロジェクトの Resources フォルダにコンパイルするかについて、簡単な概要を説明します。
前回ビルドされた Resources フォルダの内容は cleanup されます。プラットフォーム特有のフォルダが Resources フォルダに存在して、 app/assets フォルダには存在しない場合、そのディレクトリと中身は削除されません。
Backbone.js, Underscore.js のようなライブラリや同期アダプタ、基底クラスといった Alloy フレームワークのファイルは Resources/alloy フォルダにコピーされます。Alloy ベースのライブラリである alloy.js は Resources フォルダにコピーされます。これらのファイルはすべての Alloy プロジェクトで必要です。
プロジェクトの設定ファイルである config.json は処理されて Resources/alloy/CFG.js にコピーされます。
assets フォルダと lib フォルダのファイルは、theme の assets フォルダに存在するものも含め、 Resources フォルダにコピーされます。
ビルド設定ファイル alloy.jmk が存在する場合、ロードされます。'pre:compile' タスクが定義されていた場合、ここで実行されます。
Model のファイルが処理されます。コンパイラは Model ごとに JavaScript のファイルを生成し、それらを Resources/alloy/models フォルダにコピーします。
Widget のファイルが処理されます。コンパイラは Widget ごとにフォルダを生成し、View と Controller に応じた JavaScript のファイルを生成して、Resources/alloy/widgets フォルダにコピーします。
スタイル、 View, Controller のファイルが、Theme のスタイルフォルダにあるものや app.tss のグローバルスタイルファイルを含め、処理されます。コンパイラは View, Controller ごとに JavaScript のファイルを生成し、それらを Resources/alloy/controllers フォルダにコピーします。
Alloy はテンプレートから app.js のひな形を作成します。このファイルの中身はいくつかの Alloy モジュールを要求し、メインの View Controller の index.js を呼び出します。初期化ファイル alloy.js が存在する場合、appl.js ファイルのメインの View Controller の初期化処理の呼び出しの直前に、ファイルの中身全体がコピーされます。
ビルド設定ファイルに 'compile:app.js' 設定が定義されていた場合、ファイルが Resources ディレクトリに書きだされる前に、そのタスクが実行されます。
高速・コンパクトに最適化するために、生成されたコードは UglifyJS で処理されます。オプションで、コードを美しくすることもできます。
コードが特定のプラットフォーム用にコンパイルされた場合、そのプラットフォームで実行されない環境依存のコードはすべての削除されます。たとえば、アプリケーションが iOS 特有のコードを含んでいて、アプリケーションを Android 用にコンパイルする場合、 iOS 特有のコードはすべて削除されます。
Require された Alloy の builtin ライブラリは Resources/alloy フォルダにコピーされ、上記と同じプロセスで最適化されます。
それから、ビルド設定ファイルで定義されていた場合、 'post:compile' タスクが実行されます。