/suto3/UserScript:痛モード

generated at 11/17/2024, 10:58:15 AM
UserScript:痛モード
禅モード からの派生で、痛（いた）モードです。
いまのところ、下の画像ファイルのリストから背景画像を表示するくらいです。
（エラーチェックがまだ弱い）


背景画像のリスト（1列目はコメント、2列目が画像ファイルのURL）
listコメントURL
 1https://i.pximg.net/img-original/img/2015/03/29/22/56/46/49546012_p0.png
 2https://i.pximg.net/img-original/img/2015/03/29/22/56/46/49546012_p2.png
 3https://i.pximg.net/img-master/img/2015/03/29/22/56/46/49546012_p3_master1200.jpg
 4 テストだよん[https://i.pximg.net/img-original/img/2015/04/09/20/03/55/49749784_p1.png]

このリストの中から起動時にランダムに選択される。
（pixvの画像、読み込めないか。404が返ってくる。）

共通関数
script.jsconst mode_name='痛い'
const mode_id = '__bgi__'

// URLの書式チェック用パターン
//const regex = /(https?:\/\/[\w\-\.\/\?\,\#\:\u3000-\u30FE\u4E00-\u9FA0\uFF01-\uFFE3]+)\.(jpg|jpeg|gif|png)/
const regex = /(https?:\/\/[\w\-\.\/\?\,\#\:\u3000-\u30FE\u4E00-\u9FA0\uFF01-\uFFE3]+)/


image:wall-paper

script.js
const url =
   '/api/table/' 
   //+ scrapbox.Project.name + '/'　//カレントのプロジェクトを指定
   + 'suto3/'         //プロジェクト名
   //+ 'customize/' //プロジェクト名
   //+ 'UserScript:壁紙' //ページ名
   //+ '背景画像を設定するUserScript' //ページ名
   //+ 'suto3'
   //+ 'UserScript:痛モード' //ページ名
   + 'image:wall-paper' //ページ名
   + '/list.csv'  // テーブル名+ '.csv' （csvファイル名）

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


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

 const choice = (arr) => arr[Math.floor(Math.random()*arr.length)]

メイン部

script.js scrapbox.PageMenu.addMenu({
   title: mode_name,
   //image: 'https://icongr.am/fontawesome/picture-o.svg',
   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(',')
         const name = (res[0].length)?res[0]:"unknown" 
         const url  = res[1].replace(/\[|\]/g,"")
         //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))}
       })
     })
   }
 })


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

script.js scrapbox.PageMenu.addItem({
   title: '痛 (Ita mode)',
   onClick: async () => {
     await lists.then((text) => {        
       const urls = text.split("\n")
       .map( line => {
         const url  = line.split(',')[1].replace(/\[|\]/g,"")
         //console.log(url)
         if (regex.test(url) != true ) return null
         return url
       })
       .filter(line => line)
       //console.log(urls)
       change_css2(choice(urls))      
     })
   }
 })

サブメニュー
script.jsconst submode_name='痛い補助'
scrapbox.PageMenu.addMenu({
  title: submode_name,
  //image: 'https://icongr.am/fontawesome/file-picture-o.svg',
  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)
     }
   })
  

UserScript:background-image-1
UserScript:background-image-2
痛Scrapbox
コメント	URL
1	https://i.pximg.net/img-original/img/2015/03/29/22/56/46/49546012_p0.png
2	https://i.pximg.net/img-original/img/2015/03/29/22/56/46/49546012_p2.png
3	https://i.pximg.net/img-master/img/2015/03/29/22/56/46/49546012_p3_master1200.jpg
4 テストだよん	[https://i.pximg.net/img-original/img/2015/04/09/20/03/55/49749784_p1.png]