アプリ開発欲が爆発したので余韻が続いているうちに作ってしまおうと。ちょっといじってなかったら PhoneGap の本体も Xcode もバージョンアップしていましたね。テストビルドしかしてなかったので、前のを消して2.2に入れ替えました。アップグレードしたとは言えないな…

ひとまず 2.2 でもテストプロジェクトを作って実行すると、エラーが。

画像がないよ!

missing Default-568h@2x.png というエラーが表示されます。

Retina 対応するための画像が足りていないようですが、Yes で進めば黒い適当な画像を充ててくれるのでエラーはなくなります。No を選んだ場合は自分で用意する必要があります。あとで差し替えられますし、Yes で進めて良いのではないでしょうか。

その命令は廃止予定だよ!

“invokestring” is deprecated というエラーが3箇所ほど表示されます。全部コメントアウトしてしまいましょう。

1つ目は Classes の MainViewController.m の下記、/* 〜 */ の部分です。

2つ目は AppDelegate.m の下記の部分。// でコメントアウトしたらどちらも保存しておきます。

これで3つのエラーが無くなります。

ホワイトリストを入れておきます

最初は外部サイトにアクセスできない状態なので、ホワイトリストに「*」を入れてすべて通すようにします。
プロジェクトフォルダ内、www や .xcodeproj と同じフォルダにプロジェクト名のフォルダがあります。 その中に Cordova.plist がありますのでダブルクリックするなりして普通に開きます。

ExternalHosts に[+]マークをクリックして項目を追加し、item0 に「*」(半角アスタリスク)を追加して保存。これですべての外部にアクセスできるようになりました。

あとは www の中身をガシガシいじって画面を作ります。せっかく jQuery Mobile 1.2 が出てるから活用しよっと。

スマートフォン対応サイトを作るのに便利な jQuery Mobile の最新版が発表されました。新機能としては、ポップアップ、折りたたみが可能なリスト、リストの自動振り分け機能がお目見え。動作も速くなったようです。

via: Announcing jQuery Mobile 1.2.0 Final | jQuery Mobile

jQM 1.2 を使うためには、jQuery の 1.7.0以上(~1.8.2・20121003現在)が必要です。以下のように外部から読み込んでもOK。

というわけで新機能をざっくりレビュー!

1. ポップアップ機能

デモ:jQuery Mobile Docs – Popup

基本的にはダイアログと似ています。
ポップアップとダイアログの違いは、背景が(半)透明なことと、ポップアップ画面外をタップ(クリック)すればポップアップが消えること。
ダイアログは画面が暗くなり、ボタンを押さないと消えませんでした。

ポップアップは閉じるボタンでも消すことができますし、デバイスの戻るボタン(= history.back)にも対応しています。
ただ、タブでの移動はポップアップの下画面にも有効になっています。個人的には許容範囲ですが。

使い方

ポップアップで表示させたい div に data-role=”popup” 要素を追加してidを付与し、アンカータグのリンクにidを設定します。(ダイアログの使い方とほぼ同じ)

何も設定しない場合

1行のテキストを表示します。

ツールチップ表示

複数行のテキストを表示します。画面の色は data-theme で制御。

メニューを表示

リストメニューが使えます。省スペースでいいですね。

階層メニューを表示

ネストしたメニューにも対応しています。これはいい省スペース!

ログイン画面を表示

フォームもポップアップで表示できます。

ダイアログを表示

そのへんをタップすれば消えるタイプ。こっちの方が使い勝手がイイ?

写真を表示

閉じるボタンを組み合わせて使っています。これがあれば lightbox を用意しなくてもいいですね。

その他にもできること

画面に合わせてサイズを自動調整する方法もあります。

jQuery Mobile Docs – Popup images

動画や地図も表示できます。
動画には閉じるボタンついてないので、画面外をクリックしてポップアップを消すのですが、ちょっとバグってしまいました。ビックリ。

jQuery Mobile Docs – Popup iframes

右からにゅっとメニューを出すこともできます。

jQuery Mobile Docs – Popup panels

オプションでポップアップの表示場所を変えたり、表示方法(トランジション)を変えたりすることもできます。

2. 折りたたみ可能なリスト

デモ:jQuery Mobile Docs – Collapsible lists

これは嬉しい!
今まで折り畳まれたリストを表示したい時は、折りたたみコンテンツの中に入れるしかなかったのですが、リスト自体の折りたたみ表示をできるようになりました。
しかもリストの様々な表示方法を受け継いでいるので、検索やサムネイルつきのリストも使えます。
一度開いたリストを閉じることも、そのままにしておくこともできます。
アイコンやテーマも変更可能。複雑なオプションはないので、デモを見れば直感的にわかるかと思います。

3. リストの自動振り分け機能(Autodeviders)

デモ:jQuery Mobile Docs – List Autodividers

リストに data-autodividers=”true” を設定するだけで、自動的に頭文字を割り振ってくれる機能です。
日本語もバッチリ!でした。使うときはふりがなを display:none で設定しておくと良いですよ。

実行するとこんなイメージ↓

4. その他変わったこと

スタイルシート側の変更点も多いです。

1) 表示するだけ(Read-only)のリストがフラットなスタイルになって「リンクではない」という印象が強まった。

2) controlgroups で使用しているアイコンのみのボタンがタップしにくく誤動作を招いていたため、アイコンの回りの padding を大きくし、タップしやすくなった。

3) ツールバーのボタンは mini がデフォルトに。

4) fieldcontainer で使うフォームの入力欄の右側があいていたが、端までの大きさに調整された。

