• 締切済み

XMLをXSLTやCSSに変換してHTMLで出力

XMLデータ <?xml version="1.0" encoding="Shift-JIS"?> <flower> <naiyou> 本文 </naiyou> <name>花言葉</name> <flow><name>あきらめ </name></flow> <flow><list>悲しい思い出 </list></flow> <flow><name>情熱 </name></flow> <flow><list>独立 </list></flow> <flow><name>再会 </name></flow> <flow><list>想うはあなた一人 </list></flow> <flow><name>また会う日を楽しみに </name> </flow> </flower> を変換したいのです。 XSLTデータ <?xml version="1.0" encoding="Shift-JIS"?> <xsl:stylesheet version="1.0" xmlns:xsl="F:\i08i008\I08I008.html"> <xsl:output method="html"/> <xsl:template match="/"> <html><xsl:apply-templates/></html> </xsl:template> <xsl:template match="flower"> <h1>彼岸花</h1>  <xsl:apply-templates/>  </xsl:template> <xsl:template match="naiyou"> <p><xsl:value-of select="."/></p> </xsl:template> <xsl:template match="flow"> <xsl:value-of select="name"/> <table flame="border" width="50%"> <tr><th>彼岸花</th><th>花言葉</th></tr> <xsl:for-each select="flow"> <tr> <td><xsl:value-of select="name"/></td> <td><xsl:value-of select="list"/></td> </tr> </xsl:for-each> </table> </xsl:template> </xsl:stylesheet> ここまで作ったのですが、うまくHTMLに出力できません。原因がわかる方、教えてください。 イメージ図 <html> <head> <title>彼岸花</title> </head> <body> <div style="font-weight:bold"> 彼岸花 </div> ヒガンバナ科ヒガンバナ属の多年草。別名「曼珠沙華」という別名があるのは有名だが、他にも呼び名があるのは知られていない。<br> ただ、その名前が「地獄花」、「捨子花」などと縁起でもない名前ばかりである。<br> その中でも何故「はっかけばばあ」という呼び名があるのかは疑問である。<br> <img src="http://farm1.static.flickr.com/120/252830085_712ffd338b.jpg"width="171" height="171"><br> <br> <table border="1"bgcolor="#b22222"> <tr> <th colspan="2">彼岸花</th> </tr> <tr> <th colspan="2">花言葉</th> </tr> <tr> <th>悲しい思い出</th> <th>独立</th> </tr> <tr> <td>独立</td> <td>諦め</td> </tr> <tr> <td>再開</td> <td>情熱</td> </tr> </table> </body> </html> XSLTについては(CSSもそうですが)、イメージ図の通り、写真を掲載したりや表に配色をしたいとも考えております。そのあたりのアドバイスも頂けると嬉しいです。 あとCSSについてもサイトで色々見たのですが、どれもさっぱり解かりませんでした。初心者な私にでも解かりやすいサイト教えてください。一から勉強しているところです。 CSSはこういう風に記述するんだよ、と簡単に教えて頂ける優しい方もいたら回答お願いします。サイトだけでは悪戦苦闘しそうなもので…。物凄い不安です。

  • XML
  • 回答数3
  • ありがとう数3

みんなの回答

  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.3

