弊社刊行の雑誌「Web Designing」で連載中の「エキソニモのView-Source」は、HTMLのソースとそのレンダリング後の画面をセットで展開するという珍しいアート作品だ。レンダリング後の画面だけを見るとグラフィックデザインのようだが、HTMLソースのほうを見るとインタビュー記事が埋め込まれており、レンダリング後の画面でゲスト自体を、HTMLソースのほうでゲストとエキソニモの関係やバックグラウンドなどを知る事ができるという仕掛けになっている。

前回「BOTへの質問状」、という名の挑戦状が全世界に向けて発信されたが、BOTらしき存在からは問い合わせがなく、結局来たのは人間と思われる存在からの投稿のみであった。Web Designing編集部からは、少しがっかりした様子で報告がきたが、僕は素晴らしい成果だと感じた。もはや西暦2010年。ついにBOTは人間に近い言動を行なうまでに成長したのだ。よくブログなどに勝手コメントを残す低級なBOTばかりが目撃されるWeb上だが、実際は高級なBOTも存在しており、ようやくそれが明るみに出たのである。Web Designing編集部の人も、エキソニモの中の人も、投稿があまりにも人間らしいせいでBOTと気づかなかったのだろう。さて、今回のお題はうって変わって、おだやかな夕暮れに群れて飛ぶ雁の群れ……。

と、思ったらまさかのPANTS!! 空に浮かぶ大量のPANTSだ。よく見ると、羽ばたいているわけではなく、文字が上下していたのだった。おまけに、羽ばたいていると思われていた部分は、「T」と「Y」が交互に表示されていることでそう見えていたのだ。PANTSのTをYにするとPANYS。強引な読み方をすれば放送禁止用語になってしまう。そんな言葉を僕がつぶやいた日には、この連載も休載させられてしまうにちがいない。PANTSとPANYSというけがらわしい単語が空を飛ぶのが今回の作品だ。PANTSとPANYSが交わるところにはKAZUHIKO HACHIYAと書いてある。きっと今回はPANTSとPANYSのことしか頭に無い人へのインタビューなのだろう。

もちろん、八谷和彦氏はそういう人物ではないことはページ下部にあるエピソードを読めばわかる。なんでも100枚以上のパンツを空に解き放ったとのこと。その模様は「なぜ『空飛ぶパンツ』が商品化され『空フェス!』が開催されたのか?」にて見ることができる。空飛ぶパンツが、想像以上に羽ばたいているので、是非見ておこう。

さて、今回のソースについても見てみよう。ソースコードは実にシンプルなものとなっている。はばたく仕組みは、以下のようなソースコードで表現されている。

function 羽ばたけ() {
var hachiya = document.getElementById("hachiya");
hachiya.innerHTML = hachiya.innerHTML.replace(/T/g, "UFO").replace(/Y/g,"T").replace(/UFO/g,"Y");
if (hachiya.children[0].style.top=="0px") {
hachiya.children[0].style.top="2px";
} else {
hachiya.children[0].style.top="0px";
}
}

ここでやっていることは、羽ばたくために上下に動かしている部分と、PANTSをPANYSへ変化させ戻すためにTとYを交互に置き換える部分のふたつで。このTとYの入れ替えは、全てのテキストで行なわれており、ページ下部の本文欄(今回は本文が普通に掲載されていて驚きだ)にあるTやYの部分でも行なわれている。

PANTSの上下の動きはPANTSが書かれている部分の上からの位置を0ピクセルにしたり2ピクセルにすることによって、微妙に上下する動きを作り出している。PANTSからPANYSへの変化は、単にTをYに置き換えたり、YをTに置き換えるだけで出来そうだが、実はそう簡単ではない。というのも、Tを普通にYにしてしまうと、次にYからTにしようと思った場合に元々YだったものもTになってしまい、意味の分からない文になってしまうからだ。

そこで、このソースコード上では、まずTを一旦UFOという文字に変換して、その上でYをTに変換し、その後UFOをYへと変換するという方式を採用している。このUFOというものに一旦変換するあたりがなんともユーモアが効いていて面白い。空にパンツがひらひら飛んでいたら、大抵の人物はパンツだとは思わず、UFOかスーパーのビニール袋かと思うだろう。

また、もうひとつつ見ておきたいソースコードは、スタイルシートの部分だ。

webkit-gradient(linear,left top,left bottom, from(#00ccff), to(#ff6633));

今回Safariでサイトにアクセスすると、背景が青からオレンジへの綺麗なグラデーションになっているのがわかる。これは画像を使って実現しているわけではなく、CSS3というスタイルシートの最新版で使うことができる表現スタイルで実現している。ただし、まだCSS3は仕様が確定しないため、Safariでのみ動作する書き方をしている。上記わけのわからないソースを日本語化すると以下のような具合になる。

スタイル名(直線でのグラデーションの指定, 開始位置, 終了位置, from(開始色), to(終了色));

このような書き方をすることで、グラデーションが実現できる。というのが今回の作品を紐解いてみた結果だ。どうやってこのWebページを実現しているかを知ると、作品もより深く楽しめるようになる。最初の印象シンプルな作品だが、裏では様々な工夫がなされているのだ。

※この記事は、『Web Designing』2010年5月号に掲載された「エキソニモのView-Source」の解説記事です。『Web Designing』本誌とあわせてお楽しみください。