Slide 1
Slide 1 text
Macbookでteratailの秒速回答を目指す
泰昌平 @ShoheiTai
Slide 2
Slide 2 text
自己紹介
泰昌平
スパイスファクトリー株式会社
・平成生まれ
・ペチパー。CakePHP, Wordpressなど
・最近はGoogleCloudPlatformがマイブーム
・趣味はダーツとバイク
Slide 3
Slide 3 text
今年、Macbookを買いました
Slide 4
Slide 4 text
No content
Slide 5
Slide 5 text
TouchBar
Slide 6
Slide 6 text
No content
Slide 7
Slide 7 text
TouchBarで何かやってみたい！
Slide 8
Slide 8 text
No content
Slide 9
Slide 9 text
Electron
● デスクトップアプリを開発できるフレームワーク
● Github製
● HTML/CSS/js/Node.jsで実装
● 開発したアプリはWindows,Mac,Linuxに対応
● 今年に入ってTouchBarAPIが実装された
Slide 10
Slide 10 text
https://electron.atom.io/
Slide 11
Slide 11 text
Webエンジニアに優しい！
Slide 12
Slide 12 text
Electronのプロセス
メインプロセス
(Node.js)
レンダラプロセス
(HTML/JS/CSS)
ブラウザとしての仕事
サーバサイドの仕事
プロセス間通信
Slide 13
Slide 13 text
Electronのプロセス
● メインプロセス
○ OS側の制御などブラウザでできない処理を扱う
● レンダラプロセス
○ あくまでブラウザとして振る舞う
○ 扱えない処理はメインプロセスに投げる
Slide 14
Slide 14 text
実際に動かしてみる
Slide 15
Slide 15 text
Electronでアプリを動かす
1. npm init
2. npm install --save-dev --save-exact
3. index.htmlとmain.jsを実装
4. npm start
Slide 16
Slide 16 text
Electronでアプリを動かす
Slide 17
Slide 17 text
No content
Slide 18
Slide 18 text
実装が簡単！
ç
Slide 19
Slide 19 text
本題
Slide 20
Slide 20 text
TouchBarで
teratailを便利にする
Slide 21
Slide 21 text
teratail × TouchBar
● teratailボタンを押すことで質問を表示
● 気になる質問はすぐに開けるようにする
Slide 22
Slide 22 text
teratail × TouchBar
● teratailボタンを押すことで質問を表示
● 気になる質問はすぐに開けるようにする
＿人人人人人人人人人＿
＞ スコア急増 ＜
￣Y^Y^Y^Y^Y^Y^Y^Y￣
Slide 23
Slide 23 text
teratailAPI
limitは1、pageは1〜100までの乱数を指定。
直近100件の質問をランダムに取得する。
Slide 24
Slide 24 text
Electronの実装
● メインプロセス
○ TouchBarの制御
○ teratailAPIとの連携
● レンダラプロセス
○ TouchBarの操作と連携してteratailを表示
Slide 25
Slide 25 text
Electron側の実装
Slide 26
Slide 26 text
No content
Slide 27
Slide 27 text
Electronを触ってみて
● SlackやVisualStudioなどの実績がある安心感
● デスクトップアプリ開発の敷居が下がった！
● 学習コストも低い印象。実装が楽しい！
● 既存のWebアプリも簡単に載せられるかも？
Slide 28
Slide 28 text
THANKS!
Any questions?
You can find me at
✘ facebook: shouhei.tai
✘ Twtter: @ShoheiTai