Electronと...仲良くなりたい... 本当に簡単な最初のことはじめ!!! #JavaScript

Electronまとめ

最近のキラーGUIアプリはこれで作られてる事が多いですよね！
GitHub社謹製エディタAtomや、チャットツールのSlack(弊社も本当にお世話になっております)
あとKobitoもそうだったかな？？？

特徴

OSSであり、誰でも利用可能
HTML/CSS/jsなどのフロント言語のみでGUIの制作が可能
クロスプラットフォーム(ChromeがどのPCでも動くのと同様にChromiumがベースに作られている)

ファイル構成

main.js
package.json
index.html

※Electron node.js npmはinstall済みという想定で進めさせて頂きます...!

最低限起動に必要なのはこの３つのみです

基本的なコード

自分はまだnode.jsすらいまいちわかりません！(ごめんなさい
まちがった情報が含まれている可能性がありますので、適時まさかりを投げてくださると助かります。

設定ファイルです

package.json

{
  "name": "FirstApp",
  "version": "0.1.0",
  "main": "main.js"
}

Electronの本体スクリプトですね

main.js

var app = require('app');
var BrowserWindow = require('browser-window');
var mainWindow = null;

//***クラッシュレポート***///
require('crash-reporter').start();

//***全てのウィンドウ閉じた時の処理を定義 要するに×ボタン押したとき***///
app.on('window-all-closed', function() {
    app.quit();
});

//アプリケーションの初期化が完了したら呼び出される
app.on('ready', function() {
    // メインウィンドーを作成します
    // ここでは幅800,縦400のウィンドーが作るインスタンス生成になります
    // ウィンドウオブジェクトを操るには今後、mainWindow変数にアクセスすることになります
    mainWindow = new BrowserWindow({width: 800, height: 400});
    // メインウインドーに表示するURLを指定
    // ここにあなたのブログのURLを入れてみて下さい。表示されますよ！！！
    // __dirnameには現在実行中のファイルディレクトリパスが格納される
    mainWindow.loadUrl('file://' + __dirname + '/index.html');
    //メインウインドウが閉じられたときの処理
    mainWindow.on('closed', function() {
        //　終了するときはmainWindow変数を初期化する
        mainWindow = null;
    });
});

起動時にトップに表示したいHTMLです

index.html

<!DOCTYPE html>
<html>
  <head>
    <script>
      alert('momozono coming!');
    </script>
  </head>
  <body>
    <h2>So Sleepy!!!!</h2>
  </body>
</html>

起動

electronをカレントディレクトリで起動します。(npm, node.jsのinstallは割愛させて頂きます)

ちゃんとトップに意図したHTMLが表示されましたね。
現在広く用いられているGUIに使用されている技術ですので、もう少し独自のメソッドとかも把握して簡単なアプリケーションが作れるといいですね！

チュートリアルは公式Docに落ちてるので、そこを参照するのが一番いいかもしれません！
https://github.com/atom/electron

ではでは！

参照

http://blog.asial.co.jp/934
http://ics-web.jp/lab/archives/8401