SlideShare a Scribd company logo
Electron Early 2019
2019/03/01
社内勉強会 近藤正裕
要旨
• Electron リリース以来5年以上。(v4.0) 熟成してきてます。
• アプリ作ってみて理解したことをお話しします。
• ブラウザにデスクトップのガワをつけただけと侮れません
• PWA などの類似技術との関係についても考察してみます。
• 簡単なハンズオンも用意してます。
• たまには UI について語り合うのも一興ではないでしょうか。
アジェンダ
• Electron とは
• アーキテクチャー
• 類似テクノロジーとの比較
• Electron の活用
• ハンズオン
• クロスプラットフォームアプリ開発戦略
• まとめ
私の UI フレームワーク利用経験
(JSP などの SSR 技術は除く)
• X Window System
• MFC
• JFC
• Windows Forms
• Qt / QML
• Cocoa
• WPF
• Silverlight
• jQuery UI
• Backbone
• Electron
• Cordova
• Xamarin
• Angular / Polymer
• React / Vue
• Elm
ネイティブ
Web
WebRIA
ネイティブ
モバイルハイブリッド
ネイティブクロスプラットフォーム
デスクトップハイブリッド
Electron とは
• デスクトップアプリを Web 技術で開発するための基盤
• HTML
• JavaScript
• CSS
• Chromium をベースに GitHub が開発 (バージョン 4.0.5)
• VS Code にぶち抜かれたが Atom Editor の基盤
• Chromium に追従し続けている(バージョン 69.0.3497.106)
• Node.js と Chromium の Renderer (Blink) のプロセス間通信で機
能を実現する
• Node.js のエコシステム + Chromium のエンジンにより開発が enforce される
Electron を使ったプロダクト
https://github.com/sindresorhus/awesome-electron#apps
Productivity tools!
え!? 知らない?
フィーチャー
• クロスプラットフォーム
• 各 OS 向けにバイナリを生成可能
• Web API で取得したデータのレンダリングも簡単
• ブラウザだと Same-Origin Policy が・・
• WebView でサイトを簡単に表示できる
• 開発するアセットの表示に使うのはお勧めしない・・デバッグできない
• Node.js から OS 機能を簡単に呼べる
• クリップボード操作とかファイルシステムとか
• 開発時 DevTools が使える
• インストーラーや更新通知の仕組みもある
• Windows の通知領域や macOS のメニューバーにアイコンも置ける
アーキテクチャー
• Node.js の Main Process と Chromium の Renderer
Process が IPC (Inter Process Communication) で連携
Main Process Renderer Process
IPC
Window management
Menu management
System I/O
Render contents
UI event handling
両プロセスで
Electron API
が利用可能
PWA との比較
• PWA (Progressive Web Apps)
• よりネイティブアプリに近い UX をもたらす Web アプリ
• Twitter Lite, dev.to, Scrapbox, CodeSandbox など対応サイト増加
• 独立ウィンドウ、Service Worker によるオフライン動作
• アプリ仕様としてはブラウザ内動作と変わらない
Electron PWA
プロセス 独立 Chrome プロセス
OS 機能へのアクセス 可能 サンドボックス
対応プラットフォーム Windows / macOS /
Linux
Android / iOS / Windows
/ macOS / Linux
クロスブラウザ対応 Chromium で動けば OK 考慮必要
参考:PWA のサポート状況
• Android ではネイティブサポート (ストアにも出せるようになる)
• Chrome (Windows / macOS) でもサポート
• Windows ではすでにストアアプリとして出せる (Edge ベース)
• iOS は 11.3 で対応しているがイマイチ
Cordova や Ionic などのハイブリッドアプリフレームワーク使わなく
ても、プラットフォーム側で PWA をファーストクラス扱いしてくれるよう
になってきている
参考:React Native との比較
• React-way を Native Component 上で実現する
• DOM 操作は JS だが UI はあくまで Native
• 各プラットフォームのストアにも出せる
• React エンジニアには有利
• 位置づけは Xamarin に近い
• Desktop 向けには Proton Native というプロジェクトがある。
• 流行るかは謎。
Electron の活用
• PWA 対応していないサイトのアプリ化
• Chrome のタブに埋もれてしまうサイトを OS のタスクバーで管理
• Web サービスの (野良) クライアント
• クロスプラットフォーム展開の基盤として
ハンズオン
準備
• Node.js をインストール
• https://nodejs.org/ja/
• 公式の Quick Start プロジェクトから
• https://electronjs.org/
• 実装例は
• https://github.com/kondoumh/electron-study
$ git clone https://github.com/electron/electron-quick-start
$ cd electron-quick-start
$ npm install && npm start
WebView でサイトをデスクトップアプリ化してみよう
• electron-quick-start をコピー
• <webview> タグを追加 (GitHub を指定)、タイトル変更
• スタイル調整
WebView でサイトをデスクトップアプリ化してみよう
アプリにメニューを追加してみよう
• main.js
• Menu オブジェクトを import
• MenuTemplateを作成
• role / 独自メニューの追加 (戻る、進む)
• イベント送信の実装
• renderer.js
• ipcRenderer の import
• イベントハンドラーの実装
{ role: “toggledevtools” } の追加でDevTools 使えます
デフォルトのメニュー
取得して追加したい
けど、動的変更でき
ないっぽい
https://electronjs.org/docs/api/menu
API を使った簡易クライアントを作ってみよう
• Scrapbox API を使ってページ情報を取得
• パスパラメータだけで取れます
• JavaScript の fetch API で
• mamezou-knowhow ページは private なので credentials が必要
• レンダリングしてみる
• response を JSON 変換
• data.lines を enumerate
• line.text でテキストが取得可能
• data.image から ページ image の url が取れる
Scrapbox は CORS を許可していないので、
Web アプリだとエラーになるけど、Electron だと
ブラウザ外のため? レンダーできてしまう
API を使った簡易クライアントを作ってみよう
実行可能なパッケージを作ってみよう
• electron-packager をインストール
• $ npm i electron-packager
• package.json の scripts にパッケージ用コマンド追加
• パッケージコマンドを実行
• $ npm run package
Tips
• app.isPackaged プロパティ
• デバッグ用のメニューを開発時だけ追加するなどが簡単
• sessionStorage / localStorage は Main process では使え
ない
• Window ないので・・・。 IPC かファイル経由で
• Chrome の拡張は残念ながらノーサポート
• DevTools の拡張は使える (Vue Devtools など)
• macOS only な API がけっこうある
• クロスプラットフォームなので、多用するのは微妙
まとめ
クロスプラットフォームアプリ開発戦略
• クライアントオンリーのアプリはあまり旨味がない
• Web で展開した方が多くのユーザにリーチできる
• まず PWA で作る
• PWA の開発は、通常の Web 開発
• API と画面のアセットを1つのサイトで管理
• PWA としてモバイルでの機能を完結させる
• 次に Electron アプリ化
• デスクトップアプリとしての体裁
• アセットを共有してアプリ化 or WebView でさくっと
• デスクトップ独自機能の提供
これを Electron と合わせて…
ここに PWA があるじゃろ?
( ^ω^)
⊃PWA⊂
_人人人人人人人人人人人人人人人人人_
> クロスプラットフォーム対応!!! <
 ̄Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^ ̄
