はじめに
前回に引き続き、mobiledetectionプラグインを使ったスマートフォン向けサイトの構築方法について紹介していきます。
スマートフォン対応HTMLに関して
スマートフォンではSafariやOperaなどのブラウザを使用することができるため、特にスマートフォン用コンテンツを作成せずとも基本的なウェブブラウジングは可能です。ただし、
- 場合によってはズームしないとコンテンツが読めない
- リンクなどのhover属性の挙動がPCと異なる
- サイズの大きい画像などは3G通信に不向き
といった問題があるため、スマートフォン用コンテンツを持つことができるのであれば、それにこしたことはありません。
スマートフォン用のHTMLに関しては、
などが参考になると思いますが、今回はJavaScriptを使用しない形でのシンプルな構成を例にあげます。なお、言い訳しておきますが、残念ながら筆者は近年のHTMLやCSSによるウェブのデザインを得意としておりませんので、以降のHTMLソース等には誤った表現が存在している可能性もあります。あらかじめご了承ください。
まず、現状のMODxのテンプレートですが、以前ダウンロードした「Andreas01」をカスタマイズして、次のような状態になっています。
スマートフォン表示の場合は、余計な画像や検索ウインドウを省略してみることにしました。また、Waifinderスニペットを使って、シンプルな横表示のナビメニューを表示しています。
以上により、通常ブラウザやスマートフォンでの表示は次のようになります。
繰り返しになりますが、筆者の乏しいデザイン知識により、非常に素っ気無い感じではありますが、なんとなくイメージはつかめたのではないでしょうか?
もう少し洗練されたデザインを目指したい場合には、実際の大手のサイトを参考にさせてもらうのが一番です。ブラウザのユーザエージェントをiPhoneの値に切り替え、Yahoo!などの大手サイトを参考にしてみてください。詳しくは、「firefox iphone ユーザエージェント」といったキーワードで検索してみてください。
表示の手動切り替え
Yahoo!のように、特に大きなサイトでは、ユーザの利便性をより向上させるため、次図のように、表示を手動で切り替えるためのリンクを見かけることがあります。
なんと、mobiledetectionプラグインは、このようなな機能にも対応していたりします。実装するためには、テンプレートのフッター付近に次の記述を行います。
このように、各リソースに対してbrowserというGET引数を与えることにより、ブラウザは
または
というCookieを取得、セットし、次回以降のアクセスに利用します。Yahoo!のように、すでに選択済みの項目に関してはリンクを無効にしたいところですが、
- 「○○というCookieがセットされている場合にはリンクさせない」
という設定は簡単にはできません。条件分岐をさせるためのIfというスニペットが存在するため、こちらを参考に自作スニペットを作成するのが良さそうです。
最後に
これまで見てきたように、mobiledetectionプラグインを活用することにより、既存のコンテンツを流用しつつ、サイト全体の表示をモバイルに対応させることができます。注意点としては、常に通常ブラウザ、モバイルの両方を意識したHTMLを組み立てる必要がありますが、一度それが固まってしまえば、特に莫大な構築費用を検討せずとも自動的にモバイルサイトが構築できてしまいます。
もし「MODxを使ってサイトをリニューアルしてみようかな」お考えの方がいらっしゃったら、同時にモバイル対応化についても検討してみてはいかがでしょうか?