ウェブ、ショウジン

国内主要3キャリア対応のxhtmlモバイル向けページを作成

2010-6-8
Category
Mobile PHP

さくらインターネットのスタンダードプランでPHPのNet_UserAgent_Mobileを使い、アクセスしてきた携帯電話端末を判別し、適切なDOCTYPEを出力させる。

参考にさせてもらった(というか、まんまだけど)のはPHP×携帯サイト デベロッパーズバイブル

内部文字エンコーディングは携帯の特殊文字にも対応できるようにeucJP-winを使用。出力文字エンコーディングはShift_JIS。作成するページの文字コードはeuc-jp。

mbstring.internal_encoding = eucJP-win

また、文字エンコーディングを自動で検出する順番を明確に定義しておく。

mbstring.detect_order = SJIS-win,eucJP-win,JIS,UTF-8,ASCII

さくらでは.htaccessにphpの設定を記述するとエラーになるのでphp.iniに記述する。

go-pearを使ってPEARとライブラリのNet_UserAgent_Mobileをインストールしておき、include_pathも記述。phpの省略タグを有効にしておくと冒頭のxml宣言を出力する際にページが表示できなくなる不具合があるのでこれを無効にしておく。

さくらではデフォルトだと外部ファイルのincludeが使えないので、これも使えるように有効にしておく。

以上をふまえて、php.iniの内容を次のように設定。

php.ini

include_path = ".:/home/ユーザネーム/pear/bin"
short_open_tag = Off
allow_url_include = On
mbstring.internal_encoding = eucJP-win
mbstring.detect_order = SJIS-win,eucJP-win,JIS,UTF-8,ASCII

さくらインターネットではディレクトリごとにphp.iniを設置することができる。このphp.iniは、今回の作業用ディレクトリ内においてのみ設定したいので/www/ユーザネーム/作業ディレクトリ/php.iniとした。(Webルートには既に別のphp.iniがある)

まず、アクセス端末に応じてXHTMLのDOCTYPEを出力するライブラリを作成。

mobile_xhtml_doctype.php

<?php
// Net_UserAgent_Mobileの読み込み
require_once 'Net/UserAgent/Mobile.php';

//アクセス端末に対応したXHTMLのDOCTYPEを出力する
function mobile_xhtml_doctype()
{
// 出力するDOCTYPE
$doctype = "";

// Net_UserAgent_Mobileをインスタンス化する
$agent = Net_UserAgent_Mobile::singleton();

// キャリアをチェックする
if ($agent->isDoCoMo()) {
	// DoCoMo
	// ブラウザタイプ
	$type = $agent->getHTMLVersion();

	// FOMAかどうかチェックする
	if ($agent->isFOMA()) {
		if (strcmp($type, "4.0") == 0) {
			// DoCoMo (iモードXHTML1.0)
			$doctype = '<!DOCTYPE html PUBLIC "-//i-mode group (ja)//DTD XHTML i-XHTML(Locale/Ver.=ja/1.0) 1.0//EN" "i-xhtml_4ja_10.dtd">';
		} else if (strcmp($type, "5.0") ==0 ) {
			// DoCoMo (iモードXHTML1.1)
			$doctype = '<!DOCTYPE html PUBLIC "-//i-mode group (ja)//DTD XHTML i-XHTML(Locale/Ver.=ja/1.1) 1.0//EN" "i-xhtml_4ja_10.dtd">';
		} else if (strcmp($type, "6.0") == 0) {
			// DoCoMo (iモードXHTML2.0)
			$doctype = '<!DOCTYPE html PUBLIC "-//i-mode group (ja)//DTD XHTML i-XHTML(Locale/Ver.=ja/2.0) 1.0//EN" "i-xhtml_4ja_10.dtd">';
		} else if (strcmp($type, "7.0") == 0) {
			// DoCoMo (iモードXHTML2.1)
			$doctype = '<!DOCTYPE html PUBLIC "-//i-mode group (ja)//DTD XHTML i-XHTML(Locale/Ver.=ja/2.1) 1.0//EN" "i-xhtml_4ja_10.dtd">';
		} else if (strcmp($type, "7.1") == 0) {
			// DoCoMo (iモードXHTML2.2)
			$doctype = '<!DOCTYPE html PUBLIC "-//i-mode group (ja)//DTD XHTML i-XHTML(Locale/Ver.=ja/2.2) 1.0//EN" "i-xhtml_4ja_10.dtd">';
		} else if (strcmp($type, "7.2") == 0) {
			// DoCoMo (iモードXHTML2.3)
			$doctype = '<!DOCTYPE html PUBLIC "-//i-mode group (ja)//DTD XHTML i-XHTML(Locale/Ver.=ja/2.3) 1.0//EN" "i-xhtml_4ja_10.dtd">';
		}
	}
} else if ($agent->isEZweb()) {
	// au
	// WAP2.0の場合
	if ($agent->isWAP2()) {
		$doctype = '<!DOCTYPE html PUBLIC "-//OPENWAVE//DTD XHTML 1.0//EN" "http://www.openwave.com/DTD/xhtml-basic.dtd">';
	}
} else if ($agent->isSoftBank()) {
	// SoftBank
	// W型か3GC型の場合
	if($agent->isTypeW() || $agent->isType3GC()) {
		$doctype = '<!DOCTYPE html PUBLIC "-//JPHONE//DTD XHTML Basic 1.0 plus//EN" "xhtml-basic10-plus.dtd">';
	}
}
	return $doctype;
}
?>

