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

●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">
　｜【画面】< >

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

　｜例えば...、テーマAのデザインが変わってて、びっくりした。
　｜他にも細かい所で変わってそう（汗）
　｜【画面】< >

●jQuery Mobile 1.0 Final Release の改善点

β版から、1.0 Final Releaseの間にはRC１〜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指定のサンプル。見やすいのは歓迎ですが、
　｜バージョンによって変わるのはちょっと難儀かも。
　｜【画面】< >


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が生成されます。

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

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

　｜【画面】< >

●参考になるページ

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

　｜【参考】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/
>
抽選ですが、年末最後のラッキープレゼント持って帰ってくださいね。
当日、ぜひお会いできるのを楽しみにしてます。