はじめに
JavaScriptやJava言語で製作されたアプレットによる、ブラウザ上で動作するゲームを、90年代後半からインターネット上で数多く見かけるようになりました。これらのゲームは、特別なアプリケーションをインストールすることなく、Microsoft Internet ExplorerやNetscape Navigatorなどのブラウザ上で実行することができ、クロスプラットフォームで動作するため、一時期ホビーストたちの間で脚光を浴びました。また、Internet Explorer 4.0以降はDynamic HTML（以降「DHTML」と表記）が登場し、スクリプトからHTMLドキュメントを動的に変更することもできるようになりました。
しかし、ブラウザ上で動作するスクリプトプログラムには、さまざまな制限があります。実際に、インターネット上で見ることができる多くのゲームは、単純なミニゲームと言えるものばかりだったはずです。ブラウザ上で動作するプログラムは自由にクライアントのディスクファイルにアクセスすることができないため、ユーザー固有のデータを保存したり読み込むことが難しく、RPGのように時間をかけてプレイするゲームには向いていません。また、HTMLは静的なドキュメントなので、ゲームのようにリアルタイムでグラフィックスを更新しなければならないプログラムとは相性が悪いのです。DHTMLを使って動的にコンテンツを変更させるには、オブジェクト指向やHTML、CSSなど、多くの知識が必要になることも問題です。
徐々にこうした問題点が浮き彫りとなり、2000年以降は、ネット上で動作するプログラムといえば電子商取引などに使われるWebプログラムが主流となりました。一方で、ブラウザ上で動作するマルチメディアアプリケーションはFlashが中心となっています。ところが、近年再びJavaScriptを使った視覚的なWebアプリケーションが注目されています。Ajaxの誕生です。Ajax自体は、既存の技術を組み合わせてそれに名前をつけたものに過ぎませんが、ページセッションを発生させずに外部のサーバーからデータを取得できるため、様々な使い方ができそうです。また、電子商取引に使われるWebアプリケーションのために、リッチクライアントがさまざまな形で研究され、その一つの方法としてJavaScriptを使ったリッチクライアントが提唱されているのも要因の一つでしょう。
そこで、本稿では今一度、JavaScript＋DHTMLによるブラウザ上のゲーム開発の可能性を検証したいと思います。特に、DHTMLの機能を網羅していけば、JavaScriptでも高級なゲームを作ることができるはずです。「動くページ」では終わらない、新しいJavaScriptの時代はもうすぐです。
なお、本稿ではJavaScriptの言語仕様の知識を前提とし、Microsoft Internet Explorer 6で動作確認をしています。他のブラウザ、他のバージョンでは正しく動作しない可能性があるのでご了承ください。
HTMLオブジェクト
HTMLドキュメントは、JavaScriptからオブジェクトとしてアクセスすることができます。全てのドキュメントはブラウザのウィンドウとして開かれることから、スクリプトはwindowsオブジェクトをデフォルトで保有しています。HTMLドキュメント上のJavaScriptは、thisステートメントから現在のオブジェクトとしてwindowにアクセスすることができます。
HTMLドキュメントはwindowオブジェクトのdocumentプロパティから取得することができます。documentオブジェクトは、ページ上のHTMLドキュメント全体を表し、ここからHTMLドキュメントのタグを取得することができます。JavaScriptからHTMLドキュメントを制御するときに重要なのは、全てのHTML要素がオブジェクトとして管理されていることです。documentオブジェクトは、HTML要素や HEAD、BODY要素を含む、HTMLドキュメントの全ての要素のコンテナとなります。
documentオブジェクトは、ドキュメント上の全て要素を管理するallコレクションを提供しています。このallコレクションはHTMLドキュメント上の全ての要素を整数のインデックスで管理しています。
document.all([index])
indexに、取得するHTML要素オブジェクトのインデックスを指定します。allコレクションは、指定したインデックスに対応するHTML要素オブジェクトを返します。HTML要素オブジェクトは、有効なタグが終了タグと対になっていれば、開始タグと終了タグを合わせて一つの要素オブジェクトとして扱われます。
indexの有効範囲はallコレクションのlengthプロパティから取得することができます。lengthプロパティは、コレクションが管理しているHTML要素オブジェクトの数を返します。for文などでallコレクションから全てのタグを処理する場合などに使います。
要素オブジェクトの性質は、そのHTML要素によって異なりますが、大部分は共通した操作で制御することができます。全てのHTML要素オブジェクトは、必ず要素のタグ名を表すtagNameプロパティや、スクリプトなどからオブジェクトを識別するためのidプロパティなどを保有しています。次のようなHTML文書を作成してブラウザで実行してみてください。
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <title>サンプル 00</title> </head> <body> <h1>サンプルプログラム</h1> <a href="http://wisdom.sakura.ne.jp/">テストのためのリンク</a> <p>以下のテキストが動的に取得した HTML ドキュメントの構造です</p> <b> <script language="javascript"> var max = document.all.length; for(i = 0 ; i < max ; i++) { var element = document.all(i); document.write("<p>" + element.tagName + "</p>"); } </script> </b> </body> </html>
このプログラムは、documentオブジェクトのallコレクションから、現在のHTMLドキュメントのタグを全て取得し、取得した要素オブジェクトのtagNameプロパティの値を現在のHTMLドキュメントに表示します。HTMLドキュメントの全ての要素を取得するには、allコレクションが保有している要素の数をlengthプロパティから取得し、この値を最大値としたfor文の繰り返しで、インデックス0番から最後までの要素オブジェクトを動的に取得しています。
このように、実行時にHTMLドキュメントを解析して処理するプログラムは、ライブラリやフレームワークのような再利用可能なプログラムの開発には必須となります。小さなゲームであれば、スクリプトを書いたそのHTMLドキュメントの中で安全に動けばそれで良いかもしれませんが、より本格的なゲームは、再利用可能な部品を多く作る必要があります。
ちなみに、スクリプトから現在のHTMLドキュメントにHTMLを書き込むにはdocumentオブジェクトのwrite()メソッドを使います。
document.write(string)
stringには、HTMLドキュメントに書き込む任意のテキストを指定します。通常は、有効なHTMLタグを指定します。
