テンプレートを使ってページを生成するUserScript
https://gyazo.com/b3b23114e5d732f5f1cae1f7831c11c8
概要
テンプレートを使ってページを生成するUserScript.iconのアイコンを押すとテンプレート一覧が出てくる
それを選択すると事前に定義したテンプレートに従って新しいページが生成される
毎回何かしらのフォーマットに従ってページを作りたいときとかに便利
そのテンプレートはどう作るか？
Create New Templateを押して，テンプレートの名前を入れると新しいテンプレートを作れる
ややこしいけど，Create new Templateはテンプレートのテンプレートになる
例えば議事録のテンプレートならB3ゼミ議事録${DATE}みたいなわかりやすい名前にしておいて，${DATE}は実装の中で動的に変えられるように実装するとかが良いと思う．
hr.icon
テンプレートの一覧
hr.icon
実装
code:script.js
// 新しいテンプレートを随時追加する
import {template as tplUserScript} from "/api/code/dclab/${TITLE}するUserScript/template.js"
import {template as tplTemplate} from "/api/code/dclab/テンプレートを使ってページを生成するUserScript/template.js"
const THIS_PAGE_TITLE = "テンプレートを使ってページを生成するUserScript"
const MENU_TITLE = "Template"
const insertText = (text) => {
const cursor = document.getElementById('text-input');
cursor.focus();
const start = cursor.selectionStart;
cursor.setRangeText(text);
cursor.selectionStart = cursor.selectionEnd = start + text.length;
const uiEvent = document.createEvent('UIEvent');
uiEvent.initEvent('input', true, false);
cursor.dispatchEvent(uiEvent);
}
scrapbox.PageMenu.addMenu({
title: MENU_TITLE,
onClick: () => {
scrapbox.PageMenu(MENU_TITLE).removeAllItems();
// ----------
// 新しいUserScriptを作るテンプレート
scrapbox.PageMenu(MENU_TITLE).addItem({
title: 'Create new UserScript',
onClick: () => {
const tmp_title = window.prompt("Please input Title", "<<title>>するUserScript");
if (tmp_title !== null) {
location.href = ${tmp_title}?body=${encodeURIComponent(tplUserScript(tmp_title))};
}
}
});
// ----------
// テンプレートを作るテンプレート
scrapbox.PageMenu(MENU_TITLE).addSeparator();
scrapbox.PageMenu(MENU_TITLE).addItem({
title: 'Create New Template',
onClick: () => {
const tmp_title = window.prompt('Please input Title');
if (tmp_title !== null) {
location.href = ${tmp_title}?body=${encodeURIComponent(tplTemplate(tmp_title))};
}
}
});
// ----------
scrapbox.PageMenu(MENU_TITLE).addSeparator();
scrapbox.PageMenu(MENU_TITLE).addItem({
title: 'Setting',
onClick: () => location.href = ${THIS_PAGE_TITLE}
});
}
});
テンプレートを作るテンプレート
code:template.js
const THIS_PAGE_TITLE = "テンプレートを使ってページを生成するUserScript"
export const template = (title) => {
return `${title}
hr.icon
1. \template.js\の実装
hr.icon
code:template.js
export const template = () => {
return \`
\`;
}
hr.icon
This is Template Page.
`;
}
hr.icon
参考
![https://i.gyazo.com/b3b23114e5d732f5f1cae1f7831c11c8.png",](https://i.gyazo.com/b3b23114e5d732f5f1cae1f7831c11c8.png",){kind=link}