quiznowを支える技術 #yapcasia

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

1

QuizNow を支える技術

DeNA Co., Ltd.

Yosuke Furukawa

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

2

自己紹介

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

3

自己紹介

古川　陽介　（ふるかわ　ようすけ） HN: @yosuke_furukawa

QuizNow 開発 Node.js コンサル 主な業務 : にぎやかし、ムードメーカー 肩書 ( 愛称 ): 会長

日本 Node.js ユーザーグループ代表

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

4

この前テレビに出た

https://www.youtube.com/watch?v=LS-0-MmX9OM#t=5m30s

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

5

orz

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

6

今日の話

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

7

QuizNow is 何

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

8

コンセプト

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

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

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

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

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

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

知ってることは饒舌になる

し、誰よりも詳しくなろう

とする習性がある

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

12

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

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

13

( ﾟＡﾟ;) ｺﾞｸﾘ

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

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

14

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

15

クイズで競いながら好きなも

のを思う存分語るための場所

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

16

QuizNow の機能とか

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

17

QuizNow の機能とか

Quiz Community

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

18

QuizNow の機能とか

Quiz Community

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

19

QuizNow の機能とか

Quiz Community

Quiz して Community で語る

慣れ合いに飽きたら競い合う

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

20

みんなで遊んでみよう

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

21

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

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

22

秀逸なスレ

http://quiznow.me/community/topic/6/board/268/

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

23

秀逸なスレ

http://quiznow.me/community/topic/15/board/23/

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

24

中身

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

25

Node.js(socket.io)

Perl(Amon2)

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

26

Node.js(socket.io)

Perl(Amon2)それぞれのコンポーネントで

それぞれの戦いがある。

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

27

Node.js(socket.io)

Perl(Amon2)

client side

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

28

ネイティブアプリ

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

29

エンジニア デザイナ

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

30

エンジニア デザイナ

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

31

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

い

QuizNow

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

32

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

33

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

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

34

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

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

35

エンジニア デザイナコミュニケーションミスによる

手戻りを防ぎ、アセットをムダにしない仕組み

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

36

ブラウザアプリ

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

37

Look & Feel は ネイティブアプリの方が上

Web でインストールレスでサクッとプレイ出来たほうが人にリーチしやすい

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

38

Look & Feel は ネイティブアプリの方が上

Web でインストールレスでサクッとプレイ出来たほうが人にリーチしやすい

最近流行りのハイブリッドアプリ

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

39

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

40

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

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

41

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

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

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

43

Full Single Page Application⁃ backbone.js + marionette

プリロードでアセットを読み込む⁃ 初期ロードでキャッシュする

減色処理、圧縮処理で軽くする⁃ Grunt での自動化

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

44

Full Single Page Application⁃ backbone.js + marionette

プリロードでアセットを読み込む⁃ 初期ロードでキャッシュする

減色処理、圧縮処理で軽くする⁃ Grunt での自動化PC とかで見てると気づかない内に

重くなってたりする。

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

45

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

46

定期的に端末でチェックして回避する

しか無い、地道に勝る近道なし

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

47

とはいえ

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

48

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

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

49

改善点

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

50

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

No servers

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

51

!! stubcell !!

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

52

stubcell でスタブを作って開発

Stubcell♡

yaml の定義ファイル書くだけ

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

53

stubcell でスタブを作って開発

Stubcell♡

yaml の定義ファイル書くだけ

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

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

54

stubcell でスタブを作って開発

Stubcell♡

yaml の定義ファイル書くだけ

API ファーストな設計

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

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

55

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

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

56

Node.js(socket.io)

Perl(Amon2)

server side

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

57

Node.js / Perl

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

58

Quiz は基本的に早押し形式

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

59

HTTP を POST する際のコネクションを繋ぎ直す

ミリ秒が惜しい

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

60

Server

遅い

解答送信

結果受信

解答送信

結果受信

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

61

Use the WebSocket Luke

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

62

Node.js(socket.io)

一つの接続だけで解答と結果を送信速い !

解答送信

結果受信

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

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

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

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

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

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

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

66

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

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

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 に格納

生きているサーバーを取りに行く

vs 対戦マッチのサーバーを教える

Socket.io サーバーで対戦

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

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 に格納

生きているサーバーを取りに行く

vs 対戦マッチのサーバーを教える

Socket.io サーバーで対戦

自前スケールアウト戦略

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

69

まとめ

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

70

まとめ

QuizNow はクイズで競いながら好きなものを思う存分語るための場所

工夫したところ

動画によりデザイナーとのコミュニケーションミスを無くす

Web の Single Page Application にしつつ高速化を行い、ネイティブアプリと Web の遜色を無くす

WebSocket でクイズの早押し要素をサポート

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

71

まとめ

QuizNow はクイズで競いながら好きなものを思う存分語るための場所

クイズを解いてコミュニティで語り

コミュニティで慣れ合いに飽きたらクイズで殴りあう

動画によりデザイナーとのコミュニケーションミスを無くす

Web の Single Page Application でネイティブアプリと Web の遜色を無くす

WebSocket でクイズの早押し要素をサポート

QuizNow楽しい！！！

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

72

最後に

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

73

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

74

明日はあやか Now!!!

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

75

お約束

DeNA では

優秀な Perl Monger

クールな Noder

オーサムな JSer

グレートなデザイナー

を募集してます！僕に一言声をかけるか

http://dena.com/recruit/career_recruit/ まで！