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- 今すぐ don’t follow me- 求職中

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

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

おまえはだれだ

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

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

Dislike- JS, JS それと JS

おまえはだれだ

普段の様子

おしながき

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

・ Electron ってなーんだ

・どこで使われてるの

・ Electron へライブ移植

・知見と注意

おしながき

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

・ Electron ってなーんだ

・どこで使われてるの

・ Electron へライブ移植

・知見と注意

おしながき

話すこと、話さないこと

1

MS の素晴らしい C#

MS の素晴らしい .NET

MS の素晴らしい WPF や UWP

MS の素晴らしい Windows Forms

話すこと、話さないこと

MS の素晴らしい C#

MS の素晴らしい .NET

MS の素晴らしい WPF や UWP

MS の素晴らしい Windows Forms

話すこと、話さないお子と

を一切話しません

MS の素晴らしい C#

MS の素晴らしい .NET

MS の素晴らしい WPF や UWP

MS の素晴らしい Windows Forms

話すこと、話さないお子と

を一切話しません

話すこと、話さないこと

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

・ Electron ってなーんだ

・どこで使われてるの

・ Electron へライブ移植

・知見や注意

おしながき

Electron ってなーんだ

2

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

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

- GitHub 開発

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

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

Electron ってなーんだ

昔は Atom Shellって名前だったよ

～今まで～

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

Electron ってなーんだ

～今まで～

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

～最近～

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

Electron ってなーんだ

～今まで～

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

～最近～

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

Electron ってなーんだ

選択肢の変化

～今まで～

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

～最近～

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

Electron ってなーんだ

選択肢の変化

1 Source for All OS

Electron ってなーんだ

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

Electron ってなーんだ

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

Electron ってなーんだ

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

・ Electron ってなーんだ

・どこで使われてるの

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

・どこで使われてるの

・ Electron へライブ移植

・知見と注意

おしながき

Electron へライブ移植

4

題材は MarkdownPreview ってツール

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

Electron へライブ移植

https://github.com/tomoyashibata/MarkdownPreview

ES6

×

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

Electron へライブ移植

移植するぞい

₍₍ ( ง ˙ω˙) ว ⁾⁾

- 自動更新

- ダイアログ

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

- メニュー

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

- クリップボード

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

グ）

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

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

補足： API たち

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

・ Electron ってなーんだ

・どこで使われてるの

・ Electron へライブ移植

・知見と注意

おしながき

知見と注意

5

おいでませ中華フォント

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

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

知見と注意

DirectWrite の有効、無効設定

DirectWrite の有効、無効設定

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

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

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

知見と注意

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

知見と注意

知見と注意

Electron リリースペース

知見と注意

更新しすぎ

知見と注意

`

同じ日に 3 リリース

公式以外の情報

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

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

知見と注意

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

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

知見と注意

ECMAScript 6

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

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

知見と注意

ECMAScript 6CommonJS

Babel

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

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

知見と注意

ECMAScript 6

WebComponents

CommonJS

Babel

React

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

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

知見と注意

ECMAScript 6

Flux

Redux

WebComponents

CommonJS

Babel

React

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

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

知見と注意

ECMAScript 6

Flux

Redux

WebComponents

CommonJS

Browserify

WebpackBabel

bower

React

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

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

知見と注意

ECMAScript 6

Flux

Redux

WebComponents

CommonJS

Browserify

WebpackBabel

Grunt

gulp

bower

React

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

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

知見と注意

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

！！！環境構築！！！

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