みじんこ用雑多ページメニュー
雑多な項目が入ったメニューを表示するPage Menu上のボタンを表示するUserScript
アイテム追加に関しては/scrapboxlab/scrapbox.PageMenu().addItem()を参照
ソースコード
ボタン追加
こんな感じのボタンをPage Menuに追加する
script.jsscrapbox.PageMenu.addMenu({
title: "Mijinko_SD",
image: "https://i.gyazo.com/95e1d28e25db16bf7c4fdeeb16452179.png",
})項目追加
以下の項目を追加する
Open scrapbox-reader-dark
Analog Clock
addItem.jsimport { clock_setup, isClockHidden } from "/api/code/Mijinko/takker%2Fアナログ時計を表示するUserScript/script.js";
import { setupWeatherMap, isWeatherMapHidden } from "/api/code/Mijinko/天気図を表示するUserScript/script.js";
clock_setup(true)
import { openSRD } from "/api/code/Mijinko/scrapbox-reader-darkでページを開くUserScript/script.js";
import { scrapcalc_toggle } from "/api/code/Mijinko/ScrapCalc/script.js";
import { manageCSS } from "/api/code/Mijinko/URLからCSSの検証をするUserScript/managecss.js";
import { switchPageFocusMode } from "/api/code/Mijinko/ページの閲覧と編集しかできないようにするUserCSS/script.js";
import { blockOnIdobata, removeMessage } from "/api/code/Mijinko-other/井戸端を見ようとした人をバルスするUserScript/script.js";
// 標準状態では非表示にする
clock_setup(true)
setupWeatherMap(true)
function setRemoveMessageEvent() {
scrapbox.on("layout:changed", removeMessage)
scrapbox.on("project:changed", removeMessage)
}
const myPageMenu = scrapbox.PageMenu("Mijinko_SD")
// -- 情報表示系 --
myPageMenu.addItem({
title: () => {
if (scrapbox.Page.lines == null) return ""
return `現在のページは${scrapbox.Page.lines.length}行です。`
},
onClick: () => {},
})
// ------------------
myPageMenu.addSeparator()
// -- 機能ボタン --
myPageMenu.addItem({
title: "Open scrapbox-reader-dark",
onClick: () => openSRD(),
})
myPageMenu.addItem({
title: "Analog Clock",
// image: "https://img.icons8.com/ios/180/FFFFFF/clock--v3.png",
image: "https://i.gyazo.com/68ff8600f5459a3b647855d2c1186605.png",
onClick: () => clock_setup(!isClockHidden),
})
myPageMenu.addItem({
title: "ScrapCalc (Ctrl+Q)",
image: "https://i.gyazo.com/ce44a0adde8a39df00cfa744d8f42d95.png",
onClick: () => scrapcalc_toggle(),
})
myPageMenu.addItem({
title: "天気図を表示する",
// image: "",
onClick: () => setupWeatherMap(!isWeatherMapHidden),
})
// ------------------
myPageMenu.addSeparator()
// -- デザイン書き換え --
myPageMenu.addItem({
title: "集中モード切り替え",
onClick: () => switchPageFocusMode()
})
myPageMenu.addItem({
title: "CSSのテスト",
onClick: () => manageCSS(),
})
myPageMenu.addItem({
title: "バルス",
image: "/api/pages/villagepump/バルス/icon",
onClick: () => {
setRemoveMessageEvent()
removeMessage()
blockOnIdobata(
"まずはゆっくり休みましょう。",
"https://idy.vercel.app/mame"
)
},
})
CSS読み込み
style.css@import '/api/code/Mijinko/takker%2Fアナログ時計を表示するUserScript/style_mijinko.css';
@import "/api/code/Mijinko/天気図を表示するUserScript/style.css";ボタンのスタイル
style.css.tool-btn#Mijinko_SD img {
background-color: rgba(99, 26, 194, 0.8);
}