Webプログラミング演習
ＳＴＥＰ
11
XML:Extensible Markup Language
コンピュータが扱うデータや文書を表現する技術
–
SGML（Standard Generalized Markup Language）の改良
利用者が自由に拡張可能なマークアップ言語を設計
–HTML＝SGMLを利用して作成されたWebページ記述言語
–XHTML＝XMLを利用して作成されたWebページ記述言語
開始タグ（
<タグ名>
）と終了タグ（
</タグ名>
）で要素を挟む
（マークアップする）ことで，要素の意味を表す
–使用するタグは利用者が自由に決めることができる
–タグの入れ子構造で木構造（全体部分、親子などの関係）を表現
blogのエントリーを表現するXML
<?xml version="1.0" encoding="utf-8" ?>
<entrylist>
<entry id="10">
<date>2013.12.10 10:50</date>
<title>STEP10:Ajaxを利用したRSSフィードの表示</title>
<category>授業資料</category>
<body>Ajaxを利用して，RSSフィードの最新エントリをHTMLに埋め込む</body>
</entry>
...（entryの繰り返し）...
</entrylist>
XMLデータ（文書）を構成する要素
entrylist
entry
date
title category body
id
.... ....
....
....
XML文書のスタイリング（表現の変換）
情報
情報
情報
情報
情報
XML
文書
目的
表現
A
（ブラウザ）表現
B
（ブラウザ）表現
C
（印刷）
用途・状況
目的に応じて集められた
XML情報を
利用者の用途・状況にあわせて
適切にスタイリングする
One Source Multi Use
適切な表現への
変換
XSL （Extensible Stylesheet
Language）
XML文書のためのスタイルシート言語
–
三つの技術から構成
XPath : XML文書内の特定要素を識別
XSLT : XSL Transformations. 文書要素の置き換え規則
XSL-FO : 組み版指定（印刷目的の表現）
–
この演習では，
XSLT（とXPath）
を使って，ＸＭＬを
HTMLに変換する
XML
HTML
XSLT
プロセッサXSLTの記述
テンプレート集合
–
XML文書の特定パターン（XPathで指定）に対して，表
現の変換規則を適用する
–
CSSと似た考え方
＝
HTMLの特定パターン（セレクタで指定）に対して，スタイリング
規則を適用する
XML整形式
–
開始タグ・終了タグによる完全な入れ子構造
XPath
entrylist entry
date title category body
id
.... .... .... ....
entry entry...
/
ドキュメントルート
/entrylist/entry 全entryノードの集合
title
カレントノード
の子要素の
title
@id
カレントノードの
id属性
/で始まる場合はドキュメントルートからの絶対パス
そうでない場合はカレントノード（現在着目しているノード）からの相対パス
XSLTのサンプル
<?xml version="1.0" encoding="utf-8"?>
<xsl:transform version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> <xsl:output method="html" encoding="utf-8"/>
<xsl:template match="/"> <html> <body> <xsl:apply-templates select="entrylist/entry"/> </body> </html> </xsl:template> <xsl:template match="entry"> <li> <xsl:value-of select="title"/> </li> </xsl:template> </xsl:transform> UTF-8で記述されたXML文書であることの宣言 出力の書式と文字コード指定 スタイル シートの 範囲 title要素の値 を出力する entry要素に対して適用するテンプレート 処理対象のXML文書 全体に対して適用する テンプレート 対象要素を選択してテン プレートを適用する
（ソースコード）
演習
前ページのサンプル
XSLTファイルを作成し，実行せよ
–
ファイル名は「
index.xsl」
XSLTファイルの適用実行
% cd myblog
% /usr/bin/xsltproc index.xsl mng/entries.xml
....
(htmlでタイトルリストが出力されればOK)
....
演習（つづき）
index.xslをブラウザから実行するためのCGIを作成
–
ファイル名は「
indexxsl.cgi」
実行許可を与える
デプロイ後，ブラウザからアクセス
http://webdesign.center.wakayama-u.ac.jp/~
ユーザID
/ｍｙblog/indexxsl.cgi
% chmod +x indexxsl.cgi
#!/usr/bin/perl
use CGI qw(:standard);
print header(-type=>"text/html; charset=UTF-8");
この部分にエントリーごとの処理以前の
XHTML
Blogトップページ用XSLTの作成
index.xslを改良する
文書全体に適用されるテンプレート
この部分にエントリーごとの処理以後の
XHTML
<xsl:template match="/"> <html> <body> <xsl:apply-templates select="entrylist/entry"/> </body> </html> </xsl:template><xsl:template match="entry"> <div class="entry">
<h3><xsl:value-of select="date"/></h3>
<h4> <a href="entry.php?id={@id}"><xsl:value-of select="title"/></a></h4> <div class="body"> <xsl:value-of select="body"/> </div> </div> </xsl:template>
Blogトップページ用XSLTの作成（つづき）
エントリーごとに適用されるテンプレート
date要素の値を出力
title要素の値を出力
body要素の値を出力
id属性の値に置き換わる
（ソースコード）
XSLTのライブラリ化
XML
HTML
XSLT
プロセッサ
汎用性の高いテンプレートを、ファイルに記述して
おく。
XSLTから外部ファイルをimportし、そのファイル
に記述されているテンプレートを使う
XSLT
ライブラリimport
利用
カレンダーライブラリ
ファイル名は「
calendar.xsl」
内容は下のリンクをクリック
–
ライブラリに含まれているテンプレート
<xsl:template name="calendar">
<xsl:template name="mymonth">
<xsl:template name="myweek">
calendar
mymonth
myweek
利用 利用（ソースコード）
index.xslを変更
<?xml version="1.0" encoding="utf-8"?>
<xsl:transform version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:import href="calendar.xsl"/>
<xsl:output method="html" encoding="utf-8"/>
....
<div class="calendar">
<xsl:call-template name="calendar">
<xsl:with-param name="year" select="'2015'"/>
<xsl:with-param name="month" select="'1'"/>
</xsl:call-template>
</div>
....
カレンダーライブラリの利用
ライブラリテンプレート
（
calendar）の呼び出し
パラメータは年月
ライブラリの読み込み
参考
Webページ
サンプルで覚える
XSLTプログラミング
–
http://www.atmarkit.co.jp/fxml/tanpatsu/xslt/xslt00.html
XSLT1.0仕様書（日本語訳）
おまけ
1
エントリ本文で
htmlタグを使う方法
index.xslに以下の変更を適用
<xsl:value-of select="body"/>
↓
<xsl:
copy-of
select="body
/*|body/text()
"/>
indexxsl.cgiの最終行を以下に変更
system("/usr/bin/xsltproc index.xsl mng/entries.xml | sed 's/¥</</g;s/¥>/>/g'");
