Alloy_Tasks.md

Alloy タスク

本文書はAlloy Tasksの日本語訳です。

• はじめに
• Command-Line Interace
  • CLI のインストール
  • 開発版のインストール
  • 新しいアプリケーションを作成する
  • コンポーネントを生成する
    • Controller を生成する
    • View を生成する
    • Style を生成する
    • Model を生成する
    • Migration を生成する
    • Widget を生成する
    • alloy.jmk を生成する
  • Application をコンパイルする
  • Application を実行する
  • Special Project Components をインストールする
    • Compiler Plugin をインストールする
• Studio
  • Alloy Project を作成する
  • Controller を作成する
  • Model を作成する
  • Migration を作成する
  • Widget を作成する
  • アプリケーションをビルドして実行する
  • Content Assistance を利用する
  • Alloy のコードをデバッグする

はじめに

Alloy フレームワークは、プロジェクトを管理する方法を2通り用意しています。Alloy command-line interface (CLI) を使ってコンソールで Alloy コマンドを実行することも、 Titanium Stadio の GUI でそれらにアクセスすることもできます。

Command-Line Interace

Alloy は新しいプロジェクトを作成したり、コンポーネントのひな形を生成したり、Alloy のコードを Titanium のコードにコンパイルするための CLI を提供しています。

alloy --help を実行してオプションの一覧を確認するか、Alloy Command-Line Interface Reference を参照してください。

CLI のインストール

最新の Alloy CLI のインストール方法については CLI のインストール を参照してく ださい。

開発版のインストール

ここでは最新の開発版のインストール方法について説明します。

Node.js をインストールしてから、Alloy の github レポジトリを clone して、Alloy プロジェクトの root ディレクトリで npm install してください。

git clone https://github.com/appcelerator/alloy.git
cd alloy
[sudo] npm install -g .

新しいアプリケーションを作成する

このコマンドは Mobile プロジェクトのひな形を作成してから、そのひな形の存在するディレクトリで実行するべきです。プロジェクトを実行するのに必要な一部ファイルは、 Alloy CLI では生成されません。

Alloy アプリケーションを作成するには、以下のコマンドをプロジェクトの root フォルダで実行します。

alloy new [path_to_project] [template_type]

2番めのパラーメータには、 Alloy プロジェクトの場所が root ディレクトリ出ない場合に、プロジェクトの場所を指定します。

3番目のパラメータには、利用するアプリケーションのテンプレートを指定します。現在サポートされているオプションは、1画面アプリケーション用の 'default' と、タブアプリケーション用の 'two_tabbed' です。

ALloy は、 Studio や CLI に、どのように Alloy コンパイラを使うかを教える特別なコンパイラプラグインをインストールします。

新しい Alloy プロジェクトは app という名前のフォルダを持ち、そこに Alloy アプリケーションのひな形が格納されています。

コンポーネントを生成する

CLI をつかって Controller (View, Style と共に) や Model, Database Migration, Widget のひな形を生成することができます。以下のコマンドは、プロジェクトの root フォルダから実行するか、 -o のコマンドラインオプションでプロジェクトの場所を指定してください。--platform オプションを使って Platform 特有の View や Controller を作成することもできます。

Controller を生成する

Controller を Style や View と一緒に生成するには、以下のコマンドを実行してください。

alloy generate controller <name> [-o path_to_project/app] [--platform <platform>]

app/controllers/.js, app/styles/.tss, app/views/.xml が生成されます。

View を生成する

View と Style を Controller なしで生成するには、以下のコマンドを実行してください。

alloy generate view <name> [-o path_to_project/app] [--platform <platform>]

app/styles/.tss と app/views/.xml が生成されます。

Style を生成する

View, Controller 用に Style を生成するには、以下のコマンドを実行してください。

alloy generate style <name>

Style ファイルのひな形を生成するのに、 Alloy は markup ファイルの中の id と属性の名前を利用します。app/styles/.tss が生成されます。

すべての View, Controller 用に Style を生成する場合は、以下のコマンドを実行してください。

alloy generate style --all

