Ta-kaku.jp Tools
Update 2010/02/06
技術メモ内容
トップページ
ハードやソフトの技術メモです。 ほとんど、個人の備忘録のレベルですので高度なことは書かれていません。 皆様に少しでもお役に立てれば幸いです。
MENU
6.XML
サイト更新情報
2008/10/18
「Ta-kaku Tools 住所検索・郵便番号検索・事業所名検索・駅検索・電話局番検索」を Ver2.202 にリビジョンアップしました。
更新内容は以下の通りです。
・「xxx1丁目」の様に「全角の数字」と「丁目」が続いている文字列が入力されると検索できない事がある不具合を改修しました。
2008/10/01
Ta-kaku Tools Whois検索 Ver1.000をリリースしました。
2008/09/30
「Ta-kaku Tools 住所検索・郵便番号検索・駅検索・電話番号(局番)検索 」を Ver2.201 にリビジョンアップしました。
更新内容は以下の通りです。
・電話番号(局番)検索機能を正式版にしました。 ・無効な数値に対して住所の検索を行っていた処理を改善しました。 ・局番0120指定でGoogleMapがおかしな場所を示していた不具合を修正しました。 ・「東京駅駅」のように入力されると、関係の無いデータが出力される不具合を修正しました。
過去の情報
関連キーワード
技術メモ インデックス
カテゴリーを選択してください。
インストール
プログラミング言語
マークアップ言語
データベース言語
スクリプト言語
MS-Office
その他
Webアプリケーション
の開発方法
6.XML 技術メモ
追加日時の新しい方から掲載しています。
第6章 XMLについて
登録日:2006/10/16   分類:Webシステム
目的
    現在(2006年10月)主流となっているWebページ用のマークアップ言語は、
    HTML4.01ですが、時代は、次のマークアップ言語XMLに移行しています。
    ここでは、XMLをデータ通信の手段として使用する方法に焦点を絞って、
    その実現方法をご紹介したいと思います。

目次
    1.XMLとは
    2.XMLの基本的な記述方法
    3.XMLの実用的な例
    4.XMLデータ取り出しのイメージ
    5.Ajaxとは

1.XMLとは
    XML(eXtensible Markup Language)は、プログラミング言語ではありません。
    HTMLと同様に、テキストベースのファイルに書かれるマークアップ言語です。

    XMLには、テキストの構造,データの意味などを記述する事ができます。
    プログラム間で、データ構造を取り決めればWebデータの送受信が可能になります。

    XMLはWeb通信の他に、HTMLと同じようなWebページの作成にも使用されます。
    その場合は、厳密に言えばXHTMLを使用する事になります。
    XHTMLは、HTML4.01をXMLパーサで処理する事を目的に考案されたマークアップ
    言語です。

    各マークアップ言語の関係(世代図)は、次のようになっています。

        SGML        ... Standard Generalized Markup Language
         +-HTML     ... HyperText Markup Language
         |  +-XHTML ... eXtensible HyperText Markup Language
         +-XML・・↑  <--- 要素をミックスしたイメージ

    この章では、"XHTML" ではなく、"XML" を用いた通信方法を紹介します。

2.XMLの基本的な記述方法

    XMLの構造は非常にシンプルです。
    以下に、最も簡単な例を紹介します。

    --- sample6_1.xml --->
    <?xml version = "1.0" encoding = "EUC-JP"?>
    <sample>SAMPLE DATA</sample>
    <--- sample6_1.xml ---

    以上です。
    この記述だけで、"SAMPLE DATA" というデータを転送する事ができます。

    <?xml version = "1.0" encoding = "EUC-JP"?> 
    の部分は、XMLテキストである事を宣言する記述です。

    構文

        <?xml version="XML規格のバージョン番号" encoding="文字コード名"?>

    XML宣言以下は、転送したいデータ部になります。

    データ部のタグは、自由に定義することができます。
    この点が、HTMLと大きく異なる点です。
    HTMLの場合、<font> タグは、フォントの指定を行なう場合のみに使用されます。
    しかし、XMLの場合は、タグの意味はマークアップを記述するユーザに
    まかされています。
    極端に言えば、<font> タグを「住所」の意味で使用することもできます。

    XMLのデータ部のタグ指定には、いくつかのルールがあります。

    開始タグと終了タグの記述方法は以下の通りです。

        <任意の文字>この間にデータを記述</任意の文字>

        「任意の文字」で定義されたタグは、必ず開始タグと終了タグで
        ペアになっていなければいけません。

    データ部は、階層構造で記述することができるようになっています。
    以下に簡単な階層構造を示します。
    この例は、sample6_1.xml と同じデータを送信できます。

    --- sample6_2.xml --->
    <?xml version = "1.0" encoding = "EUC-JP"?>
    <data>
        <sample>SAMPLE DATA</sample>
    </data>
    <--- sample6_2.xml ---

