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

泰 昌平@ShoheiTai

September 12, 2017
Tweet

More Decks by 泰 昌平@ShoheiTai

Other Decks in Programming

Transcript

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  4. TouchBarで何かやってみたい!

    View full-size slide

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

    View full-size slide

  6. https://electron.atom.io/

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  10. 実際に動かしてみる

    View full-size slide

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

    View full-size slide

  12. Electronでアプリを動かす

    View full-size slide

  13. 実装が簡単!
    ç

    View full-size slide

  14. TouchBarで
    teratailを便利にする

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  19. Electron側の実装

    View full-size slide

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

    View full-size slide

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

    View full-size slide