HOME ＞ (旧)開発者blog ＞ モバイル対応サイトの作成メモ（PHP・CSS・JSON）

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

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

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

　運営するサイトへのモバイル端末からのアクセスが増えている。スマートフォンやタブレットが爆発的に普及していることを実感する。
　例えば「最速資産運用ma-bank.net/ 」のパソコンとモバイルの比率は以下の通り（モバイルにはタブレットを含む）。約１年前と比べると大きく変動していることが分かる。
デバイス
 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化した上で、テーブルの描画を、パソコン向けとモバイル向けの２種類に振り分けることにする。モバイル判定は上記の「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は非常に役立つ（実際「EDIUNETediunet.jp/ 」の多言語化においてJSONを利用中）。
　MySQLやSQLite等のデータベースを使えば同等のことが可能だが、そこまで大袈裟にしたくない場合、簡易データベース的にJSONを使うのはアリだと思う。
　ちなみに「最速資産運用ma-bank.net/ 」におけるJSONデータは、メンテナンスのしやすさを重視し、エクセルで管理・作成している。
　
　長くなってきたので、今日はここまで。（たぶん続く）

【追記】 「モバイル対応サイトの作成メモ（PHP・CSS・JSON）－２」を書いた。（2013-03-09）
HOME ＞ (旧)開発者blog ＞ モバイル対応サイトの作成メモ（PHP・CSS・JSON）

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