3.XMLの実用的な例

    基本的な記述方法を理解したところで、次に実用的な例を示したいと思います。
    以下例は、DBから取得したデータを転送する場合の典型的な記述方法です。

    成功した例

        --- sample6_3.xml --->
        <?xml version = "1.0" encoding = "EUC-JP"?>
        <result>OK</result>
        <count>3</count>
        <data>
            <sample>
                <sample1>AAA1</sample1>
                <sample2>BBB1</sample2>
                <sample3>CCC1</sample3>
            </sample>
            <sample>
                <sample1>AAA2</sample1>
                <sample2>BBB2</sample2>
                <sample3>CCC2</sample3>
            </sample>
            <sample>
                <sample1>AAA3</sample1>
                <sample2>BBB3</sample2>
                <sample3>CCC3</sample3>
            </sample>
        </data>
        <--- sample6_3.xml ---

    失敗した例

        --- sample6_4.xml --->
        <?xml version = "1.0" encoding = "EUC-JP"?>
        <result>NG</result>
        <count>0</count>
        <data>
        </data>
        <--- sample6_4.xml ---

    これらのXMLイメージを、PHPなどで生成します。
    通常、生成したXMLのデータイメージは、通信専用のオブジェクト内に格納されます。

4.XMLデータ取り出しのイメージ

    4-1.ツリー構造モデル

        XMLデータは、ツリー構造で表されます。
        sample6_3.xml をツリー構造にすると、以下のようになります。

        <xml>
          +--[result]
          |    +-- OK
          +--[count]
          |    +-- 3
          +--[data]
               +--[sample]
               |    +--[sample1]
               |    |    +-- AAA1
               |    +--[sample2]
               |    |    +-- BBB1
               |    +--[sample3]
               |    |    +-- CCC1
               +--[sample]
               |    +--[sample1]
               |    |    +-- AAA2
               |    +--[sample2]
               |    |    +-- BBB2
               |    +--[sample3]
               |    |    +-- CCC2
               +--[sample]
                    +--[sample1]
                    |    +-- AAA3
                    +--[sample2]
                    |    +-- BBB3
                    +--[sample3]
                        +-- CCC3

        [sample]を中心にデータを見ると次の様になります。

          :
          +--[data]                     ... 親(parent)
               +--[sample]              ... 自分(self)
               |    +--[sample1]        ... 子(child)
               :
               +--[sample]              ... 兄弟(sibling)
               :

        これらは、「ノード」という言葉で表現されます。
        「自分」であれば、"self node"、「子」であれば "child node" と
        いった具合です。

    4-2.データの閲覧

        上記の例で、"AAA1" を見たい場合は以下のイメージになります。

            <xml>
              +--[result]
              |    +-- OK
              +--[count]
              |    +-- 3
              +--[data]
                   +--[sample]
                   |    +--[sample1]
                   |    |    +-- AAA1   <--- ここを見たい場合

        フォーカスを言葉で表すと、次の様になります。

            xml の data の子供の sample の子供の sample1 の値

        このイメージをJavaScriptで表現すると以下のようになります。
        ("AAA1" を wkBuf に代入する)

            var xmlDoc = xmlHttp.responseXML;
            var wkData 
                = xmlDoc.getElementsByTagName("data").item(0).firstChild;
            var wkSample 
                = wkData.getElementsByTagName("sample").item(0).firstChild;
            var wkSample1 
                = wkSample.getElementsByTagName("sample1").item(0).firstChild;
            wkBuf = wkSample1.data;

        XMLの階層構造を理解しさえすれば、自由に必要なデータを取得する事ができます。

