背景画像を設定するUserScript

下の画像ファイルのリスト（list）から壁紙（背景画像）を表示します。

TL;DR

下にあるの画像ファイルのリストから壁紙を表示します

APIでテーブル（csvファイル）を読んでページメニューに表示

CSSを書き換えて、壁紙を変更、表示

https://gyazo.com/fa9ad08970945dbd360a61c68f4d9f30

背景画像リスト

（以下、ややこしいですが、リスト（list）という名のテーブルです）

テーブル記法で壁紙のリストを記述する

テーブルは、APIからアクセスできる

1行目は見出し（読み飛ばす）

そして、

1列目はラベル（ページメニューに表示）

2列目が画像ファイルのURL（背景画像になる）

3列目以降はコメント（無視される）

となっています。

テーブル名は、APIから読み出す都合上、list（固定）となっております。

テーブル名を変更する場合はスクリプト（script.js）と併せて変更してください。

table:list

ラベル URL コメント

リストの分割もできる

table:list

やってみよう

自分のページを変更

1 UserCSSの設定（これ以外の設定は、一時的に外しておくこと）

code:css

@import "/api/code/customize/背景画像を設定するUserScript/style.css";

2 UserScriptの設定（これ以外の設定は、一時的に外しておくこと）

code:js

import '/api/code/customize/背景画像を設定するUserScript/script.js'

3リロード

UserCSSとUserScriptを読み込んで反映させる

ページメニューに「壁紙」が追加されていれば、とりあえず OK

動作確認

ページメニューに「壁紙」が追加される

壁紙のメニューに背景画像のリストが表示される

リストの項目を選択すると、背景画像が表示される

「ランダム」を選択すると、リスト中の背景画像をランダムに表示される

「消す」を選択すると、背景画像が消える

編集権があるならば、リストの追加、削除など、編集してみる

リロードして、編集内容が反映されているか確認

あとは他のUserCSSとUserScriptとのすり合わせを行ってください

コピペして使う場合の注意点

お試し用ということリストのURLをこのプロジェクト宛に固定しています

スクリプトを修正してください

確認のため、リストの追加、削除など、編集してみてください

リロードして、編集内容が反映されているか確認

修正が反映されるのはリロード時です

何につかうのか

複数のScrapboxプロジェクトを背景画像によって識別する（オススメ）

背景画像に意味のある画像を表示させる

カレンダー

重点目標やスローガン

各種チートシート

ランダムネスを利用した、強制連想法（アイデア出し）に

気分転換に

うまく表示されないときは

おそらく、だいたいCSSの表示の優先順位のせいです。

CSSの優先順位、よくわかんねーです。

わかっていることを書きます。

また、style要素を書き換えるタイプのUserScriptだと、あとから実行したほうが該当箇所を上書きしてしまいます。

そういうわけで、意外に簡単に表示されなくなります。

あとは、言いにくいけど、たぶんバグがあるよね。（できれば直したいです）

UserCSSの解説

body要素

前述のように、外部CSSのほうが優先されるので、body{} は書かないことにします。

ページ

hover の状態で不透明になり、非hoverの状態のときは少しだけ半透明になるようにしています。

code:style.css

.page {

/* 透明度の設定 */

opacity:0.8;

}

.page:hover {

/* 不透明 */

opacity:1;

}

ページリスト（透明／不透明の設定のみ）

code:style.css

.page-list {

/* 透明度の設定 */

opacity:0.5;

}

.page-list:hover {

/* 不透明 */

opacity:1;

}

関連ページリスト（透明／不透明の設定のみ）

code:style.css

.related-page-list {

/* 透明度の設定 */

opacity:0.5;

}

.related-page-list:hover {

/* 不透明 */

opacity:1;

}

UserScriptの解説

正直、JavaScriptはよくわかんねーです。

わらかんなりに説明します。なので、間違ったことを書いているかもしれません。ご容赦を。

やっていることは、

APIを叩いてCSVファイルを読み込む

ページメニューに追加

style要素を使ってCSSを変更し、背景画像を変更

やっていない（できないていない）ことは

画像ファイルのURLが妥当かどうかのチェック

エラーデータのリストからの除外

データ件数の制限（データが増えたらどうしよう）

重複チェック

その他、エラー処理とか例外処理とかデータチェックとか

など、いろいろ

最初のほうの url の値は、サンプルとして、このページのリスト（list、ファイル名だと、list.csv）決め打ちにしています。

スクリプトをコピペして使う場合は、この値を変更してください。

code:script.js

const url = '/api/table/'

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

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

+ '背景画像を設定する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(/^,/g,""))

.join('\n') )

.then(resolve)

.catch(reject)

})

const change_css = url => {

//console.log(url)

let style = document.getElementById('__bgi__')

if (style){ style.remove() }

const css =

'body {'

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

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

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

+ ' background-repeat: repeat-y;'

+ ' background-attachment: scroll;'

+ ' background-position: center top ;'

+ ' background-size: 100% auto;'

+ '}'

//console.log(css)

style = document.createElement('style')

style.setAttribute('id', '__bgi__')

style.appendChild(document.createTextNode(css))

document.head.appendChild(style)

}

scrapbox.PageMenu.addMenu({

title: '壁紙',

onClick: async () => {

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

await lists.then((text) => {

scrapbox.PageMenu('壁紙').removeAllItems()

scrapbox.PageMenu('壁紙').addItem({

title: '消す',

onClick: () => {

const style = document.getElementById('__bgi__')

if (style) { style.remove() }

}

})

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

.map( line => {

//console.log(line)

const res = line.split(',')

//console.log(url)

scrapbox.PageMenu('壁紙').addItem({

title: name,

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

})

return url

})

//console.log(urls)

scrapbox.PageMenu('壁紙').addItem({

title: 'ランダム',

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

})

})

}

})

UserScript.icon

UserCSS.icon