xml入門

  1. xmlとは

    1. xmlとは

       xml は extended Markup Language の略で、html の拡張形式です。html は汎用性が高く簡潔な表現形式ですが、数式や図形などの表現機能は備えていません。通常、画像にして貼り付けていますが、これでは、編集が容易ではありません。
       html を拡張すると、ブラウザの負担が重くなります。そこで、html にはないタグを用いて拡張し、その処理機能(プラグイン)をブラウザに追加することで表示を可能にする方法が考えられます。

  2. MathML

     
    1. MathML

      既に定義されている数式記述用のxmlとして、MathML の概略を紹介します。<math>タグは数式の開始です。<mfrac> が分数の開始、<mn>が数値、<mi>は変数、<mo>は演算子を示すタグです。

      <math xmlns="http://www.w3.org/1998/Math/MathML">
        <mfrac>
          <mn>1</mn>
          <mn>2</mn>
        </mfrac>
        <mo>+</mo>
        <mfrac>
          <mn>1</mn>
          <mi>x</mi>
        </mfrac>
        <mo>-</mo>
        <mfrac>
          <mi>x</mi>
          <mn>3</mn>
        </mfrac>
      </math>
      これは以下の分数式を表現します。

    2. べき乗、平方根

       タグを用いて、数式に意味を定義し、タグではさんで数式の要素を記述します。数式を解釈して表示するのは、ブラウザ(プラグイン)の役目です。
       他の例として、平方根の記述例を紹介します。これは、

      を意味します。<msqrt>が平方根、<mrow>は一行の数式、<msup>はべき乗、を意味します。

      <math xmlns="http://www.w3.org/1998/Math/MathML">
        <msqrt>
          <mrow>
            <msup>
              <mi>x</mi>
              <mn>2</mn>
            </msup>
            <mo>+</mo>
            <mn>3</mn>
          </mrow>
        </msqrt>
      </math>

      少し複雑な数式になると、かなり長い表現になり人による解釈は困難になります。MtahML は人が手作業で作成するのでなく、別のツールで作成した式を、ブラウザで表現するための記述形式と考えられます。
       以上の例は http://toshichan.be.fukui-nct.ac.jp/tsujino/mathml/index.htm から参照させていただきました。

  3. SVG


    1. SVGとは

       SVGは scalable Vector Font の略で、Adobe社が提唱している、タグ形式の曲線を含む図形の記述形式です。Adobe社のイラストレータの図形は SVG形式で出力可能で、このフリーで提供されているSVGのビューワーがあれば、web上で図形の表示が可能です。
       画像ではサイズが一定ですが、SVG形式なら拡大してもきれいな表示が可能です。

    2. 記述例

       svg タグで記述開始と表示領域を宣言します。defs タグはシンボルの定義開始を意味します。g タグでシンボルの名前とグラフィックスを宣言します。path は折れ線、ellipse は楕円です。各タグの属性で詳細な図形の形状や色を指定します。
       use はシンボルを実際に使用し、描画を行う指示になります。
      <svg xml:space="default" width="220" height="200">
              <defs>
                      <g id="megaphone">
                              <path d="M 80,100 L 120,80 120,120 Z" fill="red" />
                              <ellipse cx="120" cy="100" rx="5" ry="20" fill="lightgray" />
                      </g>
              </defs>
              <use xlink:href="#megaphone" />
      </svg>