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

今年はまれに見る猛暑となった。この夏、気になったことと言えば、実家の墓参りに行った際に、小さな木に蝉が大量になっていたことだ。なっていたという表現は変だが、まるで実がなるように蝉の抜け殻がぶらさがっていたのである。墓地ということもあり、蝉が羽化できる木が少ない場所であったということもあるだろう。そんなエピソードを思い出させる今回のエキソニモのView-Sourceは、蝉と日本的ノイズの話だ。ゲストは豪華メジャー級の蝉たちで、アートに無関心な人でも名前を知らぬものはいないだろう蝉である。

ヨーロッパから来たエキソニモの友人が、蝉の音を聞いて日本を感じたという話から今回の作品は始まる。ミンミンゼミをMMZと略すのに始まり、今回は蝉の名前をラッパーのような感じで略しているのだ。さすが英語圏。他の略語も推測していくに、ABLZはアブラゼミのことであろうし、TKTKBSはツクツクボウシ、HGRSはヒグラシだ。さて、次に出てきたFOSTEXは何だろうか? 筆者は実はあまり海外の蝉については造詣が深くないため、推測の域で語らせていただくが、フクロオオセミ・ザ・エクストラのことであろう。

そんなエピソードに始まる今回の作品はすごくピュアで素直だ。Web Designing編集部から送られてきたPDFから、作品へのURLがコピー&ペーストで容易に取得できる点もさることながら、アンダーグラウンドなイメージのあるエキソニモが、表に出て、虫取りならぬ音取りをやっている。「お、あそこに蝉が!」と言っているかのような無邪気なショット。エキソニモも夏休みというわけだ。

誌面を眺めてそんな印象を持たれた方は、是非Webブラウザにて確認をして欲しい。まぶしい限りの緑の背景に、蝉の鳴き声や照りつける太陽による多重騒音をテキストにしたらきっとこんな感じだろうという背景、そして音圧の大小をイコライザのように伸縮するウインドウという表現で、うっとおしさは猛暑以外のなにものでもない。この誌面とWebブラウザの差は、テレビで見るブラウン管越しの夏と、現場で体験する真夏日ほどの差がある。

もう一度WebDesigning誌面のほうに戻ってみよう。今回の作品は背景が緑だ。それもかなり明るい。色指定としては「#0AE000」だ。この緑はbodyの背景色に指定している「#JapaneseSummerNoise」がブラウザによって強引に色変換されて出来上がった色である。エキソニモは過去の連載でも様々な強気な色指定を行なってきたので知っている方も多いだろう。さて、今までは強引にされた色指定を紹介するだけにとどまっていたが、幸いにも英語のキーワードがいくつか本文にちりばめられているので遊んでみよう。

まずは、アブラゼミの略語ABLZをやってみよう。bgcolor="#ABLZ"となる。これを楽に試すには、前回紹介したFireBugのようなことをSafariで行なえるWebインスペクタを使うとよいだろう。WebインスペクタはWebブラウザSafariに標準で搭載されている機能で、HTMLやCSSがどうなっているか調べたり、書き換えて実験したりすることができる。普通は開発者が使うタイプのソフトウェアだ。前回はこれを使ってより面白くエキソニモの作品を見る方法を紹介した。Webインスペクタを起動し、要素ボタンを押してソースを表示する。すると、HTMLがばーっと出てくるわけだが、ここでbodyタグ内にあるbgcolorという部分をさがそう。bgcolorには値が既に入っているが、クリックすると編集可能になるのがわかるはずだ。ここに「#ABLZ」と入力する。

すると、背景は真っ赤になるのがわかる。Safariによるアブラゼミらしい色の解釈だ。実際は「#ABLZ」は「#AB0000」としてブラウザに解釈されている。今年の夏は晴れの日の天気予想図が、暑すぎるせいでオレンジの太陽ではなく、どす赤いギラギラした太陽の絵になっていた。そんな予報図を彷彿とさせる色だ。

続いて「TKTKBS」もやってみよう。これは、「#0000B0」と解釈される。ツクツクボウシはブラウザにとって清涼感ただよう青らしい。僕も賛成だ。ポカリスウェットがよく似合う。

今回の作品の見所はなんといっても、base64エンコード(符号化)された画像と、その元ソースによるうっとおしいまでの羅列といえるだろう。base64というのは、『データを64種類の印字可能な英数字のみを用いて、それ以外の文字を扱うことの出来ない通信環境にてマルチバイト文字やバイナリデータを扱うためのエンコード方式』とのことで、『A-Z, a-z, 0-9 までの62文字と、記号2つ (+ , /)、さらにパディング(余った部分を詰める)のための記号として=が用いられる』という方式のテキストフォーマットだ。要するにbase64にすることで、テキスト以外のものもテキストとして扱うことが可能になるという代物である。

例えば今回の作品では、エキソニモの小さな画像がbase64エンコードされてHTML内に盛り込まれている。このエンコードされたテキストを「data:image/gif;base64,」という文字列を先頭につけてimgタグのsrc属性に格納すると、ブラウザによっては、デコード(復号化)されて画像として表示される。

画像を読み込まないのに画像が表示されるとは実に不思議だ。実はこのbase64は、気がつかないところで我々の身の回りで使われている。例えば、普段メールなどで添付ファイルを送る際に用いられる方式もbase64である。また、たまにインターネットに接続していないのに画像が表示されるメールマガジンというのがあるが、これもbase64でエンコードされた画像をHTMLメールに埋め込んでいるのである。問題点は、base64は、ちょっとした画像でも結構な文字数になるという点だ。例えば、1×1ピクセルの透明色のGIFファイルをbase64エンコードしてみよう。


<img src=" data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEHAAEALAAAAAABAAEAAAICTAEAOw=="  width=" 200" 
height=" 200" >

この画像はWebデザイン的にはスペーサーgifと言い、今のようにレイアウトの微調整が行なえなかった昔のWebデザインでは見えないスペーサーとして大活躍をしていた。今回の作品にも使われているブラウザの伸縮も、ちょうどスペーサーgifが大活躍していた頃に流行ったテクニックだ。今年の夏は確かに暑いが、振り返って昔を思い浮かべると夏はもっと暑く、もっとまぶしかったような気がしてくる。そんな思いにさせる作品だった。

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