Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
@maxmellon
2016.11.26 @ 「首領(Red	Coder)への道」 勉強会という名のオフ会
コメントビュアーを
作った話
⽬次
0.	自己紹介
1. コメビュを作った背景
2. コメビュの構成
3. 現状と課題
0. ⾃⼰紹介
はじめまして
mexmellonと申します
今⽇はうどん県から
きました
基本情報
○ 京都府宇治市 出身
響け!ユーフォニアム とか平等院とか
抹茶はすきです
○ 現在は香川県
うどん好きです
最大 うどんストリーク は29 です
○ 22歳 学生
エンジニアとしての基本情報
○ いつも使ってる開発用ツール
○ Vim	8.0	(CLPUM)		:	エディタ
○ tmux 2.2																	:	ターミナルマルチプレクサ
○ Zsh 5.1.1													...
個⼈的に好きなやつ
○ うどん
個⼈的に好きなやつ
○ 和太鼓
個⼈的に好きなやつ
○ ニコ生
主なプロダクト
⾃慢
⼤切に考えてること
○ 日々の努力
コツコツがコツ
Githubの草をモチベーションにしている
今⽇は,
コメビュ作った話
しようとおもう
1. コメントビュアー
作った背景
背景
よっしゃMacを
⼿に⼊れたぞ
背景
さっそくニコ⽣⾒るために
コメビュ⼊れるぞ〜
背景
ん?ちょっと待って
ないやん
(※厳密にはあるが,なんか⼊れるのがだるそうだった)
背景
コメビュ 作り⽅ [検索]
背景
背景
理想のコメビュが
なければ作れば
いいじゃない
できたもの comelon
これから,
こだわった点と
アーキテクチャに
触れていきます
2. 構成
Layout
Header
Footer
Body
Timeline	of	comment
Layout
○ Header
○ Footer
live	id form connect
button
configuration
button
comment	form submit
comment
184
toggle
System Constitution
○ Language													: javascript
○ NicoLiveEngine :			59naga/nicolive
○ Framework									: github/...
○ Language													: javascript
○ NicoLiveEngine :			59naga/nicolive
○ Framework									: github/electron
○ Architect...
Why using React not jQuery ?
○ Useful	Diff	rendering	API
React	compares	to	previous	and	next	state.
From	there,	draw	a	min...
Facebook/flux
An	application	architecture	for	React	utilizing	
a	unidirectional	data	flow.
Facebook/flux
An	application	architecture	for	React	utilizing	
a	unidirectional	data	flow.
Flux	is	unidirectional	data	flo...
What advantage?
○ Manage	of	state	outside	View	Component
・ Decrease	complex	of	Component
・ The	role	becomes	clear
○ increa...
Example
3. 現状と課題
現状と課題
○ 棒読み
・ コメント量が多いとき読み上げが詰まる
・ 誤った読み上げが多い
○ コメビュ
・ 王手放送主や,弾幕でパフォーマンスの問題
・ 縦長にするとコメントフォームが小さい
・ コテハン記録できていない
・ 表示できるコメン...
やりたいことと
・ コメント量に応じた読み上げ速度の動的変更
・ 音声再生エンジンをセレクタブルに
・ 辞書機能の作成
・ パフォーマンスチューニング
・ UI改善
・ コテハン記録
・ ニコ生エンジンの変更
nicolive ->	nagome
まとめ
○ コメビュを作って js 力を手にした
・ いまでは,自分の中で一番実装速度が早い言語に
○ コメビュを通してアーキテクチャ
を考えるようになった
・ Flux が与えた僕への影響は大きい
○ ニコ生視聴者エンジニアは
コメントビュー...
comelon-v2 開発開始 !
○ Flux から Redux	へ
https://github.com/MaxMEllon/comelon-v2
コメントビュアーを作った話
コメントビュアーを作った話
Upcoming SlideShare
Loading in …5
×

コメントビュアーを作った話

306 views

Published on

@ 2015.11.26

Published in: Software
  • Be the first to comment

