『XHTML+SVG+MathMLの技術を知る！ 』 小山田 晃浩　2009/4/5開催SwapSkills * XML複合文書とは * なぜXHTMLでマークアップすべきか？ * XML複合文書の実践例

1. 複合文書を作ってみよう!!
2009年4月5日
小山田晃浩

2. 自己紹介
名前 : 小山田 晃浩
やってること : HTMLコーダー (株式会社メタフェイズ)
Weblogで情報発信 :
http://www.yomotsu.net
たまに雑誌の記事を執筆 :
web creators

3. アジェンダ
1. いろいろなXML規格
2. 複合文書とは / 複合文書の作り方
3. XML な XHTML
4. 時間があまったらおまけdemo

4. XHTML書いていますか?

5. ではXHTMLって
何をするためにあるのでしょう?

6. XHTMLは...
『文書フォーマットを記述するためのXML』

7. XHTML以外のXML規格
XMLの規格はいろいろなものがある

8. XHTML以外のXML規格
SVG (Scalable Vector Graphics)
ベクターグラフィック記述用
MathML (Mathematical Markup Language)
数式記述用
SMIL (Synchronized Multimedia Integration Language)
マルチメディアオブジェクト記述用
RDF (Resource Description Framework)
メタデータ記述用
XUL (XML-based User Interface Language)
ユーザーインターフェイス記述用
XSL/XSLT, XForms, XPath, XPointer, XLink ...

9. [demo]
SVG
[demo1_firefox.svg]

10. [拡大しても劣化しないベクターイメージ]

11. [Ｉｌｌｕｓｔｒａｔｏｒは SVG 形式での保存ができる]

12. [demo]
MathML
[demo2_mathml.xml]

13. [数式を表示した例]

14. [demo]
Firefox につかわれているXUL
chrome://browser/content/browser.xul
chrome://global/content/printdialog.xul
chrome://global/content/alerts/alert.xul
C:Program FilesMozilla Firefoxchrome
にある
browser.jar を解凍すると格納されている

15. [URLバーに「chrome://browser/content/browser.xul」を入力]

16. HTMLがXMLになった理由
HTMLの仕様が大きくなってきたので
XMLにして切り分けることにした

17. XMLは混ぜることができる

18. [色々あると混ぜたくなりますよね!!]

19. [異なるXML規格を複合することができる]

20. XMLは混ぜることができる
これを XML 複合文書
(CDF - Compound Document Format) という
http://www.w3.org/2004/CDF/

21. XMLは混ぜることができる
例えば
XHTML + SVG + MathML
などができる。

22. [demo]
XHTML + SVG + MathML
[demo4_xhtml+mathml+svg.xml]

23. [混ぜ方]

24. XML語彙の混ぜ方
どうやって混ぜるのか?
いくつか混ぜ方はありますが
そのうちの一つを紹介

25. XML語彙の混ぜ方
1. まずはXMLを用意。
今回はXHTMLをベースに。
[demo : 用意したXHTMLのコード]

26. XML語彙の混ぜ方
2. 混ぜる語彙を用意。
今回はSVGを混ぜてみる
[demo : SVG のコード]

27. XML語彙の混ぜ方
3. 名前空間の宣言を追加
[demo : SVG の名前空間の宣言]

28. [Picture Caption]

29. XML語彙の混ぜ方
4. 名前空間に対する接頭辞を
追加した状態のSVG
[demo : 接頭辞付きのSVGの要素]

30. [Picture Caption]

31. XML語彙の混ぜ方
4. 完成!!
[demo : XHTML + SVG]

32. 混ぜ方ポイント
1. XML であること
2. 名前空間を宣言する / 接頭辞をつける
（どの語彙に属す要素なのかを分ける）

33. [XML な XHTML]

34. XML な XHTML
混ぜるときに使った XHTML は
いつも使う XHTML とは少し違う。

35. XML な XHTML
例えば...
well-formed でなければいけない
document.write() が使えない
(多くのブログパーツが使えない)
IE で表示できない

36. [demo]
パースエラー

37. [Picture Caption]

38. [XML が Well-formdでないと解析エラーになる]

39. [demo]
IEで表示できない

40. [ＸＨＴＭＬが表示できない。ＸＨＴＭＬ1.1を使わない理由。]

41. text/html と application/xhtml+xml
XHTML の Content-Type は2種類がある
text/html
application/xhtml+xml

42. [demo]
Live HTTP Headersをつかって確認

43. [Content-Typeを調べることができる]

44. text/html と application/xhtml+xml
皆さんは text/html を採用しているはず...
<meta http-equiv=quot;Content-Typequot; content=quot;
text/html; charset=utf-8quot; />
*実際はmeta要素を変えても意味がなく、サーバの設定を変えな
いといけない

45. text/html と application/xhtml+xml
text/html
HTML として処理される
application/xhtml+xml
XHTML (XML) として処理される

46. text/html と application/xhtml+xml
XHTML 1.0 の仕様ではどちらでも構わないこと
になっているので text/html で書いてもOK。
どうせ XHTML を書くのならいつでも XMLに移行
できるようにしておくべき。
http://standards.mitsue.co.
jp/resources/w3c/TR/xhtml-media-
types/#media-types

47. まとめ
XHTMLは「文章」のためのXML
XMLへの移行を考えてしっかりXHTMLを書く!!

48. まとめ
「XHTMLでお願いします!!」という依頼はプロ
の仕事になるかも
CMSはパースエラーを補って出力してくれる
ようになるかも

49. XML にも興味を持って
妥当な XHTML を書きましょう