const mode_name = 'ワンポイント' const modeid = '__one__'

const url = '/api/table/' //+ scrapbox.Project.name + '/'　//カレントのプロジェクトを指定 + 'suto3/' //プロジェクト名 //+ 'customize/' //プロジェクト名 //+ 'UserScript:壁紙' //ページ名 //+ 'suto3' //ページ名 + 'UserScript:ワンポイント' //ページ名 + '/list.csv' // テーブル名+ '.csv' （csvファイル名）

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

// ページに表示してみる 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) }

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

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

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) } const choice = (arr) => arr[Math.floor(Math.random()*arr.length)]

scrapbox.PageMenu.addMenu({ title: mode_name, image: '/api/pages/suto3/user-03/icon', //image: 'https://icongr.am/fontawesome/user-circle.svg', //image: 'https://gyazo.com/374de20e6cae168b155e87cf7a6d0737/raw', //image: 'https://gyazo.com/8a40fddd4f7225e0226401afff3e5795/raw', // アイコンは https://icooon-mono.com/ から 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 regex = /(https?:\/\/[\w\-\.\/\?\,\#\:\u3000-\u30FE\u4E00-\u9FA0\uFF01-\uFFE3]+)\.(jpg|jpeg|gif|png)/ const urls = text.split("\n") .map( line => { //console.log(line) const res = line.split(',') const name = (res[0].length)?res[0]:"unknown" const url = res[1].replace(/\[|\]/g,"") //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))} }) }) } })

scrapbox.PageMenu.addItem({ title: 'ワンポイント1', onClick: () => { const regex = /(https?:\/\/[\w\-\.\/\?\,\#\:\u3000-\u30FE\u4E00-\u9FA0\uFF01-\uFFE3]+)\.(jpg|jpeg|gif|png)/ 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 regex = /(https?:\/\/[\w\-\.\/\?\,\#\:\u3000-\u30FE\u4E00-\u9FA0\uFF01-\uFFE3]+)\.(jpg|jpeg|gif|png)/ const image = prompt("url") if (regex.test(image) != true ) return null //change_css1(image) change_css2_pg(image) } })

const submode_name = 'ワンポイント補助' scrapbox.PageMenu.addMenu({ title: submode_name, image: '/api/pages/suto3/user-04/icon', //image: 'https://icongr.am/fontawesome/user-circle-o.svg', //image: 'https://gyazo.com/f21247f531de8607fb8662368d103ea6/raw', //image: 'https://gyazo.com/8a40fddd4f7225e0226401afff3e5795/raw', }) 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 regex = /(https?:\/\/[\w\-\.\/?\,\#\:\u3000-\u30FE\u4E00-\u9FA0\uFF01-\uFFE3]+)\.(jpg|jpeg|gif|png)/ 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 regex = /(https?:\/\/[\w\-\.\/\?\,\#\:\u3000-\u30FE\u4E00-\u9FA0\uFF01-\uFFE3]+)\.(jpg|jpeg|gif|png)/ const image = prompt("url") if (regex.test(image) != true ) return null change_css2_pg(image) } }) scrapbox.PageMenu(submode_name).addItem({ title: 'ワンポイント3', onClick: () => { const regex = /(https?:\/\/[\w\-\.\/\?\,\#\:\u3000-\u30FE\u4E00-\u9FA0\uFF01-\uFFE3]+)\.(jpg|jpeg|gif|png)/ const image = prompt("url") if (regex.test(image) != true ) return null change_css3_pg(image) } })