テンプレートを使ってページを作成（UserScript版）
Scrapboxで仕事のメモを取り始めて1ヶ月ちょい経って、フォーマットもだいたい決まってきたので、
新しいページを作るときにテンプレートが欲しくなって作ったよ。 こういう感じに動きます！
https://gyazo.com/cc75e96a555a71147380a35eda259cf7
っていう初めのところをすごく丁寧に補完してくださったので、導入したいけどよくわからんぞって方はぜひ見てみてほしい！
お知らせ（2018-04-16）
Scrapboxの仕様が変わって、新しいページのページメニューはカスタマイズできなくなった？ので 、
テンプレート専用のメニューボタンをつけて解決することにしたよ！
テンプレートを呼び出すボタンは➕マークになります。こんな感じ↓
https://gyazo.com/792f713bc8d155fc4ff371d38137814b
つかいかた
1. 下のCSSをsettingsページかユーザーページにコピペ
2. 下のスクリプトをユーザーページにコピペ
3. カスタマイズ！
※週報テンプレートだけでOKな人はコピペだけで動きます。
新規ページの仮タイトルのフォーマットは「年4桁 + アポストロフ + 週番号」にしてね
※新規ページに対してだけ発動するよ！
ページが半透明でぼんやりしてるときだけ動く
既に存在してるページだと動かない
とりあえず解説を読みたい人はここからジャンプ
長いよ！
1. このCSSをsettingsページかユーザーページにコピペ
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 }
2. このスクリプトをユーザーページにコピペ
code:script.js
addTemplateItemsToPageMenu()
function addTemplateItemsToPageMenu() {
// テンプレートメニューの定義ここから ---------- 下の解説を見てね！！ ----------
const __templates = [
{ title: '📄 週報テンプレート', template: '/api/code/scrasobox/テンプレート/週報テンプレートS.js' }
]
// テンプレートメニューの定義ここまで ----------
const __templMenuTitle = 'Templates'
scrapbox.PageMenu.addMenu({ title: __templMenuTitle, image: '/assets/img/logo.png', 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("だめでした>< \n" + status)
}
})
}
}
}
ここから解説だ！
テンプレートメニューの作りかた
code:テンプレートメニューの定義.js
const __templates = [
{ title: '📄 週報テンプレート', template: '/api/code/scrasobox/テンプレート/週報テンプレートS.js' }
]
templateが読み込むテンプレートのURL
このURLは、コード記法で書いたときにピンクになるリンクのURLと同じ
https://gyazo.com/e90709f8d1b99233c6dbebe968f29582
ブラウザによってはURLに日本語が含まれてるとだめかもしんない
そのときはテンプレートのリンク（ピンク）をクリックして開いたページのURLをコピペしてね…こういうやつ↓
ところで、2つ以上のメニュー定義を作るときはカンマを忘れないようにね！
code:2つ以上のメニュー定義.js
const __templates = [
{ title: '📄 週報テンプレート', template: '/api/code/scrasobox/テンプレート/週報テンプレートS.js' }, // ←このカンマ
{ title: '📄 別のテンプレート', template: '/api/code/プロジェクト名/ページ名/スクリプト名.txt' }
]
https://gyazo.com/f67ea494efdc06bf5cc74525cbb26b18 上の定義はこうなるよ。
テンプレートの書きかた
テンプレートの書きかたは2種類あるよ！
1. プレーンテキストとして書く
code:プレーンテキストなテンプレ.txt
（仮タイトル）
↑1行めはタイトル行にペーストされる
↑2行めからが本文
このテンプレートを使うと…？
https://gyazo.com/a5d997725b47132e0e6fe19da59a0dc6
こうなるのだ！
2. テンプレ本文を返すJavaScriptとして書く
最初のサンプル動画はJavaScriptで書いてあるやつです。
https://gyazo.com/cc75e96a555a71147380a35eda259cf7
やってることは
タイトルを「年 + アポストロフ + 週番号」とみなして
月曜から日曜まで日付と曜日を並べつつ
あらかじめ決まってるスケジュールがあれば書いておく
っていう感じ。
madobe.iconどんどんカスタマイズして、便利なテンプレートをシェアしたら楽しいと思う
2017-11-20 スクリプトで定義してるテンプレートをシンプル版と差し替えた
2018-04-16 Scrapboxの仕様変更に対応: ページメニューを独立させました
2018-10-18 ページが作成されていても、タイトル行しかない場合はテンプレートを使えるようにした
2019-04-18 ボタン表示位置がずれてたのを直したつもり
2021-06-12 動作しなくなってたの直しました
2021-07-06 Font Awesome のアップデートに対応
2021-08-12 ページメニューボタンのスタイルを修正
2023-03-27 ページメニューボタンのスタイルを修正