UserScript:ワンポイント

code:script.js

const mode_name = 'ワンポイント'

const modeid = '__one__'

code:script.js

const url =

'/api/table/'

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

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

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

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

//+ 'suto3' //ページ名

+ 'UserScript:ワンポイント' //ページ名

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

Fetch で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)

})

CSSを変更する部分

code:script.js

// ページに表示してみる

const change_css1_pg = url => {

const css =

'.page {'

+ ' background:'

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

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

//+ ' rgba(255,255,255, 1.0), 70%, '

//+ ' rgba(255,255,255, 0.8), 85%, '

//+ ' rgba(255,255,255, 0.5), 95% , rgba(255,255,255,0)) ,'

+ ' linear-gradient(to right,'

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

+ ' transparent, 90%, '

+ ' transparent) ,'

//+ ' conic-gradient(from 45deg, red, yellow, green, blue, purple, red),'

//+ ' linear-gradient(to left, rgba(255,255,255,.8), 90%, rgba(140,140,140,.1)),'

//+ ' linear-gradient(to right, rgba(255,255,255,.8), 80%, rgba(180,180,180,.6), 95% , rgba(10,10,10,.6)) ,'

//+ ' linear-gradient(217deg, rgba(255,0,255,.8), rgba(255,0,255,0) 70.71%),'

//+ ' linear-gradient(127deg, rgba(255,255,0,.8), rgba(255,255,0,0) 70.71%),'

//+ ' linear-gradient(336deg, rgba(0,255,255,.8), rgba(0,255,255,0) 70.71%),'

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

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

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

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

+ ' background-origin: border-box,border-box;'

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

+ ' background-attachment: scroll,fixed;'

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

//+ ' background-position: 80% bottom ;'

//+ ' background-position: 75% bottom ;'

//+ ' background-position: 75% 75% ;'

//+ ' background-position: 75% 25% ;'

//+ ' background-position: 75% 35% ;' // *

//+ ' background-position: 75% 45% ;'

//+ ' background-position: 75% 55% ;'

//+ ' background-position: 75% 65%, 0% 0%;'

+ ' background-position: 0% 0%, 75% 65%;'

//+ ' background-position: 75% top ;'

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

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

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

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

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

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

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

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

//+ ' background-size: 100% 100%,25% auto;' // 横方向を25%にする。 *

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

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

//+ ' background-size: auto;' //　（もういいや）

//+ ' max-width: 100%;' //

//+ ' max-height: 100;' //

//+ ' background:'

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

//+ ' no-repeat,no-repeat '

//+ ' linear-gradient(217deg, rgba(255,0,255,.8), rgba(255,0,255,0) 70.71%),'

//+ ' linear-gradient(127deg, rgba(255,255,0,.8), rgba(255,255,0,0) 70.71%),'

//+ ' linear-gradient(336deg, rgba(0,255,255,.8), rgba(0,255,255,0) 70.71%),'

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

+ '}'

change_style(css)

}

CSSを変更する部分2

code:script.js

const change_css2_pg = url => {

const css =

'.page {'

+ ' background:'

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

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

//+ ' rgba(255,255,255, 1.0), 30%, '

//+ ' rgba(255,255,255, 0.8), 50%, '

//+ ' rgba(255,255,255, 0.5), 70% , rgba(255,255,255,0)) ,'

+ ' linear-gradient(to right,'

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

+ ' transparent, 90%, '

+ ' transparent) ,'

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

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

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

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

+ ' background-repeat: repeat-y;'

+ ' background-attachment: scroll;'

+ ' background-position: center top;'

+ ' background-size: 100% auto;'

+ '}'

change_style(css)

}

CSSを変更する部分3

code:script.js

const change_css3_pg = url => {

const css =

'.page {'

+ ' background:'

+ ' linear-gradient(to bottom,'

+ ' transparent, 0%, '

+ ' transparent, 20%, '

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

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

+ ' transparent, 90%, '

+ ' transparent) ,'

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

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

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

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

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

+ ' background-attachment: fixed,scroll;'

+ ' background-position: center top;'

+ ' background-size: 100% auto;'

+ '}'

change_style(css)

}

CSSを変更する部分

code:script.js

const change_style = css => {

//console.log(url)

let style = document.getElementById(modeid)

if (style){ style.remove() }

//console.log(css)

style = document.createElement('style')

style.setAttribute('id', modeid)

style.appendChild(document.createTextNode(css))

document.head.appendChild(style)

}

code:script.js

scrapbox.PageMenu.addMenu({

title: mode_name,

image: '/api/pages/suto3/user-03/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(modeid)

if (style) { style.remove() }

}

})

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

.map( line => {

//console.log(line)

const res = line.split(',')

//console.log(url)

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

scrapbox.PageMenu(mode_name).addItem({

title: name,

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

})

return url

})

.filter(line => line)

//console.log(urls)

scrapbox.PageMenu(mode_name).addItem({

title: 'ランダム',

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

})

})

}

})

メイン部

code:scriptxx.js

scrapbox.PageMenu.addItem({

title: 'ワンポイント1',

onClick: () => {

const image = prompt("url")

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

//change_css1(image)

change_css1_pg(image)

}

})

scrapbox.PageMenu.addItem({

title: 'ワンポイント2',

onClick: () => {

const image = prompt("url")

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

//change_css1(image)

change_css2_pg(image)

}

})

code:script.js

const submode_name = 'ワンポイント補助'

scrapbox.PageMenu.addMenu({

title: submode_name,

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

})

scrapbox.PageMenu(submode_name).addItem({

title: '消す',

onClick: () => {

const style = document.getElementById(modeid)

if (style) { style.remove() }

}

})

scrapbox.PageMenu(submode_name).addItem({

title: 'ワンポイント1',

onClick: () => {

const image = prompt("url")

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

//change_css1(image)

change_css1_pg(image)

}

})

scrapbox.PageMenu(submode_name).addItem({

title: 'ワンポイント2',

onClick: () => {

const image = prompt("url")

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

change_css2_pg(image)

}

})

scrapbox.PageMenu(submode_name).addItem({

title: 'ワンポイント3',

onClick: () => {

const image = prompt("url")

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

change_css3_pg(image)

}

})

アイコン画像

https://svg-hosting.vercel.app/api/svg?url=https://scrapbox.io/api/code/suto3/snowman/s01.svg

以下はダークテーマに対応していない

アイコン画像1

https://gyazo.com/374de20e6cae168b155e87cf7a6d0737

アイコン画像2

https://gyazo.com/f21247f531de8607fb8662368d103ea6

table:list

ラベル URL

UserCSS.icon

UserScript.icon