Motomichi Works Blog

その日学習したことについて書いている日記です。誰かの役に立ったらそれはそれで嬉しいです。

Electronその0001 HelloWorldまでやってみる

参考にさせて頂いたページ

環境

  • Windows10
  • node 6.11.4
  • npm 5.5.1
  • electron 1.7.9

プロジェクトのディレクトリを作成する

何でも良いけど、el_image_viewerディレクトリを作成しました。

そのディレクトリでnpm initして、適当にenter押しました。

npm init

Electronをプロジェクトディレクトリにインストールする

公式のnpmパッケージのページにならって以下の通りです。

npm install electron --save-dev --save-exact

main.jsの作成とその記述内容

【2017年1月版】今からでも遅くない!Electron入門 - Qiita」にならって以下の通り記述しました。

const electron = require('electron');
const app = electron.app;
const BrowserWindow = electron.BrowserWindow;

let mainWindow = null;
app.on('ready', () => {
  // mainWindowを作成(windowの大きさや、Kioskモードにするかどうかなどもここで定義できる)
  mainWindow = new BrowserWindow({width: 400, height: 300});
  // Electronに表示するhtmlを絶対パスで指定(相対パスだと動かない)
  mainWindow.loadURL('file://' + __dirname + '/index.html');

  // ChromiumのDevツールを開く
  mainWindow.webContents.openDevTools();

  mainWindow.on('closed', function() {
    mainWindow = null;
  });
});

index.htmlの作成とその記述内容

【2017年1月版】今からでも遅くない!Electron入門 - Qiita」にならって以下の通り記述しました。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
  </head>
  <body>
    Hello World!
  </body>
</html>

electronコマンドでmain.jsを実行してみる

el_image_viewerディレクトリで以下のコマンドを実行しました。

./node_modules/.bin/electron ./main.js

Hello World! と表示されました。

今日はここまで。