Electronとは
最近流行りのDesktopアプリを作成可能なNode.js製のツール
- atomエディタ
- Visual Studio Code
- kobito for windows
- Slack
まぁとりあえずは試してみたくなるよね？
なので、軽く作ってみるつもりが若干ハマりどころもあったので現時点（2015/12/2）での最小工数でできた部分をメモしておこうと思いました
試してみる
最初に electronのリポジトリ に行くが、全然分からないので、検索かけてみるとある程度の記事が引っかかるかと思います
http://qiita.com/Quramy/items/a4be32769366cfe55778
http://qiita.com/ukiuni@github/items/4f004db5d163f4048ea2
http://phiary.me/electron-tutorial-try/
これらの記事で分かった方はこれ以上読む必要無いので、これ以降は暇な人で
若干ハマったのは書き方は全然これであっていたんですが、最初に動かす時に node index.js みたいな感じでしていたので、全然動かず、「あれ？あれ？」ってなってました（つまり electron の使い方を完璧に誤っていた）
起動までを
npm init -y
init ファイルを作り
npm i --save-dev electron-packager electron-prebuilt
必要なJSパッケージを導入し
"scripts": {
"start": "node_modules/.bin/electron ."
}
npm run start で実行できるようにスクリプトを書き、
'use strict';
let app = require('app');
let BrowserWindow = require('browser-window');
require('crash-reporter').start();
console.dir(BrowserWindow);
app.on('window-all-closed', () => {
if(process.platform !== 'darwin') app.quit();
});
app.on('ready', () => {
let mainWindow = new BrowserWindow({width: 1000, height: 900});
mainWindow.loadUrl(`file://${__dirname}/index.html`);
mainWindow.webContents.openDevTools();
mainWindow.on('closed', () => {
mainWindow = null;
});
});
といったエントリポイントとなる index.js ファイルを用意します
$ ll
total 24
-rw-r--r-- 1 l-03-003 staff 322 12 2 09:56 package.json
drwxr-xr-x 153 l-03-003 staff 5202 12 2 09:56 node_modules
-rw-r--r-- 1 l-03-003 staff 497 12 2 11:48 index.js
この時点でこんなようなデスクトップアプリができます
画面は表示されましたね〜 
ここまでが最小構成でできる Electron だと思います
ではここから、 index.html を追加していきましょう
Viewを作る
単純にJSファイルの
mainWindow.loadUrl(`file://${__dirname}/index.html`);
ここで表示させるHTMLを決めているので、あとは index.html を作るだけです
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
</html>
作成して、表示をしてみてもまだ真っ白です
あとはWebエンジニアならご存知の通り、いつものHTMLページを作ってくだけですね
...
<link rel="stylesheet" href="assets/stylesheets/index.css">
...
追加でCSSも読みこませておきます
いろいろと作ったあとは...
最終的にこうなりました
ということで 株式会社LiB では Starting Memberを募集しております！
（最後まで見てくださりありがとうございましたm(_ _)m）