[JS初心者向け]既存のブックマークレットをカスタマイズして自分好みに変えよう！

始めに言っておきますが、さわさわ(@sw2x)もド素人です。

拾ってきたブックマークレットをずっと使っていたのですが、自分で考えて作った物でないとかゆい所に手が届かない…

だったら自分でカスタマイズすればいいじゃない!と思ったのでやってみました。
コードの意味さえわかればjavascript初心者でも簡単にカスタマイズできちゃいます！

こんな風にカスタマイズしてみました！

ちょっと待て!ブックレートって何?

Bookmarklet。ウェブブラウザで作動するJavaScriptプログラムの一種。

通常ウェブブラウザでブックマーク（お気に入り）を選ぶと、登録しておいたURLに遷移するが、URLの代わりにJavaScriptのプログラムコードをブックマークしておくことで、それを選んだ時にプログラムが実行されてちょっとした機能が実現できる。そのようなものをブックマークレットと言う。

さらに詳しくは
ブックマークレットとは – はてなキーワード

どんなブックマークレットがあったら便利か？

ネットで「ブックマークレット」を検索するといろいろなブックマークレットがあります。
その中で普段から使っているのが、今見ているページのURLとタイトルをはき出してくれるブックマークレット。

javascript:var%20url=location.href;var%20title=document.title;
var%20linkTag%20='%3Ca%20href=%22'+url +'%22%20title=%22'+title+'%22%3E'+title+'%3C/a%3E';
var%20x%20=%20prompt('',linkTag);

aタグにtitleタグを入れてくれるナイスなやつです。 他にも楽天などで今開いているページのリンクをアフィリエイトリンクに変えてくれるブックマークレットなんかがあったら便利だと思いますが、いきなりそんなことできるわけがないので…まずは上記のコードをカスタマイズしてみるとします。

なんか最初は全然わからなかったがPHPの勉強をしている今、ぼんやりと理解できる気がする！

どんな構造になってるんだろう？

まずはわかりやすいように切り分けられそうな部分で切り分けてみます。(適当にザクザクと)

1. javascript:
2. var%20url=location.href;
3. var%20title=document.title;
4. var%20linkTag%20='%3Ca%20href=%22'+url+'%22%20title=%22'+title+'%22%3E'+title+'%3C/a%3E';
5. var%20x%20=%20prompt('',linkTag);

まぁなんのこっちゃわかりませんが今までの挙動から考えてみます。

「javascript:」これはjavascriptでの命令ですよ！と宣言するものでしょう。必須ですね。
「var%20url=location.href;」と「var%20title=document.title;」はjavascriptで変数を作っていますね。

問題はlinkTagの部分ですね。ここは放っておきましょう。
最終的に動く物を作れればいいのです。

よく見るとHTMLソースコードみたいなところが少し見え隠れしています。
どうやらここをいじれば理想のブックマークレットが作れそうな気がしませんか？

1行目、2行目、3行目、5行目はこのブックマークレットの命令文を制御している部分なのでしょう。
きっとそうに違いありません。(ちゃんと調べてないのでわかっていません。)

ですので4行目をいじり倒していきたいと思います。

どこがどうなっているのか？

実際にブックマークレットではき出したURLと見比べてみましょう。やっぱり似ていますね

<a href="https://www.google.co.jp/" title="Google">Google</a> var%20linkTag%20='%3Ca%20href=%22'+url+'%22%20title=%22'+title+'%22%3E'+title+'%3C/a%3E'; 

では細かく分解してみるとしましょう。

var%20linkTag%20= '%3Ca%20href=%22' +url+ '%22%20title=%22' +title+ '%22%3E' +title+' %3C/a%3E'; 

一番上の「var」から始まる物は変数を定義している部分でした。
「=」の後が重要そうです。

hrefとurlとtitleっていうのはちゃんと読めるかと思います。
hrefがあるってことはaタグを使ってるな?と考えられます。

hrefの前のコードに注目してみます。

%3Ca%20href=%22 

%3Cと%20の間にaタグの「a」を発見しました!
%3Cと%20を抜かして表記すると

a href=%22 

こうなりますね! そうなると…%3Cが「<」ってことになる気がしませんか？ さらにaとhrefの間の半角スペース！こいつが「%20」な気がします。 そこから他の部分も見てみると「%22」と「%3E」っていうのがありますね。 「%22」は「”(ダブルクォーテーション)」で「%3E」は「>」でしょう。

上記の通りにコードを書き直してみると以下のようになります。

では、吐き出したリンクにはてブの数がついてくるリンクをはき出したいと思います。

var linkTag =<a href="url" title="title">title</a>; 

かなりわかりやすくなりました。
「url」と「title」の部分は最初の方で変数として読み込んでるので詳しい事はjavascriptを調べてみてください。

実際にカスタマイズしてみた

今のままだとtitleが入ってる普通のリンクテキストになってしまうのでここに「別窓で開く」と「はてなブックマークの数を表示」を追加してみたいと思います。

target="_blank" <img src="http://b.hatena.ne.jp/entry/image/'開いているページのURL'"> 

上記のコードを先ほど解読したルールを元に記述していきます。

target=%22_blank%22 %3Cimg%20src=%22http://b.hatena.ne.jp/entry/image/'+url+'%22%3E 

これをしかるべき箇所に挿入すれば

Yahoo! JAPAN

こんなリンクを簡単に作る事ができます。
それにしてもYahooのはてブ数ハンパないですね！

今回は簡単なところでの変更点だったのでがっつりと変更したり、新規で制作する場合はjavascriptの知識が必要になってきますので勉強してください。さわさわ(@sw2x)も勉強したいと思います。

他にもたくさんあるブックマークレット

かちびと.netさんの頻繁に使用している便利なお役立ち系ブックマークレット・19個 – かちびと.net で紹介されていますので興味がある方はぜひ見てください。

便利すぎて抜け出せなくなりますよ？

補足：Google.co.jpは309人にはてブされてました。
だいたいがホームページにしてるか、ブックマークしてるからわざわざはてなブックマークで登録する人はいないようですね。

今回カスタマイズしたブックマークレットはこちらです。 リンク作成(はてブ数付き)

リンクをブックマークにドラッグ＆ドロップしていただければ使えます。

あまり難しくない物ならこんな感じで簡単にカスタマイズする事ができますよ！ 以上、ブックマークレットのカスタマイズでした！