VRSionUp!7「Hubs Study」での登壇資料です。

1. Hubsの日本語化とECサイト利用
@yukihiko_a
2020/07/15

2. ⚫ 自己紹介
⚫ ThreeDPoseTrackerについて
⚫ Hubsの日本語化
⚫ HubsのECサイト利用
◦ ECサイト化
◦ カートについて
◦ 実装方法
⚫ 最後に
もくじ

3. 自己紹介
⚫ 名前：青柳幸彦（@yukihiko_a）
⚫ 会社：株式会社デジタル・スタンダード（@digistaofficial）
大阪の梅田にある開発会社です。
◦ Windowsやスマホでのアプリ
◦ スポーツ、医療系、その他各種業務システム
◦ Kinectや各種センサーを使用した開発
⚫ 趣味：天体観測、自転車、DIY

4. ちょっと宣伝
こちらからDLできます。
https://qiita.com/yukihiko_a/items/43d09db5628334789fab
「USBカメラだけで出来るモーションキャプチャ」
ThreeDPoseTrackerというアプリを作りました。

5. 姿勢推定（Pose estimation）とは？
⚫ 一般的には、RGB画像から人体の姿勢を推定する技術
⚫ 簡単に言えば顔認識のからだ版
⚫ 関節位置（肘や手首など）や顔などの部位を特定
⚫ OpenposeやPosenetが有名

6. 3次元姿勢推定
⚫ RGB画像から人体の3次元の姿勢を推定する技術
⚫ 推定する方法は様々
⚫ 興味ある人はこのページがおすすめ
コンピュータビジョンの最新論文調査 3D Human Pose Estimation 編
（https://engineer.dena.jp/2019/12/cv-papers-19-3d-human-pose-estimation.html）

7. ThreeDPoseTracker
USBカメラに写った人物（私）の姿勢から関節
の位置を推定します（緑の線）。そのデータを
元に右側のアバターをリアルタイムに動かしま
す。
カメラだけではなく、動画からも推定できま
す。これはYoutubeにある踊ってみたの動画を
使用してアバターを動かしています。VRMフ
ァイルのアバターを読み込む事ができます。
【あこちん】お願いダーリン【踊ってみた】
https://www.youtube.com/watch?v=tmsK8985dyk
こちらからDLできます。
https://qiita.com/yukihiko_a/items/43d09db5628334789fab

8. グループ会社からの問合せ：
展示会とかを仮想空間みたいなのでっ
て簡単にできる？
clusterってアプリでやるのが楽ですよ。
お客にアプリを入れてもらうのはダメだ
なあ。若い人ばかりじゃないし。
手軽にブラウザでできない？
…
あと、中で買い物もしたいんだけど。

9. 目的
⚫ スマホのブラウザで、誰でも手軽に仮想空間に！
⚫ VRはとりあえず必要ない（VRもできればうれしい）
⚫ 友達とおしゃべりしながら気軽に買い物
Hubsのカスタマイズで可能？？
検証用に、Hubs Cloudでサーバを立ててみた。
https://digi-rooms.com
ソースはこちらにあります。
https://github.com/digital-standard/hubs
ここで開発してるので、
たまに止まってる事も
あります

10. 日本語化
手軽に使うためにまずは日本語化！

11. 日本語化の方法
hubs/src/assets/translations.data.json
このjsonファイルが辞書になっているので、
“ja”で翻訳を追加するだけ 本当はfluent.jsとかで
ローカライゼーションし
たいみたい

12. ECサイト化
⚫ 商品のオブジェクトをクリック（タップ）で購入画面
⚫ HubsではVR内でリンク開いて買い物なら簡単にできるけど
スマホのブラウザだと正直使いにくい…
⚫ 新規タブを開いてリンク先に飛ぶのもイヤ
（離脱率があがる、Hubsから退出してしまう）
仮想空間で手軽に買い物今回の目的
仮想空間内ででカートを表示ではなく、
UIのレイヤーでカートを表示

13. ECサイト化
商品のオブジェクトをクリック（タップ）
動画はこちら：
https://www.youtube.com/watch?v=89g5JlXBSZc

14. ECサイト化（１）
まず、UIのレイヤーで商品説明の画面が開く

15. ECサイト化（２）
カートに追加

16. ECサイト化（３）
当然商品の追加や削除も可能

17. ECサイト化（４）
注文に進む（実際に購入可能です）

18. ECサイト化（５）
テナント募集中です！
場所はいくらでもあります。誰か試しに出店しませんか？

19. カートについて
⚫ 「どこでもカラーミー」というカート機能を使っています
⚫ 「カラーミーショップ」の機能
https://shop-pro.jp/
⚫ スクリプト貼るだけで自サイトにカートを設置できる
⚫ ちなみに初期費用3000円で月800円
6月 $869.84 93,012円（1ドル106.93円換算 7/13現在）
＜内訳＞
Amazon Web Services, Inc. - Service Charges $581.84
AWS Marketplace Charges $288.00
さらにちなみにHubs Cloud Enterpriseの費用は、

20. EC機能の実装方法
⚫ SpokeでふつうのSpawnerオブジェクトを作成
⚫ 命名規約を”オブジェクト名_script_ファンクション名”
⚫ ファンクション名のスクリプトをあらかじめサーバに用意
⚫ クリックされたSpawnerの名前に“script”があればイベントを奪う
◦ hubs/src/systems/super-spawner-system.js
⚫ 以後に続く“ファンクション名”のスクリプトをコールする
⚫ 後はスクリプト内でやりたい事を書いておくだけ
⚫ 今回は「どこでもカラーミー」をIFrameで表示した
⚫ 他にも店員呼び出しボタンとかリンクゲート等いろいろ応用できる

21. 絵画展の応用例（１）
絵の左側のボタンをクリックすると、

22. 絵画展の応用例（２）
絵の詳細な説明が読めるとか（説明は未実装）

23. EC機能の実装コード
super-spawner-system.js内に“script”で文字列検索
ファンクション名で呼び出し

24. シェアもやりやすく
さらに手軽に使える為にLineでシェア（国内では大事！）
npmでreact-social-sharebuttonsをインポート

25. 最後に
⚫ 効率よく数を売る事は向いてない
⚫ 向いているのは高価な物や説明がいるような商品
⚫ もしくはイベントなどの企画もの
⚫ カートの表示をIframeで行っているが、カラーミーでは
Iframeの使用は非保証
ご清聴ありがとうございました。
ちょっと変わったショップを開きたい方は
お気軽にお声がけください
ThreeDPoseTracker https://digi-rooms.com