UGCのインストール

ここでは、ショートフォームのユーザー生成コンテンツ(UGC)のインストール方法について説明します。

ショートフォームの UGC リストを設定して適用する

setShortformUgcList(containerId, config) 関数を呼び出すことで、ショートフォームの UGC リストページを特定のコンテナに動的に読み込むことができます。この関数は、UGC のリストを非同期的に取得し、指定したコンテナにレンダリングします。

以下のように、containerIdとconfigを指定してショートフォームリストを構成することができます。

const config:TShortsUGCListConfig = {
  userId: 'USER_ID',
  userName: 'USER_NAME',
};

window.cloud.shoplive.setShortformUgcList('ugc-list-container', config);

必要な設定 (TShortsUGCListConfig)

export interface TShortsUGCListConfig {
  userId: string;  // クエリパラメータ ユーザーID
  userName: string; // クエリパラメータ ユーザー名
  profileImage?: string; // クエリパラメータ プロフィール画像
  onCustomSaveCompleted?: (payload: TShortsUGCEditConfig) => void; // 詳細ページの保存完了時に実行するカスタム関数
  onCustomDeleteCompleted?: (payload: TShortsUGCEditConfig) => void; // 詳細ページの削除完了時に実行するカスタム関数
  onCustomCloseEdit?: (payload: TShortsUGCEditConfig) => void; // 詳細ページが閉じられる際に実行するカスタム関数
}

クエスチョンマーク(?)でマークされたプロパティはオプションです。

• Optional プロパティの値を設定しない場合、その値は既定値として扱われ、関連付けられている特定の関数では機能しません。全体的な動作には影響しません。

• 残りの部分については、値を Required プロパティに設定する必要があります。値がない場合、関数は機能しない可能性があります。

使用例 - ショートフォームの UGC リストの読み込み

次の方法で、特定のページにショートフォームの UGC リストを読み込むことができます。

<!-- shortform_ugc.html -->

{...}
<div id="my-page-view"></div>
<script>
window.cloud.shoplive.setShortformUgcList('my-page-view', {
  userId: 'USER_ID',
  userName: 'USER_NAME',
  onCustomSaveCompleted: (payload) => {
    console.log('保存完了:', payload);
  },
  onCustomDeleteCompleted: (payload) => {
    console.log('削除完了:', payload);
  },
  onCustomCloseEdit: (payload) => {
    console.log('編集終了:', payload);
  },
});
</script>

上記のコードは、次のように機能します。

• HTML 要素を選択します。

  • <div id="my-page-view" />は、ショートフォームの UGC リストを表示する場所を示します。 ここで、ショートフォームのコンテンツがレンダリングされます。

• setShortformUgcList 関数を呼び出します。

  • <script> この関数は、タグcloud.shoplive.setShortformUgcList内で呼び出されます。

  • 最初の引数には、ターゲット要素の 'my-page-view'ID が渡され、ショートフォームのリストが表示される場所が指定されます。

  • 2 番目の引数は、ユーザー ID、名前、および保存、削除、または編集の終了時に呼び出されるコールバック関数を含む構成オブジェクトです。

• コールバック関数の動作:

  • 保存完了 (onCustomSaveCompleted): この関数は、ユーザーがショートフォームを保存するときに呼び出されます。payload パラメータを通過したデータとともに保存された情報が画面上で更新されます。

  • 削除済み (onCustomDeleteCompleted): ユーザーがショートフォームを削除したときに実行され、削除が完了したときに実行できるユーザー定義関数です。

  • 編集ウィンドウの終了 (onCustomCloseEdit): ユーザーが編集ウィンドウを閉じたときに呼び出される、これはウィンドウが閉じられたときに実行できるユーザー定義関数です。

• 終了画面の更新:

  • 各コールバック関数が呼び出されると、 console.log(payload);を使用して、最新のデータをコンソールに出力します。各終了の終了時に、保存、削除、または編集の各ステータスを確認できます。

    
    

    最新の簡易 UGC リストについては、以下を参照してください my-page-view 要素に含めて、更新されたステータスをユーザーに表示します。

    各 console.log(payload);callback 関数が実行され、最新のデータがコンソールに出力されます。各保存、削除、または編集の最後にステータスを確認できます。

    画面上では、my-page-view要素に最新のショートフォームの UGC リストが反映され、ユーザーに即時更新を表示するように促します。

ショートフォームのUGC詳細ページを設定して呼び出す

showShortformUgcEdit(config) 関数を呼び出すことで、ショートフォームの UGC を編集および生成できるページを読み込むことができます。  config オブジェクトを使用して必要な設定を渡したり、特定のイベント(保存、削除、閉じる)が完了したときに、その時点で定義されたユーザー定義関数を実行したりできます。

次の方法で 呼び出すことができますwindow.cloud.shoplive.showShortformUgcEdit(config)。

const config = {
  userId: 'USER_ID',
  userName: 'USER_NAME',
  profileImage: 'https://example.com/profile.jpg',
  shortsId: '123456789',
  skus: ['sku1', 'sku2'],
  tags: ['tag1', 'tag2'],
  onCustomSaveCompleted: (payload) => {
    console.log('保存完了:', payload);
  },
  onCustomDeleteCompleted: (payload) => {
    console.log('削除完了:', payload);
  },
  onCustomCloseEdit: (payload) => {
    console.log('編集終了:', payload);
  },
};

window.cloud.shoplive.showShortformUgcEdit(config);

構成パラメータ (TShortsUGCEditConfig)

