74
117

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

簡単にデスクトップアプリが作れる! Electron 入門

Posted at

はじめに

今回はWebの技術だけで簡単にデスクトップアプリが作れるElectronについて、始め方や注意点をご紹介します!
デスクトップアプリ開発を始めたいけど始め方が分からない方は、始めの一歩にElectronを選んでみてはいかがでしょう?

YouTube動画

文字だけでなく、動画での解説もしています。
興味のある方はこちらも見ていただけると嬉しいです。
【YouTube動画】簡単にデスクトップアプリが作れる! Electron 入門
簡単にデスクトップアプリが作れる! Electron 入門

Electronとは

Electronとは、HTML、CSS、JavaScriptでデスクトップアプリが作れるものです。
例えば、Slack、VSCode、Atomなど、エンジニアであれば馴染みのある様々なアプリがElectronで作られています。

Electron Forgeとは

Electronのスタート方法はいくつかありますが、今回はオススメのElectron forgeを説明していきます。
Electron forgeの主な特徴は以下の通りです。

  1. Electronのパッケージ化、AutoUpdateに簡単に対応できる
  2. TypeScript, Webpackを簡単に導入できる
  3. React化も簡単

公式ページにコマンド例が記載されており簡単にElectronを始めることができます。
例えば、TypeScript+Webpack対応済みのElectronプロジェクトを始める場合、
以下のコマンドでできます。

開発する時知っておきたいこと

Electronで開発を始める際に、あらかじめ知っておくと便利なことを紹介していきます。

Nodeとブラウザ

ElectronはNodeとブラウザという2つの要素でできており、それぞれ別で動いています。

Nodeでは、一番最初の起動やブラウザの起動が行われます。また、ブラウザを作ったりサイズを決めたりなどブラウザに関する処理や、メニュー部分での処理もここで行われます。

ブラウザでは、Nodeで作られたブラウザのウィンドウの中のJSやReactが動いています。

Electron ForgeにWebpackを導入した場合、Nodeで動く部分をmain、ブラウザで動く部分をrendererと呼び、この2つでwebpackが分かれています。なので、webpackのconfigは2つです。configは4つできるので混乱しがちですが、実際は2つのconfigが別のファイルをインポートしているため4つに見えます。
スクリーンショット 2021-03-15 13.39.10.png

BrowserWindow

デスクトップアプリの詳細を設定するクラスになります。ウィンドウのサイズやどこに表示させるか、常に最前面にしたり、透明化したりなどの設定ができます。
例えば、ウィンドウを常に最前面に表示したい場合、以下のように書きます。

new BrowserWindow({
    height: 600,
    width: 800,
    alwaysOnTop: true // 常に最前面表示
  });

BrowserWindowで使えるオプションはこちらで確認できます。

ipcMain, ipcRenderer

Nodeとブラウザを通信させる時に使います。
ipcMainがNode側でipcRendererがブラウザ側で、この2つを通信させることでNodeとブラウザを連携できます。
ipcRendererからはイベントが送れますが、ipcMainからはイベントを送れず、この場合はブラウザウィンドウからipcRendererに送ります。

Menu,Tray

メニューやアイコンを追加したい時に使うのがMenuとTrayというクラスです。
Menuは、Macでは左上にあるメニューのことです。
Trayは、Macでは右上に表示するアプリのアイコンのことです。
Trayでのアクションをトリガーにブラウザに反映したい時は、Trayでクリックされると、ウィンドウがイベントを送り、ipcRendererが受け取って処理するという流れで書くことが多いです。

まとめ

HTML、CSS、JSで簡単にデスクトップアプリが作れるElectronについてご紹介しました。Electron forgeで始めるのがオススメです。簡単に作れるのでぜひ試してみてください。

74
117
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
74
117

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?