YAPCで話したQuizNowを支える技術の話です。

1. DeNA Co., Ltd.
Yosuke Furukawa
QuizNowを支える技術
Copyright (C) DeNA Co.,Ltd. All Rights Reserved.
1

2. Copyright (C) DeNA Co.,Ltd. All Rights Reserved.
自己紹介
2

3. Copyright (C) DeNA Co.,Ltd. All Rights Reserved.
自己紹介
 古川陽介（ふるかわようすけ）
 HN: @yosuke_furukawa
 QuizNow開発
 Node.js コンサル
 主な業務: にぎやかし、ムードメーカー
 肩書(愛称): 会長
 日本Node.jsユーザーグループ代表
3

4. Copyright (C) DeNA Co.,Ltd. All Rights Reserved.
この前テレビに出た
https://www.youtube.com/watch?v=LS-0-
MmX9OM#t=5m30s
4

5. Copyright (C) DeNA Co.,Ltd. All Rights Reserved.
orz
5

6. Copyright (C) DeNA Co.,Ltd. All Rights Reserved.
今日の話
6

7. Copyright (C) DeNA Co.,Ltd. All Rights Reserved.
QuizNow is 何
7

8. Copyright (C) DeNA Co.,Ltd. All Rights Reserved.
コンセプト
8

9. 9 http://omocoro.jp/kiji/2633/
Copyright (C) DeNA Co.,Ltd. All Rights Reserved.

10. 10 http://omocoro.jp/kiji/2633/
Copyright (C) DeNA Co.,Ltd. All Rights Reserved.

11. 11 http://omocoro.jp/kiji/2633/
Copyright (C) DeNA Co.,Ltd. All Rights Reserved.

12. 12
http://honto.jp/netstore/pd-book_02705279.html
Copyright (C) DeNA Co.,Ltd. All Rights Reserved.

13. 13
http://honto.jp/netstore/pd-book_02705279.html
Copyright (C) DeNA Co.,Ltd. All Rights Reserved.

14. 14
Copyright (C) DeNA Co.,Ltd. All Rights Reserved.

15. 15
Copyright (C) DeNA Co.,Ltd. All Rights Reserved.

16. Copyright (C) DeNA Co.,Ltd. All Rights Reserved.
QuizNowの機能とか
16

17. Copyright (C) DeNA Co.,Ltd. All Rights Reserved.
QuizNowの機能とか
17
Quiz Community

18. Copyright (C) DeNA Co.,Ltd. All Rights Reserved.
QuizNowの機能とか
18
Quiz Community

19. QuizしてCommunityで語る
Copyright (C) DeNA Co.,Ltd. All Rights Reserved.
QuizNowの機能とか
19
Quiz Community
慣れ合いに飽きたら競い合う

20. みんなで遊んでみよう
20
Copyright (C) DeNA Co.,Ltd. All Rights Reserved.

21. Copyright (C) DeNA Co.,Ltd. All Rights Reserved.
Perlに関するクイズ作ったー
https://quiznow.me/quiz_share/show?ab=1&&quiz_id=83316&timer_num=100
https://quiznow.me/quiz_share/show?ab=1&&quiz_id=83310&timer_num=100
https://quiznow.me/quiz_share/show?ab=1&&quiz_id=83322&timer_num=100
https://quiznow.me/quiz_share/show?ab=1&&quiz_id=83324&timer_num=100
21

22. Copyright (C) DeNA Co.,Ltd. All Rights Reserved.
秀逸なスレ
22
http://quiznow.me/community/topic/6/board/268/

23. Copyright (C) DeNA Co.,Ltd. All Rights Reserved.
秀逸なスレ
23
http://quiznow.me/community/topic/15/board/23/

24. Copyright (C) DeNA Co.,Ltd. All Rights Reserved.
中身
24

25. 25
Copyright (C) DeNA Co.,Ltd. All Rights Reserved.
Node.js
(socket.io)
Perl
(Amon2)

26. 26
Copyright (C) DeNA Co.,Ltd. All Rights Reserved.
Node.js
(socket.io)
Perl
それぞれのコンポー(Aネmonン2) トで
それぞれの戦いがある。

27. 27
Copyright (C) DeNA Co.,Ltd. All Rights Reserved.
Node.js
(socket.io)
Perl
(Amon2)
client side

28. ネイティブアプリ
28
Copyright (C) DeNA Co.,Ltd. All Rights Reserved.

29. 29
エンジニアデザイナ
Copyright (C) DeNA Co.,Ltd. All Rights Reserved.

30. 30
エンジニアデザイナ
Copyright (C) DeNA Co.,Ltd. All Rights Reserved.

