Blogブログ

エンジニアの信尾海翔です。
第五回目のブログではElectronについてまとめたいと思います。

Electronとは

Github社が開発したソフトウェアフレームワークです。
html、css、javascriptなどを使ってmac、windows、linuxなどで動作するデスクトップアプリケーションを作成することができます。
Visual Studio Code、Twitch、MicrosoftTeamsなど様々なアプリケーション開発に使われています。

実際にElectronを使ってデスクトップアプリケーションを作成する

今回は実際にElectronを使って「Hello world」を表示させる簡単なデスクトップアプリケーションを作成したいと思います。
※Electronの開発にはNode.jsが必要です。Node.jsのインストールについては今回は省略します。

まず適当なフォルダを用意、フォルダに移動して

• index.html
• index.js
• package.json(npm init)

　
の三つを用意します。

フォルダ内でElectronをインストール

npm install electron —save-dev

index.htmlに表示させたい文字列を追加（今回は「Hello world」）

index.jsに以下のコードを追加

const { app, BrowserWindow } =require("electron");

function createWindow(){
    win = new BrowserWindow();
    win.loadFile('index.html');
}

app.on('ready', createWindow);

app.on('window-all-closed', () => {
    if(process.platform !== 'darwin'){
        app.quit()
    }
})

コード内容について

function createWindow(){
    win = new BrowserWindow();
    win.loadFile('index.html');
}

関数createWindowはウィンドウの作成しています。
new BrowserWindow()でオブジェクトを生成し、loadFileを使って
作成したindex.htmlを呼び出しています。
new BrowserWindow内ではウィンドウの横幅、高さなどを指定することもできます。

app.on('ready', createWindow);

Electronの起動時にcreateWindowを呼び出しウィンドウの生成を行っています。

app.on('window-all-closed', () => {
    if(process.platform !== 'darwin'){
        app.quit()
    }
})

ウィンドウを閉じた時にapp.quit()を実行し、macの場合でもアプリケーションを終了する処理を行っています。

package.jsonのscriptsに以下を追加

“start”: “electron .”

Electronを起動させるコマンドは「electron パス」となります。

最後にElectronを起動

npm start

以下のような画面が表示されると成功です。

余談

ローグライク系のゲームが好きで、学生の頃にjavascriptで作成した簡単な不思議のダンジョンをデスクトップアプリケーションとして遊べるようにしたいと思い、Electronに興味を持ちました。
今回は簡単な文字列を表示させるだけでしたが、また色々勉強して「第2回」としてブログにまとめたいと考えています。