こちらも入門編！タイトルとリンクだけを取り出すブックマークレットを作ってみました。 - JavaScript プログラミング
PROGRAM
タイトルとリンクだけを取り出すブックマークレットを作る
先日に 入門編！ ブックマークレットを作ってみる の中で、ブックマークレットの作り方を順を追って紹介しました。
これを見て「雰囲気を掴めたよ！」っていう声がちらほら頂いて嬉しい限りですけど、前回は必要になる度に機能を追加する流れで話していたので、理解するのは難しかったかもしれません。
そこで今回は、表示中のページからタイトルとリンクだけを取り出して紹介リンクを生成する単純なブックマークレットを作ると決めて、ブックマークレットの完成を目指してみたいと思います。
生成する HTML を決めます。
まず、最終的にどんな HTML を生成するかを決めておきます。
今回はサイトタイトルを取り出して、それをクリックするとそのサイトへジャンプする HTML にしようと思うので、最終的に生成する HTML は次の通りにすることにします。
<span class="ez-sharelink-simple">
<a href="URL" target="_blank">TITLE</a>
</span>
つまり、次のようなリンクですね。
ここのURLとTITLEのところにそれぞれ、表示中のページの URL と記事タイトルが挿入されるようにします。
ちなみに今回、<a> タグの周りを <span> で括っていますけど、これはいつでもスタイルシートを使ってデザインを調整できるようにしておくことが狙いです。
ブックマークレットをプログラムする
それでは、ブックマークレットを作って行きましょう。
前回の 入門編！ ブックマークレットを作ってみる で話したことと似たことをやっているので、わかるところはさらっと流しながら、読み進めてもらって大丈夫です。
まず、必要なタグを作ります。
さて、今回必要になるタグは <span> と <a> なので、まずはそれらを "document" の "createElement" メソッドを使って作り、それぞれを変数 "spanNode" と "anchorNode" に入れます。
var spanNode = document.createElement('span');
var anchorNode = document.createElement('a');
作ったタグに属性情報を設定します。
そして <span> にはclass="ez-sharelink-simple"を設定します。
タグにclassを設定するときは "className" プロパティを使うところに注意です。
spanNode.className = 'ez-sharelink-simple';
<a> には href="URL" と target="_blank" を設定します。
anchorNode.href = location.href;
anchorNode.target = '_blank';
表示中のサイトの URL は "location" の "href" プロパティで取得できるので、それを "href" プロパティに設定します。"target" プロパティには '_blank' を文字列で設定します。
HTML の書き方さえ知っていれば、似た感覚で設定できるので簡単ですね。
ワンポイント
ちなみに "class" と "style" 以外の属性は基本的に HTML の属性名と同じ名前で設定できます。
"style" 属性を設定したい場合は "style" に続けてスタイルシートのプロパティ名を書けば設定できますが、スタイルは普段通りスタイルシートで設定する方が絶対にプログラムもデザインもしやすいです。
リンクを貼るテキストを作ります。
後は <a> タグの中に入れるテキストを作れば、材料は出揃います。
テキストは "document" の "createTextNode" メソッドにテキストとして持たせたい文字列を指定して作成します。今回は、表示中のサイトタイトルをテキストにするので "document" の "title" を指定します。
var textNode = document.createTextNode(document.title);
そうして作成したテキストを、今回は変数 "textNode" に入れておきました。
タグを組み立てます。
これで必要な材料が揃ったので、あとはこれらを組み立てます。
今回は <span> の中に <a> を入れたいので、親タグ <span> の "appendChild" メソッドに、入れたいタグ <a> を渡します。
<a> タグも同様に "appendChild" メソッドを使って、内側にテキストを入れ込みます。
spanNode.appendChild(anchorNode);
anchorNode.appendChild(textNode);
これで、最初に決めた HTML が完成しました。
作成した HTML を画面に表示します。
HTML が完成したら、それを画面に表示させます。
作成した HTML を取り出すには、いちばん上のタグの "outerHTML" プロパティを見ます。今回のいちばん上のタグは <span> なので、それを入れた "spanNode" 変数の "outerHTML" を使います。
そうやって取り出した HTML を "prompt" 関数の 2 番目の値に渡せば、それが画面に表示されます。
prompt('シェアリンク', spanNode.outerHTML);
この "prompt" が何をしてるか気になる人は こちら を見てみてくださいね。
ブックマークレットとして仕上げる
さて、プログラムはこれでほとんど出来上がりました。
後はこれをブックマークレットとしてブックマークから実行できるようにします。それには "javascript:" で始まる次のプログラムの中に、これまでに作ったコードを入れ込めば OK です。
javascript:
(
function()
{
/* ここでブックマークレットの機能を実装します。*/
}
)
();
説明してもあまり意味のある話にならないので、これはこういうものだと思っておいてください。
理由は 入門編！ ブックマークレットを作ってみる の 何もしないブックマークレットを作ってみる のところで説明しているので、気になる場合はそちらで確認してみてくださいね。
ブックマークレットを完成させます。
さて、これまで作ってきたプログラムをこの中に書けばブックマークレットは完成です。
javascript:
(
function()
{
/* まず、必要なタグを作ります。*/
var spanNode = document.createElement('span');
var anchorNode = document.createElement('a');
/* 作ったタグに属性情報を設定します。*/
spanNode.className = 'ez-sharelink-simple';
anchorNode.href = location.href;
anchorNode.target = '_blank';
/* リンクを貼るテキストを作ります。*/
var textNode = document.createTextNode(document.title);
/* タグを組み立てます。*/
spanNode.appendChild(anchorNode);
anchorNode.appendChild(textNode);
/* 作成した HTML を画面に表示します。*/
prompt('シェアリンク', spanNode.outerHTML);
}
)
();
説明を読みながらだと長く感じられたかもしれないですけど、プログラムは意外と短めですね。
<span> と <a> を作って、必要な属性を設定して、サイトタイトルからテキストを作って、タグ順に組み立てて、表示。このコードをそんな風にすらすら読めれば、プログラムにもだいぶ慣れた証拠です。
ブックマークレットを実行する。
完成したブックマークレットを実行すると、次のような HTML を取得できます。
<span class="ez-sharelink-simple">
<a href="https://program.station.ez-net.jp/special/handbook/javascript/bookmarklet/howto.asp" target="_blank">EZ-NET： 入門編！ ブックマークレットを作ってみる - JavaScript プログラミング</a>
</span>
これをブログに貼りつければ、こんな感じになります。
記事タイトルにリンクを貼っただけというとても単純な HTML ですけど、これだけでもブックマークレットを使って取得した方がずっと手間が少なくなって、記事内にリンクを貼るのがずいぶん楽しくなります。
装飾するならスタイルシートが絶対おすすめ。
色とか枠とか、外部リンクを示す画像とか、そういった装飾をつけたいときも、スタイルシートを使えばかなり自由に付けられるので、こんな単純な HTML でも充分に実用的です。
むしろ、プログラムでスタイル指定とか、空白や改行を入れてしまうと、プログラムが複雑になる上に使うときに融通が利かなくなるので、余程の理由がない限りはやらない方がいいでしょう。
良い感じに仕上がりました。
タイトルにリンクを貼るだけのブックマークレットであれば、こんな感じでけっこう短いプログラムで実現できます。
作る手間は小さいですし、使ったときの効果は意外と大きいので、ブログに他のページへのリンクをよく貼る人はぜひ、こんなブックマークレットづくりを試してみてください。
そしてなにより、自分の作ったブックマークレットを使うのって楽しいです。
こんな単純なブックマークレットでも、自分は使うたびに毎回嬉しい気分になれるので、そんな喜びをぜひ体験してみて欲しいです。きっと今よりももっとブログを書くのが楽しくなると思いますから。
サイトタイトルを加工する
今回作成したブックマークレットでは、次のようにサイトのリンクが取得できました。
ただ、このサイトタイトルには、冒頭にはブログ名を表す言葉（"EZ-NET: "）が、末尾にはカテゴリを表す言葉（"JavaScript プログラミング"）が含まれています。
こういうのを取りたいなって思う場面もけっこう多いので、それについても紹介してみたいと思います。
つまり、最終的にはこんなリンクを取得するのが目的です。
末尾のカテゴリ名を取り除くには
ページのタイトルを "document.title" で素直に取得すると、たとえば次のタイトルが取得できます。
EZ-NET： 入門編！ ブックマークレットを作ってみる - JavaScript プログラミング
ここから、末尾にあるカテゴリを表す " - JavaScript プログラミング" の部分を取り除きたい場合を考えます。
考え方
このとき注目したいのは、記事タイトルとカテゴリを分離している記号です。
今回の場合は ' - '（半角スペース・ハイフン・半角スペース）という記号を挟んで、左側がタイトル、右側がカテゴリになっています。
つまり、取得したタイトルをこの記号で 2 つに分割して、分割された最初だけを使えば、カテゴリ部分を除いた記事タイトルを取得できることになります。
プログラムと解説
これは、次のようにプログラミングできます。
var titleParts = document.title.split(' - ');
var title = titleParts[0];
まず "document.title" で取得したタイトル文字列を、"split" メソッドを使って ' - ' を区切り文字として左右に分割します。
分割されたタイトル文字列は、それぞれを順番に取り出せる配列で得られるので、たとえば今回の例なら、次のような配列が得られています。
| titleParts[0] | EZ-NET： 入門編！ ブックマークレットを作ってみる |
|---|---|
| titleParts[1] | JavaScript プログラミング |
配列が0番からの通し番号になっているところと、分割記号は含まれないところがポイントです。
そして、分割されたうちの最初だけを使うことで、後ろの部分が取り除かれたタイトルを取得できました。
EZ-NET： 入門編！ ブックマークレットを作ってみる
冒頭のブログ名を取り除くには
末尾のカテゴリを表す言葉を取り除くだけでも、ずいぶんすっきりしましたけど、せっかくなら冒頭のブログ名を取り除けばもっとシンプルになります。
EZ-NET： 入門編！ ブックマークレットを作ってみる
ここの先頭から、サイト名を表す "EZ-NET: " を取り除いてみたいと思います。
考え方
サイト名のところは毎回同じテキストが入ると考えて、そのテキストを空文字に置き換えるという方法で実現します。空文字に置き換えるとは、つまり消すということです。
今回の場合は 'EZ-NET： '（EZ-NET・コロン・半角スペース）という文字列を、空文字に置き換えます。
プログラムと解説
これは、次のようにプログラミングできます。
var text = title.replace('EZ-NET： ', '');
さきほど末尾を切り取ったタイトル文字列に "replace" メソッドを使って、'EZ-NET： ' を空文字に置き換え、それを変数 "text" に代入しています。
これで、タイトル文字列からブログ名を取り除くことができました。
入門編！ ブックマークレットを作ってみる
ブログ名のところが複数パターンある場合でも大丈夫
ブログ名のところが "EZ-NET： " だけでなく "[Ez] " というパターンがある場合でも、同じようにしてブログ名を取り除けます。
先ほどの "replace" メソッドは置き換える文字列がなかった場合には元の文字列が取得できるので、置き換え文字が存在しなければ何も影響ありません。
そこで、先ほどの "EZ-NET： " を取り除いた文字列から、さらに "[Ez] " を取り除いてあげることで、その両方のパターンを取り除いています。
var text = title.replace('EZ-NET： ', '').replace('[Ez] ', '');
サイトタイトル加工のまとめ
これまでのプログラムをまとめてみましょう。
var titleParts = document.title.split(' - ');
var title = titleParts[0];
var text = title.replace('EZ-NET： ', '').replace('[Ez] ', '');
この 3 行で、もともとあったサイトタイトルから、末尾のカテゴリ名の部分を切り落とし、冒頭のブログ名をカットすることができました。
これをブックマークレットに取り入れる
これを、先ほど作ったブックマークレットのリンクを貼るテキストを作るところで使えば、記事タイトルだけのリンクが作れます。
javascript:
(
function()
{
/* まず、必要なタグを作ります。*/
var spanNode = document.createElement('span');
var anchorNode = document.createElement('a');
/* 作ったタグに属性情報を設定します。*/
spanNode.className = 'ez-sharelink-simple';
anchorNode.href = location.href;
anchorNode.target = '_blank';
/* リンクを貼るテキストを作ります。*/
var titleParts = document.title.split(' - ');
var title = titleParts[0];
var text = title.replace('EZ-NET： ', '').replace('[Ez] ');
var textNode = document.createTextNode(text);
/* タグを組み立てます。*/
spanNode.appendChild(anchorNode);
anchorNode.appendChild(textNode);
/* 作成した HTML を画面に表示します。*/
prompt('シェアリンク', spanNode.outerHTML);
}
)
();
改良したブックマークレットを実行すると
そしてこの改良したブックマークレットを実行すると、次のような HTML を取得できました。
<span class="ez-sharelink-simple">
<a href="https://program.station.ez-net.jp/special/handbook/javascript/bookmarklet/howto.asp" target="_blank">入門編！ ブックマークレットを作ってみる</a>
</span>
ブログに貼りつければ、こんな感じになります。
このように、冒頭と末尾を取り除いたリンクテキストを簡単に取得できるようになりました。
おわりに
自分自身、自分の記事へリンクするときにサイト名をいつも手で削っていたので、こういうブックマークレットを自分で作れるようになって、リンクを貼る手間がとても軽減されました。
自分でブックマークレットを作れるようになると、こういう自分好みの調整もできるようになるので、そんなところも嬉しい効果のひとつですね。
JavaScript の将来性
それに JavaScript は HTML と相性が良いので、HTML にも応用が利くところが嬉しいです。
慣れれば iPhone や iPad の画面サイズ早見表 みたいなものも自分で作れたりします。これも HTML 内からボタンなどを取得して、画面上の HTML を書き換えているだけなので、発想的はブックマークレットを作るときと同じです。
さらには難関の Ajax まで手を伸ばせば、それこそ iPhone アプリに匹敵するものだって作れます。
それくらい JavaScript は可能性を広げる力を秘めています。
Web とは切っても切れないプログラム言語、応用範囲は無限大です。特に Web にマルチに取り組む人には、学んで無駄になることはないと思うので、興味のあるところからでも、ぜひ触ってみてくださいね。
スタイルシートと同じひとつの道具としてスクリプトも使えたら、きっともっと Web が楽しくなるかもしれませんよ。
[ もどる ]