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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  5. Marp?
    Markdown
    から スライドを作る アプリ
    Deckset
    の Electron
    版 を目指して開発中
    クロスプラットフォー

    ライブプレビュー
    でスライド作りが捗る
    6

    View full-size slide

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

    7

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    15

    View full-size slide


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

    View full-size slide

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

    View full-size slide

  16. 1. Windows
    の場合
    18

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  21. 関連付け実装のパター

    インストー
    ラで関連付け登録する
    王道パター

    Electron
    上で頑張る
    ツー
    ル上でできるとユー
    ザに優しい
    windows-registry
    あたりが良さげかも?
    Marp
    ではまだ対応し切れてません
    Electron VS Windows
    23

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  24. 2. Mac
    の場合
    26

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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


    http://qiita.com/nozaq/items/415cee216cd6c114a369
    30

    View full-size slide

  29. こんな感じ (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

    View full-size slide

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

    View full-size slide

  31. 3. Linux
    の場合
    33

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide