プログラミング

たった4記事で基本が学べるElectron入門 vol.1

Electronを学習できるサイトはたくさんありますが、体系的に基本的なことを学べるサイトが見つけにくかったりしませんか?

インストール → Hello, World → パッケージ化(exe)までしか解説していない記事や断片的な機能のみの説明で終わる記事が多くて僕はちょっと厳しいなと思いました。

実際に僕が公式サイトで必要そうな機能をつまみ食いしながら、簡単なアプリを作成するまでにたどった道を簡単にまとめました。

このシリーズがこの記事を見てくださっているあなたの学習の一助になると嬉しいです。   

では、さっそく始めていきましょう。

完成品イメージ

一覧画面完成イメージ
一覧画面(検索機能あり)
登録・更新の完成イメージ
登録・更新画面

要件

  • 一覧機能
  • 検索機能
  • 登録・更新機能
  • CSSはBootStrapを使用
  • DBはneDBを使用

学習の流れ

Electron入門4Step

  1. たった4記事で基本が学べるElectron入門 vol.1 ← 当記事
  2. たった4記事で基本が学べるElectron入門 vol.2 neDBデータ取得とicp通信
  3. たった4記事で基本が学べるElectron入門 vol.3 neDB登録・更新
  4. たった4記事で基本が学べるElectron入門 vol.4 完成版

はじめに

Hellow, Worldより発展した内容を~と、書きました。  

しかしシリーズを進めていく前にやはり一度慣習に従って、「Hello, World」アプリを作成しておきましょう。

Hello, Worldすることはインストール、パッケージ化と最小構成を説明するためにはやはり都合がいいためです。

まずは、簡単にElectronはどのようなものか? 

Electron は、JavaScript、HTML、CSS でデスクトップアプリケーションを作成できるフレームワークです。

これらのアプリケーションは、macOS、Windows、Linux 上で直接実行したり、Mac App Store や Microsoft Store 経由で配布したりできます。

出典: フリー百科事典『ウィキペディア(Wikipedia)』

とのことです。  

次は、インストール編です。  

インストール

Node.js、npm、Electronをインストールしていきます。

Node.js, npmインストール

node.jsの公式サイトにアクセスします。  

https://nodejs.org/ja/

node.jsの公式サイトの画像

最新版をダウンロードしてインストールしましょう。

インストール後、コマンドプロンプトでバージョンが表示されることを確認します。

node -v
npm -v

Electronインストール

アプリケーションを作成するためのフォルダを作成します。

コマンドプロンプトで作成したディレクトリに移動
例ではCドライブ直下にpracticeというフォルダを作成していますが、任意の場所でOKです。

mkdir c:\practice
cd c:\practice

コマンドプロンプトからではなく、エクスプローラからフォルダを作成しても問題ありません。  

小技としてフォルダからのアドレスバーから「cmd」と入れることでそのフォルダからコマンドプロンプトを開始できます。

エクスプローラのアドレスバーにcmdと入力してコマンドプロンプトを開く画像

Electronをインストールします。

次のコマンドを入力するとフォルダ内に必要なファイルをダウンロードしてきます。

npm init -y
cmd : npm init -y の結果画像
npm i --save-dev electron
cmd : npm i --save-dev electron の結果画像

次項では作成されたファイルの中を見たり、少しカスタマイズを行います。  

アプリの最小構成

ここではアプリを起動するまでに必要なファイル、設定をしていきます。

エクスプローラc:\practice の画像

設定変更:package.json

作成されたpacage.jsonファイルを開いてください。  
このファイルの用途はアプリの基本情報や機能を管理するファイルとなります。

{
  "name": "practice",
  "version": "1.0.0",
  "description": "",
/*  "main": "index.js",  ①main.jsに書き換える */
  "main": "main.js",
/*
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  ②ここを以下に書き換えることでコマンドプロンプトからのアプリ起動方法が変化します。
*/
  "scripts": {
    "start": "electron ."
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "electron": "^12.0.7"
  }
}

① "main": "index.js", の行の index.js を main.js に書き換えてください。  
書き換えを行わないでもいいのですが、書き換えを行った方がいい理由があります。 

この後index.htmlを作成します。  

作成したindex.htmlに対応するJavaScriptファイルとしてindex.jsを作成・使用する予定です。 

よって、ややこしくならないためにindex.jsではなくmain.jsに名前を変更しました。  

②script部分もtest部分が今回不要なので代わりに起動をわかりやすくするため、変更します。

アプリ起動命令を「electron .」で起動するようになります。  

ファイル作成:index.html

index.htmlを作成します。  

index.html の作成後のエクスプローラ画像
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Electron Practice</title>
</head>
<body>
    Hello, World!!
</body>
</html>

ファイル作成:main.js

main.jsを作成して、以下のソースを貼り付けてください。

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

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

app.whenReady().then(() => {
    createWindow();
    app.on('activate', () => {
        if (BrowserWindow.getAllWindows().length === 0) {
            createWindow();
        }
    });
});

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

これで最小構成の準備が整いました。 
 次はお待ちかねのHello, Worldです。

アプリ起動

コマンドプロントで入力してください。

electron .
Hello, World起動画像

package.jsonで「start」項目に設定した設定です。  

無事、Electronを触る資格を得ました。  

最後にパッケージ化して実際にアプリにしてみましょう。

パッケージ化

パッケージ化するためにまずElectronのパッケージ用の拡張機能をインストールします。

npm install -g electron electron-packager

注意:今回作成したプロジェクト(practice)に対してではなく、userフォルダにインストールされます。

さっそくパッケージ化してみましょう。

electron-packager . --all --overwrite

practiceフォルダに新たにフォルダが作成されたと思います。

※ --all macOS、Windows、Linux全環境分作成します。

※ --overwrite パッケージ化されたフォルダが存在していても上書きしてパッケージ化します。

practice-win32-x64 > practice.exe

パッケージ化されたファイルが格納されているエクスプローラ画像

起動することで、Hello, Worldの画面が表示されます。

まとめ

Electronの概要、インストール、最小構成でのアプリ作成、パッケージ化まで行いました。 

HTML, CSS, JavaScriptのフロント技術のみでデスクトップアプリをお手軽に作れるのはなかなかの魅力があります。

次回は、一覧・検索機能を持った画面の作成に進みます。  

最後まで読んでいただきありがとうございました。

-プログラミング

© 2021 F12.jp