HTMLもXMLも根っこは同じSGMLで構造化言語です。 XMLもきちんと構造化されていないと、ちゃんとしたHTMLが出力できません。 書かれているHTMLも酷いです。 たくさんの花を並べて比較するのでない限り、TABLEでマークアップすべきではないでしょう。 また<br>は強制改行で、この様な文が変わるとき(段落)のマークアップに使うものではありません。<th>は表の見出しですし、<td>はそれに関係したコマです。 また、HTMLの文法としては誤りではありませんが、直接文を入れるのはおかしいです。 <xml> <document>  <title>花言葉</title>  <subtitle>彼岸花</subtitle>  <alias><word>曼珠沙華</word></alias>  <caption>   <pargraph>    ヒガンバナ科ヒガンバナ属の多年草。別名「曼珠沙華」という別名があるのは有名だが、他にも呼び名があるのは知られていない。   </paragraph>   <paragraph>    ただ、その名前が「地獄花」、「捨子花」などと縁起でもない名前ばかりである。<br> その中でも何故「はっかけばばあ」という呼び名があるのかは疑問である。   </paragraph>  </caption>  <floriography>   <word>情熱,独立</word>再会,あきらめ,悲しい思い出,想うはあなた一人,また会う日を楽しみに</word>  </floriography> </document> </xml> とか、これをDOMで見るときちんと階層になっている document  |-title  |-subtitle  |-alias  |-caption  |  |--paragraph  |  |--paragraph  |-florigraphy    |--word    |--word その上で、HTMLにするのですが、マークアップは <h1>花言葉</h1> <h2>彼岸花</h2> <div class="article"> <p> ヒガンバナ科ヒガンバナ属の多年草。別名「曼珠沙華」という別名があるのは有名だが、他にも呼び名があるのは知られていない。 </p> <p> ただ、その名前が「地獄花」、「捨子花」などと縁起でもない名前ばかりである。<br> その中でも何故「はっかけばばあ」という呼び名があるのかは疑問である。 </p> </div> <p class="florigraphy"> <word>情熱,独立</word>再会,あきらめ,悲しい思い出,想うはあなた一人,また会う日を楽しみに </p> とか。 XMLより前に、HTMLでよいですから、きちんと文書構造に従ったマークアップ   <div style="font-weight:bold">    彼岸花   </div> は明らかに間違ったマークアップ <h2>彼岸花</h2> ですね。 もっとも重要な部分を抜かして、HTMLましてやXMLなんて無理です。 たのしいXML: XML/XHTML入門ページです ( http://www6.airnet.ne.jp/manyo/xml/index.html ) ここにとても良いマニュアルがあります。 構造化とは何かからはじめるべし!!

  • abacabu
  • ベストアンサー率37% (250/663)
回答No.2

趣味でWEBページを作成している30代男です。 私もXMLの勉強をしたいのですが田舎なもんで 参考書が売ってません…はおいておいて。 XMLからXSLTを使ってHTMLへ変換 これに関してはフリーソフトもあるので手に入れて下さい。 その上でXMLとXLSを用意してその2個をソフトに掛けて HTMLへ変換させます…知ってますよね? で、ここで言うXSLというソフトはスタイルシートという役割 なんですが、作業としてはHTML記述その物です。 HTMLの記述知識が無いと掛けないと思います。 (恐らくXML参考書で説明されているとは思いますが) HTMLで記述しながらそれに与える値をXMLから読み込むという 流れです。 あと、そのHTMLのレイアウトをするCSSについては 原理自体はXSLと同様にレイアウトをする物なんですが、 書き方が全く違います。どちらかというと プログラム寄り(知識不足で誤った認識の可能性あり)な書き方な 気がします。 CSSに関しては初歩的な解説のあるサイトのURLを参考URLとして 貼っておきました。 簡単に説明すると 適用先{何を,どうする} という事を書くだけです。 HTML記述のレイアウトしたいタグの所に"style="として直接記入するものと htmlの<head></head>内に記述してそれを適用先(基本的に任意の名前)に <body class="任意のなまえ"> としてCSSを実行する位置を指定します。 従って最悪、作成したCSSの羅列の上から順々に適応していかなければならない訳でなく そのclass指定してその位置にいれていくのでCSSの書き方というのは、 適用先{何を,どうする}   ←これだけです。 bodyに指定したい場合はそういう指定もできますが、 ある程度全てのレイアウトが固まっていないと、後々修正する事にもなります。 適用したくない部分が出て来た時等ありますので。 簡単に言うとXSLとCSSの記述の仕方は全く違います。 XSLはHTMLと一緒、CSSはJavaScriptと一緒位に考えて頂くとわかりやすいかと (かなり偏った考えですがおおむね見た目の印象)

参考URL:
http://kumacrow.blog111.fc2.com/blog-entry-260.html
noname#128134
noname#128134
回答No.1

まずXML とXSLT を完成させましょうか。記載の例のXML はイマイチ構造がわからなかったのでサンプル作ってみました。 XML の構造についてもっとシンプルにパターン化できればXSLT もシンプルになりますよ。 #test99.xml <?xml version="1.0" encoding="Shift-JIS"?> <?xml-stylesheet type="text/xsl" href="test99.xsl"?> <flower> <name>花言葉</name> <naiyou>本文</naiyou> <flower> <name>たんぽぽ</name> <img>/images/00.jpg</img> <comment>たんぽぽのコメント1</comment> <comment2>たんぽぽのコメント2</comment2> </flower> <flower> <name>チューリップ</name> <img>/images/01.jpg</img> <comment>チューリップのコメント1</comment> <comment2>チューリップのコメント2</comment2> </flower> </flower> # test99.xsl <?xml version="1.0" encoding="Shift-JIS"?> <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns="dummy"> <xsl:output method="html"/> <xsl:template match="/"> <html> <head> <title><xsl:value-of select="/flower/name"/></title> </head> <body> <div><xsl:value-of select="/flower/name"/></div> <div><xsl:value-of select="/flower/naiyou"/></div> <xsl:for-each select="/flower/flower"> <table border="1"> <tr> <td rowspan="2"> <img> <xsl:attribute name="src"> <xsl:value-of select="img"/> </xsl:attribute> </img> </td> <th colspan="2"><xsl:value-of select="name"/></th> </tr> <tr> <td><xsl:value-of select="comment"/></td> <td><xsl:value-of select="comment2"/></td> </tr> </table> </xsl:for-each> </body> </html> </xsl:template> <xsl:template match="text()"> <xsl:copy/> </xsl:template> </xsl:stylesheet> img タグのsrc 属性を動的に生成できている辺り(xsl:attribute)が応用できればイロイロやりたい事が出来るようになるかと。 お役に立てれば幸いです。まずはCSS にまで手を出さずXML→HTML 変換を先に完成させた方が良いですね。

関連するQ&A

  • XSLT変換について

    以下のようにファイルを作成してみました。 ローカルではIEに表示できるのですが,アップすると表示されず「スタイルシートにドキュメント要素が含まれていません。スタイルシートが空であるか、正しく構成された XMLドキュメントでない可能性があります。」というコメントが出ます。ご存知の方いらっしゃいましたらどうか教えてください。 ↓作成したファイル 「top.xml」(省略) 「top.xsl」 <?xml version="1.0" encoding="Shift_JIS" ?> <xsl:stylesheet xmlns:xsl="(省略)" version="1.0"> <xsl:import href="./note.xsl" /> <xsl:output method="html" encoding="Shift_JIS" /> <xsl:template match="/">  <html xmlns="(省略)" xml:lang="ja" lang="ja">  <head>   <meta http-equiv="Content-Type"    content="text/html; charset=Shift_JIS" />   <title><xsl:value-of   select="/top/title" /></title>  </head>  <body>   <xsl:call-template name="header" />   <div align="center"><h1>HOME PAGE</h1></div>   <table> <tr><th>CONTENTS</th></tr> <xsl:for-each select="/top/contents"> <tr><th><a href="{url}"><xsl:value-of      select="label" /></a></th>      <td><small><xsl:value-of      select="text" /></small></td></tr> </xsl:for-each>   </table><br />   <xsl:call-template name="footer" />  </body>  </html> </xsl:template> </xsl:stylesheet> 「note.xsl」(top.xslにおけるxsl:importをコメントアウトしても結果は変わらなかったため,記載省略。)

    • 締切済み
    • XML
  • xmlから吐き出したhtmlデータのソースインデントがきかない

    xmlとxsltを使って、htmlを吐き出しているのですが、 <xsl:output indent="yes"/> indent="yes"を入れてもindentされません。 xsltは下記になります。 <?xml version="1.0" encoding="shift_jis"?> <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> <xsl:param name="id" /> <xsl:output method="xml" standalone="yes" encoding="Shift_JIS" omit-xml-declaration="yes" doctype-public="-//W3C//DTD XHTML 1.0 Transitional//EN" doctype-system="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" indent="yes" /> <xsl:template match="/"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>KDS</title> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis" /> <link rel="stylesheet" href="/css/style.css" type="text/css" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <script type="text/javascript" src="/js/snavi_case.js"><xsl:comment>//</xsl:comment></script> </head> <body> <xsl:apply-templates select="info/group/page[@fileId='pteach' and @fileId = $id]" mode="main"/> </body> </html> </xsl:template> <xsl:template match="info/group/page" mode="main"> <xsl:value-of select="title"/> <table width="539" border="1"> <xsl:apply-templates select="teacher[position() mod 3 = 1]"/> </table> </xsl:template> <xsl:template match="teacher"> <tr> <td><xsl:value-of select="name"/>:<xsl:value-of select="subject"/></td> <td><xsl:value-of select="following-sibling::teacher[1]/name"/>:<xsl:value-of select="following-sibling::teacher[1]/subject"/></td> <td><xsl:value-of select="following-sibling::teacher[2]/name"/>:<xsl:value-of select="following-sibling::teacher[2]/subject"/></td> </tr> </xsl:template> </xsl:stylesheet> ただ、<html>~<body>と</body>~</html>はしっかりとソースがインデントされるのですが、<xsl:apply-templates select="info/group/page[@fileId='pteach' and @fileId = $id]" mode="main"/>で読み込んだところ以降のindentが全くきいていないようです。 こんな感じになります。 <html> <title></title> <body>#ここまではindentは正常 <table><tr><td></td></tr><tr><td></td></tr><tr><td></td></tr><tr><td></td></tr><tr><td></td></tr><tr><td></td></tr><tr><td></td></tr><tr><td></td></tr><tr><td></td></tr><tr><td></td></tr></table> #indentが効いていない! </body> </html> どなたか同じような状況になられた方、 いらっしゃいませんでしょうか。

    • ベストアンサー
    • XML
  • XSLのifがいまいち理解ができなく。

    if文をどうやればいいのかで悩んでしまいに詰まっている状態です。 URLがない場合は何も表示しないにしたいのですが、参考ページを見ても全くわからない状態。 test.xsl <?xml version="1.0" encoding="utf-8"?> <xsl:stylesheet> <xsl:template match="/"> <xsl:apply-templates select="page/message"/> </xsl:template> <xsl:template match="page/message"> <table> <tr> <td>名前</td> <td><xsl:value-of select="name"/></td> </tr> <tr> <td>URL</td> <td><a><xsl:attribute name="href"><xsl:value-of select="@url" /></xsl:attribute><xsl:attribute name="target">_blank</xsl:attribute><xsl:value-of select="@url" /></a></td> </tr> </table> </xsl:template> </xsl:stylesheet> xml <?xml version="1.0" encoding="utf-8"?> <page> <message url="http://yahoo.co.jp"><name>山田太郎</name></message> <message url=""><name>山田花子</name></message> </page>

    • ベストアンサー
    • XML
  • 複数リンクをしたいのですが表示されない

    複数リンクしたいページがあったので色々試みました こちらのサイトを参考にして http://www6.airnet.ne.jp/manyo/xml/index.html Xlinkの単純リンク・拡張リンクを試したのですがリンクが全くされないで、普通に文字が並んでるように表示されました また http://questionbox.jp.msn.com/qa1821124.html こちらのやり方で試みてもリンクされていない状態でした。 XMLの書き方がまずかったのか、別の理由でリンク表示されないのかわかりませんがどうしたら複数リンクができるでしょうか? 大体こんな感じに書きました ↓XML <?xml version="1.0" encoding="Shift_JIS"?> <?xml-stylesheet type="text/xsl" href="anime1.xsl"?> <iti> <sait> <name>世界の発展</name> <gai> <link url="http://***">イギリス</link> <link url="http://***">フランス</link> <link url="http://***">イタリア</link> </gai> </sait> ↓XSL <?xml version="1.0" encoding="Shift_JIS"?> <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> <xsl:template match="/"> <html> <head> <title>テスト</title> </head> <body> <div align="center"> <xsl:apply-templates select="iti" /> </div> </body> </html> </xsl:template> <xsl:template match="iti"> <br /> <br /> <h1>テスト</h1> <xsl:apply-templates select="sait" /> <br /> <br /> </xsl:template> <xsl:template match="sait"> <table border="1" bgcolor="#006fdd" width="700"> <tr> <th><xsl:value-of select="name" /></th> </tr><tr> <td><xsl:value-of select="gai" /></tr> </table> <br /> </xsl:template> <xsl:template match="link" > <a> <xsl:attribute name="href"> <xsl:value-of select="@url" /> </xsl:attribute> <xsl:value-of select="text()" /> </a> </xsl:template> </xsl:stylesheet> どこら辺が間違ってますでしょうか?

    • ベストアンサー
    • XML
  • XMLの実体参照とXSLT

    次のようなXMLファイルをXSLTで処理したいのですが、&baseの部分がうまく表示できません。 どのようにしたら表示できるでしょうか? ■a.xml <?xml version="1.0" encoding="UTF-8"?> <?xml-stylesheet type="text/xsl" href="a.xsl"?> <!DOCTYPE test [ <!ELEMENT name (#PCDATA)> <!ENTITY base SYSTEM "base.xml"> ]> <test> <name>abc</name> &base; </test> ■base.xml <?xml version="1.0" encoding="UTF-8"?> <base>base</base> ■a.xsl <?xml version="1.0" encoding="UTF-8"?> <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> <xsl:output method="xml" encoding="UTF-8" /> <xsl:template match="/"> <xsl:apply-templates select="test" /> <xsl:apply-templates select="base" /> </xsl:template> <xsl:template match="test"> name:<xsl:value-of select="name" /> </xsl:template> <xsl:template match="base"> base:<xsl:value-of select="base" /> </xsl:template> </xsl:stylesheet> □結果 name:abc ※base.xmlの内容を表示できない

    • ベストアンサー
    • XML
  • XML/XSLでテンプレートの適用がうまくいかない

    同じツリーの深さで異なる要素名のノードがあるXMLだと期待通りにテンプレートが適用できない という問題に付き当たっています。 例えば    / +------+ poem  poem のような構成だとmatch=poem、value-of select="text"などで各poemの歌詞を表示させることが できます。 一方、以下の構成で同じ事をやろうとすると各poemの歌詞に加えてyearのnumのValueまで 列挙されてしまいます。poemの中身だけ出すにはどうすればよいでしょうか? 以下に例を書きます。     / +--------------+ list         year +------+      +----+ poem poem    Num Num 例えば以下のURLなどを参照してやっております。 http://www6.airnet.ne.jp/manyo/xml/xslt/step15.html XSLはこんな感じです。 <xsl:template match="/"> <xsl:apply-templates /> </xsl:template> <xsl:template match="poem"> <tr> <td><xsl:value-of select="poet" /></td> <td><xsl:value-of select="yomi" /></td> </tr> <br /> </xsl:template> 手持ちのXMLを変換したく、その勉強のため上記のような構成のXMLを扱う方法を 知りたいと思っています。 よろしくお願いします。

    • 締切済み
    • XML
  • XSLTの記述方法

    お世話になります。 XML+XSLTで開発しております。 XSLTの記述方法でjavascriptの引数にXMLデータを挿入する記述は どうすればよいのでしょうか? すごい初歩的な質問かもしれませんが ご教授よろしくお願いいたします。 <?xml version="1.0" encoding="UTF-8"?> <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> <xsl:template match="/"> <table> <tr> <td > <a href="#" onClick="hogehoge('pram')">hogehoge rink </a> </td> </tr> </table> </xsl:template> </xsl:stylesheet> ↓↓↓↓↓↓こんな感じにしたい↓↓↓↓↓↓ <a href="#" onClick="hogehoge('<xsl:value-of select="$prm_test"/>')">りんく</a>

    • ベストアンサー
    • XML
  • tableを3段組みにしてsortをかけたい

    下記のxsltによってtableを3段組にしています。 <?xml version="1.0" encoding="UTF-8"?> <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> <xsl:template match="/"> <html> <title>test</title> <body> <table border="1"> <xsl:apply-templates select="cate/tea/name[position() mod 3 = 1]"/> </table> </body> </html> </xsl:template> <xsl:template match="cate/tea/name"> <tr> <td><xsl:value-of select="."/></td> <td><xsl:value-of select="following-sibling::name[1]"/></td> <td><xsl:value-of select="following-sibling::name[2]"/></td> </tr> </xsl:template> </xsl:stylesheet> こんな感じの出力です。 <table> <tr> <td>あかぎ</td> <td>さとみ</td> <td>ゆめお</td> </tr> <tr> <td>かさお</td> <td>らの</td> <td>でお</td> </tr> 省略 </table> xmlは下記です。 <cate> <tea> <name>あかぎ</name> <name>さとみ</name> <name>ゆめお</name> <name>かさお</name> <name>らの</name> <name>でお</name> <name>くる</name> <name>もも</name> <name>しょう</name> <name>さめお</name> <name>たさお</name> <name>うらの</name> <name>こでお</name> <name>さくる</name> <name>れもも</name> <name>きょう</name> </tea> </cate> この3段組みをしたまま、 nameを名前順にソートしたいのですが、 うまくいきません。 あかぎ、かさお、くる、といった左の列内だけで、 ソートされてしまい、次にそれぞれの後続の兄弟ノードが、 真ん中の列にでてしまいます。 ちゃんと、xmlデータ順(あかぎ、さとみ、ゆめお、かさお・・・)に3段組みを表現したいのですが、 無理なのでしょうか。 どなたかご協力お願いします。

    • ベストアンサー
    • XML
  • XSL内でJavaScriptを記述し、JavaScript内でXMLデータを取得するには・・・

    大変困っていますのでよろしくお願いします。 XSLのファイル内でJavaScriptを記述し、JavaScriptでxmlの要素を取得操作したいのですが、とり方がわかりません。 ご教授のほどをよろしくお願いします。 ================================================================== sample.xsl ------------------------------------------------------------------ <?xml version="1.0" encoding="Shift_JIS"?> <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> <xsl:template match="/"> <html> <head> <title>XML: 基本サンプル</title> </head> <body> <p align="center">サンプル</p> <xsl:apply-templates select="information/value/applicationinfo" /> </body> </html> </xsl:template> <xsl:template match="value/applicationinfo"> <Script Language = "JavaScript"> <xsl:comment> <![CDATA[ document.write("<xsl:value-of select=\"componentname\" />"); ]]> </xsl:comment> </Script> <table border="1"> <tr> <td><xsl:value-of select="componentname" /></td> </tr> </table> </xsl:template> </xsl:stylesheet> ================================================================== 下のテーブルでは要素を表示することはできます。 このやり方では駄目なのでしょうか?

    • ベストアンサー
    • XML
  • xsl:variable の使用方法

    こんにちは xml,xsl を今日はじめて使う初心者です。 変数を使おうとして下記のようなメッセージが出てしまいます。 >ここではキーワード xsl:variable を使用できません。 どうすればよろしいでしょう? area.xls: <?xml version="1.0" encoding="Shift_JIS"?> <xsl:stylesheet xmlns:xsl="http://www.w3.org/TR/WD-xsl"> <xsl:template match="/"> <html> (中略) </html> </xsl:template> <xsl:template match="変換結果"> <table align="left" border="1" width="1500" cellspacing="0" cellpadding="0"> <tr> (中略) </tr> <tr> (中略) <xsl:comment>合計 </xsl:comment> <th>数量</th> (中略) </tr> <xsl:variable name="coLor" select="white" /> <xsl:for-each select="row" order-by="+column0"> <tr bgcolor="$coLor"> <td width="200" align="right"> <xsl:value-of select="column0" /> </td> (中略) </tr> </xsl:for-each> </table> </xsl:template> </xsl:stylesheet> ************************************************************* area.xml <?xml version="1.0" encoding="Shift_Jis"?> <?xml-stylesheet type="text/xsl" href="area.xsl" ?> <変換結果> <row row-Num='1'><column0>,4536163880211</column0> (中略) </row> </変換結果>

    • ベストアンサー
    • XML