Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

Agenda API analysis Visualization 4 patterns Chrome DevTools GUI CUI TUI

Slide 5

Slide 5 text

API analysis

Slide 6

Slide 6 text

1 Browser

Slide 7

Slide 7 text

1 DevTools Browser

Slide 8

Slide 8 text

2 Browser or Other Application

Slide 9

Slide 9 text

●packet capture 2 Browser or Other Application

Slide 10

Slide 10 text

3 WiFi access point

Slide 11

Slide 11 text

3 WiFi access point ●packet capture

Slide 12

Slide 12 text

4 Emu e.g.

Slide 13

Slide 13 text

4 ●packet capture Emu e.g.

Slide 14

Slide 14 text

No content

Slide 15

Slide 15 text

No content

Slide 16

Slide 16 text

No content

Slide 17

Slide 17 text

No content

Slide 18

Slide 18 text

No content

Slide 19

Slide 19 text

No content

Slide 20

Slide 20 text

No content

Slide 21

Slide 21 text

No content

Slide 22

Slide 22 text

No content

Slide 23

Slide 23 text

No content

Slide 24

Slide 24 text

Visualization

Slide 25

Slide 25 text

TUI ( Text User Interface )

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

Thank you for listening ! @ITEventFukuoka