アバター着せ替えアプリ開発におけるフロントエンド技術(Vue.js活用事例) #denatechcon

Copyright (C) 2013 DeNA Co.,Ltd. All Rights Reserved.Copyright (C) 2013 DeNA Co.,Ltd. All Rights Reserved.
アバター着せ替えアプリ開発における
フロントエンド技術( Vue.js 活用事例 )
February 10, 2017
Toru Enokido
Keita Sakamoto
Design Strategies Office.
DeNA Co., Ltd.

Copyright (C) 2013 DeNA Co.,Ltd. All Rights Reserved.
自己紹介
デザイン戦略室第一グループ
榎戸徹
2014年入社。
2014年1月〜怪盗ロワイヤルでフロントエンドを担当。
2014年10月〜ヘルスケア事業部でKenCoMのフロントエンドを担当。
2016年5月〜オープンプラットフォーム事業本部でクリエイティブチームのマネージャー

自己紹介
デザイン戦略室第三グループ
坂本啓太
2012年入社。FINAL FANTASY BRIGADE などのブラウザゲームや、
ハッカドールなどのメディアサービスのフロントエンドを担当。
現在、主に新規サービス開発のフロントエンドを担当している。

アジェンダ
■ アバター着せ替えアプリについて
■ フロントエンド技術について

アバター着せ替えアプリ？

Mobage のアバターシステムを活用して、
自由にアバターを作り、
SNS やチャットに投稿できる
海外向けキーボードアプリ
(※2017年３月リリース予定)
アバター着せ替えアプリ？

海外向け？

日本のIPコンテンツは海外で引きがある
きっかけ

日本のIPコンテンツは海外で引きがある
きっかけ
● 日本のMANGA・アニメの普及
● 外国人観光客による聖地巡礼
● 細分化されたジャンルと多様性
● 深いテーマ

MobageはIP、Non IP含め
アバターアセットがいくつも存在
きっかけ

ユーザ自身がアバターを使ったスタンプを
気軽に作って使えれば
新たな体験を提供できるのでは？
きっかけ

プロジェクト要件

■ アプリとして出す

⁃ 中身は WebView（キーボード以外）のハイブリッドアプリ

• アプリ的なUXが求められる
• SPA (シングルページアプリケーション)

• アプリ的なUXが求められる
• SPA (シングルページアプリケーション)
■ アイテムを選ぶとアバターが着替えられる
⁃ シームレスな動きの実現

どうやってつくろう？

どうやってつくろう？
いくつかの JSフレームワークを検討した結果
Vue.js を採用

Vue.js？

Vue.js？
■ 小〜中規模プロジェクトのため、フルスタックのフレームワーク
ではなく必要に応じて拡張できるほうが良い

Vue.js？
■ 公式のルーティングライブラリの vue-router があることも
大きかった

Vue.js？
大きかった
■ 社内で Vue.js の導入事例があった

Vue.js？
大きかった
■ 動作・サイズともに軽い

Vue.js？
大きかった
■ 動作・サイズともに軽い
■ 学習コストの低さ(社内の知見・日本語ドキュメント)

Vue.js 活用法

Vue.js 活用法 1
component

Vue.js 活用法 1
component とは？
再利用可能なコードの
カプセル化

Vue.js 活用法 1
component
■ コンポーネント化したアイテム
v-for でループ
※ 開発中の画面です

Vue.js 活用法 1
component
■ コンポーネント化したアイテム
v-for でループ
■ 選択したアイテムのIDをアバターの
src に追加するとアバターが変化
<template>
<div v-touch:tap="select(item)">
<img :src="itemPath + item.disFile">

<div class="item-check"
:class="{ 'is-active': item.itemID === itemsObj[item.itemType] }">
</div>
</div>
</template>

<item v-for="item in category" :item="item"></item>

Vue.js 活用法 1
component
// Item.vue
store,
vuex: {
getters: {
itemsObj: (state) => state.itemsObj,
},
},
props: {
'item': {
type : Object,
required: true,
},
},
data( ) {
return {
itemPath: constants.ITEM_PATH,
}
},
methods: {
select(item) {
// 省略
// 最終的にアバター画像を変えている
// actions 本当はactions.jsとか作る
store.dispatch('CHANGE_AVATAR_URL', newUrl);
},
},

Vue.js 活用法 2
vue-router

Vue.js 活用法 2
vue-router とは？
SPA を簡単に作るための
Vue.js のオフィシャルルータ

Vue.js 活用法 2
vue-router
■ vue-router で簡単にSPAを構築可能

Vue.js 活用法 2
vue-router
■ vue-router で簡単にSPAを構築可能
■ path と View を担当する component
を紐付けるだけ
router.map({
// 省略
'/edit': {
component: EditView,
},
'/stickers': {
component: StickersView,
},
// 省略
});

Vue.js 活用法 3
Vuex

Vue.js 活用法 3
Vuex とは？
アプリケーションの状態を管理するための
アーキテクチャ

Vue.js 活用法 3
Vuex
■ データの流れが単方向に
■ アプリケーションの全ての状態が
Storeにあり、全ての component から
アクセス可能
非常にシンプルになり、画期的

Vue.js 活用法 3
Vuex
// Item.vue
methods: {
select(item) {
// 省略
// 最終的にアバター画像を変えている
// actions 本当はactions.jsとか作る
store.dispatch('CHANGE_AVATAR_URL', newUrl);
},
},
// store.js
const state = {
avatarUrl: '',
};
const mutations = {
CHANGE_AVATAR_URL(state, newUrl) {
state.avatarUrl = newUrl;
},
};

<img :src="avatarUrl">
アイテムを選択
Actions で url を作る
Mutations で Store の状態を変更する
アバターが変わる
1
2
3
4

Vuex
1
アイテムを選択1
Vue.js 活用法 3

Vuex
1 2
1
2
Vue.js 活用法 3

Vuex
1 2
3
1
2
3
Vue.js 活用法 3

Vuex
1 2
34
アバターが変わる
1
2
3
4
Vue.js 活用法 3

まとめ

component
vue-router
Vuex
まとめ

component
コンポーネントの使い回しで開発が進むほど作業スピードアップ
vue-router
Vuex
まとめ

component
vue-router
SPA を制作する工数は格段に短くなる無かったらどうなるの？？こわい
Vuex
まとめ

component
vue-router
SPA を制作する工数は格段に短くなる無かったらどうなるの？？こわい
Vuex
状態管理が楽になり、アプリケーション内のデータのやり取りに迷わなくなった
コードの複雑さの回避、全ては store にあることの安心感
やはり開発進むほど効果実感
まとめ

結果
アプリケーションで実現したいことの工数が減り、
サービスのクオリティアップに貢献できた

Vue.js 使いましょう！

ご清聴ありがとうございました!!!

募集
オープンプラットフォーム事業部では、
多くのお客様に最高のエンターテイメントを提供したい「変な人」を募集中です！
近日
公開!!

アバター着せ替えアプリ開発におけるフロントエンド技術(Vue.js活用事例) #denatechcon

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (20)

Similar to アバター着せ替えアプリ開発におけるフロントエンド技術(Vue.js活用事例) #denatechcon

Similar to アバター着せ替えアプリ開発におけるフロントエンド技術(Vue.js活用事例) #denatechcon (20)

More from DeNA

More from DeNA (20)

Recently uploaded

Recently uploaded (16)

アバター着せ替えアプリ開発におけるフロントエンド技術(Vue.js活用事例) #denatechcon