m_shige1979のときどきITブログ

プログラムの勉強をしながら学習したことや経験したことをぼそぼそと書いていきます

Github(変なおっさんの顔でるので気をつけてね)

https://github.com/mshige1979

Electronでデスクトップアプリのサンプル

YAPCでキーワードが出たので…

デスクトップアプリ作れるけどどうしたらいいのか…

参考

qiita.com
Electron
electron.atom.io

設定

npm
sudo npm -g install electron-prebuilt
mkdir electron-readus
cd electron-readus

init

$ npm init -y
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sane defaults.

See `npm help json` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg> --save` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
name: (electron-readus) sample1
version: (0.0.0)
description:
entry point: (index.js)
test command:
git repository:
keywords:
author:
license: (ISC) MIT
About to write to /Users/matsumotoshigeharu/electron-readus/package.json:

{
  "name": "sample1",
  "version": "0.0.0",
  "description": "",
  "main": "index.js",
  "dependencies": {
    "electron-prebuilt": "^0.31.0"
  },
  "devDependencies": {},
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "MIT"
}


Is this ok? (yes)

ソース

index.html
<!DOCTYPE html>
<html>
  <head>
    <title>Hello World!</title>
  </head>
  <body>
    <h1>Hello World!</h1>
    We are using io.js <script>document.write(process.version)</script>
    and Electron <script>document.write(process.versions['electron'])</script>.
  </body>
</html>
index.js
var app = require('app');  // Module to control application life.
var BrowserWindow = require('browser-window');  // Module to create native browser window.

// Report crashes to our server.
require('crash-reporter').start();

// Keep a global reference of the window object, if you don't, the window will
// be closed automatically when the JavaScript object is GCed.
var mainWindow = null;

// Quit when all windows are closed.
app.on('window-all-closed', function() {
  // On OS X it is common for applications and their menu bar
  // to stay active until the user quits explicitly with Cmd + Q
  if (process.platform != 'darwin') {
    app.quit();
  }
});

// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
app.on('ready', function() {
  // Create the browser window.
  mainWindow = new BrowserWindow({width: 800, height: 600});

  // and load the index.html of the app.
  mainWindow.loadUrl('file://' + __dirname + '/index.html');

  // Open the devtools.
  mainWindow.openDevTools();

  // Emitted when the window is closed.
  mainWindow.on('closed', function() {
    // Dereference the window object, usually you would store windows
    // in an array if your app supports multi windows, this is the time
    // when you should delete the corresponding element.
    mainWindow = null;
  });
});

起動

electron .

f:id:m_shige1979:20150823113325p:plain

できた
きちんとパッケージとしてなんかを行わないとデバッグモードって感じのようです

ようつべでコマンドの押下よりデスクトップの起動を確認

youtu.be

所感

基本、サンプルをコピペしただけなので動いた。なんかいろいろやればデスクトップアプリを作成できるかも
htmlだけでandroidiosアプリではなくデスクトップアプリも可能になってきたようです。
仕事の都合上、時間が取れない場合は他の技術で対応できるのは便利な感じ