_blank を使わない新規ウィンドウの開き方

2006/03/22
Web制作

リンク先を新規ウィンドウで開くやり方と Markdown との兼ね合いについて書きましたが、今日はその続編です。いくつか気になる点があったので、調べてみました。
気になっていたのは、この2点。

  • 先日の javascript では、結局 _blank を後付けで指定しているので、よくないのかも。
  • そもそも _blank が推奨されなくなったのは、ユーザーがウィンドウを開くかどうかは決めることであり、サイトの運営者が決めることではない。ということから、らしい。それに沿ってないんじゃないか。

丁度同じようなことを取り上げている方のブログを見つけました。

hori-uchi.com: _blankを使わないで別ウィンドウを開くにはrel=”external”を使うのが美しいと思う。

コメント部分含め、参考にさせていただきつつ整理。

目次

問題点、注意点

  • rel 属性は XHTML1.0 Transitional では OK 。 HTML4.0 では rel に指定できる値が決まっている。rel を使うのならば、XHTML1.0 Transitional で書いておくと良さそう。
  • javascript を用いるとしても、 _blank 指定を後からつけるのでは根本的な解決に至らないので、やはり window.open を使うほうがよい。その場合、javascript がオフであっても困らない対策も必要。
  • いずれ、rel を使用しないでおくようにしなければならないのなら、いっそ class で指定しちゃうのもアリ

良さそうな手法

問題点、注意点を考慮して考えてみると、理想はこんな感じでしょうか。

  • 元のリンクはそのウィンドウに開く形態にしておきつつ新規ウィンドウを開きたい人のためになんらかのアイコンなどで新規ウィンドウを開く方法も同時に作っておく。
    その際 _blank を付け足すのではなく、 window.open を使用する形で。
    ※これの欠点は、同じリンクを 2 回記述することになるのでソースが伸びてしまうこと。
  • ユーザーが新規ウィンドウで開くかどうか決められるように javascript で細工をつくり、チェックボックスにチェックをつけた場合には新規ウィンドウを開かない、なんてのも良いかも。
  • javascript で開くようにする場合にも、href に URL を指定する。
    ( この場合、元のウィンドウが一緒にページが変わってしまわないよう、ちょっとしたポイントがある。)
    これによって javascript がオフの環境でリンク先に行けないなどということが起きなくなる。

理想にちょっとでも近づくべく、[hori-uchi.com: _blankを使わないで別ウィンドウを開くにはrel=”external”を使うのが美しいと思う。 の hori-uchi さんのコードを少し改造させていだいて使うことにしました。元のソースの詳細は、上記サイトで確認していただくとして改造したところを書いておきます。

元のコード▼

function externalLinks() {
if (! document.getElementsByTagName ) return;
var anchors = document.getElementsByTagName("a");
for (var i=0; i<anchors.length; i++) {
var anchor = anchors[i];
if (anchor.getAttribute("href") && anchor.getAttribute("rel") == "external") {
anchor.onclick = function(event){return popupWindow(this, event);}
anchor.onkeypress = function(event){return popupWindow(this, event);}
}
}
}

function popupWindow(anchor, event){
var keyCode;
if (event && event.type == 'keypress') {
if (event.keyCode)
keyCode = event.keyCode;
else if (event.which)
keyCode = event.which;
// 13 == Return key. 32 == space key
if (keyCode != 13 && keyCode != 32)
return true;
}
return !window.open(anchor);
}
Event.observe(window,'load', externalLinks, false);

もし class="externalLink" と class に指定するならば、
6 行目の rel を class に変更します。
rel 属性を使って指定するのであれば、そのままで OK です。

26 行目の
Event.observe(window,'load', externalLinks, false); を、
window.onload = external; に変更。

変更したものが、こちら。▼

function externalLinks() {
if (! document.getElementsByTagName ) return;
var anchors = document.getElementsByTagName("a");
for (var i=0; i<anchors.length; i++) {
var anchor = anchors[i];
if (anchor.getAttribute("href") && anchor.getAttribute("class") == "external") {
anchor.onclick = function(event){return popupWindow(this, event);}
anchor.onkeypress = function(event){return popupWindow(this, event);}
}
}
}

function popupWindow(anchor, event){
var keyCode;
if (event && event.type == 'keypress') {
if (event.keyCode)
keyCode = event.keyCode;
else if (event.which)
keyCode = event.which;
// 13 == Return key. 32 == space key
if (keyCode != 13 && keyCode != 32)
return true;
}
return !window.open(anchor);
}
window.onload = externalLinks;

こういうのが理想かな？

Numb.新しいウィンドウに開く

こんな感じに、「このウィンドウに開く」、「新しいウィンドウに開く」でリンクを 2 つ書くのが本当はいいんじゃないかな～。でも、ちょっと骨が折れますね :roll:
WP-AddQuicktag
で登録しちゃえば、多少が作業量が軽減される、かも？

私は当面は、XHTML1.0 Transitional を使いながら rel 属性を使って、 javascript でwindow.open を使うようにしてみようかな～と思います。
両方書くのは、続けられる自信が…

もし 2 つリンクを書くようにするならば、こんな感じのものをボタンに登録するつもりです。
<a href="" class="externalLink"><img src="open.gif" alt="新しいウィンドウを開きます" title="新しいウィンドウを開きます" /></a>

2 つ書く場合 Markdown を使うと、下記のように書くことになりそうです。ううーむ。
やっぱりちょっと、お手軽さが減っちゃいますね～。

[Link](http://xxx.com/)
[新しいウィンドウを開きます](http://xxx.com/" rel="external)