Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

electronについて、appの作成まで5分で把握する

More than 5 years have passed since last update.

概要

  • ちまたで流行りの electronについて、試してみました
  • 設定からappの作成まで、最低限の確認をやりました

この記事のターゲット

  • electronにて appを作成する際に、最低限何が必要が、5分で知りたい人

必要なpackageのinstall

npm install -g electron-prebuilt 
npm install -g electron-packager

初期設定

# 必要なファイルの配置
mkdir electron_sample
cd electron_sample
npm install
touch main.js
touch index.html

#配置確認
[@electron_sample]$ tree
.
├── index.html
├── main.js
└── package.json

コーディング

下記URLの通りです.
http://electron.atom.io/docs/latest/tutorial/quick-start/

main.js

main.js
var app = require('app');
var BrowserWindow = require('browser-window');
require('crash-reporter').start();

var mainWindow = null;

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

app.on('ready', function() {
  mainWindow = new BrowserWindow({width: 800, height: 600});
  mainWindow.loadUrl('file://' + __dirname + '/index.html');
  mainWindow.openDevTools();
  mainWindow.on('closed', function() {
    mainWindow = null;
  });
});

index.html

index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
  </head>
  <body>
    <h1>Hello World!</h1>
    We are using Node.js <script>document.write(process.version)</script>
    and Electron <script>document.write(process.versions['electron'])</script>.
  </body>
</html>

package.json

package.json
{
  "name": "electron_sample",
  "version": "0.1.0",
  "main": "main.js"
}

appの作成

# mac用のapp作成
electron-packager electron_sample(directory名) sample(アプリ名) --platform=darwin --arch=x64 --version=0.34.0(electronのバージョン)

すると sample-darwin-x64 なるdirectoryが生成される.
確認してみると下記のファイルが生成されていることが分かる

[@sample-darwin-x64]$ ls
LICENSE     sample.app  version

appの実行

上記 appの作成で作られた sample.app をopenしてみると、
hello world!が表示されます.!
fmtkig.png

備考

この記事は個人blogから転載しました。
http://selmertsx.hatenablog.com/

selmertsx
Qiitaは公開できるメモ帳
http://selmertsx.hatenablog.com/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away