- EpisoPass.comにデータをセーブするのは良くないので、完全にひとつのHTML(+JS)でEpisoPass機能を実現するようにした
- 安心感とか使い勝手とかが若干向上したかも
-
EpisoPassとどう違うのか
- WAF利用をやめた
- サーバにデータを置くのをやめた
-
episopass.htmlはどこに置くのか
- EpisoPass.com/episopass.html に置く
-
HTMLファイル生成してダウンロード可能にする方法
- テンプレートエンジンを使おうかと思ったが、テンプレートを表現する方法がない
- バッククオートでヒアドキュメントみたいなのは書けるが、いろんな記号を含むテキストだとうまくいかない
- テンプレートをBase64エンコードしたものを使うことにした。苦しい。
- 出力したいHTMLファイルのテンプレートを
- episodas.erbをerbしてエンコードしてdastemplate.jsを作る
- このデータdastemplateをlib.jsのmake_htmlで展開してJSONデータで置換
-
JSファイルをまとめる方法
- webpackを使う
-
SPA的な実装
<div>を切り替える- lib.jsの
show()で指定する
-
Drag&Drop
dropイベントを<body>にバインドしてsendfile()が呼ばれるようにしている- (JSONだけでなく)HTMLをDrag&Dropできるようにした
-
CSSのwebpack
- 表示のタイミングが遅れるのでerbを使うことにした
-
ブラウザ拡張機能
- 以前のブラウザ拡張機能はEpisoPass.com上のデータを使ってた
- EpisoPass2020ではサーバ上にデータが無いので、
chrome.storageにセーブしたQ/Aデータを使う - DASのHTMLにアクセスしたとき
chrome.storageにセーブする - Amazonなどのサービスのログイン画面で、マッチするデータがあればDASを表示する
-
EpisoQから移動する方法
- episoqで作った問題リスト/回答リストをepisopass.htmlの引数として渡す
-
DASのHTMLの生成
REPLACEと書いてあるところにJSONを挿入するlodashのようなテンプレートエンジンを使う方がいいかも
-
セーブデータ
- JSONデータをHTMLデータを扱うのは面倒なのでHTMLだけセーブできるようにする
- JSONはHTMLから抽出できる
-
PWA
- 検討