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ランタイムを用いて開発されています。開発環境のインストールは、下記の手順になります

1. NodeJSのインストール

2. npm（パッケージマネジャ）により、electronをインストール

3. Webアプリ部分は　通常のアプリの構成を継承でき、各種ライブラリもそのまま利用可能（例えば　JQuery、d3、Dexie)

4. IndexDBや　WebsocketなどのWebテクノロジもそのまま利用できます

Electronアプリの構造

現在のバージョンのElectronは、大きく　下記の３つの部分から構成されています。

1. main.js　　：　ローカルファイルアクセスなどのローカル依存機能を配置

2. preload.js　：　main.jsとWebアプリをつなぐコンテキストブリッジ

3. Webアプリケーション

１と３を明確に分離し、２でブリッジさせるところにセキュリティを高める工夫がなされています

A3lab　エイスリーラボ