2011年4月30日土曜日

スマートフォン向けアプリ開発フレームワークとか

スマートフォン向けのアプリ提供はほぼ必須になってきているこの状況。
何で作るのか? というのは、悩ましいところですよね。

ネイティブアプリで作るのか? WEBアプリ(HTML5+CSS3)で作るのか?
...は開発者が揃っている云々もあるかもしれませんが、それよりも、そのアプリの特性/対象者によって決定する感じなのでしょうね。
会社のアプリならばインストールさせて使う系のネイティブの方が良さそうだけど、インストール無しでも..であればWEBアプリでという選択肢なのかな。あとは、Appleにお布施が可能なのかどうかとか..か。

WEBアプリの方には全然注目していなかったのですが、「ネイティブと同じような動きで、iPhoneとAndroidのマルチプラットフォーム」となるとなかなか厄介なもんですね。
どこまでこだわるか?によるんでしょうけども、対象が iPhoneだけだったらライブラリつかってなんとかなりそうだがAndroidも加わるんだったらイバラの道 というのがなんとなくの現在のイメージ。
まだ本格的に作った訳じゃないから、違うかもしんないけど。
そもそもAndroidはアプリのメニューや戻るがハードボタンなので、ネイティブアプリに見せるWEBアプリは果たしてどうなんだろう? 混乱しない? とも思わくもないのですがね。

ということで、JSで作成出来る便利ライブラリ系を最近探してみたのでいくつか書いてみます。

Sencha Touch

http://www.extjs.co.jp/products/touch/
ExtJSをベースに作成されているので、ExtJSに慣れている人なら学習コストは低そう。
HTMLは書かずにほぼJSでゴリゴリ書いていきます。
好き嫌いが別れるところですが、個人的にはHTMLで要素構造が書けないのでメンテが難しそうなイメージも。
ライセンス形態が変更になって、商用でも無料で使えるようになりました。
最終生成物はWEBアプリ。

jQueryMobile

http://jquerymobile.com/
HTMLでマークアップ+JQueryで書いていくタイプ。
ボタンとかのデザインはCSSの指定クラスを書いてその情報を元にJQueryMobileがHTMLを修正することにより反映していきます。
そのため、動的に追加したHTML要素については作成後に反映するrefresh的なJSメソッドをcallしたりする必要も有ります。
SenchaTouchと良く比較されているものを見ますが、個人的にはSenchaTouchより敷居が低い気がします。
ただ、GalaxySで見てみると画面遷移がカクついたりといまいち。
ヘッダ/フッダ固定機能も有りますが、スクロール後にヘッダ/フッダを描画しなおす感じもののです。その動きもなんだか不安定で表示されなくなったりも...

SproutCore

http://www.sproutcore.com/
AppleのMobileMeで使われているようです。
デモサイトを見てみたんですがなんかまともに動かなくて..

http://demo.sproutcore.com/sample_controls/
これを見ると、iPhoneっぽいきれいなUIが作れるコンポーネントが揃っているようです。
デザインは不得意な人にはよいかもしれません。
ライセンスはMIT license。

qooxdoo

http://qooxdoo.org/
qooxdoo1.4 が2011/4/7にリリースされて、モバイル対応も追加されたようです。
実験的に追加されたものらしく、iPhoneではデモサイトがそれなりにう動いてそうでしたが、GaralxySではヘッダ固定画面のスクロールはいまいちな動き。画面遷移のアニメーションも動かないところがいくつかありました。
でも、ヘッダ固定とか画面遷移のアニメーションとか欲しくなりそうなところを押さえてようとしている感じなので今後に期待。
ライセンスはLGPLとEPLのデュアル。

PhoneGap

http://www.phonegap.com/
JSで書いたものWebkitで動かすタイプだが、ネイティブアプリのパッケージになる。
開発環境も、iPhoneだったらXCodeらしい。
ObjectiveCの学習コストがかかるから...という人が選択するもんだと想像。
Rejectされる可能性もある?! と噂されていましたが、結局は大丈夫と落ち着いたみたい?
個人的には、フレームワークの使い方の学習コストを考えるなら、開発者だったらObjectiveCの開発コストの方が低いんじゃねの? なんても思ったり。
でも、PhoneGapのページかわいい。好き。
MITライセンス。

Titanium Mobile

http://www.appcelerator.com/products/titanium-mobile-application-development/
JSで書いたコードをネィティブコードにジェネレートするタイプ。 MASUIさんのスライドを見るとネイティブコードにジェネレートではないらしいです。 ですが、他のライブラリに比べてより多くのネイティブの機能を使えるのが特徴なんかと思います。書くJSコードもネイティブのクラスをJSのラッパーで触るのに近いイメージ。Androidだったらインテントを発行とかもできるらしい。

mogsnapはTitaniumで作成されているようです。
なんかあつくなってきている感じですよねw
PhoneGapと同様、Rejectされる可能性もある?! と噂されていましたが、リリースされているアプリもあるし大丈夫って事なんでしょうー。
ジェネレート系なので、レスポンスもWEBアプリに比べていいだろうし、ネイティブのAPIが必要になっても最悪書いちゃえばOKという柔軟さもある。
ヘッダ固定とか、画面遷移のアニメーションとか をそれらしくすれば、それなりにネイティブアプリに近くなると思うのですが、WEBアプリ(HTML5+CSS3)でクロスプラットフォームでやるにはやっぱり大変。
本当に真面目にやるんであれば、iPhone用、Android用にソース分けた方が結局よい..とかなりそうな予感もするので、それだったらTitaniumのようなジェネレートタイプって結構現実的な気もします。
まぁ、やっぱりネックなのはiPhone用を作成するにはXCodeとか、開発用ライセンスが必要って事なんですけどもねー。
価格体系 → http://www.appcelerator.com/products/plans-pricing/

