electronをインストールして使ってみた
electronとは
node.jsで使用できるモジュールで、これを使う事によりnode.jsが動作する環境ならプラットフォームに関係なく動作するアプリケーションを作る事が出来る。
htmlとnode.jsの記法でアプリケーションを作る事が出来るから、webサイドの人でもアプリケーションを開発出来るようになる。
インストール
node.jsとnpmは既に導入済みの前提で話を進めていく。
[code] npm -g install electron-prebuilt [/code] これだけでインストールできるはず...だったけど実行するとエラーになった。 [code] $user npm -g install electron-prebuilt
npm ERR! Darwin 13.4.0 npm ERR! argv "node" "/usr/local/bin/npm" "-g" "install" "electron-prebuilt" npm ERR! node v0.12.4 npm ERR! npm v2.13.2 npm ERR! path /usr/local/lib/node_modules/electron-prebuilt npm ERR! code EACCES npm ERR! errno -13
npm ERR! Error: EACCES, rmdir '/usr/local/lib/node_modules/electron-prebuilt' npm ERR! at Error (native) npm ERR! { [Error: EACCES, rmdir '/usr/local/lib/node_modules/electron-prebuilt'] npm ERR! errno: -13, npm ERR! code: 'EACCES', npm ERR! path: '/usr/local/lib/node_modules/electron-prebuilt' } npm ERR! npm ERR! Please try running this command again as root/Administrator. npm ERR! error rolling back Error: EACCES, rmdir '/usr/local/lib/node_modules/electron-prebuilt' npm ERR! error rolling back at Error (native) npm ERR! error rolling back { [Error: EACCES, rmdir '/usr/local/lib/node_modules/electron-prebuilt'] npm ERR! error rolling back errno: -13, npm ERR! error rolling back code: 'EACCES', npm ERR! error rolling back path: '/usr/local/lib/node_modules/electron-prebuilt' }
npm ERR! Please include the following file with any support request: npm ERR! /Users/hogehoge/node_test/electron-readus/npm-debug.log [/code]
どうやら、"ディレクトリが作れないからインストールできないぜ!"って怒られてる？
という事でsudoで実行してみる。
[code] sudo npm -g install electron-prebuilt [/code]
すると、あっさりインストール完了。
多分 -g オプションでどこからでも使用できるようにインストールしようとしてるからsudo付けないと駄目なんだろう。
多分普通にディレクトリ以下のみに適応させるだけならsudo付けなくても大丈夫なハズ。
テストしてみる
テストでアプリケーションを作ってみる。
Qiitaにある記事を元に作っていってみる。
http://qiita.com/Quramy/items/a4be32769366cfe55778
作業ディレクトリを作る(プロジェクトフォルダ)
作業する為のディレクトリを作成する。
場所はどこでも良い。
[code]
mkdir electron-readus
[/code]
エントリポイントを決める
起動した時に、実行するファイルを指定する。
ここだとpackage.jsonの"main"で指定できるので開いて編集する。
[code]
{
"name": "electron-readus",
"version": "1.0.0",
"description": "",
"main": "main.js",
"scripts": {
"test": "echo "Error: no test specified" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"glob": "^5.0.14"
}
}
[/code]
個人の環境によって微妙に左右したりするからそこは臨機応変にしてほしい。
main.jsをつくる
さっき決めたmain.jsを作成する。
一応このmain.jsは最初に実行されるから様々な分岐を持たせる事で、アプリを起動した時に幅を持たせられるかもしれない。
[code language="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() {
// ブラウザ(Chromium)の起動, 初期画面のロード mainWindow = new BrowserWindow({width: 800, height: 600}); mainWindow.loadUrl('file://' + __dirname + '/index.html');
mainWindow.on('closed', function() { mainWindow = null; }); });
[/code]
mainWindow.loadUrl()で読み出すhtmlを決めれるっぽい。
mainWindow.on('closed'~の部分は閉じるボタンを押したときの挙動制御だろうか。
記法はネイティブのjavascriptというよりnode.jsな感じが近い。
index.htmlを作る
読み出すindex.htmlを作る。
こいつがアプリを起動した時に画面に表示される。
とりあえずhellowordから。
[code language="html"] <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Electron Read Us</title> </head> <body> <h1>Hello, electron!</h1> </body> </html> [/code] こちらはほぼ普通にhtmlだからとっても分かりやすい。
実行してみる
実行は作業ディレクトリ内で実行する。
コマンドは
[code]
electron .
[/code]
だけ。これを実行すると画面が新しく立ち上がって "Hello, electron!" と表示されるハズ。
終わりに
とりあえずテストで起動するまでやってみたけど、とても簡単に出来た。
結構作りやすいかもって印象だからオリジナルでなにか私もアプリケーションを作ってみようと思う。
