コンテンツにスキップ

着せ替え画面との接続

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

着せ替え画面

着せ替え画面の必要性

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

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

Info

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

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

サーバサイドで接続用エンドポイントを構成し、エンドユーザを誘導します。まずベースURLを作成し、最後に署名を付けたURLへエンドユーザをリダイレクトします。

Info

着せ替えアプリとの接続と異なり、リンク元のレギュレーションはありません。自由な文言、画像から UI Kit 着せ替え画面へリンクを張ることができます。

ベースURL

URL

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

パラメータ仕様

パラメータ 必須 説明 値のサンプル
avatarId エンドユーザのアバターID 1234567890
connectUrl 着せ替えアプリと接続するためのURL。詳細は後述。 https://example.com/connect
completeUrl 「保存」ボタン(着せ替え完了ボタン)が押された場合の戻り先URL。指定しなかった場合、UI Kit の着せ替え画面で「保存しました」と表示されます。 https://example.com/home
backUrl 「戻る」ボタンが押された場合の戻り先URL。指定した場合、UI Kit 着せ替え画面の下部に「戻る」ボタンが表示されます。着せ替え画面からアプリへ戻るために、completeUrl または backUrl のどちらかは指定するようにしてください。 https://example.com/home
styleUrl 独自スタイルシートを読み込む場合はそのURL https://example.com/custom.css
timestamp UNIXタイムスタンプ 1584519473

Info

connectUrl で指定するエンドポイントの実装は、一旦後回しにして進めることも可能です。着せ替え画面上部に警告が表示されますが、接続を完了すると消えます。

サンプル

完成したベース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

セキュリティ上の注意点

第三者による不正アクセスを防ぐために、署名キーをサーバサイドに配置し、サーバサイドで署名を生成するようにします。また、ユーザ認証をサーバサイドで行い、ユーザに紐づくアバターIDを、avatarId パラメータに設定するようにします。エンドユーザから送信されるアバターIDを利用しないよう注意してください。これは、ショップ・ガチャにおいても同様です。

着せ替えアプリとの接続

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

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

端末に着せ替えアプリがインストールされている場合は、UI Kit の着せ替え画面ではなく着せ替えアプリが自動起動します。着せ替えアプリがインストールされていない場合、UI Kit の着せ替え画面が表示されます。UI Kit 着せ替え画面の動作を確認する際は、端末から着せ替えアプリをアンインストールする必要があります。

行動分析(β)

Info

本機能はβ版のため、将来仕様が変更する可能性があります。

自社アプリと Google アナリティクスを統合した場合、以下のイベントが自社アプリの Google アナリティクスへ送信されます。行動分析の概要はプライバシーと行動分析のページを参照して下さい。

UI Kit が送信する値

イベント

イベント 説明
select_content アイテムをクリックし、試着した
commit 試着を完了し、「保存」ボタンをクリックした
select_content のパラメータ

select_content イベント発生時に送信されるデータは次のようになります。

パラメータ
content_type item
item_id item-{アイテムID}

最終更新日: 2021-04-19