Skip to content

Latest commit

 

History

History
308 lines (218 loc) · 15.3 KB

Alloy_Quick_Start.md

File metadata and controls

308 lines (218 loc) · 15.3 KB

Alloy クイックスタート

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

概要

本文書では Alloy のコマンドライン・インタフェース (CLI) のインストール方法と、クイックプロジェクトの作成方法について説明します。

CLI のインストール

Alloy の CLI とプラグインは Alloy Studio によって自動的にインストールされます。Titanium Studio Quick Startを確認して下さい。もしインストールで問題があったり、Alloy CLI を独立にインストールしたい場合は、下記の手動インストールの説明を参照してください。

手動インストール

Alloy CLI をインストールする前に Titanium SDK 3.0.x 以上、および Titanium CLI がインストール・設定されている必要があります。Setting up the Titanium CLI を参照して下さい。

http://nodejs.org/#download から Node.js をダウンロードし、インストールして下さい。Node.js には Alloy をインストールするのに必要な npm パッケージマネージャが含まれています。コンソール画面で、以下のコマンドを実行して Alloy をインストールして下さい。

$ sudo npm install -g alloy

デフォルトでは最新の Alloy がインストールされます。特定のバージョンの Alloy をインストールするには、 alloy の後ろに @ マークとバージョン番号をつけてください。たとえば sudo npm install -g [email protected] を実行することで Alloy 1.0.0 をインストールすることができます。

プロジェクトを作成する

Titanium Studio を利用する

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

  1. メニューから File > New > Mobile Project を選択してください。新しく プロジェクトウィザード が立ち上がります。
  2. Available Templates で Alloy を選択し、テンプレートを選び、 Next ボタンをクリックしてください。
  3. 全てのフィールドを埋めて、 Finish ボアンをクリックしてください。

新しい Alloy プロジェクトのひな形が生成されます。もしあなたがクラシックな Titanium 開発に慣れているなら、 Resources フォルダが App および Project Explorer から隠されているので注意してください。Alloy プロジェクトに対する全ての操作は app ディレクトリで行います。

CLI を利用する

新しい Alloy プロジェクトを作成するには、Titanium CLI を用いて Titanium プロジェクトを作成し、 Alloy CLI を用いて Alloy フレームワークコンポーネントを生成してください。

$ titanium create --name=appname --id=com.domain.appname --platforms=android,ipad,iphone,mobileweb
$ cd appname
$ alloy new

Alloy プロジェクトの新しいひな形がアプリ名のディレクトリに生成されます。

シンプルな例

以下の例では Titanium KitchenSink のサンプルアプリの image_view_file.js を Alloy プロジェクトで実装します。 KitchenSink での実装例を見たい場合は、Base UI タブをクリックして、 Views > Images Views > Image File をたどってください。

<-- The following example converts the image_view_file.js file from the Titanium KitchenSink sample application to an Alloy project.

To see the example in the KitchenSink application, click on the Base UI tab, then navigate to Views > Images Views > Image File. -->

View

View ファイルでは GUI の構造を宣言します。たとえば下記のファイルの場合、画像とラベルの配置されたウィンドウを定義します。 app/views/index.xml の中身を下記の内容で置き換えてください。

<Alloy>
	<Window>
		<ImageView id="imageView" onClick="clickImage"/>
		<Label id="l">Click Image of Apple Logo</Label>
	</Window>
</Alloy>

Style

style ファイルでは view のコンポーネントのフォーマットとスタイルを定義します。たとえば下記の style の場合、ウィンドウの背景色と位置、ラベルの色と大きさ、画像の色と位置と大きさを定義しています。 app/styles/index.tss を以下の内容で置き換えてください。

"Window": {
	backgroundColor:"white"
},
"#l":{
	bottom:20,
	width: Ti.UI.SIZE,
	height: Ti.UI.SIZE,
	color:'#999'
},
"#imageView":{
	image:"/images/apple_logo.jpg",
	width:24,
	height:24,
	top:100
}

Controller

controller ファイルには、ユーザ入力に応答するプレゼンテーション層のロジックを記述します。たとえば以下のコードの場合、ユーザが画像をクリックした時にアラートダイアログを表示し、アプリケーション開始時にウィンドウを開きます。 app/controllers/index.js を以下の内容で置き換えてください。

function clickImage(e) {
	Titanium.UI.createAlertDialog({title:'Image View', message:'You clicked me!'}).show();
}

$.index.open();

Asset

app/assets/images フォルダを作成し、 apple_logo.jpg ファイルを KitchenSink プロジェクト からコピーしてください。このファイルはビルド時に Alloy によって Resources/images/apple_logo.jpg にコピーされます。

コンパイルと実行

Alloy CLI は view, style, controller を Titanium プロジェクトに変換し、プロジェクトは Titanium Studio または Titanium CLI によってビルドできるようになります。

Titanium Studio を利用する

App Explorer で Run ボタンをクリックし、デバイスを選択して、アプリケーションを起動してください。Alloy が Alloy プロジェクトのファイルから Titanium のファイルを生成し、Titanium Stadio はそれをコンパイルしてデバイスシミュレーターで起動します。

モバイルウェブプラットフォームの場合、 CLI を使ってアプリケーションをコンパイルし、それを Titanium Stadio で実行してください。アプリケーションのコンパイルには、以下のコマンドをコンソールで実行します。

$ alloy compile --config platform=mobileweb

CLI を利用する

コンソールウィンドウでプロジェクトのルートに行って、以下のコマンドを実行してください。

$ titanium build [-p platform]

Titanium CLI には Alloy CLI のフックがあるので、 Alloy コマンドを実行する必要がありません。 Titanium のビルドコマンドの詳細については Titanium Command-Line Interface Reference を参照してください。

モバイルプラットフォームの場合は、コンパイル後に Titanium Studio でアプリケーションを実行してください。

さらなる例

Alloy のシンプルな利用例をもっと見たい場合は Alloy の GitHub プロジェクトの alloy/test/app ディレクトリ を参照してください。GitHub プロジェクトにあるサンプルアプリを使うには、まずはじめにプロジェクトを clone します。

$ git clone https://github.com/appcelerator/alloy

Titanium Studio を利用する

  1. 新しい Alloy プロジェクトを作成します。
  2. File > Import を選択します。
  3. General > File System を選択して、 Next ボタンをクリックすると、 Import ダイアログが表示されます。
  4. 一番目のブラウズボタン (From directory) をクリックして、clone した Alloy プロジェクトのテストアプリケーションまでいき、 Open ボタンをクリックします。たとえば Master-Detail アプリケーションをインポートしたい場合、 alloy/test/apps/advanced/master_detail/ を選択します。
  5. 全てのフォルダとファイルを選択します。すべてにチェックマークが付いていることを確認して下さい。
  6. 二番目のブラウズボタン (Into folder) をクリックして、あなたのプロジェクトの app ディレクトリまでいき、 OK ボタンをクリックしてください。
  7. Finish ボタンをクリックしてください。サンプルアプリがあなたのプロジェクトにインポートされ、実行できるようになります。

CLI を利用する

以下のコマンドを実行します。

$ ti create --name ProjectName
$ cd ProjectName
$ alloy new
$ cp -r <path_to_alloy_git_repo>/test/apps/<path_to_app>/* apps/.
$ ti build

次に

Alloy コンセプトを読んで、 Alloy および、どのようにプロジェクトを構成するかについてより深く学んでください。そこから Alloy View, Alloy Controller, Alloy Model へのリンクに飛んで、 view, controller, model をそれぞれどのように書くかを学びます。