jQueryMobileを使ってのスマートフォンサイトの構築メモ

徐々にjQuery Mobileのバージョンが上がってきて、だいぶ動きもスピード感もいい感じになってきたので、
そろそろスマートフォンサイトの構築で採用されはじめているのではないでしょうか。
この記事では個人的に、どうやるのか分からなくて調べたことをまとめてみました。

また最新の情報は、jquerymobile (jquerymobile) on Twitterをフォローしとくとよいかもしれません。

では、まずはスマートフォンサイトを構築するときにきっと役に立つTipsからご覧ください。

iPhoneシミュレータ

iPhoney

Macを使っているならiPhoneyがピッタリでしょう。
かなり安定しているし、デザインやJavaScriptの動きもとくに問題ない。

要素の位置やCSSのデザインなどを確認するなら、これがあればよいかも。
最終的には実機で見る必要があるけど、とりあえずこれがあれば困らない。

iPhoney

iBBDemo2

Windows版ならこれが主流なんですかね。
Safariが入っていないと動かないので、まずはSafariのインストールから。

でもSafariで見たときと、iBBDemo2で見たときでデザインの崩れ具合が結構違う。
iBBDemo2はJavaScriptの動きもちょっとおかしいので、実機でも見る前にチョロっと見る用なのかもしれません。

iBBDemo2 - Cross Platform iPad and iPhone Simulator

SafariでUAを変える

Safariの「開発メニュー」 → 「ユーザーエージェント」からiPhone、iPad、iPod Touchなどを選べるのでいずれかを選択。
これだけでスマホなUAになってくれるので、いろんなスマホサイトを見たい場合はこれが一番便利かもしれませんね。
Webインスペクタで要素のチェックなどもできるので便利！。

iPhone SDKに付いてくるiPhone Simulator.appを使う

iOS Dev Center - Apple Developer
より「Xcode and iOS SDK」をインストールするとiPhoneシミュレーターが付いてくるので、これを起動します。

iPhoneプロジェクトを作ってビルドをすると自動で立ち上がるので、それを使ってもいいんですが毎回ビルドするのも面倒なので、
以下の場所にあるアプリを直接起動します。

/Developer/Platforms/iPhoneSimulator.platform/Developer/Applications/iPhone Simulator.app

ちなみに僕のMacはまだ10.5を使っているので、最新のSDKを入れられません。
ゆえに、iPhoneシミュレーターもちょっと古い？ためか実機とCSSの当たり方が少し違いました。

[via]
iPhoneシミュレーターを試す。Safariがサクサク、日本語入力も可 : Media Technology Labs (MTL) : メディアテクノロジーラボ　ブログ

Androidシミュレータ

Androidエミュレータのインストール方法

かなり重いが一応Androidのエミュレータ入れたい人向け。
以下の記事を参考にすればできると思います（Mac版）

Android エミューレータで WebKit ウェブブラウザを起動する手順 : Media Technology Labs (MTL) : メディアテクノロジーラボ　ブログ
Android 2.1 エミュレータのインストール手順 (Nexus One/HTC Desire) : Media Technology Labs (MTL) : メディアテクノロジーラボ　ブログ

ちなみにこのエミュレータのブラウザから127.0.0.1やlocalhostではローカルのWebサーバーに接続することができない。

実はエミュレータ環境からではエミュレータが「localhost」なので、
自マシンには仮想的なネットワークアドレスが振り分けられているそうな

via: 愛は祈りだ [android]エミュレータからホストPCのサーバーに接続する

なので、「http://10.0.2.2/」や「http://IPアドレス」でアクセスする必要がある。

10.0.2.2 Special alias to your host loopback interface (i.e., 127.0.0.1 on your
development machine)
via: Android Emulator | Android Developers

割と楽に確認できるAndroidシミュレータないですかね？

スマートフォン対応サイトのまとめ

こうゆうふうにまとめてくれてるのは本当にありがたいことですわよ！
何か構想を練りたいときは、以下をダラダラ見てると何か閃くかも。

• スマートフォンサイト集めました。
• iShowcase - 国内のiPhone / iPad最適化対応をしたサイトを集めています
• 参考にしたい優れたiPhone(スマフォ)Webデザイン集 - iPhoneデザインボックス
• iPhoneサイトデザイン集のiPhoneデザインアーカイブ　公式サイト
• ASCII.jp：絶対見ておきたい有名企業のスマホサイトまとめ

