【連載】自分のブログと外部サイトでtarget"_blank"を切り分けるブックマークレットカスタマイズ

「ブログ執筆をラクにするブックマークレットカスタマイズ講座」の第4回です！

前回、自分のブログ名を削除したaタグを取得するブックマークレットに変数を使ってカスタマイズを加えました。

今回はaタグを作るときに属性として付加するtarget"_blank"を自分のブログと外部サイトで自動的に振り分けるようにしていきます！

自分のブログと外部サイトでtarget"_blank"を切り分ける

前回のおさらい

前回は「自分のブログ名を削除したaタグを取得するブックマークレットを変数を使ってスッキリ見やすくカスタマイズ」しました。

【連載】変数を使ってコードをすっきり見やすくするブックマークレットカスタマイズ

作成したコードはこちら↓

//aタグを出力するブックマークレットを変数を使ってカスタマイズ
//（見やすく改行してあります。）
javascript:(function(){
  var s,h,t,atag;
  h=location.href;
  t=document.title.replace('| たらハコ','');
  atag='<a href="'+h+'" target="_blank">'+t+'</a><a href="http://b.hatena.ne.jp/entry/'+h+'" target="_blank"><img border="0" src="http://b.hatena.ne.jp/entry/image/'+h+'" alt="" /></a>';
  s=prompt('aタグゲロゲロ',atag);
  })();

今回のゴール

今回のゴールは自分のブログ以外でブックマークレットを実行し、aタグを取得した場合、target"_blank"をつけるようにカスタマイズします。

javascript:(function(){
  var s,h,t,d,blank,atag;
  blank='';
  h=location.href;
  d='tarahako.com';
  t=document.title.replace('| たらハコ','');
  if(h.indexOf(d)<0){
    blank=' target="_blank" ';
  }
  atag='<a href="'+h+'"'+blank+'>'+t+'</a><a href="http://b.hatena.ne.jp/entry/'+h+' target="_blank"><img border="0" src="http://b.hatena.ne.jp/entry/image/'+h+'" alt="" /></a>';
  s=prompt('aタグゲロゲロ',atag);
  })();

今回はポイントとなる部分の説明を先にして、後からカスタマイズした部分の説明をしていきます！

今回のポイント！

今回のポイントは次の2点！

1. if構文で自分のブログと外部サイトで処理を分ける
2. indexOf関数で自分のブログと外部サイトを判断する

それではカスタマイズのポイントについて詳しく説明していきます！

if文の使い方

IFTTTを知っていればif構文は怖くない！

パターンによって処理を分けるときに使用するif構文。

かなりプログラミング色が強く、なかなかとっつきにくいかもしれませんが、「IFTTT」というサービスを知っている方ならそんなに難しい話ではありません。

なぜならif構文は「IFTTT」同様「もし〜なら、〜する」という処理を行うものですから。

if構文の基本ルール

まずはif構文の書き方から

if([条件式]) {
  [条件式が満たされるとき]
} else {
  [条件式が満たされないとき]
}

となります。ただ、これをこのまま理解するのはちょっと難しいので、日本語に置き換えてみます。

例えば、スマホの速度制限のことを想像してみてください。

if(1ヶ月の通信量 < 7GB) {
  まだ通信速度に問題なし！
} else {
  128kbpsに速度制限されて発狂する
}

条件式は「1ヶ月の通信量 < 7GB」、この条件式を満たす場合はまだ通信速度制限をされませんよね？なので、コード上ではelseより手前の「まだ通信速度に問題なし」の部分が実行されます。

しかし、1ヶ月の通信料が7GBを超えると…「1ヶ月の通信量 < 7GB」の条件は満たさないので、コード上ではelseより後ろの「128kbpsに速度制限されて発狂する」が実行されます。

ざっくりとif構文の基本はこんなところです。

今回使うif文

今回はelseの無い形で使用します。

「今回のゴール」のコードの7〜9行目がif構文を使っている部分になります↓

javascript:(function(){
  var s,h,t,d,blank,atag;
  blank='';
  h=location.href;
  d='tarahako.com';
  t=document.title.replace('| たらハコ','');
  if(h.indexOf(d)<0){
    blank=' target="_blank" ';
  }
  atag='<a href="'+h+'"'+blank+'>'+t+'</a><a href="http://b.hatena.ne.jp/entry/'+h+' target="_blank"><img border="0" src="http://b.hatena.ne.jp/entry/image/'+h+'" alt="" /></a>';
  s=prompt('aタグゲロゲロ',atag);
  })();

やっていることはif構文の条件式が満たされるとき、変数「blank」に文字列target="_blank"をセットしています。

続いては条件式の部分を見ていきます。

indexOf関数で自分のブログと外部サイトを判断する

indexOf関数は何者？

indexOfは「調べたい文字列」の中に「検索する文字列」が登場した位置を取得するために使う関数です。

ちょっと難しい内容になるので、今回はこのindexOf関数を使って何をやっているかだけを説明します。

今回indexOf関数でやっていること

今回のブックマークレットではif構文の条件式で「ブックマークレットを実行したページが自分のブログかどうか」を判断しています。

