携帯サイトを作る場合に、キャリアごとの仕様や、端末ごとの特徴を全て把握することはあまり現実的ではありません。仮に全てを把握したとしても、ひとつのファイルで全端末を完璧にカバーする携帯サイト用ウェブページを作ることは非常に困難な状況です。
各キャリアごとに最適化されたページを作るのもひとつの手ですが、少しでも無駄な作業を無くすために共通で使えるページを作ってみましょう。
3キャリア共通ファイルの準備
Content-Typeヘッダの設定
XHTMLで作られたページをdocomo端末で観覧する際に、ヘッダー情報を正しく設定しなければなりません。条件分岐で処理するためにPHPを使用します。
<?php
if (ereg("DoCoMo", $_SERVER['HTTP_USER_AGENT'])) {
header('Content-Type: application/xhtml+xml');
}
?>
このヘッダーを受け取ることでiモードブラウザは「XHTMLモード」に切り替わります。
XML宣言
次に、XML文章で記述されていることを宣言するためにXML宣言を記述します。
<?xml version="1.0" encoding="Shift_JIS" ?>
ソースの一行目に上記のXML宣言を記述すれば良いのですが、「<?」がPHPの開始部分と同じ文字列のため、エラーを起こす原因となってしまいます。不具合を回避するためには、PHPで文字列として書き出す必要があります。
<?php
echo "<?xml version=¥"1.0¥" encoding=¥"Shift_JIS¥" ?>";
?>
スタイルの記述
CSSは外部ファイルを読み込むのが正しいやり方ですが、対応していない端末があるために、ヘッダー内に直接記述する必要があります。XHTML文章では、<!-- -->（コメントアウト）を純粋に「コメント」として取り扱うのでCDATAセクションを使います。現状ヘッダーに記述して正しく動作するのはリンク色の指定だけのようです。
<style type="text/css">
<![CDATA[
a:link { color: #0000FF;}
a:visited { color: #0000FF;}
a:focus { color: #FF6600;}
]]>
</style>
ヘッダーをまとめる
以上をヘッダーとしてまとめてみます。
<?php
if (ereg("DoCoMo", $_SERVER['HTTP_USER_AGENT'])) {
header('Content-Type: application/xhtml+xml');
}
echo "<?xml version=¥"1.0¥" encoding=¥"Shift_JIS¥" ?>";
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-Type" content="application/xhtml+xml; charset=Shift_JIS" />
<title>【XHTML】携帯サンプルサイト</title>
<meta content="携帯,サンプル" name="keywords" />
<meta content="携帯サイトのサンプルです。" name="description" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<style type="text/css">
<![CDATA[
a:link{color: #0000ff;}
a:visited{color: #0000ff;}
a:focus{color: #ff6600;}
]]>
</style>
</head>
共通部分をテンプレート化する
HTMLで沢山のページを作っていくと管理が大変になってきます。例えば、20ページ作った後に背景色を変えたくなった場合、1ページずつソースを変更していると時間と手間が掛かりすぎてしまいます。
そこで、使い回しが出来る部分と、コンテンツの部分を切り離して、出来るだけ作業を楽にするためのテンプレートを自作で作っていきましょう。
まずは全ページ共通で使うヘッダーとフッターと、良く使う部品を変数に入れてまとめます。
<?php
/***********************************/
// 使いまわす部品の用意
/***********************************/
// ドメイン（ファイルを設置するディレクトリまで定義）
$domain = "https://".$_SERVER["HTTP_HOST"]."/";
// XML宣言
$xml_v = "<?xml version=¥"1.0¥" encoding=¥"Shift_JIS¥" ?>";
$body_text = "#000000";
$body_bg = "#FFFFFF";
$body_link = "#0000FF";
$body_vlink = "#0000FF";
$body_alink = "#0000AA";
$hr = "<hr style=¥"border-color:#999999; border-style:solid;¥" />";
$san = "<span style=¥"color:#999999;¥">…………………………</span>";
/***********************************/
// ヘッダーを定義
/***********************************/
$header = <<< TAGSET
{$xml_v}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-Type" content="application/xhtml+xml; charset=Shift_JIS" />
<title>{$title}</title>
<meta name="keywords" content="{$keyword}" />
<meta name="description" content="{$description}" />
<link rel="alternate" media="handheld" href="alternate_page.htm" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<style type="text/css">
<![CDATA[
a:link{color: {$body_link};}
a:visited{color: {$body_vlink};}
a:focus{color: {$body_alink};}
]]>
</style>
</head>
<body text="{$body_text}" bgcolor="{$body_bg}" link="{$body_link}" vlink="{$body_vlink}" alink="{$body_alink}" style="color:{$body_text}; background-color:{$body_bg};">
TAGSET;
/***********************************/
// フッターを定義
/***********************************/
$footer = <<< TAGSET
{$hr}
<div style="text-align:center; font-size:x-small;">(C)Sample.</div>
</body>
</html>
TAGSET;
?>
続いてコンテンツ部分を作ります。ページごとに切り替わるタイトルや説明文はこちらで定義します。先ほど作ったテンプレートを[include]で読み込み、ヘッダーを出力します。
<?php
if (ereg("DoCoMo", $_SERVER['HTTP_USER_AGENT'])) {
header('Content-Type: application/xhtml+xml');
}
$title = "このページのタイトル";
$keyword = "キーワード";
$description = "このページの説明文。";
include("./inc_temp.php");
echo $header;
?>
<!--=== CONTENTS ===-->
コンテンツ部分を記述
<!--/=== CONTENTS ===-->
<?php echo $footer; ?>
このように、使い回しの部分をひとつのファイルで管理しておけば、ファイルが増えても問題なくメンテナンスすることができます。主要3キャリアの表示をひとつのファイルで対応できるため、無駄な更新をしなくて済みます。
携帯サイトリファレンス
| 項目 | 概要 |
|---|---|
| 携帯サイトの基礎知識 | 携帯サイトを作る時に押さえておくべきポイント |
| 携帯サイトの基本的な作り方 | 携帯サイトで使えるタグは限られているので有効に使いましょう |
| HTMLをXHTML化する | 携帯サイトをHTMLからXHTML化する時に役立つ知識 |
| 3キャリア対応のXHTML携帯サイト | 携帯3キャリア対応の共通ページをXHTMLで作る方法 |
| 携帯サイトのフォントサイズ指定 | 携帯サイトで文字の大きさを決める際のコツを紹介 |
| 携帯サイトの見出し | 画像を使わなくてもできる携帯サイトの見出しサンプル |
| 文字入力モードの指定 | 文字入力が必要なフォームを設置する際の初期値を制御する方法 |