ただし、「○○以下に掲載がない場合」という表示は気にしなくともよい。
郵便番号から住所の取得
以下に実際の例を示す。
第１３回で行なった外部記憶は、Webブラウザ側（クライアント側）で記憶を保持したり、ファイルを開いたり するものでした。 ここでは、画像ファイルや音声ファイルと同様にサーバ側に置かれているファイルを読み込んでJavaScriptで 活用する方法を説明します。 サーバに関してのセキュリティ的な制約から、サーバ側に置かれているファイルに書き込むことはできませんが、 データをテキストファイルとして置いておいて、JavaScriptで読む込んで、表示するなどいろいろな処理を行なう ことは可能になっています。ここでは、CSVのような単なるテキストファイルではなくて、構造化された テキストファイルを読み込むことによって、その構造もJavaScriptのオブジェクトとして反映されるような形の 読込みについて扱います。構造化されたテキストファイルとしては、XMLとJSONの２つのファイルがあります。 もちろん、両者とも、ファイルとしては通常のテキストファイルになっています。
テキストファイルは、以下のようにして読み込みます。
- XMLHttpRequestというクラスのオブジェクトを作る
- openでURLを指定して、URLの位置にあるテキストを開く
- なぜか、send( null )を行なう
- もし、statusが200だったら、テキストが返ってきているので、responseText属性から読み込む
プログラムに直してみると次のようになります。 なお、inputタグではなくて、buttonタグを用いています。
<script type="text/javascript">
<!--
function getText() {
var request = new XMLHttpRequest( );
request.open("GET", "http://web.sfc.keio.ac.jp/~minohara/lecture/logical2013/lecturenotes/sample.text", false);
request.send(null);
if (request.status == 200) {
var rtag = document.getElementById( "result" );
rtag.innerHTML = request.responseText;
}
}
//-->
</script>
<button onclick="getText()">Get Text</button>
<div id="result"></div>
ただし、改行などの処理を上記のスクリプトではしていません。 テキストファイルの改行コードは、それぞれのシステムで異なります。 以下を目安にして下さい。
一般的なUnixシステムのファイルとして、文字列のsplit関数を使って、各行に切り出して、 <br>タグを挟んで表示させる場合には以下のようになります。
<script type="text/javascript">
<!--
function getLines() {
var request = new XMLHttpRequest( );
request.open("GET", "http://web.sfc.keio.ac.jp/~minohara/lecture/logical2013/lecturenotes/sample.text", false);
request.send(null);
if (request.status == 200) {
var rtag = document.getElementById( "result" );
var lines = request.responseText.split( "\n" ); // 改行コードで分ける
for ( var i = 0; i < lines.length; i++ ) {
rtag.innerHTML += lines[ i ] + "<br>";
}
}
}
//-->
</script>
<button onclick="getLines()">テキスト表示</button>
<div id="result"></div>
XMLとはExtensible Markup Languageのことで、HTMLのようなMarkup Languageの1つです。 HTML同様に、World Wide Web Consortium (W3C) により策定されています。 XMLは、その名前のとおり、ユーザがタグ群を定義することによって要素を拡張することができ、このため、メタ言語と呼ばれることもあります。 基本的には「<タグ名>」で要素の始まりを示し、「</タグ名>」で要素の終わりを示す構造をしています。 現在では、XHTMLやKML等、多くのフォーマットがXMLベースで開発されています。
<?xml version="1.0" encoding="UTF-8"?> <person> <name> <familyName>慶應</familyName> <firstName>太郎</firstName> </name> <age>19</age> <sex>male</sex> </person>
これをJavaScriptでXMLで記述されたデータを取得してこなければ話になりません。 ここでは、JavaScriptで、ネットワーク越しにデータを取得する方法を説明します。
次のプログラムを見てください。このプログラムはボタンを押すと、「http://web.sfc.keio.ac.jp/~minohara/lecture/logical2012/lecturenotes/person.xml」からXMLファイルをダウンロードし、その内容をアラートとして表示します。
<script type="text/javascript">
<!--
function getXML() {
var request = new XMLHttpRequest();
request.open("GET", "http://web.sfc.keio.ac.jp/~minohara/lecture/logical2012/lecturenotes/person.xml", false);
request.send(null);
if (request.status == 200) {
alert(request.responseText);
}
}
//-->
</script>
<button onclick="getXML()">Get XML</button>
ここで、「XMLHttpRequest()」というオブジェクトがでてきています。「XMLHttpRequest()」はHTTPを使って他のページを取得するためのインターフェイスを実装したものです。new演算子によってオブジェクトを生成し、そのオブジェクトのopen()メソッドを使ってアクセスするURLやメソッドを指定します。実際にリクエストを送るためにはsend()メソッドを使用します。send()メソッドによってHTTPの要求がなされると、その結果がstatusプロパティに、レスポンスがresponseTextプロパティに設定されます。statusプロパティに設定されるのはHTTPのステータスコードで200が成功です。このメソッドは現在では多くの多くのブラウザで実装されていますが、Internet Exploer (IE) 7より前のIEなど、古いブラウザではサポートされていないので注意が必要です。
この取得したXMLをプログラムを使って処理してみましょう。下記のプログラムでは、XMLHttpRequest()を使ってXML文書を取得した後、DOMParser()を使ってXMLを解析しています。DOMParser()を使うと様々なXMLの操作が可能なのですが、かなり複雑で、これを扱うだけで相当な説明が必要になってしまいます。そのため、ここでは割愛します。詳しくはJavaScriptの文献等を当たってみてください。
<script type="text/javascript">
<!--
function getXML() {
var request = new XMLHttpRequest();
request.open("GET", "http://ipl.sfc.keio.ac.jp/text/pro-2011-9/lib/person.xml", false);
request.send(null);
if (request.status == 200) {
var parser = new DOMParser();
var dom = parser.parseFromString(request.responseText, "text/xml");
var firstName = dom.getElementsByTagName("firstName");
window.alert(firstName[0].textContent);
}
}
//-->
</script>
<button onclick="getXML()">Get XML</button>
XMLは柔軟にできており、多くのデータがこの形式で規定されるようになりました。しかし一方で、ファイルサイズが大きくなる、可読性が悪いなどの批判も多くあります。そこで、JavaScriptと親和性のよいJSON (JavaScript Object Notation)というデータ記述方法が登場しました。
JSONは、JavaScriptにおけるオブジェクトリテラルをベースとしたデータ記述方法でRFC4627で規定されています。基本的には、JavaScriptのオブジェクトリテラルを踏襲していますが、数値は10進法表記でなければならない等の制限があります。また、オブジェクトのキーも文字列で「”」で囲まなければならないことになっています。以下にJSONで表現されたデータの例を示します。この例では見やすいように改行を入れてありますが、改行は必ずしも必要ではありません。
{
"name": {
"familyName": "慶應",
"firstName": "太郎"
},
"age": 19,
"sex": "male"
}
JavaScriptにおいては、XMLを扱うよりJSONの方が扱いが簡単です。ここでは、JSONの扱い方について説明します。
下記のプログラムを見てください。7行目のif文まではURLが「person.xml」から「person.json」になっている以外は、XMLの時の例と同じです。8行目のeval()メソッドは初出です。eval()メソッドは、引数で指定された文字列をJavaScriptのプログラムの一部として評価します。この例では、取得してきたJSONをそのままJavaScriptのオブジェクトリテラルとして評価し、personという変数に代入しています。このような手法は、JSONがJavaScriptのオブジェクトリテラルと同じ書式であるため可能な方法です。
<script type="text/javascript">
<!--
function getJSON() {
var request = new XMLHttpRequest();
request.open("GET", "http://web.sfc.keio.ac.jp/~minohara/lecture/logical2012/lecturenotes/person.json", false);
request.send(null);
if (request.status == 200) {
eval("var person = " + request.responseText);
window.alert(person.name.firstName);
window.alert(person.name.familyName);
}
}
//-->
</script>
<button onclick="getJSON()">Get JSON</button>
以下の記述はJSONなんて怖くないを参考にしています。
JSONはオブジェクトと配列の組み合わせで構造化されたデータを表現します。 オブジェクトは{}で全体を囲み、キーと値のペアをコロン（:）で区切って記述します。カンマ（,）で複数のキーと値を記述することも可能です。キーには文字列のみ使用可能です。
{ name: "慶應太郎", age: 22 }
配列は繰り返し項目を表現する際に使用します。全体を[]で囲み、値をカンマ（,）で区切って列挙します。
[ "慶應太郎", "藤沢花子", "日吉祐介" ]
構造化されたデータを表現するために、オブジェクトと配列を自由にネストさせることができます。 以下にオブジェクトと配列をネストさせた場合の記述例をします。
[ { name: "慶應太郎", age: 22}, { name: "藤沢花子", age:19}, { name: "日吉祐介", age: 21} ]
{ students: [ "慶應太郎", "藤沢花子", "日吉祐介" ], classname: "論理思考" }
JSONで利用可能なデータ型については、 「数値」「文字列」「真偽値（true、false）」「配列」「オブジェクト」「null」のデータ型を利用することができます。 オブジェクトと配列の記述方法についてはすでに説明しました。ここでは数値と文字列について補足しておきましょう。 数値型は10進数で表記します。多くのプログラミング言語と同様整数および小数部、指数部の記述が可能です。 また、文字列はダブルクオートで囲み、改行やタブ文字、ダブルクオートなどの特殊文字はバックスラッシュ（\）でエスケープします。
ドットばかり使って、あまり記法的にはお薦めではないのですが、ゲームなどを簡単に 作りたい人向けに、enchant.jsというライブラリがあります。以下のページから、独習していって みてください。
enchant.jsへのリンク
郵便番号から住所の取得