前提となる環境準備
① git：インストールページ
…以下コマンドを実行して、gitのバージョン情報が出力されているかを確認しましょう。
プロジェクト作成に際して内部的に使用されるため、未インストールの場合は導入が必要です。
>git --version
git version 2.36.0.windows.1② Node.js：インストール手順(Microsoft公式doc) / インストーラーの入手
…git同様、Electron開発にはNode.jsが必要になります。以下コマンドで導入状況を確認します。
>node -v
v16.15.0
>npm -v
8.5.5
インストールした直後だと、コマンドがまだ認識されず上記のバージョン表示がされないことがあります。gitやnode.jsのインストールが完了したら一度再起動しましょう。
Electronプロジェクトの作成(インストール)
Electronプロジェクトの新規作成は以下のステップで進めていきます。
- プロジェクト用ディレクトリの作成＆npm init
- Electronのインストール
- Electronアプリの実行準備(エントリポイントの作成と設定)
- 表示するHTMLファイルの作成と読み込み
詳細は以下の公式ドキュメントにて確認できます。
プロジェクト用ディレクトリの作成＆npm init
プロジェクト開発を行っていくディレクトリを用意し、cdコマンドでそのディレクトリへ移動します。
コマンドプロンプトにて任意の場所で以下を実行しましょう。
>mkdir hiramame_test_app && cd hiramame_test_app＊ここでのフォルダ名([hiramame_test_app]の部分)は任意ですが、作成するアプリ名を設定しておくと良いと思います。
次に、npm initを実行します。
>npm init -ynpm initとは、init(=initialize)の意味の通りnpmの初期化処理実行コマンドです。
ここで生成されるpackage.jsonはインストールパッケージの管理を行うためのもので、これを追加のインストールや環境設定の変更時に都度更新していくことでnpmでのトラブルを防ぎます。
ここまでで、以下のディレクトリ構成で[package.json]が生成されていれば、この手順は完了です。
Electronのインストール
以下のコマンドでElectronをインストールします。
>npm install --save-dev electronインストールが正常に終了すると、以下のようなフォルダ構成になっていることを確認できます。
以下のコマンドを実行して、画像のようなデフォルトElectronアプリが起動すればOKです。
>npx electron
Electronアプリの実行準備(エントリポイントの作成と設定)
ここまででElectronのインストール作業は完了しました。
ここからは実際に私たちが作成していくアプリのファイルを作っていきます。
Step1. main.jsの作成
まずは、Electronアプリケーションのエントリポイントとなる「main.js」ファイルを、プロジェクトディレクトリ直下へ作成します。
ここがElectronアプリが起動したときに最初に呼び出されるコードになりますが、現時点では空のままで大丈夫です。
Step2. package.jsonの編集
次に、npm init時に作成されたpackage.jsonを編集して、electronの実行準備を整えていきます。
① “main”を”index.js”から”main.js”(作成したエントリポイント)へ書き換える
② scripts フィールドへスタートコマンドを追加
"scripts": {
"start": "electron ."
}
ここまでの手順が完了したら、試しに以下のコマンドを実行してみましょう。
>npm start
hiramame_test_app@1.0.0 start
electron .
上記のように出力され、エラーメッセージウィンドウなどが起動しなければ正常にエントリポイントを呼び出してElectronアプリが起動しています。
(この時点ではmain.jsが空のため何も起こりません)
Ctrl＋Cで終了できます。(バッチ ジョブを終了しますか (Y/N)? と聞かれるのでYを入力して終了)
表示するHTMLファイルの作成と読み込み
Electronアプリでは、ローカルに作成したHTMLファイル or URLで読込んだ内容を表示させることができます。
今回はローカルHTMLファイルをプロジェクトフォルダ直下に用意して読込んでみましょう。
まずは読込みたいHTMLファイルを用意します。今回は[index.html]という名前でプロジェクトフォルダ直下へ新規作成しました。
HTMLは自由に記述していただいて問題ありませんが、ここでは情報を簡素化するために一旦文字列だけを入力しておきます。
次に、エントリポイントmain.jsを編集して、作成したHTMLファイルを読み込みながらアプリを起動します。
main.js
// CommonJSモジュールとしてelectronをインポート
const { app, BrowserWindow } = require('electron')
// 関数createWindow を定義
const createWindow = () => {
// ウィンドウインスタンスの作成＆サイズの指定
const win = new BrowserWindow({
width: 800,
height: 600
})
// 読込むHTMLファイルを指定
win.loadFile('index.html')
}
// appモジュールreadyイベントの発生を待って、ブラウザウィンドウを作成する
app.whenReady().then(() => {
createWindow()
})以下が、上記ソースコードのポイントです。
- メインプロセスの動作のため、先頭行でelectronモジュールをインポートする
const { app, BrowserWindow } = require('electron') - createwindow関数内では、ウィンドウインスタンスの生成と、そのインスタンス(=表示ウィンドウ)で読込むHTMLファイルの指定を行っている。
- Electronではappモジュールreadyイベント発生以降出ないとウィンドウを生成できないため、
app.whenReady()で待ってからcreatewindow関数を呼び出している
ソースコード各所で使用されている=>() といった記述はアロー関数といいます。以下でjsの基礎やアロー関数について解説しているため、もしよければお役立てください。
ここまでの作業が完了したら、以下コマンドで動作を確認してみましょう。
>npm start
上記画像のように読込みたいHTMLファイルが表示されていれば、成功です。
コメント