ブックマークレット(Bookmarklet)のススメ、例えばjQueryを読み込んでみる

ブラウザのブックマークにJavaScriptを仕込んでおく、いわゆるブックマークレット(Bookmarklet)って便利ですよね。

ブックマークレットの作り方

まあ説明するほどでもないのですが。普通にブックマークを作成して、そのURL欄に実行したいJavaScriptコードを入力するだけ、ですね。最初に javascript: を付けることをお忘れなく。

このブックマークレットを選択すると、いま開いているWebページを対象に、入力したJavaScriptコードを実行してくれます。

jQuery を読み込むブックマークレット

最近はjQueryに慣れてきたので、ChromeのDev toolなどのコンソール画面などでも、jQueryを使ってDOM操作することが多くなってきました。jQuery を使っていないサイトだと、機能が使えなくて操作に戸惑うときがあります。

その時に便利なのが、jQueryを読み込んで使えるようにしてくれるブックマークレットです。

まあ原理は簡単で、以下のように今見ているページに <script> タグを追加して jQuery の JSファイルを読み込ませているだけ、なんですけどね。

javascript:
(function(){
function LJS(_u,_n){
if (_n&&this[_n]) return;
var e=document.createElement("script");
e.src=_u;
var b=document.getElementsByTagName("body");
if (b.length>0) {
b[0].appendChild(e);
console.log("LJS Load: " + _u)
}
}
LJS("https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js","jQuery");
})();

ここで定義しているLJS関数は汎用的に使えるので、同じような目的に利用していただければ。

ちなみに第二引数に名称(文字列)を指定すると、その名称が事前に登録されていれば処理をスキップします。今回は jQuery を指定しているので、既に jQuery が読み込まれている環境では何もしない、という動作になります。

まあ今回のコレは単純すぎる例ですが、気軽に作れるわりには、けっこう便利だったりするので、JavaScript を書けるヒトは是非、遊んでみてください。

このページ印刷するとき、いつもこの広告が邪魔で… とか、会議のスクリーンで皆がWebページを見ているとき、フォントが小さすぎて読めない…とか。ちょっとしたことで困っている方が居たら、ブックマークを作ってあげると喜ばれる!かもしれませんよ。

ではでは。

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.