Gcat - 緑箱

Gcat

https://lh3.googleusercontent.com/a/ACg8ocL8b3IsK3QC2lER_o6VI6XyI8iwBNX5-07FW7nxSQoTkQ=s96-c#.png

Gcat　じゃ！

緑箱のヌシである！

Google Cat と思ってくれても・・・・　

それはそれで　かまわぬ！

#_member #_掲示板

ここから下には、管理者が提供した個別アカウント専用の改造プログラムがあります。不用意に改変しないようにお願いします。

◆編集モード　制限解除プログラム

code:RUN.css

.grid-style-itemdata-page-title^="_",

.page-list .grid li:not(.pin) {

display: block !important;

}

/* 各種閲覧専用設定を解除して編集モードに戻す */

.navbar-form,

.navbar .row .col-search {

display: block !important;

padding-left: 50px;

}

.new-button {

display: inline-flex !important;

}

.full-content-modal .modal-body .toolbar {

display: block;

}

.quick-launch .right-box {

display: block !important;

}

.quick-launch .flex-box {

display: flex !important;

}

.kamon {

display: block !important;

}

.page-menu .tool-btn {

display: inline-flex !important;

}

a.random-jump-button.tool-btn.link-btn

{

display: none !important;

}

#translation-menu ,

.page-list-translation-menu .tool-btn {

display: none !important;

}

.editor {

pointer-events: auto !important;

}

code:RUN.js

alert(`

ユーザー：GCatORG 制限解除\n

各種閲覧専用設定を解除して編集モードに変更します！\n

プロジェクト名クリックからTopPageへ移動して下さい。\n\n

ページのリロードをすると元に戻ります。`);

◆ ページタイトルに飾りを付ける。

code:style.css

.line.line-title .text {

padding-bottom: 45px;

line-height: 15px;

position: relative;/*相対位置*/

padding-left: 1.5em;/*アイコン分のスペース*/

line-height: 1.0em;/*行高*/

color: var(--My-page-font-color);

}

.line.line-title .text :before {

font-family: "Font Awesome 5 Free";

content: "\f1b0";/*アイコンのユニコード*/

font-weight: 900;

position: absolute;/*絶対位置*/

font-size: 1em;/*サイズ*/

left: 0;/*アイコンの位置*/

top: 0;/*アイコンの位置*/

color: #8AC75A; /*アイコン色*/

}

◆ ★５のサムネイル画像

code:script.js

scrapbox.PopupMenu.addButton({

title: 'TB5',

onClick: function (text) {

text = text.trim();

text = '' + text + '';

return text;

}

});

◆ ギャラリー用画像

code:script.js

scrapbox.PopupMenu.addButton({

title: '（＃img',

onClick: function (text) {

text = text.trim();

text = '' + text + '';

return text;

}

});

◆ コードブロック内に全角スペースがあってバグることがある。

表示色を変えて警告する。

code:script.js

