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

AbemaTVのコメントビューアを作る話

 AbemaTVのコメントビューアを作る話

俺の話を聞け!!LT大会 #14

https://cdg.connpass.com/event/129574/

loftkun

May 24, 2019
Tweet

More Decks by loftkun

Other Decks in Technology

Transcript

  1. AbemaTVのコメントビューアを作る話
    2019/05/24 俺の話を聞け!!LT大会 #14 @loftkun

    View full-size slide

  2. @loftkun
    • 将棋
    • ピアノ
    speakerdeck.com/loftkun

    View full-size slide

  3. Agenda
    API
    analysis
    Visualization
    4
    patterns
    Chrome
    DevTools
    GUI
    CUI
    TUI

    View full-size slide

  4. API analysis

    View full-size slide

  5. 1
    DevTools Browser

    View full-size slide

  6. 2
    Browser
    or
    Other Application

    View full-size slide

  7. ●packet capture
    2
    Browser
    or
    Other Application

    View full-size slide

  8. 3
    WiFi access point

    View full-size slide

  9. 3
    WiFi access point
    ●packet capture

    View full-size slide

  10. 4
    ●packet capture
    Emu
    e.g.

    View full-size slide

  11. Visualization

    View full-size slide

  12. TUI ( Text User Interface )

    View full-size slide

  13. Design
    info
    comments
    post
    wrote in Go
    TUI library :
    nsf/termbox-go

    View full-size slide

  14. GUI : コメントスクローラー

    View full-size slide

  15. Design
    Web Browser
    Transparent Window
    Enable Mouse Pointer
    Operation
    Comments flow like niconico
    API
    GET comment
    wrote in C#, .NET Framework.
    ( for Windows only )

    View full-size slide

  16. まとめ
    • API analysis
    • 4パターン事例紹介
    • WebアプリならChrome Dev Toolsが優秀
    • スマホアプリなら実機もしくはEmuの通信をPCで見れるぞ
    • 他にもあると思うので良い手法があれば教えてください
    • Visualization
    • CUIツールはTUI化するとインタラクティブな機能を持たせられるぞ
    • GUIは透明ウィンドウを使用したコメントビューアの事例を紹介したぞ

    View full-size slide

  17. Thank you for listening !
    @ITEventFukuoka

    View full-size slide