# CloudWatch のカスタムウィジェットの詳細
<a name="add_custom_widget_dashboard_about"></a>

カスタムウィジェットでは次のようなことができます。

1. CloudWatch ダッシュボードは、ウィジェットコードを含む Lambda 関数を呼び出します。これは、ウィジェットで定義された任意のカスタムパラメータを渡します。

1. Lambda 関数は、HTML、JSON、または Markdown の文字列を返します。Markdown は、次の形式で JSON として返されます。

   ```
   {"markdown":"{{markdown content}}"}
   ```

1. ダッシュボードに、返された HTML または JSON が表示されます。

関数が HTML を返す場合、ほとんどの HTML タグがサポートされます。カスケードスタイルシート (CSS) スタイルとスケーラブルベクターグラフィックス (SVG) を使用すれば、洗練されたビューを構築できます。

リンクやテーブルなどの HTML 要素のデフォルトのスタイルは、CloudWatch ダッシュボードのスタイルに従います。`<style>` タグを使用してインラインスタイルを使用することで、このスタイルをカスタマイズできます。また、`cwdb-no-default-styles` のクラスで単一の HTML 要素を含めることで、デフォルトのスタイルを無効化することができます。次の `<div class="cwdb-no-default-styles"></div>` の例では、デフォルトのスタイルを無効化します。

カスタムウィジェットから Lambda へのすべての呼び出しには、以下の内容の `widgetContext` 要素が含まれ、Lambda 関数のデベロッパーに有用なコンテキスト情報を提供します。

```
{
  "widgetContext": {
    "dashboardName": "Name-of-current-dashboard",
    "widgetId": "widget-16",
    "accountId": "012345678901",
    "locale": "en",
    "timezone": {
      "label": "UTC",
      "offsetISO": "+00:00",
      "offsetInMinutes": 0
    },
    "period": 300,
    "isAutoPeriod": true,
    "timeRange": {
      "mode": "relative",
      "start": 1627236199729,
      "end": 1627322599729,
      "relativeStart": 86400012,
      "zoom": {
        "start": 1627276030434,
        "end": 1627282956521
      }
    },
    "theme": "light",
    "linkCharts": true,
    "title": "Tweets for Amazon website problem",
    "forms": {
      "all": {}
    },
    "params": {
      "original": "param-to-widget"
    },
    "width": 588,
    "height": 369
  }
}
```

## デフォルトの CSS スタイル設定
<a name="add_custom_widget_styling"></a>

カスタムウィジェットには、次のデフォルトの CSS スタイルの要素が用意されています。
+ CSS クラスの **btn** を使用してボタンを追加します。これは、次の例のように、アンカー (`<a>`) をボタンに変えます。

  ```
  <a class="btn" href=https://amazon.com”>Open Amazon</a>
  ```
+ CSS クラスの **btn btn-primary** を使用して、主ボタンを追加できます。
+ デフォルトでは、**テーブル**、**選択**、**ヘッダー (h1、h2、h3)**、**書式付きテキスト (前)**、**インプット** および**テキスト領域**の要素にスタイルが設定されます。

## describe パラメータを使用する
<a name="add_custom_widget_describe"></a>

空の文字列を返すだけの場合でも、関数の **describe** パラメータをサポートすることを強くお勧めします。サポートされていない状態でカスタムウィジェットで呼び出されると、ウィジェットの内容がドキュメントのような形式で表示されます。

**describe** パラメータを含めると、Lambda 関数はドキュメントを Markdown 形式で返し、他には何も実行しません。

コンソールでカスタムウィジェットを作成する場合、Lambda 関数を選択すると、[**Get documentation**] (ドキュメントを取得) ボタンが表示されます。このボタンをクリックすると、**describe** パラメータを使用して関数が呼び出され、関数のドキュメントが返されます。ドキュメントが Markdown 形式で適切にフォーマットされている場合、CloudWatch は YAML の 3 つの単一のバックティック文字 (```) で囲まれたドキュメントの最初のエントリを解析します。その後、パラメータ内のドキュメントが自動的に入力されます。以下は、そのように適切にフォーマットされたドキュメントの例です。

```
``` yaml
echo: <h1>Hello world</h1>
```
```