Secret Page
カジュアルにプライベートなプロジェクトを見せたい時に秘密にしたいページにモザイクをかけるUserScript
見せちゃいけないページを自分が開かない効果もある
相手に操作させると普通に見れるので注意
実装
特定のリンクを持つページにモザイクがかかる
デフォルトだと
#Secret がついているページが対象 Ctrl + Shift + e でトグル基本はオフにしておいて、見せる時にショートカットでオンにする運用を想定
見たくないページを封印する用途に使いたい場合は、
hideAtStart を true にする仕様上、タグを付けたり外したりしてもリロードするまで反映されない
応用
特定のリンクを持つページに好きなCSSを与えられる
ちょっといじると
#アイディア がついているページの枠を赤にしたりできるscript.js
// このハッシュタグがついているページにブラーがかかる
const secretTag = 'Secret'
const hideAtStart = false
const stylesheet = document.styleSheets[0]
const rulesLength = stylesheet.rules.length
const ProjectName = scrapbox.Project.name
let isHide = hideAtStart
let urls = []
async function load() {
const data = await fetch(`/api/pages/${ProjectName}/${secretTag}`).then(res => res.json())
urls = [...data.relatedPages.links1hop.map(l => l.title), secretTag]
.map(s => s.replaceAll(' ', '_')).map(s => `/${ProjectName}/${encodeURIComponent(s)}`)
if(hideAtStart) blurPages(urls)
}
// ページをぼかす style を `{display: none!important;}`にしたら消せる
function blurPages(urls) {
urls.forEach((u, i) => {
stylesheet.insertRule(`a[href="${u}"] { -ms-filter: blur(6px); filter: blur(6px);}`
, rulesLength + i)
})
}
// rulesを元々あった長さに戻すために、追加した数だけ末尾を消す
function showPages(urls) {
urls.forEach(_ => stylesheet.deleteRule(rulesLength))
}
function toggle() {
if (isHide) showPages(urls)
else blurPages(urls)
isHide = !isHide
}
// toggleさせるショートカットキー (デフォルトだと `ctrl + shift + e`)
document.addEventListener('keypress', e => {
if (urls.length > 0 && (e.key == '' || e.key == 'E') && e.ctrlKey) toggle()
})
load()