スマートフォン向けなJavaScriptライブラリ

• jQuery Mobile | jQuery Mobile
• iui - Project Hosting on Google Code
• Sencha - Mobile JavaScript - Ext JS, Ext GWT and Sencha Touch
• Jo HTML5 Mobile App Framework
• The-M-Project
• [JS]モバイル・タッチデバイス用のアプリケーションを構築するためのJavaScriptのフレームワーク -DHTMLX Touch | コリス
• Wink toolkit - A mobile JavaScript framework to build great webapps

こんだけいろいろとあるとどれが一番いいとかはないとは思いますが、すでにjQueryの知識がある方ならjQuery Mobileが使いやすいと思います。

ホームアイコンをオリジナルなものにする

apple-touch-icon.pngというファイルをサイトのルートに置くか、metaタグへの指定で実現できます。

<link rel="apple-touch-icon" href="/images/apple-touch-icon.png">

大きさは57pixel*57pixelがピッタリサイズなのですが、Yahooやアップルなどは129pixel*129pixel程度に作っておき、高精度のアイコン表示を行っています。なお、角丸やテカリ処理はiPhone側で自動で行ってくれます。

via: WebのスキルでiPad/iPhoneアプリ風のWebアプリ作成のまとめ｜本を買わずに解決するWeb制作の小技

フルスクリーンモードにする

<meta name="apple-mobile-web-app-capable" content="yes">

Webクリップから起動すると「ブックマーク追加」などがあるツールバーを非表示にできます。

またこのタグを指定した場合に、window.onorientationchangeがうまく発生しないという記述が以下のリンクに書いてあるが、iPhone3G（iOS4.2.1）ではうまくfireされた！
画面表示関係 - iPhone 3G DevWiki

さらに以下の記事がちょっと目からウロコだったんですが、Webクリップから起動した際に、aタグで画面遷移しようとするとSafariが起動しちゃう問題に書かれているんですが、これまったくもって知らなかったです。
あと、戻るボタンとかが非表示になっているので、戻るボタン必須だよね！という話もされています。

戻るボタン問題のほうはなんとかするとして、aタグの問題はjQuery Mobileを使っていれば大丈夫だと思います。
jQuery Mobileはaタグのclickイベントにフックして、外部リンクやrel="external"なリンクの場合には、location.href = urlとしてくれているので、Safariが起動しちゃうことはなさそうです。
このlocation.href = urlというところがポイントみたいです。

スマホサイト：Webアプリモードで意外と書かれていない落とし穴 - Kaleidoscope

ステータスバーを黒または半透明にする

<meta name="apple-mobile-web-app-status-bar-style" content="black/black-translucent/default">

Webクリップから起動すると「キャリア表示」などがあるステータスバーを黒または半透明にできます。
指定できるのは以下のいずれか。

• black
• black-translucent
• default

このタグはフルスクリーンモードにするで解説したタグと合わせて使うみたいです。

[via]
画面表示関係 - iPhone 3G DevWiki

URL - 検索バーを消す方法

アドレスバーを消す方法が、window.scrollToでY軸方向に1pxずらすのが主流っぽい。

window.addEventListener('load', function () { setTimeout(doScroll, 100); }, false); // iPhoneを回転させた場合にもステータスバーを消す window.onorientationchange = function() { setTimeout(doScroll, 100); }; function doScroll() { if (window.pageYOffset === 0) { window.scrollTo(0, 1); } }

こんな感じでonload時とonorientationchange時に毎回scrollToしてあげればうまいことアドレスバーが隠れてくれた。
また、jQueryMobileを使うとonload時にscrollToしてくれるが、onorientationchange時にはしてくれてないみたいなので、自分でイベントをセットする必要があるかなー。（jQuery Mobile v1.0a3）

[via]
iPhone Webアプリテンプレート（CSS Nite Vol.40 reprise） | KAYAC DESIGNER'S BLOG - カヤックの意匠部によるデザインやマークアップの話

数字を電話番号のリンクにしない

iOS 4.2.1

