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