jQuery Mobile RC1とRC2の変更点つまみぐい

ひさびさに最新情報チェック

BetaからRCに移行する中で目立った変更は一段落付いていたので静観気味でしたが,ここらで気になった変更点だけつまみ食いメモ.

あとアップデートに必要な変更点もまとめてます.

RC1

世間がiOS5になることで期待されるトランジションとfixed(固定)ツールバーの改善は,RC1時点ではデフォルト有効にしなかったんですね.慎重に正式版のiOS5でテストしたいのだとかどーだとか,その他見出しとしては小粒なトピック.

見出しだけ追っかけると,目立った感じがしませんが,Change logを眺めると膨大な項目が改善されているようです.このあたりの項目はリアルタイムに触り続けていないと追い切れませんね...

data-role="collapsible"のcontent部分にthemeがあたるように

開閉メニューの開いたコンテンツ部分もテーマで小綺麗にできるようになりました.

<!-- http://jquerymobile.com/demos/1.0rc2/docs/content/content-collapsible.htmlより -->
<div data-role="collapsible" data-content-theme="c">
   <h3>Header swatch A</h3>
   <p>I'm the collapsible content with a themed content block set to "C".</p>
</div>

data-content-themeを付与すれば,content側にもテーマが適用されます.header部分のほう(例でいうh3)は,今まで通りdata-theme属性で指定できます.

テーマローラーとダウンロードビルダー

テーマローラーはもうすぐ!

ダウンロードビルダーは今やってる!

どちらも正式版と合わせてぐらいには出ることを期待.とかいってたら,ThemeRollerのほうきちゃってました.→ jQuery MobileのTheme Rollerきてた−! ::ハブろぐ

RC2

機能追加は一段落ついたのかと思いきや「機能じゃないもん装飾だもん!」と言わんばかりに,いくつかのfeatureが追加されてます.

個人的にRC2リリース当時はちょうど「それどころじゃない」期間だったので余計にノータッチでした

いくつかのinput[type="xxx"]にも,フォームの自動装飾が適用されるように


datetimeのspin box

datetimeのspin box

元々jQuery Mobileではrangeやsearchといった,通常のinput[type="text"]とは異なった見た目の入力要素に対して自動装飾を適用して,外観上の表示を揃えていました.

RC2ではそれらの適用範囲が広がり,time・date・month・week・datetime・datetime-local・colorの各typeのinput要素に対しても自動装飾が適用されるようになりました.

これにより例えばMobile Safari等でセレクトボックスライクな外観になっていた日時系の表示要素も,テキスト入力と同じ外観に揃えられます

入力時のサポート(日時のスピンボックス等)は,ブラウザが対応している限りは通常どおり使用されます.


アクセシビリティ配慮のヘルパクラスを追加

jQuery MobileではWAI-ARIAも積極的にサポートするなど,アクセシビリティに対する配慮も地味に行き届いています.

今回追加されたのは表示上は隠しておきたいけど,アクセシビリティの必要な対象(たとえばスクリーンリーダや検索エンジン)には提供しておきたい情報要素のためのヘルパクラスです.

端的に言うと,LABEL要素とINPUT要素をforとidでしっかり関連付ける前提にして,その上で表示上LABEL要素を隠したいなら隠して,placeholder属性で代用しましょう!という意図でしょうか.

少々乱暴ですが,現実的ですね.ほんとはplaceholder属性はlabel要素の代替じゃないよ,みたいな所もありますが,LABEL要素もバッチリ書くことを前提にしているのでセーフでしょうか.

ヘルパクラスは,ui-hidden-accessibleui-hide-labelがあり,下記のように使われます.

<!-- http://jquerymobile.com/test/docs/forms/docs-forms.html より -->

<!-- ui-hidden-accessible -->
<label for="username" class="ui-hidden-accessible">Username:</label>
<input type="text" name="username" id="username" value="" placeholder="Username"/>

<!-- ui-hide-label -->
<div data-role="fieldcontain" class="ui-hide-label">
	<label for="username">Username:</label>
	<input type="text" name="username" id="username" value="" placeholder="Username"/>
</div>

入力要素のラベルはしばしば省略されてしまうことがあったり,そうでなくてもLABEL要素とINPUT要素が適切に結びついていないこともあるような現状に対する,次善策としての提案という印象ですね.


固定ツールバーの挙動を改善

collapsibleや,listview filterのようなウィジェットが操作される際に,ページのheightが影響され,それがフッターをはじめとした固定ツールバーの描画に影響を与えていました.

これを改善するために,updateLayoutイベントが追加されました.このイベントは,あるウィジェットがレイアウトの変更を他のウィジェットに伝えることができ,変更通知を受け取ったウィジェット(例えば固定フッター)はそれに合わせて自らのレイアウトを再調整することができます.

詳しくはjQuery Mobile Framework - Fixed Toolbarsを参照のこと.このウィジェット間の通信メカニズムはサードパーティのウィジェットも同じように利用できます.いいですね〜.

その他のヘッドライン

  • Beta2で行われたチェックボックスとラジオボタンのUI刷新が,水平方向のインプットグループにも対応しました.
  • ダイアログのmax-widthが600pxに設定されました.ダイアログのwidthが100%固定だったが,タブレット以上のスクリーンサイズでイマイチだった為.
  • $.mobile.touchOverflowEnabled オプションはRC2時点でもデフォルトオフです.(正式なiOS5がリリースしたばかりで十分なテスト結果が得られていないため)

アップデート用の変更点

ここからは過去バージョンからアップデートする際に抑えておくポイントです.

RC1のUpgrade NotesRC2のUpgrade Notesを比較すると,同じ内容が書いてありますが,RC2ではRC1を(自分のように)スキップしたひと向けに再掲してあるみたいです.

RC1とRC2共通

正式リリースに向けて,非推奨だったものを中心にナタが振り下ろされた変更ですね.それなりに前のバージョンで手の込んだ実装を試していたひとがアップデートする場合は,気をつける点があるかも.

Layout Helpersの廃止 : Media Queriesと同じような目的で使うHTML要素へのLayout Helpersクラスの付与が廃止されました.古いIEでは個別にRespond.jsを適用するのが勧められています.これらはBeta1から非推奨&削除予定とされていました.

古いpageイベント名の廃止 : 後方互換で残されていたpageイベントbeforechangepage,changepage,changepagefailedが廃止されました.Beta3での変更によるものです.

$.mobile.changePage()の後方互換性廃止 : changePageメソッドが持っていたalphaバージョン以前との後方互換性が廃止されました.これはBeta1での変更によるものです.

$.mobile.updateHash, $.mobile.urlstack, $.fixedToolbarsプロパティの廃止 : 非推奨化されていたいくつかのプロパティが廃止されました.

$.mobile.pageLoading()の廃止 : 廃止されたこのメソッドのかわりに,$.mobile.showPageLoadingMsg()$.mobile.hidePageLoadingMsg()が利用できます.

そろそろ正式版?

順当に行けば,そろそろ最後のRCがリリースされて,そのまま正式版という運びになると思います.ひさびさにRC2で触れたら,着実に挙動が良くなってきている印象なので,なかなかよい感じですね.


Author

ahomuAyumu Sato

KINTOテクノロジーズ株式会社

Web 技術、組織開発、趣味など雑多なブログ。技術の話題は zenn、ご飯の話題はしずかなインターネットにも分散して投稿しています。

Bio: aho.mu
X: @ahomu
Zenn: ahomu
GitHub: ahomu
Sizu: ahomu

Related

Latest

Archives

Tags

Search