Motomichi Works Blog

モトミチワークスブログです。その日学習したことについて書いている日記みたいなものです。

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

制作 electron

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

環境

  • 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! と表示されました。

今日はここまで。