DataV:抽選カルーセル

グラフスタイル

抽選カルーセルは、スピニングリールをシミュレートして、ランダムに賞品を選択します。

設定パネル

• 設定項目を検索：Canvas エディターの右側のパネルで、[設定] タブをクリックし、右上隅の [設定項目を検索] をクリックします。[検索] ボックスに必須の設定項目を入力し、検索アイコンをクリックすると、設定項目をすばやく見つけることができます。あいまい一致がサポートされています。詳細については、「設定項目を検索」をご参照ください。
• サイズ：ウィジェットのサイズを示し、幅と高さをピクセル単位で指定します。 アイコンをクリックすると、ウィジェットの幅と高さを比例して調整できます。このアイコンをもう一度クリックすると、必要に応じて幅と高さを調整できます。
• 位置: ピクセル単位の [X] 座標と [Y] 座標で示されるウィジェットの位置。 [X 座標] は、ウィジェットの左上隅とキャンバスの左の罫線との間のピクセル距離を示します。 [Y 座標] は、ウィジェットの左上隅とキャンバスの上の罫線との間のピクセル距離を示します。
• 回転角度：ウィジェットの中心点を回転点として使用する回転の角度です。単位は度 (°) です。次のいずれかの方法でウィジェットの回転角度をコントロールできます：
  • [回転角度] スピンボックスに直接度数を入力するか、プラス記号 (+) またはマイナス記号 (-) をクリックして値を増減させます。
  • アイコンの黒い点をドラッグします。
  • アイコンをクリックして、ウィジェットを水平方向に反転させます。
  • アイコンをクリックして、ウィジェットを垂直方向に反転させます。
• 不透明度: ウィジェットの不透明度です。有効な値は 0 と 1 です。このパラメーターを [0] に設定するとウィジェットは非表示になり、[1] に設定すると完全に表示されます。デフォルト値は [1] です。

• コンテンツ：賞品アイテム、ヒットエリア、「当選なし」の状態を設定します。

  パラメーター	説明
  賞品	賞品のスタイルを設定します。 レイアウト：賞品のレイアウトです。オプション：[水平] または [垂直]。 方向：アニメーション中に賞品が移動する方向です。オプション：[左] または [右]。 表示数：カルーセルに表示される賞品の数です。デフォルト値：7。 賞品のサイズ：各賞品の幅と高さをピクセル (px) 単位で指定します。 賞品コンテンツ：各賞品のコンテンツを設定します。 アイコンをクリックして賞品を追加するか、 アイコンをクリックして賞品を削除します。 または アイコンをクリックして賞品の順序を変更します。 アイコンをクリックして、選択した賞品を複製します。 ID：賞品の一意の識別子です。 名前：賞品のカスタム名です。 イメージ：賞品のイメージです。リモートサーバーのイメージを使用するには、その URL を入力します。[プレビュー] をクリックしてイメージの拡大版を表示します。破線ボックス内の [変更] をクリックしてイメージアセットを変更します。詳細については、「UI アセットの管理」をご参照ください。 説明 データパネルの data フィールドにデータが設定されている場合、このパネルの設定よりも優先されます。
  ヒットエリア	当選を決定するヒットエリアを定義します。 モード：ヒットエリアのモードです。オプション：[デバッグモード] または [通常モード]。 位置：ヒットエリアの位置です。オプション：[先頭]、[中央]、または [末尾]。この設定は、[カスタム位置] スイッチがオフの場合にのみ使用できます。 カスタム位置：ヒットエリアのカスタム水平位置をピクセル (px) 単位で指定します。 アイコンをクリックして、この設定を表示または非表示にします。 サイズ：ヒットエリアの幅と高さをピクセル (px) 単位で指定します。 ボーダー半径：ヒットエリアの角の半径をピクセル (px) 単位で指定します。 塗りつぶしの色：ヒットエリアのカスタム塗りつぶし色です。 枠線：線の種類、幅、色など、ヒットエリアの枠線スタイルです。
  当選なし	「当選なし」の結果の表示を設定します。 ID：「当選なし」の結果の識別子です。 名前：「当選なし」の結果に表示するカスタム名です。 イメージ：「当選なし」の結果のカスタムイメージです。リモートサーバーのイメージを使用するには、その URL を入力します。[プレビュー] をクリックしてイメージの拡大版を表示します。破線ボックス内の [変更] をクリックしてイメージアセットを変更します。詳細については、「UI アセットの管理」をご参照ください。 説明 賞品が当選しなかった場合に返されるデータ値を定義します。

• アニメーション：抽選カルーセルのアニメーション動作を設定します。

  パラメーター	説明
  アイテム速度	各賞品アイテムのスクロール時間 (秒単位) です。
  増分速度	各賞品が当選した後に速度が増加する量です。アニメーションをクリアまたは再起動すると、速度はリセットされます。 アイコンをクリックして、この設定を表示または非表示にします。
  中央エリアのアニメーション	中央エリアのアニメーション再生方法です。オプション：[固定] または [スクロール]。[スクロール] を選択すると、[スクロール速度] を設定できます。

