ブラウザー用にReact等で作ったアプリを、いろいろな理由からElectronベースのデスクトップアプリに移行する事は ままあると思います。しかし現在取り組んでいるのは逆で、 Electronベースのデスクトップアプリをブラウザーベースに移行しています。
問題点
ElectronベースでReactではありませんが一時期流行ったライブラリーを使い、JavaScriptで書かれているので簡単に移行出来るかと思っていたのですが、そう簡単ではないようです。
理由は、
- 主要なデータはNeDBを使いストレージに書かれている
- アプリ内で画像を作成する機能があり、やはりストレージに保存している
- データのimport/exportもファイルでおこなわれる
- 一時的なファイルもストレージに作成される
- 開発環境がwebpack等のモダンJS開発環境ではない
- 少ないが Electron の機能も使っている
開発環境の移行
webpack, Babelを使った開発環境への移行自体はそれ程問題が無かったのですが、元のアプリは開発環境がほぼそのままコピーされリリースされていたので、css、webフォト、アイコン画像等のリソースが色々な場所に置かれていて、実行時にhtml、cssでつじつまを合わせていましたが webpackで扱うには、それなりの整理が必要でした。現在これは完了しました。
ストレージの移行
ブラウザーは基本的にはPCのストレージにはアクセス出来ません。そこで現在使われているストレージの移行先として最初に思いついたのは LocalStorage でした。
しかし、LocalStorageの容量はPCで10MB、スマフォでは5MBくらいです。このアプリでは画像も扱うのでLocalStorageでは難しそうです、さらにLocalStorageは文字列しか格納出来ないので画像はBASE64エンコードが必要で更にストレージを消費します。
そこで思い出したのが IndexedDB です、これはブラウザから使えるキーバリューストア(KVS)で永続化されます。
今まで調べた事が無かったのです、この期に調べてみました。
- 大部分のブラウザーに実装されている
- 容量はストレージの空き容量の10%くらい？
- 画像もそのまま格納出来る
- APIはイベントモデルでやや使い難いが idb 、Dexie.jsのようなラッパーライブラリーが幾つかある
各ストレージへの対応ですが
- 主要データはIndexedDB 上にNeDBのサブセットの互換ライブラリーを作り対応
- 画像は IndexedDBに簡単なラッパーを作り対応
- 一時的なストレージはコードを変更してイン・メモリーで対応
- データのimport/exportはサーバーのAPIで行う事で対応
と考えています。
Electron機能の移行
このアプリはあまりElectronの機能を使ってなく、メニューとクリップボードくらいでしょうか。
- メニューは、ほぼ無いよな物なのでブラウザー版ではとりあえず無し
- クリップボードは Clipboard API 等で対応
と考えています。
ストレージの移行、Electron機能の移行はこれからなので、次回へと続きます…