OK

Android 2.1

NG

iPhoneのSafariの挙動で、数字を自動的に判別し電話番号とみなす場合があります。
ただし、これは電話番号だけではなく小数点（3.141592）やIPアドレス（192.168.1.1）なども電話番号とみなして、リンクにしてしまうようなので、これを防ぐために以下のようにmetaタグで無効にしておいて、

<meta name="format-detection" content="telephone=no">

telto:で明示する方法がよさそうです。

<a href="telto:090-1234-1234">090-1234-1234</a>

[via]
ウノウラボ by Zynga Japan: iPhone向けのサイトを作るときのちょっとした気配り

タップされた場所をハイライトする

iOS 4.2.1

OK

Android 2.1

OK

これを使うか使わないかでかなりユーザビリティが変わってくると思います。
タッチしたときに該当リンクをハイライトしてくれるので、誤って他のリンクをタッチしてしまうミスを防ぐ手助けをしてくれます。

-webkit-tap-highlight-color:rgba(255,0,0,0.40);

[via]
ウノウラボ by Zynga Japan: iPhone向けのサイトを作るときのちょっとした気配り

iPhone4の解像度に画像を対応させる

iPhone4はiPhone3GSよりも解像度が2倍のため、等倍の画像がぼやけて表示されていまうことがあります。
これを解決するために、

• 画像を2倍のサイズで作っておいて、半分のwidthとheightで表示する（3GSに重いサイズの画像をダウンロード意味がない）
• 3GSの場合は等倍サイズ、4の場合は2倍のサイズを半分で表示する（CSS3のメディアクエリを使う。ちょっとだめ面倒かな）
• 我慢する

以下のリンクでかなり詳しく書かれているので、どういった方法を採用するかと考える必要がありますね。
小さい画像でしたら等倍でもあんまり気にならないかもしれませんが、少し大きめなバナーの場合はこういった手法を考慮する必要があるかもです。

【Webアプリ】iPhone4 で画像をきれいに表示する色々な方法【試行錯誤編】 | KAYAC DESIGNER'S BLOG - カヤックの意匠部によるデザインやマークアップの話

MobileSafariでposition:fixedがうまく機能しない

どうもiPhoneのSafariでposition:fixedが効かないみたいです。
たしかに、いろんなサイトをiPhoneで見ているとfixedではなく追従やふんわり消してからふんわり表示する方法を採用しているところが多いです。

以下にこの現象のことが書かれていて、
MobileSafariのposition:fixedが厄介すぎる件 - capeknote

• iscroll.js をつかう
• Sencha Touch (Ext.js 有料) をつかう

という案があるそうです。

iScrollはデモを見ればそのすごさが分かりますが、Senchaのほうは試していないのでよくわかっていないです。

個人的には、jQueryMobileの機能で代用するのがいいんじゃないかな〜と思っています。
jQuery Mobile: Demos and Documentation

作りこんでいくと常に検索ボタンを画面に表示したいなどの要望が出てきそうなので、この問題にいずれぶち当たりそうですね。

追記：2011-03-02

YUIを使ったパターンが書かれていました！
またこの記事の紹介もしていただきました。ありがとうございます！
YUIライブラリのScrollViewウィジェットを使ってiPhoneでもposition:fixed;が効いてるっぽく見せる - かちびと.net

スマホサイトはリキッドレイアウトがオススメ！

ラッピング要素をoverflow: hiddenにするとiPhoneはハミ出た部分が無視されますが、Androidだと押し広げてしまうケースがあるようです。
基本的な対応は以下のような感じになるのかな〜と思っています。

• リキッドレイアウトにする
• viewportの指定をwidth=device-widthにする（Androidブラウザでviewportのwidthの数値指定は効かないので）

■参考リンク
スマホサイトの作り方で、あんまり書かれてないことを書いてみた - iPhone・Android・WEB・音楽制作｜Kaleidoscope
Androidにおけるコンテンツフィットと「overflow:hidden」[to-R]

Android2.1でアニメーションgifが再生されない

Android2.1までは内蔵ブラウザでアニメーションGIFが再生できません

via: ブラウザでアニメーションファイル(GIF)をJavaScriptを用いて再生する方法 | GREE Engineers' Blog

