ランダムに背景を切り替える

アクセス毎に背景画像がランダムで変更されます。

thanks

使用法

以下のコードをUserScriptとして打ち込む。

code:HowToUse.js

setBackgroundRandomly("${userName}",true);

setBackgroundRandomly(userName,unavailableWhenMobile,pageName,projectName)

userName:string

使用者のユーザー名

モバイルの時(画面横幅が764px以下)、画面切り替えを無効にする。

pageName:string

ページ名

どのmuseumページ(後述)を適用するかを指定できる。

ページごとにグループをわけて、気分ごとに背景グループを変える…なんてことも。

projectName:string

プロジェクト名

自分の所有しているプロジェクトのうち一つを指定することで、そのプロジェクトに存在するmuseumページをそのまま適用することが出来る。

museumページとは？

背景にしたい画像が掲載されている行のインデントの深度を一段にすると、その画像を背景候補にすることができる。

一段のインデントを持つもの以外は全てスルーされる。

写真の下の行に以下のプロパティを、一段インデントを下げてCSSコードを書き込むことで画像のカスタムが可能になる。

filter: brightness(60%) blur(3px);

など。文字「`」によるインラインコード化が必須となる。

初期値は

filter: brightness(50%) blur(2px);

background-position: center;

である。

一番上の、画像が上に一切ない行にこれらの設定を書き込むと、それが初期値となる。

追加用法1:UserCSSとの併用で訪問者の閲覧時にも画像の背景を表示する。(静的)

この挙動はUserScriptによるものであり、編集者以外のアクセス者には一切影響しない

このScriptだけを適用しても訪問者には一切背景は表示されません。

もしも訪問者にも静的な背景を表示したいとなれば、以下のUserCSSで設定ができます。

そのため

code:styleForVisitor.css

body:not(.setBackgroundByUserScript)::before{

background-image: url(/* 画像URL */);

filter: /* optional */;

}

と、属性セレクタと否定疑似要素を用いることで、UserScriptによる背景画像の設定も上書きされることもなく、訪問者に背景を提供することが可能になります。

定義

code:script.js

if (unavailableWhenMobile && navigator.userAgent.match(/iPhone|Android.+Mobile/) ) return;

HelperAboutAjax.loadCodeFromProvidedURL(

text => {

const data = interpret(text);

const selectedIndex = Math.floor(Math.random()*data.length);

if (data.length === 0) throw new Error("画像が一つも指定されていません。")

setBackground(option);

}).catch(err => alert(err))

}

function interpret(text){

const dataInText = text.split("\n").filter( (row) => (/^\s/).test(row));

let defaultOptions = new Map();

defaultOptions.set("filter","brightness(50%) blur(2px)")

defaultOptions.set("background-position","center")

let result = [];

let targetIndex = 0;

for (const data of dataInText){

//入力行が写真であった場合

targetIndex = result.push(new Map()) - 1;

for (const option of defaultOptions)

continue;

//入力行がオプションであった場合

if (result.length === 0){

//写真入力がまだなく、オプションが書き込まれている場合

continue;

}

}else {

console.info(

`以下の行が無視されました。

行の内容:

${data}`);

}

}

return result;

}

function setBackground(options){

document.body.classList.add("setBackgroundByUserScript");

let result = "";

for (const option of options)

const rule = `

body::before {

${result}

background-repeat: no-repeat;

background-size: cover;

z-index:-1;

position: fixed;

height: 100vh;

width: 100%;

content: " ";

overflow: hidden;

}`

}

実装メモ書き

今後対応される可能性は十二分にある。

思ったこと

ここで、一度に表示される可能性のある背景は、自分が把握できる量だけを入れておくべきかもしれない。

引用符を5画像ぐらいに付けるのが最適？

何の画像が出てくるかある程度見慣れていないと記事を書くのに集中できない？

更新しないと背景が更新されない。

つまり、Scrapboxの別ページからこれを適用してるページに戻っても反応されない可能性がある。

モバイルからだとめっちゃ重い