単一のHTMLで動くEpisoPass
(2019/12/25)
EpisoPass(パスワード管理システム)をで動かしていたのだが、Q/Aデータをサーバのデータベースにセーブしているので不安な要素があったかもしれない。これを払拭するため、単一のHTMLでEpisoPass機能が動くようにしてみた。https://EpisoPass.com/EpisoPass.html で使える。
データの編集とかHTML生成とかはJavaScriptで実行できるので基本的にサーバは不要なのだが、単一HTMLにしたりデータをダウンロード可能にしたりするのはいろいろ面倒であった。
webpackでJavaScriptファイルをひとつにまとめる
faviconなど画像データはBase64エンコードしてHTMLに埋め込む
HTMLソースを生成してダウンロード可能にするためにちょっと工夫する
データをDrag&Dropするためにちょっと工夫する
SPAっぽく動くようにするためにちょっと工夫する
また、サーバ上のデータをEpisoPass拡張機能から利用できないので、ブラウザのローカルDB(chrome.storage)にQ/Aデータを保存するようにした。今後はEpisoPass.comには完全にスタティックなファイルしか置かないようにするつもりである。
ソースはGitHubに置いてある。イマドキなフレームワークを使うべきなのかもしれないが、もともとjQueryでゴリゴリ書いてたものなのでそこは気にしないことにしたい。
#ブログ 2019/12/25
? EpisoPassの実装手法