はじめに
これまで長い間、いわゆるauのガラケーを使用してきた筆者ですが、AndroidかiPhoneか迷った挙句、最終的には妻と共にau版のiPhone 4Sに乗り換えました。通話とデータ通信が同時にできない、規格上の最大スピードが遅い、など、いろいろ言われたこともありましたが、正直なところ非常に満足して使えています。特に、Viberというアプリは素晴らしく、Softbank版iPhoneやAndroidな友人と無料通話やチャットができるため重宝しています。
さらには、帰宅時にランニングをしている筆者にはRunKeeperというアプリも便利で、走行経路やペースの管理など便利な機能満載です。ということで、今回のテーマはMODxによるスマートフォン向けサイトの構築です。
スマートフォン向けサイトの構築
MODxのmobiledetectionというプラグインを使用すれば、閲覧者の環境に応じてコンテンツの内容を切り替えることができます。まずは、いつも通りパッケージマネージャーから導入を行っておいてください。
おさらいになるかもしれませんが、スニペットとはリソース中に埋め込むことで、動的な出力などを可能にするための機能であり、プラグインとは
- ページがロードされた場合に
- リソースがセーブされた場合に
のようなアクションをトリガーとして動作します。たとえば「リソースの内容を大阪弁に変換して表示したい」という機能がほしいのであれば、それはスニペットではなくプラグインとして実装されることになります。
mobiledetectionプラグインの「システムイベント」を表示してみると、「OnWebPagePrerender」という項目にチェックが入っています。つまり、このプラグインは保存済みのリソースが閲覧者によってレンダリングされる前に初めて実行されます。
この際、クライアントのユーザエージェントがiPhoneなどのモバイルデバイスであった場合はモバイル用の出力、そうでない場合は普段の出力を返す、という仕組みです。
まずはテスト!
いつものように、まずは挙動を理解するために簡単なテストを行ってみましょう。これまで扱ってきたスニペットと異なり、mobiledetectionプラグインには、複雑な設定項目が無いため、簡単に実験することができます。
まずは、次のような新規リソースを作成してみてください。
表1 テスト用リソースの作成
タイトル | mobiletest |
エイリアス | mobiletest |
テンプレート | 無し |
内容 | こんにちは。
<mobile>モバイルからの接続ですね。</mobile>
<standard>PCからの接続ですね。</standard> |
見慣れないタグが出てきましたが、以上の記述を行うことで、モバイル表示を行った場合は
と表示され、通常ブラウザの表示であれば
と表示されます。実用的な使い方としては、プラグインのソースにも記述してあるとおり、次のように、スタイルシートやJavaScriptの外部ファイルを切り替えつつ、ページ中のスタイルシートのクラスなどを細かく修正していく形になります。
クライアントの判別方法
閲覧者が通常のブラウザからアクセスしているのか、それともモバイル端末からなのかを判定するにはどうすれば良いのでしょうか?
これに関しては古くからさまざまな議論があり、i-modeやEZwebなどのケータイ用サイトを構築する場合には、クライアントのIPアドレスからデバイスを識別するのがひとつの方法でした。ただ、この方式では常にキャリア側が保持するIPアドレス帯に気を配る必要があり、場合によっては誤作動となってしまう可能性もあったため、IPアドレスではなくブラウザが送出するユーザエージェントを元にデバイスを判別する方法も用いられてきました。この方式では、IPアドレスの管理を行う必要性がない一方、ユーザエージェントの情報をWebサーバ側で管理する必要性がありますし、そもそもユーザエージェントの値は閲覧者側で書き換え可能であるため、PCからでもモバイル表示ができてしまうという問題もありました。
スマートフォン用コンテンツを作成する場合には、後者のユーザエージェントによる判別を行う必要があります。というのも、スマートフォンはPCやラップトップ同様、3GネットワークではないWi-Fi経由での接続が考えられるためです。ここで、
「(メジャーな)iPhoneであればちゃんと判別されそうだけど、Androidはちゃんとモバイル端末として判定されるのかなぁ?」
といった心配が出てくるかもしれませんので、実際の判定部分を少し覗いてみることにしましょう。MODxの管理画面よりプラグインのソースをちらりと眺めてみると、どうやらクライアントの判断は
のようにして行っているようです。この、 DetectTierIphoneというメソッドを検索してみたところ、これは/var/www/html/assets/components/mobiledetection/mdetect.phpで定義されていることがわかりました。この中を見てみると、次のような変数宣言が見つかります。
これを見ると、iPhoneやAndroidはもちろんのこと、WindowsPhoneやNintendo DSなど、思った以上にさまざまなデバイスがサポートされているようです。
最後に
中途半端な形での紹介になってしまいましたが、mobiledetectionプラグインの基本的な挙動が理解できたところで、次回は実際にPC表示、モバイル表示を使い分けるためのテンプレートを紹介していきたいと思います。お楽しみに。