このページは Cloud Translation API によって翻訳されました。

Looker Studio コミュニティコンポーネント（dscc）ライブラリリファレンス

API の概要

dscc（Looker Studio コミュニティコンポーネント）は、Looker Studio のコミュニティコンポーネントコミュニティコンポーネントをご紹介しますソースコードは GitHub にあります。

dscc では、getWidth()、getHeight()、subscribeToData() の 3 つの関数が公開されています。

`getWidth()`

名前	パラメータ	戻り値の型	説明
getWidth()	なし	`number`	iframe の幅（ピクセル単位）を返します。

`getWidth()` の使用

// to get the width of the iframe
var width = dscc.getWidth();

`getHeight()`

名前	パラメータ	戻り値の型	説明
getHeight()	なし	`int`	iframe の高さ（ピクセル単位）を返します。

`getHeight()` の使用

// to get the height of the iframe
var height = dscc.getHeight();

sendInteraction()

sendInteraction() 関数は、データとともに Looker Studio にメッセージを送信します。指定します。

パラメータ:

名前	型	説明
actionID	`string`	設定内の actionId に対応する文字列
interaction	`enum(InteractionType)`	Looker に指示する Studio について操作
data	`object(InteractionData)`	インタラクションに必要なデータを提供します

`InteractionType`

現在、有効な InteractionType は FILTER のみです。

名前	型	説明
dscc.InteractionType.FILTER	Enum	`FILTER` インタラクションについて説明します。

`sendInteraction` の使用


// the actionID can either be hardcoded or parsed from the returned data
var actionId = "interactionConfigId";

// dscc provides enums for the interaction types
var FILTER = dscc.InteractionType.FILTER;

var fieldID = "qt_m9dtntutsb";
var dataValue = "Asia";

// sendInteraction expects data that tells you the concepts and the values of
// those concepts to use in constructing a filter.
var interactionData = {
  "concepts": [fieldId],
  "values": [[dataValue]]
}

dscc.sendInteraction(actionId, FILTER, interactionData);

`interactionData`

var interactionData = {
  "concepts": array(fieldId),
  "values": array(array(dataValue))
}

フィールド	タイプ	説明
コンセプト	`Array`	`fieldIds` の配列
values	`Array<Array>`	データ値のネストされた配列。各サブ配列は、`concepts` 配列の長さでなければなりません。サブ配列の各値は、ディメンション値に対応しています。v

サンプル interactionData:

var interactionData = {
  "concepts": ["dim1Id", "dim2Id"],
  "values": [
    ["dim1Val1", "dim2Val1"],
    ["dim1Val2", "dim2Val2"]
    ]
}

上記の interactionData での dscc.sendInteraction の使用は、次の SQL 文と同じです。

SELECT data WHERE
  (dim1 == dim1Val1 AND dim2 == dim2Val1)
  OR
  (dim1 == dim1Val2 AND dim2 == dim2Val2);

clearInteraction()

clearInteraction() 関数は、Looker Studio にメッセージを送信して、フィルタを設定します。

パラメータ:

名前	型	説明
actionID	`string`	設定内の actionId に対応する文字列
interaction	`enum(InteractionType)`	Looker Studio に以下の情報をインタラクション

`clearInteraction()` の使用


// the actionID can either be hardcoded or parsed from the returned data
var actionId = "interactionConfigId";

// dscc provides enums for the interaction types
var FILTER = dscc.InteractionType.FILTER;

dscc.clearInteraction(actionId, FILTER);

`subscribeToData(callback, options)`

subscribeToData() 関数は、Looker Studio からのメッセージをサブスクライブします。

パラメータ:

名前	型	説明
callback(data)	`function`	`subscribeToData` によって返されたデータを取得する関数。
options	`object`	目的のデータ戻り値形式を定義します。

オプションオブジェクトは次のようになります。

{
  transform: dscc.tableTransform | dscc.objectTransform
}

戻り値:

型	説明
`function`	Looker Studio からの今後のメッセージへの `callback` の登録を解除する

`subscribeToData()` の使用

// define and use a callback
var unsubscribe = dscc.subscribeToData(function(data){
  // console.log the returned data
  console.log(data);
}, {transform: dscc.tableTransform});

// to unsubscribe

unsubscribe();

`data`

これは、dscc.subscribeToData で登録された callback に渡されるオブジェクトです。次のフィールドは、dscc.objectFormat と dscc.tableFormat 間で共有されます。

