Successfully reported this slideshow.

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

2

Share

Loading in …3
×
1 of 25
1 of 25

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

2

Share

Download to read offline

Description

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

Transcript

  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

Description

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

Transcript

  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

More Related Content

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

×