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. 自己紹介 Yuki Hattori 株式会社Speee @ roppongi.rb GitHub: https://github.com/yhatt Facebook: https://www.facebook.com/yu.hatt

    普段は... Rails と戯れるサー バー サイドエンジニア たまに Web デザイン 2
  2. 3

  3. Marp? Markdown から スライドを作る アプリ Deckset の Electron 版 を目指して開発中

    クロスプラットフォー ム ライブプレビュー でスライド作りが捗る 6
  4. なんで 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
  5. 関連付け実装のパター ン インストー ラで関連付け登録する 王道パター ン Electron 上で頑張る ツー ル上でできるとユー

    ザに優しい windows-registry あたりが良さげかも? Marp ではまだ対応し切れてません Electron VS Windows 23
  6. 細かすぎて伝わらないOS 間の違い addRecentDocument の積まれ方 (A -> B -> C と開いた時)

    Windows: 下に積まれていく (A -> B -> C) Mac: 上に積まれていく (C -> B -> A) Electron VS Windows 24
  7. 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
  8. Electron の メニューAPI アプリケー ションメニュー Menu.setApplicationMenu() Win/Linux は 全ウィンドウのメニュー を設定

    既存のウィンドウメニュー は上書きされる ウィンドウメニュー BrowserWindow.setMenu() Mac は 動作しない Electron VS Mac 28
  9. Atom の解決方法 ─ Electron アプリのクロスプラットフォー ムなメニュー 設計 - Qiita (http://qiita.com/nozaq/items/415cee216cd6c114a369)

    実際にアプリケー ションのメニュー を管理するのは ApplicationMenu クラスです。 このクラスは各 AtomWindow に設 定されたメニュー 内容を保持し、 現在フォー カス中のウィンドウに 合わせてメニュー 内容を更新したり、 ユー ザによってメニュー 要素 が選択された際にイベントを各ウィンドウに通知したりします。 “ “ http://qiita.com/nozaq/items/415cee216cd6c114a369 30
  10. こんな感じ (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