{
  fields: object(fieldsByConfigId),
  style: object(styleById),
  interactions: object(interactionsById),
  theme: object(themeStyle),
  tables: object(tablesById),
  dateRanges: object(dateRangesById)
}

フィールド	タイプ	説明
fields	`object(fieldsByConfigId)`	configId によってインデックスに登録された fields を含むオブジェクト
style	`object(styleById)`	configId によってインデックスに登録された style オブジェクトを含むオブジェクト
interactions	`object(interactionsById)`	interaction オブジェクトを含むオブジェクト
theme	`themeStyle`	レポートのテーマスタイル情報を含む themeStyle オブジェクト
tables	`object(tablesById)`	tableObjects を含むオブジェクト
dateRanges	`object(dateRangesById)`	次を含むオブジェクト: dateRanges

fieldsByConfigId

{
   configId: array(field)
}

fieldsByConfigId オブジェクトには、ビジュアル表示設定で定義された「id」でインデックス登録された field オブジェクトの配列が含まれます。Google 構成で定義されている dataField ごとに、このオブジェクトに 1 つのエントリ。

フィールド	タイプ	説明
configId	`Array<field>`	dataField に関連付けられたフィールドの配列。

field

{
  id: fieldId,
  name: string,
  description: string,
  type: fieldType,
  concept: enum(conceptType)
}

field オブジェクトは、ユーザーがプロパティパネルで選択したフィールドに関する情報が提供されます。

フィールド	タイプ	説明
id	`string`	Looker Studio で生成されたフィールドの ID
name	`string`	人が読める形式のフィールド名
description	`string`	フィールドの説明
type	`enum(fieldType)`	フィールドの semanticType
concept	`enum(conceptType)`	フィールドの conceptType

styleById

{
   configId: styleValue
}

styleById オブジェクトでは、ビジュアル表示設定で定義された「id」によってインデックス登録されたスタイル情報が提供されます。

フィールド	タイプ	説明
configId	`styleValue`	スタイル値と設定で定義されたデフォルトスタイル値を含むオブジェクト

styleValue

{
  value: string | object | bool | number,
  defaultValue: string | object | bool | number
}

styleValue オブジェクトでは、ユーザーが選択したスタイル値と、設定で定義されたデフォルト値の両方が提供されます。value と defaultValue のタイプは、スタイル要素に依存します。

フィールド	タイプ	説明
value	`string OR object OR bool OR number`	プロパティパネルでユーザーが選択した設定から返されたスタイル要素の値
defaultValue	`string OR object OR bool OR number`	ビジュアル表示設定で定義されたスタイル要素のデフォルト値

interactionsById

{

}

interactionsById オブジェクトでは、interactionId ビジュアル表示設定によってインデックス登録されたインタラクションデータが提供されます。

インデックス	型	説明
configId	`interaction`	インタラクションに関連付けられたデータを含むオブジェクト

interactionField

{
  value: object(interactionValue),
  supportedActions: array(InteractionType)
}

interactionField オブジェクトには、設定で定義された supportedActions の配列と、ユーザーが選択したインタラクションの値が含まれます。

フィールド	タイプ	説明
value	`string OR object OR bool OR number`	プロパティパネルでユーザーが選択した設定から返されたスタイル要素の値
supportedActions	`Array<InteractionType>`	設定で定義された、このインタラクションによってサポートされるアクション

interactionValue

interactionValue オブジェクトでは、ユーザーが選択したインタラクションタイプの値が提供されます。data キーが存在する場合、InteractionData オブジェクトにはフィルタの現在の状態が反映されます。data キーが存在しない場合、ビジュアル表示は現在フィルタとして設定されていません。

{
  type: enum(InteractionType)
  data: object(interactionData) | None
}

フィールド	タイプ	説明
type	`enum(InteractionType)`	ユーザーが選択した InteractionType
data	`object(InteractionData)`	フィルタの現在の状態に関連付けられた data。フィルタが現在クリアされている場合、このキーは存在しません。

テーマ

{
  fillColor: {
    color: string,
    opacity: number
  },
  fontColor: {
    color: string,
    opacity: number
  },
  accentFillColor: {
    color: string,
    opacity: number
  },
  accentFontColor: {
    color: string,
    opacity: number
  },
  fontFamily: string,
  accentFontFamily: string,
  increaseColor: {
    color: string,
    opacity: number
  },
  decreaseColor: {
    color: string,
    opacity: number
  },
  gridColor: {
    color: string,
    opacity: number
  },
  seriesColor: [
    {
      color: string,
      opacity: number
    }
  ]
}

