HTML と CSS はただの言語というよりも、それぞれがひとつのアーキテクチャだと思う。
それは必ずしも現在のような平面的な UI を形づくるためにあるのではなく、短時間の学習で、機械可読性を確保した構造化データを作成するための手段と考えるべきじゃあないだろうか。
つまり HTML も CSS も、それを解釈する機械によって、いかようにも進化が可能になる。
例えば HTML5 ではベクターデータや音声、動画などをどう表現するのかをマークアップ可能になった。他にも将来的には 3D や、ホログラフィ、臭い、味なども表現できるようになるかもしれない。
さて、だからといって HTML のタグをいたずらに増やしていくのは危険だし、せっかくシンプルで学習の容易な言語をなにも重厚長大で複雑なものに変えるのは望ましくないと考えられている。
あくまでそれらの変化を担うのは XML になる。
XML の名前空間を利用して、用途の違う別の語彙を衝突させることなく HTML 文書に混在させる。
それによって HTML 自体は文書構造をマークアップするというシンプルな語彙に止め、その他の多様な表現が可能になる。
ではそれは具体的にどうなるのか、それをちょっと考えてみたいなって思ったので、今回はこんなタイトルを選んでみた。
HTML CSS を使った演劇の表現を考えてみる
XML にはタイミングとレイアウトを要する文字情報を表現するための Timed Text Markup Language (TTML) という語彙がある。
これは現在では主に字幕等の用途を想定されているけれど、アプリケーションによっては、このマークアップ言語をベースにした音声のみの演劇や、その他にも歌の表現なども可能になるはず。
では TTML の基本構造はどんなものだろう。
<?xml version="1.0" encoding="UTF-8"?>
<tt xml:lang="ja" xmlns="http://www.w3.org/ns/ttml"
xmlns:tts="http://www.w3.org/ns/ttml#styling">
<layout>
<style id="1" tts:textAlign="left"/>
</layout>
<body>
<p begin="00:00:00.00" end="00:00:08.00">ごめんなさい。ところで、雲って親切なの？</p>
</body>
</tt>
ルート要素は <tt> で tts は文字のレイアウトを指定するらしい。
タイミングを指定する文字は <p> 要素の中に記述し begin 属性で開始時間 end 属性で終了時間を指定するっぽい。
きちんと仕様を読んだわけではないので、詳しくは Timed Text Markup Language (TTML) 1.0 W3C Recommendation 参照で。
ちなみに今回はレイアウトは関係ないので使わない。
まず、台詞には感情が必要なので、それを表現する CSS のプロパティを仮につくってみる。
そして、感情を指定するために各要素に class 属性を割り当ててみる。
それでは、感情に必要なプロパティにはどんなものがあるだろう。
| プロパティ | 意味 | 値（意味） |
|---|---|---|
| sex | 性別 |
|
| age | 年代 |
|
| emotion | 喜怒哀楽 |
|
| volume | 声の大きさ | 数値指定 単位は dB （デシベル） |
| intonation | 抑揚 |
|
ってこんなもんかな。
では、こいつを基にして、具体的にコーディングしてみよう。
HTML
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML+RDFa 1.0//EN"
"http://www.w3.org/MarkUp/DTD/xhtml-rdfa-1.dtd">
<html version="XHTML+RDFa 1.0" xml:lang="ja"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:tt="http://www.w3.org/ns/ttml">
<head>
<title>HTML CSS を使った演劇の表現</title>
<link rel="stylesheet" type="text/css" href="emotion.css" media="voice" />
</head>
<body>
<h1>ムーミンパパの思い出</h1>
<tt:p tt:begin="00:00:00.00" tt:end="00:00:10.00" class="person-0 fun">どこに。あのひとは塔の中に住んでいるの？</p>
<tt:p tt:begin="00:11:00.00" tt:end="00:00:15.00" class="person-1 angry">ありゃあいつの足だよ。黙っておいで。いま、ぼくがどなってみるからな。</p>
<tt:p tt:begin="00:16:00.00" tt:end="00:00:20.00" class="person-1 clear">おうい、エドワードくん、上にいるんだね。下にいるのはフレドリクソンだよ。今日はどこで水浴びするんだい？</p>
<tt:p tt:begin="00:23:00.00" tt:end="00:00:25.00" class="person-2 unclear">海だよ、いつものようにな、しらみくん。</p>
</body>
</html>
CSS
.person-0{
sex:woman;
age:younger;
volume:50db;
}
.person-1{
sex:man;
age:yong;
volume:60db;
}
.person-2{
sex:man;
age:middle;
volume:40db;
}
.fun{
intonation:clear;
emotion:fun;
}
.angry{
volume:60db;
intonation:shake;
emotion:angry;
}
.clear{
volume:90db;
intonation:clear;
emotion:normal;
}
.unclear{
intonation:unclear;
emotion:fun;
}
さあ、頭の中で HTML と CSS を合成してみよう。なにせ他に実現する手段は今のところない。
まあこんな感じで HTML の XML による拡張とアプリケーションの解釈によって、今までできなかったことがいろいろできるようになると楽しそうだな。と。
もし、ほんとうにこんなことができるようになれば、たったひとりでレコーダーもスピーカーもなしに Web でドラマを公開できるようになる。
そんなこんなで
こんな感じで拡張が進んでいけば、またブラウザ毎の互換性の問題もでてくる。
けどどうだろう、互換性を確保すべきところと、新しい機能の実験とのバランスが大事で、ブラウザがみんな右に倣えになってしまい、今後も今と同じものであり続けては意味が無い。
HTML5 によって、ブラウザは過去とは違う別物になる可能性を垣間見せてくれたし、今後はもっと多様な変化を遂げていくと思う。なにか思いもよらないものになっていく。将来的には WHAT WG を母体としたもっと別の目的をもった団体もできるかもしれない。ぼくには未だ、漠然としか想像できないけれど。