講師だって、最初は初心者だもの[番外]jQuery Mobile 正式版の登場! 〜α→β→RC版と進化し続けて〜/森 和恵

投稿:  著者:  読了時間:9分(本文:約4,200文字)


こんにちは。森和恵です。今回は、超ショートバージョンになりますが、先日発表された jQuery Mobile 1.0 Final Release の変更点をお話しします。
※jQuery Mobile って何?の方は、以前の記事を読んでくださいね。

 |【参考】Dreamweaver CS5.5 をチェック(3)〜JQuery Mobile簡単書き出
 |しが超便利〜
 |< http://bn.dgcr.com/archives/20110728140100.html >
 |【参考】Dreamweaver CS5.5 をチェック(4) 〜Phone Gap連携でAndroid
 |アプリ作成〜
 |< http://bn.dgcr.com/archives/20110922140300.html >



●jQuery Mobile 1.0 Final Release の概要

2010年10月にα版が登場して、β版、RC...を経て一年、jQuery Mobile 1.0 Final Release が公開されました。(正式版1.0の最終バージョンということ)

 |【参考】Announcing jQuery Mobile 1.0
 |< http://jquerymobile.com/blog/2011/11/16/announcing-jquery-mobile-1-0/ >

ページ途中の「Copy-and-Paste Snippet for CDN-hosted files」で紹介されている、CDN版のソースコードを使えば手軽に導入ができます。

ひとつ注意。一緒に読み込むjQueryファイルは、1.6.4バージョンを使用してください。現在、もっと新しいバージョンがでてますが、jQuery Mobile 1.0 Final Release がサポートするのは1.6.4バージョンのみです。

 |スマートフォンで自動縮小されないようにviewport指定もしておきます。
 |<meta name="viewport" content="width=device-width, initial-scale=1">
 |【画面】< http://r360studio.com/dgcr/dgcr-extra11-1.jpg >

もうひとつ注意。基本的に下位互換だそうですが、バージョンを変えるともろもろ違いますので、テストデータでチェックをお薦めします。

 |例えば...、テーマAのデザインが変わってて、びっくりした。
 |他にも細かい所で変わってそう(汗)
 |【画面】< http://r360studio.com/dgcr/dgcr-extra11-2.jpg >

●jQuery Mobile 1.0 Final Release の改善点

β版から、1.0 Final Releaseの間にはRC1〜RC3のバージョンアップがありました。それを大まかにまとめると以下になります。

1)内部処理のパフォーマンスが向上
ページ遷移などの動きが速くなったそうです。(RC2版と比較して30〜50%向上)

 |< http://jquerymobile.com/blog/2011/11/16/announcing-jquery-mobile-1-0/#performance >

2)プラットフォームの更なる強化

スマートフォンやタブレット系(iOS5.0、Android2.3、Windows Phone7.5、Firefox Mobile、Opera Mobileなど)、デスクトップブラウザ(Chrome15、Firefox8、InternetExplorer9など)、Kindleまで幅広くサポートされました。

 |個人的に愕いたのは、Kindleのサポートです。電子書籍でのインターフェ
 |ースを見越してのことなのでしょうか。
 |< http://jquerymobile.com/blog/2011/11/16/announcing-jquery-mobile-1-0/#platforms >

3)デザインの改良

より見やすくするためのテーマデザインの改良が行われています。例えば、ダイアログのmax-width指定(デスクトップ閲覧時にダイアログの画面が広がりすぎるのを防ぐ)など。

 |ダイアログのmax-width指定のサンプル。見やすいのは歓迎ですが、
 |バージョンによって変わるのはちょっと難儀かも。
 |【画面】< http://r360studio.com/dgcr/dgcr-extra11-3.jpg >


1.0RC版からの改善点は下記で確認できます。リリース日付がURLにありますが、かなり頻繁にバージョンアップを繰り返していますね。

 |1.0RC3< http://jquerymobile.com/blog/2011/11/13/jquery-mobile-rc3-released/ >
 |1.0RC2< http://jquerymobile.com/blog/2011/10/19/jquery-mobile-1-0rc2-released/ >
 |1.0RC1< http://jquerymobile.com/blog/2011/09/29/jquery-mobile-1-0rc1-released/ >