themeStyle オブジェクトでは、レポートテーマ情報がビジュアリゼーションに渡されます。

フィールド	タイプ	説明
fillColor	`object`	`{color: string, opacity: number}` 形式のオブジェクト
fontColor	`object`	`{color: string, opacity: number}` 形式のオブジェクト
accentFillColor	`object`	`{color: string, opacity: number}` 形式のオブジェクト
accentFontColor	`object`	`{color: string, opacity: number}` 形式のオブジェクト
fontFamily	`string`	フォントファミリーを説明する文字列
accentFontFamily	`string`	アクセント用フォントファミリーを説明する文字列
increaseColor	`object`	`{color: string, opacity: number}` 形式のオブジェクト
decreaseColor	`object`	`{color: string, opacity: number}` 形式のオブジェクト
gridColor	`object`	`{color: string, opacity: number}` 形式のオブジェクト
seriesColor	`Array<object>`	`{color: string, opacity: number}` 形式のオブジェクトの配列

tablesById

{
  "DEFAULT": object(tableObject),
  "COMPARISON": object(tableObject) | undefined
}

tableObject では、各行の見出しとデータ情報が提供されます。"DEFAULT" では常にデータが返され、"COMPARISON" は、ユーザーが比較行を使用してデータを設定する場合にのみ入力されます。

dscc.tableFormat と dscc.objectFormat では、tableObject の形式だけが異なります。

フィールド	タイプ	説明
"DEFAULT"	`object(tableObject) OR Array<objectRow>`	ユーザーがビジュアル表示に追加するデータに関連付けられた `tableObject`
"COMPARISON"	`object(tableObject) OR Array<objectRow>`	日付比較データに関連付けられた `tableObject`（該当する場合）

dateRangesById

{
  "DEFAULT": object(dateRange),
  "COMPARISON": object(dateRange)
}

dateRangesById オブジェクトは、デフォルトと比較に関する情報を提供します。期間。期間を指定しない場合、オブジェクトは空です。DEFAULT と COMPARISON は、それぞれの日付に該当する場合にのみ入力されます。範囲はユーザーが設定します。期間内のデータは tablesById で定義されているデフォルトの比較データ。

フィールド	タイプ	説明
「DEFAULT」	`object(dateRange)`	イベントに関連付けられた `dateRange` デフォルトの期間（該当する場合）
「比較」	`object(dateRange)`	`dateRange` に関連付けられた比較期間（該当する場合）

dateRange

{
  start: string,
  end: string
}

dateRange オブジェクトは、アクティビティの開始日と終了日に関する情報を提供します。デフォルトまたは比較の期間。

フィールド	タイプ	説明
start	`string`	期間の開始日（YYYYMMDD 形式）。
end	`string`	期間の終了日（YYYYMMDD 形式）。

`tableFormat` リファレンス

tableObject

{
  headers: array(object),
  rows: array(array)
}

フィールド	タイプ	説明
headers	`Array`	fields オブジェクトの配列。fields オブジェクトには、設定から取得した ID に対応する `configId` プロパティが追加されています。
rows	`Array<Array>`	配列の配列: 各配列はデータの行

サンプル `tableFormat` データ

オプションの dscc.tableFormat とともに dscc.subscribeToData() を使用して返されるサンプル data を以下に示します。

