Electronでの開発備忘録
Webアプリじゃない普通のPCのアプリを作ってみたくてWebの知識でアプリが作成できるフレームワークであるElectronを使ってみました。今回はその備忘録
electronのインストール
いつものようにnodeをインストールして
npm i -D electron
アプリはsrcとかのディレクトリを中に作ってそこで管理
pakage.jsonはアプリのルートディレクトリとsrcの中に二つ存在する。（ルートディレクトリの方はnpm initで勝手に作られる。）
srcの中のpakage.jsonにアプリケーションの最初に使うjsファイルを記述。
{
"main": "main.js"
}
main.jsを記述。ここにはメインウィンドウを作ったり読み込むHtmlファイルを記述したりする。
mainWindow.loadFile("index.html");
でindex.htmlの読み込み。
ここまで押さえておけばWebアプリと同じ見た目のアプリが作れる。
ちなみに開発時のテストは(srcにmain.jsとか入れてる場合)
npx electron src
で確認できる
テキストエディタの作成
今回作ったのはテキストエディタ
コード補完機能付きのエディタをWebページに埋め込めるace editorというプラグインが公開されていたのでこれを使ってアプリ化してみた。
ネットの記事では読み込み、保存の機能付きのはよくあった。これに加えてファイル新規作成と実行機能を追加した。
苦労点1 jsを別にするとエディタが読み込めない
上記のような問題が発生。electronのチュートリアルでaceを使った作品があってそれを参考にしてみたが、それらはeditor.jsなどという別のjsファイルを作成し、それをhtml側でsrc=で読み込んで使用している。しかし自分でそれを真似てやってみるとなぜかうまくいかなかった。
仕方ないのでhtml内に記入。そうしたところうまくいった。原因はいまだにわからず。
苦労点2 ウィンドウの処理
eletronのデフォの設定だと❌を押してウィンドウを閉じてしまうとアプリは一応起動している状態にはなるのだが、もう一回開くと元のデータが消えてしまっていた。
これを解消するためにactive状態とreactive状態などを作り、ドックから閉じるとき完全に閉じるように変更した。
参考記事
苦労点3 コードの実行
electronはchromeを元に作ってるので、jsがそのまま使える。だからエディタで書いたコードをそのまま実行したい！と思い実装してみた。書いたコードの取得はaceの方で使い方を調べたらすぐできる。
# let editor = ace.edit("editor"); に対してコードの取得
editor.getValue()
これをevalの引数とすれば実行はできた。
evalはBad??
リファレンスにも書いてあるように必要以上にevalを使ってはいけない。
XSSのように悪意のあるコードを実行される恐れがあり、しかも処理も遅い。
これを勉強し上記のサイトに載ってるスマートなコードを採用したのだが、関数を作った場合エラーになってしまった。後";"をつけないと動くがつけるとエラーをはく場合もあった。
今回はWebではなくホストのPCで実行するだけなのでevalを使ってもあまり問題はないので、evalを採用した。
また、Webアプリでプレイグラウンド的なものを作りたい時には、iframeを使ってサンドボックス化することで安全性を高められる。
(ただしその方法も注意がいくらか必要)
メニューの表示
const {app, Menu, dialog, BrowserWindow} = require("electron");
main.jsの最初にdiakigやMenuを読み込むことで使用できる。
今回はhtmlのボタンを押したら検証ツールが出てくるようにしたかったのだが、index.htmlとmain.jsを結びつける方法が見つからない(srcで読み込んでもだめ)だったので、メニューバーから開けるようにした。キーバインドもここで設定を行う。
アプリのパッケージングとアイコン
パッケージングは二種類ある。簡単なのはパッケージャー
npx electron-packager src appname --platform=darwin --arch=x64 --overwrite icon=src/icon/icon.icns
ポイントはアイコン。macではアイコンは画像の形式が.icnsと特殊で、dpiやサイズの違ったものを何枚も用意して、それをicnsというひとまとめの形式にしなければならない。
icnsを簡単に作れるアプリを使って作った。楽チン。
まとめ
electronの基礎的なところと仕様を理解し、アプリを作ることができた！！
今後
コピペができないので、後ほど修正したい。
ダウンロードはこちらから
