CMSのポテンシャルを引き出す─MODxで作る商用サイト

第19回MODxでスマートフォン対策その1]

はじめに

これまで長い間、いわゆる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>

見慣れないタグが出てきましたが、以上の記述を行うことで、モバイル表示を行った場合は

  • こんにちは。モバイルからの接続ですね。

と表示され、通常ブラウザの表示であれば

  • こんにちは。PCからの接続ですね。

と表示されます。実用的な使い方としては、プラグインのソースにも記述してあるとおり、次のように、スタイルシートやJavaScriptの外部ファイルを切り替えつつ、ページ中のスタイルシートのクラスなどを細かく修正していく形になります。

リスト1 mobiledetectionを使ったテンプレート記述例
<html>
    <head>
        <title>[[*pagetitle]]</title>
        <meta name=description content="[[*description]]" />
        <mobile> ↓スマートフォンの場合は、このCSSが使用される
            <link type="text/css" rel="stylesheet" href="mobile.css" />
        </mobile>
        <standard> ↓通常ブラウザであれば、これらのCSSやJSが使用される
            <link type="text/css" rel="stylesheet" href="standard_one.css" />
            <link type="text/css" rel="stylesheet" href="standard_two.css" />
            <script type="text/javascript" src="menu.js"></script>
        </standard>
    </head>
<mobile>
    <body class="narrow"> ←スマートフォンの場合は、この行が表示される
</mobile>    
<standard>
    <body class="huge"> ←通常ブラウザであれば、この行が表示される
</standard>

    [[*content]]
    </body>
</html>

クライアントの判別方法

閲覧者が通常のブラウザからアクセスしているのか、それともモバイル端末からなのかを判定するにはどうすれば良いのでしょうか?

これに関しては古くからさまざまな議論があり、i-modeやEZwebなどのケータイ用サイトを構築する場合には、クライアントのIPアドレスからデバイスを識別するのがひとつの方法でした。ただ、この方式では常にキャリア側が保持するIPアドレス帯に気を配る必要があり、場合によっては誤作動となってしまう可能性もあったため、IPアドレスではなくブラウザが送出するユーザエージェントを元にデバイスを判別する方法も用いられてきました。この方式では、IPアドレスの管理を行う必要性がない一方、ユーザエージェントの情報をWebサーバ側で管理する必要性がありますし、そもそもユーザエージェントの値は閲覧者側で書き換え可能であるため、PCからでもモバイル表示ができてしまうという問題もありました。

スマートフォン用コンテンツを作成する場合には、後者のユーザエージェントによる判別を行う必要があります。というのも、スマートフォンはPCやラップトップ同様、3GネットワークではないWi-Fi経由での接続が考えられるためです。ここで、

「⁠⁠メジャーな)iPhoneであればちゃんと判別されそうだけど、Androidはちゃんとモバイル端末として判定されるのかなぁ?」

といった心配が出てくるかもしれませんので、実際の判定部分を少し覗いてみることにしましょう。MODxの管理画面よりプラグインのソースをちらりと眺めてみると、どうやらクライアントの判断は

リスト2 mobiledetectionプラグインのクライアント判定部分
//Detect iPhone
} else if (($uagent_obj->DetectTierIphone() == $uagent_obj->true) && ($iphone == 1)){
delete_template_nodes($standard_node, $mobile_node);
store_user_prefs($mobile_node, $usecookie);
//Detect iPad
} else if (($uagent_obj->DetectIpad() == $uagent_obj->true) && ($ipad == 1)){
delete_template_nodes($standard_node, $mobile_node);
store_user_prefs($mobile_node, $usecookie);

のようにして行っているようです。この、 DetectTierIphoneというメソッドを検索してみたところ、これは/var/www/html/assets/components/mobiledetection/mdetect.phpで定義されていることがわかりました。この中を見てみると、次のような変数宣言が見つかります。

リスト3 mdetect.php中の機種判定変数
   //Initialize some initial smartphone string variables. 
   var $engineWebKit = 'webkit'; 
   var $deviceIphone = 'iphone'; 
   var $deviceIpod = 'ipod'; 
   var $deviceIpad = 'ipad'; 
   var $deviceMacPpc = 'macintosh'; //Used for disambiguation 

   var $deviceAndroid = 'android'; 
   var $deviceGoogleTV = 'googletv'; 
   var $deviceXoom = 'xoom'; //Motorola Xoom 
   
   var $deviceNuvifone = 'nuvifone'; //Garmin Nuvifone 

   var $deviceSymbian = 'symbian'; 
   var $deviceS60 = 'series60'; 
   var $deviceS70 = 'series70'; 
   var $deviceS80 = 'series80'; 
   var $deviceS90 = 'series90'; 
   
   var $deviceWinPhone7 = 'windows phone os 7'; 
   var $deviceWinMob = 'windows ce'; 
   var $deviceWindows = 'windows'; 
   var $deviceIeMob = 'iemobile'; 
   var $devicePpc = 'ppc'; //Stands for PocketPC 
   var $enginePie = 'wm5 pie'; //An old Windows Mobile 
   
   var $deviceBB = 'blackberry';   
   var $vndRIM = 'vnd.rim'; //Detectable when BB devices emulate IE or Firefox 
   var $deviceBBStorm = 'blackberry95';  //Storm 1 and 2 
   var $deviceBBBold = 'blackberry97'; //Bold 
   var $deviceBBTour = 'blackberry96'; //Tour 
   var $deviceBBCurve = 'blackberry89'; //Curve2 
   var $deviceBBTorch = 'blackberry 98'; //Torch 
   var $deviceBBPlaybook = 'playbook'; //PlayBook tablet 
   
   var $devicePalm = 'palm'; 
   var $deviceWebOS = 'webos'; //For Palm's new WebOS devices 
   var $engineBlazer = 'blazer'; //Old Palm browser 
   var $engineXiino = 'xiino'; //Another old Palm 
   
   var $deviceKindle = 'kindle'; //Amazon Kindle, eInk one. 
   
   //Initialize variables for mobile-specific content. 
   var $vndwap = 'vnd.wap'; 
   var $wml = 'wml';   
   
-- 略 --

これを見ると、iPhoneやAndroidはもちろんのこと、WindowsPhoneやNintendo DSなど、思った以上にさまざまなデバイスがサポートされているようです。

最後に

中途半端な形での紹介になってしまいましたが、mobiledetectionプラグインの基本的な挙動が理解できたところで、次回は実際にPC表示、モバイル表示を使い分けるためのテンプレートを紹介していきたいと思います。お楽しみに。

おすすめ記事

記事・ニュース一覧