UserScript:痛モード

いまのところ、下の画像ファイルのリストから背景画像を表示するくらいです。

（エラーチェックがまだ弱い）

https://gyazo.com/6c9dd76ad4607143ea616014f8a7cfe8

背景画像のリスト（1列目はコメント、2列目が画像ファイルのURL）

table:list

コメント URL

このリストの中から起動時にランダムに選択される。

（pixvの画像、読み込めないか。404が返ってくる。）

共通関数

code:script.js

const mode_name='痛い'

const mode_id = '__bgi__'

// URLの書式チェック用パターン

code:script.js

const url =

'/api/table/'

//+ scrapbox.Project.name + '/'　//カレントのプロジェクトを指定

+ 'suto3/' //プロジェクト名

//+ 'customize/' //プロジェクト名

//+ 'UserScript:壁紙' //ページ名

//+ '背景画像を設定するUserScript' //ページ名

//+ 'suto3'

//+ 'UserScript:痛モード' //ページ名

+ 'image:wall-paper' //ページ名

+ '/list.csv' // テーブル名+ '.csv' （csvファイル名）

code:script.js

const lists = new Promise((resolve, reject) => {

fetch(url)

.then(response => response.text())

.then(text =>

text.split('\n').slice(1)

.map(line => line.replace(/^,/,""))

.join('\n') )

.then(resolve)

.catch(reject)

})

code:script.js

const change_css1 = url => {

const css =

'body {'

+ ' background-image: url("' + url + '");'

// どうしても上手くいかないときのみ、↓こちらをお試しください

//+ ' background-image: url("' + url + '") !important;'

+ ' background:'

+ ' linear-gradient(to right,'

+ ' var(--base-color), 70%, '

+ ' transparent, 90%, '

+ ' transparent),'

+ ' url("' + url + '");'

+ ' background-repeat: repeat-y,no-repeat;'

+ ' background-attachment: scroll,fixed;'

+ ' background-position: right top ;'

+ ' background-size: auto 100%;' // 縦方向を100%にする。

+ ' background-color: var(--base-color) ;'

//+ ' filter: grayscale(100%);' //test

+ '}'

change_style(css)

}

const change_css2 = url => {

const css =

'body {'

//+ ' background-image: url("' + url + '");'

//+ ' background-repeat: repeat-y;'

//+ ' background-attachment: scroll;'

//+ ' background-position: center top ;'

//+ ' background-size: 100% auto;'

// どうしても上手くいかないときのみ、↓こちらをお試しください

+ ' background-image: url("' + url + '") !important;'

+ ' background-repeat: repeat-y !important;'

+ ' background-attachment: scroll !important;'

+ ' background-position: center top !important;'

+ ' background-size: 100% auto !important;'

+ '}'

change_style(css)

}

const change_css3 = url => {

const css =

'body {'

+ ' background-image: url("' + url + '");'

// どうしても上手くいかないときのみ、↓こちらをお試しください

//+ ' background-image: url("' + url + '") !important;'

+ ' background:'

+ ' url("' + url + '"), '

+ ' linear-gradient(to left,'

+ ' var(--base-color), '

+ ' var(--assort-color), '

+ ' var(--base-color));'

+ ' background-repeat: no-repeat,repeat-y;'

+ ' background-attachment: fixed,scroll;'

+ ' background-position: left top ;'

+ ' background-size: auto 100%;' // 縦方向を100%にする。

//+ ' linear-gradient(to left,'

//+ ' var(--base-color), 70%, '

//+ ' transparent, 90%, '

//+ ' transparent),'

//+ ' url("' + url + '");'

//+ ' background-repeat: repeat-y,no-repeat;'

//+ ' background-attachment: scroll,fixed;'

//+ ' background-position: left top ;'

//+ ' background-size: auto 100%;' // 縦方向を100%にする。

+ '}'

change_style(css)

}

