スマートフォンサイトと PC サイトの切り替え

前回の続き…

jQuery Mobile を使ってスマートフォンサイトをリニューアルした時に『スマートフォン用の表示から PC サイト用の表示に切り替える機能も実装』しました。
このサイトは、WordPress です。
で、Multi Device Switcherというプラグインを使ってスマートフォンからアクセスがあった時に、jQuery Mobile を使ったテーマに切り替えて表示しています。
以前は、WPtap Mobile Detectorというプラグインを使っていたのですが、WordPress をデバッグモードにしているときにエラーになり、Multi Device Switcher を使ってみることにしました。（原因を教えてくださった @gatespace_k さん、ありがとうございます。）

横幅が480px までは、Media Queries（レスポンシブ Web デザイン）を取り入れていますので、iPad 等のタブレットはスマートフォン用サイト表示に切り替えていません。
ただ、前回も書いたのですが、このサイトに限らずスマートフォン用サイトを閲覧している時に、PC 用サイトで見たくなることがあります。
WordPress のプラグインでスマートフォンといえば WPtouch だと思うのですが、WPtouch には　Mobile Theme をオフにする機能があるんですよね。
WPtouch の機能がうらやましくて「同じようなことができないかなぁ」と思っていたら、なんと『WordPressプラグイン「Multi Device Switcher」にPC/モバイルの切り替えボタンを設置するプラグイン』というのが、10日ほど前にリリースされてるのを発見。

早速、入れてみました 🙂

プラグインを有効化するだけで、特に設定はいらない。
有効化すると

PC表示
モバイル表示

という切り替え用のメニューが表示されるので、PC 用のサイトとスマートフォン用のサイトの切り替えが簡単にできます。
ただ、当スマートフォンサイトは jQuery Mobile を使っていますので、プラグインが書きだすコードをゴニョゴニョしていますが、プラグインのおかげで簡単に『PC サイト表示の切り替えボタン』が設置できました。

追記 :
今年の3月、Multi Device Switcherにスマートフォン用サイトと PC 用サイトの切り替え機能である『PC Switcher』が追加されていました。
なので、当サイトもそちらに切り替えました。
thingsym さんありがとうございます。
また、モンキーレンチさんも今まで使わせていただいてありがとうございました。

モバイルサイトとPCサイトを切り替える新機能「PC Switcher」がWordPressプラグイン「Multi Device Switcher」に加わりました

jQuery Mobile のフッターに設置

ボタンを押すと通常のテーマに切り替えてくれますので、スマートフォンでも PC 用のサイトが表示されます。
といっても、PC 用サイトも Media Queries を使っていますので、デスクトップ PC やノート PC で見ているようなサイトデザイン（レイアウト）が表示されるわけではありませんが、ユーザーインターフェースの観点からすると閲覧者に選択肢があるのは良いことではないでしょうか？
ただし、スクリーンサイズが480px までしか Media Queries の設定をしていませんので、スマートフォンが横位置（ランドスケープ）だと大丈夫だけど、縦位（ポートレート）にしていると左右の余白がなく見づらいと思います。

それにしても、当サイトのホームのように大きな画僧をベタベタ貼り付けていると、スマートフォンでは重たくてなかなか表示しないので、ダメですよね 🙁
jQuery Mobile のテーマを表示しているときと比べると明らかに表示が遅いです。
まぁ、スマートフォン用に作ったテーマですので PC 用サイトと比べると軽いのは当然なのですが、Media Queries を使ったレスポンシブ Web デザインの場合は、あらためてモバイルファーストという考え方が重要だと感じました。
もちろん、軽くするだけがモバイルファーストではなく、UI やコンテンツの設計も重要なのは当然ですよね。

スマートフォン表示から PC 表示に切り替えたら、スマートフォン用の表示に戻すリンク（ボタン）も必要です。
表示を戻すリンクがなければ、mw_theme_switcher_on_multi_device_switcher プラグインはセッション終了時までクッキーに情報を保存していますので、ブラウザーを閉じなければスマートフォン用表示に戻らない。
ということで、このプラグインでは PC 用のテーマに切り替えても先ほどのメニューが表示されるようになっています。
ただ、場所が固定されていますので、またもゴニョゴニョして一番上に『スマートフォンサイトの表示』ボタンを設置しました。

『スマートフォンサイトの表示』ボタン

ただ、このあいだ Android 端末で見た時に『検索窓』ばかり反応して『戻るボタン』を押せなかった 😳
iPhone、iPod touch では大丈夫なのに…
とはいうものの、押し難いのはボタンが小さいのと場所が原因なので、そのうちボタンまわりのレイアウトを何とかしなければいけませんよね。

というわけで、スマートフォン（一部、Android タブレットも含む）で見ている時に、PC サイトの表示に切り替えられるようにしました。
プログラムの知識のないデザイナーの私でも比較的簡単にこのようなことができるのは WordPress と Multi Device Switcher、mw_theme_switcher_on_multi_device_switcher のプラグイン作者さんのおかげです。
ありがとうございます 🙄

WordPress 3.4から wp_is_mobile という条件タグが実装されましたが、ますますスマートフォン用サイトの需要が多くなりそうなので、WordPress を使っている人にはありがたいですね。
Google も推しているようにこれからはレスポンシブ Web デザインが主流になっていくと思うのですが、レスポンシブ Web デザインのデメリットとして PC サイトと基本的にデータが同じなので、『モバイル環境だと重たくて表示が遅くなる』ということがあります。
これは、スマートフォン用に不必要だと思われるコンテンツを Media Queries を使いスタイルシートで非表示にしているだけなのが原因ですよね。
ということは、上記の関数を使って条件文を書いておけば、スマートフォン用のデータサイズを少しでも軽くできるのでは？
まぁ、wp_is_mobile 関数は USER_AGENT を元に分岐しているので、Media Queries のスクリーンサイズによる表示とはちょっと違いますが、タブレット以外のいわゆるスマートフォンに限定すれば、案外有効かも知れないですね。
しかし、wp_is_mobile 関数も『Mobile』という USER_AGENT で判別しているので、一部の Android タブレットがスマートフォンと判断されてしまうんですよね。
同じ7インチのタブレットでも GALAXY Tab SC-01C は Mobile を含んでいるのでスマートフォン、GALAXY Tab SC-02D は Mobile を含んでいないのでスマートフォンだと判別されない。
メーカーもインチ数ではなく解像度によってブラウザを選択しているのだと思うので、今後解像度が高くなれば判別しやすくなるかも知れないですね。
でも、そのうちスマートフォンの解像度も高くなって、Mobile Safari じゃなくなる可能性もあるのかな… 😀

と、ここまで書いて気づきましたが、wp_is_mobile 関数は『Mobile』と『Android』を分けて記述しているので、Android だとタブレットもすべてスマートフォンに判別されてしまうような気がする。

とりあえず、当サイトは『レスポンシブ Web デザイン + jQuery Mobile を使ったスマートフォンサイト』という構成にしていますが、これからはモバイルファーストを十分に考慮してサイトを設計していかなければいけないのは間違いない。
実際の仕事では、予算、制作期間等を考えるとレスポンシブ Web デザインに対応させたサイトを構築するのが、デメリットよりもメリットの方が上回っているような気がしてきた…