- 索引
-
- └ サンプル目次
- 1章：短編集
- 2章：診断系コンテンツ
- 3章：製品抽出系コンテンツ
-
- ├ 構成の確認
- ├ 回答の確認
- ├ 点数表の作成
- ├ 得点の集計(1)
- ├ 得点の集計(2)
- ├ 結果画面の作成(1)
- └ 結果画面の作成(2)
- 番外：Simulation Game
-
- ├ 地形データの読込
- ├ ユニットの移動
- ├ 敵ユニットの扱い
- ├ 敵AI:目的地に移動出
- └ 一応の終わり
外部テキストの読込
概要
ajsx通信を利用して結果画面の文章を外部から読み込む
jQueryを利用すると簡単に外部テキストを読み込むことができます。今回はエクセルから書き出したcsvデータ（カンマ区切りのテキストデータ）を読み込んで、結果画面に表示する文章を設定します。
jQueryは基本的にjis(shift-jis)に対応していないため、jQueryで読み込むテキストデータ等の文字コードはunicode（UTF-8など）にしてください。また今回利用するcsvデータの改行コードはwindowsのものになっています（Macの方はテキストエディタ等で改行コードを変更して下さい）。
解説
csvデータの確認
jQueryを確認する前に読み込むcsvデータを確認してください（環境によってはエクセルが開きます）。ブラウザで表示されても文字化けしている場合はブラウザの文字コードをUTF-8に変更して下さい。
内容は以下の様に合計得点のレベルに合わせて5行あります。「0行目にレベル0の説明文、1行目にレベル1の説明文」といったようにレベルと行数が合うようにしてあります（配列に格納するので番号は0から始めています）。
ニート級サラリーマン, ニート級サラリーマンの説明文…… モラトリアム級サラリーマン, モラトリアム級サラリーマンの説明文…… ノーマル級サラリーマン, ノーマル級サラリーマンの説明文…… エリート級サラリーマン, エリート級サラリーマンの説明文…… 実業家級サラリーマン, 実業家級サラリーマンの説明文……
また各行は「,」カンマで区切られています。csvデータは横のセルをカンマで区切るので、エクセルで開くと各行に2つの列があることが確認できます。最初の列はレベルの名称で、次の列は表示する説明文となっています。つまりcsvデータは以下の様な構成になっています。
レベル「0」の名称, レベル「0」の説明文 レベル「1」の名称, レベル「1」の説明文 レベル「2」の名称, レベル「2」の説明文 レベル「3」の名称, レベル「3」の説明文 レベル「4」の名称, レベル「4」の説明文
改行コードによってレベル毎の文章を分けるので、改行コードを覚えておきましょう。今回利用するcsvデータはwindowsの改行コードで作成されています。
jQueryでcsvデータを読み込む
jQueryでは非常に簡単に外部データを読み込むことができます。サンプル（ajax/01.html）のソースを開き（すぐにアラートが表示されますが、とりあえずアラートは閉じて下さい）、
readyイベント内に以下の処理が追加されていることを確認して下さい。
getメソッドは第1引数で指定されたデータの読込が完了すると、第2引数に設定されたfunctionを実行します。
//テキストデータの読込
$.get("result.csv", function(myData){
resultArray = myData.split("\r\n");
alert(resultArray[0])
});
このサンプルではfunctionを直接設定し、そこで読み込んだcsvデータをwindowsの改行コード「\r\n」で分割し配列「resultArray」に格納しています。そして配列を確認するために、最後にアラートでresultArrayの0番目の要素を表示するようにしました。
サンプルをリロードして、表示されるアラートを確認して下さい。レベル0で利用するニート級サラリーマンの文章が表示されます。前項で説明した通りresultArrayには0番目の要素にはレベル0の文章が格納されていることを確認できます。
結果画面でテキストを表示する
読み込んだ文章データ「resultArray」は結果画面で利用します。サンプル（ajax/02.html）のソースを開き、resultFuncの最後に以下の処理が追加されていることを確認して下さい。
//---読み込んだテキストの利用
var myData = resultArray[lv];
$("#resultTitle").text(myData.split(",")[0]);
$("#resultText").text(myData.split(",")[1]);
まず2行目で読み込んだデータ「resultArray」からレベル「lv」に合わせた「行」を取得して変数「myData」に保存します。myDataは前のセル（カンマの前の内容）がレベルの名称で、後のセル（カンマの後の内容）が説明文です。ですのでsplitを利用して、3行目でレベルの名称を取得してid属性がresultTitleの要素にレベルの名称を設定し、4行目ではid属性resultTextの要素に説明文を設定しています。
結果として、合計得点に応じたレベルの名前と説明文が表示されるようになります。次回は「もう一度ボタン」を作成して、診断系コンテンツを完成させます。
次のページ： もう一度ボタン