エキソニモをview-source(1) 徳井直生の内と外をHTMLでアートする

弊社刊行の雑誌『Web Designing』が12月号で通巻100号を迎えた。それを記念してWeb Designingでは、アートユニットエキソニモが新連載「エキソニモのView-Source」を開始した。ぱっと見ではわかりづらく、でもなにやらかっこいいこの連載。実はHTMLソースで誌面連載という、まさにアート作品のような記事だ。

その連載との連動記事を書くということになったのだが、誌面ページを見た瞬間、途方に暮れてしまった。これは一体なんだろう? というのが第一印象だった。企画内容としては、エキソニモが毎回インタビューをした結果をHTMLで表現していくというものなのだが。まずは、エキソニモとは何者なのか、知らない人のために紹介しよう。エキソニモとは、千房けん輔と赤岩やえによるアートユニットだ。エキソニモのサイトを見ると、さまざまなメディアアート作品が掲載されている。1996年から、実験的なWeb作品やインスタレーション、自作装置によるライブパフォーマンスなど、ソフトウェア/ハードウェア、デジタル/アナログ、多種メディアを横断した活動を展開している。さらに、"電気で変なことをする"世界的コミュニティ「ドークボット」東京支部の運営など、活動を多方面に拡張し続けている。

Webやギャラリーで活動してきたそんな彼らが、新たに雑誌というメディアで発表した(していく)作品が、この連載「エキソニモのView-Source」だ。

上の写真は、『Web Designing』12月号のP057～058。表ページ(P057)には鮮烈なグラフィックとともに、今回のインタビュー相手である徳井直生という名前が大きく書かれている。徳井直生とは誰なのか、そんな疑問を持ちながら特に情報のない裏ページ(P058)に目をやると、HTMLソースがびっしり。このソースコード内に、連載タイトルや徳井直生へのインタビュー記事、プロフィールなどが載っている。つまり、この連載はインタビュー記事なのである。そしてこのソースコード内の1文ですべてがわかる。なんと、表ページは裏ページのHTMLソースのレンダリング結果であることが明記されているのだ。つまり、この2ページは、インタビュー記事でありながら、HTMLの内面(ソースコード)と外見(レンダリング結果)という2つの側面で構成された記事なのだ。わかるでしょうか? わからない人、そしてこの作品をより楽しみたい人のために、以下に解説していこう。

まず、HTMLソースに目をやると、コメントタグ内に徳井直生のプロフィールが載っているのが発見できる。

HTMLソースでいうところの37行目だ。もう少し見ていくと、エキソニモに関するプロフィールもHTMLのコメントタグ内に発見した。この作品はソースと対で眺める事でいろいろな謎解きが出来そうだ。

とのことで、結構古くからウェブを使ったアート活動をしている。

既にWeb Designing 2009年11月号掲載のエキソニモのWebページを見た方もいると思うが、ぜひ表ページに載っているURLから行く事ができるウェブサイトにも行ってほしい。

確かにWeb Designingに掲載されている表ページはHTMLソースのレンダリング結果であるが、誌面にあるものがこの作品が全てではないのがわかるはずだ。あ、サイトは必ずSafariで見るように。Firefoxとかで見ると完全な状態では見れないので。

サイトにアクセスすると目につくポイントはいくつかあるが、真っ先に飛び込んでくるのは動きではないだろうか。波のようなチルダが左右に動き、おそらくけん玉の玉であろう赤い円が上下に移動している。ソースに書いてあるインタビュー記事は表示されておらず、「けンだまとなみノリ」という文字が表示されているのみである。何か昭和モダンなポスターのようでもあり、清涼飲料水のパッケージのようでもある。

ところで、誌面に掲載されている絵は、レンダリングされたものをどうやって誌面用に印刷したのだろうか? 試しにSafariで印刷しようと頑張ってみたが、中心で赤い玉がなかなか固定できない。これはひょっとしてエキソニモの中の人はえらい苦労して印刷したのではあるまいか? ソースをそのまま出力したものであるとしたらむしろこれをきちんと印刷した事を尊敬したい。皆さんも誌面と同じ絵で出力出来るかどうかゲームと思って試してほしい。このゲームで痛いところは失敗するとインクを大量消費することだが。

さて、HTMLコード自体も見てみよう。皆さんがお察しの通り(?)この動きはmarqueeタグを使って動かされている。marqueeは、HTML4が主流だった時代に個人のホームページを中心に簡易電光掲示板的な用途で使われていたが今はあまり使われていない。おそらく今の主流であるXHTML上で同様の動きを行なうとしたらJavaScriptを使うだろう。ただし、携帯サイトにおいてはmarqueeタグは現役であり、marqueeタグを使ったメッセージは携帯電話上でスムーズな動作をし、実用にたえうるものとなっている。ちょっと脱線したが、とにかくmarqueeタグによってアニメーションが行なわれているということはソースを見ていくとわかる。marqueeの上下移動はそういえばあまり使われている例を知らないのでちょっと驚いた。

次に目につくところといえば所々にあるごちゃっとしたおそらくテキストであろう固まりだ。これはHTMLのテキストなのだが、読まれる事は想定していない。1ptという小さなサイズでレンダリングされているのである。これら通常の文を小さく記述し、ところどころの文字を巨大にすることによってこの作品のタイトルである「けンだまとなみノリ」が浮かびあがってくる仕組みだ。

<div id="ball"><marquee direction="up" behavior="alternate" scrollamount="240" height="2500">●</marquee></div> <div id="surf"><marquee direction="right" behavior="alternate" scrollamount="30" width="100%"height="100%">～～～～～～～～～～<br>～～～～～～～～～～～<br>～～～～～～～～～～～<br>～～～～～～～～～～～<br>～～～～～～～～～～～<br>～～～～～～～～～～～<br>～～～～～～～～～～～<br>～～～～～～～～～～～<br>～～～～～～～～～～～<br>～～～～～～～～～～～</marquee></div> 　　

ソースを見るとidにsurfとついていたり、ballをついていたりとidの名前づけなどにこだわりがあり、ソースを読める人にとっては味わい深い世界が広がっている。

と、ここまでちょっとだけ技術的な解説をしてみたものの、この作品にタグがどうこうと解説を入れるのは野暮な話なのだろう。

このご時世にHTML4のそれもlooseを使用したり、極端に文字を小さくして(文字はCSSを使えば消す事は出来るにもかかわらず)時代遅れなmarqueeタグをぶつけてくるあたり、仕様や流行はあまり意識していないのが、いかにもエキソニモらしい。HTMLを使って徳井直生を表現するとこうなるよ、ということなのだ。

ちょっとルーズで遊びと仕事を行ったり来たりするけど肝心なメッセージは隠さない。徳井直生はそんな人なのかもしれない。