わんくま同盟大阪勉強会 vol.65 electron入門
TRANSCRIPT
Electron入門 ～Webの技術でデスクトップアプリ開発～
くれすと@thayamizu
目次
自己紹介
Electronとは
Electronの仕組み
Electronでのアプリ開発
まとめ
自己紹介 Self-Introduction
自己紹介
H.N くれすと Twitter thayamizu
GitHub thayamizu
博士（情報学）
趣味 プログラミング、イラスト、カラオケ、音楽鑑賞
クリエイティビティのある活動が好き
TaPL読書会
21回目を迎えました
Types And Programming Languageの輪講 邦訳は型システム入門
全然入門じゃない
告知（1）
次は22回目
西淀川区民ホールで開催 12/20 （日）
13:00 ～17:00
第3会議室
ご興味ある方はどうぞ
告知（２）
コンピュータの舞台裏 (第2回) 計算機の基本を学ぶ集まり
スピーカーとして参加します
西淀川区民ホールで開催 12/19日
14:00～17:00
第1会議室
ご興味のある方はどうぞ
Electronとは What's Electron?
Electron
Electron
Chromium,Node.js をベースとしたHTML,CSS,JavaScript でデスクトップアプリケーションを作ることができるフレームワーク
開発元はGitHub
Atomエディタのために開発
オープンソース(GitHub上で公開されてます)
特徴
HTML,CSS,JavaScriptの知識で、プログラムが作成できる 既にある知識・資産が活用できる
Chromiumのみを考えればよい
Web-Component, WebGLなどリッチな機能が扱える
クロスプラットフォーム 移植が容易
devtoolsを使ったデバッグ、プロファイリング
プロジェクト
類似技術 NW(Node Webkit).js
ApachCordva
Chrome App
Electronの仕組み The Mechanism of Electron
Chromiumの プロセス
Practice on embedding Node.js into Atom Editorより引用
Electronの プロセス
Practice on embedding Node.js into Atom Editorより引用
比較
Practice on embedding Node.js into Atom Editorより引用
Electronでは
Node.jsのイベントループを各プラットフォーム（Win、Mac、Linux）のGUIイベントループと統合
Node.jsのIOポーリングを外部に出し、IPCでブラウザプロセスとレンダープロセスが通信
JavaScriptでGUIを操作出来るようにしている
Electronでデスクトップアプリ開発 Building Desktop Application with Electron
開発環境
開発環境 Node.js,npm
テキストエディタ
Atom, Visual Stdio Code, Emacs、Vimなど
Autocomplete, Emmetが使えると捗ります
HTML,CSS, JavaScriptの基礎知識
Node.jsの インストール
パッケージをインストール
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" }
HTMLとJavascript
好きなエディタで好きなように編集 次のサンプルは、例のごとくHelloWorld
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; }); });
プロジェクトの構成
Electronで 実行
#electron hayamizu$electron .
デバッグ
アーカイブ化
#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
デモ
Menuをつける
プッシュ通知を出す
WebGLを動かす
まとめ
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
次回ネタ
次回の機会があれば話してみたいもの C++
Cortana
型システム
Any Questions?
御静聴ありがとうございました