Vue.js + Firebaseで作るリアルタイムアンケート / real time questionnaire

Transcript

1. Vue.js + Firebaseで作るリアルタイム アンケート
 ZOZOテクノロジーズMeetup #10 for Frontend Engineer
 株式会社ZOZOテクノロジーズ
 開発部 安藤 正人
 Copyright © ZOZO Technologies, Inc.
2. © ZOZO Technologies, Inc. 株式会社ZOZOテクノロジーズ　開発部
 安藤 正人
 アパレル販売
 ↓
 受注web制作会社
 ↓
 ZOZOグローバル事業部
 ↓
 ZOZOTOWN開発部（検索改善チーム）
 
 
 2 プロフィール
3. © ZOZO Technologies, Inc. 先日、ZOZOTOWNに出店いただいているブランド様655社1206名の 方にお集まり頂いただき
 日頃の感謝とブランドの皆様と共に創っていきたい未来についての 共有を目的とした
 ZOZOTOWN Brand Conference 2019というカンファレンスを開催し ました。
 
 
 
 3 ZOZOTOWN Brand Conference 2019
4. © ZOZO Technologies, Inc. 4 その中の一コンテンツとして
 リアルタイムアンケートを実施したので
 その実装方法の一部を紹介します。

5. © ZOZO Technologies, Inc. 
 詳しくは
 
 https://techblog.zozo.com/entry/firebase-realtime-questionnaire
 
 
 5 実はこのアンケート使用するの 2回目なんです。
6. © ZOZO Technologies, Inc. • 技術選定理由
 • 各画面について
 • Cloud Firestoreのデータ構造
 • FirestoreとVuex Storeの連携
 • 実装を通して思ったこと
 • 今後の改善点
 6 Vue.js + Firebaseで作るリアルタイムアンケートの実装方法 今日のテーマ
7. © ZOZO Technologies, Inc. 
 
 7 • Firebase ◦ 手軽にリアルタイムリスナーが使用できる（Firestore） ◦ この規模なら無料枠（Sparkプラン）で収まりそう ◦ 手軽にホスティングが可能
 • Vue.js
 ◦ 他のフレームワークより学習コストが低い ◦ その分スピーディーに開発ができそう ◦ データ駆動設計 + Tweenライブラリ = 状態アニメーションが容易に実装可能
 技術選定理由
8. © ZOZO Technologies, Inc. 
 
 8 各画面について

9. © ZOZO Technologies, Inc. 9 各画面について
 スタンバイ画面 回答中の画面 回答締切画面 User画面 質問内容は非公開のため画像を加工しています
10. © ZOZO Technologies, Inc. 10 各画面について
 回答中の画面 結果画面 Screen画面 質問内容は非公開のため画像を加工しています
11. © ZOZO Technologies, Inc. 11 各画面について
 Admin画面 質問内容は非公開のため画像を加工しています
12. © ZOZO Technologies, Inc. 
 
 12 Cloud Firestoreのデータ構造
13. © ZOZO Technologies, Inc. 
 
 13 Cloud Firestoreのデータ構造
 

14. © ZOZO Technologies, Inc. 
 
 14 FirestoreとVuex Storeの連携 

15. © ZOZO Technologies, Inc. 
 
 15 { "status": { "current": { "questionIndex": 0, "deadlineTimeStamp": 1560487021599 } }, "votes": { "00mLbY71Rm88Nz11gxAA": { "questionIndex": 0, "selectedAnswerIndex": 0 }, "021tVyGd46luzFmrkeQp": { "questionIndex": 0, "selectedAnswerIndex": 1 }, "02GH3o3FUuS110IO5ZFX": { "questionIndex": 1, "selectedAnswerIndex": 1 },... } } コンポーネント内で扱いやすいように Vuex Storeとの連携の際に データ構造を変換 → statusCollection → statusModule votesCollection → questionModule Cloud Firestore
 { status: { currentQuestionIndex: 0, deadlineTimeStamp: 1560487021599 }, question: { questions: [ { text: '質問テキスト1', answers: [ { votesCount: 0, text: 'YES' }, { votesCount: 0, text: 'NO' } ] }... ] } } Vuex Store
 FirestoreとVuex Storeの連携

16. © ZOZO Technologies, Inc. 
 
 16 import { VuexModule, Action, Mutation, Module, getModule } from 'vuex-module-decorators'; import store from '@/store/index'; import firestore from '@/firestore'; @Module({ dynamic: true, store, name: 'question', namespaced: true }) class Question extends VuexModule { // state questions = initializeQuestions();// stateの初期化を行う // mutation @Mutation updateQuestions(vote) { this.questions[vote.questionIndex].answers[vote.selectedAnswerIndex].votesCount++; } // actions @Action observeVotes() { firestore.collection('votes').onSnapshot((snapshot) => { snapshot.docChanges().forEach((change) => { const vote = change.doc.data(); this.updateQuestions(vote); }); }); } } export const questionStore = getModule(Question); questionModule 
 FirestoreとVuex Storeの連携
 vuex-module-decoratorsを使用 • クラス形式で記述できる • 型補完、インテリセンスが効く • thisを使ってお互いを呼び出せる メンバ変数 → State @Mutation + メンバ関数 → Mutation @Action + メンバ関数 → Action
17. © ZOZO Technologies, Inc. 
 
 17 実装を通して思ったこと
18. © ZOZO Technologies, Inc. 18 • 自身によるサーバ構築が不要、フロントエンドの知識のみでリアルタイムリスナーを使用したア プリケーションが作成できる
 • 参加規模にもよるが(1000人位のアンケートなら) 基本無料(Firebase Spark プラン)でアプリ ケーションが作成できる
 • 充実した日本語ドキュメント + 単一ファイルコンポーネント(.vue)で学習コストが低いうえ開発ス ピードが爆速
 • Vue.js(データ駆動設計) + TweenMaxは状態のトランジション制御が楽に行えるし、ロジックとア ニメーションコードを分離しやすい
 
 実装を通して思ったこと
 

19. © ZOZO Technologies, Inc. 19 • アンケート開始のタイミングや結果発表画面のへの切り替えを登壇 者のクリッカーでコントロールしたい
 
 • アンケートの内容をその場で決定し反映したい
 
 • カウントダウン中にsoundをつけたい
 
 今後の改善点（イベント運営チームからの要望）
20. © ZOZO Technologies, Inc. 
 
 20 ご静聴ありがとうございました！