telomereを維持して別projectにページをexportするUserScript
from takker-sprint@2020-08-week4
telomereを含んだscrapboxのimport機能用JSON dataを生成するUserScript
移したtakker.icon
/customize/特定のページのみを含んだexport用dataを生成するbookmarklet
/icons/hr.icon
用途
/forum-jp/複数ページを別プロジェクトにまとめてコピーする
仕様
任意のscrapbox page上で発動するbookmarklet
実行すると、そのページに含まれている全てのリンク先のページデータを一つのJSON fileにまとめ、downloadする
空リンク・外部project link・外部リンクは除く
更新履歴
直接json dataをdownloadできるようにした
コピペ→ファイル作成の手間を省く
実装
downloads.download()
使ってない
URL.createObjectURL()
web browserから任意のデータをdownloadするscript
空リンクを除くようにした
scrapbox.Project.pagesを使って判定する
ページ中の全てのリンクを抽出するようにした
Scrapbox REST APIを使用
追加したい機能
空リンクを無視
行ごとにリンクを一つ書くのではなく、文中のすべてのリンクを抽出するようにする
外部projectのリンクは無視
String.prototype.matchAll()を使う
正規表現は/customize/リンクを外すUserScriptのを使う
/\[([^\[!"#%&'()\*\+,\-\.\/\{\|\}<>_~][^\[\]]*)\]/g
Scrapbox REST APIを叩けば取得できることに気づいた
そっちにした
/icons/done.icon直接json dataをdownloadできるようにしたい
code:bookmarklet.js
javascript:(()=>{let s=document.createElement("script");s.src='https://scrapbox.io/api/code/takker/telomereを維持して別projectにページをimportするUserScript/script.js';document.body.appendChild(s);})()
code:script.js
javascript:(async() => {
if(document.domain !== 'scrapbox.io') return;
const importSource = /api/pages/${scrapbox.Project.name}/${scrapbox.Page.title};
let exportPages = {pages: []};
const promises = await fetch(importSource)
.then(response => response.json())
.then(json => json.links)
// 空リンクを除外
.then(links => links.filter(link =>
scrapbox.Project.pages.find(page => page.title == link || page.titleLc == link)
?.exists))
.then(names => {console.log(names); return names;})// debug用
// import用page dataを作成
.then(names => names.map(pageName =>
fetch(/api/pages/${scrapbox.Project.name}/${encodeURIComponent(pageName)})
.then(response => response.json())
.then(json => exportPages.pages.push({
title: json.title,
created: json.created,
updated: json.updated,
lines: json.lines
})))
);
Promise.all(promises).then(_ => {
web browserから任意のデータをdownloadするscript
code:script.js
const blob = new Blob(JSON.stringify(exportPages,null,' '),
{type: 'octet/stream'}); // download dataを作成
const url = window.URL.createObjectURL(blob); // download linkを生成
// 同一scrapbox pageに隠しa要素を作り、それを踏んでdownloadを実行する
const a = document.createElement('a');
a.href = url;
a.download = 'import.json';
a.style.display = 'none';
document.body.appendChild(a);
// downloadを実行
a.click();
// 後始末
window.URL.revokeObjectURL(url);
a.parentNode.removeChild(a);
});
})();
開いているページそのものをexportするversion
code:bookmarklet2.js
javascript:(()=>{let s=document.createElement("script");s.src='https://scrapbox.io/api/code/takker/telomereを維持して別projectにページをexportするUserScript/script2.js';document.body.appendChild(s);})()
code:script2.js
javascript:(async() => {
if(document.domain !== 'scrapbox.io') return;
const targetPage = /api/pages/${scrapbox.Project.name}/${scrapbox.Page.title};
const response = await fetch(targetPage);
const json = await response.json();
const exportData = {pages: [{
title: json.title,
created: json.created,
updated: json.updated,
lines: json.lines,
},],};
const blob = new Blob(JSON.stringify(exportData,null,' '),
{type: 'octet/stream'}); // download dataを作成
const url = window.URL.createObjectURL(blob); // download linkを生成
// 同一scrapbox pageに隠しa要素を作り、それを踏んでdownloadを実行する
const a = document.createElement('a');
a.href = url;
a.download = 'import.json';
a.style.display = 'none';
document.body.appendChild(a);
// downloadを実行
a.click();
// 後始末
window.URL.revokeObjectURL(url);
a.parentNode.removeChild(a);
})();
Reference
/scrapboxlab/Scrapboxのインポート用json
/icons/hr.icon
実装メモ
存在しないページの検知は組み込んでいない
開いたタブのsource codeからコピーしないとうまく行かないときがある
タグをhtmlとして認識してしまうとき
対策:タグをescapesする
cf.
pre要素とcode要素を使ってブラウザ上にソースコードをそのまま表示する方法 | Web制作会社スタイル
JavaScriptでHTMLエスケープ処理 - Qiita
コメント欄が参考になる
textContentに代入すると、タグを勝手にエスケープしてくれるとのこと。
2020-09-03 04:39:07 できた
<code>を使うといいかも
2020-09-03 04:39:17 実装した
2020-09-03 04:57:01 highlight.jsを使ってみる
window.open()で/icons/javascript.iconの読み込みは出来ないっぽいtakker.icon
予め作っておいた/emoji/html5.iconファイルを開くしかなさそうだ。
05:20:06 この方法もダメっぽい
別にhighlightする必要はないからいいや。
新しいタブでhtmlを開く方法を使えばできそう
#2021-01-25 00:25:30
#2021-01-12 13:50:01
#2020-10-15
#2020-09-22 11:22:13
#2020-09-21 11:05:16
#2020-09-03 04:29:50
#2020-09-01 15:51:22
#2020-08-31 02:02:23