Movable Type、スマホ版の作り方

謎のプリン語る。
プログラミングの役立つ情報とか、どうでもいい雑談とか書いてます。
一人書く人増えました。

Movable Type、スマホ版の作り方

2016年11月05日

みやびプリン 500 316

500 320

Movable Type、スマホ版の作り方 - サムネイル

※この記事は8年以上前の記事です。
現在は状況が異なる可能性がありますのでご注意ください。

またまただいぶごぶさたで。
仕事がやばかった・・・。

さて、お気付きの方もいるかと思いますが、
月の高いところもやっとこさ、スマホ版公開できました。
実はまだ一部できてないけどね・・・。

というわけで、Movable Type（以下MT）でスマホ版ページを作る方法を解説してみようと思う。

さて、MTでスマホページを作る方法は大きく分けて二種類ある。

俺はどうしたかって？
当たり前だ、自作に決まっておろう。
というか、MTの公式プラグイン、16万もするもん、手出せんて。

ではどうするか、下記仕様のスマホサイトを作るとする。

  • ・URLは同じ
  • ・レスポンシブは使わない（コーディングめんどくさいから）
  • ・PHPによる、ビューの振り分けをする

というわけで、下記の機能を備えたサーバーが必要だ。

  • ・.htaccessなどを使ったサーバーサイドのリダイレクト、リライトを自分で設定できる。
  • ・PHP、もしくはParlなどサーバーサイドプログラムが使用できる（MT使える時点でここは解決）

安めのレンタルサーバーなんかは、上記機能が使えない場合もあるので、注意してください。
さて、前置きは以上にしてやっていこう。

●スマホ用テンプレートの用意

スマホ用ページ生成のテンプレートを用意する。
ブログ記事を例にやっていく。
※MTの基本的な使い方は解説しないよ。

screen_201611050001.jpg

まずは、既存のテンプレートをコピーして、
テンプレート編集画面を開き、
テンプレートタイトルの頭を、まぁ、SP-とつけたりして区別する。
してとりあえず、保存（ここで再構築もしてしまうと、アーカイブマッピングがバッティングするのでしない）

screen_201611050002.jpg

次にアーカイブマッピングだが、
例えば、/blog/2016/11/05_******.htmlというふうに記事を作る場合、
アーカイブマッピングは、%y/%m/%d_%e.htmlとなるはず。
これを、スマホ用テンプレート領域に保存するために、
../sp/blog/%y/%m/%d_%e.html
と設定する。

こうすれば、ルートに、"sp"フォルダができ、
その中で、スマホ用テンプレートを溜めることができる。

実はこれMTの最大の利点で、
アーカイブマッピングをうまく使えば、領域内の、どこにでも好きなファイルを生成できるのだ。

あとは、スマホ用のコーディングにして、保存と再構築だ。
それ以外のテンプレートも同じように、スマホ用にコピーし、編集し、アーカイブマッピングを変更し、再構築していく。

次は、振り分け用のPHPだ。

●PC・スマホ振り分けPHPインデックス

これは下記のような感じでPHPファイルを用意し、/sp/sp_exchange.php　って感じで置いておく。

<?php
//アクセスURL・パラメータの取得
$hostName = $_SERVER['HTTP_HOST'];
$uriName = $_SERVER['REQUEST_URI'];
$queryString = (isset($_SERVER['QUERY_STRING'])) ? $_SERVER['QUERY_STRING'] : false;

//パラメータがある場合、URL格納変数からパラメータを取り除く
if ($queryString) {
  $uriName = str_replace("?" . $queryString, "", $uriName);
}

//ユーザーエージェントを、全て小文字にして取得
$ua = mb_strtolower($_SERVER['HTTP_USER_AGENT']);
//モバイルかどうかのフラグを指定（このファイルでやっとくと、全ページで、PHP上でスマホフラグを持てる　なんでかはのちに解説）
$mobileFlg = false;
$devices = array(
  'iphone',
  'android',
  'ipod'
);
foreach ($devices as $dValue) {
  if (strpos($ua, $dValue) !== false) {
    $mobileFlg = true;
    break;
  }
}

//スマホの場合、色々と処理する
if ($mobileFlg) {
  if (strpos($uriName,'.html') !== false || strpos($uriName,'.php') !== false) {
    //リダイレクトで、index.html→/　という処理をしていた時のために、.phpとか.htmlをつけるための振り分け
    if (strpos($uriName,'sp_exchange.php') !== false) {
      //このファイルに直接アクセスじゃない場合
      $uriName = '/index.php';
    }
  } else {
    //上記同様に、/アクセスだった場合に、urlにアクセスファイル名を付加する。
    $uriName .= 'index.html';
  }

  if (file_exists(dirname(__FILE__) . $uriName)) {
    //このファイル自体が、/sp/内なので、同階層に同じファイル名のファイルがある場合、そのファイルをインクルードする
    include(dirname(__FILE__) . $uriName);
  } else {
    //ファイルがない場合は、Not Foundとする。
    header('HTTP/1.1 404 Not Found');
    include(dirname(__FILE__) . '/404/index.html');
  }
} else {
  //PCは全てトップへ
  $topUrl = 'http://' . $hostName;
  header("Location: {$topUrl}");
  exit;
}

アクセスURL、デバイスに対して上記のような処理をする。
とまぁ、PHP処理は以上で、次はサーバー側のアクセス処理なんだけど、勘のいい人は、何をやるかわかるでしょう。

●リライト・リダイレクト処理

最後にアクセスに対して、デバイスごとに振り分けをする。
.htaccess、もしくは、mod_rewrightなどで、下記の処理をする。

RewriteEngine on
RewriteBase /

#スマホのユーザーエージェントを条件に追加
RewriteCond %{HTTP_USER_AGENT} (iPod|iPhone|iPad|Android|Windows\ Phone) [NC]
#各種画像などのファイルは除外
RewriteCond %{REQUEST_FILENAME} !^(.*)\.(gif|png|jpg|jpeg|css|js|mp4|ogv|zip|mp3|mid|ico|xml|rdf|rss|txt)$ [NC]
RewriteCond %{REQUEST_URI} !/sp/sp_exchange.php
RewriteRule ^(.*)$ /sp/sp_exchange.php [L,QSA]

そう、前項目でお気付きの方もいるかと思いますが、
スマホからのアクセスを全て、/sp/sp_exchange.php
に流してるのだ。
リダイレクトではなくリライトなのがポイント。
URLは変えずに、表示するものだけ変えている。

こうすることによって、処理と管理がグンとしやすくなるのだ。
実は、WordPressなんかも似たようなことしてたりする。
アクセスURLによって、インクルードさせるファイルを振り分けて、個々のページを表示しているのだ。

仕上げに、SEOのために、robots.txtに、/sp/以下のファイルには、ロボットが来ないようにしておく。

User-agent: *
Disallow: /sp/
Allow: /

いかがだったでしょうか。
細かところは省いてるので、足りない部分があるかもしれませんが、
こんな感じで月の高いところは、スマホページ作ってみました。

もっといい方法があるって方は教えていただけると幸いです。

ではまた。

トラックバック(0)

トラックバックURL:

コメントする

※
※
※

ページトップへ戻る