Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

Yuki Hattori

August 04, 2016
Tweet

More Decks by Yuki Hattori

Other Decks in Programming

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
  3. 3

  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