#10 コードブロックごとにjsを実行するUserScript
YATTA!駆動開発の第10回。ScrapboxでコードブロックごとにJavaScriptを実行するUserScriptについて
https://www.youtube.com/watch?v=JyEaccqgtPw&feature=youtu.be
基本情報
前回:#09 超ハッカソン VRM対応ブラウザゲームの制作
次回:#11 AR.jsのNFTでVRMモデルを表示する
参考にさせていただいた元ネタ:/miyamonz/コードブロックのjsを実行するUserScript
実際のコードはここ
ScrapboxでコードブロックごとにJavaScriptを実行するUserScript
ScrapboxでコードブロックごとにJavaScriptを実行するUserScript
/miyamonz/コードブロックのjsを実行するUserScriptがScrapbox内でJupyter Notebookみたいで面白かったので自分でも作ってみました
ScrapboxのAPIからコードブロックの内容を取得しています
https://scrapbox.io/api/code/[プロジェクト名]/[ページ名]/[付けたファイル名]
そのためコードブロックごとに一意な名前をつける必要がある
少しめんどくさいけしごむ.icon
/miyamonz/コードブロックのjsを実行するUserScriptではscrapbox.Page.linesから結合してeval()で実行している
グローバル変数を使うとコードブロック間で変数を受け渡せる
JavaScriptを動的読み込みする
jQueryなどを使わなくても複数のやり方があったのでメモしておきました
JavaScriptを動的読み込みする
今回は3番目のjQueryのgetScriptを素のjsで再現するやり方を使いました
ThrottleとDebounce
心の中でふんわりと間引き処理と呼んでいたものにちゃんと名前がついていたのを知ったのでメモ
Throttle
大量に繰り返される処理を一定間隔で間引く
スクロールイベントとか
Debounce
一定時間内に大量に繰り返される処理を最後の一回だけ実行する
今回実行ボタン生成に使用した
キー入力時にdebounce処理
参考
https://twitter.com/moyaminC/status/1264512799180558337?s=20
/miyamonz/コードブロックのjsを実行するUserScript
jQuery.getScript と同じことを素の Javascript でやる
jQuery.getScript alternative in native JavaScript
throttleとdebounce
次回は#11 AR.jsのNFTでVRMモデルを表示する