quiznowを支える技術 #yapcasia

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

1

QuizNow を支える技術

DeNA Co., Ltd.

Yosuke Furukawa


2

自己紹介


3

自己紹介

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

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

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


4

この前テレビに出た

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


5

orz


6

今日の話


7

QuizNow is 何


8

コンセプト


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



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

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

とする習性がある


12

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


13

( ﾟＡﾟ;) ｺﾞｸﾘ

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


14


15

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

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


16

QuizNow の機能とか


17


Quiz Community


18


Quiz Community


19


Quiz Community

Quiz して Community で語る

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


20

みんなで遊んでみよう


21

Perl に関するクイズ作ったー

https://quiznow.me/quiz_share/show?ab=1&&quiz_id=83316&timer_num=100















22

秀逸なスレ

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



23

秀逸なスレ




24

中身


25

Node.js(socket.io)

Perl(Amon2)


26

Node.js(socket.io)

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

それぞれの戦いがある。


27

Node.js(socket.io)

Perl(Amon2)

client side


28

ネイティブアプリ


29

エンジニアデザイナ


30

エンジニアデザイナ


31

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

い

QuizNow


32


33

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


34

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


35

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

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


36

ブラウザアプリ


37

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

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


38

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

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

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


39


40

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


41


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


43

Full Single Page Application⁃ backbone.js + marionette

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

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


44

Full Single Page Application⁃ backbone.js + marionette

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

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

重くなってたりする。


45


46

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

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


47

とはいえ


48

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


49

改善点


50

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

No servers


51

!! stubcell !!


52

stubcell でスタブを作って開発

Stubcell♡

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


53


Stubcell♡


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


54


Stubcell♡


API ファーストな設計

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


55

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


56

Node.js(socket.io)

Perl(Amon2)

server side


57

Node.js / Perl


58

Quiz は基本的に早押し形式


59

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

ミリ秒が惜しい


60

Server

遅い

解答送信

結果受信

解答送信

結果受信


61

Use the WebSocket Luke


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)


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)


Perl(Amon2)


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

vs


66

Node.js(socket.io)

Node.js(socket.io)

Node.js(socket.io)

Node.js(socket.io)

Node.js(socket.io)


Perl(Amon2)



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


67

Node.js(socket.io)

Node.js(socket.io)

Node.js(socket.io)

Node.js(socket.io)

Node.js(socket.io)


Perl(Amon2)




Socket.io サーバーで対戦


68

Node.js(socket.io)

Node.js(socket.io)

Node.js(socket.io)

Node.js(socket.io)

Node.js(socket.io)


Perl(Amon2)




Socket.io サーバーで対戦

自前スケールアウト戦略


69

まとめ


70

まとめ

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

工夫したところ

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

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

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


71

まとめ

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

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

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

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

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

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

QuizNow楽しい！！！


72

最後に


73


74

明日はあやか Now!!!


75

お約束

DeNA では

優秀な Perl Monger

クールな Noder

オーサムな JSer

グレートなデザイナー

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

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

quiznowを支える技術 #yapcasia

Technology