Web プログラミング演習 STEP11 XSLT を使った画面生成
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 entry entry... id date title category body............
XML 文書のスタイリング ( 表現の変換 ) 目的に応じて集められた XML 情報を利用者の用途 状況にあわせて適切にスタイリングする 表現 A ( ブラウザ ) 目的 情報情報情報情報情報 XML 文書 適切な表現への変換 用途 状況 One Source Multi Use 表現 C ( 印刷 ) 表現 B ( ブラウザ )
XSL (Extensible Stylesheet Language) XML 文書のためのスタイルシート言語 三つの技術から構成 XPath : XML 文書内の特定要素を識別 XSLT : XSL Transformations. 文書要素の置き換え規則 XSL-FO : 組み版指定 ( 印刷目的の表現 ) この演習では,XSLT( とXPath) を使って,XMLを HTMLに変換する XSLT XML HTML プロセッサ
XSLT の記述 テンプレート集合 XML 文書の特定パターン (XPath で指定 ) に対して, 表現の変換規則を適用する CSS と似た考え方 =HTML の特定パターン ( セレクタで指定 ) に対して, スタイリング規則を適用する XML 整形式 開始タグ 終了タグによる完全な入れ子構造
XPath / ドキュメントルート entrylist /entrylist/entry 全 entry ノードの集合 entry entry entry... title @id カレントノードの子要素の title カレントノードの id 属性 id date title category body............ / で始まる場合はドキュメントルートからの絶対パスそうでない場合はカレントノード ( 現在着目しているノード ) からの相対パス
XSLT のサンプル <?xml version="1.0" encoding="utf-8"?> UTF-8で記述されたXML 文書であることの宣言 <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> title 要素の値を出力する 対象要素を選択してテンプレートを適用する 処理対象の XML 文書全体に対して適用するテンプレート entry 要素に対して適用するテンプレート スタイルシートの範囲 </xsl:transform> ( ソースコード )
演習 % cd myblog 前ページのサンプル XSLT ファイルを作成し, 実行せよ ファイル名は index.xsl XSLT ファイルの適用実行 % /usr/bin/xsltproc index.xsl mng/entries.xml... (html でタイトルリストが出力されれば OK)...
演習 ( つづき ) index.xsl をブラウザから実行するための CGI を作成 ファイル名は indexxsl.cgi #!/usr/bin/perl use CGI qw(:standard); print header(-type=>"text/html; charset=utf-8"); system("/usr/bin/xsltproc index.xsl mng/entries.xml"); 実行許可を与える % chmod +x indexxsl.cgi デプロイ後, ブラウザからアクセス http://webdesign.center.wakayama-u.ac.jp/~ ユーザ ID/myblog/indexxsl.cgi
Blog トップページ用 XSLT の作成 index.xsl を改良する 文書全体に適用されるテンプレート <xsl:template match="/"> <html> <body> この部分にエントリーごとの処理以前の XHTML <xsl:apply-templates select="entrylist/entry"/> </body> </html> この部分にエントリーごとの処理以後の XHTML </xsl:template>
Blog トップページ用 XSLT の作成 ( つづき ) エントリーごとに適用されるテンプレート <xsl:template match="entry"> <div class="entry"> <h3><xsl:value-of select="date"/></h3> date 要素の値を出力 <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> id 属性の値に置き換わる body 要素の値を出力 title 要素の値を出力 ( ソースコード )
XSLT のライブラリ化 汎用性の高いテンプレートを ファイルに記述しておく XSLTから外部ファイルをimportし そのファイルに記述されているテンプレートを使う import XSLT ライブラリ XML XSLT プロセッサ 利用 HTML
カレンダーライブラリ ファイル名は 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'"/> (calendar) の呼び出し </xsl:call-template> パラメータは年月 </div>...
参考 Web ページ サンプルで覚える XSLT プログラミング http://www.atmarkit.co.jp/fxml/tanpatsu/xslt/xslt00.html XSLT1.0 仕様書 ( 日本語訳 ) http://www.infoteria.com/jp/contents/xml-data/rec-xslt-19991116-jpn.htm
おまけ 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'"); index.php, entry.phpに以下の変更を適用 $body = mb_convert_encoding($entry->body, "utf-8", "auto"); $body = mb_convert_encoding($entry->body->asxml(), "utf-8", "auto");
おまけ 2 アクセスログ, エラーログの確認 https://webdesign.center.wakayama-u.ac.jp/log/access.cgi https://webdesign.center.wakayama-u.ac.jp/log/error.cgi セキュリティの警告を無視してアクセスすると, 本人の最近 20 行分のアクセスログ / エラーログが出力される
次回の予定 トラックバック機能の実装