t4traw.net👨‍💻Electronでアプリケーションを一つ作った時のメモ2019-03-11ちょっとお仕事でElectronを触る機会があり、今後も使う事があると思うので、自分のためのTip集というか覚書。WEB系の技術のみでネイティブみたいなアプリケーションが作れるのは感動しましたね。自分はMacなので、Windowsで開発となると微妙に違う部分があるかもしれません。自分の場合はMacで開発してWindows用のアプリケーション(ポータブルなexe)をビルドしました。nodejsのインストールはすでにしてある物とします。必要なファイルの準備とりあえず、initをします。余談ですが、最近このyオプションを知りました。-ypackage.jsonができたので、さっそくelectronをインストールします。-Dで、次にsrcディレクトリを作って、その中に『main.js』『index.html』『package.json』を作成します。「これってわざわざsrcディレクトリにする必要あるん?ルートに置くじゃだめなの?」と思っていましたが、最終のビルドをする時にこれが原因で躓いたので、ひとまず最初は無難に作成しておくことをオススメします。worldができます。メインプロセスとレンダラープロセスがあるElectronにはメインプロセスとレンダラープロセスがあって、メインは名前の通りアプリケーションの核となるプロセスで、いわゆるNodejsな空間、レンダラーは1つの画面毎に生成されるプロセス(自分の中ではView用のjsと解釈)。具体的に何が違うかっていうとアクセスできるAPIに違いがあります。APIこれはChromeのAPI拡張を開発する時にも同じだったので、すんなり受け入れる事ができました。}})基本的な部品をrequireして、Windowを1つ作るだけ。world</h1></body><script></script></html>で、最後にメインプロセスはmain.jsですよとpackage.jsonに書きこきます。"",}あ、あと最終的にビルドする時に必要なので、こちらに同じバージョンのelectronをインストールしておきます。-Dルートディレクトリに戻り、これで実際に実行します。src無事起動しました。メインプロセスとレンダラープロセスでデータのやり取りメインプロセスとレンダラープロセスでのデータのやり取りはipcを通じて行います。レンダラープロセスである要素をクリックしたら特定の文字列を返すようにしてみます。数字が入力されたらオラオラする感じにしてみましょうか。こんな機会でしか使えないのでcsshakeをインストールします。プログラムの中で使うものはsrcディレクトリ内でインストールしておきます。./srcとりあえずレンダラープロセスにeventを追加します。document.getElementById('app').appendChild(newNode)})</script>次にメインプロセス側を書きます。受け取った数字回数分、小分けでレンダラープロセスに送信します。renderOra(args)})これで起動すると......いい具合にオラオラしていますね。ローカルにデータを保存する(localStorageみたいなキャッシュ)ブラウザでいうlocalStorageみたいなキャッシュを保存するには、electron-storeがシンプルで便利でした。Support/electron_helloworld/config.jsonフルスクリーン&kioskモードで起動するフルスクリーンかつ操作を受け付けないkioskモードも簡単にできました。kioskモードにするとアプリの終了などが大変なので、ショートカットキーを設定。app.quit()})あとカーソルを非表示に(これはcssだけど)。none;}tmpディレクトリの取得方法ファイルなどのダウンロードに一時的なディレクトリ(tmpディレクトリとかテンポラリっていうやつ)が必要になります。そのときはapp.getPath('userData')などで実行環境(WinやMac)など意識せずにパスの取得ができます。ビルドはelectron-buildビルドに関してはelectron-packagerとかasarとかありますが、他人に配布するという用途ではelectron-buildを使えばOKです。-Dで、srcディレクトリの中にビルド用のスクリプトを作成します。},});今回はサクっとexe単体で使えるようにしたかったので、portableに。あとicoファイルを指定する事でアイコンの設定などができます。ビルドする時に同梱したいパッケージなどがsrc/node_modulesに入っていないとダメなので注意してください。src/build-winこれでdistディレクトリの中にexeが生成されていると思います。自分が気になった事を走り書きしてみました。今回書いたコードをリポジトリにまとめておきました。いってもただ「オラオラ」してるだけのモノですがwt4traw/electron_helloworldそれでは。