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

macbookでteratailの秒速回答を目指す - Electron + Node.js #集まっtail

macbookでteratailの秒速回答を目指す - Electron + Node.js #集まっtail

集まっtail #8 LT:5分
https://teratail.connpass.com/event/64198/

今回はElectronでMacbookProのTouchBarをハックしました。
ElectronはTouchBarAPIが使えるので、簡単にハックできます。
node.js+npmですぐ試せるのでElectronはおすすめです!

以下、発表で使用した動画です。
ElectronでTouchBarAPIを試してみた
https://www.youtube.com/watch?v=zAhbbeV6JBM
TouchBarでteratailの質問を読み込んでみた
https://www.youtube.com/watch?v=hGy5Vt_wWnE
ソースコード
https://github.com/tai-sho/teratail-touchbar-app

9e83432930264c9c0a0d83d2e18b8280?s=128

泰 昌平@ShoheiTai

September 12, 2017
Tweet

Transcript

  1. Macbookでteratailの秒速回答を目指す 泰昌平 @ShoheiTai

  2. 自己紹介 泰昌平 スパイスファクトリー株式会社 ・平成生まれ ・ペチパー。CakePHP, Wordpressなど ・最近はGoogleCloudPlatformがマイブーム ・趣味はダーツとバイク

  3. 今年、Macbookを買いました

  4. None
  5. TouchBar

  6. None
  7. TouchBarで何かやってみたい!

  8. None
  9. Electron • デスクトップアプリを開発できるフレームワーク • Github製 • HTML/CSS/js/Node.jsで実装 • 開発したアプリはWindows,Mac,Linuxに対応 •

    今年に入ってTouchBarAPIが実装された
  10. https://electron.atom.io/

  11. Webエンジニアに優しい!

  12. Electronのプロセス メインプロセス (Node.js) レンダラプロセス (HTML/JS/CSS) ブラウザとしての仕事 サーバサイドの仕事 プロセス間通信

  13. Electronのプロセス • メインプロセス ◦ OS側の制御などブラウザでできない処理を扱う • レンダラプロセス ◦ あくまでブラウザとして振る舞う ◦

    扱えない処理はメインプロセスに投げる
  14. 実際に動かしてみる

  15. Electronでアプリを動かす 1. npm init 2. npm install --save-dev --save-exact 3.

    index.htmlとmain.jsを実装 4. npm start
  16. Electronでアプリを動かす

  17. None
  18. 実装が簡単! ç

  19. 本題

  20. TouchBarで teratailを便利にする

  21. teratail × TouchBar • teratailボタンを押すことで質問を表示 • 気になる質問はすぐに開けるようにする

  22. teratail × TouchBar • teratailボタンを押すことで質問を表示 • 気になる質問はすぐに開けるようにする _人人人人人人人人人_ > スコア急増

    <  ̄Y^Y^Y^Y^Y^Y^Y^Y ̄
  23. teratailAPI limitは1、pageは1〜100までの乱数を指定。 直近100件の質問をランダムに取得する。

  24. Electronの実装 • メインプロセス ◦ TouchBarの制御 ◦ teratailAPIとの連携 • レンダラプロセス ◦

    TouchBarの操作と連携してteratailを表示
  25. Electron側の実装

  26. None
  27. Electronを触ってみて • SlackやVisualStudioなどの実績がある安心感 • デスクトップアプリ開発の敷居が下がった! • 学習コストも低い印象。実装が楽しい! • 既存のWebアプリも簡単に載せられるかも?

  28. THANKS! Any questions? You can find me at ✘ facebook:

    shouhei.tai ✘ Twtter: @ShoheiTai