31. イメージ共有できてないと辛い
31
エンジニアデザイナエンジニアとデザイナ間で
Copyright (C) DeNA Co.,Ltd. All Rights Reserved.
QuizNow

32. 32
Copyright (C) DeNA Co.,Ltd. All Rights Reserved.

33. 33
静止画だけじゃなくて
動画にして動きまで共有する
Copyright (C) DeNA Co.,Ltd. All Rights Reserved.

34. 34
エンジニアデザイナなるべく正確に意図を
伝えるように工夫
Copyright (C) DeNA Co.,Ltd. All Rights Reserved.

35. 35
コミュニケーションミスによる
手エ戻ンりジニをア防ぎ、アデセザッイトナ
を
Copyright (C) DeNA Co.,Ltd. All Rights Reserved.
ムダにしない仕組み

36. Copyright (C) DeNA Co.,Ltd. All Rights Reserved.
ブラウザアプリ
36

37. Look & Feel はネイティブアプ
リの方が上
Webでインストールレスでサクッ
とプレイ出来たほうが人にリーチ
しやすい
37
Copyright (C) DeNA Co.,Ltd. All Rights Reserved.

38. Look & Feel はネイティブアプ
リの方が上
Webでインストールレスでサクッ
とプレイ出来たほうが人にリーチ
しやすい
38
最近流行りのハイブリッドアプリ
Copyright (C) DeNA Co.,Ltd. All Rights Reserved.

39. 39
Copyright (C) DeNA Co.,Ltd. All Rights Reserved.

40. 40
先行実装されてる
アプリ版と合わせる
Copyright (C) DeNA Co.,Ltd. All Rights Reserved.

41. 41
Copyright (C) DeNA Co.,Ltd. All Rights Reserved.

42. 42
なめらかにストレス無く
Copyright (C) DeNA Co.,Ltd. All Rights Reserved.

43. Full Single Page Application
⁃ backbone.js + marionette
プリロードでアセットを読み込む
⁃ 初期ロードでキャッシュする
減色処理、圧縮処理で軽くする
Copyright (C) DeNA Co.,Ltd. All Rights Reserved.
⁃ Gruntでの自動化
43

44. Full Single Page Application
⁃ backbone.js + marionette
プリロードでアセットを読み込む
⁃ 初期ロードでキャッシュする
減色処理、圧縮処理で軽くする
Copyright (C) DeNA Co.,Ltd. All Rights Reserved.
⁃ Gruntでの自動化
44
PCとかで見てると気づかない内に
重くなってたりする。

45. 45
Copyright (C) DeNA Co.,Ltd. All Rights Reserved.

46. 46
Copyright (C) DeNA Co.,Ltd. All Rights Reserved.

47. Copyright (C) DeNA Co.,Ltd. All Rights Reserved.
とはいえ
47

48. 全部できてから確認するわけ
にも行かない。。。
48
Copyright (C) DeNA Co.,Ltd. All Rights Reserved.

49. Copyright (C) DeNA Co.,Ltd. All Rights Reserved.
改善点
49

50.  サーバーレスでクライアントを実装できるよ
Copyright (C) DeNA Co.,Ltd. All Rights Reserved.
うにする
50

51. Copyright (C) DeNA Co.,Ltd. All Rights Reserved.
!! stubcell !!
51

52. yamlの定義ファイル書くだけ
Copyright (C) DeNA Co.,Ltd. All Rights Reserved.
 stubcellでスタブを作って開発
52
Stubcell♡

53. yamlの定義ファイル書くだけ
Copyright (C) DeNA Co.,Ltd. All Rights Reserved.
 stubcellでスタブを作って開発
53
Stubcell♡
最終的にこの定義ファイルが
API仕様書となりコードに記録が残る

54. yamlの定義ファイル書くだけ
Copyright (C) DeNA Co.,Ltd. All Rights Reserved.
 stubcellでスタブを作って開発
54
Stubcell♡
最終的にこの定義ファイルが
API仕様書となりコードに記録が残る

55. 開発速度を上げて
改善効率を上げる
55
Copyright (C) DeNA Co.,Ltd. All Rights Reserved.

56. 56
Copyright (C) DeNA Co.,Ltd. All Rights Reserved.
Node.js
(socket.io)
Perl
(Amon2)
server side

57. Copyright (C) DeNA Co.,Ltd. All Rights Reserved.
Node.js / Perl
57

58. Quizは基本的に早押し形式
58
Copyright (C) DeNA Co.,Ltd. All Rights Reserved.

