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.

Hubsの日本語化とECサイト利用

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

  • Be the first to comment

Hubsの日本語化とECサイト利用

  1. 1. Hubsの日本語化とECサイト利用 @yukihiko_a 2020/07/15
  2. 2. ⚫ 自己紹介 ⚫ ThreeDPoseTrackerについて ⚫ Hubsの日本語化 ⚫ HubsのECサイト利用 ◦ ECサイト化 ◦ カートについて ◦ 実装方法 ⚫ 最後に もくじ
  3. 3. 自己紹介 ⚫ 名前:青柳幸彦(@yukihiko_a) ⚫ 会社:株式会社デジタル・スタンダード(@digistaofficial) 大阪の梅田にある開発会社です。 ◦ Windowsやスマホでのアプリ ◦ スポーツ、医療系、その他各種業務システム ◦ Kinectや各種センサーを使用した開発 ⚫ 趣味:天体観測、自転車、DIY
  4. 4. ちょっと宣伝 こちらからDLできます。 https://qiita.com/yukihiko_a/items/43d09db5628334789fab 「USBカメラだけで出来るモーションキャプチャ」 ThreeDPoseTrackerというアプリを作りました。
  5. 5. 姿勢推定(Pose estimation)とは? ⚫ 一般的には、RGB画像から人体の姿勢を推定する技術 ⚫ 簡単に言えば顔認識のからだ版 ⚫ 関節位置(肘や手首など)や顔などの部位を特定 ⚫ OpenposeやPosenetが有名
  6. 6. 3次元姿勢推定 ⚫ RGB画像から人体の3次元の姿勢を推定する技術 ⚫ 推定する方法は様々 ⚫ 興味ある人はこのページがおすすめ コンピュータビジョンの最新論文調査 3D Human Pose Estimation 編 (https://engineer.dena.jp/2019/12/cv-papers-19-3d-human-pose-estimation.html)
  7. 7. ThreeDPoseTracker USBカメラに写った人物(私)の姿勢から関節 の位置を推定します(緑の線)。そのデータを 元に右側のアバターをリアルタイムに動かしま す。 カメラだけではなく、動画からも推定できま す。これはYoutubeにある踊ってみたの動画を 使用してアバターを動かしています。VRMフ ァイルのアバターを読み込む事ができます。 【あこちん】お願いダーリン【踊ってみた】 https://www.youtube.com/watch?v=tmsK8985dyk こちらからDLできます。 https://qiita.com/yukihiko_a/items/43d09db5628334789fab
  8. 8. グループ会社からの問合せ: 展示会とかを仮想空間みたいなのでっ て簡単にできる? clusterってアプリでやるのが楽ですよ。 お客にアプリを入れてもらうのはダメだ なあ。若い人ばかりじゃないし。 手軽にブラウザでできない? … あと、中で買い物もしたいんだけど。
  9. 9. 目的 ⚫ スマホのブラウザで、誰でも手軽に仮想空間に! ⚫ VRはとりあえず必要ない(VRもできればうれしい) ⚫ 友達とおしゃべりしながら気軽に買い物 Hubsのカスタマイズで可能?? 検証用に、Hubs Cloudでサーバを立ててみた。 https://digi-rooms.com ソースはこちらにあります。 https://github.com/digital-standard/hubs ここで開発してるので、 たまに止まってる事も あります
  10. 10. 日本語化 手軽に使うためにまずは日本語化!
  11. 11. 日本語化の方法 hubs/src/assets/translations.data.json このjsonファイルが辞書になっているので、 “ja”で翻訳を追加するだけ 本当はfluent.jsとかで ローカライゼーションし たいみたい
  12. 12. ECサイト化 ⚫ 商品のオブジェクトをクリック(タップ)で購入画面 ⚫ HubsではVR内でリンク開いて買い物なら簡単にできるけど スマホのブラウザだと正直使いにくい… ⚫ 新規タブを開いてリンク先に飛ぶのもイヤ (離脱率があがる、Hubsから退出してしまう) 仮想空間で手軽に買い物今回の目的 仮想空間内ででカートを表示ではなく、 UIのレイヤーでカートを表示
  13. 13. ECサイト化 商品のオブジェクトをクリック(タップ) 動画はこちら: https://www.youtube.com/watch?v=89g5JlXBSZc
  14. 14. ECサイト化(1) まず、UIのレイヤーで商品説明の画面が開く
  15. 15. ECサイト化(2) カートに追加
  16. 16. ECサイト化(3) 当然商品の追加や削除も可能
  17. 17. ECサイト化(4) 注文に進む(実際に購入可能です)
  18. 18. ECサイト化(5) テナント募集中です! 場所はいくらでもあります。誰か試しに出店しませんか?
  19. 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. 20. EC機能の実装方法 ⚫ SpokeでふつうのSpawnerオブジェクトを作成 ⚫ 命名規約を”オブジェクト名_script_ファンクション名” ⚫ ファンクション名のスクリプトをあらかじめサーバに用意 ⚫ クリックされたSpawnerの名前に“script”があればイベントを奪う ◦ hubs/src/systems/super-spawner-system.js ⚫ 以後に続く“ファンクション名”のスクリプトをコールする ⚫ 後はスクリプト内でやりたい事を書いておくだけ ⚫ 今回は「どこでもカラーミー」をIFrameで表示した ⚫ 他にも店員呼び出しボタンとかリンクゲート等いろいろ応用できる
  21. 21. 絵画展の応用例(1) 絵の左側のボタンをクリックすると、
  22. 22. 絵画展の応用例(2) 絵の詳細な説明が読めるとか(説明は未実装)
  23. 23. EC機能の実装コード super-spawner-system.js内に“script”で文字列検索 ファンクション名で呼び出し
  24. 24. シェアもやりやすく さらに手軽に使える為にLineでシェア(国内では大事!) npmでreact-social-sharebuttonsをインポート
  25. 25. 最後に ⚫ 効率よく数を売る事は向いてない ⚫ 向いているのは高価な物や説明がいるような商品 ⚫ もしくはイベントなどの企画もの ⚫ カートの表示をIframeで行っているが、カラーミーでは Iframeの使用は非保証 ご清聴ありがとうございました。 ちょっと変わったショップを開きたい方は お気軽にお声がけください ThreeDPoseTracker https://digi-rooms.com

×