こんにちは。8月6日、7日の「3Dゲーム制作体験」担当の武田です。
今日は比較的涼しいですが、動くと暑い日です。
今日はGoogleマップで一躍脚光をあびたAjaxというWeb上の技術について、簡単なサンプルを通して実験してみます。
ネットワーク上を流れるデータはユーザが「欲しい！」と思ったときにサッと手に入る場合があります。でも、他の人もネットワークを通じて動画などをみたりSNSを使ったりしている関係上、データの取得が遅れることがあります。
最近のWebアプリは、何らかのデータを取得してから、そのデータを使って何らかの処理を行う、といったことを頻繁にしています。
Googleマップは、ユーザが地図をスクロールすることを想定して次の地図画像を事前に読み込んでいます。一度にすべての地図情報を読み込んでから何かしていたのでは、使う人を待たせることになるからです。
今日お伝えしたいことは、簡単に言うと、
必要最低限のデータの読み込みが終わったら、
次の処理を行う
ということです。
ホームページでリンクをクリックしたとき、少し待たされることがあります。
これは通信を行っているからです。お昼どきなどは、多くの人が使う（というかお昼休みに職場のPCでネットを閲覧しているだけ）ので、かなり待たされることがあります。
JavaScriptを使ってリンクをクリックする前に次のページも読み込むことをしてみました。
「Start!」というボタンを押すとサッと次のページが表示されます。
これは最初にアクセスしたときに次のページデータを読み込んでいるからです。
最初にアクセスするindex.htmlというページは、こんな感じです。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,userscalable=no"> <link rel="stylesheet" href="style.css"> <script src="main.js" type="text/javascript"></script> <title>JavaScriptで画面遷移</title> </head> <body> <header> <h1>JavaScriptで画面遷移</h1> </header> <div id="contents"></div> <footer> <p>© 2017 HIE</p> </footer> </body> </html>
17行目のdivタグの部分は、データを埋め込むためにcontentsというidをつけてあります。
この部分がボタンを押したときに書き換わるようにしてあります。
こうすることで、あたかも同じ画面が書き換わったような印象をうけるため、アプリっぽく見えますし、aタグによるリンクのようにその都度、待たされることもありません。
実際にデータを読み込む部分のプログラムはこうなっています。
/*
* 起動時の処理
*/
window.onload = function(){
// コンテンツ枠取得
contents = document.getElementById("contents");
// ホームページデータの取得
var homePage = new XMLHttpRequest();
homePage.open("GET", "home.page", true);
homePage.onload = function(){
homePageTag = this.responseText;
console.log(homePageTag);
console.log("トップページデータ取得OK");
loadHomePage(); // 起動時のページを設定
}
homePage.send(null); // リクエスト送信
// ゲームページデータの取得
var gamePage = new XMLHttpRequest();
gamePage.open("GET", "game.page", true);
gamePage.onload = function(){
gamePageTag = this.responseText;
console.log(gamePageTag);
console.log("ゲームページデータ取得OK");
}
gamePage.send(null); // リクエスト送信
}
XMLHttpRequestというWeb上からデータを取得できる命令を使います。
home.pageというテキストファイルをWeb上からGET（ダウンロード）してきます。
この命令のいいところは、データを全て取得した後に何かの処理を行うことができる点です。
本来は、XMLという形式のデータを読み込むための命令ですが、普通のテキストファイルも読み込むことができます。
今回は、この命令を利用してhome.pageというファイルとgame.pageというファイルをindex.htmlがアクセスされたときに読み込みます。
取得するhome.pageというファイルの中身はこんな感じです。
<!-- ホームページ --> <div id="home-page"> <p class="center"><img src="title.png" width="128" height="128" alt="タイトル画像"/></p> <button id="btnGame" type="button">Start!</button> </div>
ただのHTMLファイルの一部です。
これをGETして、変数homePageTagに入れておきます。
同じようにして、画面遷移する側のgame.pageファイルの中身も変数gamePageTagに入れておきます。
最後にJavaScript側から、index.htmlのcontentsというidをつけた部分にhomePageTagの中身を挿入してトップページが表示されます。
このトップページ上のボタンを押したとき、game.pageTagの中身に書き換わるとあたかも一つのページ内で書き換わったかのように見えるのです。
これを利用すれば何画面もあるようなアプリも理論上は作成可能です。
Googleマップは、これのもっと凄いバージョンだといえます。
ではまた。