デザインワークス・オンサイド

jQuery Mobile でスマートフォンサイトを作ってみた

スマートフォンサイト

これだけ世間が「スマートフォン」「スマートフォン」といっているとやはりスマートフォンサイトは無視できないということもあり、jQuery Mobile を使って作ってみることにしました。
今ごろスマートフォンサイトを作っているのでは遅いくらいかもしれませんけど…

といってもスマートフォンを持っていないので確認ができない 🙂
もちろんブラウザーの User Agent を変えれば、おおまかな確認はできる。
iPhoney というシミュレータを使う方法もあるし、Xcode and iOS SDK の iPhone Simulator.app や Android SDK を使えば問題なく確認はできると思います。
ただ、私の環境では諸事情があり iOS SDK も Android SDK もインストールしていません。
iPhoney は手軽でいいのですけど、”It’s the perfect 320 by 480-pixel canvas” と書いてある割にはどうも違うような気がする..
ブラウザーの UA を変えるのが最も手軽です。が、こちらも横幅が320ピクセルにならない。(それとも何か方法があるのでしょうか…)
なので、一応スマートフォンサイトのデザインの確認はできますが、レイアウトの確認となるとちょっとできないような気がします。

ブラウザのエクステンション(機能拡張・拡張機能)を使えば問題なく、320ピクセルになりますね。
Safari の『Resizer』にて快適にリサイズ、確認できました。

実際、ブラウザーで確認した時と実機で確認した時とでは違いますからね。
取りあえず、iPod touch で確認して、アンドロイド携帯に関してはヨドバシなどの量販店で確認するというのが、今のところの確認方法です。(笑)

で、jQuery Mobile を使ってみた感想などを少しばかり…

まず、何故 jQuery Mobile なのかというと、このようなフレームワークは jQTouch などいくつかあるのですが、jQuery Mobile は対応しているデバイスが多くアクセシビリティも高いということと、手軽にコーディングできそうだというのがその理由。
その他にも色々なサイトを見ていると『jQuery Mobile はいいよ〜』という記事が多かったのも要因のひとつです。
ただ、このサイトの場合は WordPress を使っていますので、スマートフォン用のテンプレートを作って UA によってテーマを切り替えるつもりなので、jQuery Mobile を使わなくてもいいのかも知れませんけどね。
以前は、WPtouch などのプラグインを試してみたのですけど、デザインが好みじゃないのとデザインを変更するのが結構手間かなぁと思ったりするので、普通にスマートフォン用のテーマを作るという方法にしました。
まぁ、あとは Adobe Dreamweaver® CS5.5が jQuery Mobile に対応したということもあり、jQuery Mobile のお勉強ということでもありまする。 😀
といっても、CS5.5は買っていませんが…

実際の jQuery Mobile の使い方などは、下記のサイトが大変参考になりましたので興味のある方はご覧いただくとして、ココでは私が感じたことを書いてみたいと思います。

jQuery Mobile をそのまま使うとどのサイトも同じようなデザインになってしまいます。
テーマが data-theme=”a〜e” の5種類用意されていますので、組み合わせによってはオリジナルとはちょっと違ったサイトをつくることができるのではないでしょうか。
また、テーマを適用させないこともできますので、jQuery Mobile を使っていることを気づかせないようなサイトを作ることも可能だと思います。
今回は、基本的には jQuery Mobile のテーマを使用しました。
ただし、ヘッダーにあるボタンのスタイル(box-shadow など)が気になるので、CSS をゴニョゴニョしてますが…
あと、場所によっては text-shadow もね。

ボタン用の画像を作ったりする作業を除けば、jQuery Mobile でのコーディングはとっても簡単なので、時間もかなり短縮できそうです。
それと、jQuery Mobile の仕様なので仕方ないのですが、『#』を使ったアンカーが使えないので『ページトップ』へのリンクがわからなかった。
jQuery Mobile Docs – Methods に書いてある『$.mobile.silentScroll (method)』を使いましたけど、よくあるスムーズスクロールではありません。
まぁ、見ているのはスマートフォンなので、スムーズスクロールである必要はないかも知れませんけどね。
Ajax 絡みのページ遷移にも注意が必要かも知れません。
このように、手軽にコーディングできるのですが、思っていた以上に奥は深そうです。

それと jQuery Mobile と直接関係ありませんが、1ページのファイル容量にも気をつけないといけませんね。
Safari Web Content Guide: Creating Compatible Web Content を読むと “Individual resource files must be less than 10 MB.” となっています。
しかし、1ページの容量が10 MB を超えるようなことってあまり無いような気がしまうけど…
ん?『Individual resource files』って、1ページの容量のことですよね?
違います?

ただ、同じアンドロイド携帯でもソニーの Xperia™ は、表示も早いし動作も軽快だった。
SO-01B なので、OS のバージョンは『Android 2.1-update1』です。
最近発売された、シャープの SH-12C と比べても明らかに動作が軽い。
GALAXY S SC-02B も SH-12C と同じような感じでした。
通信環境が違うのかと思いましたが、すべて同じ無線 LAN でした。
何故か、ソニーの SO-01B と SO-01C が表示も早く動作もスムーズでした。
う〜ん、よくわかりません。
SO-01C が快適なのはわかりますが、SO-01B も体感的には同じくらいでしたからねぇ。
それより新しい、SC-02B と SH-12C が遅く感じたのは考えものだなぁ…

