覚えたら書く

IT関係のデベロッパとして日々覚えたことを書き残したいです。twitter: @yyoshikaw

ElectronでHello World

Electron

もう腐るほどやられてるとは思いますが、Electronで Hello Worldやっておきます。

というか、そもそも公式の electron-quick-start に従えばいいだけなんですが。


今回の私用のメモとしてののHello Worldは、以下の前回エントリの続きという感じになっています。


必要な記述をする

最終的なディレクトリ構造は、以下の様な感じになります。

.
├── index.html
├── index.js
├── node_modules/
├── package.json
└── yarn.lock


現在足りて無い、index.html と index.js を記述します。


index.html

<html>
  <head>
    <meta charset="utf-8">
    <title>Sample App</title>
  </head>
  <body>
    <p>Hello World</p>
  </body>
</html>


次は index.js を記述します。

index.js

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

let mainWindow;

function createWindow () {
  mainWindow = new BrowserWindow({
      width: 800, 
      height: 600
    });
  
  mainWindow.loadURL('file://' + __dirname + '/index.html');

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

app.on('window-all-closed', function() {
  console.log(`electron on window-all-closed`);
  if (process.platform !== 'darwin') {
    app.quit();
  }
});

app.on("active", () => {
console.log(`electron on active`);

  if (mainWindow === null) {
      createWindow();
  }
});

app.on('ready', function() {
  console.log(`electron on ready`);
  createWindow()
});


実際の作業は、Visual Studio Codeでやりました。後の実行も含めて。

f:id:nini_y:20181124115234p:plain


実行

せっかく Yarnを入れてある状態なので、以下の通りyarnで実行しています

yarn electron .


以下が表示されました。うん、シンプル（笑）

f:id:nini_y:20181124114850p:plain


まとめ

まとめもへったくれもありませんが、無事に Hello World ができました。


関連エントリ