jQTouch

http://jqtouch.com/
iPhoneのwebkitに最適化されているjQueryのプラグイン。
MITライセンス。

http://www.extjs.co.jp/blog/2010/06/15/sencha-press-release/
これをみると、Senchaと一緒になったの?

iScroll

http://cubiq.org/iscroll
スクロール用のライブラリ。
スマートフォン向けのWEBアプリはスクロールはネックの一つ。
ググると結構使われているみたいなんですけど、GalaxySでスクロールを見るとスクロールが動かなくなったりして動きが不安定。
使われているのはiPhone用のものなんかなぁー。
MITライセンス。

WINK Toolkit

http://www.winktoolkit.org/
かなりエフェクト系が多いです。こんなんまでいらんやろーw と思うくらい。
いっぱいdemoが用意されていますが、GalaxySでみるとFlipPageやCoverflowなど対応していないようでメニューが使用不可になっています。こちらもiPhoneメインの開発なんでしょうね。
ヘッダ固定のスクロールについてはiScrollと同じくGalaxySではちょっと怪しい動きもあるのは残念。
だけど、いろいろ参考になりそうです。
ライセンス : http://www.winktoolkit.org/download/licence.txt

mobl

https://github.com/mobl/mobl
moblという独自言語を使って開発するフレームワーク。
開発環境は魅力的なEclipse (pluginが提供される)
まだ触っていないけど、どうなんだろ?

iUI

http://code.google.com/p/iui/
iPhone用のUIが作れるJavaScriptライブラリ。
デモ : http://www.iui-js.org/mobile/demos.html#_home
New BSD ライセンス。

2011/05/02 追加

Jo

http://www.joapp.com/
IBM DevelperWorks/Jo と PhoneGap を使用してネイティブ・モバイル・アプリケーションを作成する
記事を読むかぎり、JSをWebkit上で動かすタイプなのかな。
画面管理や、データのバインドなどがあるみたいなので、デザインよりもデータ管理の方面に強いフレームワークなのかな。

appMobi

http://www.appmobi.com/index.php
MoonGift:Web上でiPhone/iPad/Androidアプリを開発する「appMobi」
• • •

2011年4月26日火曜日

JQueryのliveイベントがiPhoneのSafariで登録できない

JQueryのliveで登録したイベントがiPhoneのSafariでは動作しなくて暫くのハマり。

$('#identifier').live("click", function);

こんな感じの登録のやつです。
もち、PC上のブラウザでは動く。(多分Androidのブラウザも動いてた気がする)

なぜかiScrollに、対象のHTML要素を含んだものを入れるとイベント登録ができたりして、よけいに混乱しておりました。(理由不明)

JQueryの該当チケットは多分コレ。
Ticket #5677
LIVE CLICK EVENTS DON'T REGISTER ON MOBILESAFARI (IPHONE)
ここのコメントにありますが、回避方法は
onclick="" 属性を対象HTML要素に追加
です。

これで無事に動くようになりました。それはそれで びっくりですけども。
• • •

2011年4月1日金曜日

NSAutoreleasePoolとNSValue

さっき、ハマっていたのですが、あまりに初心者的なハマりだったので、
テストケースとしてコミットするのをやめ、ブログにメモとして残すことにしました (笑)

[NSValue valueWithCGPoint:CGPointMake(10, 10)]

[NSDate date]
のようなallocしてなくてinit***から始まらないものは、Autoreleaseで解放されちゃうので注意 ということ。

NSAutoreleasePoolなんて、つかってねーよ! という場合でも使用ライブラリによっては実は走っていた!なんて事があるのでちゃんとしとかなくてはイケマセン。

もれちゃうと、EXEC_BAD_ACCESS がでちゃったり、メモリーリークしちゃったり、このタイミングではOKなのに、その後のタイミングではNGだ ... と私のようにハマりますw

以下、簡潔にしたテストコード。
- (void)testNSValue {
    NSAutoreleasePool *pool = [[NSAutoreleasePool alloc] init];

    NSValue *nsValue = [NSValue valueWithCGPoint:CGPointMake(10, 10)];
    [nsValue retain];
    STAssertEquals((int) [nsValue retainCount], 2, @"retain したので2つになっているはず");
    
    NSObject *nsObject = [[NSObject alloc] init];
    [nsObject retain];
    STAssertEquals((int) [nsObject retainCount], 2, @"retain したので2つになっているはず");
    
    NSDate *nsDate = [NSDate date];
    [nsDate retain];
    STAssertEquals((int) [nsDate retainCount], 2, @"retain したので2つになっているはず");

    [pool release]; // autorelease を release
    
    STAssertEquals((int) [nsValue retainCount], 1, @"autorelease により1になる");
    STAssertEquals((int) [nsObject retainCount], 2, @"NSObjectはallocしてるのでautoreleaseしても2のまま");
    STAssertEquals((int) [nsDate retainCount], 1, @"autorelease により1になる");
}
• • •