前回 の続きです、
ブラウザー用にReact等で作ったアプリを、いろいろな理由からElectronベースのデスクトップアプリに移行する事は ままあると思います。しかし現在取り組んでいるのは逆で、 Electronベースのデスクトップアプリをブラウザーベースに移行しています。
ストレージの移行
前回 書いた移行予定ですが、そのまま行きませんでした ^^);
予定：主要データはIndexedDB 上にNeDBのサブセットの互換ライブラリーを作り対応
NeDBを調べていたら Browser version が有りました！
Browser versionのデータ保存は IndexedDB, Web SQL, LocalStorage から利用可能なものを、この優先順位で使うようになっており、モダンブラウザーではIndexedDBが使われます。
ということでNeDBのサブセットの互換ライブラリーを作らずに済みました !!
予定：画像は IndexedDBに簡単なラッパーを作り対応
NeDBが使えるので、画像もNeDBに格納する事にしました。
ただし、NeDBはバイナリーは格納出来ないのでBase64で格納する事にしました、imgタグはData URLs(Base64)をサポートしているので、かえってコードはシンプルになりました。
ただし、画像データの読出し部分をViewの部分で行うとフレームワークがコンポーネントを非同期で描画するので画面に複数の画像があると、最初の画像取得のコールバックが実行される前に次の画像取得が始まってしまい、画像が正しく表示されない問題が発生してしまいまい悩みました。
そこで、Model部分でPromise.allを使い、同期的に全画像を読出し事で対応しました。
Electron機能の削除
こちらは、ほぼ問題無く取り除けました。
まとめ
今までElectron上で動いていた画面がブラウザー上に表示され動作した時には感動しました。理論的には動くのはわかっていましたが、現実として動くのにはカタルシスを感じました。
まだアプリとしての機能が移行出来たのではなく、これから完成度を高めるのは工数がかかると思いますがElectronベースのデスクトップアプリをブラウザーベースに移行出来る事がわかり、今回の検証作業は終わりました。
