超基礎入門「ブックマークレットの作り方」

今回は、ブックマークレットの作り方を紹介します。

ブックマークレットとは?

Webブラウザ上で機能する、簡易の便利機能です。たいていは、表示されているWebページについて何かしらの操作を行います。

中心となるのは、名前からも分かるとおりブックマーク(お気に入り)です。

通常のブックマークは、再び訪れたいページのURLを登録しておくのですが、そのURLの代わりにJavaScriptのコードを登録して、それを発動させる、というのがブックマークレットの仕組みになります。

ブックマークレットの下準備

まず、どこでもいいので、適当なWebページをブックマークしましょう。面倒だったら、今表示しているこのページでも構いません。

とりあえず、Firefoxで話を進めますが、他のWebブラウザでもだいたい似た形で進められると思います。


※メニューから「ブックマーク」。


※ツールバーを選択。


※ツールバーに登録された。

URLを書き換える

先ほど登録したブックマークの情報を覗いてみます。

このURL欄に、JavaScriptのコードを入れて保存すれば、それがブックマークレットとして機能してくれます。

一番簡単なスクリプト

では、実際にやってみましょう。

以下のコードをURL欄に貼り付けてください。

javascript:alert("hello world");

このようになるはずです。

保存して、そのブックマークをポチッと押してみましょう。

こうなったら設定は成功です。ちなみに表示されないときは、コピペがミスっている可能性と、コードがうまく働かないページで実行してしまっている可能性の二つがあります。とりあえず、R-styleでは問題ないので、R-styleでできない場合は、コピペミスの可能性大です。

Scrapboxの公式ブックマークレット

あとは、好きなブックマークレット用のコードをコピペして、利用すればOKです。

が、とりあえず回り道して、Scrapboxの公式ブックマークレットを覗いてみましょう。

settingsの「Page Data」にブックマークレットがあります。

これをブックマークメニューにドラッグすれば登録完了です。

これを起動すると、こんなページが作れます。

で、このブックマークレットの中身を覗いてみると、こんな感じになっています。


javascript:(function(){var title=window.prompt('Scrap "Scrapbox" to %E5%80%89%E4%B8%8B%E5%BF%A0%E6%86%B2%E3%81%AE%E7%99%BA%E6%83%B3%E5%B7%A5%E6%88%BF.',document.title);if (!title) return;var lines=['','['+window.location.href+' '+document.title+']'];var quote=window.getSelection().toString();if (quote.trim()) lines=lines.concat(quote.split(/\n/g).map(function(line){return ' > '+line}));lines.push('');var body=encodeURIComponent(lines.join('\n'));window.open('https://scrapbox.io/rashitamemo/'+encodeURIComponent(title.trim())+'?body='+body)})();

めちゃくちゃ長くなっていますが、形式はさきほどと似ていますね。その他のブックマークレットも基本は同じです。

R-styleお手製ブックマークレットの場合

では、先日の記事のブックマークレットでやってみましょう。

いっそのこと出版社名もScrapboxに取り込んでしまうブックマークレット – R-style

ここまでと同じように、URL欄にコードを放り込みます。

放り込むのは以下のようなコード。