とのことで、これをすんごくがんばったのが以下の記事。
アニメーションGifのひとつひとつの画像をバラして、順番に自力でアニメーションさせるというシロモノです。かなりすごい！

ブラウザでアニメーションファイル(GIF)をJavaScriptを用いて再生する方法 | GREE Engineers' Blog

---

jQuery Mobileについて

ではここからjQuery Mobileのお話。

すでにjQuery Mobileの解説はいろんなブログでされているので、基本的なことよりちょっと気になる感じのことを書いてみようかと思います。
何か間違いがあれば、hisasann on twitterで教えていただければ助かります！

format-detectionをtelephone=yes、またはそもそも指定していないのに自動で電話番号にならないケース

<meta name="format-detection" content="telephone=yes">

や、そもそもformat-detectionの指定をしていないのに自動で電話番号にならない場合があります。

jQueryMobileを使っていると画面遷移がAjaxを使ってHTMLを読み込むこと多いと思いますが、
この遷移先のHTMLの中に電話番号っぽい表記があって、それをDomに追加した場合にうまく自動で電話番号リンクにならないようです。
どうやら一番初めの画面描画時だけにこの電話番号自動リンク機能が実行されるようです。

なので、これはちょっとハマるポイントですね。

mobileinitイベント

jQuery Mobile: Demos and Documentation

mobileinitイベントはjQuery Mobileが初期化し、画面の装飾をする前のタイミングでfireされるイベントになります。
なので、文言などを変える場合は、このタイミングになります。

デフォルトBackボタンの文言変更する

$(document).bind("mobileinit", function(){ $.mobile.page.prototype.options.backBtnText = "戻る"; });

か

<div data-role="page" data-back-btn-text="戻る">

デフォルトBackボタンを消す

$(document).bind("mobileinit", function(){ $.mobile.page.prototype.options.addBackBtn = false; });

か

<div data-role="header" data-backbtn="false">

Ajax時の読込中のメッセージを変更する

$(document).bind("mobileinit", function(){ $.mobile.loadingMessage = "読み込み中..."; });

Ajaxでダイナミックにページを読み込んだ場合のimgのsrc先は？

例えば、

index.html
page/page.html
img/1.jpeg

こうゆうフォルダ構成だった場合に、index.htmlからpage/page.htmlをajaxで読み込んでindex.htmlの中にpage/page.htmlのdata-role="page"の部分を挿入するとします。
そしてpage/page.htmlからimg/1.jpegを読み込んでいたとします。

この場合、カレントディレクトリはindex.htmlが置いてあるディレクトリですが、読み込んだpage.html側からすれば「../img/1.jpeg」の場所に画像ファイルがあるんです。
これはなかなかやっかいな問題ですが、jQuery Mobileはそれとなく対応してくれています。

$.mobile.changePageメソッドの中に

