Upgrade to Pro — share decks privately, control downloads, hide ads and more …

筑波大学COJT2020 Faciopプロジェクト

 筑波大学COJT2020 Faciopプロジェクト

筑波大学COJT2020の成果発表にて発表した資料になります。

にー兄さん

July 31, 2020
Tweet

More Decks by にー兄さん

Other Decks in Technology

Transcript

  1. 情報科学類3年 堤海斗
    知識学類3年 春名航亨
    Faciop
    ~気軽にWeb上で試着!~
    2020年度COJT春学期
    1

    View full-size slide

  2. メンバー
    堤 海斗 情報科学類 3年次
    担当:AR試着システムの実装検証
    春名 航亨 知識情報・図書館学類 3年次
    担当:商品・3DデータAPIとフロント
    2

    View full-size slide

  3. 3
    ”AR試着” で解決
    家にいながら
    買い物がしたい!
    商品の訴求力を
    上げたい!
    自分の作った
    3Dモデルを売りたい!

    View full-size slide

  4. Faciopの想定するユーザーフロー
    4
    商品情報を
    Faciopに申請
    商品情報を元に
    3Dモデルを
    作成・入稿
    商品をAR試着
    気に入ったら
    購入

    View full-size slide

  5. 3Dモデラー×中小の小売店×消費者をつなぐ
    全く新しいプラットフォーム!
    5

    View full-size slide

  6. 6
    Stay Homeで試着し、
    買い物をする機会
    を提供
    商品を訴求する
    プラットフォームを
    提供
    3Dモデルを使った
    新しいマネタイズの
    手段を提供

    View full-size slide

  7. マネタイズの一例
    - 出品料
    - 商品売れるごとにマージン
    - AmazonなどECサイトのアドセンス
    7

    View full-size slide

  8. サイト https://faciop-cojt.github.io/faciop/
    デモ https://drive.google.com/file/d/1uwJUxDpyV1RVoOSOfVYEbmSPYFgaPCMT/view?usp=sharing 8

    View full-size slide

  9. システム構成 - 全体
    クライアントサイド サーバサイド(API)
    9
    商品取得・
    3Dモデル入稿/取得
    データ返却
    SQL発行
    結果返却

    View full-size slide

  10. システム構成 - フロントエンド(試着・堤)
    10
    フレームワーク Nuxt.js+TypeScript
    顔の姿勢推定 facemesh(tensorflow.js)
    3DCG描画回り three.js

    View full-size slide

  11. システム構成 - フロントエンド(試着以外・春名)
    11
    フレームワーク Nuxt.js
    UIコンポーネント BootstrapVue
    本番環境 GitHub Pages

    View full-size slide

  12. システム構成 - バックエンド(API・春名)
    12
    フレームワーク Ruby on Rails
    データベース PostgreSQL
    本番環境 Heroku

    View full-size slide

  13. 今回得られた知見
    - Nuxtでメディアコンテンツを扱った開発の知見(堤)
    - 商品データ取得/3Dデータ入稿API構築(春名)
    - Vueのアーキテクチャの理解(春名)
    13

    View full-size slide

  14. 頑張ったところ
    - 少人数でもなんとかやりきった(春名)
    - 試着システムを1から作った(堤)
    - ドキュメントやライブラリが少なかった(堤)
    14

    View full-size slide

  15. 今後の展望
    - 他の小物に対応
    - 帽子, マスク…
    - より洗練されたサービスへ
    - UI/UX, ユーザー認証, 欲しい物リスト…
    - 実運用を行う
    15

    View full-size slide

  16. 第2部で
    お会いしましょう!
    16

    View full-size slide