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

Transcript

1. 1.

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

2. 2.

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

3. 3.

   None
4. 4.

   Agenda API analysis Visualization 4 patterns Chrome DevTools GUI CUI

   TUI
5. 5.

   API analysis

6. 6.

   1 Browser

7. 7.

   1 DevTools Browser

8. 8.

   2 Browser or Other Application

9. 9.

   •packet capture 2 Browser or Other Application

10. 10.

    3 WiFi access point

11. 11.

    3 WiFi access point •packet capture

12. 12.

    4 Emu e.g.

13. 13.

    4 •packet capture Emu e.g.

14. 14.

    None
15. 15.

    None
16. 16.

    None
17. 17.

    None
18. 18.

    None
19. 19.

    None
20. 20.

    None
21. 21.

    None
22. 22.

    None
23. 23.

    None
24. 24.

    Visualization

25. 25.

    TUI （ Text User Interface ）

26. 26.

    Design info comments post wrote in Go TUI library :

    nsf/termbox-go
27. 27.

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

28. 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 )
29. 29.

    まとめ • API analysis • 4パターン事例紹介 • WebアプリならChrome Dev Toolsが優秀

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

    Thank you for listening ! @ITEventFukuoka