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

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

この記事を読むのに必要な時間:およそ 3 分

はじめに

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

著者プロフィール

中満英生(なかみつひでお)

大学時代に出会ったSolarisがきっかけでUNIXの世界へ。その後ホスティングプロバイダ,データセンターで実務経験を積む傍ら,雑誌記事の執筆や技術セミナーの講師を務める。サーバ設定の他,セキュリティに関する著作や技術者エッセイも執筆経験あり。

コメント

コメントの記入