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 Slide

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

    View Slide

  3. View Slide

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

    View Slide

  5. API analysis

    View Slide

  6. 1
    Browser

    View Slide

  7. 1
    DevTools Browser

    View Slide

  8. 2
    Browser
    or
    Other Application

    View Slide

  9. ●packet capture
    2
    Browser
    or
    Other Application

    View Slide

  10. 3
    WiFi access point

    View Slide

  11. 3
    WiFi access point
    ●packet capture

    View Slide

  12. 4
    Emu
    e.g.

    View Slide

  13. 4
    ●packet capture
    Emu
    e.g.

    View Slide

  14. View Slide

  15. View Slide

  16. View Slide

  17. View Slide

  18. View Slide

  19. View Slide

  20. View Slide

  21. View Slide

  22. View Slide

  23. View Slide

  24. Visualization

    View Slide

  25. TUI ( Text User Interface )

    View Slide

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

    View Slide

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

    View Slide

  28. 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 Slide

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

    View Slide

  30. Thank you for listening !
    @ITEventFukuoka

    View Slide