Secret Page

https://gyazo.com/2b0b4b4f862b087412ead945208a3051

カジュアルにプライベートなプロジェクトを見せたい時に秘密にしたいページにモザイクをかけるUserScript

見せちゃいけないページを自分が開かない効果もある

相手に操作させると普通に見れるので注意

実装

特定のリンクを持つページにモザイクがかかる

デフォルトだと #Secret がついているページが対象

Ctrl + Shift + eでトグル

基本はオフにしておいて、見せる時にショートカットでオンにする運用を想定

見たくないページを封印する用途に使いたい場合は、hideAtStartをtrueにする

仕様上、タグを付けたり外したりしてもリロードするまで反映されない

応用

特定のリンクを持つページに好きなCSSを与えられる

ちょっといじると#アイディアがついているページの枠を赤にしたりできる

code:script.js

// このハッシュタグがついているページにブラーがかかる

const secretTag = 'Secret'

const hideAtStart = false

const stylesheet = document.styleSheets0

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()

#Secret