if( !$.support.dynamicBaseTag ){ var baseUrl = getBaseURL(fileUrl); to.find('[src],link[href]').each(function(){ var thisAttr = $(this).is('[href]') ? 'href' : 'src', thisUrl = $(this).attr(thisAttr); //if full path exists and is same, chop it - helps IE out thisUrl.replace( location.protocol + '//' + location.host + location.pathname, '' ); if( !/^(\w+:|#|\/)/.test(thisUrl) ){ $(this).attr(thisAttr, baseUrl + thisUrl); } }); }

というコードがあり、baseタグに対応していない場合に各hrefとsrcを書き換えてくれます。
ちなみにFirefox3.6で試してみたらbaseタグに対応していなかったです。

なので、
Webkitの場合は、

<base href="http://localhost/hoge/page/"> <img src="../img/1.jpeg">

Firefoxなどbaseタグに対応していないブラウザの場合は、

<img src="page/../img/1.jpeg">

と書き換えられるようです。

一点問題があるとすれば、htmlコード上にbackgroundで画像を指定した場合にうまいことURIのreplaceが効かないことですかね。
（だから画像の角丸とかを作りたいときに困るかもしれません）

これは今後改善されていくのかな。。。

Android2.1でアニメーションgifが再生されないがAjax時のローディングgifは再生しているじゃないか！について

これは「ajax-loader.png」をCSS3のアニメーションでクルクル回しているだけ。
さすが、jQueryMobile！カシコイ！

該当箇所のCSSはこちらです。

.spin { -webkit-transform: rotate(360deg); -webkit-animation-name: spin; -webkit-animation-duration: 1s; -webkit-animation-iteration-count: infinite; } @-webkit-keyframes spin { from {-webkit-transform: rotate(0deg);} to {-webkit-transform: rotate(360deg);} }

まぁ、そうですよね。

■関連リンク
CSS3アニメーションのおさらいとローディングアイコン :: 5509

デザインは独自のを使いたいんだけど、リンクなどは自動的にAjaxで遷移してほしい場合

今後やり方が変わるかもしれませんが、今のところはこれでイケるっぽい。

jQuery MobileのUIはとてもすばらしいですが、これをいろんなサイトで使うとしたらどれもこれも似たようなサイトが出来上がってしまうので、
サイトのデザインは独自にしたい場合にこうゆう方法が必要になってきます。

• data-role="page"を付けておけば、aタグなどは自動的にAjaxによる遷移になります。
• jQuery Mobileに装飾されないようにするために、data-theme="hoge"のようにdata-themeを存在しないものにします。
• input type="text"にdata-role="none"を付けておく。これしないと勝手にかっこよくなっちゃいます。

或いは、必要なCSS意外をjQuery MobileのCSSファイルから削除しちゃうとか。
でもこれだとあとあとデザインもjQuery Mobileのを使いたいという場合にちょっと不便ですね。

$.mobile.changePage()を使ってページ遷移を独自にしたい！

これは意外とこの需要はあるんじゃないかなーと思っています。
jQuery Mobileに出来る限り依存したくないけど、$.mobile.changePage()を使ったページ遷移は非常に使いやすいので
この部分だけを使いたい場合など。
（そもそもjQuery Mobileの主要機能って$.mobile.changePage()ですよね！）

まずは自動でaタグにAjax処理をbindしちゃうので、それをしないようにします。

$(document).bind("mobileinit", function(){ $.mobile.ajaxEnabled = false; });

そして1ページ目の進むボタンと2ページ目の戻るボタンにイベントを貼ります。

$(function() { // 1Page目のイベント $(".changePage").live("click", function() { $.mobile.changePage({ url: "page2.html", type: "post", data: $(this).serialize() }, "slide", false, true, false); }); // 2Page目のイベント $(".reverse").live("click", function() { window.history.back(); }); });

これで進むのほうは、進むトランジションで。
戻るのほうは、ちゃんと戻るトランジションになります。

ハマりやすいのは、2ページ目の戻るイベントを2ページ目のhtml（headとか）に記述しちゃうことです。
2ページ目のdata-role="page"の中に戻るボタンのイベント用のscriptタグを用意すればいいのかもしれませんが（もちろんliveで）、
基本的には1ページ目に2ページ目のボタンのイベントも用意しちゃう感じだと思います。
これみなさんどっちでやってるのかな？

JavaScripから要素を追加した場合に再装飾するにはどうするの？

たとえば独自なAjaxで取得してきたHTMLを画面に追加して、その要素にjQuery Mobileのテーマで装飾して欲しいなんてことがあるとは思うんですが、
こうゆうのは公式デモサイトではサンプルがなくてちょっと困ります。

こちらの内容を参考にしようと思ったんですが、page()というのがどこのpage()なのか分からなかったです。
JQuery Mobile　Alpha2（とちょびっとAlpha3）でサンプルサイト制作練習をした。(1) - いちてく

ボタンの装飾

$("<a>", { href: "#", "data-role": "button" }) .html("追加されたよ") .appendTo($("#append-wrap")) .buttonMarkup();

リストの装飾

$( "<ul>", { "role": "listview", "data-inset": "true" }) .append("<li>foo</li>") .appendTo($("#list-wrapper")) .listview();

これはliだけをDomに追加して、ulのlistview()を実行してもダメでした。
ul本体から作り直せばうまいこといきました。

なんとなくこのへんのメソッドの感じから言うと、画面ロード後にHTML要素を追加することをあんまり想定していない？んですかね。。。
結構分かりづらいです。

追記：2011-03-01

HTML5に詳しい吉川さんにTwitterで教えていただきました。
Twitter / @Toru Yoshikawa: @hisasann ブログのほう面白く拝見させて頂き ...

page()というのは、$('#page-id').page()のように呼ぶみたいで、
jQuery Mobileのセレクトボックスを作る$.mobile.selectmenuの中でダイアログを装飾するところで使用されていました。

使い方は、以下のようにまずはHTML文字列を作成して、どこか画面にappendし、page()を実行すれば装飾されるようになります。

$(["<section data-theme='e'>", "<article data-role='content'>", "<h2>foo</h2>", "<ul data-role='listview' role='listbox' data-inset='true'>", "<li>hoge</li>", "<li>bar</li>", "</ul>", "</article>", "</section>"].join("")) .appendTo($("#html-wrapper")) .page();

また、↑のほうで、Listはulから作らないとうまく再構築できないと記載していましたが、

$("#listbox") .append("<li>foo</li>") .listview('refresh');

のようにliを追加した後にlistview('refresh')を実行したらうまく再構築されました。
ただ、Listに1つしか要素がない状態で上記コードを実行すると、角丸のところがまだちょっと変な感じになりました。
このあたりは今後のバージョンアップで改善されていくんでしょうね。

なので、

• Listだけの装飾であれば、listview('refresh')
• HTML文字列を装飾するのであれば、$("<div>なにかしら</div>").page()
• Buttonだけの装飾であれば、buttonMarkup()

という感じですかね。
まぁ、面倒だからどのパターンでもpage()を使いそうですがｗ

追記：2011-03-11

コントロール要素の強化（enhanceControls）をしたくない場合

jQuery Mobileは使うんだけど、

• 勝手にテキストボックスやセレクトボックスなどのコントロール要素の装飾をしたくない。やめてっ！

という場合があったりします。

これは、たとえ

<section data-role="page" data-theme="hogefoobar">

のように存在しないdata-themeを指定してもコントロール要素は装飾されてしまいます。

こうゆうときにv1.0a2バージョンまでは$.page._createで行われる_enhanceControlsメソッドの呼び出しをコメントアウトするしかなかったんですが（多分！）、v1.0a3からは$.mobile.page.prototype.options.keepNativeという「なんにも装飾しないでねセレクター」プロパティが追加されています。

使い方は

$(document).bind("mobileinit", function(){ $.mobile.page.prototype.options.keepNative = ".data-role-none"; });

か

<section data-role="page" data-theme="e" data-keep-native=".data-role-none" >

でkeepNativeとしてのセレクターを指定しておきます。

あとは、各コントロール要素にclassでdata-role-noneを追加すればOK！

<input type="text" placeholder="例） やまだ たろう" class="data-role-none"> <input type="radio" value="choice-1" checked="checked" class="data-role-none"> <input type="checkbox" value="checkbox-1" class="data-role-none"> <select name="birthdayData.year" class="data-role-none">

これ地味に便利！じゃあの。

スマートフォン参考書籍

僕はこちらの本を読まさせていただきました！

ひと通りのスマートフォンサイト構築のお作法や、CSS3を使ったデザインの仕方など、かなり詳しく書かれています。
これで2,310円はけっこう安いですね。

まとめ

今後に期待しまくりなjQuery MobileのちょっとしたTipsを書いてみましたが、まだ分からないことがいっぱいあるので、
今後この記事に追記していこうと思っております。

また、以下にとりあえず目を通しておいたほうがよいと思った記事をリストアップしました。

• jQuery Mobileを使ってみた | blog.wonder-boys.net
• jQuery Mobileの使い方と挙動のまとめ その１ - アークウェブシステム開発SandBox
• 「jQuery Mobile」の登場で、モバイルアプリケーション開発は大きく変わる － Publickey
• jQuery Mobile [基礎編]
• jQuery Mobileで「iPhoneで出会い系」紹介サイトを作ってみた - ゆーすけべー日記
• jQuery Mobile: Demos and Documentation（日本語版）
• Introduction to jQuery Mobile
• jQuery Mobile使用時によく使いそうなマークアップのリストと動作サンプル - かちびと.net
• 最近気になってきたjQueryについて色々調べてみました - もとまか日記

Beta版まだかなー！！