2-1. HTMLファイルの書き方

HTML5ゲームのページでは今までと少し違う記述が必要になる

samplejpg

HTMLファイルの先頭にはドキュメント宣言が必要ですが、HTML5ではこの宣言内容が変わりました。 また、HTML5で新たに追加された機能を利用するためには、そのための記述も必要になります。

本節では、まず、単純なHTML5ページのサンプルを示し、次にゲーム用ページのサンプルを示します。 最後に、ゲーム用ページのサンプルの記述内容について説明します。

単純なHTML5ページのサンプル

<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=9">
<meta charset="UTF-8">
<title>ページのタイトル</title>
</head>
<body>
ページの内容
</body>
</html>

【注目点】
  • HTML5のドキュメント宣言は「!DOCTYPE html」
  • Internet Explorer9の表示モード設定用にmetaタグが入っている
  • 文字コードにUTF-8を使用する旨のmetaタグが入っている

ゲーム用HTML5ページのサンプル

<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=9">
<meta charset="UTF-8">
<title>ページのタイトル</title>
<style type="text/css">
#id_canvas1 {
 position:absolute;
 top: 0px;
 left: 0px;
 z-index: 1;
}
#id_canvas2 {
 position:absolute;
 top: 0px;
 left: 0px;
 z-index: 2;
}
</style>
<script type="text/javascript">
///////////////////////
// ゲームのプログラム
///////////////////////
</script>
</head>
<body>
<audio id="id0"><source src="a.m4a"><source src="a.ogg"></audio>
<canvas id="id_canvas1" width="320" height="240"></canvas>
<canvas id="id_canvas2" width="320" height="240"></canvas>
</body>
</html>

【注目点】
  • ゲームで再生する音声ファイルをaudioタグで指定している
  • ゲームで画像を表示する領域をcanvasタグで設定している
  • スタイル指定で二つのcanvas領域を同じ位置に表示させるようにしている

ゲーム用HTML5ページに必要となる記述

ゲーム用のWebページでは、通常は画像表示のためにcanvasタグを使って表示領域を設定しておく必要があります。 また、音声再生を行う場合には、audioタグを使って再生する音声ファイルを指定しておく必要があります。

画像表示にレイヤー的なテクニックを使いたい場合には、複数のcanvasタグを使って表示領域を複数設置しておきます。 この場合には、スタイル指定で全ての表示領域を同じ位置に設定しておく必要があります。

ブラウザが再生できる音声ファイルのフォーマットにはwav/mp3/m4a/ogg等があります。 しかし、主要ブラウザの全てがサポートするフォーマットは2011年1月現在には存在しません。 このため、音声再生を主要ブラウザの全てに対応させたい場合には、audioタグには複数フォーマットで音声ファイルを登録しておく必要があります。

canvas/audioタグにはid属性を設定しておきます。これらのidは、ゲームプログラム内で、これらの要素を検出して使用するために必要になります。

なお、HTML5ではUTF-8が推奨されていますので、htmlファイルをメモ帳等のテキストエディタで作成する場合には、保存時に、文字コードは「UTF-8」にしておきます。