Page MenuからScrapCalcを動かす
(ブックマークレット不要になりました)
激しく苦しい方法で a = 10
みたいなグローバル変数にアクセスできるようにしている
UserScriptは strict
なので a=10
みたいなのを eval
しても変数未定義エラーになってしまうらしいので
変数名に日本語使うとわかりやすい
計算結果をDOMに反映する処理までまとめて
Function()
に放り込んでいるんですね
勉強になります
実装が苦しいのはともかく、こういうのは便利だと思います
因みに配列に対応とか難しいですか?
配列欲しいですが、
]
が修飾記法の区切りだと思われてしまいますね...
数式記法
[$ [hoge] ]
の場合、一番最後の
]
がスペースついて
]
だとそっちを記法の綴じカッコとして解釈されます
[hoge]こんなん
なので他の記法でもこういうふうにしてもらうよう要望するのも良いかも?
他の影響がありそうで難しいかな
あーなるほど
[= a[10]]
みたいに全角文字で [
を書くととりあえず動くようにしました
ありがとうございますぅ
サンプル
a = 10 b = 20
a × b = a * b
東京オリンピックまで Math.floor((new Date(2021,7,23) - Date.now()) / (24 * 60 * 60 * 1000)) 日
あれ、計算違ってる?
東京オリンピックまで Math.floor((new Date(2021,6,23) - Date.now()) / (24 * 60 * 60 * 1000)) 日 が正しいようだ
(もうすぐ
\infになりそうな…)
応用例
電卓みたいにちょっとした計算に使う
\sqrt{2} = Math.sqrt(2)
今日の日付 = Date()
PI = Math.atan(1) * 4
この用途の場合だと、DOMではなくscrapbox上の文字自体を書き換えた方が便利そう
Issues
リロードしてからでないと再計算できない
innerHTMLを書き換えるのをやめればいいのか?
対策
書き換えたDOMを何らかの形で保持しておく
DOMにdata属性を持たせるのが簡単かも
DOM書き換えるのをやめればいい?
リロードでなくてもいいのか
ページ移動したら再計算できる
使い方
以下のUserCSSとUserScriptを自分のページに貼ると使えます
[% 数式 = 0]
⇒ 数式 = 0
style.css .deco-\= {
color: #111;
background-color: #ffddff;
padding: 0.1em 0.2em 0.1em 0.2em;
}
script.jsfunction strict(){
const commands = [];
let count = 0;
for(let expr of document.querySelectorAll('.deco-\\=')){
const text = expr.innerText;
if(text.match(/=/)){
// 全角 [ を半角 [ にする
commands.push(decodeURI(text.replace(/[/g,'[').replace(/]/g,']')) + ';');
}
else {
let processed = false;
for(let e of expr.children){
let id = `scrapcalc_element_id_${count}`;
e.id = id;
if(processed){
commands.push(`document.getElementById("${id}").innerHTML = "";`);
}
else {
processed = true;
commands.push(`document.getElementById("${id}").innerHTML = "<span style='font-style:italic;font-weight:bold;'>"+(${decodeURI(text.replace(/[/g,'[').replace(/]/g,']'))})+"</span>";`);
}
count += 1;
}
}
}
return commands.join("\n");
}
scrapbox.PageMenu.addMenu({
title: 'ScrapCalc',
image: 'https://gyazo.com/5441ee8eb0bf51650a91751e48669c21/thumb/48',
onClick: () => {
const sneaky = Function(`(() => {${strict()}})();`);
sneaky();
},
});
以下のようにするとショートカットキー(Ctrl-C)で呼び出せる
script.jsdocument.addEventListener('keypress', e => {
if (e.key == 'c' && e.ctrlKey){
const sneaky = Function(`(() => {${strict()}})();`);
sneaky();
}
})
これ動かないけどなんでじゃろ。。。
動くようになった、、謎。。。まあヨシ!