LogJET

CSS + XHTML Airport

新しいウインドウを開くべき?

このサイトはHTMLのルール上、新しいウインドウを開いてはいけないのですよ(いや、別に自分で決めたわけじゃなくて...)。XHTML strictの決まりごとです。

ルールを無視して、target="_blank"をアンカータグ<a>に放り込めば問題なく新しいウインドウで開くことができるんです。でもアクセシビリティ上よくないのですよ。
最近知ったのですが、ページ読み上げソフトなどを使用している場合、新しいウインドウが開いてもユーザーは分からないそうです。要するに、戻るボタンなどが効かなくなり混乱するので良くない、というわけです。少なくともアンカータグ<a>にtitle属性で新しいウインドウが開く旨を記述する必要があるそうです。

その話については少し置いておいて...

外部のサイト = 新しいウインドウ?

ところが外部リンクも全部同じ窓で開くと、飛んだ外部のサイトから再びこのサイトに戻ってくるまで戻るボタンを連打しないといけないわけです。また、記事本文中にある軽い紹介リンクも同じ窓で開いてしまうので、戻ってきたときに「どこまで読んだかな?」みたいな面倒くさいことも起こりうると思うのです。

更に問題なのが、「外部リンクは別窓」とイメージする人が少なからずいることです。「違うサイトに飛んだ = 別窓」。日本のサイトは昔からよくそう扱っていたので、いつの間にかユーザーが思い込んでしまう。すると、何が起きるかというと開いているウインドウをうっかり閉じてしまうのです(自分も昔よくやりました...)。今も「外部リンクは別窓」というサイトが大多数だと思います。(別窓を開くことが良いか悪いかは置いておいて)

ネットやってる人がみんなネットに詳しいわけではありませんし、ましてや新しいウインドウの開き方などみんながみんな知っている訳じゃありません。
shiftキー押しながらクリックとか面倒くさいし...。

target="_blank" は良いか悪いか

target="_blank"を指定してしまうと、有無を言わせず別窓が開きます。タブブラウザな自分にとってIEを使っていて別窓がポコポコ開くのは結構うっとおしいです。「必要なときだけ開きたい!」とか思うわけです。
Firefoxなら拡張機能などを使ってtarget="_blank"を無効にすることができます。(してないけど)

逆に、「別のサイトを開いたことが分かりやすい」という人もいると思います。また、もともといたサイトに戻りやすい(閉じるボタン一発)ということもあると思います(逆にこれが元で上記の同じウインドウだと気づかずに閉じてしまうという問題が起きるわけですが...)。

この話については、一長一短といった感じですかね。

別窓で開くかどうか選択肢をつくる

上記の問題が起きないようにするにはどうしたらよいか...。一番良いのは、同じ窓で開くか別窓で開くかユーザーが選べるようにすることだと思います。別窓で開く方法をユーザーに啓蒙するより現実的です。

例えばYahoo!の検索結果で、ページタイトルの横にある窓のボタンはクリックすると新しいウインドウを開くことができます。これをやりたいわけです。

でも、HTMLをstrictで作っている都合上target="_blank"を使うことができません。
また、使うにしてもすべてのページに差し込むのが面倒くさい。

Javascriptの出番です

そこで登場するのがJavascriptなわけです。まだ作ってもいないので何とも言えないのですが実行するJavascriptの流れはこのサイトを例にあげると

  1. ページロード終了(理想はレンダリング中)
  2. ページ内のaタグを探す
  3. hrefに「http://www.fsiki.com/」を含まないリンクを探す
  4. 含まないリンクのお尻に別窓を開くリンクを挿入する

というかたちになるかと思います。

document.getElementsByTagName('a')
とか
innerHTML
とか使うんですかね。
窓を新しく開くのはwindow.openっすかね。

正直Javascript無効にすると効かないわけですが、飽くまでJavascriptは補助的なものでオフの場合でも最低限の動きができるようにする。というのが自分の考え方なので、ありかな...とか勝手に考えています。

これを実装すればひとまず混乱は避けることができるかなと思います。
自分のサイトなんだからやりたいようにやればいいってのが実際の答えのような気もします。

実装する時はまたこの記事に追記しようと思います。いつになることやら...。

innerHTMLじゃだめだこりゃ

途中経過ですが、どうもinnerHTMLじゃだめっぽい。
特定の単語(ここでは"fsiki.com")を含むアンカーを探すことはindexOf使って成功。この後、予定としては、探したアンカーにinnerHTMLで

</a><a onclick="何とかかんとか">新しいウインドウで開く

みたいな文字列を挿し込んでやろうとしたら、うまく入らない。姑息な事企むといかんですね。
仕様だからしょうがないわ...。で、outerHTMLとかinnerText使ったけどやっぱりだめ。そもそもIEオンリーな気が...(IEでもだめだったけど...)。

