Titanium mobile の Alloyでエロい（？）アプリをつくる。(変態アドベントカレンダー in Summer 16th Day)

この記事は変態アドベントカレンダー in Summer : ATNDの16日目です。

一つ前の記事は@razonさんのJavaの痛IDE用画像が欲しい(1) - SHI-Zoneでした。

さて、僕の前回の記事は”変態”といいながら大真面目なことを書いてしまったので、今回は変態なことを書いてみようと思います。

Alloyとは何か

Titanium Mobileというプロダクトがあります。iPhoneアプリとAndroidアプリをワンソースで書けるというものです。
このTitanium Mobileの開発元であるAppcelerator社がTitanium Mobile用のMVC フレームワークを開発しています。それがAlloy。
このAlloy。残念ながら今はまだUnstableすなわち不安定版です。よって、これを触る=人柱確定なフレームワークです。
しかしそこは変態。人柱上等！・・・いや、喜んで人柱になります！な人こそ、変態だと思うのでちょっと使ってみました。

それでは、エロい（？）アプリを作って行きます。

今回のアプリ

今回は、妹にタッチしたら「おにいちゃんのえっち！」って言われる、そんな変態にとってたまらんアプリにしてみたいと思います。ちなみに僕は妹萌えではありません。リアル妹がいるので。どちらかというと姉萌え属性をもった変態です。リアル姉がいないので。まぁ萌え属性なんてそんなもんさ。

AlloyのインストールについてはTitanium と alloy ではじめるスマートフォンアプリ開発 :: Crocos Engineering Blogを参考にしてください。node.jsでnpm install alloyってしてあげるだけです。

プロジェクトを作る

では、プロジェクトを作っていきましょう。プロジェクト名はTiElloyとしておきます。

で、次の画面に行きましてSingle Window Applicationを選択してプロジェクトを作ります。

プロジェクトができました。プロジェクトビューはこんな感じです。

ここで、プロジェクトをAlloy用にします。

Alloyコマンドを使えるようにして・・・

$ which alloy
/usr/local/bin/alloy

プロジェクトのディレクトリに移動して"Alloy New ."っと

$ cd ~/Documents/Titanium_Studio_Workspace/TiElloy
$ alloy new .

これでプロジェクトがAlloy用に変わります。

初期ソースがこんな感じ。
/app/views/index.xml

<Windowclass="container">
  <Labelid="t">Hello, World</Label>
</Window>

/app/styles/index.tss

{
   ".container":{
   "backgroundColor":"white"
   },
   "Label":{
   "width":Ti.UI.SIZE,
   "height":Ti.UI.SIZE,
   "color":"#000"
   }
}

/app/controllers/index.js

$.t.on('click',function(e){
  alert($.t.text);
});
$.index.open();

妹とじゃれあうエロいアプリにしていく

上記のソースをindex.xmlがhtmlに, index.tssがcssに、index.jsがロジック部分に相当するのはすぐお分かりになるかと思います。

この内、index.xmlに書いてあるWindowやLabelがTi.UI配下のオブジェクトに相当するようです。
なので、画像を表示するImageViewを使いたければ、LabelをImageViewとすればよさそうです。

/app/views/index.xml

<Windowclass="container">
  <ImageView id="i"></ImageView>
</Window>

tssファイルを使って画像を表示します。プロパティもそれぞれのオブジェクトで規定されているやつを使えばよさそうです。
画像はapp配下ではなく、/Resource/iphoneの中に入れなければ表示されませんでした。
/app/styles/index.tss

{
".container": {
"backgroundColor":"white"
},
"#i": {
    "image": "nc25761.png",
"height": 350,
"width":150,
"top":0,
"left":0
} 
}

ロジックは、ImageViewをタッチしたときにアラートを出せばいいので、こんな感じ
/app/controllers/index.js

$.i.on('click',function(e) {
alert("おにいちゃんのえっち！")
})
$.index.open();

で動かすと、こんな感じの画面が・・・と思ったらスクリーンショットを用意していなかった。
とりあえず、これで動きます。でも、せっかくここまで出来上がると欲望は膨らむばかりで。自分の名前で「えっち」と呼んでほしいですよね。

もっと俺好みのエロいアプリにしていく

妹には自分の名前を教えないと呼んでくれないので、教えられるようにテキストボックスを追加しましょう。

/app/views/index.xml

<Windowclass="container">
<ImageView id="i"></ImageView>
<Label id="l">おにいちゃんの名前は？</Label>
<TextField id="t"></TextField>
</Window>

テキストボックスの表示が"#t"のようになって・・・
/app/styles/index.tss

{
".container": {
"backgroundColor":"white"
},
"#i": {
    "image": "nc25761.png",
"height": 350,
"width":150,
"top":0,
"left":75
}, 
"#l": {
"top":350,
"left": 50,
"height":50,
"width":200,
"color": "#000"
},
"#t": {
"top":400,
"left":50,
"height":50,
"width":200,
"borderStyle":Ti.UI.INPUT_BORDERSTYLE_LINE 
}
}

alertを呼ぶところで、妹は自分の名前をわかってくれるんですな。
/app/controllers/index.js

$.i.on('click',function(e) {
	alert($.t.value + "おにいちゃんのえっち！");
})
$.index.open();

では、妹に「たのっちおにいちゃんのえっち！」と言ってもらいましょう！
シミュレータを起動するとこんな画面が。

で、自分の名前を教えてあげて妹に触れると・・・

よしよし、偉いぞ。

やっぱりまだまだ発展途上

さて、こうして実際に人柱になってみたのですが、なってみてしんどかったことがありました。
構文エラーをチェックしてくれません。なのでtssファイルでカンマ一個忘れただけでコンパイルエラーが出ます。
しかもパーサーエラーとしか出なくて、どこがエラーを起こしているか教えてくれない。

これで、どこがおかしいのか調べるのがしんどかったという・・・。
本リリースのときにはなんとかなっているよな。

最後に

妹の画像は舞太 - ニコニ･コモンズから頂きました。
今回のアプリはdproject21/TiElloy · GitHubで公開しています。

明日の変態アドベントカレンダーは@soudai1025さんの予定です。投稿なかったら勝手にパスしてだれかやっちゃってもいいんじゃないかな。

Create a new world

きっと誰もが新しい世界を作り続けているんだよ。