( ^ω^)
≡⊃⊂≡
こうじゃ…
( ^ω^)
⊃デスクトップアプリ!!⊂
https://medium.com/@kitze/%EF%B8%8F-from-react-to-an-
electron-app-ready-for-production-a0468ecb1da3
https://github.com/SimulatedGREG/electron-vue
Electron で Vue を使うプロジェクトを生成するためのボイラープレート
Vue アプリの Electron 化
ここに Vue のトイ・アプリがあるじゃろ?
( ^ω^)
⊃トイ⊂
( ^ω^)
≡⊃⊂≡
こうじゃ…
Vue アプリの Electron 化
• アセットは簡単に使いまわせる
• Web との共通アセットは git submodule で管理
できるとよいかも
• Electron メニューに対応させようとかすると独自実装が
• Renderer と アセットの連携部分どうする?
• ルートコンポーネントを別途用意して分離?
• ちゃんと設計しないと・・・
( ^ω^)
⊃⊂
( ・ω・ )
⊃⊂
(´・ω・`)
⊃⊂
最後に
• Electron かなり充実してきてる
• PWA のツールチェインや知識も活かせる
• PWA がもっと流行ればそちらのエコシステムが進化して
Electron は廃れるかもしれないけど・・・
• VS Code は Web でも動いてるし
クロスプラットフォーム対応はロマン
である
各プラットフォームに最適な UX を提
供するのは難しい
ツールならそれほど気にしなくても・・
色々作ってみよう!
ご清聴ありがとうございました。
Enjoy!!

More Related Content

What's hot

ASP.NET WEB API 開発体験
ASP.NET WEB API 開発体験ASP.NET WEB API 開発体験
ASP.NET WEB API 開発体験miso- soup3
 
究極にして至高のWAF
究極にして至高のWAF究極にして至高のWAF
究極にして至高のWAFYuki Ishikawa
 
WEB開発動作テストの自動化 を行うSeleniumの紹介
WEB開発動作テストの自動化 を行うSeleniumの紹介WEB開発動作テストの自動化 を行うSeleniumの紹介
WEB開発動作テストの自動化 を行うSeleniumの紹介Nobuhiko Futagami
 
最近のPerlバイナリマネージャー Perl 編
最近のPerlバイナリマネージャー Perl 編最近のPerlバイナリマネージャー Perl 編
最近のPerlバイナリマネージャー Perl 編Tokuhiro Matsuno
 
ブラウザだけで学ぶWebアプリ開発
ブラウザだけで学ぶWebアプリ開発 ブラウザだけで学ぶWebアプリ開発
ブラウザだけで学ぶWebアプリ開発 schoowebcampus
 
2015年GMOペパボ新卒エンジニア研修 Webオペレーション研修イントロダクション
2015年GMOペパボ新卒エンジニア研修 Webオペレーション研修イントロダクション2015年GMOペパボ新卒エンジニア研修 Webオペレーション研修イントロダクション
2015年GMOペパボ新卒エンジニア研修 Webオペレーション研修イントロダクションTakahiro Okumura
 
2016/12/17 ASP.NET フロントエンドタスク入門
 2016/12/17 ASP.NET フロントエンドタスク入門 2016/12/17 ASP.NET フロントエンドタスク入門
2016/12/17 ASP.NET フロントエンドタスク入門miso- soup3
 
JAWS-UG Hokuriku 第2回勉強会 AWS EC2の実用例&各種機能との連携
JAWS-UG Hokuriku 第2回勉強会 AWS EC2の実用例&各種機能との連携JAWS-UG Hokuriku 第2回勉強会 AWS EC2の実用例&各種機能との連携
JAWS-UG Hokuriku 第2回勉強会 AWS EC2の実用例&各種機能との連携Kenichi Nakamichi
 
Java web application testing
Java web application testingJava web application testing
Java web application testingTokuhiro Matsuno
 
Firefox mobile for android internals
Firefox mobile for android internalsFirefox mobile for android internals
Firefox mobile for android internalsMakoto Kato
 
SeleniumIDEとSelenium WebDriver × Node.js Seleniumで業務効率化する15分
SeleniumIDEとSelenium WebDriver × Node.js Seleniumで業務効率化する15分SeleniumIDEとSelenium WebDriver × Node.js Seleniumで業務効率化する15分
SeleniumIDEとSelenium WebDriver × Node.js Seleniumで業務効率化する15分松田 千尋
 
ASP.NET WebAPI 体験記 #clrh99
ASP.NET WebAPI 体験記 #clrh99ASP.NET WebAPI 体験記 #clrh99
ASP.NET WebAPI 体験記 #clrh99Katsuya Shimizu
 
AngularJSを通してDockerと触れ合った
AngularJSを通してDockerと触れ合ったAngularJSを通してDockerと触れ合った
AngularJSを通してDockerと触れ合ったpastelInc
 
50分で掴み取る ASP.NET Web API パターン&テクニック
50分で掴み取る ASP.NET Web API パターン&テクニック50分で掴み取る ASP.NET Web API パターン&テクニック
50分で掴み取る ASP.NET Web API パターン&テクニックmiso- soup3
 

What's hot (20)

ASP.NET WEB API 開発体験
ASP.NET WEB API 開発体験ASP.NET WEB API 開発体験
ASP.NET WEB API 開発体験
 
WebWorker and Atomics
WebWorker and AtomicsWebWorker and Atomics
WebWorker and Atomics
 
20131227_appium+rspec
20131227_appium+rspec20131227_appium+rspec
20131227_appium+rspec
 
究極にして至高のWAF
究極にして至高のWAF究極にして至高のWAF
究極にして至高のWAF
 
WEB開発動作テストの自動化 を行うSeleniumの紹介
WEB開発動作テストの自動化 を行うSeleniumの紹介WEB開発動作テストの自動化 を行うSeleniumの紹介
WEB開発動作テストの自動化 を行うSeleniumの紹介
 
最近のPerlバイナリマネージャー Perl 編
最近のPerlバイナリマネージャー Perl 編最近のPerlバイナリマネージャー Perl 編
最近のPerlバイナリマネージャー Perl 編
 
[jjug] Java と Benchmark
[jjug] Java と Benchmark[jjug] Java と Benchmark
[jjug] Java と Benchmark
 
ブラウザだけで学ぶWebアプリ開発
ブラウザだけで学ぶWebアプリ開発 ブラウザだけで学ぶWebアプリ開発
ブラウザだけで学ぶWebアプリ開発
 
2015年GMOペパボ新卒エンジニア研修 Webオペレーション研修イントロダクション
2015年GMOペパボ新卒エンジニア研修 Webオペレーション研修イントロダクション2015年GMOペパボ新卒エンジニア研修 Webオペレーション研修イントロダクション
2015年GMOペパボ新卒エンジニア研修 Webオペレーション研修イントロダクション
 
2016/12/17 ASP.NET フロントエンドタスク入門
 2016/12/17 ASP.NET フロントエンドタスク入門 2016/12/17 ASP.NET フロントエンドタスク入門
2016/12/17 ASP.NET フロントエンドタスク入門
 
V8 Iginition Interpreter
V8 Iginition InterpreterV8 Iginition Interpreter
V8 Iginition Interpreter
 
JAWS-UG Hokuriku 第2回勉強会 AWS EC2の実用例&各種機能との連携
JAWS-UG Hokuriku 第2回勉強会 AWS EC2の実用例&各種機能との連携JAWS-UG Hokuriku 第2回勉強会 AWS EC2の実用例&各種機能との連携
JAWS-UG Hokuriku 第2回勉強会 AWS EC2の実用例&各種機能との連携
 
Java web application testing
Java web application testingJava web application testing
Java web application testing
 
邪道Jenkins
邪道Jenkins邪道Jenkins
邪道Jenkins
 
Firefox mobile for android internals
Firefox mobile for android internalsFirefox mobile for android internals
Firefox mobile for android internals
 
SeleniumIDEとSelenium WebDriver × Node.js Seleniumで業務効率化する15分
SeleniumIDEとSelenium WebDriver × Node.js Seleniumで業務効率化する15分SeleniumIDEとSelenium WebDriver × Node.js Seleniumで業務効率化する15分
SeleniumIDEとSelenium WebDriver × Node.js Seleniumで業務効率化する15分
 
ASP.NET WebAPI 体験記 #clrh99
ASP.NET WebAPI 体験記 #clrh99ASP.NET WebAPI 体験記 #clrh99
ASP.NET WebAPI 体験記 #clrh99
 
AngularJSを通してDockerと触れ合った
AngularJSを通してDockerと触れ合ったAngularJSを通してDockerと触れ合った
AngularJSを通してDockerと触れ合った
 
50分で掴み取る ASP.NET Web API パターン&テクニック
50分で掴み取る ASP.NET Web API パターン&テクニック50分で掴み取る ASP.NET Web API パターン&テクニック
50分で掴み取る ASP.NET Web API パターン&テクニック
 
Firefox Mobile
Firefox MobileFirefox Mobile
Firefox Mobile
 

Similar to Electron early 2019

フロントエンドの技術で始めるデスクトップアプリ
フロントエンドの技術で始めるデスクトップアプリフロントエンドの技術で始めるデスクトップアプリ
フロントエンドの技術で始めるデスクトップアプリTomotaka Kusaka
 
JenkinsとSeleniumの活用事例
JenkinsとSeleniumの活用事例JenkinsとSeleniumの活用事例
JenkinsとSeleniumの活用事例Takeshi Kondo
 
ブラウザからWeb OSへ〜Web - TV連携事例からその可能性を探る〜
ブラウザからWeb OSへ〜Web - TV連携事例からその可能性を探る〜ブラウザからWeb OSへ〜Web - TV連携事例からその可能性を探る〜
ブラウザからWeb OSへ〜Web - TV連携事例からその可能性を探る〜Kensaku Komatsu
 
改めて C# でできることを振り返る
改めて C# でできることを振り返る改めて C# でできることを振り返る
改めて C# でできることを振り返るYuta Matsumura
 
Visual Studio 2012 で実現する HTML5 & マルチ デバイス時代の Web 開発
Visual Studio 2012 で実現する HTML5 & マルチ デバイス時代の Web 開発Visual Studio 2012 で実現する HTML5 & マルチ デバイス時代の Web 開発
Visual Studio 2012 で実現する HTML5 & マルチ デバイス時代の Web 開発Akira Inoue
 
試して学べるクラウド技術! OpenShift
試して学べるクラウド技術! OpenShift試して学べるクラウド技術! OpenShift
試して学べるクラウド技術! OpenShiftEtsuji Nakai
 
Netラボ2012年6月勉強会 マイクロソフトのオープンソース戦略を考える
Netラボ2012年6月勉強会 マイクロソフトのオープンソース戦略を考えるNetラボ2012年6月勉強会 マイクロソフトのオープンソース戦略を考える
Netラボ2012年6月勉強会 マイクロソフトのオープンソース戦略を考えるdavid9142
 
Hands on PhotoBlog App with WordPress REST API and App Inventor
Hands on PhotoBlog App with WordPress REST API and App InventorHands on PhotoBlog App with WordPress REST API and App Inventor
Hands on PhotoBlog App with WordPress REST API and App InventorHong Chen
 
.NET の今と未来 ~ デバイス&クラウド ネイティブを目指して
.NET の今と未来 ~ デバイス&クラウド ネイティブを目指して.NET の今と未来 ~ デバイス&クラウド ネイティブを目指して
.NET の今と未来 ~ デバイス&クラウド ネイティブを目指してAkira Inoue
 
OWIN って何?
OWIN って何?OWIN って何?
OWIN って何?miso- soup3
 
ASP.NET vNext / Visual Studio "14" に見る .NET の未来像
ASP.NET vNext / Visual Studio "14" に見る .NET の未来像ASP.NET vNext / Visual Studio "14" に見る .NET の未来像
ASP.NET vNext / Visual Studio "14" に見る .NET の未来像Akira Inoue
 
Visual Studioで始めるTypeScript開発入門
Visual Studioで始めるTypeScript開発入門Visual Studioで始めるTypeScript開発入門
Visual Studioで始めるTypeScript開発入門Narami Kiyokura
 
.NET 6 と Blazor で作るクロスプラットフォームアプリ概要
.NET 6 と Blazor で作るクロスプラットフォームアプリ概要.NET 6 と Blazor で作るクロスプラットフォームアプリ概要
.NET 6 と Blazor で作るクロスプラットフォームアプリ概要Akira Inoue
 
PhoneGapでWebアプリをスマホアプリ化
PhoneGapでWebアプリをスマホアプリ化PhoneGapでWebアプリをスマホアプリ化
PhoneGapでWebアプリをスマホアプリ化Takashi Okamoto
 
リモートデバッグツール Weinerをつかってみた
リモートデバッグツール Weinerをつかってみたリモートデバッグツール Weinerをつかってみた
リモートデバッグツール WeinerをつかってみたMasakazu Muraoka
 
Linux & Mac OS でも動く! ~ オープンソース & クロスプラットフォーム .NET の歩き方 ~
Linux & Mac OS でも動く! ~ オープンソース & クロスプラットフォーム .NET の歩き方 ~Linux & Mac OS でも動く! ~ オープンソース & クロスプラットフォーム .NET の歩き方 ~
Linux & Mac OS でも動く! ~ オープンソース & クロスプラットフォーム .NET の歩き方 ~Akira Inoue
 
~初心者がこれから Web アプリの開発をするために~
~初心者がこれから Web アプリの開発をするために~~初心者がこれから Web アプリの開発をするために~
~初心者がこれから Web アプリの開発をするために~Oda Shinsuke
 

Similar to Electron early 2019 (20)

フロントエンドの技術で始めるデスクトップアプリ
フロントエンドの技術で始めるデスクトップアプリフロントエンドの技術で始めるデスクトップアプリ
フロントエンドの技術で始めるデスクトップアプリ
 
JenkinsとSeleniumの活用事例
JenkinsとSeleniumの活用事例JenkinsとSeleniumの活用事例
JenkinsとSeleniumの活用事例
 
ブラウザからWeb OSへ〜Web - TV連携事例からその可能性を探る〜
ブラウザからWeb OSへ〜Web - TV連携事例からその可能性を探る〜ブラウザからWeb OSへ〜Web - TV連携事例からその可能性を探る〜
ブラウザからWeb OSへ〜Web - TV連携事例からその可能性を探る〜
 
改めて C# でできることを振り返る
改めて C# でできることを振り返る改めて C# でできることを振り返る
改めて C# でできることを振り返る
 
.NET vNext
.NET vNext.NET vNext
.NET vNext
 
Visual Studio 2012 で実現する HTML5 & マルチ デバイス時代の Web 開発
Visual Studio 2012 で実現する HTML5 & マルチ デバイス時代の Web 開発Visual Studio 2012 で実現する HTML5 & マルチ デバイス時代の Web 開発
Visual Studio 2012 で実現する HTML5 & マルチ デバイス時代の Web 開発
 
試して学べるクラウド技術! OpenShift
試して学べるクラウド技術! OpenShift試して学べるクラウド技術! OpenShift
試して学べるクラウド技術! OpenShift
 
【BS2】.NET 6 最新アップデート
【BS2】.NET 6 最新アップデート【BS2】.NET 6 最新アップデート
【BS2】.NET 6 最新アップデート
 
Netラボ2012年6月勉強会 マイクロソフトのオープンソース戦略を考える
Netラボ2012年6月勉強会 マイクロソフトのオープンソース戦略を考えるNetラボ2012年6月勉強会 マイクロソフトのオープンソース戦略を考える
Netラボ2012年6月勉強会 マイクロソフトのオープンソース戦略を考える
 
Hands on PhotoBlog App with WordPress REST API and App Inventor
Hands on PhotoBlog App with WordPress REST API and App InventorHands on PhotoBlog App with WordPress REST API and App Inventor
Hands on PhotoBlog App with WordPress REST API and App Inventor
 
.NET の今と未来 ~ デバイス&クラウド ネイティブを目指して
.NET の今と未来 ~ デバイス&クラウド ネイティブを目指して.NET の今と未来 ~ デバイス&クラウド ネイティブを目指して
.NET の今と未来 ~ デバイス&クラウド ネイティブを目指して
 
OWIN って何?
OWIN って何?OWIN って何?
OWIN って何?
 
ASP.NET vNext / Visual Studio "14" に見る .NET の未来像
ASP.NET vNext / Visual Studio "14" に見る .NET の未来像ASP.NET vNext / Visual Studio "14" に見る .NET の未来像
ASP.NET vNext / Visual Studio "14" に見る .NET の未来像
 
Visual Studioで始めるTypeScript開発入門
Visual Studioで始めるTypeScript開発入門Visual Studioで始めるTypeScript開発入門
Visual Studioで始めるTypeScript開発入門
 
.NET 6 と Blazor で作るクロスプラットフォームアプリ概要
.NET 6 と Blazor で作るクロスプラットフォームアプリ概要.NET 6 と Blazor で作るクロスプラットフォームアプリ概要
.NET 6 と Blazor で作るクロスプラットフォームアプリ概要
 
PhoneGapでWebアプリをスマホアプリ化
PhoneGapでWebアプリをスマホアプリ化PhoneGapでWebアプリをスマホアプリ化
PhoneGapでWebアプリをスマホアプリ化
 
Play jjug2012spring
Play jjug2012springPlay jjug2012spring
Play jjug2012spring
 
リモートデバッグツール Weinerをつかってみた
リモートデバッグツール Weinerをつかってみたリモートデバッグツール Weinerをつかってみた
リモートデバッグツール Weinerをつかってみた
 
Linux & Mac OS でも動く! ~ オープンソース & クロスプラットフォーム .NET の歩き方 ~
Linux & Mac OS でも動く! ~ オープンソース & クロスプラットフォーム .NET の歩き方 ~Linux & Mac OS でも動く! ~ オープンソース & クロスプラットフォーム .NET の歩き方 ~
Linux & Mac OS でも動く! ~ オープンソース & クロスプラットフォーム .NET の歩き方 ~
 
~初心者がこれから Web アプリの開発をするために~
~初心者がこれから Web アプリの開発をするために~~初心者がこれから Web アプリの開発をするために~
~初心者がこれから Web アプリの開発をするために~
 

Electron early 2019

  • 2. 要旨 • Electron リリース以来5年以上。(v4.0) 熟成してきてます。 • アプリ作ってみて理解したことをお話しします。 • ブラウザにデスクトップのガワをつけただけと侮れません • PWA などの類似技術との関係についても考察してみます。 • 簡単なハンズオンも用意してます。 • たまには UI について語り合うのも一興ではないでしょうか。
  • 3. アジェンダ • Electron とは • アーキテクチャー • 類似テクノロジーとの比較 • Electron の活用 • ハンズオン • クロスプラットフォームアプリ開発戦略 • まとめ
  • 4. 私の UI フレームワーク利用経験 (JSP などの SSR 技術は除く) • X Window System • MFC • JFC • Windows Forms • Qt / QML • Cocoa • WPF • Silverlight • jQuery UI • Backbone • Electron • Cordova • Xamarin • Angular / Polymer • React / Vue • Elm ネイティブ Web WebRIA ネイティブ モバイルハイブリッド ネイティブクロスプラットフォーム デスクトップハイブリッド
  • 5. Electron とは • デスクトップアプリを Web 技術で開発するための基盤 • HTML • JavaScript • CSS • Chromium をベースに GitHub が開発 (バージョン 4.0.5) • VS Code にぶち抜かれたが Atom Editor の基盤 • Chromium に追従し続けている(バージョン 69.0.3497.106) • Node.js と Chromium の Renderer (Blink) のプロセス間通信で機 能を実現する • Node.js のエコシステム + Chromium のエンジンにより開発が enforce される
  • 7. フィーチャー • クロスプラットフォーム • 各 OS 向けにバイナリを生成可能 • Web API で取得したデータのレンダリングも簡単 • ブラウザだと Same-Origin Policy が・・ • WebView でサイトを簡単に表示できる • 開発するアセットの表示に使うのはお勧めしない・・デバッグできない • Node.js から OS 機能を簡単に呼べる • クリップボード操作とかファイルシステムとか • 開発時 DevTools が使える • インストーラーや更新通知の仕組みもある • Windows の通知領域や macOS のメニューバーにアイコンも置ける
  • 8. アーキテクチャー • Node.js の Main Process と Chromium の Renderer Process が IPC (Inter Process Communication) で連携 Main Process Renderer Process IPC Window management Menu management System I/O Render contents UI event handling 両プロセスで Electron API が利用可能
  • 9. PWA との比較 • PWA (Progressive Web Apps) • よりネイティブアプリに近い UX をもたらす Web アプリ • Twitter Lite, dev.to, Scrapbox, CodeSandbox など対応サイト増加 • 独立ウィンドウ、Service Worker によるオフライン動作 • アプリ仕様としてはブラウザ内動作と変わらない Electron PWA プロセス 独立 Chrome プロセス OS 機能へのアクセス 可能 サンドボックス 対応プラットフォーム Windows / macOS / Linux Android / iOS / Windows / macOS / Linux クロスブラウザ対応 Chromium で動けば OK 考慮必要
  • 10. 参考:PWA のサポート状況 • Android ではネイティブサポート (ストアにも出せるようになる) • Chrome (Windows / macOS) でもサポート • Windows ではすでにストアアプリとして出せる (Edge ベース) • iOS は 11.3 で対応しているがイマイチ Cordova や Ionic などのハイブリッドアプリフレームワーク使わなく ても、プラットフォーム側で PWA をファーストクラス扱いしてくれるよう になってきている
  • 11. 参考:React Native との比較 • React-way を Native Component 上で実現する • DOM 操作は JS だが UI はあくまで Native • 各プラットフォームのストアにも出せる • React エンジニアには有利 • 位置づけは Xamarin に近い • Desktop 向けには Proton Native というプロジェクトがある。 • 流行るかは謎。
  • 12. Electron の活用 • PWA 対応していないサイトのアプリ化 • Chrome のタブに埋もれてしまうサイトを OS のタスクバーで管理 • Web サービスの (野良) クライアント • クロスプラットフォーム展開の基盤として
  • 14. 準備 • Node.js をインストール • https://nodejs.org/ja/ • 公式の Quick Start プロジェクトから • https://electronjs.org/ • 実装例は • https://github.com/kondoumh/electron-study $ git clone https://github.com/electron/electron-quick-start $ cd electron-quick-start $ npm install && npm start
  • 15. WebView でサイトをデスクトップアプリ化してみよう • electron-quick-start をコピー • <webview> タグを追加 (GitHub を指定)、タイトル変更 • スタイル調整
  • 17. アプリにメニューを追加してみよう • main.js • Menu オブジェクトを import • MenuTemplateを作成 • role / 独自メニューの追加 (戻る、進む) • イベント送信の実装 • renderer.js • ipcRenderer の import • イベントハンドラーの実装 { role: “toggledevtools” } の追加でDevTools 使えます デフォルトのメニュー 取得して追加したい けど、動的変更でき ないっぽい https://electronjs.org/docs/api/menu
  • 18. API を使った簡易クライアントを作ってみよう • Scrapbox API を使ってページ情報を取得 • パスパラメータだけで取れます • JavaScript の fetch API で • mamezou-knowhow ページは private なので credentials が必要 • レンダリングしてみる • response を JSON 変換 • data.lines を enumerate • line.text でテキストが取得可能 • data.image から ページ image の url が取れる Scrapbox は CORS を許可していないので、 Web アプリだとエラーになるけど、Electron だと ブラウザ外のため? レンダーできてしまう
  • 20. 実行可能なパッケージを作ってみよう • electron-packager をインストール • $ npm i electron-packager • package.json の scripts にパッケージ用コマンド追加 • パッケージコマンドを実行 • $ npm run package
  • 21. Tips • app.isPackaged プロパティ • デバッグ用のメニューを開発時だけ追加するなどが簡単 • sessionStorage / localStorage は Main process では使え ない • Window ないので・・・。 IPC かファイル経由で • Chrome の拡張は残念ながらノーサポート • DevTools の拡張は使える (Vue Devtools など) • macOS only な API がけっこうある • クロスプラットフォームなので、多用するのは微妙
  • 23. クロスプラットフォームアプリ開発戦略 • クライアントオンリーのアプリはあまり旨味がない • Web で展開した方が多くのユーザにリーチできる • まず PWA で作る • PWA の開発は、通常の Web 開発 • API と画面のアセットを1つのサイトで管理 • PWA としてモバイルでの機能を完結させる • 次に Electron アプリ化 • デスクトップアプリとしての体裁 • アセットを共有してアプリ化 or WebView でさくっと • デスクトップ独自機能の提供
  • 24. これを Electron と合わせて… ここに PWA があるじゃろ? ( ^ω^) ⊃PWA⊂ _人人人人人人人人人人人人人人人人人_ > クロスプラットフォーム対応!!! <  ̄Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^ ̄ ( ^ω^) ≡⊃⊂≡ こうじゃ… ( ^ω^) ⊃デスクトップアプリ!!⊂
  • 26. https://github.com/SimulatedGREG/electron-vue Electron で Vue を使うプロジェクトを生成するためのボイラープレート
  • 27. Vue アプリの Electron 化 ここに Vue のトイ・アプリがあるじゃろ? ( ^ω^) ⊃トイ⊂ ( ^ω^) ≡⊃⊂≡ こうじゃ…
  • 28. Vue アプリの Electron 化 • アセットは簡単に使いまわせる • Web との共通アセットは git submodule で管理 できるとよいかも • Electron メニューに対応させようとかすると独自実装が • Renderer と アセットの連携部分どうする? • ルートコンポーネントを別途用意して分離? • ちゃんと設計しないと・・・ ( ^ω^) ⊃⊂ ( ・ω・ ) ⊃⊂ (´・ω・`) ⊃⊂
  • 29. 最後に • Electron かなり充実してきてる • PWA のツールチェインや知識も活かせる • PWA がもっと流行ればそちらのエコシステムが進化して Electron は廃れるかもしれないけど・・・ • VS Code は Web でも動いてるし