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
( ゚A゚;) ゴクリ
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/ まで!