export interface TShortsUGCEditConfig {
  userId: string; // クエリパラメータ ユーザーID
  userName: string; // クエリパラメータ ユーザー名
  shortsId?: string; // 作成時に生成されたショートフォーム固有ID
  tags?: string[]; // タグのリスト
  skus?: string[]; // 商品固有IDのリスト
  brandIdentifier?: string; // ブランド識別子
  profileImage?: string; // クエリパラメータ プロフィール画像
  onCustomSaveCompleted?: (payload: TShortsUGCEditConfig) => void; // 保存完了時に実行するカスタム関数
  onCustomDeleteCompleted?: (payload: TShortsUGCEditConfig) => void; // 削除完了時に実行するカスタム関数
  onCustomCloseEdit?: (payload: TShortsUGCEditConfig) => void; // 詳細ページが閉じられる際に実行するカスタム関数
}

クエスチョンマーク(?)でマークされたプロパティはオプションです。

• Optional プロパティの値を設定しない場合、その値は既定値として扱われ、関連付けられている特定の関数では機能しません。全体的な動作には影響しません。

• 残りの部分については、値を Required プロパティに設定する必要があります。値がない場合、関数は機能しない可能性があります。

ここでは、ショートフォームにおける、ユーザー生成コンテンツ(UGC)のインストール方法について説明します。

UGC 編集ページのインストール

showShortformUgcEdit(config) 関数を呼び出すことで、ショートフォームの UGC を生成および編集できるページを読み込むことができます。 config オブジェクトを使用して必要な設定を渡すことができ、特定のイベント (保存、削除、閉じる) が完了すると、その時点で定義されたユーザー定義関数を実行できます。

次のように window.cloud.shoplive.showShortformUgcEdit(config)呼び出すことができます。

const config = {
  userId: 'USER_ID',
  userName: 'USER_NAME',
  profileImage: 'https://example.com/profile.jpg',
  shortsId: '123456789',
  skus: ['sku1', 'sku2'],
  tags: ['tag1', 'tag2'],
  onCustomSaveCompleted: (payload) => {
    console.log('Save completed:', payload);
  },
  onCustomDeleteCompleted: (payload) => {
    console.log('Delete completed:', payload);
  },
  onCustomCloseEdit: (payload) => {
    console.log('Edit closed:', payload);
  },
};

window.cloud.shoplive.showShortformUgcEdit(config);

UGC 関数呼び出しに必要な設定

export interface TShortsUGCConfig {
  shortsId?: string; // 作成時に生成されたショートフォームの固有ID
  userId: string; // クエリパラメータのユーザーID
  userName?: string; // クエリパラメータのユーザー名
  profileImage?: string; // クエリパラメータのプロフィール画像
  onCustomSaveCompleted?: (payload: TShortsUGCConfig) => void; // 保存完了時に実行できるカスタム関数
  onCustomDeleteCompleted?: (payload: TShortsUGCConfig) => void; // 削除完了時に実行できるカスタム関数
  tags?: string[]; // タグのリスト
  skus?: string[]; // 商品の固有IDリスト
  brandIdentifier?: string; // ブランド識別子
  onCustomCloseEdit?: (payload: TShortsUGCConfig) => void; // 詳細ページが閉じられる際に実行できるカスタム関数
}

クエスチョンマーク(?)でマークされたプロパティはオプションです。

• Optional プロパティの値を設定しない場合、その値は既定値として扱われ、関連付けられている特定の関数では機能しない場合があります。(一般的な機能の動作には影響しません)

• その他のプロパティは、値の入力は必須となります。値がない場合、関数が機能しない可能性があります。(現在、userId のみが必須です。）

UGCリストページのインストール

setShortformUgcList(containerId, config) 関数を呼び出すことで、ショートフォームの UGC リストページを特定のコンテナに動的に読み込むことができます。この関数は、UGC のリストを非同期的に取得し、指定したコンテナにレンダリングします。以下のように containerId と Config を指定して、ショートフォームリストを構成することができます。

const config = {
  userId: 'USER_ID',
};

window.cloud.shoplive.setShortformUgcList('ugc-list-container', config);

次の方法で、特定のページにショートフォームの UGC リストを読み込むことができます。

//shortform_ugc.html

{...}
<div id="my-page-view" />
<script>
window.cloud.shoplive.setShortformUgcList('ugc-list-container', {
  userId: 'USER_ID',
  userName: 'USER_NAME',
  profileImage: 'https://example.com/profile.jpg',
  shortsId: '123456789',
  skus: ['sku1', 'sku2'],
  tags: ['tag1', 'tag2'],
  onCustomSaveCompleted: (payload) => {
    console.log('保存完了:', payload);
  },
  onCustomDeleteCompleted: (payload) => {
    console.log('削除完了:', payload);
  },
  onCustomCloseEdit: (payload) => {
    console.log('編集終了:', payload);
  },
});
</script>

上記のコードは、次のように機能します。

1. userId の確認 :  config オブジェクトに userId がない場合は、警告メッセージが表示され、関数を終了します。

2. UGC の初期化を確認する : ショートフォームの UGC の初期化が完了していない場合は、タスクが完了するのを待ちます。

3. HTML 要素のチェック: 指定された containerId 対応する HTML コンポーネントがない場合は、警告メッセージを出力して終了します。

4. ショートフォームの UGC リストを読み込む : ショートフォームの UGC リストコンポーネントを非同期的に読み込み、リストをそのコンテナにレンダリングします。