Skip to content

着せ替え画面との接続

このページでは、UI Kit の着せ替え画面の組み込み方法について説明しています。

着せ替え画面

着せ替え画面の必要性

Avatar Play では、着せ替えアプリを提供しており、着せ替えアプリと接続することで着せ替え機能を利用することも可能です。UI Kit の着せ替え画面が必要となるのは、主に次のようなケースです。

  1. アバターの着せ替えが自社アプリのコアUXに該当し、かつiOSへ配信するとき(コアUXはアプリ内で完結する必要があるため)
  2. 着せ替えアプリのインストールが必須となる点が、UX上好ましくないとき

Info

UI Kit の着せ替え画面を利用する場合も、着せ替えアプリとの接続は必須です。

接続用エンドポイントを構成する

接続用エンドポイントを構成し、自社アプリからリンクを張ります。まずベースURLを作成し、最後に署名を付けたURLへエンドユーザをリダイレクトします。

ベースURL

URL

https://sdk.avatarplay3d.com/uikit/fitting_room

パラメータ仕様

パラメータ 必須 説明 値のサンプル
avatarId エンドユーザのアバターID 1234567890
completeUrl 「保存」ボタン(着せ替え完了ボタン)が押された場合の戻り先URL https://example.com/home
connectUrl 着せ替えアプリと接続するためのURL https://example.com/connect
backUrl 「戻る」ボタンが押された場合の戻り先URL。指定した場合、UI Kit 着せ替え画面の下部に「戻る」ボタンが表示されます。 https://example.com/home
styleUrl 独自スタイルシートを読み込む場合はそのURL https://example.com/custom.css
timestamp UNIXタイムスタンプ 1584519473
analyticsDisabled Google アナリティクスを無効にする場合は true を指定します。 true

サンプル

完成したベースURLは次のようになります。

https://sdk.avatarplay3d.com/uikit/fitting_room?avatarId=1234567890&completeUrl=https%3A%2F%2Fexample.com%2Fhome&connectUrl=https%3A%2F%2Fexample.com%2Fconnect&timestamp=1584519638

署名

次に、ベースURLに署名を付加します。

事前準備

自社アプリが利用する署名キーの生成を、一度だけ行う必要があります。コンソールのアプリ一覧から対象アプリの「アプリ設定」へ進み、「UI Kit を有効化する」ボタンを押します。

UI Kit を有効化すると次の画面で16進数表記(HEXエンコード)された署名キーが表示されます。署名キーは署名に用いる際の秘密鍵ですので、安全な経路で自社アプリが参照できる位置に保存します。

Warning

コンソールでの署名キーの表示は一度だけです。署名キーを失念しないよう注意して下さい。

署名の生成

前述のベースURLと署名キーを使って、HMAC SHA256のアルゴリズムで署名を生成し、16進数表記に変換した文字列を利用します。

key, err := hex.DecodeString("{16進数表記の署名キー}"))
if err != nil {
    log.Fatal("failed to decode sign key")
    return err
}

mac := hmac.New(sha256.New, key)
if _, err := mac.Write([]byte(baseURL)); err != nil {
    log.Fatal("failed to sign")
    return
}
sign := hex.EncodeToString(mac.Sum(nil))
// 16進数表記の署名キーをバイト配列に戻す
var keyBytes = new List<byte>();
for (int i = 0; i < "{16進数表記の署名キー}".Length / 2; i++)
{
    keyBytes.Add(Convert.ToByte("{16進数表記の署名キー}".Substring(i*2, 2), 16));
}
var key = keyBytes.ToArray();

// 署名
var signBytes = new HMACSHA256(key).ComputeHash(System.Text.Encoding.UTF8.GetBytes(baseURL));
var sign = BitConverter.ToString(signBytes).ToLower().Replace("-", "");

ベースURLに署名を付加する

ベースURLの末尾に、sign というパラメータ名で、署名を追加します。最終的なエンドポイントURLのサンプルは次のとおりです。

https://sdk.avatarplay3d.com/uikit/fitting_room?avatarId=1234567890&completeUrl=https%3A%2F%2Fexample.com%2Fhome&connectUrl=https%3A%2F%2Fexample.com%2Fconnect&timestamp=1584519638&sign=c232ba1ad9f2f68499ba9af4924a6e367f709ead749b92063a174222d07f6642

着せ替えアプリとの接続

続いて、connectUrl のエンドポイントの実装を行います。こちらは着せ替えアプリとの接続を参照して下さい。

着せ替えアプリがインストール済みのとき

端末に着せ替えアプリがインストールされている場合は、UI Kit の着せ替え画面ではなく着せ替えアプリが自動起動します。着せ替えアプリがインストールされていない場合、UI Kit の着せ替え画面が表示されます。

行動分析

自社アプリと Google アナリティクスを統合した場合、以下のイベントが自社アプリの Google アナリティクスへ送信されます。

イベント 説明
select_item アイテムをクリックし、試着した
commit_fitting 試着を完了し、「保存」ボタンをクリックした

行動分析の概要はプライバシーと行動分析のページを参照して下さい。