コメントビュアーを作った話

  1. 1. @maxmellon 2016.11.26 @ 「首領(Red Coder)への道」 勉強会という名のオフ会 コメントビュアーを 作った話
  2. 2. ⽬次 0. 自己紹介 1. コメビュを作った背景 2. コメビュの構成 3. 現状と課題
  3. 3. 0. ⾃⼰紹介
  4. 4. はじめまして mexmellonと申します
  5. 5. 今⽇はうどん県から きました
  6. 6. 基本情報 ○ 京都府宇治市 出身 響け!ユーフォニアム とか平等院とか 抹茶はすきです ○ 現在は香川県 うどん好きです 最大 うどんストリーク は29 です ○ 22歳 学生
  7. 7. エンジニアとしての基本情報 ○ いつも使ってる開発用ツール ○ Vim 8.0 (CLPUM) : エディタ ○ tmux 2.2 : ターミナルマルチプレクサ ○ Zsh 5.1.1 : シェル ○ 好きなプログラミング言語やライブラリ ○ javascript (React.js / Redux) 言語問わず,フロントのほうが好み
  8. 8. 個⼈的に好きなやつ ○ うどん
  9. 9. 個⼈的に好きなやつ ○ 和太鼓
  10. 10. 個⼈的に好きなやつ ○ ニコ生
  11. 11. 主なプロダクト
  12. 12. ⾃慢
  13. 13. ⼤切に考えてること ○ 日々の努力 コツコツがコツ Githubの草をモチベーションにしている
  14. 14. 今⽇は, コメビュ作った話 しようとおもう
  15. 15. 1. コメントビュアー 作った背景
  16. 16. 背景 よっしゃMacを ⼿に⼊れたぞ
  17. 17. 背景 さっそくニコ⽣⾒るために コメビュ⼊れるぞ〜
  18. 18. 背景 ん?ちょっと待って ないやん (※厳密にはあるが,なんか⼊れるのがだるそうだった)
  19. 19. 背景 コメビュ 作り⽅ [検索]
  20. 20. 背景
  21. 21. 背景 理想のコメビュが なければ作れば いいじゃない
  22. 22. できたもの comelon
  23. 23. これから, こだわった点と アーキテクチャに 触れていきます
  24. 24. 2. 構成
  25. 25. Layout Header Footer Body Timeline of comment
  26. 26. Layout ○ Header ○ Footer live id form connect button configuration button comment form submit comment 184 toggle
  27. 27. 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
  28. 28. ○ 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.
  29. 29. 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.
  30. 30. Facebook/flux An application architecture for React utilizing a unidirectional data flow.
  31. 31. Facebook/flux An application architecture for React utilizing a unidirectional data flow. Flux is unidirectional data flow contain use observer pattern.
  32. 32. What advantage? ○ Manage of state outside View Component ・ Decrease complex of Component ・ The role becomes clear ○ increase debug ability ・ Because, split layer by role
  33. 33. Example
  34. 34. 3. 現状と課題
  35. 35. 現状と課題 ○ 棒読み ・ コメント量が多いとき読み上げが詰まる ・ 誤った読み上げが多い ○ コメビュ ・ 王手放送主や,弾幕でパフォーマンスの問題 ・ 縦長にするとコメントフォームが小さい ・ コテハン記録できていない ・ 表示できるコメントの数がすくない
  36. 36. やりたいことと ・ コメント量に応じた読み上げ速度の動的変更 ・ 音声再生エンジンをセレクタブルに ・ 辞書機能の作成 ・ パフォーマンスチューニング ・ UI改善 ・ コテハン記録 ・ ニコ生エンジンの変更 nicolive -> nagome
  37. 37. まとめ ○ コメビュを作って js 力を手にした ・ いまでは,自分の中で一番実装速度が早い言語に ○ コメビュを通してアーキテクチャ を考えるようになった ・ Flux が与えた僕への影響は大きい ○ ニコ生視聴者エンジニアは コメントビューアを作成するべき
  38. 38. comelon-v2 開発開始 ! ○ Flux から Redux へ https://github.com/MaxMEllon/comelon-v2

×