jQuery Mobile
ThemeRoller (jQuery Mobile)
JavaScriptライブラリjQueryを用いたスマートフォン・タブレット向けUIライブラリ「jQuery Mobile」ですが、現在デフォルトデザインをフラットデザインにするなど大幅なアップデートを受けた次世代版1.4がRC1(リリース候補その1)状態です。
RC1自体は結構前から公開されていたのですが、最近になってjQuery Mobileの外見(テーマ)をWebブラウザで作成できる「ThemeRoller」が1.4 RC1に対応したので、当ブログのモバイルサイトで使っているjQuery Mobileを1.4 RC1にして調整してみました。左がiOS(iPhone 5)、右がAndroid(Xperia Z、Chrome)での表示です。1.3のころからいろいろ調整してフラットデザインにしていたので、1.4になったことによる見栄えの大きな変化はありません。
ThemeRollerをjQuery Mobile 1.4で利用する注意点として、従来のテーマCSSに加えて、アイコン画像を定義するCSSファイル「jquery.mobile.icons.min.css」を参照させる必要があります。これを忘れるとアイコン(上画面だとリスト右側の「>」)が表示されません。情けないことに気づくまで小一時間悩みました。
内部的な処理や最終的に生成されるHTMLの構成もいろいろ違うようで、単純に1.3を1.4に置き換えるだけというわけにはいかず、微妙な調整を行いました。そのため移行にはある程度時間を見ておいたほうがよいでしょう。