このサイトは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の流れはこのサイトを例にあげると
- ページロード終了(理想はレンダリング中)
- ページ内のaタグを探す
- hrefに「http://www.fsiki.com/」を含まないリンクを探す
- 含まないリンクのお尻に別窓を開くリンクを挿入する
というかたちになるかと思います。
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←今回の成果
