_EpisoPassの実装手法

EpisoPassの実装手法

(expanded from 単一のHTMLで動くEpisoPass このページは編集しないでください)

(2019/12/25)

EpisoPass(パスワード管理システム)をhttps://EpisoPass.com/で動かしていたのだが、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
Powered by Helpfeel