markup ファイルで新しい id やクラス属性を追加した場合は、これらのコマンドのいずれかを実行することで、新しい属性を使って Style ファイルを更新することができます。

Model を生成する

Model を生成するには、以下のコマンドを実行してください。

alloy generate model <name> <adapter> [<col_name_1>:<col_type_1> <col_name_2>:<col_type_2> ...] [-o path_to_project/app]

4番目のパラメータには adapter タイプとして、HTML5 のローカルストレージ用の 'localStorage' (Mobile Web platform) か、 SQLite エンジン用の 'sql' (Andriod 及び iOS platform) か、 Titanium SDK のコンテキストのローカルにモデルを保存する 'properties' を指定します。

5番目のパラメータではテーブルスキーマを定義します。adapter タイプが 'sql' または 'properties' の場合に必須です。

このコマンドは app/models/.js を作成し、adapter タイプが 'sql' の場合には app/migrations/DATETIME_.js を作成します。

Migration を生成する

特定の Model に対してスタンドアローンの Migration を生成するには、以下のコマンドを実行してください。

alloy generate migration <name> [-o path_to_project/app]

このコマンドは、指定された Model 用にタイムスタンプ順に並んだ Migration ファイル (app/migrations/DATETIME_.js) を作成します。

Widget を生成する

標準の Widget を生成するには以下のコマンドを実行してください。

alloy generate widget <name> [-o path_to_project/app]

