Electron を知る

Electron を知る
2015.12.20 めとべや東京 #10
@tomoya_shibata

I’m
- バトルプログラマー柴田智也
@tomoya_shibata
- 今すぐ don’t follow me
- 求職中
Like
- html, AltCSS, JS, C#, Java…
- フロント寄り、Java は仕事専門
Dislike
おまえはだれだ

I’m
@tomoya_shibata
- 求職中
Like
Dislike
- JS, JS それと JS とかいう言語

I’m
@tomoya_shibata
- 求職中
Like
Dislike
- JS, JS それと JS
普段の様子

・話すこと、話さないこと
・Electron ってなーんだ
・どこで使われてるの
・Electron へライブ移植
・知見と注意
おしながき

話すこと、話さないこと
1

MS の素晴らしい C#
MS の素晴らしい .NET
MS の素晴らしい WPF や UWP
MS の素晴らしい Windows Forms

MS の素晴らしい C#
MS の素晴らしい .NET
MS の素晴らしい WPF や UWP
MS の素晴らしい Windows Forms
話すこと、話さないお子と
を一切話しません

・話すこと、話さないこと
・Electron ってなーんだ
・どこで使われてるの
・Electron へライブ移植
・知見や注意
おしながき

- デスクトップアプリケーションプラットフォーム
- html, CSS, JS という基本 WEB スキルで開発
- GitHub 開発
- node.js + Chromium ランタイム
→ 雑に言うと GoogleChrome だけに提供する感覚で開発できる
→ node.js の恩恵も受けられる
Electron ってなーんだ
昔は Atom Shell
って名前だったよ

～今まで～
「Windows でデスクトップアプリなら WPF/UWP」

～今まで～
～最近～
「Windows でデスクトップアプリなら WPF/UWP
あと、Electron」

～今まで～
～最近～
選択肢の変化

～今まで～
～最近～
選択肢の変化
1 Source for All OS

出典：https://speakerdeck.com/zcbenz/practice-on-embedding-node-dot-js-into-atom-editor

Q. 似ているので NW.js(旧 node-webkit) ってのがあるよ？
A. ごめんなさい！よく知りません！
- 観測している限り勢いがあるのは Electron
- ｳｪｯﾌﾞ業界の流行（要出典）はアテにならんので眉唾
- エントリポイントが html なのが NW.js
- エントリポイントが JS なのが Electron
- 利用者が多い → 情報も多い（日本語も）

Atom
- GitHub 開発テキストエディタ
どこで使われてるの

Slack for Windows
- ChatWorks と並んで人気のチャットツール

Kobito for Windows
- Increments 開発
- Markdown エディタ
- Qiita 連携

Visual Studio Code
- 説明不要
- ググラビリティの低さで有名

ほか一覧
- Nuclide (Facebook 開発 IDE)
- N1 (Nylas 開発メールクライアント)
- GitKraken (axosoft 開発 Git クライアント)
- 名称自粛 (個人開発艦これ専用ブラウザ）
→ すごく既視感のある UI なんだけど…。

https://github.com/sindresorhus/awesome-electron

どこで使われてるの番外
https://github.com/sindresorhus/awesome-electron
- Electron 採用アプリ
- Electron 用ツール
- ドキュメント
- コミュニティ
などを紹介している

題材は MarkdownPreview ってツール
React とﾓｯﾀﾞｰﾝ JS(ES6) を学ぶために作ってます
Electron へライブ移植
https://github.com/tomoyashibata/MarkdownPreview
ES6
×

MarkdownPreview の構造、超シンプル、超ベーシック
Electron へライブ移植

移植するぞい
₍₍ (ง ˙ω˙)ว ⁾⁾

- 自動更新
- ダイアログ
- 描画プロセスとメインプロセスの通信
- メニュー
- トレイ（通知領域のアレ）
- クリップボード
- ファイルをドラッグアンドドロップできる（独自タグ）
- Windows 8 からのトースト通知
ほかにもいろいろあるぞい
補足：API たち

おいでませ中華フォント

大好き中華フォントが来日。
- CSS とかで font-family 指定してないとこうなる
知見と注意

DirectWrite の有効、無効設定

DirectWrite の有効、無効設定
- 文字を綺麗にレンダリングするためのもの…のはず
- 日本語だと目も当てられない状態になることが
- GoogleChrome で無効化している人も
知見と注意
web-preferences.direct-write
に真偽値を渡してオンオフ

Electron リリースペース

更新しすぎ
知見と注意
`
同じ日に3リリース

- 公式以外のソースに前提スキルセットが多すぎることが
- Electron そのものではなく、JS 界隈の問題
知見と注意

知見と注意
ECMAScript 6

知見と注意
ECMAScript 6
CommonJS
Babel

知見と注意
ECMAScript 6
WebComponents
CommonJS
Babel
React

知見と注意
ECMAScript 6
Flux
Redux
WebComponents
CommonJS
Babel
React

知見と注意
ECMAScript 6
Flux
Redux
WebComponents
CommonJS
Browserify
Webpack
Babel
bower
React

知見と注意
ECMAScript 6
Flux
Redux
WebComponents
CommonJS
Browserify
Webpack
Babel
Grunt
gulp
bower
React

すべてを1日で学ぼうとしない気持ち大事
知見と注意

- C# でも、C++ でも、Java でもない。
JS でデスクトップアプリが作れる時代が到来
- 現在進行形で開発実績が築かれている
- 触りはじめの抵抗感はすごい
→ 感覚が麻痺してくる✌ (‘ω’ ✌ )三 ✌ (‘ω’) ✌ 三( ✌ ‘ω’) ✌
- JS 界隈という独特のつらさ
→ 強く生きて
まとめ

- C# でも、C++ でも、Java でもない。
JS でデスクトップアプリが作れる時代が到来
- 現在進行形で開発実績が築かれている
- 触りはじめの抵抗感はすごい
→ 感覚が麻痺してくる✌ (‘ω’ ✌ )三 ✌ (‘ω’) ✌ 三( ✌ ‘ω’) ✌
- JS 界隈という独特のつらさ
→ 強く生きて
まとめ
気になったのなら

https://github.com/atom/electron
！！！環境構築！！！

ご静聴ありがとうございました

Electron を知る

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (20)

Similar to Electron を知る

Similar to Electron を知る (20)

Recently uploaded

Recently uploaded (8)

Electron を知る

Editor's Notes