UIT#5

1. カメラを利用したアプリを作って
約1,000人で遊んだ話
istyle.inc KenjiroKubota @UIT#5

2. Profile.
~ 2015/08 istyle.inc
テクノロジー本部 R&D 部技術開発部 チーフエンジニア
久保田 賢二朗
● PHP(Laravel/Phalcon)
● JavaScript(Vue.js,/Svelte)
● Golang
● HHVM/Hack
kenjiro kubota

3. PR.
株式会社アイスタイル
istyle Inc.
インターネットのコスメ情報ポータルサイト
「＠ｃｏｓｍｅ（アットコスメ）」
の開発・運営
コスメだけではなくビューティ全般、日本だけではなく世界で"Beauty"に係る人や
企業、個人事業主が活躍できるプラットフォームを作る。
アイスタイルは、「Beauty×IT」の世界ナンバーワンを目指します。

4. 弊社の紹介をもう少し・・・
弊社アイスタイルでは通期に一度、
ほぼ全社員が一堂に会するイベント
「夏納会」を7月に行なっています。
今回はその夏納会に参加した約1,000人に
Webアプリケーションで作成したゲームで
遊んでもらった話です。

5. なぜ作ることになったのか

7. どんなゲーム(アプリ)を作ったのか

8. 笑顔を撮る人 笑顔になって撮られる人
撮られる人のQRコードを
読み取ると
アプリ内のカメラが起動
表情認識により閾値を超えた笑
顔が検出されるとシャッターが
切られ、サーバーに送られる

9. ● 多く笑顔を撮った人
● 多く撮られた人
の二部門の上位を目指す。
~ ルール ~
制限時間は10分

11. 利用したもの

12. スマホ向けWebアプリ
スクリーン向けWebアプリ

13. スマホ向けWebアプリ
スクリーン向けWebアプリ
今回話すのはこっち

14. Hosting
静的ファイル
RealtimeDatabase
Firestoreと迷ったが過去利用したことの
ある実績と知見活用で採用
Storage
撮影写真の保存先

15. ● Vue CLI
● Vue Router
● Vuex
● Vuetify
● qrcode.vue
● vue-qrcode-reader
● @vue/cli-plugin-pwa
clmtrackr

16. clmtrackr
https://github.com/auduno/clmtrackr
JavaScriptのフェイストラッキングライブラリ。以下の表
情認識もできる。
● 怒り
● 嫌悪
● 恐れ
● 悲しみ
● 驚き
● 喜び
今回はこの中の「喜び」の数値を利用し、喜び値が上がっ
たタイミングでシャッターを切る

17. clmtrackrを実際に使ってみて・・・
● 眉毛のラインまで判定するのでメガネ・前髪が長いなど、遮るものがあると判定
がされない
● フェイスラインまで判定するので頬を覆うような髪型が（同上
● 固定されたWebカメラなどでは精度が良いが、スマホカメラだと動きが激しいの
で認識が悪い
● 判定できる対象は1つなので複数人同時に写っててもどれかが判定されるだけ
● ↑のように実は判定が厳しいので閾値をゆるくしてガバガバ判定にしてました！

18. WebRTCの扱いとハマりどころ
※ここで説明するWebRTCはAPIを利用してデバイスのカメラを利用するところのみです

19. WebRTCの扱い

20. WebRTCの扱い

21. WebRTCの扱い

22. 16:9 など 1:1
カメラから取得した映像のサイズ

23. 天地中央で640x640pxでクロップする位置を計算 videoタグからクロップした映像をcanvasに描画
vxvx
vy
vw
vh

24. requestAnimationFrame()
引数で指定された関数を秒間60フレーム、もしくはデバイスのリフ
レッシュレートに合わせて実行する。
ブラウザの負荷に応じて上記の限りではない。
返り値はコールバックリスト内のエントリーを一意に識別するため
のID
事前確認で遊んでいると、どんどん重くなっていく現象が発生
原因は、SPAのためブラウザリロードされずにコールバックが溜ま
り続けてしまった。

25. beforeDestroyで都度終了させることで解決

26. まとめ

27. ● Vueには豊富なライブラリや知見に溢れているのでググれば
大抵なんとかなります。
● VueCLIのおかげでWebpackの設定で四苦八苦することがな
かった（規模も小さいアプリだったのでほぼ初期設定でOK）
● WebRTCは結構手軽に扱えました。ブラウザでデバイスの情
報を利用するのは面白いです。
● Firebaseがすごい。

28. おまけ

29. 総撮影枚数
1,769枚
※WebRTCがうまく動かない端末があったり、見てるだけの人が
いたりするので思ったよりは少なかった。

30. FaceAPIを利用して本当に笑顔だったのか検証

31. smile score > 1.0
smile score > 0.2
※写真はぼかし加工しています。

32. スコアの分布

34. thanks:)