CircuitJS1をElectronアプリ化する

電子回路のシミュレーションツールを探していたところ、ブラウザ上で動的にシミュレートするサービス CircuitJS1 を見つけました。

ちょうどQucsという他の電子回路シミュレータを触り始めたところだったのですが、Qucsでは回路に変更を加えるたびにシミュレーションコマンドを意図的に実行しなくてはならないため、少し煩わしく感じていました。
以前に、iCircuitという動的に電子回路のシミュレーションができるiOSアプリを使っていたこともあり、似たような操作感のシミュレータは無いかと探していたところ、このCircuitJS1を見つけました。

CircuitJS1の操作感については、リンク先で実際に触ってみてもらうのがわかりやすいです。 CircuitJS1では、回路に追加した抵抗などによる変化を即座にシミュレーションに反映してくれるだけではなく、作成した回路図のURLリンクなども生成できるため、Markdownなどのテキストメモとの相性もいいと思います。

そんな素晴らしいCircuitJS1なのですが、使っているうちにデスクトップアプリとしてオフラインでも使用したい欲求が湧き上がってきました。

そこで今回、CircuitJS1をElectronアプリ化してみましたので、その手順をまとめてみました。

まず、CircuitJS1のGitHub リポジトリはこちらになります。
pfalstad/circuitjs1: Electronic Circuit Simulator in the Browser

READMEを読むと、Electronアプリとしてビルドするための方法が記載してありますので、それに沿って進めていきます。おおまかには以下の手順になります。

必要なツールのインストール
EclipseからGWT コンパイル(JavaのコードをJavaScriptに変換)
Electron用のディレクトリ構成を構築
Electronアプリとして起動

それでは進めていきましょう。

必要なツールのインストール

以下のツールをそれぞれインストールします。

Java8 (JDK8)
Eclipse IDE for Java Developers
- Eclipse GWT Plugin (インストール方法については後述)
electron

手元の環境ではArchLinuxとパッケージマネージャにyayを使っているので、以下のコマンドでインストールしました。

$ yay -S jdk8-openjdk eclipse-java electron

合わせて、CircuitJS1のコードも適当な場所にgit cloneしておきましょう。

$ git clone https://github.com/pfalstad/circuitjs1.git

EclipseからGWT コンパイル(JavaのコードをJavaScriptに変換)

Electronアプリとして動かすためには、Javaで書かれているコードをJavaScriptに変換しなくてはなりません。（GWT/Electronに詳しくないため、間違った理解をしているかもしれません）
そのためにGWT（ Google Web Toolkit ）を使って変換を試みます。

GWT プラグインのインストール

インストールしたEclipseを起動して、適当なワークスペースを設定します。
Help > Eclipse Marketplace から"GWT"で検索して、GWT Eclipse Pluginをインストールします。

Javaのバージョン確認

GWTはJava 8を使ってコンパイルするのがいいようです。（僕は最初にJava 11を使ってコンパイルしたのですが、以下のエラーが出てGWTのコンパイルができませんでした。）

Compiling module com.lushprojects.circuitjs1.circuitjs1 [ERROR] Hint: Check that your module inherits 'com.google.gwt.core.Core' either directly or indirectly (most often by inheriting module 'com.google.gwt.user.User')

Eclipseが使用するJavaのバージョンは、 Window > Preferences > Java > Installed JREs で確認できます。ここでJava 8が設定されていないようなら、設定し直す必要があります。

参考までに、手元の環境で設定されている値は以下になります。

JRE home: /usr/lib/jvm/java-8-openjdk
JRE name: java-8-openjdk

CircuitJS1プロジェクトのインポートとGWTでのコンパイル

Welcome画面から、"Import existing projects"をクリックします。
Select root directory > Browse... でさきほどcloneしたcircuitjs1/ディレクトリを指定します。
ツールバーにあるGWTボタンから GWT Compile Project... をクリックし、circuitjs1プロジェクトを選択してコンパイルを実行します。
コンパイルに成功すると、 war/ディレクトリ下にWEB-INF/とcircuitjs1/が生成されます。

$ cd circuitjs1
$ ls war
circuitjs1/     # <- generated
circuitjs.html
customfunction.html
customlogic.html
iframe.html
shortrelay.php
WEB-INF/        # <- generated

Electron用のディレクトリ構成を構築

Electronアプリとして起動させるために、Electron用のディレクトリ構成を作ります。
Application Distribution | Electron

（ここでは例としてWindows/Linux用のディレクトリ構成にします。macOSではディレクトリ構成が異なってきますのでご注意ください。）

$ cd circuitjs1
$ mkdir -p electron/resources
$ cp -r app electron/resources/
$ cp -r war electron/resources/app/
$ tree -F -L 2 electron/resources/app/
electron/resources/app/
├── index.html
├── main.js
├── package.json
├── preload.js
├── renderer.js
└── war/
    ├── circuitjs1/
    ├── circuitjs.html
    ├── customfunction.html
    ├── customlogic.html
    ├── iframe.html
    ├── shortrelay.php
    └── WEB-INF/

Electronアプリとして起動

全ての準備が整いました。さっそくCircuitJS1をElectronアプリとして起動してみます。

$ cd circuitjs1
$ electron electron/resources/app/

f:id:ryochack:20190104012015p:plain

これでCircuitJS1がElectronアプリとして起動するようになり、オフラインでも気軽に電子回路シミュレータが使えるようになりました。