名前
説明
暗黙のマークアップ処理
マークアップコードを構造化する
整形
独自のHTMLタグを定義する
上級向け機能
- LESSON: テンプレートを使う
- LESSON: 多言語ページを作成する
付記
関連項目

名前 WML Turorial - ステップ方式でWMLを理解する

説明

このチュートリアルは、WMLの機能について小さなレッスンに区切って説明してゆく。それぞれのレッスンでは、WMLの特定の事項や機能について教える。レッスンは易しく平凡な事から、難しく複雑な事まで順番に並んでいる。

暗黙のマークアップ処理

LESSON: 生データの処理

Input:

 1| foo
 2| <bar>
 3| quux

Output:

 1| foo
 2| <bar>
 3| quux

これは、シンボル foo も quux も、HTML タグ <bar> として定義されてなかった時の標準の動作である。そして、不必要な空白文字がこの例には無いので、入力がなんであっても取り除かれない。

LESSON: マークアップコードを保存する

時々、いくつかのマークアップコードやページの内容が、WML と重複するタグ名等と衝突することがある。以下では、WML インタプリタが、実際には解釈しないでほしいものを解釈する。

Input:

 1| foo: foo.c
 2|    $(CC) -o foo foo.c

Output:

 1| foo: foo.c
 2|     -o foo foo.c

これは、IPP が make に似た変数補完の文法を使うため、`$(CC)' が空白に展開されるためである。無効にするには、重要な部分を WML 内部の <protect>コンテナタグで囲む。

Input:

 1| foo: foo.c
 2|    <protect>$(CC)</protect> -o foo foo.c

Output:

 1| foo: foo.c
 2|    $(CC) -o foo foo.c

LESSON: マークアップコードを切り詰める

さて、不必要な空白を削る例題に挑戦してみよう。気をつけなければいけないのは、'不必要な'という意味は、ブラウザをの中で Webpage が表示される結果が、元と同じようになる限り切り詰めるという事である。

Input:

 1| <body>
 2| 
 3| <img src = "file.gif"    alt="  test  " >
 4| <pre>
 5|
 6|     Preformatted          Text  
 7| </pre>
 8|     Not    Preformatted   Text
 9| </body>

Output:

 1| <body>
 2| <img src="file.gif" alt=" test ">
 4| <pre>
 5|
 6|     Preformatted          Text  
 7| </pre>
 8|     Not Preformatted Text
 9| </body>

二行目が HTML においてなんの意味も無い空行なので、完全に削除される。 src 属性とその値の間の空白も削除される。そして、全ての二つ以上の空白は一つの空白文字に置き換えられる。しかし、整形済の範囲ではそうならない。

LESSON: マークアップコードを整える

さて、500x400ピクセルの大きさの GIF イメージ image.gif ファイルを、ページにはりつけるとする。

 1| <body>
 2| <center>
 3| <font color=336699>Headline:</font><br>
 4| <img src="image.gif">
 5| </center>
 6| </body>

これは正しい HTML コードだが、WML はよりポータブルに、ブラウザの表示速度を速く、そして Lynx ユーザが幸福になるように、よりよく整形することができる。そう、WML は <img> タグを認識すると、自動的にかけている情報を追加し、すたれたタグを最新の種類に置き換える。

 1| <body>
 2| <div align=center>
 3| <font color="#336699">Headline:</font><br>
 4| <img src="image.gif" alt="" width="500" height="400">
 5| </div>
 6| </body>

見ての通り、WML はまず <center> タグを HTML 3.2 の <div align=center> に置き換える。次に、<font> の color 属性を修正する。そして、欠けている alt と width/height 属性を追加する。

マークアップコードを構造化する

LESSON: インクルードファイルを使う

WML の最も便利な機能の一つは、よく使うものをインクルードファイルにし、後から選択的に導入できることである。

bar.wml というインクルードファイルを持っているとする...

 1| bar
 2| The value of bar is: $(bar:-unknown)

...そして、次にファイルを挿入する:

 1| foo
 3| #include 'bar.wml' bar="FooBar"
 2| #include 'bar.wml'
 5| quux

すると出力は:

 1| foo
 2| bar
 3| The value of bar is: Foobar
 4| bar
 5| The value of bar is: unknown
 6| quux

見ての通り、#include が対応したファイルの内容に置き換えられる。そして、このインクルードされたコンテンツ内の変数に標準の値が定義されていれば、含まれた変数に手を加えることができる。

この変数を使うことで、単純な if-then-else 構文が実現できる:

  1| The value of bar is $(bar:+set)$(bar:*unset).

この `$(bar:+set)$(bar:*unset)' は以下の構造と同じである。

  if (isdefined(bar))
      expandto("set")
  else 
      expandto("unset")