javascript:(function(){var p=document.getElementById("productTitle");if (!p) var p=document.getElementById("ebooksProductTitle");var title=window.prompt('Scrap "Amazon" to your scrapbox.', p.innerHTML);if (!title) return;title='『'+title+'』';var asin=document.getElementById('ASIN');if(asin){var a='ISBN:' + asin.value;}else{var asin=document.getElementsByName('ASIN.0')[0],a='ASIN:' + asin.value;}var detail=document.getElementById('detail_bullets_id');if (!detail) {var subdoc=document.getElementById("product-description-iframe").contentWindow.document;var detail=subdoc.getElementById("productDetailsTable");}var detailtext=detail.innerText;var pubdata=detailtext.match(/(出版社:.+)(\(.+\))/);if (pubdata){pubdata[1]=pubdata[1].replace(/:/,':[');pubdata[1]=(pubdata[1].match(/;/)?pubdata[1].replace(/;/,'];'):pubdata[1] + ']');pubdata[2]=pubdata[2].replace(/\((\d+\/\d+)\//, '([$1]/') + ' ';}else{var pubdata=['','',''];}var d=document.getElementById("productDescription");if (!d) {var subdoc=document.getElementById("product-description-iframe").contentWindow.document;var d=subdoc.getElementById("productDescription");}var d1=d.getElementsByTagName("p")[0];if (!d1) var d1=d.getElementsByClassName("productDescriptionWrapper")[0];var d2=d1.innerText.replace(/\n/g,'\n>');var imagecontainer=document.getElementById("imageBlockContainer");if (!imagecontainer) var imagecontainer=document.getElementById("ebooksImageBlockContainer");var image=imagecontainer.getElementsByTagName("img")[0];var imageurl=image.getAttribute("src");var pub=[];var c=document.getElementsByClassName('author');for (g=0;g < c.length;g++){var at=c[g].innerText.replace(/,/,'');var pu=at.match(/\(.+\)/);var ct=at.replace(/\(.+\)/,'').replace(/ /g,'');pub.push(pu + ' [' + ct + ']');}var lines='['+imageurl+' '+window.location.href+']\n' + pub.join(' ')+'\n'+pubdata[1]+pubdata[2]+a+'\n>'+d2+'\n#本\n';var body=encodeURIComponent(lines);window.open('https://scrapbox.io/rashitaobj/'+encodeURIComponent(title.trim())+'?body='+body)})();

ただし、このままだと、私のプロジェクトに放り込まれるので、最後の方にあるULRの指定を書き換えてください。

以下の部分です。

window.open('https://scrapbox.io/rashitaobj/

もし不安なら、Scrapboxの公式のブックマークレットの中身を確認してください。同じように「window.open」の部分が最後の方にあるので、そのURLと同じ表記であれば問題ないはずです。

あとは、アマゾンの本のページを開いて、ブックマークレットを発動してください。

Scrapbox経由バージョン

いっそのこと出版社名もScrapboxに取り込んでしまうブックマークレット」で紹介した、一回Scrapboxを経由するやり方も見ておきましょう。

構図は以下の形です。

・ブックマークレット→Scrapboxのコードを使ってね、という命令
・Scrapboxのコード→使いたいブックマークレット

最初にブックマークレットが発動して、Scrapboxのページからコードを参照し、それが実行されて、無事ブックマークレット発動、という形です。

よって、ブックマークレットに登録するのは、以下のようなコードになります。

javascript:(function(d,s){s=d.createElement('script');s.src='https://scrapbox.io/api/code/rashitamemo/ISBN%E3%82%84%E5%87%BA%E7%89%88%E7%A4%BE%E3%81%AE%E6%83%85%E5%A0%B1%E3%82%82%E5%8F%96%E3%82%8A%E8%BE%BC%E3%82%80%E3%83%96%E3%83%83%E3%82%AF%E3%83%9E%E3%83%BC%E3%82%AF%E3%83%AC%E3%83%83%E3%83%88/script.js';d.body.appendChild(s);})(document)

で、以下の部分は、ブックマークレットを保存するScrapboxのページのURL(の変形です)。

https://scrapbox.io/api/code/rashitamemo/ISBN%E3%82%84%E5%87%BA%E7%89%88%E7%A4%BE%E3%81%AE%E6%83%85%E5%A0%B1%E3%82%82%E5%8F%96%E3%82%8A%E8%BE%BC%E3%82%80%E3%83%96%E3%83%83%E3%82%AF%E3%83%9E%E3%83%BC%E3%82%AF%E3%83%AC%E3%83%83%E3%83%88/script.js

ページのURLと比べてみると、冒頭部分が少し変わっていますね。このURLが間違っているかどうかは、このURLにアクセスしてみればわかります(なのでリンクにしておきました)。

記載ミスがなければ、次のようなコードが表示されるはずです。

つまり、上のブックマークレットは、このコードを呼び出して使っているわけですね。

で、そのScrapboxのページは、以下のようなページです。

ISBNや出版社の情報も取り込むブックマークレット – 倉下忠憲の発想工房

ここも最後のURLは、ご自分のプロジェクトのURLに変更しておいてください。

とは言え、このやり方は変則的というか、「どうしょーもなく長い」場合だけの緊急的措置です。

普通は、直接ブックマークのURL欄にコードを登録しておけばよいでしょう。

さいごに

というわけで、今回はブックマークレットの作り方を紹介してみました。

できるだけ細かい部分はフォローしたかと思いますが、Webブラウザの種類によっては勝手が変わってくるかもしれません。その辺は、適宜読み替えてくだされば幸いです。