Download to read offline
![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"
}](https://image.slidesharecdn.com/lxxiuyd8rdmn92t7rr2w-signature-668c56b30179be3b2e323a2f9c16238bdad8c481036932e4069073ac47e07fc8-poli-161119170842/85/Vol-65-electron-24-320.jpg)
わんくま同盟大阪勉強会 Vol.65 electron入門
- 1.
- 2. 目次 自己紹介 Electronとは Electronの仕組み Electronでのアプリ開発 まとめ
- 3.
- 4. 自己紹介 H.N くれすと Twitter thayamizu GitHub thayamizu 博士（情報学） 趣味 プログラミング、イラスト、カラオケ、音楽鑑賞 クリエイティビティのある活動が好き
- 5. TaPL読書会 21回目を迎えました TypesAnd Programming Languageの輪講 邦訳は型システム入門 全然入門じゃない
- 6. 告知（1） 次は22回目 西淀川区民ホールで開催 12/20 （日） 13:00 ～17:00 第3会議室 ご興味ある方はどうぞ
- 7. 告知（２） コンピュータの舞台裏 (第2回) 計算機の基本を学ぶ集まり スピーカーとして参加します 西淀川区民ホールで開催 12/19日 14:00～17:00 第1会議室 ご興味のある方はどうぞ
- 8.
- 9.
- 10. Electron Chromium,Node.js をベースとしたHTML,CSS,JavaScriptで デスクトップアプリケーションを作ることができるフレーム ワーク 開発元はGitHub Atomエディタのために開発 オープンソース(GitHub上で公開されてます)
- 11. 特徴 HTML,CSS,JavaScriptの知識で、プログラムが作成できる 既にある知識・資産が活用できる Chromiumのみを考えればよい Web-Component, WebGLなどリッチな機能が扱える クロスプラットフォーム 移植が容易 devtoolsを使ったデバッグ、プロファイリング
- 12.
- 13. 類似技術 NW(Node Webkit).js ApachCordva Chrome App
- 14. Electronの仕組み The Mechanism ofElectron
- 15. Chromiumの プロセス Practice on embeddingNode.js into Atom Editorより引用
- 16. Electronの プロセス Practice on embeddingNode.js into Atom Editorより引用
- 17. 比較 Practice on embeddingNode.js into Atom Editorより引用
- 18.
- 19. Electronでデスクトップアプリ開発 Building Desktop Applicationwith Electron
- 20. 開発環境 開発環境 Node.js,npm テキストエディタ Atom, Visual Stdio Code, Emacs、Vimなど Autocomplete, Emmetが使えると捗ります HTML,CSS, JavaScriptの基礎知識
- 21.
- 22. パッケージを インストール 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
- 23. 次の手順を実行 プロジェクト用のディレクトリを用意 リポジトリの初期化 npmコマンドでpackage.jsonを作成 #ディレクトリを用意 hayamizu$mkdir sample hayamizu$cd sample #リポジトリを初期化 hayamizu$git init #npminitでプロジェクトを初期化 hayamizu$npm init y プロジェクト の準備
- 24. 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" }
- 25. HTMLと Javascript 好きなエディタで好きなように編集 次のサンプルは、例のごとくHelloWorld
- 26. 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>
- 27. 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(); });
- 28. 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; }); });
- 29.
- 30.
- 31.
- 32. アーカイブ化 #asarコマンドでディレクトリごとアーカイビング hayamizu$asar pack HelloWorldHelloWorld.asar #アーカイブしたasarファイルはelectronが実行できる hayamizu$electron HelloWorld.asar
- 33. 配布可能な状 態にする asarでアーカイビングするだけで配布は可能 ただし、Electronがインストールされていない場合 実行できない 配布可能な状態にするには リリース版のElectronに直接組み込む electron-packagerを使う
- 34. パッケージ化 electron-packagerで、ディレクトリごとパッケージ化 対象プラットフォーム アーキテクチャ Electronのバージョン #electron-packagerコマンドでパッケージ化 hayamizu$electron-packager hello_world HelloWorld -- platform=Win32 --arch=x64 --version=0.35.2
- 35. デモ Menuをつける プッシュ通知を出す WebGLを動かす
- 36. まとめ ElectronはHTML, CSS,JavaScriptでデスクトップアプリを 作成するためのフレームワーク 既存の知識・資産が活用できる ElectronはChomiumブラウザとほぼ同じ仕組みのプロセスで 動いている
- 37. 参考文献 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
- 38. 次回ネタ 次回の機会があれば話してみたいもの C++ Cortana 型システム
- 39.