Scrapboxで未チェックのチェックボックスの個数をカウントして表示する

モチベーション

Scrapboxで以下のチェックボックスがタグになるUserScriptとUserCSSを利用している。

scrapbox.io

チェックボックスは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、補完が効いて便利だった。

参考