このページは 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 オブジェクトの配列が含まれます。このオブジェクトには、構成で定義された 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`（該当する場合）。
「COMPARISON」	`object(dateRange)`	比較の期間に関連付けられた `dateRange`（該当する場合）。

dateRange

{
  start: string,
  end: string
}

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

項目	種類	説明
開始	`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` データ