ポップアップウィンドウを考える

広告バナーの表示なんかにも往々にして使われているけど、ここで取り上げたいのは、ヘルプウィンドウ的に使われている…と表現したらいいのか、他人の土俵を使わせて頂くとすれば、鳩丸ご意見番 - 残念な思いを致しました(2)で言われているようなやつ。「別窓」で通じる?

何のために使われているのかといえば、だからつまりヘルプウィンドウというか、補足説明を表示するがために利用されているのではないかと思われる。別窓でなく主窓というべきウィンドウの言葉では舌足らずな時とかにね。

鳩丸ご意見番 - 残念な思いを致しました(2)でも既に言及され済みなので、繰り返しになってしまうところもあるんだが、この別窓を開かすリンクの書き方で、いわゆるjavascriptスキームを利用しているものを超見かけるということ。たとえばこんな感じの。

<script type="text/javascript">
<!--
function openWindow(strFName) {
 wPopup = window.open(strFName,'wPopup','scrollbars=0,width=240,height=400,menubar=0,resizable=1,directories=0,toolbar=0,status=0,location=0');
 wPopup.focus();
}
// -->
</script>
:
:
<p><a href="javascript:openWindow('http://hoge.com/foo.html');">hoge</a></p>

さてこのjavascriptスキームとやらは厄介で、つまりリンク先がリンク先でなくてJavaScriptを実行しようって話に変わってしまっているわけだ。だからJavaScriptが実行できる環境でなければ（さらにjavascriptスキームを解釈できなければ）、この書き方は意味を成さない。書き方としては最悪の部類だと思う。

w3c-wai-igで、とある時、「アクセシブルなポップアップウィンドウにしたいんだがどう書けば良い?」という質問が出た。Bruce（質問者）的には、上のありがちな書き方の例みたく書いたら、Lynxに「そんなのURLじゃねーよ」って怒られたので、Lynxとかその他のJavaScriptが有効でないブラウザでも、JavaScriptが有効なブラウザと同じように、少なくとも正当なURL（たとえばhttp://hoge.com/foo.html）を正しく伝えるにはどうすりゃいいのよ、というわけだ。

まあ、noscript要素の存在を知らない状態で質問してくるBruceもBruceな気もするが、それはさておき、Davidが「script要素とnoscript要素はペアで使うべし」というごもっともな意見を主張した。David的にはこう書くのだそうだ。

function WritePopupHelp( helpFile, linkText ) {
    var s = '<a href="javascript:Help(\'' + helpFile + '\')">' + linkText + '</a>';
    document.write(s);
}
:
:
<script type="text/javascript">WritePopupHelp('foobar.htm', 'Definition of foobar')</script>
<noscript><a href="foobar.htm">Definition of foobar</a></noscript>

まあ多少雑なところもあるが、あくまでsomthing likeなわけだし、この書き方で良いと思う。ただ、僕なら…

<a href="foobar.html" target="_blank" onclick="Help('foobar.html');return false;">Definition of foobar</a>

こんな感じにするだろうということで実際こう書いたわけだが、target="_blank"は要らないだろうという指摘が入った。しかし当時の僕は、target="_blank"をあえて入れることに意義を見出していたのだ。

<a href="foobar.html" target="_blank" onclick="Help('foobar.html');return false;">Definition of foobar</a>

It is done that TARGET attribute is specified this by the reason because the state will be an intention of help and the display of the page as pop up (Or, simultaneously with the body because it is likely to be intended if it is preferable that the help page is displayed) by which the body does not disturb the flow.

Personally, though the act that it tries to examine the composition to become a flow of the site where the help page is not needed will be taken.

ていうか少しでも長くなると途端にまともな文章が書けなくなるため、これは自分で読んでもわからないくらいのテキトー英語。たぶん彼ら（誰）にも通じなかったと思う。ようは、別窓の内容は主窓と並行して読んで欲しいと思っているであろうAuthorの意図或いは意思を汲み取ると、target="_blank"は必要なのではなかろうか、ということを言いたかったわけなのだ。

鳩丸ご意見番 - 残念な思いを致しました(2)では、target="_blank"についての言及までは無いものの、別窓で開くような動作をさせないのが最良だと結論づけられているが、果たしてこの問いかけは妥当なものだろうか。

しかし、そもそも別窓が開くことを避けるために JavaScript をオフにしている人がいるということは、別窓を嫌っている人がたくさんいると言うことです。別窓嫌いな人が別窓に残念な思いをするのは避けられません。

最高にして最良の対策は、そもそも別窓を開くような動作なんかさせない、ということです。

本当に別窓が必要なのでしょうか？　わざわざ別窓を開かずとも、通常のアンカーで十分なのではないかどうか……このページは、Javascript対応のブラウザをご使用くださいなどと書いている暇に、もう一度検討し直してみてはいかがでしょうか。

ヘルプウィンドウとしての別窓だが、後付けのようなヘルプを必要としない、自然な流れのサイト構成が出来ているのならば、確かに必要性は薄くなるかもしれない。しかしそうであっても、常にヘルプを見られるというような状況も、それはそれで良質なものではないかと思うのだ。そして、文意としてのフォーカスがヘルプへ集中してしまうことは、全体の流れを妨げることになりやしないか? 別窓として開けばその妨害としての意味合いは減るのではないだろうか。主従の関係を明示したいという意味も込めて、主窓よりは小さいウィンドウをポップアップさせたいところであるが、しかしそれはJavaScriptが有効でない環境でなければうまくいかない。そのような環境でも主窓を残しつつ補足説明も同時に参照することが出来たら良さげ。…などというAuthorの意図があるのならば、target="_blank"という手段も有るのではないか? というわけだ。

