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

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

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

はじめに

前回に引き続き,mobiledetectionプラグインを使ったスマートフォン向けサイトの構築方法について紹介していきます。

スマートフォン対応HTMLに関して

スマートフォンではSafariやOperaなどのブラウザを使用することができるため,特にスマートフォン用コンテンツを作成せずとも基本的なウェブブラウジングは可能です。ただし,

  • 場合によってはズームしないとコンテンツが読めない
  • リンクなどのhover属性の挙動がPCと異なる
  • サイズの大きい画像などは3G通信に不向き

といった問題があるため,スマートフォン用コンテンツを持つことができるのであれば,それにこしたことはありません。

スマートフォン用のHTMLに関しては,

などが参考になると思いますが,今回はJavaScriptを使用しない形でのシンプルな構成を例にあげます。なお,言い訳しておきますが,残念ながら筆者は近年のHTMLやCSSによるウェブのデザインを得意としておりませんので,以降のHTMLソース等には誤った表現が存在している可能性もあります。あらかじめご了承ください。

まず,現状のMODxのテンプレートですが,以前ダウンロードした「Andreas01」をカスタマイズして,次のような状態になっています。

リスト1 Andreas01テンプレートの内容

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">

<head>
  <base href="[[++site_url]]" />
  <meta http-equiv="content-type" content="text/html;charset=utf-8" />
  <link rel="stylesheet" type="text/css" href="assets/templates/andreas01/style/andreas01.css" media="screen,projection" />
  <link rel="stylesheet" type="text/css" href="assets/templates/andreas01/style/print.css" media="print" />
  <title>[[++site_name]] | [[*pagetitle]]</title>
</head>

<body>
<div id="wrap">

  <!-- ヘッダー -->
  <div id="header">
    <h1>[[++site_name]]</h1>
  </div>

  <!-- ページ上の画像 -->
  <img id="frontphoto" src="assets/templates/andreas01/images/front.jpg" width="760" height="175" alt="" />

  <!-- 左側メニュー -->
  <div id="avmenu">
    <div class="sideblock" id="sideMenu">
    <h2>メニュー</h2>
    [[!Wayfinder? &startId=`0` &level=`6`]]
    </div>    
  </div>

  <!-- 右側検索フォーム -->
  <div id="extras">
   <h3>検索</h3>
    <p>[[!SimpleSearchForm? &landing=`7` &tpl=`my_search`]]</p>
  </div>

  <!-- 中央コンテンツ -->
  <div id="content">
    [[*content]]
  </div>

  <!-- フッター -->
  <div id="footer">
    <p><a href="mailto:[[++emailsender]]">[[++site_name]]</a></p>
  </div>

</div>
</body>
</html>

スマートフォン表示の場合は,余計な画像や検索ウインドウを省略してみることにしました。また,Waifinderスニペットを使って,シンプルな横表示のナビメニューを表示しています。

リスト2 スマートフォン対応のテンプレートの内容

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">

<head>
  <base href="[[++site_url]]" />
  <meta http-equiv="content-type" content="text/html;charset=utf-8" />
<standard>
  <link rel="stylesheet" type="text/css" href="assets/templates/andreas01/style/andreas01.css" media="screen,projection" />
  <link rel="stylesheet" type="text/css" href="assets/templates/andreas01/style/print.css" media="print" />
</standard>
<mobile>
  <link rel="stylesheet" type="text/css" href="assets/templates/mobile/mobile.css" media="screen,projection" />
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">
</mobile>
  <title>[[++site_name]] | [[*pagetitle]]</title>
</head>

<body>
<div id="wrap">

  <!-- ヘッダー -->
  <div id="header">
    <h1><a href="/">[[++site_name]]</a></h1>
  </div>

<standard>
  <!-- ページ上の画像 -->
  <img id="frontphoto" src="assets/templates/andreas01/images/front.jpg" width="760" height="175" alt="" />

  <!-- 左側メニュー -->
  <div id="avmenu">
    <div class="sideblock" id="sideMenu">
    <h2>メニュー</h2>
    [[!Wayfinder? &startId=`0` &level=`6`]]
    </div>    
  </div>

  <!-- 右側検索フォーム -->
  <div id="extras">
   <h3>検索</h3>
    <p>[[!SimpleSearchForm? &landing=`7` &tpl=`my_search`]]</p>
  </div>
</standard>

<mobile>
<div id="navi">
  <p>[[!Wayfinder? &startId=`[[*parent]]` &level=`1`]]</p>
  <p>[[!Wayfinder? &startId=`[[*id]]` &level=`1`]]</p>
</div>
</mobile>

  <!-- 中央コンテンツ -->
  <div id="content">
    [[*content]]
  </div>

  <!-- フッター -->
  <div id="footer">
    <p><a href="mailto:[[++emailsender]]">[[++site_name]]</a></p>
  </div>

</div>
</body>
</html>

リスト3 assets/templates/mobile/mobile.cssの内容

#navi { 
  clear: both; 
} 
#navi ul { 
  padding: 0; 
  list-style-type: none; 
  list-style-position: outside; 
} 
#navi li { 
  display: inline; 
  padding: 0px 5px 0px 0px; 
  font-weight: bold; 
} 
#navi a { 
  color: #4444ee; 
  text-decoration: none; 
}

以上により,通常ブラウザやスマートフォンでの表示は次のようになります。

図1 通常ブラウザでの表示

図1 通常ブラウザでの表示

図2 スマートフォンでの表示

図2 スマートフォンでの表示

繰り返しになりますが,筆者の乏しいデザイン知識により,非常に素っ気無い感じではありますが,なんとなくイメージはつかめたのではないでしょうか?

もう少し洗練されたデザインを目指したい場合には,実際の大手のサイトを参考にさせてもらうのが一番です。ブラウザのユーザエージェントをiPhoneの値に切り替え,Yahoo!などの大手サイトを参考にしてみてください。詳しくは,⁠firefox iphone ユーザエージェント」といったキーワードで検索してみてください。

著者プロフィール

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

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

コメント

コメントの記入