LESSON: 行の連結

例え HTML が普通空白と改行をきにしないとはいえ、実際に一行でなければならない場合、整形済の領域を作ったりコードを複数行に拡張する機能無しで、自分自身のタグ(後で説明)を書くのは非常に困難である。このために、多くの言語では行連結/継続文字として `\' を使う。WML もそうである。

Input:

 1| foo\
 2|    bar \
 3| quux

Output:

 1| foobar quux

行の連結は、連結開始から空白の終りまで、空白を保存せずに取り去る。つまり、実際の空白として連結文字の前の空白文字を使えるが、連結の後の空白を実際の空白として使うことはできない。

LESSON: 位置への転用

WMLの最も強力な機能の一つは、定義された位置に、データを転用する能力である。

Input:

 1| {#BAR#:this is:##}
 2| foo
 3| {#BAR#}
 4| quux
 5| {#BAR#: bar:##}
 6| foobar
 7| {#BAR#}

Output:

 1| foo
 2| this is bar
 3| quux
 4| foobar
 5| this is bar

3行目にある BAR は1行目と5行目の内容が転用されて表示される。そして、見てのとおり、どんな場所からでも、何度でも転用できる。以降の設定(1と5行目)により、内容を累積することができる。これは、最初にWMLが全ての内容を累積し、それからすべての場所で転用するためだ。

wml::std::tags の高水準のタグと一緒に使う事で、より人が読みやすい方法で、例を書けた:

 1| #use wml::std::tags
 2| <divert BAR>this is</divert>
 3| foo
 4| <dump BAR>
 5| quux
 6| <divert BAR> bar</divert>
 7| foobar
 8| <dump BAR>

LESSON: 分割出力の定義

時々、人は複数の出力ファイルを必要とする。通常、コンテンツの90%が同じものであるけれども、人は10%の残りを選択する必要がある。WML のアプローチは、異なる出力ファイルをつくるために後で使う スライス を定義することにより違う部分を切離すことにより、10%をファイルの中に直接分割書き込む方法である。

 1| <html>
 2| <head>
 3| <title>[EN:Titleline:][DE:Titelzeile:]</title>
 4| </head>
 5| <body>
 6| <h1>[EN:Headerline:][DE:Ueberschrift:]</h1>
 7| </body>
 8| </html>

上記のページが、ファイル index.wml とコマンドであると仮定すると

 $ wml -o UNDEF+EN:index.html.en \
       -o UNDEF+DE:index.html.de index.wml

`EN'で定義されたスライスと、それ以外の共通の領域を含む、出力ファイル index.html.enを生成する...

 1| <html>
 2| <head>
 3| <title>Titleline</title>
 4| </head>
 5| <body>
 6| <h1>Headerline</h1>
 7| </body>
 8| </html>

...そして、`EN'で定義されたスライスと、それ以外の共通の領域を含む、出力ファイル index.html.de を出力する。

 1| <html>
 2| <head>
 3| <title>Titelzeile</title>
 4| </head>
 5| <body>
 6| <h1>Ueberschrift</h1>
 7| </body>
 8| </html>

整形

LESSON: 領域の置き換え

WMLは、置き換え機能を提供する。指定した領域に対し、若干のPerlの置き換えや転換の機能を使うことができる。

Input:

 1| foo
 2| {: [[s/foo/bar/g]] [[s/quux/foobar/g]] [[tr/[a-z]/[A-Z]/]]
 3| this is foo and quux.
 4| :}
 5| quux

Output:

 1| foo
 2| THIS IS BAR AND FOOBAR.
 3| quux

これは役にたたないかもしれない。我々はさらにwml::fmt::isolatin と wml::fmt::url の <isolatin> と <url> コンテナタグを使用した例を示す。

Input:

 1| #use wml::fmt::isolatin
 2| #use wml::fmt::url
 3| <isolatin><url>
 4| Some umlauts `�靍吊' and
 5| a hyperlink http://foo.bar.com/
 6| </url></isolatin>

