狠狠撸

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
? 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の
プロセス

比較

Electronでは
? Node.jsのイベントループを各プラットフォーム（Win、Mac、
Linux）のGUIイベントループと統合
? Node.jsのIOポーリングを外部に出し、IPCでブラウザプロセ
スとレンダープロセスが通信
? 闯补惫补厂肠谤颈辫迟で骋鲍滨を操作出来るようにしている

Electronでデスクトップアプリ開発
Building Desktop Application with Electron

開発環境
? 開発環境
? 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"
}

HTMLと
Javascript ? 好きなエディタで好きなように編集
? 次のサンプルは、例のごとく贬别濒濒辞奥辞谤濒诲

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をつける
? プッシュ通知を出す
? 奥别产骋尝を动かす

まとめ
? 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?
? 御静聴ありがとうございました

狠狠撸

わんくま同盟大阪勉強会 Vol.65 electron入門

More Related Content

わんくま同盟大阪勉強会 Vol.65 electron入門