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

Transcript

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

   View Slide

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

   View Slide

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

   View Slide

4. View Slide

5. TouchBar
   

   View Slide

6. View Slide

7. TouchBarで何かやってみたい！
   

   View Slide

8. View Slide

9. Electron
   ● デスクトップアプリを開発できるフレームワーク
   ● Github製
   ● HTML/CSS/js/Node.jsで実装
   ● 開発したアプリはWindows,Mac,Linuxに対応
   ● 今年に入ってTouchBarAPIが実装された
   

   View Slide

10. https://electron.atom.io/
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

14. 実際に動かしてみる
    

    View Slide

15. Electronでアプリを動かす
    1. npm init
    2. npm install --save-dev --save-exact
    3. index.htmlとmain.jsを実装
    4. npm start
    

    View Slide

16. Electronでアプリを動かす
    

    View Slide

17. View Slide

18. 実装が簡単！
    ç
    

    View Slide

19. 本題
    

    View Slide

20. TouchBarで
    teratailを便利にする
    

    View Slide

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

    View Slide

22. teratail × TouchBar
    ● teratailボタンを押すことで質問を表示
    ● 気になる質問はすぐに開けるようにする
    ＿人人人人人人人人人＿
    ＞ スコア急増 ＜
    ￣Y^Y^Y^Y^Y^Y^Y^Y￣
    

    View Slide

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

    View Slide

24. Electronの実装
    ● メインプロセス
    ○ TouchBarの制御
    ○ teratailAPIとの連携
    ● レンダラプロセス
    ○ TouchBarの操作と連携してteratailを表示
    

    View Slide

25. Electron側の実装
    

    View Slide

26. View Slide

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

    View Slide

28. THANKS!
    Any questions?
    You can find me at
    ✘ facebook: shouhei.tai
    ✘ Twtter: @ShoheiTai
    

    View Slide