electron を知る
TRANSCRIPT
![Page 1: Electron を知る](https://reader031.vdocuments.net/reader031/viewer/2022021922/587129751a28abe4448b6cd5/html5/thumbnails/1.jpg)
Electron を知る
2015.12.20 めとべや東京 #10@tomoya_shibata
![Page 2: Electron を知る](https://reader031.vdocuments.net/reader031/viewer/2022021922/587129751a28abe4448b6cd5/html5/thumbnails/2.jpg)
おまえはだれだ
![Page 3: Electron を知る](https://reader031.vdocuments.net/reader031/viewer/2022021922/587129751a28abe4448b6cd5/html5/thumbnails/3.jpg)
I’m- バトルプログラマー柴田智也 @tomoya_shibata- 今すぐ don’t follow me- 求職中
Like- html, AltCSS, JS, C#, Java…- フロント寄り、 Java は仕事専門
Dislike
おまえはだれだ
![Page 4: Electron を知る](https://reader031.vdocuments.net/reader031/viewer/2022021922/587129751a28abe4448b6cd5/html5/thumbnails/4.jpg)
I’m- バトルプログラマー柴田智也 @tomoya_shibata- 今すぐ don’t follow me- 求職中
Like- html, AltCSS, JS, C#, Java…- フロント寄り、 Java は仕事専門
Dislike- JS, JS それと JS とかいう言語
おまえはだれだ
![Page 5: Electron を知る](https://reader031.vdocuments.net/reader031/viewer/2022021922/587129751a28abe4448b6cd5/html5/thumbnails/5.jpg)
I’m- バトルプログラマー柴田智也 @tomoya_shibata- 今すぐ don’t follow me- 求職中
Like- html, AltCSS, JS, C#, Java…- フロント寄り、 Java は仕事専門
Dislike- JS, JS それと JS
おまえはだれだ
普段の様子
![Page 6: Electron を知る](https://reader031.vdocuments.net/reader031/viewer/2022021922/587129751a28abe4448b6cd5/html5/thumbnails/6.jpg)
![Page 7: Electron を知る](https://reader031.vdocuments.net/reader031/viewer/2022021922/587129751a28abe4448b6cd5/html5/thumbnails/7.jpg)
おしながき
![Page 8: Electron を知る](https://reader031.vdocuments.net/reader031/viewer/2022021922/587129751a28abe4448b6cd5/html5/thumbnails/8.jpg)
・話すこと、話さないこと
・ Electron ってなーんだ
・どこで使われてるの
・ Electron へライブ移植
・知見と注意
おしながき
![Page 9: Electron を知る](https://reader031.vdocuments.net/reader031/viewer/2022021922/587129751a28abe4448b6cd5/html5/thumbnails/9.jpg)
・話すこと、話さないこと
・ Electron ってなーんだ
・どこで使われてるの
・ Electron へライブ移植
・知見と注意
おしながき
![Page 10: Electron を知る](https://reader031.vdocuments.net/reader031/viewer/2022021922/587129751a28abe4448b6cd5/html5/thumbnails/10.jpg)
話すこと、話さないこと
1
![Page 11: Electron を知る](https://reader031.vdocuments.net/reader031/viewer/2022021922/587129751a28abe4448b6cd5/html5/thumbnails/11.jpg)
MS の素晴らしい C#
MS の素晴らしい .NET
MS の素晴らしい WPF や UWP
MS の素晴らしい Windows Forms
話すこと、話さないこと
![Page 12: Electron を知る](https://reader031.vdocuments.net/reader031/viewer/2022021922/587129751a28abe4448b6cd5/html5/thumbnails/12.jpg)
MS の素晴らしい C#
MS の素晴らしい .NET
MS の素晴らしい WPF や UWP
MS の素晴らしい Windows Forms
話すこと、話さないお子と
を一切話しません
![Page 13: Electron を知る](https://reader031.vdocuments.net/reader031/viewer/2022021922/587129751a28abe4448b6cd5/html5/thumbnails/13.jpg)
MS の素晴らしい C#
MS の素晴らしい .NET
MS の素晴らしい WPF や UWP
MS の素晴らしい Windows Forms
話すこと、話さないお子と
を一切話しません
![Page 14: Electron を知る](https://reader031.vdocuments.net/reader031/viewer/2022021922/587129751a28abe4448b6cd5/html5/thumbnails/14.jpg)
話すこと、話さないこと
![Page 15: Electron を知る](https://reader031.vdocuments.net/reader031/viewer/2022021922/587129751a28abe4448b6cd5/html5/thumbnails/15.jpg)
・話すこと、話さないこと
・ Electron ってなーんだ
・どこで使われてるの
・ Electron へライブ移植
・知見や注意
おしながき
![Page 16: Electron を知る](https://reader031.vdocuments.net/reader031/viewer/2022021922/587129751a28abe4448b6cd5/html5/thumbnails/16.jpg)
Electron ってなーんだ
2
![Page 17: Electron を知る](https://reader031.vdocuments.net/reader031/viewer/2022021922/587129751a28abe4448b6cd5/html5/thumbnails/17.jpg)
- デスクトップアプリケーションプラットフォーム
- html, CSS, JS という基本 WEB スキルで開発
- GitHub 開発
- node.js + Chromium ランタイム→ 雑に言うと GoogleChrome だけに提供する感覚で開発できる
→ node.js の恩恵も受けられる
Electron ってなーんだ
昔は Atom Shellって名前だったよ
![Page 18: Electron を知る](https://reader031.vdocuments.net/reader031/viewer/2022021922/587129751a28abe4448b6cd5/html5/thumbnails/18.jpg)
~今まで~
「 Windows でデスクトップアプリなら WPF/UWP 」
Electron ってなーんだ
![Page 19: Electron を知る](https://reader031.vdocuments.net/reader031/viewer/2022021922/587129751a28abe4448b6cd5/html5/thumbnails/19.jpg)
~今まで~
「 Windows でデスクトップアプリなら WPF/UWP 」
~最近~
「 Windows でデスクトップアプリなら WPF/UWP あと、 Electron 」
Electron ってなーんだ
![Page 20: Electron を知る](https://reader031.vdocuments.net/reader031/viewer/2022021922/587129751a28abe4448b6cd5/html5/thumbnails/20.jpg)
~今まで~
「 Windows でデスクトップアプリなら WPF/UWP 」
~最近~
「 Windows でデスクトップアプリなら WPF/UWP あと、 Electron 」
Electron ってなーんだ
選択肢の変化
![Page 21: Electron を知る](https://reader031.vdocuments.net/reader031/viewer/2022021922/587129751a28abe4448b6cd5/html5/thumbnails/21.jpg)
~今まで~
「 Windows でデスクトップアプリなら WPF/UWP 」
~最近~
「 Windows でデスクトップアプリなら WPF/UWP あと、 Electron 」
Electron ってなーんだ
選択肢の変化
1 Source for All OS
![Page 22: Electron を知る](https://reader031.vdocuments.net/reader031/viewer/2022021922/587129751a28abe4448b6cd5/html5/thumbnails/22.jpg)
Electron ってなーんだ
出典: https://speakerdeck.com/zcbenz/practice-on-embedding-node-dot-js-into-atom-editor
![Page 23: Electron を知る](https://reader031.vdocuments.net/reader031/viewer/2022021922/587129751a28abe4448b6cd5/html5/thumbnails/23.jpg)
Electron ってなーんだ
出典: https://speakerdeck.com/zcbenz/practice-on-embedding-node-dot-js-into-atom-editor
![Page 24: Electron を知る](https://reader031.vdocuments.net/reader031/viewer/2022021922/587129751a28abe4448b6cd5/html5/thumbnails/24.jpg)
Q. 似ているので NW.js( 旧 node-webkit) ってのがある
よ?
A. ごめんなさい! よく知りません!
- 観測している限り勢いがあるのは Electron- 業界の流行ウェッブ (要出典)はアテにならんので眉唾
- エントリポイントが html なのが NW.js- エントリポイントが JS なのが Electron- 利用者が多い → 情報も多い(日本語も)
Electron ってなーんだ
![Page 25: Electron を知る](https://reader031.vdocuments.net/reader031/viewer/2022021922/587129751a28abe4448b6cd5/html5/thumbnails/25.jpg)
・話すこと、話さないこと
・ Electron ってなーんだ
・どこで使われてるの
・ Electron へライブ移植
・知見と注意
おしながき
![Page 26: Electron を知る](https://reader031.vdocuments.net/reader031/viewer/2022021922/587129751a28abe4448b6cd5/html5/thumbnails/26.jpg)
どこで使われてるの
3
![Page 27: Electron を知る](https://reader031.vdocuments.net/reader031/viewer/2022021922/587129751a28abe4448b6cd5/html5/thumbnails/27.jpg)
Atom- GitHub 開発 テキストエディタ
どこで使われてるの
![Page 28: Electron を知る](https://reader031.vdocuments.net/reader031/viewer/2022021922/587129751a28abe4448b6cd5/html5/thumbnails/28.jpg)
Slack for Windows- ChatWorks と並んで人気のチャットツール
どこで使われてるの
![Page 29: Electron を知る](https://reader031.vdocuments.net/reader031/viewer/2022021922/587129751a28abe4448b6cd5/html5/thumbnails/29.jpg)
Kobito for Windows- Increments 開発
- Markdown エディタ
- Qiita 連携
どこで使われてるの
![Page 30: Electron を知る](https://reader031.vdocuments.net/reader031/viewer/2022021922/587129751a28abe4448b6cd5/html5/thumbnails/30.jpg)
Visual Studio Code- 説明不要
- ググラビリティの低さで有名
どこで使われてるの
![Page 31: Electron を知る](https://reader031.vdocuments.net/reader031/viewer/2022021922/587129751a28abe4448b6cd5/html5/thumbnails/31.jpg)
ほか一覧
- Nuclide (Facebook 開発 IDE)- N1 (Nylas 開発 メールクライアント )- GitKraken (axosoft 開発 Git クライアント )- 名称自粛 ( 個人開発 艦これ専用ブラウザ)
→ すごく既視感のある UI なんだけど…。
どこで使われてるの
![Page 32: Electron を知る](https://reader031.vdocuments.net/reader031/viewer/2022021922/587129751a28abe4448b6cd5/html5/thumbnails/32.jpg)
どこで使われてるの
https://github.com/sindresorhus/awesome-electron
![Page 33: Electron を知る](https://reader031.vdocuments.net/reader031/viewer/2022021922/587129751a28abe4448b6cd5/html5/thumbnails/33.jpg)
どこで使われてるの 番外
https://github.com/sindresorhus/awesome-electron
- Electron 採用 アプリ - Electron 用ツール - ドキュメント - コミュニティ
などを紹介している
![Page 34: Electron を知る](https://reader031.vdocuments.net/reader031/viewer/2022021922/587129751a28abe4448b6cd5/html5/thumbnails/34.jpg)
・話すこと、話さないこと
・ Electron ってなーんだ
・どこで使われてるの
・ Electron へライブ移植
・知見と注意
おしながき
![Page 35: Electron を知る](https://reader031.vdocuments.net/reader031/viewer/2022021922/587129751a28abe4448b6cd5/html5/thumbnails/35.jpg)
Electron へライブ移植
4
![Page 36: Electron を知る](https://reader031.vdocuments.net/reader031/viewer/2022021922/587129751a28abe4448b6cd5/html5/thumbnails/36.jpg)
題材は MarkdownPreview ってツール
React と モッダーン JS(ES6) を学ぶために作ってます
Electron へライブ移植
https://github.com/tomoyashibata/MarkdownPreview
ES6
×
![Page 37: Electron を知る](https://reader031.vdocuments.net/reader031/viewer/2022021922/587129751a28abe4448b6cd5/html5/thumbnails/37.jpg)
MarkdownPreview の構造、超シンプル、超ベーシック
Electron へライブ移植
![Page 38: Electron を知る](https://reader031.vdocuments.net/reader031/viewer/2022021922/587129751a28abe4448b6cd5/html5/thumbnails/38.jpg)
移植するぞい
₍₍ ( ง ˙ω˙) ว ⁾⁾
![Page 39: Electron を知る](https://reader031.vdocuments.net/reader031/viewer/2022021922/587129751a28abe4448b6cd5/html5/thumbnails/39.jpg)
- 自動更新
- ダイアログ
- 描画プロセスとメインプロセスの通信
- メニュー
- トレイ(通知領域のアレ)
- クリップボード
- ファイルをドラッグアンドドロップできる(独自タ
グ)
- Windows 8 からのトースト通知
ほかにもいろいろあるぞい
補足: API たち
![Page 40: Electron を知る](https://reader031.vdocuments.net/reader031/viewer/2022021922/587129751a28abe4448b6cd5/html5/thumbnails/40.jpg)
・話すこと、話さないこと
・ Electron ってなーんだ
・どこで使われてるの
・ Electron へライブ移植
・知見と注意
おしながき
![Page 41: Electron を知る](https://reader031.vdocuments.net/reader031/viewer/2022021922/587129751a28abe4448b6cd5/html5/thumbnails/41.jpg)
知見と注意
5
![Page 42: Electron を知る](https://reader031.vdocuments.net/reader031/viewer/2022021922/587129751a28abe4448b6cd5/html5/thumbnails/42.jpg)
おいでませ中華フォント
![Page 43: Electron を知る](https://reader031.vdocuments.net/reader031/viewer/2022021922/587129751a28abe4448b6cd5/html5/thumbnails/43.jpg)
大好き中華フォントが来日。
- CSS とかで font-family 指定してないとこうなる
知見と注意
![Page 44: Electron を知る](https://reader031.vdocuments.net/reader031/viewer/2022021922/587129751a28abe4448b6cd5/html5/thumbnails/44.jpg)
DirectWrite の有効、無効設定
![Page 45: Electron を知る](https://reader031.vdocuments.net/reader031/viewer/2022021922/587129751a28abe4448b6cd5/html5/thumbnails/45.jpg)
DirectWrite の有効、無効設定
- 文字を綺麗にレンダリングするためのもの…のはず
- 日本語だと目も当てられない状態になることが
- GoogleChrome で無効化している人も
知見と注意
web-preferences.direct-writeに真偽値を渡してオンオフ
![Page 46: Electron を知る](https://reader031.vdocuments.net/reader031/viewer/2022021922/587129751a28abe4448b6cd5/html5/thumbnails/46.jpg)
知見と注意
![Page 47: Electron を知る](https://reader031.vdocuments.net/reader031/viewer/2022021922/587129751a28abe4448b6cd5/html5/thumbnails/47.jpg)
知見と注意
![Page 48: Electron を知る](https://reader031.vdocuments.net/reader031/viewer/2022021922/587129751a28abe4448b6cd5/html5/thumbnails/48.jpg)
Electron リリースペース
![Page 49: Electron を知る](https://reader031.vdocuments.net/reader031/viewer/2022021922/587129751a28abe4448b6cd5/html5/thumbnails/49.jpg)
知見と注意
![Page 50: Electron を知る](https://reader031.vdocuments.net/reader031/viewer/2022021922/587129751a28abe4448b6cd5/html5/thumbnails/50.jpg)
更新しすぎ
知見と注意
`
同じ日に 3 リリース
![Page 51: Electron を知る](https://reader031.vdocuments.net/reader031/viewer/2022021922/587129751a28abe4448b6cd5/html5/thumbnails/51.jpg)
公式以外の情報
![Page 52: Electron を知る](https://reader031.vdocuments.net/reader031/viewer/2022021922/587129751a28abe4448b6cd5/html5/thumbnails/52.jpg)
- 公式以外のソースに前提スキルセットが多すぎることが
- Electron そのものではなく、 JS 界隈の問題
知見と注意
![Page 53: Electron を知る](https://reader031.vdocuments.net/reader031/viewer/2022021922/587129751a28abe4448b6cd5/html5/thumbnails/53.jpg)
- 公式以外のソースに前提スキルセットが多すぎることが
- Electron そのものではなく、 JS 界隈の問題
知見と注意
ECMAScript 6
![Page 54: Electron を知る](https://reader031.vdocuments.net/reader031/viewer/2022021922/587129751a28abe4448b6cd5/html5/thumbnails/54.jpg)
- 公式以外のソースに前提スキルセットが多すぎることが
- Electron そのものではなく、 JS 界隈の問題
知見と注意
ECMAScript 6CommonJS
Babel
![Page 55: Electron を知る](https://reader031.vdocuments.net/reader031/viewer/2022021922/587129751a28abe4448b6cd5/html5/thumbnails/55.jpg)
- 公式以外のソースに前提スキルセットが多すぎることが
- Electron そのものではなく、 JS 界隈の問題
知見と注意
ECMAScript 6
WebComponents
CommonJS
Babel
React
![Page 56: Electron を知る](https://reader031.vdocuments.net/reader031/viewer/2022021922/587129751a28abe4448b6cd5/html5/thumbnails/56.jpg)
- 公式以外のソースに前提スキルセットが多すぎることが
- Electron そのものではなく、 JS 界隈の問題
知見と注意
ECMAScript 6
Flux
Redux
WebComponents
CommonJS
Babel
React
![Page 57: Electron を知る](https://reader031.vdocuments.net/reader031/viewer/2022021922/587129751a28abe4448b6cd5/html5/thumbnails/57.jpg)
- 公式以外のソースに前提スキルセットが多すぎることが
- Electron そのものではなく、 JS 界隈の問題
知見と注意
ECMAScript 6
Flux
Redux
WebComponents
CommonJS
Browserify
WebpackBabel
bower
React
![Page 58: Electron を知る](https://reader031.vdocuments.net/reader031/viewer/2022021922/587129751a28abe4448b6cd5/html5/thumbnails/58.jpg)
- 公式以外のソースに前提スキルセットが多すぎることが
- Electron そのものではなく、 JS 界隈の問題
知見と注意
ECMAScript 6
Flux
Redux
WebComponents
CommonJS
Browserify
WebpackBabel
Grunt
gulp
bower
React
![Page 59: Electron を知る](https://reader031.vdocuments.net/reader031/viewer/2022021922/587129751a28abe4448b6cd5/html5/thumbnails/59.jpg)
- 公式以外のソースに前提スキルセットが多すぎることが
- Electron そのものではなく、 JS 界隈の問題
知見と注意
ECMAScript 6
Flux
Redux
WebComponents
CommonJS
Browserify
WebpackBabel
Grunt
gulp
bower
React
脳みそ全部溶かした初学者の顔
![Page 60: Electron を知る](https://reader031.vdocuments.net/reader031/viewer/2022021922/587129751a28abe4448b6cd5/html5/thumbnails/60.jpg)
すべてを 1 日で学ぼうとしない気持ち大事
知見と注意
![Page 61: Electron を知る](https://reader031.vdocuments.net/reader031/viewer/2022021922/587129751a28abe4448b6cd5/html5/thumbnails/61.jpg)
まとめ
![Page 62: Electron を知る](https://reader031.vdocuments.net/reader031/viewer/2022021922/587129751a28abe4448b6cd5/html5/thumbnails/62.jpg)
- C# でも、 C++ でも、 Java でもない。
JS でデスクトップアプリが作れる時代が到来
- 現在進行形で開発実績が築かれている
- 触りはじめの抵抗感はすごい
→ 感覚が麻痺してくる ✌ (‘ω’ ✌ )三 ✌ (‘ω’) ✌ 三 ( ✌ ‘ω’) ✌- JS 界隈という独特のつらさ
→ 強く生きて
まとめ
![Page 63: Electron を知る](https://reader031.vdocuments.net/reader031/viewer/2022021922/587129751a28abe4448b6cd5/html5/thumbnails/63.jpg)
- C# でも、 C++ でも、 Java でもない。
JS でデスクトップアプリが作れる時代が到来
- 現在進行形で開発実績が築かれている
- 触りはじめの抵抗感はすごい
→ 感覚が麻痺してくる ✌ (‘ω’ ✌ )三 ✌ (‘ω’) ✌ 三 ( ✌ ‘ω’) ✌- JS 界隈という独特のつらさ
→ 強く生きて
まとめ
気になったのなら
![Page 64: Electron を知る](https://reader031.vdocuments.net/reader031/viewer/2022021922/587129751a28abe4448b6cd5/html5/thumbnails/64.jpg)
あなたと!
![Page 65: Electron を知る](https://reader031.vdocuments.net/reader031/viewer/2022021922/587129751a28abe4448b6cd5/html5/thumbnails/65.jpg)
Electron!
![Page 66: Electron を知る](https://reader031.vdocuments.net/reader031/viewer/2022021922/587129751a28abe4448b6cd5/html5/thumbnails/66.jpg)
今すぐ!
![Page 67: Electron を知る](https://reader031.vdocuments.net/reader031/viewer/2022021922/587129751a28abe4448b6cd5/html5/thumbnails/67.jpg)
https://github.com/atom/electron
!!!環境構築!!!
![Page 68: Electron を知る](https://reader031.vdocuments.net/reader031/viewer/2022021922/587129751a28abe4448b6cd5/html5/thumbnails/68.jpg)
ご静聴ありがとうございました