@ 2015.11.26

1. @maxmellon
2016.11.26 @ 「首領(Red Coder)への道」 勉強会という名のオフ会
コメントビュアーを
作った話

2. ⽬次
0. 自己紹介
1. コメビュを作った背景
2. コメビュの構成
3. 現状と課題

3. 0. ⾃⼰紹介

4. はじめまして
mexmellonと申します

5. 今⽇はうどん県から
きました

6. 基本情報
○ 京都府宇治市 出身
響け！ユーフォニアム とか平等院とか
抹茶はすきです
○ 現在は香川県
うどん好きです
最大 うどんストリーク は29 です
○ 22歳 学生

7. エンジニアとしての基本情報
○ いつも使ってる開発用ツール
○ Vim 8.0 (CLPUM) : エディタ
○ tmux 2.2 : ターミナルマルチプレクサ
○ Zsh 5.1.1 : シェル
○ 好きなプログラミング言語やライブラリ
○ javascript (React.js / Redux)
言語問わず，フロントのほうが好み

8. 個⼈的に好きなやつ
○ うどん

9. 個⼈的に好きなやつ
○ 和太鼓

10. 個⼈的に好きなやつ
○ ニコ生

11. 主なプロダクト

13. ⾃慢

14. ⼤切に考えてること
○ 日々の努力
コツコツがコツ
Githubの草をモチベーションにしている

15. 今⽇は，
コメビュ作った話
しようとおもう

16. 1. コメントビュアー
作った背景

17. 背景
よっしゃMacを
⼿に⼊れたぞ

18. 背景
さっそくニコ⽣⾒るために
コメビュ⼊れるぞ〜

19. 背景
ん？ちょっと待って
ないやん
(※厳密にはあるが，なんか⼊れるのがだるそうだった)

20. 背景
コメビュ 作り⽅ [検索]

21. 背景

22. 背景
理想のコメビュが
なければ作れば
いいじゃない

23. できたもの comelon

24. これから，
こだわった点と
アーキテクチャに
触れていきます

25. 2. 構成

26. Layout
Header
Footer
Body
Timeline of comment

27. Layout
○ Header
○ Footer
live id form connect
button
configuration
button
comment form submit
comment
184
toggle

28. System Constitution
○ Language : javascript
○ NicoLiveEngine : 59naga/nicolive
○ Framework : github/electron
○ Architecture : facebook/flux
○ Template : facebook/React.js
○ Bundler : webpack/webpack
○ Transpile : babel/babel
○ Unit Test, : mocha
○ e2e Test : nightmare

29. ○ Language : javascript
○ NicoLiveEngine : 59naga/nicolive
○ Framework : github/electron
○ Architecture : facebook/flux
○ Template : facebook/React.js
○ Bundler : webpack/webpack
○ Transpile : babel/babel
○ Unit Test, : mocha
○ e2e Test : nightmare
System Constitution
Summarizing the above, I made a desktop
application with Web technology.

30. Why using React not jQuery ?
○ Useful Diff rendering API
React compares to previous and next state.
From there, draw a minimum amount of drawing.
If you do this with jQuery it will be very hard.
○ React is minimum
jQuery contain many function: Promise, ajax, etc…
But currently mainstream is combining
small libraries.

31. Facebook/flux
An application architecture for React utilizing
a unidirectional data flow.

32. Facebook/flux
An application architecture for React utilizing
a unidirectional data flow.
Flux is unidirectional data flow
contain use observer pattern.

34. What advantage?
○ Manage of state outside View Component
・ Decrease complex of Component
・ The role becomes clear
○ increase debug ability
・ Because, split layer by role

35. Example

36. 3. 現状と課題

37. 現状と課題
○ 棒読み
・ コメント量が多いとき読み上げが詰まる
・ 誤った読み上げが多い
○ コメビュ
・ 王手放送主や，弾幕でパフォーマンスの問題
・ 縦長にするとコメントフォームが小さい
・ コテハン記録できていない
・ 表示できるコメントの数がすくない

38. やりたいことと
・ コメント量に応じた読み上げ速度の動的変更
・ 音声再生エンジンをセレクタブルに
・ 辞書機能の作成
・ パフォーマンスチューニング
・ UI改善
・ コテハン記録
・ ニコ生エンジンの変更
nicolive -> nagome

39. まとめ
○ コメビュを作って js 力を手にした
・ いまでは，自分の中で一番実装速度が早い言語に
○ コメビュを通してアーキテクチャ
を考えるようになった
・ Flux が与えた僕への影響は大きい
○ ニコ生視聴者エンジニアは
コメントビューアを作成するべき

40. comelon-v2 開発開始 ！
○ Flux から Redux へ
https://github.com/MaxMEllon/comelon-v2