行番号表示スイッチ
https://gyazo.com/1a144981baf738af3c0b0b2ed08f86ee
Scrapboxの任意のページに書かれたJavaScriptをBookmarkletから実行する試みです。
不具合があったので改修しました。
参考　/nishio/Scrapboxでブックマークレットを作る
scrapbox　プロジェクト名：XXXXX　ページ名：YYYYY　に次のスクリプトを書く。
CSSに定義されている（はずの） 変数--My-ALT-SW-Aの値を読み出して
値が 0 ならば 1 に、 0 でなければ リセットする。
ON/OFFを切り替える オルタネイトスイッチのプログラム。　
code:script.js
var cssVarValue = getComputedStyle(document.documentElement).getPropertyValue('--My-ALT-SW-A').trim();
if (!cssVarValue) {
alert(変数--My-ALT-SW-A の定義がありません。);
} else {
if (cssVarValue === '0') {
document.documentElement.style.setProperty('--My-ALT-SW-A', '1');
document.body.dataset.myAltSwA = '1';
alert(SW-A = 1 : ON にします。);
} else {
// リセットはページリロードで行う
// もう一回RUNされてもリセット
alert(SW-A = 0 : OFF にします。);
location.reload();
}
}
このスクリプトを読み込んで実行する Bookmarklet も AI に書かせた！
連続操作するとハングするので、原因を推定してもいらい、コードを修正させた。
code::
javascript:(function() {
var url = "https://scrapbox.io/api/code/XXXXX/YYYYY/script.js";
var existingScript = document.querySelector(script[src="${url}"]);
if (!existingScript) {
var elm = document.createElement('script');
elm.setAttribute('src', url);
elm.onload = function() {
this.remove();
};
document.body.appendChild(elm);
}
})();
内容
１）読み込むスクリプトを変数urlに指定する。
２）このスクリプトがすでにページに存在するかどうかを確認する。
３）スクリプトが存在しない場合、新たにscript要素を作成し、そのsrc属性に指定したURLを設定する。
４）そのスクリプトが読み込まれた後、そのscript要素はページから削除される。
このブックマークレットによって、指定したURLのJavaScriptを一時的に現在のページに適用することができる。
即時実行関数
即時実行関数は、関数が定義された直後に実行される。
これにより、ブックマークレットがクリックされたときにコードがすぐに実行されるようになる。
また、即時実行関数は新たなスコープを作成するため、ブックマークレットのコードが他のJavaScriptコードと変数名が衝突することを防ぐ。
スクリプトの削除
スクリプトの削除は、ブックマークレットが追加したスクリプト要素をページから削除することで、ページのパフォーマンスを維持する。
スクリプトが読み込まれて実行された後、そのスクリプト要素はもはや必要ないため、ページから削除される。
Bookmarklet のためのコード変換サービスを利用する。
Bookmarklet Creator with Script Includer - Peter Coles
code::
javascript:(function()%7Bvar%20url%20%3D%20%22https%3A%2F%2Fscrapbox.io%2Fapi%2Fcode%2FXXXXX%2FYYYYY%2Fscript.js%22%3Bvar%20existingScript%20%3D%20document.querySelector(%60script%5Bsrc%3D%22%24%7Burl%7D%22%5D%60)%3Bif%20(!existingScript)%20%7Bvar%20elm%20%3D%20document.createElement('script')%3Belm.setAttribute('src'%2C%20url)%3Belm.onload%20%3D%20function()%20%7Balert(%60%24%7B%7D%20%5Cn%20%E3%82%92%E8%AA%AD%E3%81%BF%E8%BE%BC%E3%82%93%E3%81%A7%E5%AE%9F%E8%A1%8C%E3%81%97%E3%81%BE%E3%81%99%E3%80%82%60)%3Bthis.remove()%3B%7D%3Bdocument.body.appendChild(elm)%3B%7D%7D)()
これをブラウザのブックマークのアドレスに登録。
ブックマーク名は任意。　
ここまでは準備！
行番号の表示／非表示を切り替えるスイッチ　
参考　/scrasobox/行番号を表示する
以下は　Setting　の　UserCSS　に記述する。
変数定義して初期値を設定する。
code:style.css
:root {
--My-ALT-SW-A: 0;
}
code:style.css
/* 行番号を表示 -- ウィンドウ幅768px以上で適用 */
@media screen and (min-width: 768px) {
.lines { counter-reset: line }
/* タイトルから数えるときは :not(.line-title) を消してね */
.line:not(.line-title) { counter-increment: line }
/* タイトルから数えるときは :not(.line-title) を消してね */
.app:not(.presentation) .line:not(.line-title)::before {
content: counter(line);
position: absolute; display: inline-block; left: -107px; z-index: 10;
min-width: 50px; text-align: right; vertical-align: middle;
/* 行番号のフォントとか色とかの指定はここ */
font-family: 'Century Gothic'; color: #474;
opacity: calc(var(--My-ALT-SW-A)*0.8); /* 透明値ゼロで消す */
}
/* カーソル行の行番号を濃く表示する */
.line:not(.line-title)::before { opacity: .5 }
.line.cursor-line:not(.line-title)::before {
opacity: 1; font-weight: bolder
}
}
opacity: calc(var(--My-ALT-SW-A)*0.8);
として、　--My-ALT-SW-A の値によって透明化している。
Bookmarkletには危ない面もありそう。ご利用は計画的に！
#Bookmarklet #ブックマークレット #UserCSS
Spica - Scrapbox研究会