satoyama-editorをElectronでexeにした

毎回開発のときにサーバーを起動するのが徐々に面倒になってきていた。Cloud9にアップロードしておこうかと思ったのだが、まだ開発中の段階ではフリープランの範囲でつかえるのはパブリックなプロジェクトのみのようだった。よって、次の２つを選択肢として検討した。

1. Jettyを利用したwarを作成する
2. Electronを利用する

上記２つを検討してみたところ、JettyだとJavaで書く上にコマンドラインから実行することになると思われた。単にJavaが書きたくないな、と思っただけではある。ただ、GitBucketのような形式をやってみたい気持ちもあるため、いずれはやろうと考えている。今回の用途ではまだまだhtmlやcss、jsは修正を頻繁に加えていくことが想定されるため、コンパイルが待てるかな？という気持ちもあった。

一方でElectronのほうはフォルダを指定して実行という形式になる。以前にもやったことがあるので比較的簡単だったことも記憶にあった。ただ、この場合だとフォルダごと移動するようになって面倒ではある。

２つを比較したところ、サーバーが不要であるという面からElectronを採用してみることにした。なにせ、サーバー機能はまったく不要なのにサーバーが必要なのがダメダメなところで、それは音声ファイルがあるからというだけだ。もうFMシンセをビルトインしてしまったほうがいいんじゃないかとさえ思うのだが、エディタである。つくっているのはエディタなので、シンセサイザーをつくろうとしないように心掛けている。

ということでポート指定をしなくてもいい、コマンドがそれほど長くなくて済む、以前にもやったことがあるという理由でElectron採用！

Electronをつかう

ググるといろんな情報が豊富に出てくるような時代になっているようだ。以前にmacOSでやったときにはここまで多くはなかったと思う。まったく依存関係の薄いただのhtml+css+jsなので、困りそうな予感はまったくしない。そういうわけで、さらりと環境を整える。

まずはelectron-prebuiltをインストールする。node.jsはインストール済み。なぜなら、電子書籍を書いた後、ePubにするところをgulpで自動化しているからだ。PowerShellやVBAの書籍を書くのにnode.jsはないだろう、と思ったりもするが、便利なのだから仕方ない。

インストール自体は困りはしない。他のOSに比較してもWindowsはUnix的なもののインストールに困らない時代になった。

npm install -g electron-prebuilt

これで準備は万端。あとは作成していたプロジェクトフォルダを初期化する。

npm init -y

これで作成者とかもろもろを含んだpackage.jsonができあがる。このコマンドを実行しても、もともとつくっていたhtmlなどが吹き飛ぶわけではないので安心して実行するとよろしい。次はElectronが起動するときのエントリポイントを書いていく。基本的にElectronのウィンドウが起動してそこへhtmlを読み込んで動作させるようなものだったと思うので、ググればいくらでもコピペできるものが出てくる。

そういうわけで、実行することができた。

欲が出る

Electronでsatoyama-editorを表示できるようになったわけだが、こうなってくるとダブルクリックで起動してきてほしいものだ。そこで、exeファイルのようなものにできないか調べてみた。すると、あっさりとelectron-packagerなどという正直な名前のモジュールを発見した。コマンドラインから実行できるのでビルドのような雰囲気で利用できる。

electron-packager [アプリにする対象フォルダ] [アプリ名] --platform=win32 --arch=x64 --version=1.4.3 --icon=[アイコンファイル]

これだけで現在のフォルダへElectronアプリ一式が作成される。アイコンについては指定しなければElectron標準のものになるだけ。platformオプションはWindowsではwin32のみが有効のようだ。逆にWindows以外のプラットフォームでWindows用のアプリを出力するときはWineが必要だそうだ。

なお、nodeモジュールとして「electron-packager」をインストールしておけばnode.jsのスクリプトからrequireすることができて、スクリプトから上記のコマンドのかわりをすることができる。今回は何度も実行しそうであったのでそのようにした。

さらに欲が出る

実際、つくってみるといろいろできそうな感じがしてくるので欲が出てきてしまう。しかしいまのところはこの段階でストップ。これ以上Electronとしての作りこみは行わないこととした。理由は２つ。1つ目はElectronアプリをつくりたいわけではないということ。本当に必要なものは快適な執筆環境なので、つくりこみは趣味の世界で他でやろうと思う。2つ目はそぎ落とした機能を復活させてしまうことになりかねないということ。これでは本末転倒だ。

ということで、今回はここまでとしてElectronアプリとして執筆を快適に行いつつ、今後の改善を検討していく。しかし、Electronにすると100MB近い大きさになるのはどうなんだろう。仕方ないとはいえ。Windowsアプリとして書き直してみてもいいかな、とすら思うほどだ。実行環境を抱き込んでいるかどうか、という違いではあるので2017年現在では「スモールだぜ」ということかもしれない。

それにしても快適だ。localStorageも問題なくつかうことができて、この投稿記事も昨日の夕方書き始めたものだがアプリを落としても保存されたままだ。Electronはほんとにブラウザなんだなと今更思ったりした。鐘の音も鳴るしね。

WEB+DB PRESS Vol.94

プログラミングGROOVY

YAMAHA シンセサイザー REFACE-DX