MathML による
数学関連ウェブサイトの作成

寺尾 敦(青山学院大学附置情報科学研究センター)

1.はじめに

ウェブサイトに数学的内容を含めようとしたとき, かつては数式を自由に記述することが困難であった. 数式を適切に表示する機能がブラウザに備えられていなかったため, 数式はたいていビットマップ形式の画像に変換して ブラウザで表示するという方法がとられていた. 現在でも用いられている,Latex 文書から HTML 文書へのコンバータは, この方法を採用している.

ウェブ技術の標準化を進めている W3C(The World Wide Web Consortium)は, ウェブページで数式を表示するために, XML ベースの数式記述言語である MathML を開発した. 1998年4月に MathML 1.0 が, 2001年2月に MathML 2.0 が W3C 勧告として公表されている. 2007年11月時点では MathML 2.0 が最新版(3.0は開発中)であり, 詳細な仕様はW3Cのウェブサイトに掲載されている (http://www.w3.org/TR/MathML2/). W3C ウェブサイトでの MathML のトップページは http://www.w3.org/Math/ である. MathMLを用いることによって,ブラウザでかなり自由な数式表示を行うことができる.

本稿では,MathML を用いて数学関連ウェブサイトを構築するときの, ソースファイルの記述方法を紹介する. ソースファイルのテンプレートを提示するので, これを利用すれば数式を含んだウェブページをすぐに作成することができる. また, 利用価値の高い MathML 関連情報を掲載しているページをいくつか紹介するので, こういった情報を検索する手間が軽減される. 数学関連ウェブサイトを構築しようとしている読者にとって 有益な情報となれば幸いである.

読者は,HTML についてのごく初歩的な知識を持っていると仮定している. これらの言語を用いて 簡単なウェブページを作成することができるという程度の知識である. しかし,これらについてほとんど知識がなくても, 本稿を読んで数式を含んだウェブページを作成しながら 必要な知識を補うことは容易であろう.

2.文書の構造

MathMLを用いたウェブページのソースファイルは, MathML による数式記述を XHTML 文書の中に埋め込んだ形をとる. つまり, MathML による数式記述以外の部分は XHTML 文書を記述すればよいのである.

ソースファイルの拡張子は .xml とする. よく用いられる .html という拡張子を用いると, ブラウザでの表示がうまくいかないことがある.

MathML を含んだ XHTML 文書のテンプレートを表1に示す. このテンプレートは,著者が作成したもので, 以下の URI から入手できる mathml.zip という zip ファイルを解凍すると, mathml というフォルダができる. この中にある mathml_template.xml というファイルがテンプレートである.

このテンプレートで記述されている内容について順に説明する.

表1 MathMLを用いるためのソースファイルのテンプレート
<?xml version="1.0" encoding="Shift_JIS"?>

<!DOCTYPE html
  PUBLIC "-//W3C//DTD XHTML 1.1 plus MathML 2.0//EN"
  "http://www.w3.org/Math/DTD/mathml2/xhtml-math11-f.dtd">

<?xml-stylesheet type="text/xsl"
  href="mathml.xsl の URI をここに書きます"?>

<html xmlns="http://www.w3.org/1999/xhtml"
  xml:lang="ja"
  xmlns:pref="http://www.w3.org/2002/Math/preference"
  pref:renderer="mathplayer-dl">

<head>
  <meta http-equiv="Content-Type"
    content="application/xhtml+xml; charset=Shift_JIS" />
  <title>ここにページのタイトルを書きます</title>
  <meta name="description"
    content="ページの内容について短く記述します" />
  <meta name="keywords"
    content="キーワードを並べます, キーワード1, キーワード2" />
  <base href="基準URIを指定する場合はここで指定します" />
</head>

<body>

<p>
数式の例です.
</p>

<blockquote>
<math xmlns="http://www.w3.org/1998/Math/MathML">
  <msup>
     <mi>x</mi>  <mn>2</mn>
  </msup>
     <mo>+</mo>  <mn>9</mn> <mi>x</mi>
     <mo>=</mo>  <mn>0</mn>
</math>
</blockquote>

</body>

</html>

2.1 xml 宣言

MathML は XML ベースの数式記述言語であるので,文書の最初に

<?xml version="1.0" encoding="Shift_JIS"?>

という XML 宣言を必ず入れる. XML のバージョン情報である version="1.0" は,この宣言での必須属性である. テキストエディタなどでソースを記述するときには, この宣言の前に空白行や空白スペースが存在するとエラーが生じるので, 1行1列目から宣言の記述を始める. バージョン情報に続いて, encoding 属性でエンコードに用いる文字セットを指定する. 日本語の Windows および Macintosh での 標準文字コードセットは シフトJIS なので, これらの環境で作成した XML 文書では encoding="Shift_JIS" と記述する (理想的にはUTF-8で文書作成することが望ましい). encoding 属性で指定された文字コードと, 文書を保存するときに用いる文字コードは一致していなければならない.

2.2 文書型定義の宣言

XML 宣言に続いて文書型定義 (DTD: Document Type Definition)の宣言を行う. 文書型定義は文書構築に使用する枠組みを明示するものである. すなわち,その文書(ここではウェブサイトのソースファイル) がどのような文法にしたがって書かれているかを記述するものである. MathML を含んだ文書は,MathML のための DTD によって, その文法的な妥当性が保証されなければならない. 具体的には,W3C による MathML 2.0 の勧告にしたがって ( http://www.w3.org/TR/MathML2/appendixa.html), 次のように宣言を行う (A.2.3 MathML as a DTD moduleというセクションを見よ).

<!DOCTYPE html
  PUBLIC "-//W3C//DTD XHTML 1.1 plus MathML 2.0//EN"
  "http://www.w3.org/Math/DTD/mathml2/xhtml-math11-f.dtd">

Internet Explorer のバージョンが7になってから, 「XSL スタイル シートを使用した XML 入力は表示できません。」 「無効な UNICODE の文字です。」 というエラーが頻繁に生じるようになった. DTD の読み込みがうまくいかないらしい.この場合, mathml.zip ファイルを解凍してできる mathml という フォルダの中に含まれている xhtml-math11-f.dtd を, XHTML 文書を置くのと同じサーバに置いて, このファイルを文書型宣言中の URI で指定する.たとえば, http://humansci.let.hokudai.ac.jp/m/terao/stat/ というディレクトリの下にこのファイルを置いた場合,

<!DOCTYPE html
  PUBLIC "-//W3C//DTD XHTML 1.1 plus MathML 2.0//EN"
  "http://humansci.let.hokudai.ac.jp/m/terao/stat/xhtml-math11-f.dtd">

というように文書型宣言を行う.この DTD ファイルは http://www.w3.org/Math/DTD/mathml2/xhtml-math11-f.dtd から入手できる. この DTD ファイルについての解説は W3C による MathML 2.0 の勧告の, A.2.3 MathML as a DTD module というセクションを参照のこと.

文書型宣言の内容を簡単に説明しておく.興味がなければ宣言は 「オマジナイ」であると考えて読み飛ばしていただいてよい. 宣言の意味がわからなくても, ソースファイルで「オナジナイ」を正しく書きさえすれば, 数式表現を含んだウェッブページを作成する上で何の問題もない.

DOCTYPE html という部分は, これから HTML の文書型の宣言を始めるということを意味している. html は文書型名である. これは必ず小文字で書く. HTML 文書では文書型名を大文字で表記するが, XHTML では小文字で表記しなければならない.一般に, 文書型名は作成する文書のルート要素の名前と一致していなければならない. MathML を含んだソースは, <html> </html> という2つのタグで囲まれた html 要素をルート要素とし, その下に様々な要素を入れ子で含むツリー構造になっている.

実質の文書型宣言は公的公開識別子(FPI: Formal Public Identifier) とシステム識別子(System Identifier)から構成されている.

-//W3C//DTD XHTML 1.1 plus MathML 2.0//EN

が公的公開識別子,

http://www.w3.org/Math/DTD/mathml2/xhtml-math11-f.dtd

がシステム識別子である.

公的公開識別子の前についている PUBLIC という記述は, 宣言される文書(ここでは DTD)が一般に公開されたものであることを示す. 公的公開識別子は宣言される文書の内容を示しており, ここでは「W3Cによって公開された, XHTML 1.1 と MathML 2.0 のための, 英語(EN)で書かれた DTD である」という意味である.

システム識別子は宣言された文書がどこにあるのかを示す. 具体的には,DTD ファイルの URI を記述する.

2.3 XSLT スタイルシート参照

スタイルシートは ウェブページの視覚的あるいは音声的表現を記述するものである. 一般に,HTML や XHTML 文書は情報の構造と内容を記述するものであり, 情報をどのように表示するかは指示しない. スタイルシートの役割は情報の表現を指定することである.

MathML を含んだ XHTML 文書をブラウザで適切に表示させるためには, W3C が提供している mathml.xsl というスタイルシートを用いる. このスタイルシートは http://www.w3.org/Math/XSL/mathml.xsl から入手できる. スタイルシートを XHTML 文書に関連づけるためには, 以下に示すように,xml-stylesheet という処理指示を記述する. この関連づけの方法は W3C 勧告として1999年1月に公表されたものである ( http://www.w3.org/TR/xml-stylesheet/).

<?xml-stylesheet type="text/xsl"
  href="mathml.xsl の URI をここに書きます"?>

type 属性は参照するスタイルシートが XSLT (eXtensible Stylesheet Language Transformations) スタイルシートであることを示している. XSLT は XML 文書を他の文書形式に変換するための技術である. カスケーディングスタイルシート(Cascading Style Sheet) を用いたことのある読者は, link 要素や style 要素において type="text/css" というタイプ記述を行ったことがあるだろう.

mathml.xsl の URI は http://www.w3.org/Math/XSL/mathml.xsl なので,

<?xml-stylesheet type="text/xsl"
  href="http://www.w3.org/Math/XSL/mathml.xsl"?>

と書けばよいはずなのだが, じつはここにひとつ Internet Explorer 特有の問題がある. Internet Explorer は, 表示する XHTML 文書が置かれているサーバ(正確にはドメイン) 以外の場所にある XSLT スタイルシートを読み込まない ( http://www.w3.org/Math/XSL/ の Microsoft Internet Explorer Security と いうセクションを参照のこと). Internet Explorer でセキュリティの設定を変更すればこれは可能になるが, ウェブサイトの訪問者に対してセキュリティの変更を求めるのは現実的でない. そこで,XHTML 文書を置くのと同じサーバにスタイルシートを置くようにする. 具体的には, http://www.w3.org/Math/XSL/ から,mathml.xsl,pmathml.xsl, ctop.xsl,pmathmlcss.xsl という4つのファイルを入手し, これをサーバに置く. そして,参照先である mathml.xsl の URI を href 属性として指定する. たとえば,筆者が作成している統計解析のウェブサイト(注意:2014年に閉鎖)では,

<?xml-stylesheet type="text/xsl"
  href="http://humansci.let.hokudai.ac.jp/m/terao/stat/mathml.xsl"?>

というように記述している. http://humansci.let.hokudai.ac.jp/m/terao/stat/ というディレクトリの下に, mathml.xsl,pmathml.xsl,ctop.xsl,pmathmlcss.xsl が置かれている.

Windows の Internet Explorer 環境では, W3C のページから xsl ファイルを入手して保存するとき, xsl ファイルへのリンクを右クリックして「対象をファイルに保存」を選ぶと, 拡張子が xml になってしまうことがある.拡張子を xsl に変えて保存する.

2.4 <html> タグの記述

一般に, XHTML 文書では <html> タグの中で 名前空間と言語コードを指定する. 名前空間は要素や属性の名前が何を意味しているのかを決める規格である. XHTML の名前空間を指定することで, この文書で用いられている要素や属性が XHTML のものであることが明示される. XHTML には http://www.w3.org/1999/xhtml という名前空間が与えられているので,これを指定する. 名前空間の指定は xmlns(XML namespace)属性で行う. MathML を含んだ XHTM 文書では,<html> タグを次のように記述する.

<html xmlns="http://www.w3.org/1999/xhtml"
  xml:lang="ja"
  xmlns:pref="http://www.w3.org/2002/Math/preference"
  pref:renderer="mathplayer-dl">

言語コードは xml:lang 属性で指定する.xml:lang="ja" は 言語コードが日本語(ja)であることを意味している. XHTML1.0 までは lang 属性による言語コード指定(lang="ja") をあわせて記述することが多かったが, XHTML1.1 では lang 属性が認められていないため, xml:lang 属性のみで言語コードを指定する.

最後に, MathMLによって記述された数式を表示する方法の優先順位を指定する. これは,ブラウザが数式表示の方法を複数持っている可能性があるため, どの表示方法を優先するかを指定するものである. この指定には renderer という属性を用いる. この属性は XHTML の名前空間に属するものではなく, http://www.w3.org/2002/Math/preference という名前空間に属するものである. そこで,xmlns 属性によってこの名前空間を次のように追加する.

xmlns:pref="http://www.w3.org/2002/Math/preference"

pref は名前空間プレフィックスと呼ばれるもので, 指定される名前空間URIの別名である. これにより,このプレフィックスがついた要素や属性は, 指定された名前空間に属するものと解釈される. ここで指定した名前空間は数式表示方法の優先順位を決めるためのものなので, preference からとった pref という名前空間プレフィックスを用いている. 名前空間を指定したら, renderer 属性によって数式表示の優先順位を決める. renderer属性が取ることのできる値はいくつかある (詳細は http://www.w3.org/Math/XSL/ の Specifying preferences というセクションを参照のこと). ここに挙げた例での pref:renderer="mathplayer-dl" という指定は, 必要に応じて MathPlayer というプラグインのインストールを促す. MathPlayer は Windows の Internet Explorer で数式を表示するのに用いられるプラグインである.

2.5 head 要素の記述

<html> タグの直後には,一般の XHTML 文書と同様に, 文書の様々な特性を定義するための文書ヘッダを記述する. この記述のために,title,meta,link,base など, 様々なヘッダ要素が用意されている.これらの要素は, 次に示すように,<head> タグと </head> タグで囲まれる.

<head>
  <meta http-equiv="Content-Type"
    content="application/xhtml+xml; charset=Shift_JIS" />
  <title>ここにページのタイトルを書きます</title>
  <meta name="description"
    content="ページの内容について短く記述します" />
  <meta name="keywords"
    content="キーワードを並べます, キーワード1, キーワード2" />
  <base href="基準URIを指定する場合はここで指定します" />
</head>

以下に,文書ヘッダの記述について簡単に内容を説明する.

最初に MIME(Multipurpose Internet Mail Extension) タイプの指定を行う. MIME タイプは, サーバから提供されるファイルのタイプをブラウザが識別するために用いられる. XHTML 文書での MIME タイプは,2002年8月の W3C 註釈 ( http://www.w3.org/TR/xhtml-media-types/) において,application/xhtml+xml が推奨されている. MIME タイプを指定するには, 文書についての付加的情報を提供するために用意された meta 要素を用いる. meta 要素では,name 属性と content 属性, あるいは,http-equiv 属性と content 属性という組み合わせによって, 様々なメタデータ(文書というデータについてのデータ) を記述することができる. http-equiv 属性および name 属性は 提示する情報につけられる名前(ラベル)を, content 属性は情報の内容を指定する. MIME タイプを指定するためには, http-equiv 属性に Content-Type という名前を指定し, content 属性に application/xhtml+xml; charset=Shift_JIS という値を指定する. charset=Shift_JIS という記述は 文書がどの文字コードで書かれているかを表している. 文字コードは xml 宣言の encoding 属性ですでに指定してあるが, これを正しく認識しないブラウザでは文字化けを起こすことがあるため, ここでも指定しておく.

title 属性は文書のタイトルを指定する.多くのブラウザでは, ここに記述された内容はブラウザのタイトルバー(最上段)に表示される.

meta 要素によって提供されるメタデータとして有用なものに, XHTML 文書の内容についての説明とキーワードがある. 文書内容の説明では,name 属性の値を description とし, content 属性に文書内容の簡潔な説明を記述する. タイトルに若干の補足情報を加えた程度の長さで記述するのが一般的である. キーワードを指定するには, name 属性の値を keywords とし, content 属性にコンマで区切ってキーワードを並べる.

2.6 ブラウザで表示する内容の記述

ブラウザで実際に表示される文書は body 要素の範囲内で記述する. 具体的には, 表示する内容を <body> </body> という2つのタグで囲む. </body> タグの後に </html> タグを入れることを忘れないようにする.

3.数式の書き方

MathML による数式の記述は XHTML 文書に埋め込まれる. MathML による数式記述を開始したい場所に

<math xmlns="http://www.w3.org/1998/Math/MathML">

というタグを挿入し,数式記述の終わりにこのタグを

</math>

で閉じる.すべての <math> タグには, xmlns="http://www.w3.org/1998/Math/MathML" という名前空間の宣言がつけられる. 名前空間を用いてXMLアプリケーションを埋め込むという方法をとることで, 将来どのような XML アプリケーションが登場しても, XHTML および XML そのものは仕様変更を行う必要がなくなっている.

数式の具体的な記述法については http://www.w3.org/TR/MathML2/ に詳細な仕様が掲載されているが, これを読むのはかなり大変である. ウェブで公開されている実例を探してまねをする方が現実的だろう. たとえば, 福井工業高等専門学校の辻野和彦氏による 「 MathML Tips集」に多くの実例が集められているので, これを利用すれば相当にいろいろな数式を書くことができる. 筆者が作成している統計解析のウェブサイト (注意:2014年に閉鎖)では多くの数式を用いているので, ソースファイルを表示させればそれらの数式を MathML でどのように 記述しているかがわかる. 和志武功久氏による 「MathML日本語情報」 というページには, ウェブに散在する MathML 情報へのリンクが多く張られている. MathML を活用して充実した数学的内容を発信しているウェブサイトに, 「数学ナビゲータ」や 「KIT数学ナビゲーション」 などがある.

エディタなどで MathML コードを直接に書くことがわずらわしければ, 数式の入力を受け付け,かつ, それを MathML のコードに変換できるソフトウェアを使うことができる. このようなことが可能なソフトウェアとして, MathType Mathematica Infty エディタ(フリーウェア), Formulator MathML Weaver(フリーウェア) などがある.MathMLのコードは, 数式が少し複雑になると非常に長くなるので, この方が現実的な手段かもしれない.

4.読者へのブラウザ準備情報

ここまでに述べた方法に従えば, 数式を含んだウェブページのソースファイルを書くことができる. しかしながら, これだけではブラウザに数式を正しく表示させることができない. プラグインをインストールするとか, フォントをインストールするといった, ブラウザ側の準備が必要である. この作業を行うことができるのはウェブサイトの訪問者しかいない. よって,ウェブサイトの構築者は,訪問者に対して, そのウェブサイトが MathML による数式記述を行っていることを伝え, 数式をブラウザに正しく表示させるために必要な作業の情報を 提供しなければならない. プラグインのインストールやフォントの追加によって MathML に対応できるようになるブラウザの一覧は http://www.w3.org/Math/XSL/ に示されている.

現在のページが MathML を用いていることと, ブラウザを MathML に対応させる必要があるということの通知は, そのページを最初に表示したときに訪問者の目に入るようにするべきである. 筆者の作成している統計解析のウェブサイト(注意:2014年に閉鎖)では, 図1に示すように,MathML による数式を記述しているページの最初に, ブラウザを準備するための情報へのリンクを張っている.

MathML を使用していることの通知
図1 ブラウザの準備を促す注意書き

5.まとめ

MathML を用いて数学関連ウェブサイトを構築するときの, ソースファイルの記述方法を紹介してきた. MathML はまだそれほど広く普及していないが, 今後は数学関連ウェブサイトを構築する際に標準となるだろう. 本稿で提示したテンプレートを用いれば, 数式を含んだウェブページを作成できる. 数学的な内容をウェブで広く発信していただきたい.

参考文献

  1. 神崎正英:ユニバーサルHTML/XHTML.毎日コミュニケーションズ,2000
  2. 益子貴寛:Web標準の教科書.秀和システム,2005
  3. Musciano, C., & Kennedy, B.(著)原隆文(訳): HTML & XHTML 第5版.オライリージャパン,2003

謝辞:北海道大学大学院文学研究科 「魅力ある大学院教育イニシアティブ: 人間の統合的理解のための教育的拠点」プログラムの武田知明さん, 北海道大学大学院教育学研究科の宇野英樹さんには, 草稿へのコメントをいただきました. MathML のコードを出力する Infty エディタについての情報は, 西山寿延先生から教えていただきました.