• インタラクション：抽選カルーセルのインタラクション動作を設定します。

  パラメーター	説明
  難易度	賞品を獲得するための難易度です。オプション：[簡単]、[普通]、または [難しい]。 説明 簡単：賞品の一部がヒットエリアと重複すると当選となります。普通：当選するには、賞品の少なくとも 3 分の 1 がヒットエリアと重複する必要があります。難しい：当選するには、賞品の少なくとも 5 分の 4 がヒットエリアと重複する必要があります。
  抽選後に一時停止	有効にすると、各抽選後にアニメーションが一時停止します。無効にすると、続行します。

データパネル

フィールド

インタラクションパネル

描画：[有効] を選択すると、コンポーネントのインタラクティブ機能が有効になります。 描画がトリガーされると、コンポーネントはデータリクエストを送信し、コールバック値を返してデータを動的にロードします。 デフォルトでは、id、title、および url の値が返されます。 詳細については、「コンポーネントのコールバック ID 設定」をご参照ください。

ブループリントエディターのインタラクション

1. Canvas エディターで、レイヤーパネルのウィジェットを右クリックし、[ブループリントエディターに追加] を選択します。
2. ページの左上隅にある アイコンをクリックします。

3. ブループリントエディターの設定ページで、インポートされたノードペインの [抽選カルーセル] コンポーネントをクリックします。抽選カルーセルの設定パラメーターが、次の図に示すようにキャンバスに表示されます。

   • イベント

     イベント	説明
     データリクエスト成功時	データリクエストが成功し、フィルターが応答を処理した後にトリガーされます。処理されたデータを JSON 形式で返します。データサンプルについては、キャンバスエディターのコンポーネント設定パネルの [データ] タブにある [データ応答] エリアをご参照ください。
     データリクエスト失敗時	ネットワークまたは API エラーによりデータリクエストが失敗し、フィルターが応答を処理した後にトリガーされます。処理されたデータを JSON 形式で返します。データサンプルについては、キャンバスエディターのコンポーネント設定パネルの [データ] タブにある [データ応答] エリアをご参照ください。
     描画	賞品が抽選されたときにトリガーされます。当選したアイテムのデータをオブジェクトとして返します。次の例はデータ構造を示しています。 return { "id": "", // 賞品の ID。 "title": "", // 賞品の名前。 "url": "" // 賞品イメージの URL。 }

   • アクション

     アクション	説明
     データのリクエスト	データソースリクエストを再送信し、上流ノードからのデータをパラメーターとして追加します。たとえば、抽選カルーセルが https://api.test の API データソースで設定され、データ { id: '1'} が [データのリクエスト] アクションに渡された場合、最終的なリクエスト URL は https://api.test?id=1 になります。
     データのインポート	事前フォーマット済みのコンポーネントデータをインポートし、新しいデータソースリクエストを送信せずにコンポーネントを再描画します。データサンプルについては、キャンバスエディターのコンポーネント設定パネルの [データ] タブにある [データ応答] エリアをご参照ください。
     アニメーションを開始	カルーセルアニメーションを開始します。パラメーターは不要です。
     アニメーションを一時停止	カルーセルアニメーションを一時停止します。パラメーターは不要です。
     描画	抽選をトリガーします。パラメーターは不要です。
     アニメーションを再開	カルーセルアニメーションを再開します。パラメーターは不要です。
     アニメーションを終了	カルーセルアニメーションを終了します。パラメーターは不要です。
     コンポーネント設定の更新	コンポーネントのスタイル設定を動的に更新します。まず、コンポーネントの [設定パネル] で [設定をクリップボードにコピー] をクリックして設定データをコピーします。次に、ブループリントエディターのデータ処理ノードを使用して、必須のフィールド値を変更します。
     表示	コンポーネントを表示します。データ構造は次のとおりです： return { "animationType": "", "animationDuration": 1000, "animationEasing": "linear" };
     非表示	コンポーネントを非表示にします。データ構造は次のとおりです： return { "animationType": "", "animationDuration": 1000, "animationEasing": "linear" };
     表示/非表示の切り替え	コンポーネントの表示/非表示を切り替えます。データ構造は次のとおりです： return { "animationIn": { "animationType": "", "animationDuration": 1000, "animationEasing": "linear" }, "animationOut": { "animationType": "", "animationDuration": 1000, "animationEasing": "linear" } };
     移動	コンポーネントを指定した位置に移動します。positionType を絶対位置の場合は to に、相対位置の場合は by に設定します。アニメーション設定も構成できます。 return { "positionType": "to", "attr": { "x": 0, "y": 0 }, "animation": { "enable": false, "animationDuration": 1000, "animationEasing": "linear" } };