digilog.blog

携帯サイト用3キャリア対応XHTMLテンプレートで中小規模のサイトを作る!

2008/10/30(木)
携帯サイト簡易テンプレート


【最新版】携帯サイトテンプレートをダウンロード


携帯サイトを作る場合に、キャリアごとの仕様や、端末ごとの特徴を全て把握することはあまり現実的ではありません。仮に全てを把握したとしても、一つのファイルで全端末を完璧にカバーする携帯サイト用ウェブページを作ることは非常に困難な状況です。

今回は携帯サイトを作る際に、なるべく無駄な作業が発生しないように、簡単にXHTML+CSSの携帯サイトを作れるやり方を説明します。

あくまで現時点でベターなやり方なので、「もっとこうしたらいいよ」というアドバイスやツッコミがあれば受け付けます。

それぐらい今の携帯サイト制作は曖昧な部分が多いので、皆様もネット上で拾った知識は参考程度に受け止め、是非「自分流」を作り出して欲しいと思います。

ソースのサンプルとテンプレートダウンロードは以下から。
一つのファイルで広いシェアをカバーする方法

各キャリアごとに最適化されたファイルを用意し、ユーザーエージェント判別でリダイレクトするようなやり方がありますが、これだとページの更新や修正があった場合に何度も同じようなソースをいじるはめになります。これではあまり生産的なやり方とは言えません。

できれば一つのファイルで全部のキャリアをカバーしたいのですが、ここで一つ問題があります。

auとSoftbankは通常のhtmlファイルでも記述内容によって自動でXHTMLを読み取ってくれるので問題ありません。しかし、docomoブラウザは、「Content-Typeヘッダ」を正しく伝えないとXHTMLモードにならずにCSSを認識してくれません。

これに関しては、ヘッダー内のMETA情報を
<meta http-equiv="content-Type" content="application/xhtml+xml; charset=Shift_JIS" />
と記述するだけでは駄目で、サーバーが吐き出すヘッダ情報で事前に「XHTMLだよ」と知らせてあげなければならないのです。

今回は最も簡単で手間の掛からない方法を取るので、PHPファイルでdocomoだった場合にのみ下記ヘッダを返すやり方を採用します。
<?php
if (ereg("DoCoMo", $_SERVER['HTTP_USER_AGENT'])) {
 header('Content-Type: application/xhtml+xml');
}
?>

さて、次に問題になるのが「XML宣言」です。
<?xml version="1.0" encoding="Shift_JIS" ?>
上記のようにソースの一行目に記述すれば良いのですが、「<?」がPHPの開始部分と同じため、エラーを起こす原因となります。不具合を回避するためには、PHPで文字列として書き出す必要があります。
<?php
echo "<?xml version=\"1.0\" encoding=\"Shift_JIS\" ?>";
?>

次に<style type="text/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" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://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" />
<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: #0000ff;}
a:visited{color: #0000ff;}
a:focus{color: #ff6600;}
]]>
</style>
</head>

あとはbody内のタグを携帯サイト用に記述していけばいいのですが、ここからが今回のポイントです。

ウェブページを作る際に一番気を配ることの一つに、メンテナンスの簡略化があります。

携帯サイト用のテンプレートを作る

例えば20ページ作った後に、背景色を変えたくなった場合、1ページずつソースを変更していったのでは時間と手間が掛かりすぎてしまいます。
かといって、たかだか数十ページの携帯サイトに「Smarty Template Engine」などのオープンソースや、「Movable Type」などのブログ構築プログラムを導入するのは大掛かりすぎます。

そこで、使い回しが出来る部分と、コンテンツの部分を切り離して、出来るだけ作業を楽にするためのテンプレートを自作で作ります。

インクルードするファイルに使い回す部分を作ります。
<?php
$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;\" />";

$header = <<< TAGSET
{$xml_v}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-Type" content="application/xhtml+xml; charset=Shift_JIS" />
<title>{$title}</title>
<meta content="{$keyword}" name="keywords" />
<meta content="{$description}" name="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}" style="color:{$body_text}; background-color:{$body_bg};" link="{$body_link}" vlink="{$body_vlink}" alink="{$body_alink}">
TAGSET;