59. HTTPをPOSTする際の
コネクションを繋ぎ直す
Copyright (C) DeNA Co.,Ltd. All Rights Reserved.
ミリ秒が惜しい
59

60. 60
Server
Copyright (C) DeNA Co.,Ltd. All Rights Reserved.
解答送信
結果受信
解答送信
結果受信
遅い

61. Use the WebSocket Luke
61
Copyright (C) DeNA Co.,Ltd. All Rights Reserved.

62. 62
Node.js
(socket.io)
一つの接続だけで解答と結果を送信
Copyright (C) DeNA Co.,Ltd. All Rights Reserved.
速い!
解答送信
結果受信

63. 63
Copyright (C) DeNA Co.,Ltd. All Rights Reserved.
Node.js
(socket.io)
Node.js
(socket.io)
Node.js
(socket.io)
Node.js
(socket.io)
Node.js
(socket.io)
死活チェック
DB
Perl
(Amon2)
vs

64. 64
Copyright (C) DeNA Co.,Ltd. All Rights Reserved.
Node.js
(socket.io)
Node.js
(socket.io)
Node.js
(socket.io)
Node.js
(socket.io)
Node.js
(socket.io)
死活チェック
DB
Perl
(Amon2)
起動しているサーバー
をDBに格納
vs

65. 65
Copyright (C) DeNA Co.,Ltd. All Rights Reserved.
Node.js
(socket.io)
Node.js
(socket.io)
Node.js
(socket.io)
Node.js
(socket.io)
Node.js
(socket.io)
死活チェック
DB
Perl
(Amon2)
起動しているサーバー
をDBに格納
生きているサーバーを
取りに行く
vs

66. 66
vs 対戦マッチのサーバー
を教える
Copyright (C) DeNA Co.,Ltd. All Rights Reserved.
Node.js
(socket.io)
Node.js
(socket.io)
Node.js
(socket.io)
Node.js
(socket.io)
Node.js
(socket.io)
死活チェック
DB
Perl
(Amon2)
起動しているサーバー
をDBに格納
生きているサーバーを
取りに行く

67. 67
vs 対戦マッチのサーバー
を教える
Copyright (C) DeNA Co.,Ltd. All Rights Reserved.
Node.js
(socket.io)
Node.js
(socket.io)
Node.js
(socket.io)
Node.js
(socket.io)
Node.js
(socket.io)
死活チェック
DB
Perl
(Amon2)
起動しているサーバー
をDBに格納
生きているサーバーを
取りに行く
Socket.ioサーバー
で対戦

68. 68
vs 対戦マッチのサーバー
を教える
Copyright (C) DeNA Co.,Ltd. All Rights Reserved.
Node.js
(socket.io)
Node.js
(socket.io)
Node.js
(socket.io)
Node.js
(socket.io)
Node.js
(socket.io)
死活チェック
DB
Perl
(Amon2)
起動しているサーバー
をDBに格納
生きているサーバーを
取りに行く
Socket.ioサーバー
で対戦

69. Copyright (C) DeNA Co.,Ltd. All Rights Reserved.
まとめ
69

70. Copyright (C) DeNA Co.,Ltd. All Rights Reserved.
まとめ
 QuizNowはクイズで競いながら好きなものを思う存分語るための場所
 工夫したところ
 動画によりデザイナーとのコミュニケーションミスを無くす
 WebのSingle Page Applicationにしつつ高速化を行い、
ネイティブアプリとWebの遜色を無くす
 WebSocketでクイズの早押し要素をサポート
70

71. Copyright (C) DeNA Co.,Ltd. All Rights Reserved.
まとめ
 QuizNowはクイズで競いながら好きなものを思う存分語るための場所
 クイズを解いてコミュニティで語り
 コミュニティで慣れ合いに飽きたらクイズで殴りあう
 動画によりデザイナーとのコミュニケーションミスを無くす
 WebのSingle Page ApplicationでネイティブアプリとWebの遜色を無く
す
 WebSocketでクイズの早押し要素をサポート
71

72. Copyright (C) DeNA Co.,Ltd. All Rights Reserved.
最後に
72

73. 73
Copyright (C) DeNA Co.,Ltd. All Rights Reserved.

74. 74
Copyright (C) DeNA Co.,Ltd. All Rights Reserved.

75. Copyright (C) DeNA Co.,Ltd. All Rights Reserved.
お約束
 DeNAでは
 優秀なPerl Monger
 クールなNoder
 オーサムなJSer
 グレートなデザイナー
 を募集してます！僕に一言声をかけるか
 http://dena.com/recruit/career_recruit/ まで！
75