jsWaffleでAndroidアプリを作ろう！クイズアプリ編⑭

サクウェブＴＶはコチラ↓↓↓

ではまず、クイズデータを記録したＸＭＬを作りましょう。

wwwフォルダ内にxmlフォルダを作り、その中にdata.xmlを作成してください。

data.xmlには以下を記述します。

<?xml version="1.0" encoding="utf-8"?>
<data>
    <quiz>
        <question>日本一高い山は？</question>
        <selection>
            <option>父山</option>
            <option>富士山</option>
            <option>高山</option>
            <option>下山</option>
        </selection>
        <answer>富士山</answer>
    </quiz>
    <quiz>
        <question>世界一小さい国は？</question>
        <selection>
            <option>日本</option>
            <option>アメリカ</option>
            <option>ロシア</option>
            <option>バチカン市国</option>
        </selection>
        <answer>バチカン市国</answer>
    </quiz>
    <quiz>
        <question>日本の初代総理大臣は？</question>
        <selection>
            <option>森鴎外</option>
            <option>伊藤博文</option>
            <option>日下部陽一</option>
            <option>坂本竜馬</option>
            <option>斉藤一</option>
        </selection>
        <answer>伊藤博文</answer>
    </quiz>
    <quiz>
        <question>パンはパンでも食べられないパンは？</question>
        <selection>
            <option>ジャムパン</option>
            <option>クロワッサン</option>
            <option>あんパン</option>
            <option>フライパン</option>
            <option>フランスパン</option>
        </selection>
        <answer>フライパン</answer>
    </quiz>
    <quiz>
        <question>ＰＣは何の略？</question>
        <selection>
            <option>パンナコッタ</option>
            <option>プリンケーキ</option>
            <option>パンダのコップ</option>
            <option>プジョーのカー</option>
            <option>パーソナルコンピュータ</option>
        </selection>
        <answer>パーソナルコンピュータ</answer>
    </quiz>
</data> 

dataタグの中にquizタグを作り、quizタグ一つを１問とします。

quizタグの中にはそれぞれ

question：クイズ問題文

selection：選択肢

answer：解答

のタグを入れています。

selectionタグの中には具体的な選択肢としてoptionタグを用意しています。

これで、階層構造は以前script.jsで定義した配列と同じになりました。

では、これをjqueryから読み込むAjaxを実行するためのfunctionを定義しましょう。

script.jsの$(function(){  });の中に以下を記述して下さい。

	function xmlLoad(path){
		$.ajax({
		    url: path,
		    async: true,
		    cache: false,
		    dataType:"xml",
		    error: function(){
		        alert('Error loading XML document');
		    },
		    success: operate
		});
	}

今回ＸＭＬを読み込むために$.ajax()を使用しています。

設定しているオプションはurlにfunctionの引数pathを指定し、functionからAjaxを実行できるようにしています。

今回、dataTypeにxmlを指定し、ＸＭＬファイルを読み込むようにしています。

ここで重要なのがsuccessです。これは読み込みが成功したら実行する処理を記述する部分です。通常、

success:function(){  }

のような形で匿名関数（無名関数）を指定して処理を記述することが多いかと思いますが今回は

operate

というfunctionを指定しています。

このように、successには外部に定義したfunctionを実行させることも可能です。

operateの定義については次回に説明します。

＞＞jsWaffleでAndroidアプリを作ろう！クイズアプリ編⑮＜＜