(() => {

scrapbox.on('lines:changed', showWhitespaceCharacter);

showWhitespaceCharacter();

function showWhitespaceCharacter() {

if (!window.scrapbox.Page.lines) return;

// コードブロック内のchar-indexを全部取ってきて全角か調べる　

const codeCharList =

document.querySelectorAll('.line span.code-block span.indent span.char-index');

for (const c of codeCharList) {

const char = c.textContent; // 文字を取得

if (char.match(/^\x01-\x7E\xA1-\xDF/)) {

// 全角文字の場合

c.style.backgroundColor = '#304050'; // 背景色を設定

c.style.color = '#D99';

c.style.fontWeight = '500'; // フォントの太さを設定

c.style.fontSize = '85%';

c.style.letterSpacing = '1px';

}

})();

◆ ピっと鳴ってページリロードして読み込んだスクリプトをリセットする

JavaScriptの同期処理と非同期処理を理解しておこう！

code:script.js

window.SineBeep = function() {

return new Promise((resolve, reject) => {

var context = new AudioContext();

var oscillator = context.createOscillator();

oscillator.type = "sine";

oscillator.frequency.value = 1040;

oscillator.connect(context.destination);

oscillator.start();

var beepDuration = 50; // Beep音の長さを変数に代入

setTimeout(function() {

oscillator.stop();

resolve(); // Promiseを解決して、ビープ音が終了したことを通知

}, beepDuration + 100);

});

};

window.BeepAndReload = function() {

var context = new AudioContext();

var oscillator = context.createOscillator();

oscillator.type = "sine";

oscillator.frequency.value = 880;

oscillator.connect(context.destination);

oscillator.start();

var beepDuration = 50; // Beep音の長さを変数に代入

setTimeout(function () {

oscillator.stop();

// Beep音が鳴り終わった後にリロードを行う

setTimeout(function () {

location.reload();

}, beepDuration);

}, beepDuration + 100);

}

◆ 左上のマークが回転する。

RUN スクリプトが実行中の場合、それをユーザーに知らせる機構も欲しい。

code:script.js

window.BMRunningNow = function() {

// CSSの .brand-icon の表示画像を取得

var img = document.querySelector('.brand-icon');

var deg = 0;

setInterval(function() {

img.style.transform = 'rotate(' + deg + 'deg)';

deg = (deg - 6) % 360;

}, 20);

}

◆ RUN.html　 RUN.css 読み込みモジュール（広域スコープ）

code:script.js

function loadHTML(htmlurl) {

return new Promise((resolve, reject) => {

fetch(htmlurl)

.then(response => response.text())

.then(data => {

if (!document.documentElement.innerHTML.includes(data)) {

var div = document.createElement('div');

div.innerHTML = data;

document.body.appendChild(div);

}

resolve();

});

}

function loadCSS(cssurl) {

return new Promise((resolve, reject) => {

var styleSheets = Array.from(document.styleSheets).map(styleSheet => styleSheet.href);

if (!styleSheets.includes(cssurl)) {

var head = document.getElementsByTagName('HEAD')0;

var link = document.createElement('link');

link.rel = 'stylesheet';

link.type = 'text/css';

link.href = cssurl;

head.appendChild(link);

resolve();

}

});

}

◆ RunRunボタン

code:script.js

// オルタネイト動作するのだ

var clickRunRunBT = 0;

// UserScript でボタンを追加する

scrapbox.PageMenu.addMenu({

title: 'RunButton',

image: 'https://i.gyazo.com/b94ffadb83da87972aac00e8afa344db.png',

onClick: () => { // ボタン押されたとき

// RUN がすでに動いていたら

if (clickRunRunBT === 1) {

clickRunRunBT = 0;

BeepAndReload(); // リセットする

} else {

// RUN が動いていない状態で RUN ボタンが押されたら

var RUNcurrentUrl = decodeURIComponent(window.location.href);

// プロジェクト名/ページ名を切り出す

var PPname = RUNcurrentUrl.split('https://scrapbox.io/')[1];

// HTML CSS JavaScript 各 URLにする

var RUNhtmlurl = 'https://scrapbox.io/api/code/' + PPname + '/RUN.html';

var RUNcssurl = 'https://scrapbox.io/api/code/' + PPname + '/RUN.css';

var RUNjsurl = 'https://scrapbox.io/api/code/' + PPname + '/RUN.js';

// HTML と CSS を読み込む。無くてもエラーにならない。

Promise.all(loadHTML(RUNhtmlurl), loadCSS(RUNcssurl))

.then(() => {

// RUN.js を読み取って、スクリプトに追加して間接的に実行する

clickRunRunBT = 1;

BMRunningNow();

// Fetch APIを使用して JavaScriptを取得

fetch(RUNjsurl)

.then(response => {

if (!response.ok) {

throw new Error('Network response was not ok');

}

var existingScript = document.querySelector(script[src="${RUNjsurl}"]);

if (!existingScript) {

var elm = document.createElement('script');

elm.setAttribute('src', RUNjsurl);

elm.onload = function() {

this.remove();

};

document.body.appendChild(elm);

}

})

.catch(error => {

alert(`RUN.js にアクセスできません。\n

おそらくこのページに code:RUN.js が書かれていないものと思われます。`);

// RUN.js は必須

BeepAndReload(); // なくってもリセット

});

}

})

◆ ページ上部に更新日時を書く

code:script.js

function getHtml (dateString) {

return '<span class="page-last-update" style="position: absolute; font-size: 12px; top: 15px; right: 0px; color: #AAA; ">・ ' + dateString + '</span>'

}

function setOrUpdateTime () {

if (scrapbox.Layout !== 'page') return

let dateString = $('.page-menu .date-label').eq(1).attr('title')

if ($('.page-last-update').length > 0) {

$('.page-last-update').text('・ ' + dateString);

} else {

$('.editor').append(getHtml(dateString))

}

new MutationObserver(setOrUpdateTime)

.observe(document.querySelector('title'), { childList: true })

setOrUpdateTime();

◆ 時報　⏲

code:script.js

// MP3ファイルのURL 時報っぽいチャイムのサウンドデータ

var ChimeMP3UrlA = 'https://scrapbox.io/files/66623f4737241d001d29763f.mp3';

var ChimeMP3UrlB = 'https://scrapbox.io/files/6662d46ee77a68001d99c79c.mp3';

var ChimeMP3UrlC = 'https://scrapbox.io/files/6664c3a79458fa001c24911e.mp3';

var ChimeMP3UrlD = 'https://scrapbox.io/files/6664c07d2aed1d001c426621.mp3';

// Audioオブジェクトを作成

var ChimeAudio1 = new Audio(ChimeMP3UrlB);

var ChimeAudio2 = new Audio(ChimeMP3UrlC);

// 時報を鳴らす関数

function playHourlyChime() {

var now = new Date();

var minutes = now.getMinutes();

var seconds = now.getSeconds();

if (minutes === 59 && seconds > 55) { // 毎時59分56秒頃に

ChimeAudio1.play();

}

if (minutes === 30 && seconds < 1) { // 毎時　　30分に

ChimeAudio2.play();

}

// 1秒ごとに時刻をチェック　　時報誤差　最大　１秒

setInterval(playHourlyChime, 1000);