Electron - なぜ色々なOSで動く？

Electron - なぜ色々なOSで動く？

Electron アプリは、Windows/Mac/Linux で動作させることが出来ます。とても便利ですが、どうして簡単にそんな事ができるのでしょうか？この記事では、その謎に迫ってみようと思います。

Electron の中身を知る

Electron 自体は、GitHub が開発したフレームワークです。基本コンセプトは Web 開発の技術を使ってデスクトップのアプリを作ろうという物です。 中身はというと、「Chromium」と「Node.js」を使ってデスクトップのアプリを実現しています。

実は、この「Chromium」に Electron の秘密があります。

「Chromium」自体は、Google の Chrome ブラウザの基になっているオープンソースです。つまり、簡単に一言で言うならば Electron は Web ブラウザ上で動いているアプリと言うことになります。

実際には、アプリ限定の機能だけを表示できる Web ブラウザと言う方がわかりやすいかもしれません。デスクトップアプリ専用のブラウザを作ってその中で実行していると言うのが Chromium を使った Electron アプリの原理です。

エントリーポイントはブラウザを作るための仕組み

Electron アプリのエントリーポイントのコードは簡単に言うとアプリ専用のブラウザを準備するための仕組みです。

通常の Web アプリの場合は、既存の Web ブラウザを使うために、この部分は必要ありません。URL を指定すれば、その場所からデータを取ってきて表示してくれます。 Electron アプリの場合は、既存の Web ブラウザではなく、専用の表示をするための「ウインドウ」が必要なのでこのコードが追加で必要になるという仕組みです。

Node.js は Javascript を実行するための仕組み

Node.js 自体は、Javascript のコードを Web ブラウザ以外で実行するための仕組みで、元々は、Chrome の Javascript の実行部分を抜き出したものを基に作られています。

と言うことで、Electron アプリは、基本的に Google の Chrome の技術がベースになっているデスクトップアプリということになります。

Electron アプリの仕組み

Electron アプリは、２つの部分から出来ています。

＊　表示（レンダリング）

＊　実行（データ処理）

表示は Chrome ブラウザの機能を流用しているので、基本的に HTML をベースに表示をして、CSS を使って表示の詳細を管理しています。

実行も基本的には、Node.js というか Chrome の Javascript の実行エンジンを利用して Javascript のコードを実行しています。従って、アプリ開発で作るものは、Web アプリ開発と同じという事になります。 ご存知のように、Web アプリは、Windows/Mac/Linux でもほぼ同じように動作します。Google Chrome は、ここに挙げた全ての OS で動作しますよね！

あとは、Web アプリが出来た時点で、Electron アプリ専用の「ブラウザ」をビルドするというのが実際に Electron アプリがやっていることです。 つまり、作成した Electron アプリだけを表示できるブラウザを作っているというのが、Electron アプリの種明かしです。

Web アプリの制限が継承される

という事で、Electron アプリの正体は専用ブラウザなので、多くの Web アプリの制限が継承されます。つまり、中身は基本的に Web アプリと全く同じです。実際に Electron アプリの配布用イメージを作ると、Web アプリに相当する部分はまとめられたファイルが作られます。

あとは、各プラットフォーム用の「ブラウザ」のコードが追加されて実行やインストール用のパッケージになるという仕組みです。

つまり、Web アプリで出来ないことは、基本的には Web アプリでも出来ない事になります。例えば、Firebase admin SDK は使う事ができません。これは、Firebase admin SDK が Web ブラウザで動くことをサポートしていないためです。従って、Java や Python を使って Firebase admin SDK を使ったアプリを作るのは基本的にはできません。

例外的に簡単にできるのは、Electron アプリで処理したデータを動作している PC のローカルドライブにセーブしたりすることは、Electron アプリならば可能です。通常の Web アプリの場合はセキュリティ上の理由で、ファイルを直接ローカルの PC のフォルダに保存する昨日には制限があります。従って通常は、ダウンロードという形で保存しています。

配布パッケージの中身は

配布パッケージの中身は、「ブラウザ」の部分と「Web アプリ」というのが基本的な配布パッケージの構成です。ブラウザ部分は、サポートする各プラットフォームごとに別の物が使われて、Web アプリの部分は共通のものを使うというのが基本コンセプトです。 実際は、各パッケージの形式（フォーマット）事に違いますし、インストール後のファイルについては各 OS で違うのでこれほどシンプルではありません。しかし、基本の構成はこのようになっています。

Firebase の制限事項

上記の理由で Firebase を利用する場合には幾つかの制限事項が Web アプリと同じように継承されます。

一番の制限事項は、Firebase admin SDK は使えません。Firebase admin SDK がブラウザ内での実行を認めていないためです。これはセキュリティ上の制限になります。この辺は、スマホのアプリを作る場合と同じです。

従って、Firebase を利用した Web アプリの管理ツールを開発する場合も Web アプリと同様の制限があります。Firebase admin SDK の機能を使わずに実装する必要があるために、基本的に、Firebase のデータベースやストレージのアクセスはセキュリティルールによるアクセスの制限が適用されます。

当初、Firebase admin SDK を利用した管理用のアプリを Electron で利用しようと考えて Electron の詳細の調査を始めましたが、実際は、Firebase admin SDK を利用しようとしたらエラーになりました。

それで詳細を調査した結果が今回の記事ということです。

まとめ

Electron アプリは、一つの設計で Windows/Mac/Linux をサポートできる非常に便利なフレームワークです。しかし、その実態は、「専用ブラウザ」と「Web アプリ」です。その辺りをよく理解した上で使うと非常に便利で効率的な開発が可能です。

一方で、Web アプリでよく起きる制限事項もそのまま適用される場合が多いので利用できないケースもあります。Web アプリの制限の一つにローカルのフォルダにファイルを保存する制限があって、多くの実装では保存の代わりにダウンロードしてファイルを保存するような事が行われていると思います。このファイルの保存の制限に関しては、Electron アプリでは通常のデスクトップアプリと同じ用な方法で保存可能です。

この様に、制限事項やセキュリティ上の問題など個々のアプリで個別の課題があると思いますので利用の際は簡単な実験などをしてその辺りを見極めた上で利用するのが賢い利用法だと思います。

実際は、多くのデスクトップアプリでは十分に実用になるものだと思います。