Electronでアプリケーションをつくる

f:id:kugor9595:20150529101727j:plain
はじめまして、今回初めて記事を書かせて頂きます95(くごー)です(^o^)
好きなスタンドはメタリカです。今日は恒例のゴルフエンジニアのゴルフ練習の日で、先ほど練習が終わりました！今のところボールを真っ直ぐ飛ばすのがやっとです。。早く上手くなりたいと思います！

Electronとは

http://electron.atom.io/

Atomエディタを開発するために生まれたデスクトップアプリケーションエンジンで、社内で使用しているSlackのWindowsアプリケーションもこれで実装されています。特徴としてはNode.js、HTML、CSSでアプリケーションを作成できるとこです。Webの技術のみでアプリケーションの作成が可能なので簡単に作成することができます。今回はElectronでhello electron と表示するアプリケーションをつくってみたいと思います。

実行環境

Electronはクロスプラットフォームでつくることが可能ですが、今回はWindowsの環境で作成していきたいと思います。

準備

Node.jsをインストールします。
http://nodejs.org/
Node.jsのページから[INSTALL]をクリックしてWindows用msiをダウンロードしてください。

Electronのインストール

以下のコマンドでインストールをします。

npm -g install electron-prebuilt

次にアプリケーションのProjectを作成します。
mkdir app;cd app
npm init -y

Electronでは、package.jsonのmainに記載されたJavaScriptファイルがアプリケーションのエントリポイントとなります。
ここではmain.js とします。

///package.json
{
  "version": "0.1.0",
  "main": "main.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  }
}

ファイルの作成

///main.js
'use strict';

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.on('closed', function() {
    mainWindow = null;
  });
});

///index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Electron Read Us</title>
</head>
<body>
<h1>Hello, electron!</h1>
</body>
</html>

実行

では早速実行してみましょう。

electron .

以下のようになればOKです。
f:id:kugor9595:20150515110253p:plain

jQuery導入

アプリケーションの作成にjQueryを使用したほうが、割と手の込んだUIも実現できるので導入します。

以下の2ファイルを準備して、アプリケーションのProject以下に置きます。
・jquery_after.js　　// jQueryをElectron用に変更するファイル
・index.js

じゃあ始めます。
まずはjquery_after.js。

///jquery_after.js
if (typeof module === "object" && module.exports) {
  window.$ = window.jQuery = module.exports;
  module.exports = {};
}

次にindex.jsです。
これは何でもいいので、とりあえず適当にアラートと文字の色を変更させます。

///index.js
$(function(){ 
 alert("sssss");
 $("h1").css('color','red');
});

最後にindex.htmlの変更です。jsファイルの読み込み順だけ注意します。

///index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- 以下の順番で読み込むこと -->
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="jquery_after.js"></script>
<script src="index.js"></script>
<title>Electron Read Us</title>
</head>
<body>
<h1>Hello, electron!</h1>
</body>
</html>

はい、これで実行しましょう。

electron .

以下のようになればOKです。

f:id:kugor9595:20150520095644p:plain

f:id:kugor9595:20150520095646p:plain

まとめ

Webの技術のみで簡単に作ることができました。冒頭でも説明しましたが、Webの技術が得意な人は色々作れそうですね！まだそれほどリファレンスもないので、アプリケーションを簡単に作成したい人には良い機会かと思います。APIも充実しているので単純なアプリだけでなくで、手の込んだUIも実現できるかもしれないですね。　　

https://github.com/sindresorhus/awesome-electron

次回以降は面白そうなAPIなど紹介していけたらなと思います。

ところで逆シャアの時のシャアの敬礼は、何であんなに角度が鋭いんですかね。。