読者です 読者をやめる 読者になる 読者になる

imthinker::net

ふらふらうぇぶろぐ

Alloy 1.0.0 に向けた大幅でサディスティックな変更点

iOS 6.1 に正式対応する Titanium 3.0.2 RC がリリースされました。大きな問題が無ければ Titanium 3.0.2.GA になると思いますが、同時に Alloy 1.0.0.GA もリリース目前で、 Alloy 1.0.0-cr を npm 経由でインストールすることが可能です。

sudo npm -g install alloy@1.0.0-cr

さて、この 1.0.0-cr ですが、 0.3.6 から大幅な変更が加えられています。口汚く個人の意見を述べさせてもらうならば「ふざけんな!」と言いたくなってくるぐらいなのですが、冷静になって、問題となる変更点を示しておきます。

Titanium 3.0 + のみ対応

Alloy 0.3.6 までは Titanium 2.1.x 以降対応でしたが、 Alloy 1.0.0 からは Titanium 3.0 以降のバージョンのみ対応です。 Alloy を使いたい場合は 3.0 に移行してください。

Backbone.Events API がビューとコントローラから削除

これです。これが大問題です。 … 0.3.6 までは Backbone.Events スタイルのイベントハンドリングが可能でした。そうです。過去形です。 1.0.0 では消えました。

View

<Alloy>
  <View>
    <Button id="myButton" title="Click me!" />
  <View>
<Alloy>

Controller

// 0.3.6 までは動く
$.myButton.on("click", function () {
    alert("Hello, world.");
});
// 1.0.0 からはこう書く
$.myButton.addEventListener("click", function () {
    alert("Hello, world.");
});

はい。 addEventListener です。 Backbone.js スタイルのイベントハンドリングが削除されたため、 on / off / trigger を $.id 名形式の参照から使うことはできなくなりました。 addEventListener / removeEventListener / fireEvent を組み合わせてください。

コントローラ内、要素参照の挙動変化

$.addEventListener("eventName", callbackFunction);

このような形で Alloy 直下の要素を直接参照することができなくなりました。 0.3.6 までは上記のコードであれば、 Alloy タグ直下の子要素を指していましたが、無名参照は不可能になりました。もしもコントローラへの参照が欲しければ、

<Alloy>
  <View id="viewName" />
</Alloy>

参照したい要素に ID を付加してください。そして、 $.viewName.addEventListener のようにコントローラから参照してください。

Require した要素のイベントハンドリング

これもまた大きな変更です。 Require で View の中から他の View を参照させた場合、参照元からは参照先の要素に対してイベントハンドリングすることができなくなりました。

例えばこのような2つのビューがあったとします。

index.xml

<Alloy>
  <Window class="container">
    <Require id="home" src="MyView" />
  </Window>
</Alloy>

MyView.xml

<Alloy>
  <View class="container">
    <Label>MyView</Label>
  </View>
</Alloy>

index.js

$.home.addEventListener("click", function () {
    alert("これが動くのは 0.3.6 まで");
});

index.xml は Require タグで MyView を参照しています。 id に home を割り当てているので、 $.home を index コントローラから参照させれば View の参照ができそうです。でもそれは、 0.3.6 までの話。 1.0.0 からは参照元のコントローラでキッチリ制御が必要です。

MyView.xml

<Alloy>
  <View class="container" id="home">
    <Label>MyView</Label>
  </View>
</Alloy>

MyView.js

$.home.addEventListener("click", function () {
    alert("1.0.0 からは参照元でイベントハンドラを書く");
});

先に書いたように、 $.addEventListener を使って Alloy タグ直下の要素への参照が無くなってしまいましたから、ビュー側も参照させる要素に ID を付加する必要があります。

マスタービューのようなものからスレーブビューを参照し、マスター側でイベントを取り回してスレーブに引数を渡し、何らかの処理を行うようなアプリケーションを書いている場合はアプリケーションの設計をやり直さなければならないでしょう。

Alloy CLI から alloy run が削除予定

これは小さな変更ですが、 Alloy CLI の alloy run コマンドが 1.1.0 で削除されます。コマンドライン操作で Alloy を使っている場合は Titanium CLI の titanium build を使えとのことです。

まとめ

Appcelerator のドラスティックでサディスティックな変更にアルファヒトバシラは泣いています。具体的には Alloy の超格好いいサンプルとしても見ることができる @k0sukey さんの tiTokyo アプリが 1.0.0 だと大幅に変更しなくちゃいけなくて泣ける。

アップデート

@k0sukey さんの神対応によって tiTokyo アプリが 1.0.0 に対応しました。