でappendChild使ったら適当な要素の中に新しく作った要素を放り込めるんですけど、該当アンカーの後ろにアンカーを挿し込むことができない...。XMLならサクッと挿し込めるんですけど、HTMLは要素の中に色んなものが散在しているんで、うまくいかないわけですね。

しかも、数回ブラウザがクラッシュした。for文で次々試していくわけですが、aタグを追加すればそれに対しても評価するんでエンドレスに評価し続けるわけで、結果クラッシュ。
これは、要素追加したら i = i +1 でひとつ飛ばしに評価させることで解決したんですけど。

要素の直後に要素を追加するInsertAfter(newHoge,hoge)みたいなやつがあるらしいですけど、動かない...。

書いていることもワケ分からなくなってきた。
さあ、どおしたもんかいな。巨大な壁がそそりっ立っております。

insertAdjacentElementはIE、Operaで動いた。Firefoxはダメ。

ようやく完成 + 実装

一日引きこもって、insertBefore使って解決。ただ前にも書いたようにinsertAfterが効かないのでかなり悩んだ。
興味のある人はJavascriptのソース覗いてみてください。関係ないソースも入っていますが...

疲れたー。

Google←今回の成果


Trackbacks
このエントリーのトラックバックURL
http://www.fsiki.com/m.new/t.cgi/390
[WP]カスタマイズ覚え書き JavaScript編 from The road ahead v.2.0
今日も懲りずにカスタム三昧。 何がしたいってのはないんだけど、とりあえず弄りたい(笑 今回のカスタマイズはWP専用ってワケじゃないのでいろいろ応用できるか...

2006-08-08 13:53

リンクに、新しいウィンドウで開くためのアイコンを自動で追加(Wpプラグイン) from Numb.
先日「新規ウィンドウを開く手段を Valid と両立させる考察 - Numb.」という記事で、 リンクを新しいウィンドウで開くかどうかはユーザーに選択...

2007-07-15 12:16

アクセシビリティを考慮したリンク from Floridezza
久しぶりに、そして珍しく役に立ちそうなカスタマイズ例を記録しておきます。 サンプルとして、もう予約したので書いてしまおうをご覧ください。 Javascri...

2007-12-08 11:58


Comments

別窓は~ってのは暗黙の了解ってことっすか?
マナーと言うかなんというか。

俺はそーゆーの何も知らずに全て別窓でやっておりました。。。。。
ってか知らない人って多そうだね。
学校で生活のマナーを教えるようにネットのマナーってのを学ぶ時代が近いうちに来るかもしれんね。

そして、このpreview Area って面白いですね。↓見ながら書いてます。

from nikutai : 2006-01-19 10:27

いやいや、マナーというより使いやすさの問題ね。
使いやすいかどうかで考えると一長一短あるな、という話。
人によって違うし。
で、どっちかに限定するんじゃなくて選択肢があるのが一番いいという結論が出たわけです(自分の中で)。

ある程度はマナーはあるほうが良いと思うけど、自由にやれるのもインターネットの魅力なわけだし。

Preview Area気づいた?
ふと、作りたくなって作ってみた。
諸事情でこのブログ、確認画面が出せないので、あった方が便利かなーとか思ってつけてみました。
イメージタグとか放り込んだら普通に画像が表示されてちょっとビビるけど…。

まあ、そんな感じです。

from Fsiki : 2006-01-19 23:02

このスクリプトすごいですね〜!
ソースを覗いてみましたがいまいち理解できず、真似できませんでした…。
宜しければ変更ポイント等を紹介していただけませんでしょうか?

from Kawa : 2006-08-03 21:00

Kawaさん
コメントありがとうございます。
上記の記事中に出てきた新窓リンク追加JavaScriptは、このサイト向けにいじってあるので、ちょっとわかりづらいです。すみません。

ですので、もう少しわかりやすいものを上げておきます。
よろしければどうぞ。

使い方は

  1. newwin.js中に初期設定(リンクURLに含まれる除外文字列など)を書く。
  2. HTMLの<head>の中に<script src="jsのパス" type="text/javascript"></script>でリンクする。
  3. 関数を<body onload="newWin();">で呼び出すか、JSファイル中にwindow.onload = function(){newWin();}と記述して呼び出す。

初期設定が少々面倒ですが、以上で恐らく動くはずです。
不具合などがあれば、できる限りで対処します。では。

from Fsiki : 2006-08-04 3:04

ありがとうございました。
早速弄ってウチのサイトにも入れてみたいと思います。

from Kawa : 2006-08-07 13:01

はじめまして、こんにちは。
このjavascriptはまさに私のやりたいことを実装できるものでした。
ありがとうございます!

このjavascriptをWordPressで簡単に実装できるように
プラグイン化したいのですがよろしいでしょうか・・?

from inocco : 2007-07-12 9:25

inoccoさん、はじめまして

JavaScriptの件、どのように使用していただいても全く問題ありません。
拙いスクリプトですがよろしくお願いします。

from Fsiki : 2007-07-13 17:52

こんにちは。快諾してくださりありがとうございます。
さっそくプラグイン化し公開いたしましたのでご連絡に参りました。
とても便利なスクリプトを公開してくださり本当に感謝です。

from inocco : 2007-07-15 13:13

初めまして。

こちらのスクリプトを利用したWordPress用のプラグインをinoccoさんが作成されていましたので利用してみたところ、マックのSafariだとアイコンが表示される所とされない所がありました。

最初、inoccoさんのブログで質問したのですが、スクリプトはこちらとのことでしたので、こちらにコメントいたします。

以下はinoccoさんのブログにコメントした内容から関係する箇所を抜き出したものです。

---- ここらら ----
マックのSafariだとアイコンが表示される所とされない所があります。

例として、私のブログ(URIの欄に書き込んであります)の右サイドバーの「Reptiles' sites」にある「やもり通信」さんには表示されず、「やもりギャラリー」さんには表示されるといった具合です。
右サイドバーのほとんどが外部リンクですが、31リンク中10リンクしか表示されない状況となっています。

自宅のマックでも職場のマックでも同様ですが、職場のWindowsのFireFoxとIEではすべて表示されていました。

環境を書いておきます。
MacOS X 10.4.10
Safari 2.0.4 (419.3)
---- ここまで ----

Windows版のSafariでは正しく動作するとのことでした。

私のブログもXHTML 1.0 Strictですので、是非このスクリプトを使用させていただきたいと思っておりますので、よろしくお願いいたします。

from masakazu : 2007-08-24 22:05

masakazuさん、初めまして。
お返事が遅くなってしまい申し訳ありません。

スクリプトに問題があるということなので調査します。
できるだけ早い段階で修正版が公開できるようにしますので、何卒ご了承ください。

よろしくお願いいたします。

from Fsiki : 2007-09-07 3:14

Fsikiさん、コメントありがとうございます。
あれから私の方でも調べてみたのですが、マックのSafariだとgetElementsByTagNameが正しく?動作しないといった問題があるようでした。
色々回避策を講じている方もおられるようでしたので、自力でなんとかしようとしたのですが、SEのくせにJavascriptが苦手な私には敷居が高かったです(汗)。

割と簡単に回避できそうであればお願いしたいと思います。

from masakazu : 2007-09-07 19:57

私の環境(MacOS X10.4.10+Safari2.0.4)では
このスクリプトを使ってある個所を含めて文字を選択しようとすると
必ずSafariがビーチボールアイコンが回りっぱなしで固まってしまいます。
以前から色々なサイトで起こっていたので、なんだろうと思っていたのですが、
最近このスクリプトを使ってアイコン表示している所だと気付きました。
いくつかの環境で試しましたが、確実に起こります。
JavaScript関連でのエラーなのでしょうか?

from ele : 2007-10-09 10:11

eleさん、はじめまして。
返事が遅くなってしまい申し訳ありません。
現在、合間を見つけては修正作業を行っています。
今月中には修正版出せるかと思いますので、よろしくお願いします。

from Fsiki : 2007-11-18 2:17

はじめまして。

「別窓で開くかどうか選択肢をつくる」方法の例はないものかと検索していまして、こちら様へたどり着きました。
まさに希望通りの方法を実現出来るスクリプトを配布していらしたので、早速お借りしました。
本当に希望したとおりのスクリプトでしたので、大切に使わせていただきます。
ありがとうございます。

年末ですし更にお忙しいことと思いますが、どうかお身体ご自愛ください。
失礼いたしました。

from ちゃぽ : 2007-12-08 12:04

初めまして。
WordPress用のプラグインを見つけましたので、ちょっとお借りしました。
Fsikiさんのスクリプトを使ったプラグインなんですね。
マナーと使いやすさの両立を私も考えてみたいです。

from crahu : 2008-02-21 18:16

Fsiki様
素敵なスクリプトをありがとうございます。

inoccoさんが作成されたWordPress用のプラグインを利用させていただきました。

1日引きこもって完成させてしまうなんてすごすぎます。

from ひろし : 2008-02-26 10:13

お返事が遅くなり申し訳ありません。
バグを抱えたままの拙いスクリプトを使っていただきありがとうございます。

当時順調に修正作業していたのですが、
いつの間にやら放置してしまっていました。
大変申し訳ございません。

from Fsiki : 2009-01-31 10:21

はじめまして。
まさに私が探していたものです!
公開前のサイトではありますが、さっそく実装させていただきました。バッチリです!
ありがとうございます。

from たま : 2010-04-14 17:38



Copyright © 2005-2006 - Fsiki