Output:

 1| Some umlauts `&ouml;&auml;&uuml;&Ouml;&Auml;&szlig;' and
 2| a hyperlink <a href="http://foo.bar.com/";>http://foo.bar.com/<;/a>

LESSON: テキストの書式整形

テキストに複数の段落を書き込むようになるとき、HTMLは無視する。 WMLは、他のマークアップ言語プロセッサーを通して、入力の領域を書式整形する素晴らしい方法を提供する。この例では、二つの埋め込まれた領域がある。片方は Plain Old Document (POD) フォーマットで、もう一つは、 Simple Document Format (SDF) フォーマットである。

Input:

  1| #use wml::fmt::pod
  2| #use wml::fmt::sdf
  3| <html>
  4| <pod notypo>
  5| =head1 Headline1
  6| 
  7| Foo
  8| 
  9| =head2 Headline1.1
 10| 
 11| Bar
 12| </pod>
 13| 
 14| <sdf notypo>
 15| H1: Headline1
 16| 
 17| Foo
 18| 
 19| H2: Headline 1.1
 20| 
 21| Bar
 22|   * Baz
 23|     - Foobar
 24|     - Quux 
 25|   * Foo
 26| </sdf>
 27| </html>

Output:

  1| <html>
  2| <P>
  3| <H1><A NAME="Headline1">Headline1
  4| </A></H1>
  5| Foo
  6| <P>
  7| <H2><A NAME="Headline1_1">Headline1.1
  8| </A></H2>
  9| Bar
 10| <P>
 11| <H1><A NAME="Headline1">1. Headline1</A></H1>
 12| <P>Foo</P>
 13| <H2><A NAME="Headline 1.1">1.1. Headline 1.1</A></H2>
 14| <P>Bar</P>
 15| <UL>
 16| <LI>Baz<UL>
 17| <LI>Foobar
 18| <LI>Quux</UL>
 19| <LI>Foo</UL>
 20| </html>

LESSON: テーブルの書式整形

もうひとつ、HTMLの非生産的で醜いコードといえば、<table> 構造である。 WML ではより容易な、二種類のコンテナタグを提供する:

ltgridgt

このコンテナタグの目的は、二次元のグリッド(格子)として、思うがままにテーブルを指定できるようにすることである。グリッドはレイアウトを指定してから、セルの中に内容を書くことによりつくられる。さらに、<grid> コンテナタグは、セルの位置を揃えるための素晴しい機能を提供する。

Input:

  1| #use wml::std::grid
  2| <grid layout=2x3 align=lr valign=tbb border=1>
  3|   <cell>Header 1</cell> <cell>Header 2</cell>
  4|   <cell>Cell-A</cell>   <cell>Cell-B</cell>
  5|   <cell>Cell-C</cell>   <cell>Cell-D</cell>
  6| </grid>

Output:

  1| <table border="1" cellspacing="0" cellpadding="0">
  2|   <tr>
  3|     <td align=left valign=top>Header 1</td>
  4|     <td align=right valign=top>Header 2</td>
  5|   </tr>
  6|   <tr>
  7|     <td align=left valign=bottom>Cell-A</td>
  8|     <td align=right valign=bottom>Cell-B</td>
  9|   </tr>
 10|   <tr>
 11|     <td align=left valign=bottom>Cell-C</td>
 12|     <td align=right valign=bottom>Cell-D</td>
 13|   </tr>
 14| </table>

ltxtablegt

これは、外部プログラムの wml_aux_freetable により拡張された、 <table> コンテナタグである。その目的は、コンパクトな構文でテーブルを指定できるようにすることである。実際に例を見てみよう:

(日本語版注: Debian GNU/Linux では wwwtable パッケージが必要)

Input:

  1| #use wml::fmt::xtable
  2| <xtable border=1>
  3|   (*, 1) align=left
  4|   (*, 2) align=right
  5|   (1, *) valign=top
  6|   (2|3, *) valign=bottom
  7|   (1,1) 
  8|   Header 1 
  9|   (1,2)
 10|   Header 2
 11|   (2,1) 
 12|   Cell-A   
 13|   (2,2)
 14|   Cell-B
 15|   (3,1) 
 16|   Cell-C   
 17|   (3,2) 
 18|   Cell-D
 19| </xtable>

Output:

  1| <table border="1">
  2|   <tr valign=top>
  3|     <td align=left>Header 1</td>
  4|     <td align=right>Header 2</td>
  5|   </tr>
  6|   <tr>
  7|     <td align=left valign=bottom>Cell-A</td>
  8|     <td align=right valign=bottom>Cell-B</td>
  9|   </tr>
 10|   <tr>
 11|     <td align=left valign=bottom>Cell-C</td>
 12|     <td align=right valign=bottom>Cell-D</td>
 13|   </tr>
 14| </table>

独自のHTMLタグを定義する

LESSON: 単純なタグとコンテナタグ

さて。新しい、特製のHTMLタグを定義して、マークアップ言語を拡張する時間である。これには、二種類のHTMLタグがある。

単純なタグ

例として、<me> という私の名前を省略できるタグを定義した。

Input:

 1| <define-tag me>
 2| rse@engelschall.com
 3| </define-tag>
 4|
 5| This is <me>.

Output:

 1| This is rse@engelschall.com.

コンテナタグ

例として、<red>という、かこまれた文字の色を赤にするタグを定義した。

Input:

  1| <define-tag red endtag=required>
  2| <font color="#cc3333">%body</font>
  3| </define-tag>
  4| 
  5| This is <red>very important</red>.

Output:

  1| This is <font color="#cc3333">very important</font>.

LESSON: 属性付きのタグ

属性の無いタグはあまり柔軟ではないので、属性付きのタグを定義してみよう。

Input:

  1| <define-tag me whitespace=delete>
  2| <if   "%0" ""            "rse@engelschall.com">
  3| <ifeq "%0" "engelschall" "rse@engelschall.com">
  4| <ifeq "%0" "netsw"       "rse@netsw.org">
  5| <ifeq "%0" "apache"      "rse@apache.org">
  6| <ifeq "%0" "freebsd"     "rse@freebsd.org">
  7| <ifeq "%0" "sdm"         "rse@sdm.de">
  8| </define-tag>
  9| 
 10| This is <me> and <me apache>.

Output:

   1| This is rse@engelschall.com and rse@apache.org.

name=value という属性を変数としている:

Input:

  2| <define-tag me whitespace=delete>
  3| <preserve at>
  4| <set-var %attributes>
  5| <if   "<get-var at>" ""            "rse@engelschall.com">
  6| <ifeq "<get-var at>" "engelschall" "rse@engelschall.com">
  7| <ifeq "<get-var at>" "netsw"       "rse@netsw.org">
  8| <ifeq "<get-var at>" "apache"      "rse@apache.org">
  9| <ifeq "<get-var at>" "freebsd"     "rse@freebsd.org">
 10| <ifeq "<get-var at>" "sdm"         "rse@sdm.de">
 11| <restore at>
 12| </define-tag>
 13| 
 14| This is <me> and <me at=apache>.

Output:

   1| This is rse@engelschall.com and rse@apache.org.

LESSON: 既にあるHTMLタグを上書きする

WML では、既存のHTMLタグを上書きする事もできる。既存のタグと同じ名前の特製のタグを定義し、その中で元のHTMLタグを使えるのだ。

Input:

   1| <define-tag br whitespace=delete>
   2| <br*><br*>
   4| </define-tag>
   5|
   6| Some Text<br>
   7| Some more Text
    
Output:

   1| Some Text<br><br>
   2| Some more Text

LESSON: Perl でタグをプログラムする

WML の重要な機能の一つに、どのような場所でも、`<:' と `:>' で囲んだ領域に、Perl コードを書けるという事がある。これは、タグを定義と組み合わせることで、Perlでタグをプログラムできるということだ。

