はじめに
今回はWebの技術だけで簡単にデスクトップアプリが作れるElectronについて、始め方や注意点をご紹介します！
デスクトップアプリ開発を始めたいけど始め方が分からない方は、始めの一歩にElectronを選んでみてはいかがでしょう？
YouTube動画
文字だけでなく、動画での解説もしています。
興味のある方はこちらも見ていただけると嬉しいです。
【YouTube動画】簡単にデスクトップアプリが作れる！ Electron 入門
Electronとは
Electronとは、HTML、CSS、JavaScriptでデスクトップアプリが作れるものです。
例えば、Slack、VSCode、Atomなど、エンジニアであれば馴染みのある様々なアプリがElectronで作られています。
Electron Forgeとは
Electronのスタート方法はいくつかありますが、今回はオススメのElectron forgeを説明していきます。
Electron forgeの主な特徴は以下の通りです。
- Electronのパッケージ化、AutoUpdateに簡単に対応できる
- TypeScript, Webpackを簡単に導入できる
- React化も簡単
公式ページにコマンド例が記載されており簡単にElectronを始めることができます。
例えば、TypeScript+Webpack対応済みのElectronプロジェクトを始める場合、
以下のコマンドでできます。
npx create-electron-app my-new-app --template=typescript-webpack
開発する時知っておきたいこと
Electronで開発を始める際に、あらかじめ知っておくと便利なことを紹介していきます。
Nodeとブラウザ
ElectronはNodeとブラウザという２つの要素でできており、それぞれ別で動いています。
Nodeでは、一番最初の起動やブラウザの起動が行われます。また、ブラウザを作ったりサイズを決めたりなどブラウザに関する処理や、メニュー部分での処理もここで行われます。
ブラウザでは、Nodeで作られたブラウザのウィンドウの中のJSやReactが動いています。
Electron ForgeにWebpackを導入した場合、Nodeで動く部分をmain、ブラウザで動く部分をrendererと呼び、この２つでwebpackが分かれています。なので、webpackのconfigは２つです。configは４つできるので混乱しがちですが、実際は２つのconfigが別のファイルをインポートしているため４つに見えます。
BrowserWindow
デスクトップアプリの詳細を設定するクラスになります。ウィンドウのサイズやどこに表示させるか、常に最前面にしたり、透明化したりなどの設定ができます。
例えば、ウィンドウを常に最前面に表示したい場合、以下のように書きます。
new BrowserWindow({
height: 600,
width: 800,
alwaysOnTop: true // 常に最前面表示
});
BrowserWindowで使えるオプションはこちらで確認できます。
ipcMain, ipcRenderer
Nodeとブラウザを通信させる時に使います。
ipcMainがNode側でipcRendererがブラウザ側で、この２つを通信させることでNodeとブラウザを連携できます。
ipcRendererからはイベントが送れますが、ipcMainからはイベントを送れず、この場合はブラウザウィンドウからipcRendererに送ります。
Menu,Tray
メニューやアイコンを追加したい時に使うのがMenuとTrayというクラスです。
Menuは、Macでは左上にあるメニューのことです。
Trayは、Macでは右上に表示するアプリのアイコンのことです。
Trayでのアクションをトリガーにブラウザに反映したい時は、Trayでクリックされると、ウィンドウがイベントを送り、ipcRendererが受け取って処理するという流れで書くことが多いです。
まとめ
HTML、CSS、JSで簡単にデスクトップアプリが作れるElectronについてご紹介しました。Electron forgeで始めるのがオススメです。簡単に作れるのでぜひ試してみてください。