とりあえず始めてみよう。 - Ajaxでエロゲーを作るブログ

　なにはともあれ、Ajaxを始めてみましょう。
　とりあえず以下のサイトを参考に作ってみます。

　Ajaxは"Asynchronous JavaScript + XML"（非同期で JavaSrcipt と XML *1）の略で、 JavaScript から利用できる XMLHttpRequest クラス（って言っちゃいけないのか？）を使うとデータを取ってきて画面に出力できたりするシステムなんですなー。
　一昔前だと、こういうのはインラインフレーム使わなきゃ無理って話だったのに、いつのまにこんなもんが……。
　まぁこの機能を使えば、任意のファイルを動的に取ってきて、一部のテキストやイメージだけを差し替えることができるみたいで、これでエロゲーを作ってしまおうという。
　ちなみに「エロゲー」というのはこんな感じの、ウィンドウ型テキストノベルを想定してます。

　別に「Ajaxでギャルゲーを作るブログ」や「Ajaxでテキストノベルを作るブログ」でも良かったんだけど、「エロゲー」が一番分かりやすいかなと思って。っつーてもエロは少なめだけど。はてなは原則どエロ禁止だし。

　さて、とりあえずサンプルを作ってみました。

とりあえず始めてみましょう

　環境は以下のような感じ。

エディタ：秀丸エディタ
ブラウザ：IE6.0

　今回のテストではサーバーサイドの機能は使いませんでした。全部静的なファイルです。その方が楽だと思って。
　エロゲー作る時も多分そうすると思う。ちょっと管理大変かもしれないけど……。

　では、このサンプルの解説。

・index.html

<html>
<script language="JavaScript" src="test.js"></script>
<head><title>Ajaxでエロゲーを作るブログ - とりあえず始めてみましょう</title></head>
<body>
<form>
<input type="button" value="クリックしてね" 
	onClick="getData('text.html', 'maintext'); return false;">
</form>
<div id="maintext">ここが置き換わります。</div>
</body>
</html>

　JavaScriptのファイルは<script>タグで指定しています。ボタンがクリックされたら、その中にあるgetData()メソッドを呼び出します。その際、置き換えるテキストファイル「text.html」と、置き換え先のオブジェクトID「maintext」を渡します。

test.js

/**
    XMLHttpRequestのインスタンスを作って返します。
*/
function createXMLHttpRequest()
{
    if( window.XMLHttpRequest )
    {
        // IE以外の場合
        return new XMLHttpRequest();
        // alert( "window.XMLHttpRequest" );
    }
    else if( window.ActiveXObject )
    {
        // IE用
        try
        {
            return new ActiveXObject( "Msxml2.XMLHTTP" );
            // alert( "Msxml2.XMLHTTP" );
        }
        catch(e)
        {
            return new ActiveXObject( "Microsoft.XMLHTTP" );
            // alert( "Microsoft.XMLHTTP" );
        }
    }

    return null;
}

/**
    指定したURLからテキストを取ってきて置き換えます。
    @param serverURL HTMLを取ってくるURL
    @param objID 置き換え先のID。
*/
function getData( serverURL, objID )
{
    // XMLHttpRequestを取得します。
    var ajax = createXMLHttpRequest();

    // URL を指定して、そこから情報を取ってきます。
    ajax.open( "GET", serverURL );

    // 状態が変化したら呼ばれるイベントハンドラをセットします。
    ajax.onreadystatechange 
        = function()
        {
            if    (
                ( ajax.readyState == 4 ) && 
                ( ajax.status == 200 )
                )
            {
                // ちゃんと読み込めてたら置き換え。
                
                // 置き換え先の取得。
                var obj = document.getElementById( objID );
                // テキストを置き換えます。
                obj.innerHTML = ajax.responseText;
            }
        }

    ajax.send( '' );
}

　createXMLHttpRequest()でXMLHttpRequestを取得。
　XMLHttpRequest#open()で、指定したURLから情報を取得。
　XMLHttpRequest#onreadystatechangeにイベントハンドラをセット。JavaScriptって、無名クラスっぽい感じにメソッドをその場で作れるのか、なんか不思議だ……。
　成功したら、取得した情報がXMLHttpRequest#responseTextに入っているから、これをgetData()の第2引数に渡されたオブジェクトにセット、という感じかな。

　んで、その置き換えるデータ。

text.html

クリックされました！

　これだけ。テキストファイルでも良かったんだけど、なんとなく。
　ただ、日本語を使うために、これだけはUTF-8で保存する必要があります。秀丸エディタを使っているので、そのままUTF-8形式で保存しました。それが一番楽かと。

　以上3ファイルを、FTP等でホームページに置いてください。index.htmlにアクセスして、「クリックしてね」ボタンを押すと、下の「ここが置き換わります」が置き換わると思います。
　ローカルに置いたファイルに対してC:\index.htmlみたいな感じでアクセスしても動きませんでした。セキュリティ的な問題かな？　うちは自宅サーバーで、ファイルの置き場所は共有化してあるんで置いてあるのをそのまま修正しちゃってるけど……。
　それと、キャッシュの問題か、text.htmlの中身を修正しても反映されませんでした。これはなんでだろう。ちょっと修正が面倒かも……。

　……これだけ見ると、単に非同期でデータを取ってくる、ってところはそんな難しくなさそうな気が。
　当面の課題としては、以下のようなところかな。

イメージの置き換えはどうするのか。
XMLで「置き換えるテキスト」「置き換えるイメージ」「次のテキストが入っているファイル」とかを格納してパーシングする必要あり。

　なんか、思ったよりもAjax単体では簡単そうな気が。
　むしろ、XMLのパーシングや、CSSの知識が必要になってきそう。その辺をこつこつ調べていきましょう。

*1:なんじゃそりゃ。