ScrapboxにEpisoPassを埋め込む
これすごく便利だと思う(ジマンパワー)
パスワードをScrapboxにメモしておく的な用途？
単純にEpisoPassを直接開けるようにしただけです
こう書くと、あんまり魅力がないような……
一応、クリック数・手順が減るという利点はある
js(async () => {
const fileId = '6016504aa5d32f00220025d9';
const res = await fetch(`/files/${fileId}.html`);
const htmlBlobData = new Blob([await res.text()], {type: 'text/html'});
const htmlDirectURL = URL.createObjectURL(htmlBlobData);
document.getElementById('editor').insertAdjacentHTML('beforeend',
`<iframe src=${htmlDirectURL} width="800" height="400"></iframe>`);
})();downloadがはじまるとはどういう意味ですかね? Webに置けばいいと思うのですが 
以下を開発コンソールから実行すると、埋め込まれたweb pageからhtmlファイルのdownloadが始まってしまいます
js(() => {
const fileId = '6016504aa5d32f00220025d9';
document.getElementById('editor').insertAdjacentHTML('beforeend',
`<iframe src="/files/${fileId}.html" width="800" height="400"></iframe>`);
})();EpisoPassのHTMLをWebのどこかに置けばいいと思ったのですが
確かに。増井のパスワードのようにweb siteを作って、その中に置いておけば同じことができますね
それをしなかったのはrepository作ったりするのをめんどうくさがってたからです……
個人サイトをもともと運営していれば、そのサイトに載せるだけでいいので楽なのですが、いちからサイトを作るとなるとなかなか腰を上げられないのです
手順が多すぎる
Gitの操作やwebページ作成になれていないのもあります
日頃からGitを操作したりwebページを作っていたりすれば、自然と作ったかも
本ページの方法だと、scrapboxのページにhtmlファイル貼り付けるだけで使えるようになるので、web siteを作らずに済むという点で楽です
一方で、scrapbox.ioに依存してしまうという欠点もあります
いずれ自分でweb siteを作るようになったらそうしてみようと思います
GitHub Pagesとか使うとラクなのでは 
即席コードなので適当に大きさを決めています
ちゃんとやるには
#editor の幅に合わせて大きさ変えるとよさそう問題例として/masui/県名なぞなぞを使わせていただきました。問題があれば削除します。
面白い。iframeなのか!
ScrapboxにEpisoPassのhtmlファイルをおいているのですが、使うたびにdownloadが走るのが不便だったので、なんとかできないかなーと思っていました
これだと直接ひらける
どういうとき便利なんですかね
特にmobile版scrapbox PWAで便利かも
downloadが走らないので
またChrome版Scrapbox PWAからhtmlファイルをdownloadしようとすると、開くのに失敗する事があった
このコードだけだと複数のEpisoPassファイルに対応できていないので、そのへんをもう少し改良する必要がありそう
どういうUIがいいかな
PageMenuにそのページにあるEpisoPassファイルのリストを追加する
押すとどこかにiframeを挿入する
特定ページに置いたEpisoPassファイルをリストに加える
選択したEpisoPassファイルをPopupMenuから開く
これでいいかもしれない
script.jsconst ID = 'scrapbox-episopass';
let isRunning = false;
scrapbox.PopupMenu.addButton({
title: text => {
if (isRunning) return 'remove EP';
if (/\[\S*\s?https:\/\/scrapbox\.io\/files\/\w+\.html\]/.test(text)
|| /\[https:\/\/scrapbox\.io\/files\/\w+\.html\s?\S*\]/.test(text))
return 'run EP';
return '\u200B'; // ゼロ幅スペースで隠す
},
onClick: async text => {
// 一旦reset
document.getElementById(ID)?.remove();
if (isRunning) {
isRunning = false;
return;
}
if (!/\[\S*\s?https:\/\/scrapbox\.io\/files\/\w+\.html\]/.test(text)
&& !/\[https:\/\/scrapbox\.io\/files\/\w+\.html\s?\S*\]/.test(text)) return;
const filePath = text.match(/https:\/\/scrapbox\.io(\/files\/\w+\.html)/)[1];
const res = await fetch(filePath);
const htmlBlobData = new Blob([await res.text()], {type: 'text/html'});
const htmlDirectURL = URL.createObjectURL(htmlBlobData);
// カーソル行の直下に挿入する
document.getElementsByClassName('cursor-line')[0]
.insertAdjacentHTML('beforeend',
`<iframe id="${ID}" src="${htmlDirectURL}" width="800" height="400"></iframe>`);
isRunning = true;
},
});