webGlの学習をひと段落させ、今回はブックマークレットについての学習を行いました。
実際の学習では実務に直結する内容のブックマークレットを作成した為この記事で解説等は出来ないのですが、ここに投稿する為にごく簡単な内容のブックマークレットを作成してみました。
学習記録 ※どこか間違っていたらすみません…
１・概要
ブックマークレットとは、ブラウザのブックマークのURLにjavascriptのソースコードを入力する事で現在アクセスしているページに対してjavascriptで処理を行う方法です。
２・作り方
１・即時関数を作成して、ブックマークレットでやりたい事を一通り書き込みます。
２・作成した即時関数を下記のサイトでブックマークレットに最適な書式に変換します。
https://crocro.com/tools/item/gen_bookmarklet.html
３・ブラウザのブックマークに ２ で変換したソースコード一式をコピペする。
完成！
そして、記事投稿用に作成したサンプル用ブックマークレットがこちらです。
スクリーンショット用著作権バリアー
ブックマークレット
javascript:(function(){const copyright=Array.from(document.body.querySelectorAll("img, svg, iframe")).map((value)=>{value.style.filter="blur(10px)"})})();void(0);
※コード成型前
(function () {
const copyright = Array.from(document.body.querySelectorAll("img, svg, iframe")).map((value) => {
value.style.filter = "blur(10px)";
});
})();
解説
このブックマークレットを使用すると、現在表示されている全ての画像・SVGデータ・iframeにstyleでfilter:blur(10px)を追加します。
（…実務に関係しない簡単なサンプルを考えた結果、このブックマークレットが誕生しました。）
このブックマークレットを例えば某動画投稿サイトのTOPページで使用すると、以下の様な状態になります。
どうでしょう、不思議と著作権が守られている様な気持ちになるのは自分だけでしょうか…？
今まで実務とは直接関係ないジャンルを通して各種プログラミングの勉強を行ってきましたが、いざ実務に直結する内容のツールを作ってみると、まだまだ至らない部分はあるものの、今まで学習してきた事が点と点が繋がっていくようにツール作成に役立ってくれたので、自分の成長度合いを測る為のいい機会になったと思います。