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

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

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

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