Electron を勉強していただけなのに... 株式会社Speee 服部 雄揮 (@yhatt) 2016.08.04 Merguro. es #5 @ Drecom

自己紹介 Yuki Hattori 株式会社Speee @ roppongi.rb GitHub: https://github.com/yhatt Facebook: https://www.facebook.com/yu.hatt 普段は... Rails と戯れるサー バー サイドエンジニア たまに Web デザイン 2

3

Electron の勉強のために こんなアプリを作りました 4

Marp: Markdown Presentation Writer https://yhatt.github.io/marp/ 5

Marp? Markdown から スライドを作る アプリ Deckset の Electron 版 を目指して開発中 クロスプラットフォー ム ライブプレビュー でスライド作りが捗る 6

Electron を勉強していただけなのに... GitHub Trend Daily 2 位 7

今日話すこと Electron によるネイティブルックな クロスプラットフォー ム対応 8

おことわり ES っぽい話は薄味かもしれません http://blog.goo.ne.jp/amoryoryo/e/1f15c37cb0d944cbabe2034130ff4ed7 9

そもそも Electron って何よ デスクトップアプリを作れる Framework Chromium + Node.js 代表例: Atom, Slack, Visual Studio Code, Kobito.. 10

なんで Electron 使ったの？ クロスプラットフォー ム 著名アプリで実績がある スライド作る時にPDF 出力が超絶楽 ( printToPDF ) win.webContents.printToPDF({}, (error, data) => { if (error) throw error fs.writeFile('/tmp/print.pdf', data, (error) => { if (error) throw error console.log('Write PDF successfully.') }) }) https://github.com/electron/electron/blob/master/docs/api/web-contents.md 11

But wait! 12

始めて本格的にフロントエンド開発する人の 心の声に耳を傾けてましょう 13

.o( キャッチアップ大変... ) 14

なのでこうなる React? Babel? Webpack? 馬鹿言うな Redux? Angular? Browserify? とんでもない jQuery, CoffeeScript, gulp で 15

『 まずは Electron さんと上手くやってこう』 ということで... 16

本日の話題 OS ネイティブルックと戦う 17

1. Windows の場合 18

ジャンプリスト対応にはまった Electron VS Windows 19

app.addRecentDocument で簡単に追加 const {app} = require('electron') app.addRecentDocument('C:\\test1.md') app.addRecentDocument('C:\\test2.md') ただし、 そのままだと表示されない Electron VS Windows 20

関連付けが必要です ユー ザが .md に関連付けすると… 表示はされるが、 選択しても開かない事も Electron VS Windows 21

Application Registration を正しく実施せよ ドキュメントにそう書いてあるし Electron VS Windows 22

関連付け実装のパター ン インストー ラで関連付け登録する 王道パター ン Electron 上で頑張る ツー ル上でできるとユー ザに優しい windows-registry あたりが良さげかも？ Marp ではまだ対応し切れてません Electron VS Windows 23

細かすぎて伝わらないOS 間の違い addRecentDocument の積まれ方 (A -> B -> C と開いた時) Windows: 下に積まれていく (A -> B -> C) Mac: 上に積まれていく (C -> B -> A) Electron VS Windows 24

Marp での対処 最近開いたファイルは上に積まれるのが普通では? Windows のみ配列を reverse() して対処 refreshRecentDocument = (recents) => # Windows: 配列を逆にする recents.reverse() if process.platform == 'win32' app.clearRecentDocuments() app.addRecentDocument(path) for path in recents refreshRecentDocument(['A.md', 'B.md', 'C.md']) Electron VS Windows 25

2. Mac の場合 26

メニュー 管理 にはまる Electron VS Mac 27

Electron の メニューAPI アプリケー ションメニュー Menu.setApplicationMenu() Win/Linux は 全ウィンドウのメニュー を設定 既存のウィンドウメニュー は上書きされる ウィンドウメニュー BrowserWindow.setMenu() Mac は 動作しない Electron VS Mac 28

こんな時どうする? in Mac ウィンドウに紐づくステー タス を反映させたい でも BrowserWindow.setMenu() は使えない... Electron VS Mac 29

Atom の解決方法 ─ Electron アプリのクロスプラットフォー ムなメニュー 設計 - Qiita (http://qiita.com/nozaq/items/415cee216cd6c114a369) 実際にアプリケー ションのメニュー を管理するのは ApplicationMenu クラスです。 このクラスは各 AtomWindow に設 定されたメニュー 内容を保持し、 現在フォー カス中のウィンドウに 合わせてメニュー 内容を更新したり、 ユー ザによってメニュー 要素 が選択された際にイベントを各ウィンドウに通知したりします。 “ “ http://qiita.com/nozaq/items/415cee216cd6c114a369 30

こんな感じ (CoffeeScript) {Menu, BrowserWindow} = require('electron') class MarpMainMenu @useAppMenu: process.platform is 'darwin' @defultAppMenu: Menu.fromTemplate([{ label: 'Default' }]) constructor: (@menu, @win) -> if MarpMainMenu.useAppMenu # Mac の場合 @win.on 'focus', => Menu.setApplicationMenu(@menu) @win.on 'blur', => Menu.setApplicationMenu(@defaultAppMenu) else # Win/Linux の場合 @win.setMenu(@menu) # メニュー, ウィンドウを作成 new MarpMainMenu(Menu.fromTemplate, new BrowserWindow()) Electron VS Mac 31

要注意ポイント 紐づくウィンドウが無い時のメニュー がある @defaultAppMenu がそれ New, Open などはウィンドウの新規作成も 面倒を見る必要あり Electron VS Mac 32

3. Linux の場合 33

何もはまらなかった 基本は Windows と同じ感覚でOK 34

結論 Win/Mac の違いさえ意識すれば ネイティブルックはこっちのもの! Linux は後々 はまるかもしれないけど... 35

yhatt/marp https://github.com/yhatt/marp 36

終 37

ここからは余談 ( 見なくてもOK) 38

Marp が個人の勉強の域を超えてしまったので... Electron で実験する遊び場を別途用意 https://github.com/yhatt/electron-playground 今後の実験予定 AVA + Spectron + Travis CI Chromium ネイティブの ES6 Web Components 39

Marp のアー キテクチャはこんなん 40