5) 内部のプラグインを独立させ、必要な機能だけを使えるようになった。(カスタムダウンロード)
参考:Download Builder | jQuery Mobile(1.0アルファ版)

6) jQuery 1.8 でいくつかのコードが廃止されたことに伴って jQueryMobile1.2 + jQuery 1.8 では、Blackberry 5 と iOS 3 は対応しきれない部分がある。

7) jQuery 1.6.x はサポート対象外となった。

8) 新しいプラットフォームにも随時対応!
iOS 6、Android 4.1 (Jellybean)、Tizen(日本ではあまり使われていない)、Firefox for Android、Kindle Fire HD(電子書籍リーダー)はすでに対応済み。

9) location.href を利用したXSSに対応。
参考:Masato Kinugawa Security Blog: location.hrefの盲点
参考:jQuery Mobileのlocation.hrefのバグに起因するXSSへの対応をjQuery Mobile 1.1.1に適用したビルドを作りました – へっぽこプログラマーの日記

今まで四苦八苦しながらカスタマイズして使っていたところを、スマートに対応できるようになって嬉しいですね!


PCサイトのスマホ版を作ってます。jQuery Mobileを使ってるものの、大人の事情でAJAXは使わないようにしています。それで $.mobile.ajaxEnabled = false; だけでは済まないので、諸々の設定を再確認することにしました。

via:
グローバル設定 | jQuery Mobile 1.1.0 日本語リファレンス
http://dev.screw-axis.com/doc/jquery_mobile/api/configuring_defaults/

jQuery Mobile Docs – Configuring default settings
http://jquerymobile.com/demos/1.1.1/docs/api/globalconfig.html

ajaxEnabled default: true

jQuery Mobileは自動的にリンクのクリックやフォームのサブミット処理をAjaxで制御するようになります。ここに false を指定すると、その制御を止めます。結果、URLはハッシュベースではなく通常のHTTPリクエストによるものになります。

AJAXを使わない場合には必須の設定ですね。

hashListeningEnabled default: true

jQuery Mobileは自動的に location.hash の変更を見張り、制御します。この値を false にすると、jQuery Mobileはハッシュ変更時の制御を止めます。それにより、制御を自分自身で行ったり、あるいはディープリンクをそのままにして指定したIDへ自動スクロールさせるようなことが出来ます。

HTML内に複数のページを設定している場合は、これをfalseにすると動かなくなります。逆に、ページ内リンクを使用したい場合はfalseにしておいたほうがいいですね。

pushStateEnabled default: true

history.replaceState をサポートしているブラウザでは、AjaxによるハッシュベースのURLを通常のドキュメントパスに変換するこの機能が有効になります。もしAjaxによる遷移機能を使わない、あるいはサイトの大部分が外部へのリンクであるような場合、この機能をオフにすることをお勧めします。

ということで、下記の設定になりました。

$(document).bind(“mobileinit”, function(){
$.mobile.ajaxEnabled = false;
$.mobile.hashListeningEnabled = false;
$.mobile.pushStateEnabled = false;
});

入力欄が結構多いフォームで、なぜか3項目めくらいから入力できなくなってしまっていた。何が原因かよくわからず、でも、jQMのフォームデモでは問題ない・・・

ということでレッツ部分コピー。

どうやらヘッダに問題があることが判明。そして消去法で確認していくと、独自に設定したCSSに問題があった。これも消去法で確認していったら、判明。

html { overflow-y:scroll; }

・・・これが原因だった。しかしなんぞこれ。どうやらPC用に作っていた時のよくわからん名残みたい。

jQMでは独自のCSSで動きがおかしくなるということを肝に銘じて、メモ。

First Day: calendar

スマートフォン用画面を作るのに便利なjQuery Mobile。日付選択用のプラグインがリニューアルしたようで、現在稼働するのはこっちの方。

jQueryMobile – DateBox Demos

カレンダー形式を使用したい場合は、jQuery、jQM(1.0.1以上)、あとはコアファイルと使いたいモードのjsを読み込む。CSSも必須です。

jqm-datebox.ja.js は日本語に変換したもの。(後述)
あとは下記のように設定してあげれば動きます。

type=”date” と data-role=”datebox” と data-options=’{“mode”:”calbox”}’ は必須。(data-optionsを入れないとエラーが出て怒られました)

valueには初期値を入れてあげれば良いのですが、dateFormat で設定した型に沿うように指定する必要があります。

日本語用ファイルは個人的に設定したかったので、諸々参考にしつつ下記のようにしました。

これで万事解決~♪と思いきや、日付選択用カレンダーのヘッダは headerFormat が無視されます。それもそのはず、日付選択の場合、ヘッダに日付が入っていたら変だから。

ここまできて「7月 2012」とかいう文字が許せなかったので、headerFormatCal: “%Y年%B”, というのを追加して、jqm-datebox.mode.calbox.min.js の該当箇所をカスタマイズしました。

旧)

新)

これで 2012年7月 という表記になりました。めでたしめでたし。

(以下追記)

1.タップエリアを広げたい

ボタンをタップしないとカレンダーが開かないので、入力欄(readonly 設定してあるので入力できないけど)を全体をタップすると開くようにする。

data-options に “useFocus”:true を追加設定すればOK。イベントのトリガーはタップ(クリック)というよりフォーカスなんだね。

2.テーマを変えたい

日本語化ファイルで適用できなかったので、アレー?と思っていたら、これも data-options での設定でした。

“themeDate”:”b” などと追加設定すればOK。ただ、幾つかに項目が分かれているので、それぞれ設定してあげる必要があります。詳細はjQueryMobile – DateBox Options を参照。