Memoranote

興味のあること、感じたこと、気になったこと、体験したこと、手に取ってみたことを記したブログ

【はてなブログ】別サイトへの遷移において自動的に別窓指定をしてみた+α

target_blankアイキャッチ画像

ページ内には様々なリンクが貼られていると思います。
サイト内の別のページへ移動するリンクもあれば、そもそも別のサイトへとリンクするものもありますよね。

閲覧中のサイトからドメインが変わる別のサイトへと移動する時は、target="_blank"をaタグに付与して、別のタブを用意した上で移動するのが個人的には好ましいと思っています。

ここの論議は色々とあるので、どちらを正解とするかは難しい所ですが、私個人的な意見としては、「内部リンク」と「外部リンク」という純粋に別のサイトであり、新しいサイトへと移動するのであれば、同じタブ内では移動させたくないという理由からです。

なので、自分が運営するブログくらいは別ドメインのサイト遷移時にtarget="_blank"指定(以後、別窓指定)で遷移して貰おうと思ったわけなので、今回はそのお話。

今回やること

リンクを設定する度に、ドメインを全てチェックして、「あーこれは内部リンクだから別窓要らないな」とか「これは外部リンクだからblank付けよう」とかやってたら、めんどくさくてしゃーない!!

ということで、今回はjavascriptを使ってドメイン判定を行い、別窓を自動的に付与するという形にします。

修正箇所

今回はjavascript(jQuery)を使っていきます。

javascript(jQuery)

<!--「jQuery」参照URL-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!--target_blank自動付与-->
<script>
  $(function(){
    $('a[href^=http]').not('[href*="'+location.hostname+'"]').attr('target','_blank');
  });
</script>
<!--target_blank自動付与-->

そんなに難しい事をやっているわけではありません。

6行目真ん中にある「location.hostname」というのが、閲覧中のサイトのドメイン部分を引っかけてくるという指示なのですが、ページ内のaタグ全てをチェックし、httpで始まるリンク指定全ての中で、自分のドメインが含まれているものを除いた全てのリンクにblank指定をするという指定をしています。

これを指定しておけば、わざわざ自分でやらなくても、勝手に指定のリンクのみに別窓指定をしてくれます。

ちょっと待て

別窓指定を好まない方の意見として下記のような意見があります。

entame.work

確かにこれはありますよね。

私もiPhoneユーザーで、Safariが基本的にネットサーフィンするためのブラウザですが、気付いたら展開中のウィンドウが50も60もあったということなんてしょっちゅうです。。
しかも展開中のページを見てみると、同じページが4つも5つも開かれていて…辟易すること山の如しです。

PCやタブレットにおけるタブのUIと、スマートフォン(少なくともiPhone)のタブ(ウィンドウという扱いなのかしら)のUIの考え方はちょっと異なる部分があるので、ひっきりなしに新しいタブが展開されてはそれも困るという意見もとても良く分かります。

スマホの事も考慮しちゃったりするカスタマイズ

ということで、+αでスマートフォンだけには自動別窓付与を適用させないようなパターンも用意してみました。
私もタブレットは持っておらず、機種によるUIのパターンは把握し切れていませんが、とりあえずiPadはタブはあったはずだ、ということで、今回はタブが存在していて、遷移の際に新しいタブで開いたとしても使い勝手が悪くならないか、という観点から「スマホ」と「タブレット or PC」という棲み分けにしてみます。

javascript(jQuery)

<!--「jQuery」参照URL-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!--target_blank自動付与-->
<script>
  $(function(){
    if(!navigator.userAgent.match(/(iPhone|iPod|Android.*Mobile)/i)){
	// スマホ(iPhone・Androidスマホ)以外の場合の処理を記述
	$('a[href^=http]').not('[href*="'+location.hostname+'"]').attr('target','_blank');
   }
  });
</script>
<!--target_blank自動付与-->

条件分岐を書いて、スマホのみ適用外にするという分を追加しています。
6行目がそれに当たります。

本来は「もしもスマホだったら~」という文なのですが、先頭に「!」マークを入れることによって否定に変えています。

注意点

こちらは元々「_blank」が入っていないリンクのみが対象です。
元々設定がされているリンクには作動しませんし、逆に言えば二重に付与されることはありません。

ただ元々設定が付与されてしまっていると、今回のスマホの時は~とかタブレットorPCの時は~というのは意味をなしません。

例えば、他の方の記事や自分の過去の記事を埋め込もうとしたりしますよね。

f:id:Kiwham16:20190205145149j:plain

赤枠がリンクが出来る箇所となっていますが、こちらはタグの特性上、元々中のリンクに対して手を加えることができません。
また、元々別窓指定もかかっている関係上、javascriptが動いていようといまいと、こちらのリンク達は常に別窓で開くような形になります。

なので、こちらのjavascriptが動いているいない関わらず、100%設定はし切れないという形になります。
ただ埋め込み型以外のリンクで、元々別窓が付与されていないものは、漏れなく対応してくれます。

まとめ

前述のように、別窓指定に関する設定は色々と意見が交わされていますので、設定する事が正解でもないですし、設定しておかなくてもいいわけでもありません。

ただ、あくまで自分が管理するブログとしてどちらが使い勝手が良いのかな、ブログを見てくれた人にとって使いやすいサイトになっているかなという目線で考えてあげればいいのではないかと思います。

その時にこちらの記事が手助けになれば幸いです。