5
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

個人的に愛用しているブックマークレット(BML)3選

Last updated at Posted at 2020-01-14

前置き

突然ですが、ブックマークレット(BML)はお使いでしょうか?
私はというと、ほぼ毎日普段からよく使用しております。

ブックマークレットをあまり知らない人のためにざっと説明すると、**「URLの変わりに、Javascriptによる処理を埋め込んだブックマーク」**だと思っていただければ、それで概ね正解です。簡単に例を見ていきましょう。

あなたのブラウザでブックマークを新規作成(または既存のブックマークを編集)し、URL欄に下記の処理を埋め込みます。ブックマークの名前は適当で結構です。

javascript:(function(){alert("hoge");})();

作成したブックマークを実行すると、以下のようなJavascriptによるアラートのポップアップが表示されるはずです。
image.png

なるほど、素晴らしい!Javascriptをワンクリックで実行できるなんて、まるで夢のようですね。それは言い過ぎですかね。そうですね。

というわけで、ブックマークレットが大変便利だということをご理解いただけたところで、私が普段から愛用しているブックマークレットを3つご紹介させていただきます。

ブックマークレット3選

以下、2種類のコードを記載しております。(整形版)は可読性を高めるために整形したコード、(BML版)はブックマークレットとしてそのまま登録可能なコードです。

UnveilComment(コメント表示・非表示)

(整形版)UnveilComment.js
javascript:(function(){

var CNAME = 'unveil';
var unveil = function(node) {
  var nodes = node.childNodes;
  for (var i = 0; i < nodes.length; i++) {
    if (nodes[i].nodeType === Node.COMMENT_NODE) {
      var newNode = document.createElement('span');
      newNode.className = CNAME;
      newNode.style.color = 'red';
      newNode.style.border = '1px solid red';
      newNode.innerHTML = '&lt;--' + nodes[i].data + '--&gt;';
      node.replaceChild(newNode, nodes[i]);
    } else {
      unveil(nodes[i]);
    }
  }
  window.__unveil = true;
};

var display = function(node, value) {
  if (node.className == CNAME) {
    node.style.display = value;
  }
  for (var i = 0; i < node.childNodes.length; i++) {
    display(node.childNodes[i], value);
  }
};

if (window.__unveil === undefined) {
  unveil(document.body);
} else if (window.__unveil) {
  display(document.body, 'none');
  window.__unveil = false;
} else {
  display(document.body, 'inline');
  window.__unveil = true;
}

})();
(BML版)UnveilComment.js
javascript:(function(){var CNAME = 'unveil'; var unveil = function(node) {var nodes = node.childNodes; for (var i = 0; i < nodes.length; i++) {if (nodes[i].nodeType === Node.COMMENT_NODE) {var newNode = document.createElement('span'); newNode.className = CNAME; newNode.style.color = 'red'; newNode.style.border = '1px solid red'; newNode.innerHTML = '&lt;--' + nodes[i].data + '--&gt;'; node.replaceChild(newNode, nodes[i]); } else { unveil(nodes[i]); }} window.__unveil = true;}; var display = function(node, value) {if (node.className == CNAME) {node.style.display = value; } for (var i = 0; i < node.childNodes.length; i++) { display(node.childNodes[i], value); }}; if (window.__unveil === undefined) { unveil(document.body); } else if (window.__unveil) { display(document.body, 'none'); window.__unveil = false; } else { display(document.body, 'inline'); window.__unveil = true; }})();

解説

現在ブラウザ上で表示されているサイトの、HTML上のコメントの表示・非表示を切り替えるツールです。一押しするとコメント部分が赤く表示され、もう一押しするとコメントが非表示になり元に戻ります。面白いので、皆様にもぜひ使っていただきたいです。
Ctrl + Uを押せばHTMLのソースの確認は確かにできますが、サイトのコメント部分を訪問者側の意思で、思うままに表示させる全能感をぜひ味わっていただければと思います。
ちなみに、このツールは山宮隆さんがその昔に作成されたスクリプトが元になっております。

CrackPassform(パスワード表示)

(整形版)CrackPassform.js
javascript:(function(){

var s,F,j,f,i; 
s = ''; 
F = document.forms; 

for(j=0; j<F.length; ++j) { 
  f = F[j]; 
  for (i=0; i<f.length; ++i) { 
    if (f[i].type.toLowerCase() == 'password') 
      s += f[i].value + '\n';
  } 
} 

if (s) 
  alert('Passwords in forms on this page:\n\n' + s); 
else
  alert('There are no passwords in forms on this page.');

})();
(BML版)CrackPassform.js
javascript:(function(){var s,F,j,f,i; s = ''; F = document.forms; for(j=0; j<F.length; ++j) { f = F[j]; for (i=0; i<f.length; ++i) { if (f[i].type.toLowerCase() == 'password') s += f[i].value + '\n'; } } if (s) alert('Passwords in forms on this page:\n\n' + s); else alert('There are no passwords in forms on this page.');})();

解説

ブラウザ上表示されないパスワードフォームの文字列をポップアップ表示するツールです。「ブラウザがパスワードを記憶しているからいつもログインできてるけど、このパスワードってなんだっけ?」と思う経験、皆さんありますよね?あるはずですね。そんなとき、パスワードフォームがフォーカスされた状態でツールを実行すると、パスワードを平文で表示してくれます。
確か、このツールも昔ネット上で拾ったものです。作者の方は誰なんでしょう?

ShowGlobalIpAddress(グローバルIP取得)

(整形版)ShowGlobalIpAddress.js
javascript:(function(){

window.callback = function(obj) {
 alert('Your Global IP Address : ' + obj.ip);
};

var d = document;
var e = d.createElement('script');
e.charset='utf-8';
e.src = 'http://jsonip.com/callback';
d.getElementsByTagName('head')[0].appendChild(e);

})();
(BML版)ShowGlobalIpAddress.js
javascript:(function(){window.callback = function(obj) { alert('Your Global IP Address : ' + obj.ip);};var d = document;var e = d.createElement('script');e.charset='utf-8';e.src = 'http://jsonip.com/callback';d.getElementsByTagName('head')[0].appendChild(e);})();

解説

あなたがインターネットにアクセスする際の、ルータのグローバルIPアドレスを表示するツールです。プライベートIPではなくグローバルIPなのでお間違いなく。
AWSやAzure等のクラウド環境で開発している場合、アクセス元のソースIPを絞ったりするのは一般的によくある話ですが、その際に自分のグローバルIPアドレスを確認するためにCMANAWSのcheckipにいちいちアクセスするのはまどろっこしいですよね?そんなとき、こちらのツールを使えば一発でグローバルIPを取得できます。
こちらのツールはじゅんぺーさんという方が開発されたもので、じゅんぺーさんのブログで内容を説明してくださっております。気になる方はブログの方も要チェキラ!

JSONPで遊んでみた(http://junpei1982.blogspot.com/2011/05/jsonp.html)

おわりに

私のお気に入りのブックマークレットを列挙してみましたが、ほとんどクラック系?のブックマークレットになってしまいました。「他にもこんなに便利なBMLがあるよー」という方は、ぜひコメントにて教えていただければと思います。
また、記載の誤り等あればぜひご指摘をお願いします。

参考サイト(お世話になった方々)

山宮隆さん
サイト:http://metatoys.org/propella/

じゅんぺーさん
サイト:http://junpei1982.blogspot.com/

5
1
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
5
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?