TOP＞サーバ構築・運用＞ 作ってみよう！
XMLDB入門
eXistではじめよう！使って覚えるXMLデータベース入門

第４回：Webアプリケーションを構築しよう！
著者：ウルシステムズ  大塚 庸史、柏原 宏充   2007/8/6
前のページ  1  2   3  4  次のページ
作ってみよう！

   サンプルアプリケーションのアーキテクチャ概要は図1の通りです。大きな特徴として、これまでアプリケーションレイヤで行っていたほとんどの処理を、XQueryで記述していることがあげられます。
サンプルアプリケーションの概要
図1：サンプルアプリケーションの概要

   XQueryの中で出力用のHTMLドキュメントを作成することもできますが、今回はXQueryからの出力はシンプルなXMLのみとして、XMLの表示はすべてWebブラウザ側でAjaxを使って行うこととします。

   このため、今回実際にコーディングする部分は、XQueryとAjaxの画面の一部となります。

   次の表3は、作成するサンプルアプリケーションの構成と各ファイルの役割です。

ファイル/ディレクトリ名 説明
/usr/local/eXist/webapp/xquery/thinkit_exist アプリケーションのルートディレクトリです。
  index.html 表示画面のHTMLです。XQueryの呼び出し、結果XMLの画面表示を行います。
show_list.xql 製品一覧用XQueryです。
parts_tree.xql 製品構成部品用XQueryです。
scripts/xml2tree.js XMLからツリーを作成するためのJavaScriptです。
ext_js⁄* Ext JSが提供するJavaScript、CSS、イメージファイルなどです。

表3：サンプルアプリケーションの構成

   サンプルアプリケーションの構成ファイルは以下のURLからダウンロードできるので、各自アーカイバで解凍し、eXistがインストールされているディレクトリの/webapp/xquery配下に展開してください。標準では「/usr/local/eXist/webapp/xquery/」となります。またWindowsの場合は「c:\Program Files\eXist\webapp\xquery」になります。

サンプルアプリケーション
 ZIPファイル thinkit_exist.zip  （ZIPファイル/392KB）

   今回のサンプルでは「Ext JS」というAjaxライブラリを利用します。Ext JSはJack Slocumが中心となって開発が進められているものです。高い機能と美しい画面が特徴的です。今回は安定版の1.0.1aを利用しています。

 Ext JSのオフィシャルサイト
 http://extjs.com/

show_list.xqlの作成

   まず、製品一覧XMLをXMLDBから取得するためのXQueryを作成します。ここでは「第3回：eXistでXQueryを実行しよう！」で作成したXQueryを修正して使います。

   主な変更点はWhere条件を削除して全製品を表示するようにしたことと、HTTPレスポンス用のライブラリを利用していることの2点です。

xquery version "1.0";

declare namespace response="http://exist-db.org/xquery/response"; ← 1
response:set-header("Content-Type", "text/xml"), ← 2
<results>{
for $product in document("/db/inventory/products.xml")/products/product
return
<product>
    <id>{xs:string($product/@id)}</id>
    {$product/name, $product/price}
    </product>
}
</results>

   1では、eXistのXQuery拡張ライブラリを使っています。これはHTTPレスポンスを利用することができるライブラリで、namespaceを宣言して名前の衝突を避けることができます。

   2では、response:set-header関数を使用しています。この関数は、名前の通りHTTPレスポンスのヘッダを設定することができます。ここでは、Content-Typeに「text/xml」を設定します。

   Ajaxライブラリ側でContent-Typeでデータ形式を判断しているため、この設定が必要となります。
parts_tree.xqlの作成

   parts_tree.xqlは製品を構成している部品の階層構造を表示するためのXQueryです。製品一覧から製品IDを取得し、製品を構成する部品データをXMLDBから取得します。
製品構成部品XMLの検討

   それでは製品構成部品を表示する場合のXML構造について考えてみましょう。部品IDと部品名を持たせたツリー構造の表示を前提とすると、以下のようなXMLになります。

<product id="0001" name="製品１">
   <partss id="PA0001" name="部品１">
       <parts id="PAS002" name="部品２"/>
   </parts>
   <parts id="PA0003" name="部品３">
       <parts id="PAS001" name="部品パーツ１"/>
          <parts id="PAS002" name="部品パーツ２" />
          <parts id="PAS003" name="部品パーツ３" />
          <parts id="PAS004" name="部品パーツ４" />
          </parts>
       </parts>
       <parts id="PAS005" name="部品パーツ５"/>
   </parts>
</product>

   これに対してXMLDBに保存されている部品XMLは、以下のようなデータ構造になっています。

<parts_list>
<parts id="PA-001">
        <name>電動モーター</name>
        <consist_of>
            <parts id="PAS-A001"/>
            <parts id="PAS-A002"/>
            <parts id="PAS-A003"/>
            <parts id="PAS-A004"/>
        </consist_of>
    </parts>
    <parts id="PAS-A001">
        <name>軸受け</name>
        <consist_of>
            <parts id="PAS-A011"/>
            <parts id="PAS-A012"/>
         </consist_of>
</parts>
</parts_list>

   parts_list要素では、自分を構成しているpartsの情報をconsist_of要素の下に、部品IDとして持っています。部品を構成しているものについての情報を取得するためには、部品IDをキーとして階層構造を再帰的にたどっていく必要があります。
前のページ  1  2   3  4  次のページ

ウルシステムズ株式会社 大塚 庸史
 著者プロフィール
ウルシステムズ株式会社  大塚 庸史
ウルシステムズ株式会社シニアコンサルタント。2003年より現職。以前よりスクリプト言語には大きな興味を寄せていたが、最近、JavaScript、Flexの柔らかさに開眼しつつある。XQueryは今年「来る」と確信しつつ日々奔走中。
ウルシステムズ株式会社 柏原 宏充
 著者プロフィール
ウルシステムズ株式会社  柏原 宏充
ウルシステムズ株式会社シニアコンサルタント。Web系開発の世界でRDBMSと触れあっていたところ、様々なことがあってXMLDBの世界へ。技術を文字にして伝え、文字を実装にして証明することを武器に、今日もお客様の課題解決に取り組んでいる。
INDEX
第4回：Webアプリケーションを構築しよう！
  eXistを使ってのWebアプリケーション構築
作ってみよう！
  関数の作成と再帰呼び出し
  製品一覧：グリッド表示