ウェブ制作 - できる！B地区exのコーディング
今書いてる。
基本設計
HTMLの構造化を考える。まずはこんな感じ。
| HTMLヘッダ（METAとか） | |
| ヘッダ情報 | |
| グローバルナビゲーション | |
| メインコンテンツ | メニュー |
| フッタ情報 | |
素のソースの記述
実際にソースにしてみる。強調部分が個別コンテンツ、つまりほとんどは使いまわしできるんだよねぇ。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta http-equiv="content-style-type" content="text/css" /> <meta http-equiv="content-script-type" content="text/javascript" /> <meta name="description" content="おはようからおやすみまで..." /> <meta name="keywords" content="おはよう,おやすみ,..." /> <meta name="Author" content="はじめ男爵 ( Baron Hajime )" /> <meta name="Distribution" content="Global" /> <meta name="Rating" content="adult" /> <link rel="stylesheet" type="text/css" href="/css/common.css" media="screen" /> <link rel="stylesheet" type="text/css" href="/css/print.css" media="print" /> <link rel="stylesheet" type="text/css" href="/css/handheld.css" media="handheld" /> <link rev="made" href="mailto:baron@b-area.org" /> <link rel="CONTENTS" href="/home.html" /> <title>B地区 - </title> </head> <body id=""> <!-- wrap starts here --> <div class="wrap"> <!--header --> <div class="header"> <h1 id="site_top"><a href="/index.html">ex B</a></h1> <p class="slogan">おいしい牛乳仕立て！</p> <div class="header-links"> <p><a href="/about.html">about</a> | <a href="/home.html">Home</a></p> </div> </div> <!-- menu --> <div class="navi-global"> <ul> <li><a href="/mod_uploader/">Up/Down</a></li> <li><a href="/DAT/index.html">DAT</a></li> <li><a href="/monologue/home.html">Monologue</a></li> <li><a href="/mono/index.html">Mono</a></li> <li><a href="/Misc/index.html">Misc</a></li> <li><a href="/Archives/index.html">Archives</a></li> <li><a href="/test/">test</a></li> </ul> </div> <div class="content-wrap"> <div class="navi-local"> <h2>Misc</h2> <img src="/Misc/images/misc.gif" alt="" width="128" height="127" class="block" /> <h3>お勉強</h3> <h4>プログラミング</h4> <ul class="menu-main"> <li>PHP</li> <li><a href="/Misc/web/exB.html">B地区exの作り方</a></li> <li><a href="/Misc/web/php.html">PHPとかSQL</a></li> </ul> </div> <div class="main"> <h2>ウェブ制作 - B地区exのコーディング</h2> .......つらつら........ <div class="content-end"><a href="#site_top">Page Top</a></div> </div> <!-- content-wrap ends here --> </div> <!--footer starts here--> <div class="footer"> <address> <a href="/home.html">Home</a> | Author: <a href="mailto:baron@b-area.org">はじめ男爵 ( Baron Hajime )</a> | Design by: <a href="http://www.styleshout.com/">styleshout</a> | Valid <a href="http://validator.w3.org/check?uri=referer">XHTML</a> / <a href="http://jigsaw.w3.org/css-validator/check/referer">CSS</a> | <script type="text/javascript" src="/js/logging.js"></script> </address> </div> <!-- wrap ends here --> </div> </body> </html>
XML宣言こそないけど、たぶんHTML-lintで満点取れるはず。
それにしてもこのテンプレート、ソース記述には向かないな。わかって採用したんだけどさ。
ソースへの当て込み
使いまわしできる部分をincludeさせる。オレはこんなふうにした。上のソースと差分を見比べると何を外部ファイル化したのかわかると思う。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="content-style-type" content="text/css" />
<meta http-equiv="content-script-type" content="text/javascript" />
<meta name="description" content="おはようからおやすみまで..." />
<meta name="keywords" content="おはよう,おやすみ..." />
<meta name="Author" content="はじめ男爵 ( Baron Hajime )" />
<meta name="Distribution" content="Global" />
<meta name="Rating" content="adult" />
<link rel="stylesheet" type="text/css" href="/css/common.css" media="screen" />
<link rel="stylesheet" type="text/css" href="/css/print.css" media="print" />
<link rel="stylesheet" type="text/css" href="/css/handheld.css" media="handheld" />
<link rev="made" href="mailto:baron@b-area.org" />
<link rel="CONTENTS" href="/home.html" />
<title>B地区 - </title>
</head>
<body id="">
<!-- wrap starts here -->
<div class="wrap">
<!--header -->
<div class="header">
<?php virtual("/inc/header.html");?>
<div class="header-links">
<?php virtual("/inc/header-links.html");?>
</div>
</div>
<!-- menu -->
<div class="navi-global">
<?php virtual("/inc/navi-global.html");?>
</div>
<div class="content-wrap">
<div class="navi-local">
<?php virtual("/inc/navi-local.html");?>
</div>
<div class="main">
<h2>ウェブ制作 - B地区exのコーディング</h2>
.......つらつら........
<div class="content-end"><a href="#site_top">Page Top</a></div>
</div>
<!-- content-wrap ends here -->
</div>
<!--footer starts here-->
<div class="footer">
<?php virtual("/inc/footer.html");?>
</div>
<!-- wrap ends here -->
</div>
</body>
</html>
今回はincludeの替わりにvirtualを使っている。ただ外部ファイル化したソース内でPHP処理をするならincludeでないと不都合が生じる可能性がある。ErrorDocumentで喰らった。
ポイントとしてはincludeさせるファイルの読み込みに失敗しても構造が崩れないようにすることかな。個別記事部分以外をすべてincludeさせる（HTMLタグを残さない）という手法もあるわけだが、あえて残すことにした。前述した理由だけでなく、そのほうがソースを眺めた際に見通しがいいのと（全部外部ファイル化するとCSSの表示調整とかかえって面倒になる）、細かいカスタマイズ...カテゴリーごとにメニューを変える...が容易だから。というわけで、基本構造を受け持つdiv要素を残しつつ、中身を外部ファイル化。ファイル名とCSSのセレクタ名を同じにしておくと把握しやすい。
なお、SEOを重視するならtitle要素だけでなく、metaのkeywordやヘッダ部分のh1要素もページごとに記述するほうがいいだろう。オレはそこまでこだわってないけど。
あとはできあがったソースを使いまわすだけだっ！
もうひと工夫
ついでに、サイト特有の文字列を変数化してみる。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<?php virtual("/inc/config.php");?>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="content-style-type" content="text/css" />
<meta http-equiv="content-script-type" content="text/javascript" />
<?php
echo("<meta name=\"description\" content=\"$meta_description\" />\n");
echo("<meta name=\"keywords\" content=\"$meta_keywords\" />\n");
echo("<meta name=\"Author\" content=\"$meta_author\" />\n");
echo("<meta name=\"Distribution\" content=\"$meta_distribution\" />\n");
echo("<meta name=\"Rating\" content=\"$meta_rating\" />\n");
echo("<link rel=\"stylesheet\" type=\"text/css\" href=\"$css_screen\" media=\"screen\" />\n");
echo("<link rel=\"stylesheet\" type=\"text/css\" href=\"$css_print\" media=\"print\" />\n");
echo("<link rel=\"stylesheet\" type=\"text/css\" href=\"$css_handheld\" media=\"handheld\" />\n");
echo("<link rev=\"made\" href=\"mailto:$site_address\" />\n");
?>
<link rel="CONTENTS" href="/home.html" />
<title><?php echo("$site_title");?> - </title>
</head>
<body id="misc_">
<div class="wrap">
<div class="header">
<h1 id="site_top"><a href="/index.html"><?php echo $site_name ?></a></h1>
<p class="slogan"><?php echo $slogan ?></p>
(略)
/inc/config.phpの中身はこんな感じ。変数名は予約語以外ならなんでもおｋだけど、他のスクリプトを併用する際には名前がぶつからないよう注意。PHP5は名前空間をサポートしてるから、プライベートな割り当てを別に設定するのもありというかそれが理想なんだろうけど。
<?php
$meta_description = ("おはようからおやすみまで、明日の日本を考える
600万ドルの男、はじめ男爵のステキなホームページ「B地区ex」です");
$meta_keywords = ("おはよう,おやすみ,日本の未来,かおりん,600万ドル, 男,
ウホッ,はじめ男爵,ステキ！,ホームページ,B地区, ex,extra.exiting,explorer,
Galaxian-Explosion,Athena-Exclamation,Athena-Naked-Exclamation,Death");
$meta_author = "はじめ男爵";
$meta_distribution = "Global";
$meta_rating = "adult";
$css_screen = "/css/common.css";
$css_print = "/css/print.css";
$css_handheld = "/css/handheld.css";
$site_name = "exB"; //h1など
$site_title = "B地区ex";//title要素
$site_url = "http://ex.b-area.org/";
$site_address = "baron@b-area.org";
$slogan = "おいしい牛乳仕立て！";
?>
こうしとくとすごく便利。例えばサイト名とかメアドってサイト内のいろんなところで出てくるけど、変数で埋め込んでおけばconfigの記述変えるだけで全部替わるし、リニューアルしてもソースの変更を最小限に留めることができる。まあ、ブログなんかでよくある機能を手作りで実装させるわけ。さらにこのファイルをブラウザ上で編集できるようにしちゃえば最強（あえてそこまですることもないけど、完地区の場合はこのへんもDBフィールドにしてるので管理ツールで全部処理できるのだっ！）。
ただ上記のように属性の値として変数を埋め込もうとする場合、クオーテーションの処理にちょっと工夫は必要かもしんないよ。まあprintもechoも関数じゃないから本来引数をカッコとかで囲む必要ってないんだけどね！
ちなみにHTMLソースをPHPに変換するのはYellowpipeのHTML Converterが便利。JavaScriptやASPにも対応してる。
最後に先頭行のXML宣言をブラウザ判定でOn/Offさせておしまい（XHTMLの場合だから、な！
補記
トップページとかはたぶん別に用意したほうがいいと思う。考え方は同じだけどね！当然スタイルシートの記述も別。そのためにbody要素にid属性持たせてるわけよ。カテゴリーごとにid変えてあげるとナビゲーションの切り替えなんかもウマー！になるよ！
もうちょっと詳しく
B地区exが採用したテンプレートのオリジナル、なかなかデキがいいのでカスタマイズしなきゃいけないところはそんなにないんだけど、ナビゲーションやメニューで現在ページだけ表示を切り替えるのに、スタイルシートでcurrentってセレクタ用意して現在ページの位置する項目にid="current"なんて指定をするのは外道のやることよ、いやファイルの共用化の著しい妨げになる。だったら各項目それぞれにid振って、body要素のidとマッチしたときに限り反転させるなり表示を変えるようにしたほうがエレガントと思わないかね？
<ul>
<li>うま</li>
<li>写真</li>
<li id="current">濡れ場</li>
</ul>
----------------------------------------------------------------
#current {color:red}
じゃなくて。
<body id="eros">
<ul>
<li id="navi_racing">うま</li>
<li id="navi_photo">写真</li>
<li id="navi_eros">濡れ場</li>
</ul>
----------------------------------------------------------------
body#racing #navi_racing {color:red}
body#photo #navi_photo {color:red}
body#eros #navi_eros {color:red}
こうすりゃメニューの使いまわしが楽じゃんね。こんな感じで、スタイルシートがない状態だと意味のないclassやidは極力排除しよう！
XHTML tipsに詳しいことは書いたけど、id属性はURIの一部としてRFC3986で定義されてるからスタイルシートのセレクタとして安易に使わないほうがいい。
~usernameな人
プロバイダのおまけスペース使ってるなら、virtualでincludeする場合<?php virtual("/~username/path...");?>ってするのもいいし、base要素で“~username”を指定しちゃうのもいいね！
簡易携帯端末対応
最大ファイルサイズとかはどうしようもない。でも不要な画像の非表示なんかはスタイルシートで簡単にできるよね！例えばB地区exでは大き目の画像はclassセレクタをblockと指定しているから、handheld用のcssでimg.block {display:none}とするだけでずいぶん節約できる。背景画像なんかも* {background-image:none}で全部消せる。ヘッダやフッタも不要ならじゃんじゃんdislpay:noneしてしまえっ！とはいっても必須タグまで全部消したりしないように。
問題は文字コードだよなあ。後方互換考えるとShift_JISにするしかないけど、所詮は簡易対応、と割り切ってUTF-8で突っ切ってしまおう。
handheld用のCSS、@importでscreen用を取り込んでみればわかるが、ぶっちゃけ携帯のCSS解釈はマジでアテにならないし、端末ごとの差が激しすぐる。だから記述は上の例だけしてあげればいいんじゃないの（@charsetは指定したほうがいいと思うけど）。ところでPSPってscreenとhandheld、どっちを読むんだろ？
脚注
- テンプレートの良し悪し
- まず物理的要素が排除されてること。レイアウトにtableとかとんでもない。あとはスタイルシートのセレクタでidを多用してないこと。