モバイル対応サイトの作成メモ(PHP・CSS・JSON)

※以前別の場所で書いた文章を備忘的に書き記しておきます。

【投稿年月日】2013-03-08 【ジャンル】PHP/MySQL

 運営するサイトへのモバイル端末からのアクセスが増えている。スマートフォンやタブレットが爆発的に普及していることを実感する。
 例えば「最速資産運用 ma-bank.net/ 」のパソコンとモバイルの比率は以下の通り(モバイルにはタブレットを含む)。約1年前と比べると大きく変動していることが分かる。
デバイス
2012年
(3月1日~3月30日)
2013年
(2月5日~3月7日)
パソコン
86.4%
69.5%
モバイル
13.6%
30.5%

 と言うことなので、重い腰を上げ、モバイル(と言うか、スマートフォン)対応サイトを作成することにした。
 以下、モバイル対応サイトの作成にあたって、実際の作業状況を書き残しておく。
  1. モバイル判定はユーザーエージェントとセッションで実施(PHP)
  2. テーブルはデータをJSON化した上で処理
  3. モバイル用のMETAタグ設定
  4. モバイル用のCSSを作成
  5. チェックボックスはlabelのCSS等で対応
  6. モバイル広告の幅は最大320pxに

1. モバイル判定はユーザーエージェントとセッションで実施(PHP)

 モバイル端末をPHPで判定し、自動的に振り分ける方法を考える。モバイル向けページ、あるいは、パソコン向けページを自発的に選択する場合(例:「./?mobile=no」「./?mobile=yes」のようなリンク)のことも考慮に入れる必要があるので、以下のステップで組み立てる。
  1. ユーザーエージェントで判定処理
  2. $_GET(「./?mobile=yes」や「./?mobile=no」)で判定処理
  3. セッションに判定結果を格納
/**********************************************
モバイルチェック
**********************************************/
 function ch_mobile() {
  $mobile = 'no';
//ユーザーエージェントの判定処理
  if(isset($_SERVER['HTTP_USER_AGENT'])) {
   if(strpos($_SERVER['HTTP_USER_AGENT'], 'iPhone')!==false) {
    $mobile = 'yes';
   }else if(strpos($_SERVER['HTTP_USER_AGENT'], 'iPad')!==false) {
    $mobile = 'yes';
   }else if(strpos($_SERVER['HTTP_USER_AGENT'], 'Android')!==false) {
    $mobile = 'yes';
   }
  }
//$_GETでモバイル向けページを選択(./?mobile=yes)した場合の処理
  if(isset($_GET['mobile'])=='yes') {
   $mobile = 'yes';
   $_SESSION['mobile'] = 'yes';
//$_GETでパソコン向けページを選択(./?mobile=no)した場合の処理
  }else if(isset($_GET['mobile'])=='no') {
   $mobile = 'no';
   $_SESSION['mobile'] = 'no';
  }
//$_SESSIONが存在していない場合の処理
  if(!isset($_SESSION['mobile'])) {
   $_SESSION['mobile'] = $mobile;
  }
  return $_SESSION['mobile'];
 }
【追記】言わずもがなですが、セッションを使う場合、「session_start()」を宣言しておく必要があります。(2013-03-09)

2. テーブルはデータをJSON化した上で処理

 モバイル向けサイトは画面が狭いので、横に伸びるテーブルの扱いが難しい。
 そこで、データをJSON化した上で、テーブルの描画を、パソコン向けとモバイル向けの2種類に振り分けることにする。モバイル判定は上記の「ch_mobile()」関数を使用する(パフォーマンスを考慮に入れるのならば、モバイル判定については、Class内で共通で使える変数として扱った方がいい)。
 流れとしては、JSONデータを「stream_context_create()」と「file_get_contents()」を使って取得し、「json_decode()」で配列に変換する。その上で、パソコン向けとモバイル向けに振り分ける。
 モバイル向けの場合、<tr>を使って縦に伸ばすか、表示する要素を減らすかで対応する。下記サンプルにおいては、<tr>を使って縦に伸ばすことでモバイル対応させています。
/**********************************************
JSON出力サンプル
**********************************************/
 function json_echo() {
  $tds = "";
  $url = "http://[サイトのURL]/";
  $json = "data.json";
  $opts = array('http' => array('method' => "GET", 'header' => "Referer: ".$url."\r\n"));
  $context = stream_context_create($opts);
  $text = file_get_contents(dirname(__FILE__).'/'.$json, false, $context);
  $texts = json_decode($text, true);
  foreach($texts as $a) {
   if($this->ch_mobile()=='yes') {
    $tds .= '<tr>
<td>'.$a["title"].'</td>
<td>'.$a["body"].'</td>
</tr>
<tr>
<td>'.$a["more"].'</td>
</tr>';
   }else {
    $tds .= '<tr>
<td>'.$a["title"].'</td>
<td>'.$a["body"].'</td>
<td>'.$a["more"].'</td>
</tr>';
   }
  }
  $th = ($this->ch_mobile()=='yes') ? '<tr><th>Title</th><th>Body</th></tr>' : '<tr><th>Title</th><th>Body</th><th>More</th></tr>';
  return '<table>'.$th.$tds.$th.'</table>';
 }
 なお、JSONを利用する利点として、HTML(PHP)側とJavaScript側とでデータを簡単に共有できる点も挙げられる。データをJSON化するのは結構面倒くさいが、モバイル対応に役立つほか、同時にJavaScriptとデータ共有ができるので、後々のメンテナンスのことを考えるとお勧めである。更に言えば、多言語化する際もJSONは非常に役立つ(実際「EDIUNET ediunet.jp/ 」の多言語化においてJSONを利用中)。
 MySQLやSQLite等のデータベースを使えば同等のことが可能だが、そこまで大袈裟にしたくない場合、簡易データベース的にJSONを使うのはアリだと思う。
 ちなみに「最速資産運用 ma-bank.net/ 」におけるJSONデータは、メンテナンスのしやすさを重視し、エクセルで管理・作成している。
 
 長くなってきたので、今日はここまで。(たぶん続く)

【追記】 「モバイル対応サイトの作成メモ(PHP・CSS・JSON)-2」を書いた。(2013-03-09)

EDIUNET | PHP/MySQL | 独り言 | 提供サービス | JavaScript