このコマンドは、プロジェクトの app/widgets パスに設定ファイル、 Controller, Style View (app/widgets//widget.json, app/widgets//controllers/widget.js, app/widgets//styles/widget.tss, and app/widgets//views/widget.xml) を生成して、デフォルトの Widget を作成します。この Widget は Alloy プロジェクトの設定ファイルである config.json の dependency へ自動的に追加されます。

alloy.jmk を生成する

ビルドをカスタマイズするための alloy.jmk ファイルを生成するには、以下のコマンドを実行します。

alloy generate jmk [-o path_to_project/app]

このコマンドは JavaScript の Makefile である app/alloy.jmk を、いくつかの task hooks と共に作成します。詳細は Build 設定ファイル (alloy.jmk) を参照してください。

Application をコンパイルする

アプリケーションをビルドするには以下のコマンドを実行してください。

alloy compile [path_to_project] [-c compile_options]

プロジェクトのルートディレクトリでこのコマンドを実行すると、ファイルが自動的に正しい場所へコンパイルされます。追加のコンパイラ設定オプションは、 -c オプションで指定します。たとえば、 -c beautify=false,deploytype=test は出力する JavaScript の beautify 機能を無効化して、テスト環境用にアプリケーションをビルドします。

Application を実行する

アプリケーションを動かすには、 Titanium CLI で titanium build コマンドを利用します。　

titanium build --platform <platform> [--project-dir <value>] [--sdk <value>] [ <platform_build_options> ]

利用可能なオプションの完全な説明は Titanium Command-Line Interface Reference guide を参照してください。

Special Project Components をインストールする

Compiler Plugin をインストールする

Alloy プロジェクトを Titanium Studio へ繋ぐコンパイラプラグインをインストールするには、以下のコマンドを実行してください。

alloy install plugin [path_to_project]

プロジェクトが旧バージョンの Alloy で作成されていた場合は、このコマンドでコンパイラプラグインをアップデートしてください。

Studio

Alloy プロジェクトの作成や管理には Studio の 3.0.0 以上も使えます。

Alloy Project を作成する

新しい Alloy プロジェクトを作成するには、 Studio を起動して、

1. メニューで File > New > Mobile Project"" を選択。 New Mobile Project のウィザードが表示されます。
2. Available Templates で Alloy プロジェクトを選択し、 Next ボタンをクリック。
3. すべてのフィールドを埋めて、 Finish ボタンをクリック

新しい Alloy プロジェクトのひな形が作成されます。Resources フォルダは App, Project Explorer で隠されているので注意してください。

Controller を作成する

View, Style とともに新しい Controller を作成するには、

1. プロジェクトの App Explorer または Project Explorer で右クリック
2. New > Alloy Controller を選択。 New Controller ダイアログが表示されます。
3. Controller name というテキストボックスで Controller の名前を入力。重複した名前を設定すると警告が表示されます。
4. OK ボタンをクリック

これで app/controllers/<name>.js, app/styles/<name>.tss, app/views/<name>.xml が生成されます。

Model を作成する

新しいモデルを作成するには、

1. プロジェクトの App Explorer または Project Explorer で右クリック
2. New > Alloy Model を選択。 New Model ダイアログが表示されます。
3. Model name というテキストボックスで Model の名前を入力。重複した名前を設定すると警告が表示されます。
4. Adapter のドロップダウンでストレージの種類を選択
   • SQL の場合、 Schema テーブル でデータベーススキーマの名前とデータタイプを入力してください。
5. OK ボタンをクリック

これで app/models/<name>.js が生成されます。

Migration を作成する

特定のモデルに対して standalone migration を生成するには、

1. プロジェクトの App Explorer または Project Explorer で右クリック
2. New > Alloy Migration を選択。 New Migration ダイアログが表示されます。
3. Migration name というテキストボックスで、データベース migration ファイルを必要としている Model の名前を入力。
4. OK ボタンをクリック

これで、指定された Model 用の時間順に並んだ migration ファイル (app/migrations/DATETIME_<name>.js) が作成されます。

Widget を作成する

Widget を作成するには、

1. プロジェクトの App Explorer または Project Explorer で右クリック
2. New > Alloy Widget を選択。 New Widget ダイアログが表示されます。
3. Widget name というテキストボックスで Widget の名前を入力。重複した名前を設定すると警告が表示されます。
4. OK ボタンをクリック

これでプロジェクトの app/widgets パスにデフォルトの Widget が作成され、 設定ファイル, Controller, Style, View: app/widgets/<name>/widget.json, app/widgets/<name>/controllers/widget.js, app/widgets/<name>/styles/widget.tss, app/widgets/<name>/views/widget.xml が作成されます。また、 Widget は Alloy プロジェクトの設定ファイル config.json の dependency に自動的に追加されます。

アプリケーションをビルドして実行する

App Explorer で Run ボタンをクリックして、実行するプラットフォームを選択してください。ビルドが終わったらアプリケーションが起動します。

Content Assistance を利用する

Studio 3.1.0 以上では Alloy ファイルに対して Content Assistance をサポートしています。現在、Alloy View XML ファイルの XML タグと属性 (Titanium のプロパティと、 "on" のついた Event)や、TSS ファイルの要素やクラス、ID 属性、 Alloy Controller の JavaScript コードに対して、コード補完を使うことができます。 ID や要素、 class、属性の名前を入力し始めると、候補がポップアップで表示されるはずです。

Alloy Controller では、関連した View ファイルで定義された id 属性の要素の中でタイプしようとすると、そのオブジェクトに対する assistance が表示されるはずです。たとえば、 markup で以下のようなコードが合った場合、

<Alloy>
    <Window id="win" class="container">
        <Label id="label">Foo</Label>
    </Window>
</Alloy>

関連する Controller ファイルで、 $.win. (末尾のピリオドも含む) を入力すると、 Ti.UI.Window class のプロパティやメソッドがポップアップされ、 $.label. とタイプすると、 Ti.UI.Label class のプロパティやメソッドがポップアップされます。Assistance を得るには、名前をすべてタイプする必要があります。

TSS ファイルでは、 id や class で関連する View ファイルで定義された要素の中でタイプすると、そのオブジェクトに対する assistance がポップアップで表示されるはずです。たとえば、先の markup の例で言うと、関連する TSS ファイルの中で ".container":{ とタイプすると Ti.UI.Window class のプロパティがポップアップされ、 "#label":{ とタイプすると Ti.UI.Label class のプロパティがポップアップされます。要素名をタイプすることもできます。Assistance を得るには、要素や class, ID の名前をすべてタイプする必要があります。

Alloy のコードをデバッグする

Alloy デバッグ・トラブルシューティング を参照してください。