その時の環境変数を書いておきますので、何かの参考にでもしてください。

  • Mozilla/5.0 (Linux; U; Android 2.1-update1; ja-jp; SonyEricssonSO-01B Build/2.0.1.B.0.19) AppleWebKit/530.17 (KHTML, like Gecko) Version/4.0 Mobile Safari/530.17
  • Mozilla/5.0 (Linux; U; Android 2.2; ja-jp; SC-02B Build/FROYO) AppleWebKit/533.1 (KHTML, like Gecko) Version/4.0 Mobile Safari/533.1
  • Mozilla/5.0 (Linux; U; Android 2.3.2; ja-jp; SonyEricssonSO-01C Build/3.0.1.D.2.4) AppleWebKit/533.1 (KHTML, like Gecko) Version/4.0 Mobile Safari/533.1
  • Mozilla/5.0 (Linux; U; Android 2.3.3; ja-jp; SH-12C Build/S5050) AppleWebKit/533.1 (KHTML, like Gecko) Version/4.0 Mobile Safari/533.1
  • Mozilla/5.0 (iPhone; U; CPU iPhone OS 4_3_3 like Mac OS X; ja-jp) AppleWebKit/533.17.9 (KHTML, like Gecko) Version/5.0.2 Mobile/8J2 Safari/6533.18.5
  • Mozilla/5.0 (iPod; U; CPU iPhone OS 4_3_3 like Mac OS X; ja-jp) AppleWebKit/533.17.9 (KHTML, like Gecko) Version/5.0.2 Mobile/8J2 Safari/6533.18.5
  • Mozilla/5.0 (iPad; U; CPU OS 3_2_2 like Mac OS X; ja-jp) AppleWebKit/531.21.10 (KHTML, like Gecko) Version/4.0.4 Mobile/7B500 Safari/531.21.10
  • Mozilla/5.0 (iPad; U; CPU OS 4_3_1 like Mac OS X; ja-jp) AppleWebKit/533.17.9 (KHTML, like Gecko) Version/5.0.2 Mobile/8G4 Safari/6533.18.5

所々、jQuery Mobile のページ切り替えエフェクトである『flip』を使っています。
そう、忍者屋敷の『どんでん返し』のようなエフェクトです。
ところが、このエフェクトが Android 携帯だとうまく動作しない。
機種によっては、反転した裏側(?)が見えていたり、言葉で表現するのが難しいのですが『グニョグニョ、ぐり〜ん』という感じで表示する。
通常の『slide』や『slideup』等は問題なさそうなので、『flip』だけかも知れない。
ただ、これも上記の環境変数を見るとブラウザーのバージョン自体はそれぞれ同じなのに、機種によって動作が異なるというのもがよくわからないですねぇ。

今回、スマートフォンサイトを作ってみて改めてこのサイトの構成に無理があるのに気づきました。
元々は、CMS などを使っていない通常の HTML でのコーディングから MODx を使って構築してみたり、ブログも Movable Type から WordPress に変更したり、数ページを除いてサイト全体を WordPress で構築という変遷を重ねているうちに所々に無理が生じてきたのかも知れません。
jQuery Mobile などを使わずに Media Queries を使ってスマートフォンサイトに対応させる方法もありますが、今のままの構成ではちょっと厳しい。
Media Queries を使うのであればそれを前提にレイアウトを考慮しないといけないですよね。
ただ、Media Queries を使えばスマートフォン用に最適化されるのかというと、それもちょっと違うような気がする。
上記の1ページあたりのファイル容量が大きく影響してくるのは間違いない。
理想としては、Media Queries を使いつつスマートフォン用のサイトを別に作るのがいいのかも知れませんね。

今回は UA によって WordPress のテーマを切り替える方法を選択しました。
それ以外に JavaScript、PHP、htaccess などで、パソコン用のサイトとスマートフォン用のサイトに振り分ける方法もあると思います。

最後にテーマの切り替えに使ったプラグインについて。
まず、iPhone theme switcher
このプラグインだと、Android に対応していないのと iPad でもテーマが適用されてしまうようです。
プラグインの UA を判別している箇所の条件文に Android を追加して iPadを削除すれば問題ないと思いますが、他のプラグインも調べてみようと探したのが、AVH Themed By Browser
こちらは管理画面のプダウンメニューで、Browser: iPhone なら Theme: hoge、Browser: Android なら Theme: pakeratta、というように細かく設定ができます。
ただ、このサイトだけの問題なのかはわかりませんが、ちゃんと動作していないようです。
次に試してみたのが、WPtap Mobile Detector。(公式 WordPress Plugins Directory からのダウンロードはこちら
AVH Themed By Browser ほど細かくありませんが、iPhone/iPod、Android、BlackBerry など色々と設定できます。
UA が分かればデバイズの追加もできるようです。
また、今回はテーマの切り替えに使用していますが、別の URL にリダイレクトさせることもできるみたいなので、色々と重宝しそうです。
というわけで、今回は WPtap Mobile Detector を使うことにしました。
ただ、1年くらい更新されていないのが気になる。

そろそろ、サイト全体を見直して構成・デザインを変更する時期かも知れないなぁ…
その時にはスマートフォンサイトも、いかにも jQuery Mobile というデザインではなく、オリジナルデザインのサイトを構築したいですね。
というわけで、よかったらスマートフォンで見てくださいませ。 🙂

モバイルバージョンを終了