すべてのプロダクト
Search

このプロダクト

    DataV:ターンテーブル抽選

    ドキュメントセンター

    DataV:ターンテーブル抽選

    最終更新日:Jun 17, 2026

    ターンテーブル抽選コンポーネントのチャートスタイル、データフィールド、インタラクション設定を構成します。

    チャートスタイル

    ターンテーブル抽選は、回転する賞品ホイールをシミュレートしてランダムな抽選を行います。image

    設定パネル

    image

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

    • 回転時間: ターンテーブルが回転する持続時間 (ミリ秒 (ms))。

    • [回転数]：指定された回転時間内にターンテーブルが完了する完全な回転数。

    • [ボタン]：ターンテーブル上の抽選ボタンのスタイル。

      パラメーター

      説明

      ボタンサイズ

      ボタンの幅と高さ (ピクセル (px) 単位)。

      垂直方向の間隔

      ボタンとターンテーブルの中心との垂直距離 (ピクセル (px) 単位)。

      ボタンイメージ

      ボタンイメージをカスタマイズします。リモートイメージを使用するには、入力ボックスに URL を入力します。イメージボックスの [プレビュー] をクリックすると、拡大表示されます。イメージを変更するには、イメージ入力ボックスの下の破線ボックスにある [変更] をクリックします。イメージデザインアセットの変更に関する詳細については、「UI 機能の説明」をご参照ください。

    • [ターンテーブル]：テキスト、セクター、イメージなど、ターンテーブルのコンテンツのスタイル。

      パラメーター

      説明

      テキストスタイル

      ターンテーブル上のテキストのフォントファミリー、太さ、サイズ、色。

      [テキスト間隔]

      ターンテーブル上のテキスト要素間の間隔 (ピクセル (px) 単位)。

      行の高さ

      折り返されたテキストの行の高さ (ピクセル (px) 単位)。

      [折り返し文字数]

      テキストが折り返されるまでの 1 行あたりの文字数。

      セクターの色

      各ターンテーブルセクターの色。加号图标 または 垃圾桶图标 アイコンをクリックして、カラーシリーズを追加または削除します。横排列图标 または 竖排列图标 アイコンをクリックして、カラーシリーズを並べ替えます。复制图标 アイコンをクリックして、カラーシリーズを複製します。

      [カラー]：現在のシリーズのセクターの塗りつぶしの色。

      [賞品イメージの表示]

      ターンテーブル上の賞品イメージの表示を切り替えます。有効にすると、次のパラメーターを設定します。

      • [イメージサイズ]：賞品イメージの幅と高さ (ピクセル単位)。

      • イメージの間隔: 景品イメージ間の間隔 (px) です。これには [水平方向の間隔] と [垂直方向の間隔] が含まれます。

      [枠線の色]

      ターンテーブル上の枠線の色。

      背景画像

      ターンテーブルの背景イメージをカスタマイズします。リモートイメージを使用するには、入力ボックスに URL を入力します。イメージボックスの [プレビュー] をクリックすると、拡大表示されます。イメージ入力ボックスの下の破線ボックスにある [変更] をクリックして、イメージを置き換えます。詳細については、「UI 機能の使用」をご参照ください。

    データパネル

    image

    設定フィールド

    フィールド

    説明

    name

    賞の名前。

    imgSrc

    賞品のイメージ。

    インタラクションパネル

    image

    [抽選クリック時]：[有効化] を選択して、このコンポーネントのインタラクションを有効にします。抽選ボタンがクリックされると、データリクエストがトリガーされ、コールバック値が発行され、データが動的にターンテーブルにロードされます。デフォルトでは、name と imgSrc の値が発行されます。詳細については、「デジタルフリップカードコンポーネントのコールバック ID の設定方法」をご参照ください。

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

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

    3. ブループリントエディターの設定ページで、インポートノードバーの [ターンテーブル抽選] コンポーネントをクリックします。キャンバス上でターンテーブル抽選のブループリントエディター設定パラメーターを表示できます (次の図を参照)。Blueprint parameters

      • [イベント]

        イベント

        説明

        [Describe API リクエスト完了時]

        データ API リクエストが返され、フィルターによって処理された後にトリガーされます。処理されたデータを JSON 形式で返します。データ例については、キャンバスエディターのコンポーネント設定パネルの [データ] タブにある [データ応答] エリアをご参照ください。

        [API 記述リクエスト失敗時]

        ネットワークの問題または API エラーによりデータ API リクエストが失敗した場合にトリガーされます。フィルター処理後に処理されたデータを JSON 形式で返します。データ例については、キャンバスエディターのコンポーネント設定パネルの [データ] タブにある [データ応答] エリアをご参照ください。

        [ラッキー抽選クリック時]

        抽選ボタンがクリックされたときにトリガーされます。対応する賞品アイテムのデータを含むオブジェクトを返します。返されるデータのサンプルは次のとおりです。

        return{
  "name": "",   // 賞品の名前。
  "imgSrc": ""  // 賞品のイメージ。
}

      • [アクション]

        アクション

        説明

        リクエスト API の説明

        上流のデータ処理ノードまたはレイヤーノードから出力されたデータをパラメーターとして使用し、サーバーからデータを再リクエストします。たとえば、API データソースが https://api.test で、[API 記述をリクエスト] に渡されるデータが { id: '1'} の場合、最終的なリクエスト URL は https://api.test?id=1 になります。

        [API 記述をインポート]

        コンポーネントが必要とする形式でデータをインポートし、サーバーからデータを再リクエストせずにコンポーネントを再描画します。データ例については、キャンバスエディターのコンポーネント設定パネルの [データ] タブにある [データ応答] エリアをご参照ください。

        [回転開始]

        ターンテーブルの回転を開始します。パラメーターは不要です。

        [コンポーネント設定を更新]

        コンポーネントのスタイル設定を動的に更新します。まず、コンポーネントの [設定] パネルで [設定をクリップボードにコピー] をクリックして設定データを取得します。次に、ブループリントエディターの設定ページで、データ処理ノードのターゲットスタイルのフィールド値を変更します。

        表示

        コンポーネントを表示します。サンプルデータは次のとおりです。

        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"
  }
};

        [移動]

        コンポーネントを指定した位置に移動します。サンプルデータは次のとおりです。

        return {
  // 移動タイプ: 'to' は絶対配置、'by' は相対配置。デフォルト: 'to'。
  "positionType": "to",
  // x 座標と y 座標で指定されるターゲット位置。
  "attr": {
    "x": 0,
    "y": 0
  },
  // アニメーション設定。
  "animation": {
    "enable": false,
    // アニメーションの長さ。
    "animationDuration": 1000,
    // アニメーションのイージング関数。オプション値: linear、easeInOutQuad、easeInOutExpo。
    "animationEasing": "linear"
  }
};