$footer = <<< TAGSET
{$hr}
<div style="font-size:xx-small; text-align:center;">- Sample -</div>
</body>
</html>
TAGSET;
?>


コンテンツ部分を作ります。
<?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; ?>

こんな感じで使い回しの部分を一つのファイルで管理しておけば、ファイルが増えても問題なくメンテナンスできます。10~100ページくらいの中小規模の携帯サイトなら、これで十分かと思いますので、自分用にカスタマイズして使ってみて下さい。


【最新版】携帯サイトテンプレートをダウンロード


※リンク先の【zip】をダウンロードして下さい。

■携帯サイトにおけるHTMLとXHTMLの違いについて
別記事参照≫
■コメント
Re: タイトルなし / LOSTMAN@管理人 #-
>モバイルサイト用テンプレートについて、お聞かせください。
広告を表示させる場合には、各ASPの仕様にしたがって設置する必要があります。ランダムリンクに画像を使用する方法やPHPに関しては説明が長くなってしまうので、メニュー「CONTACT」から返信先メールアドレスを添えてお問い合わせ頂ければ、分かる範囲で回答します。
2010/11/05(金) 21:00 | URL
/ 名無し #-
モバイルサイト用テンプレートについて、お聞かせください。

『inc_link.php』の使い方なんですが、テキストリンクではなく画像などを用いるバナー画像やPHPを用いたバナー広告を使用したい場合はどうすれば宜しいでしょうか?

いろいろと試行錯誤しましたが、画面に何も表示されなくなってしまったりと、うまく作動してくれません。

お忙しい中だとは思いますが、お手すきの時にでもお返事頂けますと幸いです。
2010/11/05(金) 18:23 | URL
Re: 二次配布できますか? / LOSTMAN@管理人 #-
>さっちんさん
ここで紹介した携帯サイト用テンプレートをさっちんさんがカスタマイズして他の人に教える、ソースコードを配布することは非商用目的に限り可能です。
素材元としてこのブログかdigilog.(digilog.client.jp)を紹介して頂けると嬉しいです。
宜しくお願いします。
2010/09/09(木) 21:19 | URL
二次配布できますか? / さっちん #-
こんにちは。
携帯サイトのテンプレートはとても助かります。ありがとうございます。^^
ご相談ですが、このテンプレートを加工したものを他の人に教えても大丈夫でしょうか?
もし不可であれば、このサイトを教える、という対応でよろしいでしょうか?
どうぞよろしくお願いします。
2010/09/09(木) 08:59 | URL
>nanaさん / LOSTMAN@管理人 #yM49gNbs
どうもありがとうございます!
私の作ったモバイルサイトでも現役稼動中のテンプレです。もう少し色々やりたいっ!てなるとWordPressなりOpenPNEなんですけど、かゆい所に手が届く形で活用していただければ幸いです!
2009/11/14(土) 02:34 | URL
ありがとうございました / nana #-
一つのURLを振り分けphpでpc.phpとこのphpにわけています。pcもdocomoも表示できるし、大助かりでした。
2009/07/28(火) 05:50 | URL
>Nakaさん / LOSTMAN@管理人 #yM49gNbs
自分もdocomoの仕様には悩まされました!
早く携帯のWEB標準を決めて欲しいものですよね。
お役に立ててなによりです!
2009/02/01(日) 13:22 | URL
参考になりました / Naka #mQop/nM.
PHPファイルでドコモだった場合のCSS適用方法がずっと分からずにいました
検索してこの記事を読んで解決することができました
ありがとうございましたm(_ _)m
2009/01/18(日) 10:27 | URL
コメント投稿
URL:
コメント:
PASS:
秘密: 管理人のみに公開
 

プロフィール

管理人:LOSTMAN
東京でWebディレクターをやっています。独学で楽しみながら興味のあることを投稿していきます。

タグキーワード

関連サイト

HTML講座
CSS講座
SEO講座
無料素材・画像
HOME
[ FC2 ID ]