Quiznowを支える技術 #yapcasia

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

自己紹介
2

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

この前テレビに出た
https://www.youtube.com/watch?v=LS-0-
MmX9OM#t=5m30s
4

orz
5

今日の話
6

QuizNow is 何
7

コンセプト
8

9 http://omocoro.jp/kiji/2633/

12
http://honto.jp/netstore/pd-book_02705279.html

13
http://honto.jp/netstore/pd-book_02705279.html

14

15

QuizNowの機能とか
16

17
Quiz Community

18
Quiz Community

QuizしてCommunityで語る
19
Quiz Community
慣れ合いに飽きたら競い合う

みんなで遊んでみよう
20

Perlに関するクイズ作ったー
https://quiznow.me/quiz_share/show?ab=1&&quiz_id=83316&timer_num=100
21

秀逸なスレ
22
http://quiznow.me/community/topic/6/board/268/

秀逸なスレ
23
http://quiznow.me/community/topic/15/board/23/

中身
24

25
Node.js
(socket.io)
Perl
(Amon2)

26
Node.js
(socket.io)
Perl
それぞれのコンポー(Aネmonン2) トで
それぞれの戦いがある。

27
Node.js
(socket.io)
Perl
(Amon2)
client side

ネイティブアプリ
28

29
エンジニアデザイナ

30
エンジニアデザイナ

イメージ共有できてないと辛い
31
エンジニアデザイナエンジニアとデザイナ間で
QuizNow

32

33
静止画だけじゃなくて
動画にして動きまで共有する

34
エンジニアデザイナなるべく正確に意図を
伝えるように工夫

35
コミュニケーションミスによる
手エ戻ンりジニをア防ぎ、アデセザッイトナ
を
ムダにしない仕組み

ブラウザアプリ
36

Look & Feel はネイティブアプ
リの方が上
Webでインストールレスでサクッ
とプレイ出来たほうが人にリーチ
しやすい
37

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

39

40
先行実装されてる
アプリ版と合わせる

41

42
なめらかにストレス無く

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

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

45

46

とはいえ
47

全部できてから確認するわけ
にも行かない。。。
48

改善点
49

 サーバーレスでクライアントを実装できるよ
うにする
50

!! stubcell !!
51

yamlの定義ファイル書くだけ
 stubcellでスタブを作って開発
52
Stubcell♡

53
Stubcell♡
最終的にこの定義ファイルが
API仕様書となりコードに記録が残る

54
Stubcell♡
最終的にこの定義ファイルが
API仕様書となりコードに記録が残る

開発速度を上げて
改善効率を上げる
55

56
Node.js
(socket.io)
Perl
(Amon2)
server side

Node.js / Perl
57

Quizは基本的に早押し形式
58

HTTPをPOSTする際の
コネクションを繋ぎ直す
ミリ秒が惜しい
59

60
Server
解答送信
結果受信
解答送信
結果受信
遅い

Use the WebSocket Luke
61

62
Node.js
(socket.io)
一つの接続だけで解答と結果を送信
速い!
解答送信
結果受信

63
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
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
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
vs 対戦マッチのサーバー
を教える
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
を教える
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
を教える
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

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

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

最後に
72

73

74

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

Quiznowを支える技術 #yapcasia

More Related Content

What's hot (20)

Similar to Quiznowを支える技術 #yapcasia (20)

Quiznowを支える技術 #yapcasia