const change_css4 = url => {

const css =

'body {'

+ ' background:'

+ ' linear-gradient(to bottom,'

+ ' transparent, 0%, '

+ ' transparent, 20%, '

+ ' var(--base-color), 40%, '

+ ' var(--base-color), 70%, '

+ ' transparent, 90%, '

+ ' transparent),'

+ ' url("' + url + '");'

+ ' background-repeat: no-repeat,repeat-y;'

+ ' background-attachment: fixed,scroll;'

+ ' background-image: url("' + url + '");'

// どうしても上手くいかないときのみ、↓こちらをお試しください

//+ ' background-image: url("' + url + '") !important;'

//+ ' background-repeat: repeat-y;'

//+ ' background-attachment: scroll;'

+ ' background-position: center top ;'

+ ' background-size: 100% auto;'

//+ ' filter: grayscale(100%);' // filterが効かない

+ ' background-color: var(--base-color) ;'

+ '}'

change_style(css)

}

const change_style = css => {

//console.log(url)

let style = document.getElementById(mode_id)

if (style){ style.remove() }

//console.log(css)

style = document.createElement('style')

style.setAttribute('id', mode_id)

style.appendChild(document.createTextNode(css))

document.head.appendChild(style)

}

メイン部

code:script.js

scrapbox.PageMenu.addMenu({

title: mode_name,

image: '/api/pages/suto3/image-02/icon',

onClick: async () => {

scrapbox.PageMenu(mode_name).addItem({ title: 'Now loading...', onClick: () => null })

await lists.then((text) => {

scrapbox.PageMenu(mode_name).removeAllItems()

scrapbox.PageMenu(mode_name).addItem({

title: '消す',

onClick: () => {

const style = document.getElementById(mode_id)

if (style) { style.remove() }

}

})

const urls = text.split("\n")

.map( line => {

//console.log(line)

const res = line.split(',')

//console.log(ur

if (regex.test(url) != true ) return null

scrapbox.PageMenu(mode_name).addItem({

title: name,

onClick: () => {change_css2(url)}

})

return url

})

.filter(line => line)

//console.log(urls)

scrapbox.PageMenu(mode_name).addItem({

title: 'ランダム',

onClick: () => {change_css2(choice(urls))}

})

})

}

})

背景画像をランダムに切り替える部分だけ抜き出した

code:script.js

scrapbox.PageMenu.addItem({

title: '痛 (Ita mode)',

onClick: async () => {

await lists.then((text) => {

const urls = text.split("\n")

.map( line => {

//console.log(url)

if (regex.test(url) != true ) return null

return url

})

.filter(line => line)

//console.log(urls)

change_css2(choice(urls))

})

}

})

サブメニュー

code:script.js

const submode_name='痛い補助'

scrapbox.PageMenu.addMenu({

title: submode_name,

image: '/api/pages/suto3/image-04/icon',

})

scrapbox.PageMenu(submode_name).addItem({

title: '消す',

onClick: () => {

const style = document.getElementById(mode_id)

if (style) { style.remove() }

}

})

scrapbox.PageMenu(submode_name).addItem({

title: 'Direct1',

onClick: () => {

const image = prompt("url")

if (regex.test(image) != true ) return null

change_css1(image)

}

})

scrapbox.PageMenu(submode_name).addItem({

title: 'Direct2',

onClick: () => {

const image = prompt("url")

if (regex.test(image) != true ) return null

change_css2(image)

}

})

scrapbox.PageMenu(submode_name).addItem({

title: 'Direct3',

onClick: () => {

const image = prompt("url")

if (regex.test(image) != true ) return null

change_css3(image)

}

})

scrapbox.PageMenu(submode_name).addItem({

title: 'Direct4',

onClick: () => {

const image = prompt("url")

if (regex.test(image) != true ) return null

change_css4(image)

}

})

https://gyazo.com/a8e816897d1837ab29bf85632085dc41

UserCSS.icon

UserScript.icon