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
2. 自己紹介 泰昌平 スパイスファクトリー株式会社 ・平成生まれ ・ペチパー。CakePHP, Wordpressなど ・最近はGoogleCloudPlatformがマイブーム ・趣味はダーツとバイク
3. 今年、Macbookを買いました
5. TouchBar
7. TouchBarで何かやってみたい！
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でアプリを動かす
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側の実装
27. Electronを触ってみて • SlackやVisualStudioなどの実績がある安心感 • デスクトップアプリ開発の敷居が下がった！ • 学習コストも低い印象。実装が楽しい！ • 既存のWebアプリも簡単に載せられるかも？
28. THANKS! Any questions? You can find me at ✘ facebook: shouhei.tai ✘ Twtter: @ShoheiTai