XMLファイルとは、Extensible Markup Languageの略で、拡張可能なマークアップ言語で書かれたテキストファイルである、ということです。
拡張性とは、要素(タグ)のセマンティック(意味付け)が自由に定義できるのです。これによって、レイアウトに関するセマンティックを排除できるので、データそのものにセマンティックされた価値や信頼性を作者自らの責任において定義することができ、 静的な情報交換のフォーマットとして0ベースとなり得る仕様として生まれたのだ。
例えば、CSVファイルで表す行列表現は2次元配列で表現できますが、たかだか2次元なのです。 それに対しXMLはオブジェクト指向表現が可能なので、n次元という光的な一方向の深層世界だけではなく、新しいシナプスが発見されたらその時点で定義自体をそうさせるだけで、XMLデータそのものに手を加える必要はないのです。
ここでは、XMLがどうして生まれたかとかの概要説明は省略する。私が本サイトで使用しているテクニック(というほどのものではないが…)を紹介するに留める。
ヘッダー
<?xml version="1.0" encoding="UTF-8"?>
ISO/IEC 10646(いわゆるUnicode)
<?xml version="1.0" encoding="UTF-8"?>
Windows系
<?xml version="1.0" encoding="shift_jis"?> <!-- UTF-8が利用できないWindowsで開発している人用 -->
UNIX系
<?xml version="1.0" encoding="euc-jp"?>
通常はUTF-8を使用する(ことを前提に策定されている)
ルート要素(文書全体の親となる要素)は1つだけ
Sample Code
<name> <familyname>Nishimura</familyname> <lastname>Megumi</lastname> </name>
<?xml-stylesheet type="text/xsl" href="sample.xsl" ?>
文字 | 実体名 | 表記(記述)方法 |
---|---|---|
< | lt | < |
> | gt | > |
& | amp | & |
" | quot | " |
XMLでは要素や属性の名前に使える文字が決まっている。
1文字目 | 2文字目 | |
---|---|---|
アルファベット(*1) | ○ | ○ |
数字(*1) | × | ○ |
アクセント記号など | × | ○ |
ひらがな | ○ | ○ |
カタカナ(*2) | ○ | ○ |
漢字 | ○ | ○ |
_ (アンダーバー) | × | ○ |
. (ピリオド) | × | ○ |
(*1)半角文字
(*2)全角文字
実体参照の方法を使えば簡単に手間が省ける
実体参照で使う実体(entity)は、文書型宣言:DTD(Document Type Declaration)の中で定義することができる。
《sample1.xml》
<!DOCUMENT data [ ←文書型宣言(DTD) <ENTITY email "rikidozan1114-master@yahoo.co.jp"> ←実体の定義 ]> <data> <message>連絡・お問合せは&email;までお願いします。</message> <data>
《ブラウザ表示》
連絡・お問合せはrikidozan1114-master@yahoo.co.jpまでお願いします。
copyright© 2007 T.Augustine.
XSLT
<?xml version="1.0" encoding="UTF-8"?> ①XML宣言 <xsl:stylesheet version="1.0" ②XSLTスタイルシートのルート要素 xmlns="http://www.w3c.org/1999/xhtml" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> <xsl:output method="xml" encoding="UTF-8" /> ③出力形式(xml/html/text)および出力時のエンコード <xsl:template match="/"> ④ルート要素(/)のテンプレート
XML
<?xml version="1.0" encoding="UTF-8"?> <?xml-stylesheet type="text/xsl" href="carender_sample.xsl" ?> <Data> <dateList> <carender> <date>1868/10/23</date> <contents>元号を明治と改元する。 旧暦慶応4/9/8</contents> </carender> <carender> <date>1875/09/20</date> <contents>江華島事件</contents> </carender> </dateList> </Data>
XSLT
<?xml version="1.0" encoding="UTF-8"?> <xsl:stylesheet xmlns:myNS="http://devedge.netscape.com/2002/de" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0"> ⇩抽出条件 <xsl:param name="year" select="1875" /> <xsl:param name="month" select="09" /> <xsl:param name="day" select="20" /> <xsl:output method="html" /> <xsl:template match="/"> HTML記述 <div id="DAY_CARENDER"> <h2>今日は何の日?/出来事</h2> <p> <xsl:value-of select="$month"/>月 <xsl:value-of select="$day"/>日 ← XSLTプロセッサで抽出 </p> <ul> ⇩XSLTプロセッサで条件抽出 <xsl:for-each select="Data/dateList/carender"> <xsl:sort select="date" order="ascending" /> <xsl:if test="number(substring(date,6,2))=number($month) and number(substring(date,9,2))=number($day)"> <li> ← HTML要素 <xsl:value-of select="contents" /> <xsl:if test="number(substring(date,1,4))!=0"> (<xsl:value-of select="substring(date,1,4)" />) </xsl:if> </li> ← HTML要素 </xsl:if> </xsl:for-each> </ul> </div> </xsl:template> </xsl:stylesheet>
HTML
<input type="button" tabindex="1" accesskey="1" value="アーティスト" title="アーティスト一覧" onclick="javascript:searchArtist(1)" onkeypress="javascript:searchArtist(1)"> <input type="button" tabindex="2" accesskey="2" value="ア ル バ ム" title="アルバム一覧" onclick="javascript:searchArtist(2)" onkeypress="javascript:searchArtist(2)"> <div id="dsp">表示結果はここ</div>《ブラウザ表示》
JavaScript
var objPathXml="artist.xml"; /* XML ファイル */ var objPathXsl1="artist.xsl"; /* アーティスト一覧 */ var objPathXsl2="album.xsl"; /* アルバム一覧 */ var bIE=(navigator.userAgent.indexOf("Trident") != -1); /* MSIE=true */ function searchArtist(val){ if( val==1 ) objPathXsl = objPathXsl1; if( val==2 ) objPathXsl = objPathXsl2; var objXMLHttp; var xml,xsl; if (bIE) { objXMLHttp = new ActiveXObject("Msxml2.XMLHTTP.3.0"); } else { objXMLHttp = new XMLHttpRequest(); } objXMLHttp.open("GET",objPathXml, false ); objXMLHttp.send( "" ); xml = objXMLHttp.responseXML; objXMLHttp.open("GET",objPathXsl, false ); objXMLHttp.send( "" ); xsl = objXMLHttp.responseXML; if (bIE) { document.getElementById("dsp").innerHTML = xml.transformNode( xsl.documentElement ); } else { processor = new XSLTProcessor(); processor.importStylesheet(xsl); var element = document.getElementById("dsp"); var target = element.childNodes.item(0); newFragment = processor.transformToFragment(xml,document); document.getElementById("dsp").innerHTML = ""; document.getElementById("dsp").appendChild(newFragment,target); } }
variable
で変数名と値をセットする。参照には、変数名の先頭に$
をつける。
XSLT
<?xml version="1.0" encoding="UTF-8"?> <xsl:stylesheet xmlns="http://www.w3c.org/1999/xhtml" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0"> <xsl:variable name="start" select="2000" /> <xsl:variable name="end" select="2010" /> <xsl:template match="/"> …中略… <p> <xsl:value-of select="count(Data/ArtistInfoList/Artist/Album)" />中 <xsl:value-of select="count(Data/ArtistInfoList/Artist/Album[@year>=$start and @year<$end])" />件あります</p>
JavascriptからXSLTプロセッサに変数を渡すことができる。
XSLTファイルには、パラメータの名前を宣言しておけば参照可能になる。
JavaScript
var objPathXml="./history.xml"; /* XML ファイル */ var objPathXsl1="./history.xsl"; /* 改定履歴一覧 */ var objPathXsl=""; /* 読み込み用 */ var bIE=(navigator.userAgent.indexOf("Trident") != -1); /* MSIE=true */ objPathXsl = objPathXsl1; try{ var xml,xsl, xslProc; if (bIE) { xml = new ActiveXObject("Msxml2.DOMDocument"); xml.async = false; xsl = new ActiveXObject("Msxml2.FreeThreadedDOMDocument"); xsl.async = false; xml.load(objPathXml); xsl.load(objPathXsl); } else { objXMLHttp = new XMLHttpRequest(); objXMLHttp.open("GET",objPathXml, false ); objXMLHttp.send( "" ); xml = objXMLHttp.responseXML; objXMLHttp.open("GET",objPathXsl, false ); objXMLHttp.send( "" ); xsl = objXMLHttp.responseXML; } // XSLTプロセッサ if (bIE) { var xslTemp = new ActiveXObject("Msxml2.XSLTemplate"); xslTemp.stylesheet = xsl; xslProc = xslTemp.createProcessor(); xslProc.input = xml; } else { xslProc = new XSLTProcessor(); xslProc.importStylesheet(xsl); } // パラメータ(前月の日付)をセット(XSLファイルに引き渡す) date = new Date(); y = date.getFullYear(); m = date.getMonth(); if( m < 10 ) m = "0" + m; d = date.getDate(); if( d < 10 ) d = "0" + d; if (bIE) { xslProc.addParameter("year", y); xslProc.addParameter("month", m); xslProc.addParameter("day", d); } else { xslProc.setParameter(null, "year", y); xslProc.setParameter(null, "month", m); xslProc.setParameter(null, "day", d); } } catch(e){ document.getElementById("dsp").innerHTML = e.description; return; }
XSLT
<?xml version="1.0" encoding="UTF-8"?> <xsl:stylesheet xmlns="http://www.w3c.org/1999/xhtml" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0"> <!-- 外部から設定するパラメータ --> <xsl:param name="year" /> <xsl:param name="month" /> <xsl:param name="day" /> <xsl:template match="/"> <ul> <xsl:for-each select="Data/historyList/history"> <li> <!-- 指定日付より新しい場合、liタグにclass属性(newInfo)を付加する --> <xsl:choose> <xsl:when test="number(substring(date,1,4))>number($year)"> <xsl:attribute name="class">newInfo</xsl:attribute></xsl:when> <xsl:when test="number(substring(date,1,4))>=number($year) and number(substring(date,6,2))>number($month)"> <xsl:attribute name="class">newInfo</xsl:attribute></xsl:when> <xsl:when test="number(substring(date,1,4))=number($year) and number(substring(date,6,2))=number($month) and number(substring(date,9,2))>=number($day)"><xsl:attribute name="class">newInfo</xsl:attribute></xsl:when> <xsl:otherwise></xsl:otherwise> </xsl:choose> <xsl:value-of select="contents" /> </li> </xsl:for-each> </ul> …以下省略…
本サイトのサンプルコード表示には、google-code-prettifyを使用しています。