{
  "tables": {
    "DEFAULT": {
      "headers": [{
        "id": "qt_ky8sltutsb",
        "name": "dimension",
        "type": "TEXT",
        "concept": "DIMENSION",
        "configId": "configId1"
      }, {
        "id": "qt_b5bvmtutsb",
        "name": "second dim",
        "type": "TEXT",
        "concept": "DIMENSION"
        "configId": "configId1"
      }, {
        "id": "qt_m9dtntutsb",
        "name": "metric",
        "type": "NUMBER",
        "concept": "METRIC",
        "configId": "configId2"
      }],
      "rows": [
        ["Week 4", "lm", 55]
      ]
    },
    "COMPARISON": {
      "headers": [{
        "id": "qt_ky8sltutsb",
        "name": "dimension",
        "type": "TEXT",
        "concept": "DIMENSION",
        "configId": "configId1"
      }, {
        "id": "qt_b5bvmtutsb",
        "name": "second dim",
        "type": "TEXT",
        "concept": "DIMENSION"
        "configId": "configId1"
      }, {
        "id": "qt_m9dtntutsb",
        "name": "metric",
        "type": "NUMBER",
        "concept": "METRIC",
        "configId": "configId2"
      }],
      "rows": [
        ["Week 5", "no", 123]
      ]
    }
  },
  "fields": {
    "configId1": [
      {
        "id": "qt_ky8sltutsb",
        "name": "week",
        "type": "TEXT",
        "concept": "DIMENSION"
      },
      {
        "id": "qt_b5bvmtutsb",
        "name": "textId",
        "type": "TEXT",
        "concept": "DIMENSION"
      }
    ],
    "configId2": [
      {
        "id": "qt_m9dtntutsb",
        "name": "orders",
        "type": "NUMBER",
        "concept": "METRIC"
      }
    ]
  },
  "style": {
    "nodeColor": {
      "value": {
        "color": "#000000"
      }
    }
  },
  "theme": {},
  "dateRanges": {
    "DEFAULT": {
      "start": "20210501",
      "end": "20210531"
    },
    "COMPARISON": {
      "start": "20200501",
      "end": "20200531"
    }
  },
  "interactions": {
    "onClick": {
      "value": {
        "type": "FILTER",
        "data": {
          "concepts": [
            "qt_h6oibrb6wb",
            "qt_i6oibrb6wb"
          ],
          "values": [
            [
              "Afternoon",
              "Sunday"
            ],
            [
              "Afternoon",
              "Thursday"
            ],
            [
              "Morning",
              "Tuesday"
            ]
          ]
        }
      },
      "supportedActions": [
        "FILTER"
      ]
    }
  }
}

objectFormat リファレンス

objectRow

{
  configId1: array(string | bool | number),
  configId2: array(string | bool | number)
}

フィールド	タイプ	説明
configId	array	特定の設定 ID に関連付けられた値の配列

objectFormat のサンプルデータ

オプションの dscc.objectFormat とともに dscc.subscribeToData() を使用して返されるサンプル data を以下に示します。

{
  "tables": {
    "COMPARISON": [
      {
        "configId1": ["Week 5", "cd"],
        "configId2": [123]
      }
    ],
    "DEFAULT": [
      {
        "configId1": ["Week 1", "ab"],
        "configId2": [24]
      }
    ]
  },
  "fields": {
    "configId1": [
      {
        "id": "qt_h6oibrb6wb",
        "name": "time of day",
        "type": "TEXT",
        "concept": "DIMENSION"
      },
      {
        "id": "qt_i6oibrb6wb",
        "name": "day",
        "type": "TEXT",
        "concept": "DIMENSION"
      }
    ],
    "configId2": [
      {
        "id": "qt_m9dtntutsb",
        "name": "metric",
        "type": "NUMBER",
        "concept": "METRIC"
      }
    ]
  },
  "style": {
    "nodeColor": {
      "value": {
        "color": "#000000"
      }
    }
  },
  "theme": {},
  "dateRanges": {
    "DEFAULT": {
      "start": "20210501",
      "end": "20210531"
    },
    "COMPARISON": {
      "start": "20200501",
      "end": "20200531"
    }
  },
  "interactions": {
    "onClick": {
      "value": {
        "type": "FILTER",
        "data": {
          "concepts": [
            "qt_h6oibrb6wb",
            "qt_i6oibrb6wb"
          ],
          "values": [
            [
              "Afternoon",
              "Sunday"
            ],
            [
              "Afternoon",
              "Thursday"
            ],
            [
              "Morning",
              "Tuesday"
            ]
          ]
        }
      },
      "supportedActions": [
        "FILTER"
      ]
    }
  }
}

Looker Studio コミュニティ コンポーネント（dscc）ライブラリ リファレンス

API の概要

getWidth()

getWidth() の使用

getHeight()

getHeight() の使用

sendInteraction()

InteractionType

sendInteraction の使用

interactionData

clearInteraction()

clearInteraction() の使用

subscribeToData(callback, options)

subscribeToData() の使用

data

fieldsByConfigId

field

styleById

styleValue

interactionsById

interactionField

interactionValue

テーマ

tablesById

dateRangesById

dateRange

tableFormat リファレンス

tableObject

サンプル tableFormat データ

objectFormat リファレンス

objectRow

objectFormat のサンプルデータ

Looker Studio コミュニティコンポーネント（dscc）ライブラリリファレンス

`getWidth()`

`getWidth()` の使用

`getHeight()`

`getHeight()` の使用

`InteractionType`

`sendInteraction` の使用

`interactionData`

`clearInteraction()` の使用

`subscribeToData(callback, options)`

`subscribeToData()` の使用

`data`

`tableFormat` リファレンス

サンプル `tableFormat` データ