ファイルメーカーProのページへ戻る
XML → HTML変換(XSLでXMLをHTMLに変換する)
XSLで検索結果の表示方法を整形する
-dso_xmlで得られたXML形式の検索結果は、Internet ExplorerのXML表示機能を使うだけでそれなりに使える形で表示されますが、やはりもっと凝ったレイアウトに整形して表示したいですね。では、XMLデータを思い通りのレイアウトに整形して表示する方法を考えましょう。
XML形式のデータを、さまざまな様式に整形する手段がXSL(Extensible Stylesheet Language:拡張可能スタイルシート言語)です。XSLはXML形式のデータから必要な要素を抽出したり、並べ替えたり、文字列を追加したりしながら、データの見た目を整えるためのルールです。XSLを使って、XMLデータから必要なデータを抽出したり、いくつかのタグを追加したりしてHTML形式になるように整えれば、普段見慣れた表示形式にすることができます。ものは試し、実際にXSLファイルを作ってみましょう。
まず、先ほど作った「search.html」のフォーム内に以下の2行を追加します。
「search.html」への追加コード |
<input type="hidden" name="-styletype" value="text/xsl">
<input type="hidden" name="-stylehref" value="result.xsl">
|
場所はフォーム内ならどこでもいいですが、<input type="hidden" name="-format" value="-dso_xml">
の次の行にしましょう。上のコードは、『得られたXMLデータは、XSLに従って変換して表示しなさい。具体的な変換方法は「result.xsl」というXSLファイルに記述してあるのでそれを参照するように』という情報を追加したことになります。で、「search.html」は次のようになります。
XSLによる変換を指定した「search.html」の中身 |
<html>
<head>
<title>検索</title>
</head>
<body>
<form action="fmpro" method="post" accept-charset="Shift_JIS">
<input type="hidden" name="-db" value="xml_test.fp5">
<input type="hidden" name="-lay" value="weblayout">
<input type="hidden" name="-format" value="-dso_xml">
<input type="hidden" name="-styletype" value="text/xsl">
<input type="hidden" name="-stylehref" value="result.xsl">
<input type="hidden" name="-max" value="all">
<table>
<tr>
<th align="right">【name】</th>
<td><select name="-op">
<option value="cn" selected>を含む</option>
<option value="bw">で始まる</option>
<option value="eq">等しい</option>
<option value="ew">で終わる</option>
</select></td>
<td><input type="text" name="name" value="" size="30"></td>
</tr>
<tr>
<th align="right">【OS】</th>
<td colspan="2"><input type="hidden" name="-op" value="eq"> <select name="OS">
<option value="" selected>指定なし</option>
<option value="Mac OS">Mac OS</option>
<option value="Windows">Windows98</option>
<option value="Windows NT">WindowsNT</option>
<option value="Linux">Linux</option>
<option value="BeOS">BeOS</option>
</select></td>
</tr>
<tr>
<th align="right">【price】</th>
<td><select name="-op">
<option value="gt">より高い</option>
<option value="lt">より安い</option>
</select></td>
<td><input type="text" name="price" value="" size="30"></td>
</tr>
<tr>
<th align="right">【color】</th>
<td colspan="2"><input type="hidden" name="-op" value="eq"> <select name="color">
<option value="" selected>指定なし</option>
<option value="グラファイト">グラファイト</option>
<option value="ルビー">ルビー</option>
<option value="セージ">セージ</option>
<option value="インディゴ">インディゴ</option>
<option value="スノー">スノー</option> </select></td>
</tr>
<tr>
<td align="center" colspan="3"><input type="submit" name="-find" value="検索実行"></td>
</tr>
</table>
</form>
</body>
</html>
|
次に、その具体的な整形方法を記述した「result.xsl」というXSLファイルを作成しましょう。以下のファイルを検索ページのHTMLファイルと同じフォルダに「result.xsl」というファイル名で保存します。
「result.xsl」の中身 |
<?xml version="1.0" encoding="Shift_JIS"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/TR/WD-xsl" xmlns:fm="http://www.filemaker.com/fmpdsoresult" xml:lang="ja">
<xsl:template><xsl:apply-templates/></xsl:template>
<xsl:template match="text()"><xsl:value-of select="."/></xsl:template>
<xsl:template match="fm:FMPDSORESULT">
<html>
<head><title>検索結果</title></head>
<body>
<table border="1">
<tr><th>商品名</th><th>OS</th><th>価格</th><th>色</th></tr>
<xsl:apply-templates select="fm:ROW" />
</table>
</body>
</html>
</xsl:template>
<xsl:template match="fm:ROW">
<tr>
<td><xsl:value-of select="fm:name" /></td>
<td><xsl:value-of select="fm:os" /></td>
<td><xsl:value-of select="fm:price" /></td>
<td><xsl:value-of select="fm:color" /></td>
</tr>
</xsl:template>
</xsl:stylesheet>
|
ファイルメーカーProのWebフォルダに「search.html」と「result.xsl」の2つのファイルができることになります。
さて、Internet Explorerで「search.html」を表示して、先と同じ検索を実行してみてください。
今度は、受信したXMLデータが、XSLファイルに書かれたルールに従って整形され、Webでよく見かける表形式になりました。
見た目は、普通の表形式です。従来のCDMLによる方法となんら変わりはありません。重要なのは、ファイルメーカーProは、XML形式の「データを送信しただけ」だということです。それを表形式にレイアウトする作業は、XSLファイルに記述されたルールに基づいてブラウザが実行したのです。HTMLコードを生成する作業をブラウザに処理させることで、ファイルメーカーProにかかる負荷を軽減することができるのです。
さて、ファイルメーカーProのXMLを使ったデータ配信において重要なのは(XMLデータ自体は、ファイルメーカーProが自動的に送出するのですから)、結局のところXSLの書き方なのです。XSLファイルによって、いかにしてXMLデータを望み通りのレイアウトで表示するかなのです。>>