Allied ArchitectsAllied ArchitectsEngineer Blog

TitaniumでWeb風に開発できるMVCフレームワーク「Alloy」をさわってみた

2014/04/23 Titanium

どうも、高橋です。

今回は今年の開発合宿でとあるアプリをTitaniumで作ったのですがその際使ったAlloyをテーマにしたいと思います。

Alloyとは

Titaniumにビルトインで組み込まれているMVCフレームワークです。
http://docs.appcelerator.com/titanium/3.0/#!/guide/Alloy_Quick_Start
Titaniumについては当ブログでも以前紹介していますのでこちらをご覧ください。

まずは動かしてみる

まずは動かしてみましょう。
インストール等々は省略します。

File > New > Mobile App Project

で新規プロジェクトを作成します。
alloy

Alloy > Default Alloy Project
を選択します。

2014_03_29_22_01

「Project name」,「App id」はこんな感じで適当に入力して「Finish」。

そうするとこんな感じにスケルトンが作成されます。

Studio__extended__-_MyFirstAlloy_tiapp_xml_-_Titanium_Studio_-__Users_takahashikei_Documents_Titanium_Studio_Workspace

app/controllers/index.js
app/styles/index.tss
app/views/index.xml
のちほど説明しますが、これらが主にAlloyで関係してくるファイルとなります。

では実際に動かしてみましょう。
Run > Run As > xxxx
で任意のプラットフォームで実行することができます。

もちろんiPhoneやAndroidシミュレータでも動かすことができますが、
今回はHTML5アプリとして動かしてみます。

Run > Run As > Mobile Web Preview in Browser
でブラウザが立ち上がりHTML5アプリとして実行することができます。

2014_03_29_22_09

画面が立ち上がりました。クリックすると…

2014_03_29_22_11

メッセージダイアログが表示されました。

AlloyにおけるMVCとは

スケルトンで生成されたファイルを解説していきたいと思います。

index.xml

index.tss

index.js

index.xml

まずindex.xmlはWebでいうところのHTMLにあたります。
こちらのUIコンポーネントをXMLタグとして使うことができます。

書き方はだいたい想像できると思いますが、各コンポーネントのマニュアルにはAlloyでの記述例が
「Alloy XML Markup」というセクションで解説されていますので参考にしてください。
Labelの場合はこちらです。

このスケルトンでやっていることとしては
・Windowコンポーネントを配置。”container”というclass属性を付与。
・LabelコンポーネントをWindowの配下に配置。”label”というid属性を付与。クリックした際に”doClick”というfunctionを実行するようにセット。
というところですね。

index.tss

次にindex.tssですが、これはWebでいうとcssにあたります。
cssと同じようにセレクターを使ってデザインをあてることができます。

ただし、有効な範囲は対になるxmlに限ります。この場合はindex.xmlにのみ適用されます。
全画面で共用したい場合はapp.tssというファイル名にします。

このスケルトンでやっていることは
・”container”classにスタイルを指定。
・”Label”コンポーネント全体にスタイルを指定。
です。

alloyではこのxmlとtssでViewを構成していきます。

index.js

最後にindex.jsはControllerにあたります。
Controllerと言えるのかというのはまた別の議論として主処理をここに書いていくことになると思います。
Titaniumではjsファイルをインクルードできるので画面に固有の処理でなければ別だしするとよいと思われます。
http://developer.appcelerator.com/question/147879/tiinclude-in-alloy

また、$を使うとViewのコンポーネントにアクセスできます。
$.label
とすると
<Label id=”label” … />にアクセスできます。

このスケルトンでやっていることは
・”doClick”functionを定義。
・index.xmlを画面として表示
です。

この3つのファイルの関連はなんとなく理解できたかと思います。

Modelは今回触れてませんが、Backbone.jsのModelを拡張したものらしいです。
また別途記事にできればと思います。

最後に

いかがでしたでしょうか?
使ってみた私の感想としては、結局のところコンポーネントに関する知識がないと開発は思うように進まないので
その点に関してはあまりそれぞれのプラットフォームで開発するのと大差はないかもしれません。
が、ViewはかなりWebの感覚で構築できるのでWeb技術者にとっては取っ付きやすいのではないかと思います。

今回は以上になりますが、アライドアーキテクツではエンジニアを随時募集しております。
興味があればぜひこちらの採用サイトまで。

tiger
  • tiger
  • Webエンジニア
  • 最近ではコードを書く機会がめっきり減って来てプログラマー35歳限界説に恐怖しています。 このブログを口実に無理矢理新しい技術に触れていきたいと思っています。

RELATION ENTRY

シェルスクリプトだけでMySQLのクエリ結果をメールで通知する

シェルスクリプトだけでMySQLのクエリ...

2014/10/9 Shell

こんにちは。tigerです。 8月のことになりますが僕がPM的な立ち位置で関わっているGreenSnapという新サービスをリリースいたしました。 今回はそのときに作成したシェルスクリプトを晒しちゃいたいと思います。 はじめに WebサービスにつきものなのがKPIですよね。 KPIは...

続きを読む

Facebook発の新言語HackをHeroku上で動かす

Facebook発の新言語HackをHe...

2014/06/17 PHP

こんにちは。tigerです。 最近ではブログのネタが思いつかず、このブログを引退しようかと本気で考えています。 今回は奇跡的に思いついた「Hack × Heroku」をお送りしたいと思います。 Hackとは http://hacklang.org/ 2014年3月に発表されたFac...

続きを読む

tigerの記事一覧へ

ページTOPへ