Webプログラミング演習

Size: px

Start display at page:

Download "Webプログラミング演習"

あきおみおか
7 years ago
Views:

1 Web プログラミング演習 STEP11 XSLT を使った画面生成

2 XML:Extensible Markup Language コンピュータが扱うデータや文書を表現する技術 SGML(Standard Generalized Markup Language) の改良利用者が自由に拡張可能なマークアップ言語を設計 HTML=SGML を利用して作成された Web ページ記述言語 XHTML=XML を利用して作成された Web ページ記述言語開始タグ (< タグ名 >) と終了タグ (</ タグ名 >) で要素を挟む ( マークアップする ) ことで, 要素の意味を表す使用するタグは利用者が自由に決めることができるタグの入れ子構造で木構造 ( 全体部分親子などの関係 ) を表現

3 blog のエントリーを表現する XML <?xml version="1.0" encoding="utf-8"?> <entrylist> <entry id="10"> <date> :50</date> <title>step10:ajaxを利用したrssフィードの表示 </title> <category> 授業資料 </category> <body>ajaxを利用して,rssフィードの最新エントリをhtmlに埋め込む </body> </entry>...(entryの繰り返し)... </entrylist>

4 XML データ ( 文書 ) を構成する要素 entrylist entry entry entry... id date title category body

5 XML 文書のスタイリング ( 表現の変換 ) 目的に応じて集められた XML 情報を利用者の用途状況にあわせて適切にスタイリングする表現 A ( ブラウザ ) 目的情報情報情報情報情報 XML 文書適切な表現への変換用途状況 One Source Multi Use 表現 C ( 印刷 ) 表現 B ( ブラウザ )

6 XSL (Extensible Stylesheet Language) XML 文書のためのスタイルシート言語三つの技術から構成 XPath : XML 文書内の特定要素を識別 XSLT : XSL Transformations. 文書要素の置き換え規則 XSL-FO : 組み版指定 ( 印刷目的の表現 ) この演習では,XSLT( とXPath) を使って,XMLを HTMLに変換する XSLT XML HTML プロセッサ

7 XSLT の記述テンプレート集合 XML 文書の特定パターン (XPath で指定 ) に対して, 表現の変換規則を適用する CSS と似た考え方 =HTML の特定パターン ( セレクタで指定 ) に対して, スタイリング規則を適用する XML 整形式開始タグ終了タグによる完全な入れ子構造

8 XPath / ドキュメントルート entrylist /entrylist/entry 全 entry ノードの集合 entry entry entry... カレントノードの子要素の title カレントノードの id 属性 id date title category body / で始まる場合はドキュメントルートからの絶対パスそうでない場合はカレントノード ( 現在着目しているノード ) からの相対パス

9 XSLT のサンプル <?xml version="1.0" encoding="utf-8"?> UTF-8で記述されたXML 文書であることの宣言 <xsl:transform version="1.0" xmlns:xsl=" <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> ( ソースコード )

10 演習 % cd myblog 前ページのサンプル XSLT ファイルを作成し, 実行せよファイル名は index.xsl XSLT ファイルの適用実行 % /usr/bin/xsltproc index.xsl mng/entries.xml... (html でタイトルリストが出力されれば OK)...

11 演習 ( つづき ) 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 デプロイ後, ブラウザからアクセスユーザ ID/myblog/indexxsl.cgi

12 Blog トップページ用 XSLT の作成 index.xsl を改良する文書全体に適用されるテンプレート <xsl:template match="/"> <html> <body> この部分にエントリーごとの処理以前の XHTML <xsl:apply-templates select="entrylist/entry"/> </body> </html> この部分にエントリーごとの処理以後の XHTML </xsl:template>

13 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 要素の値を出力 ( ソースコード )

14 XSLT のライブラリ化汎用性の高いテンプレートをファイルに記述しておく XSLTから外部ファイルをimportしそのファイルに記述されているテンプレートを使う import XSLT ライブラリ XML XSLT プロセッサ利用 HTML

15 カレンダーライブラリファイル名は calendar.xsl 内容は下のリンクをクリックライブラリに含まれているテンプレート <xsl:template name="calendar"> <xsl:template name="mymonth"> <xsl:template name="myweek"> calendar 利用 mymonth 利用 myweek ( ソースコード )

16 カレンダーライブラリの利用 index.xsl を変更 <?xml version="1.0" encoding="utf-8"?> <xsl:transform version="1.0" xmlns:xsl=" <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>...

17 参考 Web ページサンプルで覚える XSLT プログラミング XSLT1.0 仕様書 ( 日本語訳 )

18 おまけ 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");

19 おまけ 2 アクセスログ, エラーログの確認セキュリティの警告を無視してアクセスすると, 本人の最近 20 行分のアクセスログ / エラーログが出力される

20 次回の予定トラックバック機能の実装

XMLとXSLT

XMLとXSLT XML と XSLT 棚橋沙弥香目次現場のシステム構成とXML/XSLの位置づけ XMLとは XSL/XSLTとは XalanのインストールいろいろなXSL XMLマスター試験の紹介現場のシステム構成 HTML 画面上のデータ電文電文外部 WEB サーバー (Java) CORBA 通信認証サーバー (C 言語 ) DB XML 電文 HTML XSL XSLT 変換今回の説明範囲