日記
HTML 5 でマークアップだけしたい人向け XSLT
HTML 5 で新しく登場する要素を使ってマークアップし、CSS を使って視覚的にも調整したい場合、HTML 5 の新要素は古い IE や Firefox でうまく解析されず、うまく CSS を適用することができません。そこで、HTML 5 を HTML 4 に変換するための XSLT を書いてみました。
HTML 5 は XML として書くこともできるので XSLT を適用することができます。ただし、text/html のような手軽さはなくなってしまいます。でも勉強好きでどうしても HTML 5 で書いてみたい人には XML でも問題ないのかな。
マークアップ自体は HTML 5 で行うことができるので、元のソースは HTML 5 です。
視覚的な UA で出力されるときには HTML 4 変換されます。HTML 5 の新要素は class 属性値に元の要素名を追加した状態の div や span に置き換えられます。例えば、
<section class="sample">
<h1>heading</h1>
<p>paragraph</p>
</section>は
<div class="section sample">
<h1>heading</h1>
<p>paragraph</p>
</div>に置き換えられます。
HTML 5 の新要素を解析できない UA は、HTML 5 の新要素に対してセマンティックな解析をすることがないだろうと思うので、div に変換されて解析されても問題ないはずです…たぶん。
HTML 5 を HTML 4 に変換したい場合はこの XSLT のソースを改変するなどして使っていただいてかまいません。ただし、保証しません。参考用にという感じで。
よく使いそうな要素に関しては対応していますが、めんどくさそうな箇所には対応していません。例えば、datalist 要素や dialog 要素の変換などです。
SwapSkills というセミナーで公演をしてきました
講演をしてきました。マイクを使用できなかったのもあるのですが 1 時間話しただけなのに喉が痛いです。慣れてないんですね…。機会があったらもっといろんな場で話したいです !!
自分 : 複合文書関連
複数の XML の語彙を混在させる方法の解説を。XHTML を含む XML について理解を深めていたけたらなぁという感じのねらいで行いました。
あまり実用的じゃない内容でしたが、名前空間の宣言追加と接頭辞をつけようという感じで解説をしました。
あと、西畑さんにもいらしていただいていて「HTML (text/html) には混ぜれないのですか」といった質問がありました。混ぜれないんですと答えてしまいましたが、object や iframe を使えば SVG などを埋め込むことはできます !!
小林さん : 『はじめての XSLT』
XSLT の基本的な部分の解説と、実用例の紹介がありました。特になるほどと思ったのは Dreamweaver の吐く XML を利用する方法。
- Dreamweaver の『検索および置換』機能を使い、検索文字列として『<title>』を指定し、検索する
- 検索結果を『レポートの保存』から保存すると、次のような XML 形式で保存される (ファイル名は ResultsReport.xml)
<?xml version="1.0" standalone="yes" ?>
<mm_report>
<mm_reportname> ResultsReport.xml</mm_reportname>
<mm_reportdate>04/06/09 10:25:39</mm_reportdate>
<mm_reportlocation>C:\\***\***\</mm_reportlocation>
<mm_reportitem>
<mm_file>index.html</mm_file>
<mm_displaystr><![CDATA[ <title>タイトル1 | ***のサイト</title> ]]></mm_displaystr>
<mm_data mm_rangemin="405" mm_rangemax="412" mm_filename="C:\Documents and Settings\***\***\htdocs\index.html" mm_replaced="false" mm_matchedtextdirty="false" />
</mm_reportitem>
<mm_reportitem>
<mm_file>dir1/page1.html</mm_file>
<mm_displaystr><![CDATA[ <title>タイトル2 | ***のサイト</title> ]]></mm_displaystr>
<mm_data mm_rangemin="405" mm_rangemax="412" mm_filename="C:\Documents and Settings\***\***\htdocs\dir1\page1.html" mm_replaced="false" mm_matchedtextdirty="false" />
</mm_reportitem>
</mm_report>mm_file にはページのパスが、mm_displaystr には検索した文字列がそれぞれ値として入っています。これを XSLT で変換すれば、簡易サイトマップが作れるという内容でした。
なるほどー。確かに !! おもしろそうだったので自分でも書いてみました !!
<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
xmlns="http://www.w3.org/1999/xhtml">
<xsl:output
method="xml"
omit-xml-declaration="no"
version="1.0"
doctype-public="-//W3C//DTD XHTML 1.1//EN"
doctype-system="http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"
indent="yes"
media-type="application/xhtml+xml"/>
<xsl:template match="/">
<html>
<head>
<title>簡易サイトマップ</title>
</head>
<body>
<table>
<thead>
<th>タイトル</th>
<th>パス</th>
</thead>
<tbody>
<xsl:apply-templates select="mm_report/mm_reportitem" />
</tbody>
</table>
</body>
</html>
</xsl:template>
<xsl:template match="mm_reportitem">
<tr>
<td>
<a>
<xsl:attribute name="href">
<xsl:value-of select="mm_file" />
</xsl:attribute>
<xsl:value-of select="mm_displaystr" />
</a>
</td>
<td>
<xsl:value-of select="mm_file" />
</td>
</tr>
</xsl:template>
</xsl:stylesheet>こんな感じの XSLT を使えば、Dreamweaver が吐き出した ResultsReport.xml を HTML に変換できるわけですねー。
菊池さん : CSS 3 関連
Webkit に先行実装されている CSS 3 についての話題で、border-radius とか transition/transform とか nth-child とか Math とかを使った demo の紹介がありました。一部をメモ。
- nth-child(n)
- n 番目の子要素。nth-child(2n), nth-child(-n+1), nth-child(odd) など。
- CSS Math
- p { width : calc(100% – 50px)}
終了後、菊池さんに「Safari の先行実装の勢いは昔の IE 4 vs Netscape 4 のようなお祭りを思い出すのですがどうなんですか ? そのうち過去の遺物になりそうな…。」と質問しました。回答は「IE 4 の頃は標準も何もなく実装されてきた。Webkit の場合は標準を崩していないのでそこが違うよね」とのこと。確かにそうかも。でも今の段階では個人的に実験する程度にとどめていくのが安全かなぁ。積極的に実装されることはいいことだしそっと見守っていく感じでいこうかなぁと思います。