モチベーション
Scrapboxで以下のチェックボックスがタグになるUserScriptとUserCSSを利用している。
チェックボックスはTODOリストのように使う時があるのだが、このチェックリストの個数を可視化したい。目的として未チェックのみ数えられれば良いので未チェックのみ数える。
つくったもの
[_]
をカウントしてページ左下に表示する。
コード (JavaScript)
// inspired by https://scrapbox.io/scrasobox/見える文字数カウンター const __appliedProject__ = scrapbox.Project.name const __checkBoxCouterSetup__ = setInterval(function () { const countUncheckedCheckBox = function (lines) { let count = 0 for (const line of lines) { if (line.match(/\[_\]/)) { count++ } } return count } if (document.getElementById('editor') && scrapbox.Page.lines) clearInterval(__checkBoxCouterSetup__) else return // ページの準備ができてないときはまた3秒待つ const $id = id => document.getElementById(id) const $query = q => document.querySelector(q) let lines = scrapbox.Page.lines.map(line => line.text) const checkBoxCount = document.createElement('div') checkBoxCount.id = '__checkBoxCount__' checkBoxCount.innerHTML = `<span>Unchecked: ${countUncheckedCheckBox(lines)}</span>` $id('editor').appendChild(checkBoxCount) const counter = $query('#__checkBoxCount__ span') const updateCounter = function () { if ($query('.presentation') || scrapbox.Project.name !== __appliedProject__) { checkBoxCount.style.display = 'none' } else if (scrapbox.Page.lines) { lines = scrapbox.Page.lines.map(line => line.text) counter.innerText = `Unchecked: ${countUncheckedCheckBox(lines)}` checkBoxCount.style.display = 'block' } } $id('text-input').addEventListener('input', updateCounter) $id('text-input').addEventListener('paste', updateCounter) setInterval(updateCounter, 3000) }, 3000)
コード (CSS)
#__checkBoxCount__ span { cursor: not-allowed; font: 90%/1 monospace; opacity: .50; } #__checkBoxCount__ { z-index: 30; position: sticky; bottom: 0; text-align: right; }
Chromeのデベロッパーツールのconsole、補完が効いて便利だった。