こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

締切り済みの質問

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はこういう風に記述するんだよ、と簡単に教えて頂ける優しい方もいたら回答お願いします。サイトだけでは悪戦苦闘しそうなもので…。物凄い不安です。

投稿日時 - 2011-02-06 01:30:28

QNo.6501243

すぐに回答ほしいです

このQ&Aは役に立ちましたか?

3人が「このQ&Aが役に立った」と投票しています

回答(3)

ANo.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 )
ここにとても良いマニュアルがあります。
構造化とは何かからはじめるべし!!

投稿日時 - 2011-06-30 22:43:27

ANo.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

投稿日時 - 2011-04-14 08:41:15

まず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 変換を先に完成させた方が良いですね。

投稿日時 - 2011-02-06 02:58:12