1.繰り返し入力する内容の雛型化
最初に紹介するXSLTスクリプトは、何度も入力する内容を一つのタグで置き換えてしまうものです。画像を使った枠線を使用する時など、<div>タグを何個も書かなければならないときに、威力を発揮します。
変換元文章
<?xml-stylesheet type="text/xsl" href="sample.xsl"?> <html> <head> <title>1.繰り返し入力する内容の雛型化</title> </head> <body> <h1>1.繰り返し入力する内容の雛型化</h1> <item title="コンテンツ1"> そこは本当に田舎で、僕が住んでいる町とは何もかもが異なっていた。 向こうでの生活を始めてから2日は退屈が続いた。 あまりにもやることがなかったので、笹を取って船を作っては川に浮かべると いうことを、訳もなく繰り返した。 家のすぐ近くに川が流れていて、その岸にそって歩いていくと、周りの緑が 少し濃くなる。 そこから少し離れたところに、笹が密集して生えている場所があるのだ。 </item> <item title="コンテンツ2"> 生麦生米生卵<br/> カエルピョコピョコミピョコピョコ<br/> あわせてピョコピョコムピョコピョコ<br/> </item> </body> </html>
変換結果
表示結果のように、画像を使用した枠線を表示するには複雑なHTMLコードを書かなくてはなりませんが、変換元文章の中では、<item>タグの中に文字を書くだけです。変換時に<item>タグを実際のHTMLコードに置き換えます。
XSLTスクリプト
<?xml version="1.0"?> <xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0"> <!-- 出力モード --> <xsl:output method="html" encoding="Shift_JIS"/> <!-- 処理命令は無視 --> <xsl:template match="processing-instruction()"/> <!-- ノードや属性はそのまま出力 --> <xsl:template match="@*|node()" priority="-1.0"> <xsl:copy><xsl:apply-templates select="@*|node()"/></xsl:copy> </xsl:template> <!-- メニューアイテム --> <xsl:template match="item"> <div style="text-align:center; margin-bottom:1em; width:100%;"> <div style="text-align:left; width:400px; margin:0px auto;"> <div style="background-image:url(pic/top.gif); background-repeat:no-repeat; width:400px; height:5px; background-position:bottom; margin:0px; padding:0px;"> <br/> </div> <div style="background-image:url(pic/middle.gif); background-repeat:repeat-y; padding:0px; margin:0px; width:400px;"> <div style="padding:1em"> <h2 style="margin:0; padding:0.5em 0.5em 0.8em; font-size:120%; color:#6688ee"> <xsl:value-of select="@title"/> </h2> <div style="color:#666699; font-size:80%; line-height:150%;"> <xsl:apply-templates/> </div> </div> </div> <div style="background-image:url(pic/bottom.gif); background-repeat:no-repeat; width:400px; height:5px; margin:0px; padding:0px;"> <br/> </div> </div> </div> </xsl:template> </xsl:stylesheet>
<!-- メニューアイテム -->以降の部分が「何もしないXSLTスクリプト」に追加された部分です。変換元ファイル中の<item>を、XSLTスクリプトファイル中の<xsl:template match="item">の中に書かれたHTMLタグと置き換えています。また、<xsl:value-of select="@title"/>は<item>のtitle属性を参照することを表し、<xsl:apply-templates/>は<item>内のXMLコードを参照することを表しています。
2.タイトルにサイト名を自動的に追加
ホームページのタイトルの最後に自動的に「（サイト名）」を追加します。
変換元文章
<?xml-stylesheet type="text/xsl" href="sample.xsl"?> <html> <head> <title>2.タイトルにサイト名を自動的に追加</title> </head> <body> <h1>2.タイトルにサイト名を自動的に追加</h1> 変換元ファイルのタイトルの最後に（サイト名）が自動的に追加されます。 （ブラウザのタイトルバーに注目） </body> </html>
変換結果
同じサイトのすべてのページのタイトルに、サイト名を記す時に便利です。
XSLTスクリプト
<?xml version="1.0"?> <xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0"> <!-- 出力モード --> <xsl:output method="html" encoding="Shift_JIS"/> <!-- 処理命令は無視 --> <xsl:template match="processing-instruction()"/> <!-- ノードや属性はそのまま出力 --> <xsl:template match="@*|node()" priority="-1.0"> <xsl:copy><xsl:apply-templates select="@*|node()"/></xsl:copy> </xsl:template> <!-- Title --> <xsl:template match="title"> <xsl:copy><xsl:apply-templates select="@*|node()"/> （HP製作を楽にする7つのXSLTスクリプト）</xsl:copy> </xsl:template> </xsl:stylesheet>
「1.繰り返し入力する内容の雛型化」は独自タグをHTMLタグに置き換える処理でしたが、今回は変換元のHTMLタグに修正を加える内容になっています。
<xsl:template match="title">の中身が、<title>に対応する処理です。
<xsl:copy>は「ノードや属性をそのまま出力する」部分にも使われていて、対象のノードど同じ物を出力することを表しています。この場合は<title>を出力します。
その中身の<xsl:apply-templates select="@*|node()"/>は<title>の中身を参照することを表し、その後の文章「XSLTでHTML製作を楽にする9の技」を付け加えるという内容になっています。
応用例1 文章中の句読点を「．」と「，」に統一する
<title>のようなタグだけでなく、テキストを修正することもできます。
変換元文章
<?xml-stylesheet type="text/xsl" href="app1.xsl"?> <html> <head> <title>2.応用例1 文章中の句読点を「．」と「，」に統一する</title> </head> <body> <h1>2.応用例1 文章中の句読点を「．」と「，」に統一する</h1> 変換元の文章には、異なる種類の句読点が，混じっています。 変換の時に統一してくれます． </body> </html>
変換結果
XSLTスクリプト
<?xml version="1.0"?> <xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0"> <!-- 出力モード --> <xsl:output method="html" encoding="Shift_JIS"/> <!-- 処理命令は無視 --> <xsl:template match="processing-instruction()"/> <!-- ノードや属性はそのまま出力 --> <xsl:template match="@*|node()" priority="-1.0"> <xsl:copy><xsl:apply-templates select="@*|node()"/></xsl:copy> </xsl:template> <!-- 変換元のすべてのテキストに対する処理 --> <xsl:template match="text()"> <xsl:value-of select="translate(., '。｡、､', '．．，，')"/> </xsl:template> </xsl:stylesheet>
<xsl:template match="text()">は変換元のすべてのテキストに対する処理を表します。
<xsl:value-of select="translate(., '。｡、､', '．．，，')"/>により、もとのテキストの内容が、句読点を置き換えて出力されます。
応用例2 <head>内に、外部スタイルシートを読み込む記述を自動的に追加する。
<title>の内容にサイト名を追加したように、<head>の中身に外部スタイルシートの指定を追加することもできます。
変換元ファイル
<?xml-stylesheet type="text/xsl" href="app2.xsl"?> <html> <head> <title>2.応用例2 <head>内に、外部スタイルシートを読み込む 記述を自動的に追加する。</title> </head> <body> <h1>2.応用例2 <head>内に、外部スタイルシートを読み込む記述を 自動的に追加する。</h1> 変換元ファイルには外部スタイルシートの指定がないのに、スタイルが 自動的に適用されています。 </body> </html>
変換結果
XSLTスクリプト
<?xml version="1.0"?> <xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0"> <!-- 出力モード --> <xsl:output method="html" encoding="Shift_JIS"/> <!-- 処理命令は無視 --> <xsl:template match="processing-instruction()"/> <!-- ノードや属性はそのまま出力 --> <xsl:template match="@*|node()" priority="-1.0"> <xsl:copy><xsl:apply-templates select="@*|node()"/></xsl:copy> </xsl:template> <!-- head --> <xsl:template match="head"> <xsl:copy> <xsl:apply-templates select="@*|node()"/> <link rel="stylesheet" href="style.css" type="text/css"/> </xsl:copy> </xsl:template> </xsl:stylesheet>
スクリプトの内容は、<title>にサイト名を追加するのとほとんどかわりません。サイト名の変わりに、<link rel="stylesheet" href="style.css" type="text/css"/>が追加されています。
応用例3 サイドメニュー
<side>タグの内容をサイドメニューに表示します。サイドメニューはスタイルシートを用いて実現しています。
変換元ファイル
<?xml-stylesheet type="text/xsl" href="sample.xsl"?> <html> <head> <title>2.応用例3 サイドメニュー</title> </head> <body> <h1 style="margin-top:0px;">2.応用例3 サイドメニュー</h1> サイドメニューを表示します。 変換元ファイルで<side>タグの中に書いたものはサイドメニューに 表示されます。 <side> この中身はサイドに表示される。 </side> </body> </html>
変換結果
XSLTスクリプト
<?xml version="1.0"?> <xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:msxsl="urn:schemas-microsoft-com:xslt" version="1.0"> <!-- 出力モード --> <xsl:output method="html" encoding="Shift_JIS"/> <!-- 処理命令は無視 --> <xsl:template match="processing-instruction()"/> <!-- ノードや属性はそのまま出力 --> <xsl:template match="@*|node()" priority="-1.0"> <xsl:copy><xsl:apply-templates select="@*|node()"/></xsl:copy> </xsl:template> <xsl:template match="body"> <xsl:copy> <xsl:attribute name="style">background-color:#9999bb; </xsl:attribute> <xsl:apply-templates select="@*"/> <div style="width:15em; position:absolute; left:0px; top:0px;"> <div style="margin:1em; padding:1em; padding:1em; background-color:#ffffff"> <xsl:apply-templates select=".//side"/> </div> </div> <div style="margin:1em 1em 1em 15em; padding:1em; background-color:#ffffff;"> <xsl:apply-templates select="node()[name()!='side']"/> </div> </xsl:copy> </xsl:template> </xsl:stylesheet>
基本的な考え方は代わりません。<body>タグにサイドメニューに必要なHTMLタグを追加し、
<xsl:apply-templates select=".//side"/>
で、<side>タグの中身を出力しています。
<div>の構造やスタイルシートを書き換えれば、二段組も同じ方法で実現できます。
