Slide 1

Slide 1 text

Vue.js + Firebaseで作るリアルタイム アンケート
 ZOZOテクノロジーズMeetup #10 for Frontend Engineer
 株式会社ZOZOテクノロジーズ
 開発部 安藤 正人
 Copyright © ZOZO Technologies, Inc.

Slide 2

Slide 2 text

© ZOZO Technologies, Inc. 株式会社ZOZOテクノロジーズ 開発部
 安藤 正人
 アパレル販売
 ↓
 受注web制作会社
 ↓
 ZOZOグローバル事業部
 ↓
 ZOZOTOWN開発部(検索改善チーム)
 
 
 2 プロフィール

Slide 3

Slide 3 text

© ZOZO Technologies, Inc. 先日、ZOZOTOWNに出店いただいているブランド様655社1206名の 方にお集まり頂いただき
 日頃の感謝とブランドの皆様と共に創っていきたい未来についての 共有を目的とした
 ZOZOTOWN Brand Conference 2019というカンファレンスを開催し ました。
 
 
 
 3 ZOZOTOWN Brand Conference 2019

Slide 4

Slide 4 text

© ZOZO Technologies, Inc. 4 その中の一コンテンツとして
 リアルタイムアンケートを実施したので
 その実装方法の一部を紹介します。


Slide 5

Slide 5 text

© ZOZO Technologies, Inc. 
 詳しくは
 
 https://techblog.zozo.com/entry/firebase-realtime-questionnaire
 
 
 5 実はこのアンケート使用するの 2回目なんです。

Slide 6

Slide 6 text

© ZOZO Technologies, Inc. ● 技術選定理由
 ● 各画面について
 ● Cloud Firestoreのデータ構造
 ● FirestoreとVuex Storeの連携
 ● 実装を通して思ったこと
 ● 今後の改善点
 6 Vue.js + Firebaseで作るリアルタイムアンケートの実装方法 今日のテーマ

Slide 7

Slide 7 text

© ZOZO Technologies, Inc. 
 
 7 ● Firebase ○ 手軽にリアルタイムリスナーが使用できる(Firestore) ○ この規模なら無料枠(Sparkプラン)で収まりそう ○ 手軽にホスティングが可能
 ● Vue.js
 ○ 他のフレームワークより学習コストが低い ○ その分スピーディーに開発ができそう ○ データ駆動設計 + Tweenライブラリ = 状態アニメーションが容易に実装可能
 技術選定理由

Slide 8

Slide 8 text

© ZOZO Technologies, Inc. 
 
 8 各画面について


Slide 9

Slide 9 text

© ZOZO Technologies, Inc. 9 各画面について
 スタンバイ画面 回答中の画面 回答締切画面 User画面 質問内容は非公開のため画像を加工しています

Slide 10

Slide 10 text

© ZOZO Technologies, Inc. 10 各画面について
 回答中の画面 結果画面 Screen画面 質問内容は非公開のため画像を加工しています

Slide 11

Slide 11 text

© ZOZO Technologies, Inc. 11 各画面について
 Admin画面 質問内容は非公開のため画像を加工しています

Slide 12

Slide 12 text

© ZOZO Technologies, Inc. 
 
 12 Cloud Firestoreのデータ構造

Slide 13

Slide 13 text

© ZOZO Technologies, Inc. 
 
 13 Cloud Firestoreのデータ構造
 


Slide 14

Slide 14 text

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


Slide 15

Slide 15 text

© 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の連携


Slide 16

Slide 16 text

© 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

Slide 17

Slide 17 text

© ZOZO Technologies, Inc. 
 
 17 実装を通して思ったこと

Slide 18

Slide 18 text

© ZOZO Technologies, Inc. 18 ● 自身によるサーバ構築が不要、フロントエンドの知識のみでリアルタイムリスナーを使用したア プリケーションが作成できる
 ● 参加規模にもよるが(1000人位のアンケートなら) 基本無料(Firebase Spark プラン)でアプリ ケーションが作成できる
 ● 充実した日本語ドキュメント + 単一ファイルコンポーネント(.vue)で学習コストが低いうえ開発ス ピードが爆速
 ● Vue.js(データ駆動設計) + TweenMaxは状態のトランジション制御が楽に行えるし、ロジックとア ニメーションコードを分離しやすい
 
 実装を通して思ったこと
 


Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

© ZOZO Technologies, Inc. 
 
 20 ご静聴ありがとうございました!


Slide 21

Slide 21 text

No content