5.Ajaxとは
    Ajaxは、「エージャックス」と呼びます。
    これは、"Asynchronous JAvascript + Xml" の文字を取ったものです。
    意味は、非同期通信を利用した JavaScriptとXMLの通信になります。
    従って、Ajaxとは、特別な言語などではなく、既存の技術を複合して
    データの通信を行なう方法の名称です。

    前述の通り、XMLでデータ通信を行なう場合は、通常オブジェクトを使用します。
    JavaScriptには、HTTPサーバーとデータのやりとりする為のオブジェクトが用意
    されています。
    しかし、このオブジェクトはブラウザによって仕様が異なっています。
    Internet Explorer は、Active X オブジェクト、他のブラウザではXMLHttpRequest
    オブジェクトを使用します。

    JavaScriptでの通信用オブジェクト作成は、以下のようなイメージになります。

        --- sample6_5.js --->
        function getXmlHttpRequest()
        {
            var xmlhttp;

            // ここからは Internet Explorer のみがパースします --->
            /*@cc_on

            // JavaScript Ver5以上の場合
            @if (@_jscript_version >= 5)
            {
                try
                {
                    // Active X MSXML2 でオブジェクトを生成
                    xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
                }
                catch (e)
                {
                    // オブジェクトを生成できなかった場合
                    xmlhttp = false;
                }
            }
            // JavaScript Ver5未満の場合
            @else
            {
                // 未サポート
                xmlhttp = false;
            }
            @end
            @*/
            // <--- ここまで Internet Explorer のみがパースします

            // IEはここを通らないように条件を指定
            if (!xmlhttp && typeof XMLHttpRequest != 'undefined')
            {
                try
                {
                    // 純粋なXMLHttpRequestオブジェクトを生成
                    xmlhttp = new XMLHttpRequest();
                    xmlhttp.overrideMimeType("text/xml");
                }
                catch (e)
                {
                    // オブジェクトを生成できなかった場合
                    xmlhttp = false;
                }
            }
            return xmlhttp;
        }
        <--- sample6_5.js ---

    getXmlHttpRequest()を使用してオブジェクトを生成します。

        --- sample6_6.js --->
        var xmlHttp = getXmlHttpRequest();
        <--- sample6_6.js ---

    以下の手順でリクエストを送信します。

        --- sample6_7.js --->
        // バックグラウンドでDBなどからデータを取得するPHPのURLを指定する
        url = "http://www.sample.com/sample6_9.php"+REQUEST;

        // HTTPリクエストの準備
        // 通信用オブジェクトをオープンする
        // 'GET' ... データを取得, true ... 異常が発生したら中断
        xmlHttp.open('GET', url, true);

        // レスポンス処理関数をメゾッドに指定
        // このメゾッドは、url で指定したプログラムが XMLを書き出した時点で、
        // 指定された関数を実行するイベントハンドラです。
        xmlHttp.onreadystatechange = handleHttpResponse;

        // HTTPリクエストを送信
        // null ... パスワードなどの追加データなし
        xmlHttp.send(null);
        <--- sample6_7.js ---

    レスポンス処理関数のサンプルです。

        --- sample6_8.js --->
        function handleHttpResponse()
        {
            // レスポンスが正しい場合(4 ... 正常終了, 200 ... ファイルを処理した)
            if (4 == xmlHttp.readyState && 200 == xmlHttp.status)
            {
                var xmlDoc = xmlHttp.responseXML;
                if (xmlDoc.documentElement)
                {
                    // ここに、XMLのツリー構造に従ったコードを記述します。
                }
            }
        }
        <--- sample6_8.js ---

    バックグラウンドでDBなどからデータを収集して XML を出力するプログラムの
    サンプルです。

        --- sample6_9.php --->
        <?php
        // 必要なインクルードファイルを指定します ...

        // データベースインスタンス生成
        $dba = new DbAccess;

        // 検索処理など ...
        $result = $dba->test($_GET['zip']);

        // XMLのコンテントタイプを指定
        header("Content-type:text/xml;charset=ujis");

        // XMLを編集
        print '<?xml version="1.0" encoding="EUC-JP" ?>';
        print '<data>';
        if (0 < $dba->count)
        {
            print '<result>OK</result>';
            print "<count>$dba->count</count>";

            // ここにデータ収集が正常な場合の XML を記述します ...
        }
        else
        {
            <result>NG</result>

            // ここにデータ収集が異常な場合の XML を記述します ...
        }

        print '</data>';

        ?>
        <--- sample6_9.php ---

    上記のようなイメージでコーディングを行います。
    Ajaxを使用すると、ページのリロード無しに、データだけを再描画する事ができます。
    VBの画面のようなレスポンスの良いアプリケーションも実現可能です。

    実際動作するサンプルプログラムは、次章でご紹介致します。

参考
    Ajax を使った郵便番号検索
    http://pocari.org/tools/ajax/ajaxzip/

    Guide to Using XMLHttpRequest
    http://www.webpasties.com/xmlHttpRequest/xmlHttpRequest_tutorial_1.html

---

・本ページの内容は、Ta-kakuが住所検索のページを作成する際に独自で調査した内容を
  講座的にまとめたものです。

・記述に誤りがある場合は、訂正して読み替えてください。

・技術的な内容にはお答えできませんので、予めご了承ください。
PR