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

今回も、Web Designing編集部から送られてきたPDFから作品へのURLが取得できない。下に記載したソースの冒頭にJavaScriptの記述があることから、何らかのアクションが存在するサイトと考えられるが、Webでまず見てみないと作品について語ることができない。

< script type="text/javascript" src="mofukuchan.js">< /script>

しかし、ソースコードからURLを取得することが出来なかった。前回は文字化けしているとはいえ、一応サイトのアドレスが載っていたのだが、今回は遂になくなってしまったようだ。作品の表面を見てみると、かわいい文字でURLが掲載されている。

こちらが作品のURLということだろう。しかし困ったことにファイル名は、「★ ☆ ★ ☆ ★ ☆ ★ ☆ ★ ☆ ★ ☆ ★ ☆ ★ ☆ ★ ☆ ★ ☆ ★ ☆ ★ ☆ ★ ☆ ★ ☆ ★ ☆ ★ ☆ ★ ☆ ★ ☆ ★ ☆ ★ ☆ ★ ☆ ★ ☆ ☆ ★ ☆ ★ ☆ ★ ☆ ★ ☆ ★ ☆ ★ ☆.png」というスター性のある名前がつけられており、altタグ的なものやaタグ的なものでリンク情報を取得することが出来ない。仕方なく手打ちでサイトにアクセスした。

誌面上では、URLが下部に、もふくちゃんの写真が中央に掲載され、背後にいろいろな写真が載るという綺麗な構図になっているが、実際Webで閲覧すると前述のような構図にはなかなかなりにくい。というのも、1.8秒ごとに写真の場所が移動するのだ。続いてソースのほうを見てみよう。

ソースは、全ての画像に日本語のファイル名がつけられている。その上、ファイル名がそのままインタビューとして展開されている。つまり、ファイル名と、そのファイル名が示す画像を照らし合わせて見ることで、写真付きのインタビューとして楽しめるというわけだ。またエキソニモ作品の定番とも言えるbodyタグの背景色に取材対象に関係のある英字を入れて偶然に背景色を作るという技法が今回も使われている。

< body onload="susowokarage()" bgcolor="#dearstage">

背景色には"#dearstage"と指定されており、ディアステージというのはもふくちゃんが経営するカフェの名前である。そして、この背景色は偶然にも"#DE00A0"として解釈され、萌え的な色にふさわしいピンクとなっている。

今回の作品は、裏面のソースと表面の写真を照らし合わせながら読み進めていくことで、写真に紐づけられたエピソードを読み進めていくことが出来るという、ある意味では正統派な作品である。だからこそ、別の方法を使って作品を読むということを今回は提案してみたい。

HTMLで展開される作品が特殊であることのひとつに、作品を構成する要素がタグで分けられ、表現と構造を別々に取り出すことが出来るという点がある。まず、Safariでこの作品のページを開いてみよう。すると、めまぐるしく配置が変わる写真が重なるように表示されているはずだ。

続いて、Safariのメニューから[開発]メニューを選び、[スタイルを無効にする]と[JavaScriptを無効にする]を選んでみよう。すると、配置を決めているスタイルシートと、場所を変化させているJavaScriptの効果が無効になる。その結果、写真が重ならず、並んで表示されるようになる。これだけでも随分見やすくなるだろう。

続いてSafariの[開発]メニューから[Webインスペクタを表示]を選択してみよう。画面下部にウインドウのようなものが立ち上がったはずだ。このウインドウの上部にある[要素]をクリックして選択するとHTMLのソースが表示されると思う。あとは、マウスカーソルを読みたいインタビューのimgタグのところに持っていくと、ブラウザの画面でも画像に四角く枠がついて、どの写真を指しているかがひと目でわかるようになる。

こんな風に作品を自分流に分解して楽しむことが出来る点もView-Sourceの面白い点だ。

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