koyoshi
https://gyazo.com/a8a19c3f83b19019fac18bb0f9f3baab
文具好きなインフラエンジニア
普段はIT業界の日の当たらないところで過ごす キノコのような存在
年齢：おっさん
趣味：「読書」と言えるほど読んでないけど、聞かれたら「読書」と答えるようにしている。
その他：
元登録セキスペ
個人では資格維持費が負担になるので辞めた。
テンプレートからページを作成する：/scrasobox/テンプレートを使ってページを作成（UserScript版）
code:style.css
button#Templates.tool-btn:hover { text-decoration: none }
button#Templates.tool-btn::before { position: absolute; content: '\f067'; font: 900 21px/46px 'Font Awesome 5 Free' }
button#Templates.tool-btn img { opacity: 0 }
code:script.js
addTemplateItemsToPageMenu()
function addTemplateItemsToPageMenu() {
// テンプレートメニューの定義ここから ---------- 下の解説を見てね！！ ----------
const __templates = [
{ title: '📄 日記テンプレート', template: '/api/code/koyoshi-memo/日記テンプレート/diary.js' }
]
// テンプレートメニューの定義ここまで ----------
const __templMenuTitle = 'Templates'
scrapbox.PageMenu.addMenu({ title: __templMenuTitle, image: '/assets/img/logo_cut.svg', onClick: () => { } })
__templates.forEach((i) => {
scrapbox.PageMenu(__templMenuTitle).addItem({
title: i.title,
onClick: () => { __loadTemplate(i.template) }})
})
var __loadTemplate = function (templateUrl) {
if (scrapbox.Page.lines && scrapbox.Page.lines.length == 1) {
// タイトル行をクリックしたことにする
const line = document.getElementById('L' + scrapbox.Page.lines0.id)
const lastChar = line.querySelector('span.char-index:last-of-type')
const textarea = document.getElementById('text-input')
lastChar.dispatchEvent(new MouseEvent('click', {bubbles: true, cancelable: true}))
textarea.dispatchEvent(new KeyboardEvent('keydown', {bubbles: true, cancelable: true, keyCode: 35}))
// テンプレートを読み込む
$('#text-input').load(templateUrl, function (response, status, xhr) {
if (status == "success") {
try {
// 読み込んだテンプレートをテキストエリアにセットしまして
textarea.value = /\.js$/.test(templateUrl) ? eval(response) : response
// テキストエリアのinputイベントを出しまして
textarea.dispatchEvent(new InputEvent('input', {bubbles: true, cancelable: true}))
} catch (ex) {
console.log("だめでした>< \n" + ex)
}
} else {
console.log("だめでしたTT \n" + status)
}
})
}
}
}
アイコン回転記法koyoshi.icon：/villagepump/iconを回転する記法
code:style.css
@keyframes icon-rotate {
0%{ transform: rotate(0);}
100%{ transform: rotate(360deg);}
}
.deco-- img.icon {
animation: 1.5s icon-rotate linear infinite;
}
色付きの反転文字
code:style.css
.deco-\! {
color: #fff;
background-color: #e66;
}
.deco-\% {
color: #fff;
background-color: #ea2;
}
.deco-\# {
color: #fff;
background-color: #6a6;
}
.deco-\~ {
color: #fff;
background-color: #6ae;
}
色付きの反転文字の入力支援
code:script.js
scrapbox.PopupMenu.addButton({
title: '📕',
onClick: text => text.split('\n').map(line => [! ${line}]).join('\n')
})
scrapbox.PopupMenu.addButton({
title: '📙',
onClick: text => text.split('\n').map(line => [% ${line}]).join('\n')
})
scrapbox.PopupMenu.addButton({
title: '📗',
onClick: text => text.split('\n').map(line => [# ${line}]).join('\n')
})
scrapbox.PopupMenu.addButton({
title: '📘',
onClick: text => text.split('\n').map(line => [~ ${line}]).join('\n')
})