electron を知る

Electron を知る

2015.12.20 めとべや東京 #10@tomoya_shibata

おまえはだれだ

I’m- バトルプログラマー柴田智也 @tomoya_shibata- 今すぐ don’t follow me- 求職中

Like- html, AltCSS, JS, C#, Java…- フロント寄り、 Java は仕事専門

Dislike




Dislike- JS, JS それと JS とかいう言語




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 ってなーんだ

2

- デスクトップアプリケーションプラットフォーム

- html, CSS, JS という基本 WEB スキルで開発

- GitHub 開発

- node.js + Chromium ランタイム→ 雑に言うと GoogleChrome だけに提供する感覚で開発できる

→ node.js の恩恵も受けられる


昔は 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

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- 利用者が多い → 情報も多い（日本語も）






・知見と注意

おしながき

どこで使われてるの

3

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 用ツール - ドキュメント - コミュニティ

などを紹介している





・知見と注意

おしながき

Electron へライブ移植

4

題材は MarkdownPreview ってツール

React とﾓｯﾀﾞｰﾝ JS(ES6) を学ぶために作ってます


https://github.com/tomoyashibata/MarkdownPreview

ES6

×

https://github.com/tomoyashibata/MarkdownPreview

MarkdownPreview の構造、超シンプル、超ベーシック


移植するぞい

₍₍ ( ง ˙ω˙) ว ⁾⁾

- 自動更新

- ダイアログ

- 描画プロセスとメインプロセスの通信

- メニュー

- トレイ（通知領域のアレ）

- クリップボード

- ファイルをドラッグアンドドロップできる（独自タ

グ）

- Windows 8 からのトースト通知

ほかにもいろいろあるぞい

補足： API たち





・知見と注意

おしながき

知見と注意

5

おいでませ中華フォント

大好き中華フォントが来日。

- CSS とかで font-family 指定してないとこうなる

知見と注意

DirectWrite の有効、無効設定

DirectWrite の有効、無効設定

- 文字を綺麗にレンダリングするためのもの…のはず

- 日本語だと目も当てられない状態になることが

- GoogleChrome で無効化している人も

知見と注意

web-preferences.direct-writeに真偽値を渡してオンオフ

知見と注意

Electron リリースペース

知見と注意

更新しすぎ

知見と注意

`

同じ日に 3 リリース

公式以外の情報

- 公式以外のソースに前提スキルセットが多すぎることが

- Electron そのものではなく、 JS 界隈の問題

知見と注意



知見と注意

ECMAScript 6



知見と注意

ECMAScript 6CommonJS

Babel



知見と注意

ECMAScript 6

WebComponents

CommonJS

Babel

React



知見と注意

ECMAScript 6

Flux

Redux

WebComponents

CommonJS

Babel

React



知見と注意

ECMAScript 6

Flux

Redux

WebComponents

CommonJS

Browserify

WebpackBabel

bower

React



知見と注意

ECMAScript 6

Flux

Redux

WebComponents

CommonJS

Browserify

WebpackBabel

Grunt

gulp

bower

React



知見と注意

ECMAScript 6

Flux

Redux

WebComponents

CommonJS

Browserify

WebpackBabel

Grunt

gulp

bower

React

脳みそ全部溶かした初学者の顔

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

知見と注意

まとめ

- C# でも、 C++ でも、 Java でもない。

JS でデスクトップアプリが作れる時代が到来

- 現在進行形で開発実績が築かれている

- 触りはじめの抵抗感はすごい

→ 感覚が麻痺してくる ✌ (‘ω’ ✌ )三 ✌ (‘ω’) ✌ 三 ( ✌ ‘ω’) ✌- JS 界隈という独特のつらさ

→ 強く生きて

まとめ

- C# でも、 C++ でも、 Java でもない。

JS でデスクトップアプリが作れる時代が到来

- 現在進行形で開発実績が築かれている

- 触りはじめの抵抗感はすごい

→ 感覚が麻痺してくる ✌ (‘ω’ ✌ )三 ✌ (‘ω’) ✌ 三 ( ✌ ‘ω’) ✌- JS 界隈という独特のつらさ

→ 強く生きて

まとめ

気になったのなら

あなたと！

Electron！

今すぐ！

https://github.com/atom/electron

！！！環境構築！！！

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

electron を知る

Technology