Electronを勉強していただけなのに... @ Meguro.es #5

Presented in http://meguroes.connpass.com/event/35123/

Transcript

1. Electron を勉強していただけなのに... 株式会社Speee 服部 雄揮 (@yhatt) 2016.08.04 Merguro. es #5 @ Drecom
2. 自己紹介 Yuki Hattori 株式会社Speee @ roppongi.rb GitHub: https://github.com/yhatt Facebook: https://www.facebook.com/yu.hatt 普段は... Rails と戯れるサー バー サイドエンジニア たまに Web デザイン 2
4. Electron の勉強のために こんなアプリを作りました 4
5. Marp: Markdown Presentation Writer https://yhatt.github.io/marp/ 5
6. Marp? Markdown から スライドを作る アプリ Deckset の Electron 版 を目指して開発中 クロスプラットフォー ム ライブプレビュー でスライド作りが捗る 6
7. Electron を勉強していただけなのに... GitHub Trend Daily 2 位 7
8. 今日話すこと Electron によるネイティブルックな クロスプラットフォー ム対応 8
9. おことわり ES っぽい話は薄味かもしれません http://blog.goo.ne.jp/amoryoryo/e/1f15c37cb0d944cbabe2034130ff4ed7 9
10. そもそも Electron って何よ デスクトップアプリを作れる Framework Chromium + Node.js 代表例: Atom, Slack, Visual Studio Code, Kobito.. 10
11. なんで 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
12. But wait! 12
13. 始めて本格的にフロントエンド開発する人の 心の声に耳を傾けてましょう 13
14. .o( キャッチアップ大変... ) 14
15. なのでこうなる React? Babel? Webpack? 馬鹿言うな Redux? Angular? Browserify? とんでもない jQuery, CoffeeScript, gulp で 15
16. 『 まずは Electron さんと上手くやってこう』 ということで... 16
17. 本日の話題 OS ネイティブルックと戦う 17
18. 1. Windows の場合 18
19. ジャンプリスト対応にはまった Electron VS Windows 19
20. app.addRecentDocument で簡単に追加 const {app} = require('electron') app.addRecentDocument('C:\\test1.md') app.addRecentDocument('C:\\test2.md') ただし、 そのままだと表示されない Electron VS Windows 20
21. 関連付けが必要です ユー ザが .md に関連付けすると… 表示はされるが、 選択しても開かない事も Electron VS Windows 21
22. Application Registration を正しく実施せよ ドキュメントにそう書いてあるし Electron VS Windows 22
23. 関連付け実装のパター ン インストー ラで関連付け登録する 王道パター ン Electron 上で頑張る ツー ル上でできるとユー ザに優しい windows-registry あたりが良さげかも？ Marp ではまだ対応し切れてません Electron VS Windows 23
24. 細かすぎて伝わらないOS 間の違い addRecentDocument の積まれ方 (A -> B -> C と開いた時) Windows: 下に積まれていく (A -> B -> C) Mac: 上に積まれていく (C -> B -> A) Electron VS Windows 24
25. 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
26. 2. Mac の場合 26
27. メニュー 管理 にはまる Electron VS Mac 27
28. Electron の メニューAPI アプリケー ションメニュー Menu.setApplicationMenu() Win/Linux は 全ウィンドウのメニュー を設定 既存のウィンドウメニュー は上書きされる ウィンドウメニュー BrowserWindow.setMenu() Mac は 動作しない Electron VS Mac 28
29. こんな時どうする? in Mac ウィンドウに紐づくステー タス を反映させたい でも BrowserWindow.setMenu() は使えない... Electron VS Mac 29
30. Atom の解決方法 ─ Electron アプリのクロスプラットフォー ムなメニュー 設計 - Qiita (http://qiita.com/nozaq/items/415cee216cd6c114a369) 実際にアプリケー ションのメニュー を管理するのは ApplicationMenu クラスです。 このクラスは各 AtomWindow に設 定されたメニュー 内容を保持し、 現在フォー カス中のウィンドウに 合わせてメニュー 内容を更新したり、 ユー ザによってメニュー 要素 が選択された際にイベントを各ウィンドウに通知したりします。 “ “ http://qiita.com/nozaq/items/415cee216cd6c114a369 30
31. こんな感じ (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
32. 要注意ポイント 紐づくウィンドウが無い時のメニュー がある @defaultAppMenu がそれ New, Open などはウィンドウの新規作成も 面倒を見る必要あり Electron VS Mac 32
33. 3. Linux の場合 33
34. 何もはまらなかった 基本は Windows と同じ感覚でOK 34
35. 結論 Win/Mac の違いさえ意識すれば ネイティブルックはこっちのもの! Linux は後々 はまるかもしれないけど... 35
36. yhatt/marp https://github.com/yhatt/marp 36
37. 終 37
38. ここからは余談 ( 見なくてもOK) 38
39. Marp が個人の勉強の域を超えてしまったので... Electron で実験する遊び場を別途用意 https://github.com/yhatt/electron-playground 今後の実験予定 AVA + Spectron + Travis CI Chromium ネイティブの ES6 Web Components 39
40. Marp のアー キテクチャはこんなん 40