Hubsのフロントサイドをカスタマイズして、部屋内で商品閲覧⇒決済まで完結出来るシステムを実践しました。

1. @yukihiko_a
2020/10/23

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

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

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

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

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

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

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

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

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

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

12. カートについて
⚫ 「どこでもカラーミー」というカート機能を使っています
⚫ 「カラーミーショップ」の機能
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の費用は、

13. VRコマース拡張の利点
⚫ スマホのブラウザでも仮想空間内に入る事ができる
⚫ 3Dのオブジェクトで商品をお客様にアピールできる
⚫ 複数人でおしゃべりしながら買い物ができる
⚫ 店員を置いて接客できる
⚫ そのままカートへの導線を提供できる
⚫ カート内や決済画面は他人からは見えないので安心
⚫ 従来のWeb決済システムを使うためお客様もお店も安心
⚫ まだどこも使用していません！
今プレスリリースを打てば、きっと話題に！！！
VR展示とECサイトの良いとこ取り

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

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

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

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

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

19. 最後に
⚫ 効率よく数を売る事は向いてない
⚫ 向いているのは高価な物や説明がいるような商品
⚫ もしくはイベントや企画もの
⚫ カートの表示をIframeで行っているが、カラーミーでは
Iframeの使用は非保証
ご清聴ありがとうございました。
VRコマースショップにご興味がある方は、
お気軽にお問合せください
ThreeDPoseTracker
https://ds-rooms.com