わんくま同盟大阪勉強会 vol.65 electron入門
TRANSCRIPT
自己紹介
H.N くれすと Twitter thayamizu
GitHub thayamizu
博士(情報学)
趣味 プログラミング、イラスト、カラオケ、音楽鑑賞
クリエイティビティのある活動が好き
Electron
Chromium,Node.js をベースとしたHTML,CSS,JavaScript でデスクトップアプリケーションを作ることができるフレームワーク
開発元はGitHub
Atomエディタのために開発
オープンソース(GitHub上で公開されてます)
特徴
HTML,CSS,JavaScriptの知識で、プログラムが作成できる 既にある知識・資産が活用できる
Chromiumのみを考えればよい
Web-Component, WebGLなどリッチな機能が扱える
クロスプラットフォーム 移植が容易
devtoolsを使ったデバッグ、プロファイリング
Electronでは
Node.jsのイベントループを各プラットフォーム(Win、Mac、Linux)のGUIイベントループと統合
Node.jsのIOポーリングを外部に出し、IPCでブラウザプロセスとレンダープロセスが通信
JavaScriptでGUIを操作出来るようにしている
開発環境
開発環境 Node.js,npm
テキストエディタ
Atom, Visual Stdio Code, Emacs、Vimなど
Autocomplete, Emmetが使えると捗ります
HTML,CSS, JavaScriptの基礎知識
パッケージをインストール
Windows 公式サイトで配布されているNode.jsのインストーラから
Mac/Linux 各ディストリビューションのパッケージマネージャから
#electron hayamizu$npm install -g electron-prebuilt #asar hayamizu$npm install -g asar #electron-packager hayamizu$npm i install –g electron-packager
次の手順を実行 プロジェクト用のディレクトリを用意
リポジトリの初期化
npmコマンドでpackage.jsonを作成
#ディレクトリを用意 hayamizu$mkdir sample hayamizu$cd sample #リポジトリを初期化 hayamizu$git init #npminitでプロジェクトを初期化 hayamizu$npm init y
プロジェクトの準備
package.json テキストを入力
{ "name": "electron_sample" , "version": "1.0.0", "main": "main.js" , "scripts": { "test ":" echo ¥"Error: no test specified¥" && exit 1" }, "keywords": [], "author": "t.hayamizu", "license": "MIT" , "description": "Sample" }
index.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title >Hello World!</ title> </head> <body> <h1 >Hello World!</ h1> We are using node <script >document.write(process.versions.node)</script >, Chrome <script >document.write(process.versions.chrome)</script >, and Electron <script >document.write(process.versions.electron)</script >. </body> </html>
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(); });
main.js
app.on('ready', function() { // ブラウザ(Chromium)の起動, 初期画面のロード mainWindow= new BrowserWindow({ width: 400, height: 300 }); mainWindow.loadUrl( 'file://'+ __dirname + ' /index.html' ); mainWindow.on('closed', function() { mainWindow= null; }); });
アーカイブ化
#asarコマンドでディレクトリごとアーカイビング hayamizu$asar pack HelloWorld HelloWorld.asar #アーカイブしたasarファイルはelectronが実行できる hayamizu$electron HelloWorld.asar
配布可能な状態にする
asarでアーカイビングするだけで配布は可能 ただし、Electronがインストールされていない場合
実行できない
配布可能な状態にするには リリース版のElectronに直接組み込む
electron-packagerを使う
パッケージ化
electron-packagerで、ディレクトリごとパッケージ化 対象プラットフォーム
アーキテクチャ
Electronのバージョン
#electron-packagerコマンドでパッケージ化 hayamizu$electron-packager hello_world HelloWorld --platform=Win32 --arch=x64 --version=0.35.2
まとめ
ElectronはHTML, CSS, JavaScriptでデスクトップアプリを作成するためのフレームワーク
既存の知識・資産が活用できる
ElectronはChomiumブラウザとほぼ同じ仕組みのプロセスで動いている
参考文献
Electron http://electron.atom.io/
GitHub/atom/Electron https://github.com/atom/electron
HTML5でクロスプラットフォームなデスクトップアプリを開発できる「Electron」とは
http://codezine.jp/article/detail/8782
Electronでアプリケーションを作ってみよう http://qiita.com/Quramy/items/a4be32769366cfe55778
Practice on embedding Node.js into Atom Editor https://speakerdeck.com/zcbenz/practice-on-embedding-node-dot-js-into-atom-editor