とかいいつつ、実は現在の僕は、target="_blank"は要らないな、などと思っていたりもする。次に書く「閉じるボタン」の存在について考えた結果、現状いたっている結論でもある。

たいがい、ヘルプウィンドウ的別窓には「閉じるボタン（またはjavascriptスキームによるリンク）」というのが付いていたりする。僕はこのボタンにあまり意味を感じないのだが、ともかく付いていることが多い。特に意味が無いと思うのは、別窓の領域内においてそれが右上なんかに付いている時。左上でも同様に思うが、幸い(?)左上に付いているのはあまり見たことがない。たいがい下か右上だ。

下ならば、まだ良い。自然的には上から読むわけだから、読み終わったところで閉じる、そして主窓にフォーカスが戻る、という流れを作るという意図があるのだと推測できる。しかし右上の場合はよくわからない。しかもたとえばユーザーの環境がWindowsだったりすると、その閉じるボタンのすぐ上あたりに、本物の閉じるボタンがある。当然ながら、どっちを押しても同じ挙動。これはユーザーをみだりに混乱させるインターフェースといえないか? つっても閉じるだけだからとりたてて混乱はしないか。とはいえ、右上に閉じるボタンを持ってくるようなデザインをするのは、なんというかMacでページデザインをしてるやつに限られてくる。Windowsのウィンドウを常々見ていれば、右上に閉じるボタンをあえて置くような考えは出て来ないと思うのだ。統計学的根拠には全然ならないが、弊社のデザイナーなどは右上に置きたがる傾向がある。ま、右下も多いけどな。

さて、閉じるボタンの話を踏まえたところで、別窓を開く際の良い書き方というのに話を戻そう。まず別窓を開くリンクのところだが、マシな書き方でtarget="_blank"の無いやつが推奨される。それと、onclick属性はマウスに対するイベントなので、onkeypress属性も書いてマウス以外のデバイスにも対応できるようにする。また、これがポイントのつもりなのだが、id属性（またはname属性）も書く。

<a href="foobar.html" onclick="Help('foobar.html');return false;" onkeypress="Help('foobar.html');return false;" id="piyo">ヘルプ</a>

そして開いた別窓の、閉じるボタンのところ、そこの書き方をこうする。

<script type="text/javascript">
<!--
 document.write '<p><a href="#" onclick="window.close();" onkeypress="window.close();">閉じる<\/a><\/p>';
// -->
</script>
<noscript><p><a href="hogehoge.html#piyo">戻る</a></p></noscript>

JavaScriptが無効なら別窓は開かず、主窓のまま、ヘルプが表示されることになる。そして、読み終わって「戻る」のリンクからもとの文書へと戻る際、フォーカスはヘルプを表示した時点のものに戻る、というわけだ。

本当は並行して見るような形をAuthorが望んでいるとしても、それが無理なのだから仕方ない。しかしこのように、きちんとフォーカスの流れも制御というか誘発というか、そんな挙動をさせることは出来ると思うのだ。この程度ならば、まるで並行して読んでいるというのとほぼ同じ程度に持って行けるのではと思う。また、target="_blank"が無くても複数のウィンドウを開くことの出来る環境ならば、概ねの場合において、ユーザーの意思で別ウィンドウとしてリンク先を開くことが出来ると思われる。したがって、意図された通りのポップアップウィンドウでないにせよ、主文とヘルプとを交互に参照し合うような見方も可能ではある。

閉じるボタンの意義はつまり、ユーザーの視点をAuthorが予測したうえでのインターフェースというやつだ。だから、有るなら有るでも良いと思う。さらに、JavaScriptが有効でない環境に対してもそのようなデザインを実現可能だ。たとえば今書いたやり方みたいにするとか、ちょっとした労力でね。

まあ別に結論を求めたいわけではないから是非がどうのというのも困難ではあるが、とりあえず言うなれば、僕的には是だ。別窓を開くことを避けるためにJavaScriptをオフにしているのなら、それはそれでイイのでは。別にAuthorは、JavaScriptが無効な環境のことだけを配慮するものではないのだから。ただし、どのリンクが別窓を開くリンクなのかが傍目にわからないのは困る。これはJavaScriptが有効な環境でも無効な環境でもどっちでも困ると思う。つまりユーザーとして戸惑うというのが困る根拠。その辺は何とかして欲しいものだ。って誰に言ってる?

最高にして最良の対策は、いかにしてあらゆる環境に対しても等量の情報を提供し得るかを考えること。その結果のインターフェースそのものについての是非は、単にJavaScriptが有るとか無いとか、そういう次元の話ではないと思うのだ。うまくいってない状況が発生したら、それはそもそも情報デザインの時点で失敗したか、どう提供していくかの段階での詰めが浅いとか甘いとか、その辺から疑わしく思う必要があるのではないかと、僕は近頃そう思う。

(2001.3.4)