ラベル jQuery の投稿を表示しています。 すべての投稿を表示
ラベル jQuery の投稿を表示しています。 すべての投稿を表示

2013年1月21日月曜日

Titanium mobileその後、とMonaca


今回の要約:
  • Titanium Updates Available
  • Titanium mobile:異常の原因
  • Monacaを試した

■Titanium Updates Available■

Titanium Studio起動時に、自分ちのMacではログイン認証求められないのに会社のMacだとid/passwordを入れないとダメってのは何が原因なのか未だに不明。

それとTitanium Studioを起動したら、Titanium Updadates Availableが出ました。「もしかして、今抱えている問題がこれで片付くかも!」とwktkしながらクリックしたら…Alloy 0.3.6だったorz

いやいや「orz」したら失礼ってかAlloyには少しは期待しているんだけど、でも、そろそろTitanium 3.0.1とか出ても良いんでないの?出てくれないかな??出てくれるよね???と思っていたものですから。すいません。

今のところMVC3層モデル対応のmobileアプリ用JavaScriptフレームワークというとSenchaが先行している感じだけど、UIレイアウトツールのないTitaniumがAlloyによってリキッドレイアウトとMVCモデルを同時に取り込むことができたら、少なくともビジネス系モバイルアプリ開発にもっと踏み込むことができる、はず。期待してます。

■Titanium mobile:異常の原因■

さて、本題。結局不具合はイベントの異常によるものでした。

selfがwindowで、すでにfocusがあるにも関わらずwindows上のTextFieldがタップされた時にself.addEventListener('focus', function() {});が呼び出されてしまうことが原因。selfのfocusイベントで初期値を設定していますが、password/emailをタップするたびに初期化されるのだからそりゃ入力できないのも当たり前。

iOSとAndroidで挙動が違いますね。iOSではTextFieldをタップしてもfocusが発火することはありません。

こういうのを潰すのは大変です…。

■Monacaを試した■

jQuery mobileというよりHTML5ならAndroidのフラグメントをいくらか吸収できるので、とりあえずお試し。以前XCodeの上でPhoneGap+jQuery mobileを動かしたことはあるものの今回のプロジェクトではAndroidが対象なので開発環境を用意しなければなりません。

一応、クロスプラットフォームであまり面倒なことなしに使える、ということでまずはMonacaを試してみました。

Monaca.mobiにアクセスしてアカウントを登録、するとすぐにブラウザ(私はSafari 6.0.2+Mountain Lion)上でIDEを使えます。このIDEがとてもブラウザ上で動いているとは思えないほど、というかEclipse上のADTよりもサクサク動くから泣けます。

IDEに付属しているスマフォビューワは必要最小限の機能で再現性も低いので、とりあえずAndroid用アプリとして提供されているMonacaデバッガを使います。今回はエミュレータ上にデバッガをインストール。
  1. Androidエミュレータ上でブラウザを起動
  2. ブラウザにMonaca.mobiのデバッガ配布URLを入力→自動的にダウンロード
  3. Downloadsからファイルをタップすればインストール完了
  4. 起動して、さっきMonaca.mobiに登録したアカウントを設定
  5. アプリ一覧が表示→デバッグしたいアプリをタップすればすぐ起動
  6. IDE上で更新したら、デバッガ上の更新ボタンをタップすればすぐに更新
もう恐ろしいほどスムーズです。

で、さくさくと試験用のGUIを作って、さてACSを読み込もうとしたら…jQueryの対象バージョンがMonacaとACSとで異なるのでアウトでしたorz

というわけで、ACSについてはダメでしたが、jQuery mobile開発環境としてはとてもよくできていますので、今後時間を見つけて試そうと思ってます。

2012年7月1日日曜日

jQueryで一部ページだけローテーション禁止にする

この週末、同僚氏からの質問を受けて、ちょっと調べてみました。

結論としては、無理です。mobile Safariが対応していません。jQuery/PhoneGapでは1つのアプリを1本のhtmlで処理しますが、htmlごとなら「ロックする/しない」を設定できるものの毎度おなじみの<div data-role="page">のブロック内だけで切り替えることはできません。

ただ、まったく方法がないわけではなくて、一つは、PhoneGapのプラグインをobjective-cで書いて、まいどおなじみのこれを実行する方法です。たぶんこれが正攻法。

 (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation
{
    return NO;
}

もう一つは「ローテートしたら無理矢理view内部を逆方向に90度ローテートして打ち消す」という力業。ここのページの一番下にコードが出ていますが、iPhoneを回転させると、追従して回転した後でまた無理矢理元に戻るところがいとおかし。

ということで、jQuery mobileでアプリを作る場合は、「一部だけ回転禁止はできないよ」ということを念頭においといた方が良いですね、というお話でした。

基本的に役に立たない情報ですいませんm(_ _)m