見出し画像

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

今まで全然知らなかったけれど、調べてみたらすごく簡単でした。

■ ブックマークレットの作り方
https://slash-mochi.net/?p=1266
(なぜかリッチリンクが使えなかったのでテキストリンクです)

上記記事がメッチャ分かりやすかったです。
要するにURL欄に「javascript:」で書き始めるとJSが動かせるので、ソレをブックマーク欄に登録すればブックマークレットになりますよ、というものでした。

上記記事によるとjQueryも使えます。
でもjQueryが許されるのは小学生までだよねー、キャハハハハハ。
うっ…(´;ω;`)

心は小学生なのでノーカンです。
実際に作ってみた「日テレニュース24を全画面で見るブックマークレット」は下記です。

javascript:

//最初にjQueryを読み込む
! function (d, f, s) {
 s = d.createElement("script");
 s.src = "//code.jquery.com/jquery-3.3.1.min.js";
 s.onload = function () {
   f(jQuery.noConflict(1))
 };
 d.body.appendChild(s)
}(document, function ($) {

//ここからが実際に動く部分
 if ("www.news24.jp" == location.hostname) {
   $("video").parent("div").css({
     width: "100vw",
     height: "100vh",
     position: "absolute",
     left: "0",
     top: "0",
     "z-index": "1000"
   });
   $("html").css("overflow", "hidden");
 } else {
   location.href = "http://www.news24.jp";
 }

})

実際には上記のコードをminifyしてaタグのhrefに書いてます。
なお動くやつは百済に置いてあります。

単純にvideo要素の親要素をブラウザサイズで全画面にしています。
デベロッパーツールとかに手打ちでも良いんだけど、毎回打つのが面倒なのでブックマークレットにしました。
日テレニュース24以外のサイトで動くと何が起こるかわからないので、日テレニュース24じゃないサイトで押すと日テレニュース24にジャンプします。

ブックマークレットですが、少し調べてみるとなかなか奥が深い、というか便利な開発方法が色々あるようです。

人類にとっては小さな一歩ですが、僕にとっては大きな一歩となりました。

この記事が気に入ったらサポートをしてみませんか?