Edited at

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

More than 3 years have passed since last update.


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済みという想定で進めさせて頂きます...!

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


基本的なコード

自分はまだ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>


起動

image

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

image

image

ちゃんとトップに意図したHTMLが表示されましたね。

現在広く用いられているGUIに使用されている技術ですので、もう少し独自のメソッドとかも把握して簡単なアプリケーションが作れるといいですね!

チュートリアルは公式Docに落ちてるので、そこを参照するのが一番いいかもしれません!

https://github.com/atom/electron

ではでは!


参照

http://blog.asial.co.jp/934

http://ics-web.jp/lab/archives/8401