テンプレートを使ってページを作成（UserScript版）
Scrapboxで仕事のメモを取り始めて1ヶ月ちょい経って、フォーマットもだいたい決まってきたので、
新しいページを作るときにテンプレートが欲しくなって作ったよ。
こういう感じに動きます！
@yoshinon さんのブログ情報管理LOGで紹介していただきました！
「そもそもUserScriptってどうやって使えるようにするのか？」
っていう初めのところをすごく丁寧に補完してくださったので、導入したいけどよくわからんぞって方はぜひ見てみてほしい！
お知らせ（2018-04-16）
Scrapboxの仕様が変わって、新しいページのページメニューはカスタマイズできなくなった？ので 、
テンプレート専用のメニューボタンをつけて解決することにしたよ！
テンプレートを呼び出すボタンは➕マークになります。こんな感じ↓
つかいかた
1. 下のCSSをsettingsページかユーザーページにコピペ
2. 下のスクリプトをユーザーページにコピペ
3. カスタマイズ！
※週報テンプレートだけでOKな人はコピペだけで動きます。
新規ページの仮タイトルのフォーマットは「年4桁 + アポストロフ + 週番号」にしてね
※新規ページに対してだけ発動するよ！
ページが半透明でぼんやりしてるときだけ動く
既に存在してるページだと動かない
とりあえず解説を読みたい人はここからジャンプ
長いよ！
1. このCSSをsettingsページかユーザーページにコピペ
style.cssbutton#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. このスクリプトをユーザーページにコピペ
script.jsaddTemplateItemsToPageMenu()
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.lines[0].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)
}
})
}
}
}ここから解説だ！
テンプレートメニューの作りかた
テンプレートメニューの定義.jsconst __templates = [
{ title: '📄 週報テンプレート', template: '/api/code/scrasobox/テンプレート/週報テンプレートS.js' }
] title がページメニューに出るテンプレートの名前で、 template が読み込むテンプレートのURLこのURLは、コード記法で書いたときにピンクになるリンクのURLと同じ
ブラウザによってはURLに日本語が含まれてるとだめかもしんない
そのときはテンプレートのリンク（ピンク）をクリックして開いたページのURLをコピペしてね…こういうやつ↓
ところで、2つ以上のメニュー定義を作るときはカンマを忘れないようにね！
2つ以上のメニュー定義.jsconst __templates = [
{ title: '📄 週報テンプレート', template: '/api/code/scrasobox/テンプレート/週報テンプレートS.js' }, // ←このカンマ
{ title: '📄 別のテンプレート', template: '/api/code/プロジェクト名/ページ名/スクリプト名.txt' }
]
上の定義はこうなるよ。テンプレートの書きかた
テンプレートの書きかたは2種類あるよ！
1. プレーンテキストとして書く
プレーンテキストなテンプレ.txt（仮タイトル）
↑1行めはタイトル行にペーストされる
↑2行めからが本文
[/ このテンプレートを使うと…？]
こうなるのだ！
2. テンプレ本文を返すJavaScriptとして書く
最初のサンプル動画はJavaScriptで書いてあるやつです。
やってることは
タイトルを「年 + アポストロフ + 週番号」とみなして
月曜から日曜まで日付と曜日を並べつつ
あらかじめ決まってるスケジュールがあれば書いておく
っていう感じ。
中身がどうなってるかはこっちを見てね！→テンプレート#5a1203ec96b904000070bd5e
上のスクリプトはこっちのシンプル版を使うようになってます→テンプレート#5a13212996b9040000e5e995
madobe.iconどんどんカスタマイズして、便利なテンプレートをシェアしたら楽しいと思う
初出 2017-11-19
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 ページメニューボタンのスタイルを修正