Electronで Windows/Mac両方で動くDeskTopアプリケーションを作成する
Electronとは
electron (エレクトロン)とは、ウェブ技術でデスクトップアプリケーションを作成できるテクノロジーです。HTMLとCSS、JavaScriptを使って開発し、WindowsとmacOSの両OSのアプリケーションを1つのコードから作ることができます。VS Codeや Teams Slackなどの 人気のDeskTopアプリケーションでも利用されています。
最近、ユーザー獲得は、まず、ブラウザアプリで行い、より高度な機能を提供しながらユーザーを囲い込むためにDeskTopアプリへ誘導するというケースが増えてきているように思います。
Teamsや slackなど代表的なケースでしょう。こうしたユースケースにうってつけな開発ツールが、Electronになります。Webテクノロジーという共通の技術をベースに、Windows/MacのDeskTopアプリケーションも作成できるのは大変魅力的です。
筆者も 今年、SPA型のWebアプリケーションを Electronで DeskTopアプリ化しましたが、それほど大きな改変なく短期間に 移植することができました
Electronの利用メリット
Web技術者だけでDeskTopアプリまで開発が可能
移植のための期間を短縮できる
非通信状態でも利用可能
Electron利用上の留意事項
ネットワーク上のアプリケーションとの連動が可能になり、通常のWeｂアプリケーション同様セキュリティを細かく配慮する必要があります
ローカルファイルのアクセスや 実行が可能になるので、他のネットワーク上のアプリケーションからのローカル機能アクセスを確実に抑止する必要があります
electronの当初のバージョンにくらべ、セキュリティ向上のための大きな改変がなされているので、ネット上のナレッジの利用では、バージョンに留意する必要があります
移植するうえでは、SPA型のWebアプリが対象になり どのようなWebアプリケーションでも移植可能なわけではありません
バージョンアップ時の アプリケーションの配布の問題を十分検討する必要があります
Electron開発の実際
Electron自体は、オープンソースのWebブラウザ基盤であるChromiumや、ChroniumのV8 JavaScriptエンジン上をベースに構築されたNodeJS JavaScriptランタイムを用いて開発されています。開発環境のインストールは、下記の手順になります
NodeJSのインストール
npm（パッケージマネジャ）により、electronをインストール
Webアプリ部分は 通常のアプリの構成を継承でき、各種ライブラリもそのまま利用可能（例えば JQuery、d3、Dexie)
IndexDBや WebsocketなどのWebテクノロジもそのまま利用できます
Electronアプリの構造
現在のバージョンのElectronは、大きく 下記の３つの部分から構成されています。
main.js ： ローカルファイルアクセスなどのローカル依存機能を配置
preload.js ： main.jsとWebアプリをつなぐコンテキストブリッジ
Webアプリケーション
１と３を明確に分離し、２でブリッジさせるところにセキュリティを高める工夫がなされています
あなたが、Web技術者で JSベースのSPA型 Webアプリケーションが、得意ならば、Electronは、DeskTopアプリケーション作成のベストな選択になるのではないかと思います
A3lab エイスリーラボ