Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

1,999 views

Published on

DeNA TechCon 2017の登壇資料です。

Published in: Technology

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

  1. 1. 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.
  2. 2. Copyright (C) 2013 DeNA Co.,Ltd. All Rights Reserved. 自己紹介 デザイン戦略室第一グループ 榎戸 徹 2014年入社。 2014年1月〜 怪盗ロワイヤルでフロントエンドを担当。 2014年10月〜 ヘルスケア事業部でKenCoMのフロントエンドを担当。 2016年5月〜 オープンプラットフォーム事業本部でクリエイティブチームのマネージャー
  3. 3. Copyright (C) 2013 DeNA Co.,Ltd. All Rights Reserved. 自己紹介 デザイン戦略室第三グループ 坂本 啓太 2012年入社。FINAL FANTASY BRIGADE などのブラウザゲームや、 ハッカドールなどのメディアサービスのフロントエンドを担当。 現在、主に新規サービス開発のフロントエンドを担当している。
  4. 4. Copyright (C) 2013 DeNA Co.,Ltd. All Rights Reserved. アジェンダ ■ アバター着せ替えアプリについて ■ フロントエンド技術について
  5. 5. Copyright (C) 2013 DeNA Co.,Ltd. All Rights Reserved. アバター着せ替えアプリ?
  6. 6. Copyright (C) 2013 DeNA Co.,Ltd. All Rights Reserved. Mobage のアバターシステムを活用して、 自由にアバターを作り、 SNS や チャットに投稿できる 海外向けキーボードアプリ (※2017年3月リリース予定) アバター着せ替えアプリ?
  7. 7. Copyright (C) 2013 DeNA Co.,Ltd. All Rights Reserved. 海外向け?
  8. 8. Copyright (C) 2013 DeNA Co.,Ltd. All Rights Reserved. 日本のIPコンテンツは海外で引きがある きっかけ
  9. 9. Copyright (C) 2013 DeNA Co.,Ltd. All Rights Reserved. 日本のIPコンテンツは海外で引きがある きっかけ ● 日本のMANGA・アニメの普及 ● 外国人観光客による聖地巡礼 ● 細分化されたジャンルと多様性 ● 深いテーマ
  10. 10. Copyright (C) 2013 DeNA Co.,Ltd. All Rights Reserved. MobageはIP、Non IP含め アバターアセットがいくつも存在 きっかけ
  11. 11. Copyright (C) 2013 DeNA Co.,Ltd. All Rights Reserved. ユーザ自身がアバターを使ったスタンプを 気軽に作って使えれば 新たな体験を提供できるのでは? きっかけ
  12. 12. Copyright (C) 2013 DeNA Co.,Ltd. All Rights Reserved. プロジェクト要件
  13. 13. Copyright (C) 2013 DeNA Co.,Ltd. All Rights Reserved. プロジェクト要件 ■ アプリとして出す
  14. 14. Copyright (C) 2013 DeNA Co.,Ltd. All Rights Reserved. プロジェクト要件 ■ アプリとして出す ⁃ 中身は WebView(キーボード以外)のハイブリッドアプリ
  15. 15. Copyright (C) 2013 DeNA Co.,Ltd. All Rights Reserved. プロジェクト要件 ■ アプリとして出す ⁃ 中身は WebView(キーボード以外)のハイブリッドアプリ • アプリ的なUXが求められる • SPA (シングルページアプリケーション)
  16. 16. Copyright (C) 2013 DeNA Co.,Ltd. All Rights Reserved. プロジェクト要件 ■ アプリとして出す ⁃ 中身は WebView(キーボード以外)のハイブリッドアプリ • アプリ的なUXが求められる • SPA (シングルページアプリケーション) ■ アイテムを選ぶとアバターが着替えられる ⁃ シームレスな動きの実現
  17. 17. Copyright (C) 2013 DeNA Co.,Ltd. All Rights Reserved. どうやってつくろう?
  18. 18. Copyright (C) 2013 DeNA Co.,Ltd. All Rights Reserved. どうやってつくろう? いくつかの JSフレームワークを検討した結果 Vue.js を採用
  19. 19. Copyright (C) 2013 DeNA Co.,Ltd. All Rights Reserved. Vue.js?
  20. 20. Copyright (C) 2013 DeNA Co.,Ltd. All Rights Reserved. Vue.js? ■ 小〜中規模プロジェクトのため、フルスタックのフレームワーク ではなく必要に応じて拡張できるほうが良い
  21. 21. Copyright (C) 2013 DeNA Co.,Ltd. All Rights Reserved. Vue.js? ■ 小〜中規模プロジェクトのため、フルスタックのフレームワーク ではなく必要に応じて拡張できるほうが良い ■ 公式のルーティングライブラリの vue-router があることも 大きかった
  22. 22. Copyright (C) 2013 DeNA Co.,Ltd. All Rights Reserved. Vue.js? ■ 小〜中規模プロジェクトのため、フルスタックのフレームワーク ではなく必要に応じて拡張できるほうが良い ■ 公式のルーティングライブラリの vue-router があることも 大きかった ■ 社内で Vue.js の導入事例があった
  23. 23. Copyright (C) 2013 DeNA Co.,Ltd. All Rights Reserved. Vue.js? ■ 小〜中規模プロジェクトのため、フルスタックのフレームワーク ではなく必要に応じて拡張できるほうが良い ■ 公式のルーティングライブラリの vue-router があることも 大きかった ■ 社内で Vue.js の導入事例があった ■ 動作・サイズともに軽い
  24. 24. Copyright (C) 2013 DeNA Co.,Ltd. All Rights Reserved. Vue.js? ■ 小〜中規模プロジェクトのため、フルスタックのフレームワーク ではなく必要に応じて拡張できるほうが良い ■ 公式のルーティングライブラリの vue-router があることも 大きかった ■ 社内で Vue.js の導入事例があった ■ 動作・サイズともに軽い ■ 学習コストの低さ(社内の知見・日本語ドキュメント)
  25. 25. Copyright (C) 2013 DeNA Co.,Ltd. All Rights Reserved. Vue.js 活用法
  26. 26. Copyright (C) 2013 DeNA Co.,Ltd. All Rights Reserved. Vue.js 活用法 1 component
  27. 27. Copyright (C) 2013 DeNA Co.,Ltd. All Rights Reserved. Vue.js 活用法 1 component とは? 再利用可能なコードの カプセル化
  28. 28. Copyright (C) 2013 DeNA Co.,Ltd. All Rights Reserved. Vue.js 活用法 1 component ■ コンポーネント化したアイテム v-for でループ ※ 開発中の画面です
  29. 29. Copyright (C) 2013 DeNA Co.,Ltd. All Rights Reserved. Vue.js 活用法 1 component ■ コンポーネント化したアイテム v-for でループ ■ 選択したアイテムのIDをアバターの src に追加するとアバターが変化 <template> <div v-touch:tap="select(item)"> <img :src="itemPath + item.disFile"> <!-- check --> <div class="item-check" :class="{ 'is-active': item.itemID === itemsObj[item.itemType] }"> </div> </div> </template> <!-- custom tag --> <item v-for="item in category" :item="item"></item> ※ 開発中の画面です
  30. 30. Copyright (C) 2013 DeNA Co.,Ltd. All Rights Reserved. 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); }, }, ※ 開発中の画面です
  31. 31. Copyright (C) 2013 DeNA Co.,Ltd. All Rights Reserved. Vue.js 活用法 2 vue-router
  32. 32. Copyright (C) 2013 DeNA Co.,Ltd. All Rights Reserved. Vue.js 活用法 2 vue-router とは? SPA を簡単に作るための Vue.js のオフィシャルルータ
  33. 33. Copyright (C) 2013 DeNA Co.,Ltd. All Rights Reserved. Vue.js 活用法 2 vue-router ■ vue-router で簡単にSPAを構築可能 ※ 開発中の画面です
  34. 34. Copyright (C) 2013 DeNA Co.,Ltd. All Rights Reserved. Vue.js 活用法 2 vue-router ■ vue-router で簡単にSPAを構築可能 ■ path と View を担当する component を紐付けるだけ router.map({ // 省略 '/edit': { component: EditView, }, '/stickers': { component: StickersView, }, // 省略 }); ※ 開発中の画面です
  35. 35. Copyright (C) 2013 DeNA Co.,Ltd. All Rights Reserved. Vue.js 活用法 3 Vuex
  36. 36. Copyright (C) 2013 DeNA Co.,Ltd. All Rights Reserved. Vue.js 活用法 3 Vuex とは? アプリケーションの状態を管理するための アーキテクチャ
  37. 37. Copyright (C) 2013 DeNA Co.,Ltd. All Rights Reserved. Vue.js 活用法 3 Vuex ■ データの流れが単方向に ■ アプリケーションの全ての状態が Storeにあり、全ての component から アクセス可能 非常にシンプルになり、画期的 ※ 開発中の画面です
  38. 38. Copyright (C) 2013 DeNA Co.,Ltd. All Rights Reserved. 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; }, }; <!-- html --> <img :src="avatarUrl"> アイテムを選択 Actions で url を作る Mutations で Store の状態を変更する アバターが変わる 1 2 3 4
  39. 39. Copyright (C) 2013 DeNA Co.,Ltd. All Rights Reserved. Vue.js 活用法 3 Vuex
  40. 40. Copyright (C) 2013 DeNA Co.,Ltd. All Rights Reserved. Vuex 1 アイテムを選択1 Vue.js 活用法 3
  41. 41. Copyright (C) 2013 DeNA Co.,Ltd. All Rights Reserved. Vuex 1 2 アイテムを選択 Actions で url を作る 1 2 Vue.js 活用法 3
  42. 42. Copyright (C) 2013 DeNA Co.,Ltd. All Rights Reserved. Vuex 1 2 3 アイテムを選択 Actions で url を作る Mutations で Store の状態を変更する 1 2 3 Vue.js 活用法 3
  43. 43. Copyright (C) 2013 DeNA Co.,Ltd. All Rights Reserved. Vuex 1 2 34 アイテムを選択 Actions で url を作る Mutations で Store の状態を変更する アバターが変わる 1 2 3 4 Vue.js 活用法 3
  44. 44. Copyright (C) 2013 DeNA Co.,Ltd. All Rights Reserved. まとめ
  45. 45. Copyright (C) 2013 DeNA Co.,Ltd. All Rights Reserved. component vue-router Vuex まとめ
  46. 46. Copyright (C) 2013 DeNA Co.,Ltd. All Rights Reserved. component コンポーネントの使い回しで開発が進むほど作業スピードアップ vue-router Vuex まとめ
  47. 47. Copyright (C) 2013 DeNA Co.,Ltd. All Rights Reserved. component コンポーネントの使い回しで開発が進むほど作業スピードアップ vue-router SPA を制作する工数は格段に短くなる 無かったらどうなるの??こわい Vuex まとめ
  48. 48. Copyright (C) 2013 DeNA Co.,Ltd. All Rights Reserved. component コンポーネントの使い回しで開発が進むほど作業スピードアップ vue-router SPA を制作する工数は格段に短くなる 無かったらどうなるの??こわい Vuex 状態管理が楽になり、アプリケーション内のデータのやり取りに迷わなくなった コードの複雑さの回避、全ては store にあることの安心感 やはり開発進むほど効果実感 まとめ
  49. 49. Copyright (C) 2013 DeNA Co.,Ltd. All Rights Reserved. 結果 アプリケーションで実現したいことの工数が減り、 サービスのクオリティアップに貢献できた
  50. 50. Copyright (C) 2013 DeNA Co.,Ltd. All Rights Reserved. Vue.js 使いましょう!
  51. 51. Copyright (C) 2013 DeNA Co.,Ltd. All Rights Reserved. ご清聴ありがとうございました!!!
  52. 52. Copyright (C) 2013 DeNA Co.,Ltd. All Rights Reserved. 募集 オープンプラットフォーム事業部では、 多くのお客様に最高のエンターテイメントを提供したい「変な人」を募集中です! 近日 公開!!

×