（2010/05/28 変更：Google Analytics非同期版が正式リリースされたので、Beta版から正式版に変えた）
（2010/08/30 変更：div構造を少しすっきりさせた）
（2010/11/04 変更：Google Analyticsのコードをhead要素内へ移動）
（2011/04/25 追加：IEの条件付きコメント（Conditional Comments）の例を追加）
Google Analytics非同期版とYUI 2 Grids CSSとjQueryを組み込んだHTML5の例。
header要素等のHTML5の新要素は使わない。（今のところあまりメリットを感じないので、）
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>{{ TITLE }}</title>
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" />
<link rel="alternate" type="application/rss+xml" href="{{ RSS_URL }}" title="{{ FEED_TITLE }}" />
<link rel="alternate" type="application/atom+xml" href="{{ ATOM_FEED_URL }}" title="{{ FEED_TITLE }}" />
<link rel="stylesheet" href="{{ STYLESHEET_URL }}" />
<style>
{{ STYLE }}
</style>
<!--[if lt IE 9.0]>
<style>
{{ STYLE for IE8- }}
</style>
<![endif]-->
<script>
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-{{ GOOGLE_ANALYTICS_ID }}']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</head>
<!-- @see http://developer.yahoo.com/yui/grids/builder/ -->
<body id="doc4">
<div id="hd">
{{ HEADER }}
</div><!-- #hd -->
<div id="bd">
{{ MAIN_CONTENT }}
</div><!-- #bd -->
<div id="ft">
{{ FOOTER }}
</div><!-- #ft -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="{{ JAVASCRIPT_URL }}"></script>
<script>
{{ JAVASCRIPT }}
</script>
</body>
</html>
使うときに不要な要素は減らす。
{{ }}のところは置き換える。
PHPの場合、default_charsetを設定してあれば<meta charset="UTF-8" />は無くても大丈夫。
YUI 2 CSS Toolsはcommon.cssとか作ってその中でimportした方が変更に強い。
Google Analyticsは外部JavaScriptファイルにした方がすっきりするけど、そのためだけにHTTPアクセスを1回増やすのもどうかと思う。
「http://www.google-analytics.com/ga.js#UA-XXXXXXX-X」の形で呼び出せるようにすればいいのに。
（ただし静的なHTMLに埋め込む場合は、変更が発生したときに全部変更するのは大変なので外出ししておいた方がよい。）
jQueryはプラグインをいろいろ使うならマイナーバージョン（1.4とか）まで指定しておいた方が無難。
（2010/11/04 追記）
Google Libraries APIのCDNから読み込むJavaScriptが複数ある場合は、google.load()を使って非同期で読み込んだ方が少し早くなる場合がある。
<!-- 例：jQueryとjQuery UIを非同期で読み込む -->
<script src="//www.google.com/jsapi?key={{ GOOGLE_LOADER_API_KEY }}"></script>
<script>
google.load("jquery", "1");
google.load("jqueryui", "1");
google.setOnLoadCallback(function() {
$(function() {
//初期処理
});
});
</script>
注意点としては、google.load()を使うには先に http://www.google.com/jsapi 読み込む必要がある。これを読み込むコストを考えると、必要なJavaScriptが1つしかないならgoogle.load()を使ってもそれほど効果はないか、逆に遅くなる。
（2011/03/15 追記）
シンプル版も書いておく。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>HTML5 Simple Template</title>
<link rel="stylesheet" href="stylesheet.css" />
<style>
/* STYLE */
</style>
</head>
<body>
CONTENT
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="javascript.js"></script>
<script>
/* JAVASCRIPT */
</script>
</body>
</html>
投稿
0 件のコメント:
コメントを投稿