if構文の条件式にはh.indexOf(d)<0という式を使っています。

hにはh=location.href;で「ブックマークレットを実行したページのURL」、dには自分のブログのドメイン（例では'tarahako.com'）がセットされています。

javascript:(function(){
  var s,h,t,d,blank,atag;
  blank='';
  h=location.href;
  d='tarahako.com';
  t=document.title.replace('| たらハコ','');
  if(h.indexOf(d)<0){
    blank=' target="_blank" ';
  }
  略…

indexOf関数は「検索する文字列」が「調べたい」文字列の中に存在しない時は結果が-1になります。

例だと「'tarahako.com'」が含まれないページでブックマークレットを実行するとh.indexOf(d)の結果は-1になります。

つまり、自分のブログ以外のページでブックマークレットを実行した時に条件式if(h.indexOf(d)<0)はif(-1<0)となり、条件を満たし、blank=' target="_blank" ';の部分が実行されることになります。

ここまでが今回のポイントとなるところの説明でした！

では、今回のカスタマイズする部分を説明してきます！

今回のカスタマイズ

「target="_blank"」をセットする変数を用意＆初期化

まず、自分のブログ以外のaタグに「target="_blank"」をセットする方法を説明します。

まず、「target="_blank"」のセットに変数を使わなかった場合、次の2つをわざわざ分けて作る必要があります。

var atag;
//自分のブログのリンク
atag = '<a href="'+location.href+'" >'+document.title+'</a>';

//外部サイトのリンク
atag = '<a href="'+location.href+'" target="_blank" >'+document.title+'</a>';

どちらの形でaタグを作るかをif構文で分岐させても出来なくはないですが、コードが長くなって見づらくなること間違いなしです…

なので、今回は次の形でやりたいことを実現します。

var atag,blank;
//blank変数を文字列結合してaタグを作る
atag = '<a href="'+location.href+'" '+blank+' >'+document.title+'</a>';

文字列結合を利用してaタグを作ります！

変数blankには自分のブログであれば空文字を、外部サイトの場合では「target="_blank"」をセットしてあげればコード量もそれほど増やさずに振り分けが可能になるという寸法です。

そのためにもまずは前回作ったブックマークレットに変数blankを追加して、先に空文字をセットしておきます！

//前回までのコード
javascript:(function(){
  var s,h,t,atag;
  h=location.href;
  t=document.title.replace('| たらハコ','');
  atag='<a href="'+h+'" target="_blank">'+t+'</a><a href="http://b.hatena.ne.jp/entry/'+h+'" target="_blank"><img border="0" src="http://b.hatena.ne.jp/entry/image/'+h+'" alt="" /></a>';
  s=prompt('aタグゲロゲロ',atag);
  })();

//↓↓↓
//変数blankを追加、空文字をセット
javascript:(function(){
  var s,h,t,blank,atag;
  blank='';
  h=location.href;
  t=document.title.replace('| たらハコ','');
  atag='<a href="'+h+'" target="_blank">'+t+'</a><a href="http://b.hatena.ne.jp/entry/'+h+'" target="_blank"><img border="0" src="http://b.hatena.ne.jp/entry/image/'+h+'" alt="" /></a>';
  s=prompt('aタグゲロゲロ',atag);
  })();

続いて、自分のブログと外部サイトを判断させるためにドメインをセットする変数を宣言します。

外部サイト判断用に変数にドメインをセット

自分のブログと外部サイトはドメインを使って判断します。

判断材料となる文字列を変数宣言してセットしておきます。

例では「tarahako.com」になっていますが、ご自身のブログのドメインに合わせて改造して頂ければと思います。

//変数blankを追加、空文字をセット
javascript:(function(){
  var s,h,t,blank,atag;
  blank='';
  h=location.href;
  t=document.title.replace('| たらハコ','');
  atag='<a href="'+h+'" target="_blank">'+t+'</a><a href="http://b.hatena.ne.jp/entry/'+h+'" target="_blank"><img border="0" src="http://b.hatena.ne.jp/entry/image/'+h+'" alt="" /></a>';
  s=prompt('aタグゲロゲロ',atag);
  })();

//↓↓↓
//ドメイン変数にセット
javascript:(function(){
  var s,h,t,d,blank,atag;
  blank='';
  h=location.href;
  d='tarahako.com';
  t=document.title.replace('| たらハコ','');
  atag='<a href="'+h+'" target="_blank">'+t+'</a><a href="http://b.hatena.ne.jp/entry/'+h+'" target="_blank"><img border="0" src="http://b.hatena.ne.jp/entry/image/'+h+'" alt="" /></a>';
  s=prompt('aタグゲロゲロ',atag);
  })();

続いて、if構文で条件分岐させます。

if構文で条件分岐

続いて今回のポイントとなるif構文での条件分岐を追加します。

//ドメイン変数にセット
javascript:(function(){
  var s,h,t,d,blank,atag;
  blank='';
  h=location.href;
  d='tarahako.com';
  t=document.title.replace('| たらハコ','');
  atag='<a href="'+h+'" target="_blank">'+t+'</a><a href="http://b.hatena.ne.jp/entry/'+h+'" target="_blank"><img border="0" src="http://b.hatena.ne.jp/entry/image/'+h+'" alt="" /></a>';
  s=prompt('aタグゲロゲロ',atag);
  })();

//↓↓↓
//if構文を追加
javascript:(function(){
  var s,h,t,d,blank,atag;
  blank='';
  h=location.href;
  d='tarahako.com';
  t=document.title.replace('| たらハコ','');
  if(h.indexOf(d)<0){

  }
  atag='<a href="'+h+'" target="_blank">'+t+'</a><a href="http://b.hatena.ne.jp/entry/'+h+'" target="_blank"><img border="0" src="http://b.hatena.ne.jp/entry/image/'+h+'" alt="" /></a>';
  s=prompt('aタグゲロゲロ',atag);
  })();

続いて、if構文の条件を満たすときに「target="_blank"」を変数blankにセットします。

条件を満たすとき「target="_blank"」を変数にセット

今回のキモとなる、「target="_blank"」をif構文の条件式を満たすときにセットします。

//if構文を追加
javascript:(function(){
  var s,h,t,d,blank,atag;
  blank='';
  h=location.href;
  d='tarahako.com';
  t=document.title.replace('| たらハコ','');
  if(h.indexOf(d)<0){

  }
  atag='<a href="'+h+'" target="_blank">'+t+'</a><a href="http://b.hatena.ne.jp/entry/'+h+'" target="_blank"><img border="0" src="http://b.hatena.ne.jp/entry/image/'+h+'" alt="" /></a>';
  s=prompt('aタグゲロゲロ',atag);
  })();

//↓↓↓
//if構文の条件を満たすとき、target="_blank"を変数にセット
javascript:(function(){
  var s,h,t,d,blank,atag;
  blank='';
  h=location.href;
  d='tarahako.com';
  t=document.title.replace('| たらハコ','');
  if(h.indexOf(d)<0){
    blank=' target="_blank" ';
  }
  atag='<a href="'+h+'" target="_blank">'+t+'</a><a href="http://b.hatena.ne.jp/entry/'+h+'" target="_blank"><img border="0" src="http://b.hatena.ne.jp/entry/image/'+h+'" alt="" /></a>';
  s=prompt('aタグゲロゲロ',atag);
  })();

最後に、変数blankをaタグを作る部分に文字列結合してあげれば完成です！

target="_blank"をセットした文字列を結合

最後に、aタグを作る文字列の中に変数blankをセットしてあげれば完成になります！

//if構文の条件を満たすとき、target="_blank"を変数にセット
javascript:(function(){
  var s,h,t,d,blank,atag;
  blank='';
  h=location.href;
  d='tarahako.com';
  t=document.title.replace('| たらハコ','');
  if(h.indexOf(d)<0){
    blank=' target="_blank" ';
  }
  atag='<a href="'+h+'" target="_blank">'+t+'</a><a href="http://b.hatena.ne.jp/entry/'+h+'" target="_blank"><img border="0" src="http://b.hatena.ne.jp/entry/image/'+h+'" alt="" /></a>';
  s=prompt('aタグゲロゲロ',atag);
  })();

//↓↓↓
//aタグを作る部分に変数blankをセット
javascript:(function(){
  var s,h,t,d,blank,atag;
  blank='';
  h=location.href;
  d='tarahako.com';
  t=document.title.replace('| たらハコ','');
  if(h.indexOf(d)<0){
    blank=' target="_blank" ';
  }
  atag='<a href="'+h+'"'+blank+'>'+t+'</a><a href="http://b.hatena.ne.jp/entry/'+h+' target="_blank"><img border="0" src="http://b.hatena.ne.jp/entry/image/'+h+'" alt="" /></a>';
  s=prompt('aタグゲロゲロ',atag);
  })();

最終的に出来上がったコードはこちら↓

javascript:(function(){
  var s,h,t,d,blank,atag;
  blank='';
  h=location.href;
  d='tarahako.com';
  t=document.title.replace('| たらハコ','');
  if(h.indexOf(d)<0){
    blank=' target="_blank" ';
  }
  atag='<a href="'+h+'"'+blank+'>'+t+'</a><a href="http://b.hatena.ne.jp/entry/'+h+' target="_blank"><img border="0" src="http://b.hatena.ne.jp/entry/image/'+h+'" alt="" /></a>';
  s=prompt('aタグゲロゲロ',atag);
  })();

今回は、ドメインの部分を編集する必要があるので改行したままですが、実際に使うときは改行を削除し、1行にしたコードで使う必要があります。

おわりに

今回はif構文を使うなど、かなり「プログラミング」色が高くなり、とっつきにくいと思ったことかと思います。

もし、プログラミングに興味はあるけど、勉強は何やっていいかわからない…と思っていたら、プログラミング学習サイトを使ってみるのも一つの手です。

プログラミングを始めたい人に「プログラミング学習サイト」がおすすめな3つのポイント

よっしーのひとこと

さて、次回（第5回）ですが、現時点では「調整中」段階です。

第4回までのノウハウを活かして、実践的なカスタマイズを紹介する予定です。

ではまた。