「同じURLで異なるHTMLを動的に配信する」ダイナミック・サービングを、静的ページ＆WordPressで行う！

本日2014年10月10日現在、iPad（横幅768px）に満たない「手の平サイズ」であるスマホ＆ファブレット端末からウェブを見ている人は、StatCounterの統計によると日本で23%。全ウェブサイトの約4分の1が、この小さな画面で表示されているんですね。

これまでPCでの閲覧しか考慮していなかったBtoB企業のサイトでも、手の平サイズの画面で表示される機会が増えてきました。
私が制作を担当させてもらっているBtoB企業のクライアントさんで、横幅960pxのPCサイトのみだった自社サイトが、スマホからのアクセスが全体の3分の1を超えてきたところがあり、今回スマホ最適化を行いました。

レスポンシブではなく、ダイナミック・サービングを採用

既存のPCレイアウトはそのまま残し、スマホを新設することになりましたが、1ページ内の情報量が非常に多い状態だったので、Googleが最も推奨するレスポンシブではなく、2番目の「同じ URL で異なる HTML を動的に配信する」ダイナミック・サービングと呼ばれる手法で、ページの核となる部分のみスマホで表示することにしました。

https://developers.google.com/webmasters/smartphone-sites/details

PHPでユーザーエージェントを判別し、スマホとそれ以外（PC・タブレット）に分ける

参考サイト：
http://elearn.jp/wpman/column/c20111102_01.html

ユーザーエージェントを見て判別する関数を用意し、分岐によってスマホ用CSS・HTMLを表示するか、それ以外のPC・タブレット用CSS・HTMLなどを読み込みます。

<?php
function is_mobile() {
return preg_match( '/android.+mobile/i', $_SERVER['HTTP_USER_AGENT'] ) ||
preg_match( '/iphone/i', $_SERVER['HTTP_USER_AGENT'] );
}
?>

<?php if (is_mobile()): ?>

<head>
<!-- 〜スマホ用CSS読み込み〜 -->
</head>
<body>
<!-- 〜スマホ向けページソース〜 -->
</body>
<?php else: ?>

<head>
<!-- 〜PC用CSS読み込み〜 -->
</head>
<body>
<!-- 〜PC向けページソース〜 -->
</body>

<?php endif; ?>

<?php

function is_mobile() {

return preg_match( '/android.+mobile/i', $_SERVER['HTTP_USER_AGENT'] ) ||

preg_match( '/iphone/i', $_SERVER['HTTP_USER_AGENT'] );

}

<?php if (is_mobile()): ?>

<head>

</head>

<body>

</body>

<?php else: ?>

<head>

</head>

<body>

</body>

<?php endif; ?>

WordPressを使用している場合

参考サイト：
http://elearn.jp/wpman/column/c20111102_01.html

上記サイトでも解説されている通り、
モバイルからのアクセスは、テンプレート名の末尾に「-sp」が付けたものを使用するように、
フィルターフックを設定します。

function.phpにユーザーエージェント判別を記述し、スマホからのアクセスは、「-sp」のテンプレートを優先して読み込むよう設定します。

function is_mobile() {
return preg_match( '/android.+mobile/i', $_SERVER['HTTP_USER_AGENT'] ) ||
preg_match( '/iphone/i', $_SERVER['HTTP_USER_AGENT'] );
}

add_filter( 'template_include', 'mytheme_template_include' );
function mytheme_template_include( $template ) {
if ( is_mobile() ) {
$template_sp = str_replace( '.php', '-sp.php', $template );
if ( file_exists( $template_sp ) )
$template = $template_sp;
}
return $template;
}

function is_mobile() {

return preg_match( '/android.+mobile/i', $_SERVER['HTTP_USER_AGENT'] ) ||

preg_match( '/iphone/i', $_SERVER['HTTP_USER_AGENT'] );

}

add_filter( 'template_include', 'mytheme_template_include' );

function mytheme_template_include( $template ) {

if ( is_mobile() ) {

$template_sp = str_replace( '.php', '-sp.php', $template );

if ( file_exists( $template_sp ) )

$template = $template_sp;

}

return $template;

}

また、スマホからのアクセスはstyle.cssを読み込まず、スマホ用CSS「style-sp.css」を読むよう、アクションフックを設定します。

if (!is_admin()) {//管理画面を対象外に
function add_style() {
wp_deregister_style( 'twentyfourteen-style' ); //twentyfourteenテーマのstyle.cssを読み込まない
wp_enqueue_style( 'style-sp', get_bloginfo('template_url').'/style-sp.css', array( 'genericons' ) ); //style-sp.cssを読み込み
}
add_action('wp_print_styles', 'add_style');
}

if (!is_admin()) {//管理画面を対象外に

function add_style() {

wp_deregister_style( 'twentyfourteen-style' ); //twentyfourteenテーマのstyle.cssを読み込まない

wp_enqueue_style( 'style-sp', get_bloginfo('template_url').'/style-sp.css', array( 'genericons' ) ); //style-sp.cssを読み込み

}

add_action('wp_print_styles', 'add_style');

}

仕上げに、Googleにダイナミック・サービングを使用したページであることを宣言

ダイナミック・サービングはPC版とモバイル版が同じURLのため、片方だけしかクロールされず、情報が欠落することもあるそうです。これを防ぐために、「HTTP Vary: User-Agent」ヘッダーを返す設定をお忘れずに。

参考：
http://www.suzukikenichi.com/blog/building-websites-optimized-for-smartphones-and-feature-phones/