●カスタムテーマ作成ツール ThemeRoller for Mobile

ThemeRoller は、CSSを1行も書かずにjQuery MobileのテーマをカスタマイズできるWebサービスです。
 |【参考】ThemeRoller for Mobile
 |< http://jquerymobile.com/themeroller/ >

URLにアクセスしたら、テーマごとのサンプルが並びます。必要がないテーマは削除できます(今回はわかりやすくするためにテーマAを残して削除)。

テーマの指定したい部分に画面上の色見本をドラッグしながら、カラーカスタマイズをします。Adobe Kulerと連動しており、画面右上の " Adobe Kuler swotches "より呼び出せます。

文字サイズ、アイコンやドロップシャドウなど、色以外のカスタマイズは、画面左の Globalタブで行います。また、タブを使ってテーマを追加することも可能です。

作り終えた後は、画面左上の " DownloadTheme "より、CSSファイルをダウンロードします。またここで "Share"を使うと30日間有効のカスタマイズテーマへリンクするURLが生成されます。

 |【画面】< http://r360studio.com/dgcr/dgcr-extra11-4.jpg >
 |今回、私がカスタマイズしたテーマは、下記URLでシェアされています。
 |(30日間)
 |【画面】< http://jquerymobile.com/themeroller/index.php?style_id=20111127-34 >

ダウンロードしたZIPファイルを解凍すると、themesフォルダ内にCSSファイルがあります。○○.min.cssファイルを利用します(○○はダウンロード時に名付ける任意のTheme name)。このファイルを合わせて読み込めば、オリジナルテーマの適応ができます。ひとつ注意。CSSファイルは、jQuery MobileのCSSファイルの後で読み込みます。

 |【画面】< http://r360studio.com/dgcr/dgcr-extra11-5.jpg >

●参考になるページ

今回のリリースと同時に発表されたクイックスタートガイドがよくできていて、とりあえずざっくり使い方を見たい時にはお役立ちかと思います。
※残念ながら英語版。日本語訳が待たれます。

 |【参考】Quick start guide
 |< http://jquerymobile.com/demos/1.0/docs/about/getting-started.html >

また、リソースページでは、jQuery Mobileを利用したサイトのギャラリーや書籍(残念ながら英語のみ)、関連アプリやプラグインの紹介がされていて、こちらもお役立ち情報満載。

 |【参考】Resources
 |< http://jquerymobile.com/resources/ >
 |個人的に、PhotoSwipe というプラグインが気になります。
 |Facebookのアルバムみたいな見せ方ができそう。
 |< http://www.photoswipe.com/latest/examples/04-jquery-mobile.html >


......ということで、今回の報告は終わりです。
さて、次回は......年末最後になると思うので、今年の締めくくり的な記事を書こうかと思います。また、来年始める新しいことについても紹介できればと思います。ではまた!(^θ^)

※記事へのご意見・ご要望は下記より受付ます。
< http://bit.ly/gIHFfu >

【森和恵 r360studio 〜 Web系インストラクター 〜】
<site: http://r360studio.com > <twitter: http://twitter.com/r360studio >
<mail: r360studio@gmail.com >
<サイト制作の教科書 r360study: http://www.facebook.com/r360study >

近況報告:
12月4日(日)大阪で開催される CSS Nite in OSAKA, Vol.28 のじゃんけん大会で、自主開催セミナー「jQuery Mobileでスマホサイト作成」への無料ご招待券をプレゼントします。
< http://osaka.cssnite.jp/vol28/ >←ページ中頃で告知。
また、その後開催のCSS Nite in OSAKA忘年会でも、別枠でプレゼントします。
< http://kokucheese.com/event/index/21472/ >
抽選ですが、年末最後のラッキープレゼント持って帰ってくださいね。
当日、ぜひお会いできるのを楽しみにしてます。