Input:

  1| #use wml::std::tags
  2| <define-tag me whitespace=delete>
  3| <preserve at>
  4| <set-var %attributes>
  5| <:{ 
  6|     my $at = qq/<get-var at>/;
  7|     my $addr;
  8|     $addr = "rse@engelschall.org" if $at eq '';
  9|     $addr = "rse@engelschall.org" if $at eq 'engelschall';
 10|     $addr = "rse@netsw.org"       if $at eq 'netsw';
 11|     $addr = "rse@apache.org"      if $at eq 'apache';
 12|     $addr = "rse@freebsd.org"     if $at eq 'freebsd';
 13|     $addr = "rse@sdm.de"          if $at eq 'sdm';
 14|     print $addr;
 15| }:>
 16| <restore at>
 17| </define-tag>
 18| 
 19| This is <me> and <me at=apache>.

Output:

  1| This is rse@engelschall.com and rse@apache.org.

上級向け機能

LESSON: テンプレートを使う

既に、データを他の位置に転用する方法は見た。WML はファイルの終端で、既に開いている転用を自動的に閉じる。我々はテンプレートを作るためにこの機能を使うことができる。例えば、template.wml というテンプレートファイルがあると仮定する。

  1| #   the template itself 
  2| <html>
  3| <head>
  4| <title>{#SUBJECT_LOC#}</title>
  5| </head>
  6| <body>
  7| <h1>{#SUBJECT_LOC#}</h1>
  8| <blockquote>
  9| {#BODY#}
 10| </blockquote>
 11| </body>
 12| </html>
 13| 
 14| #   way to insert the subject
 15| <define-tag subject>
 16| {#SUBJECT_LOC#:%0:##}
 17| </define-tag>
 18| 
 19| #   per default we are in body
 20| {#BODY#:

Input:

  1| #include 'template.wml'
  2| 
  3| <subject "Foo, Bar and Quux">
  4|
  5| This is about Foo, Bar and Quux...

Output:

  1| <html>
  2| <head>
  3| <title>Foo, Bar and Quux</title>
  4| </head>
  5| <body>
  6| <h1>Foo, Bar and Quux</h1>
  7| <blockquote>
  8| This is about Foo, Bar and Quux...
  9| </blockquote>
 10| </body>
 11| </html>

WMLの転用メカニズムがどんなポイントでも転用を行うため、複数のテンプレートを入れ子にすることもできる。

LESSON: 多言語ページを作成する

WML のコアとなる言語は、それぞれ違う人間の言語で同じページ情報を含む場合を除き、一つの入力から複数のページを作るといった、多言語ページを作るための専用の機能を提供しない。しかし、WML は ``スライス処理'' (9番目の処理) を通してこれを提供する。そして、色々な出力ファイルを作ることのできるタグ群を含む、 wml::std::lang というものが存在する。

Let take an example:

  1| #!wml -o (ALL-LANG_*)+LANG_EN:index.en.html \
  2|       -o (ALL-LANG_*)+LANG_DE:index.de.html
  3| 
  4| #use wml::std::page
  5| #use wml::std::lang
  6| 
  7| <lang:new id=en short>
  8| <lang:new id=de short>
  9| 
 10| <page>
 11| 
 12| <h1><en: Welcome><de: Willkommen>!</h1>
 13| 
 14| <a href="<lang:star: index2.*.html>">Index 2</a>
 15| 
 16| <lang:area>
 17| (en)This is a test page
 18| (de)Dies ist eine Testseite
 19| </lang:area>

処理の1番目から8番目 (wml -p1-8) まで行うと、WMLは内部で以下のようなコードを生成する:

  1| <html>
  2| <head>
  3| </head>
  4| <body bgcolor="#ffffff" text="#000000" link="#333399" alink="#9999ff" vlink="#000066">
  5| <h1>[LANG_EN:Welcome:][LANG_DE:Willkommen:]!</h1>
  6| <a href="[LANG_EN:index2.en.html:][LANG_DE:index2.de.html:]">Index 2</a>
  7| [LANG_EN:This is a test page
  8| :][LANG_DE:Dies ist eine Testseite:]
  9| </body>
 10| </html>

そしてその後、9番目の処理で WMLのマジック行である (#!wml -o...) が以下の二つのファイルを生成する:

index.en.html:

  1| <html>
  2| <head>
  3| </head>
  4| <body bgcolor="#ffffff" text="#000000" link="#333399" alink="#9999ff" vlink="#000066">
  5| <h1>Welcome!</h1>
  6| <a href="index2.en.html">Index 2</a>
  7| This is a test page
  8| 
  9| </body>
 10| </html>

index.de.html:

  1| <html>
  2| <head>
  3| </head>
  4| <body bgcolor="#ffffff" text="#000000" link="#333399" alink="#9999ff" vlink="#000066">
  5| <h1>Willkommen!</h1>
  6| <a href="index2.de.html">Index 2</a>
  7| Dies ist eine Testseite
  8| </body>
  9| </html>

そして、これらの2ページは、WEB サーバの言語選択機能あるいは直接参照により提供される。

付記

ここまで、WMLの様々な機能を見たはずである。詳細を知りたいのならば、 wml_intro(7) でのWMLの概略またはそれぞれのコア言語のマニュアルを調べる必要がある。まずは、フロントエンドである wml(1) からはじめよう。

さらに、インクルードされる WML ファイルにより、規格を詳細に知ることもできる。これは最上位のインクルードファイルである wml:all(3) からはじめよう。