つづいて、内部文字コードを出力文字コードに変換するライブラリを作成する。

output_encode.php

<?php
// 内部文字コードを出力文字コードに変換するライブラリ
function output_encode()
{
// バッファにためた出力データを取得する
$str = ob_get_contents();

// 内部文字コードを出力文字コードに変換する
$output = mb_convert_encoding($str, 'SJIS-win', mb_internal_encoding());

// バッファをクリアする
ob_end_clean();

// Content-TypeをXHTMLにする
header('Content-Type: application/xhtml+xml;');

// 内容を出力する
echo $output;
}
?>

さらに、output_encode.phpやmobile_xhtml_doctype.php他、共通化した部分をinclude.phpとinclude_base.phpにまとめて、これをページで読み込んで組み立てる。

include_base.php

<?php

// 内部文字コードを出力文字コードに変換するライブラリを読み込む
require_once 'output_encode.php';

// アクセス端末に対応したXHTMLのDOCTYPEを出力するライブラリを読み込む
require_once 'mobile_xhtml_doctype.php';

// 出力のバッファリングを有効にする
ob_start();

// XML宣言
$xml = <<<eol
<?xml version="1.0" encoding="Shift_JIS"?>
EOL;

$xhtml_name = <<<eol
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
EOL;

// keywords
$keywords = "keyword1,keyword2,keywords3";

// description
$description = "ページ概要";

// title
$title = "ページタイトル";

// h1
$h1 = "H1タグの内容";

include.php

<?php

// description
$xhtml_head_description = <<<eol
<meta name="description" content="{$description}" />
EOL;

// keywords
$xhtml_head_keywords = <<<eol
<meta name="keywords" content="{$keywords}" />
EOL;

// title
$xhtml_head_title = <<<eol
<title>{$title}</title>
EOL;

// h1
$xhtml_h1 = <<<eol
<h1>{$h1}</h1>
EOL;

// ヘッダ部分のmeta情報を組み立て
$xhtml_head_meta = <<<eol
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset='Shift_JIS'" />
{$xhtml_head_keywords}
{$xhtml_head_description}
{$xhtml_head_title}
<meta http-equiv="content-language" content="ja" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Cache-Control" content="no-cache" />
<meta http-equiv="Expires" content="-1" />
EOL;

$xhtml_body = <<<eol
<body>
EOL;

// XHTML DOCTYPE
$xhtml_doctype = mobile_xhtml_doctype();

// XHTMLのヘッダ部分を組み立て
$xhtml_header = <<<eol
{$xml}
{$xhtml_doctype}
{$xhtml_name}
<head>
{$xhtml_head_meta}
</head>
{$xhtml_body}
EOL;

// footer
$xhtml_footer = <<<eol
</body>
</html>
EOL;

最後に、実際に端末側でユーザに見せるページを作成する。

index.php

<?php

require_once 'include_base.php';

/*
keywordsやdescription、titleなどのデフォルトの内容を
ページごとに変更する場合はここで定義
$title = "別のタイトル";
$description = "別の概要";
$keywords = "別のキーワード";
$h1 = "別のh1の内容";
*/

require_once 'include.php';
echo $xhtml_header;
?>

<?php echo $xhtml_h1; ?>

XHTMLだよ〜ん
<hr />
<div style="background:#ccc;text-align:center;font-size:xx-small">xhtmlで表示しているよ。</div>

<?php
echo $xhtml_footer;
output_encode(); // 内部文字コードを出力文字コードに変換する

Categories

Tag Cloud

AdMob Android Apache centos CodeIgniter EC-CUBE facebookアプリ facebookページ feed Firefox Flash google googleanalytics htaccess iPad iPhone JavaScript lamp mobile nginx ogp pear php plugin rollover rss sendmail setting smarty ssh Titanium Mobile Titanium Studio tutorial ubuntu vim VirtualBox vmware vps Windows WordPress xampp youtube さくらインターネット アクセス解析 カスタム投稿