前回はCSS的な話でしたが今回はjQuery的なお話。デザイナーであれば、jQueryの便利さに狂喜乱舞し使用したことが一度はあるのではないでしょうか？というか、JavaScriptってjQueryのことじゃないの？っていう方もいるかもしれません。
当然、jQuery大好きっこであれば、Titanium Mobileでも使いたいと思うのが当然の考えでしょう。でも、Titanium MobileでjQueryをインクルードしますと、ビルドエラーが起こります。はい、documentとかDOMってモデルがないからですね。なので、 使えません。
どうしても、使いたいという方は以下のリソースを参考にされると良いかも知れません。
TitaniumでjQueryを使う | ひげろぐ
個人的にはjQueryを使う利点はDOM操作のしやすさとクロスブラウザ対応を考えなくてよいことの2点だと考えています。Titanium Mobileにおいて、前者はそもそもDOM自体がないですし、後者はJavaScript 1.6に対応していますのでモダンブラウザ並の環境でクロスプラットフォームに関してはTitanium側がやってくれることですし、これまた特に考える 必要がありません。
てことで、jQueryを使う意味があまりないのですが、それでもjQueryに恋に恋焦がれ恋に泣いた方であれば、せめて、jQueryライクにコードを記述できればと思われるかもしれません。
あるよ(・∀・)！jQueryあるよ(・∀・)！それTiFighterでできるよ(・∀・)！
てことで、TiFighterの説明をします。@itspriddleさんが作ったti-helper.jsを自身でさらに拡張し、Titanium Mobile上でjQueryライクで記述可能にしたのがti-fighter.jsというライブラリです。
itspriddle/ti-fighter – GitHub
Githubから落としてきて任意のディレクトリに配置
// TiFighterの読み込み Ti.include('lib/ti-fighter.js'); // オブジェクトの生成とTiFighterのインスタンスを生成 var my_window = Ti.Ui.createWindow(); var w = TiFighter('my_window'); //TiFighterのメソッドで操作 w.attr('title', 'My Window'); w.close();
そのほかに、以下のようなメソッドが使えます。(* elはTiFighterのインスタンス)
拡張も可能ってことで、jQueryのプラグインみたいに書けますね。
TiFighter.fn.title = function(title) { if (title) { return this.attr('title', title); } else { return this.attr('title'); } }; var label = Ti.UI.createLabel({ title: "Hello!" }); // Hello TiFighter(my_label).title() ; // label.title is now 'Goodbye' TiFighter(my_label).title('Goodbye');
そんなわけで、僕はjQuery全然分からないので大した説明もできていないのですが、たぶん開発スピードが上がるのでしょう。
