アイコンボタン
/scrapboxlab/UserScript版アイコンボタン
を勝手にサポートするページ
button1(仮名)
eval を使用したversion
evalは非推奨 eval() - JavaScript | MDN
↓自分のページのscript.js に追加
code:js
import '/api/code/scrapboxlab/UserScript版アイコンボタン/script.js'
アイコンボタンの作成手順
アイコンボタン用のScrapboxページを作る
Scrapboxページは、必ず「-button」で終わる仕様である
例 : hello-world-button
アイコンボタン用のScrapboxページにアイコン用の画像を貼る
アイコンボタン用のScrapboxページにスクリプトを書く
スクリプトは、必ずbutton.js という名前にする仕様である
それ以外は、UserScript と同じ
例
code:button.js
alert("Hello, world!");
button2(仮名)
dynamic importを使用したversion
↓自分のページのscript.js に追加
code:js
import '/api/code/scrapboxlab/UserScript版アイコンボタン/script2.js'
アイコンボタンの作成手順
アイコンボタン用のScrapboxページを作る
Scrapboxページは、必ず「-button」で終わる仕様である
例 : hello-world-button
アイコンボタン用のScrapboxページにアイコン用の画像を貼る
アイコンボタン用のScrapboxページにスクリプトを書く
スクリプトは、必ずbutton2.js という名前にする仕様である
それ以外は、UserScript と同じ
button2.jsでは、必ずexecute() という関数をexportしなければならない
script2.js側からexecute()を実行できるようにする
例
code:button2.js
export const execute = () => alert("Hello, world!");
button1 と button2 はほぼ同じですが、同一のリソース(アイコン画像)を取り合うので、共存できません
注意してください
mobile端末からだと実行できないみたい?
click eventが発生しないのかなあ。
Chromebookタブレットモードからだと正常に動きますよ
スマホからも動きましたよ
Aquos Sense
同じくAquos Sense 3だったのですが……
また後で試してみます
今日の日記-button.icon 今日の日記-button
random-usercss-button.icon random-usercss-button
d3-piechart-button.icon d3-piechart-button D3.jsの描画デモ(円グラフ)
d3-csv-barchart-button.icon d3-csv-barchart-button D3.jsの描画デモ(棒グラフ)
d3-script-button.icon d3-script-button D3.jsの描画デモ(汎用)
p5-sketch-button.icon p5-sketch-button p5.jsの描画デモ
p5-Mandelbrot-button.icon p5-Mandelbrot-button p5.jsの描画デモ その2
viz-script-button.icon viz-script-button viz.jsの描画デモ
hello-world-button.icon hello-world-button アイコンボタンのデモ
#icon-button
UserScript.icon