# CloudWatch ダッシュボードのサンプルカスタムウィジェット
<a name="add_custom_widget_samples"></a>

AWS は、JavaScript と Python の両方でカスタムウィジェットのサンプルを提供します。これらのウィジェットのサンプルは、このリスト内の各ウィジェットのリンクを使用して作成できます。また、CloudWatch コンソールを使用してウィジェットを作成し、カスタマイズすることもできます。このリストのリンクから AWS CloudFormation コンソールを開き、[CloudFormation quick-create] のリンクを使用してカスタムウィジェットを作成します。

[GitHub](https://github.com/aws-samples/cloudwatch-custom-widgets-samples) で、カスタムウィジェットのサンプルにアクセスすることもできます。

このリストに続いて、言語ごとの Echo ウィジェットの完全な例が示されています。

------
#### [ JavaScript ]

**JavaScript のカスタムウィジェットのサンプル**
+ [Echo](https://console.aws.amazon.com/cloudwatch/cfn.js?region=us-east-1&action=create&stackName=customWidgetEcho-js&template=customWidgets/customWidgetEcho-js.yaml&param_DoCreateExampleDashboard=Yes) — 新しいウィジェットを作成することなく、カスタムウィジェットで HTML がどのように表示されるかをテストするために使用できる基本的な Echoer です。
+ [Hello world](https://console.aws.amazon.com/cloudwatch/cfn.js?region=us-east-1&action=create&stackName=customWidgetHelloWorld-js&template=customWidgets/customWidgetHelloWorld-js.yaml&param_DoCreateExampleDashboard=Yes) — 非常にベーシックなスターターウィジェットです。
+ [Custom widget debugger](https://console.aws.amazon.com/cloudwatch/cfn.js?region=us-east-1&action=create&stackName=customWidgetDebugger-js&template=customWidgets/customWidgetDebugger-js.yaml&param_DoCreateExampleDashboard=Yes) — Lambda ランタイム環境に関する有用な情報を表示するデバッガーウィジェットです。
+ [Query CloudWatch Logs Insights](https://console.aws.amazon.com/cloudwatch/cfn.js?region=us-east-1&action=create&stackName=customWidgetLogsInsightsQuery-js&template=customWidgets/customWidgetLogsInsightsQuery-js.yaml&param_DoCreateExampleDashboard=Yes) — CloudWatch Logs Insights でクエリを実行および編集します。
+ [Run Amazon Athena queries](https://console.aws.amazon.com/cloudwatch/cfn.js?region=us-east-1&action=create&stackName=customWidgetAthenaQuery-js&template=customWidgets/customWidgetAthenaQuery-js.yaml&param_DoCreateExampleDashboard=Yes) — Athena でクエリを実行および編集します。
+ [Call AWS API](https://console.aws.amazon.com/cloudwatch/cfn.js?region=us-east-1&action=create&stackName=customWidgetAwsCall-js&template=customWidgets/customWidgetAwsCall-js.yaml&param_DoCreateExampleDashboard=Yes) — 任意の読み取り専用 AWS API を呼び出し、結果を JSON 形式で表示します。
+ [Fast CloudWatch bitmap graph](https://console.aws.amazon.com/cloudwatch/cfn.js?region=us-east-1&action=create&stackName=customWidgetCloudWatchBitmapGraph-js&template=customWidgets/customWidgetCloudWatchBitmapGraph-js.yaml&param_DoCreateExampleDashboard=Yes) — サーバー側を使用して CloudWatch グラフをレンダリングし、高速表示します。
+ [Text widget from CloudWatch dashboard](https://console.aws.amazon.com/cloudwatch/cfn.js?region=us-east-1&action=create&stackName=customWidgetIncludeTextWidget-js&template=customWidgets/customWidgetIncludeTextWidget-js.yaml&param_DoCreateExampleDashboard=Yes) — 指定した CloudWatch ダッシュボードの最初のテキストウィジェットを表示します。
+ [CloudWatch metric data as a table](https://console.aws.amazon.com/cloudwatch/cfn.js?region=us-east-1&action=create&stackName=customWidgetCloudWatchMetricDataTable-js&template=customWidgets/customWidgetCloudWatchMetricDataTable-js.yaml&param_DoCreateExampleDashboard=Yes) — CloudWatch の生のメトリクスデータをテーブルに表示します。
+ [Amazon EC2 table](https://console.aws.amazon.com/cloudwatch/cfn.js?region=us-east-1&action=create&stackName=customWidgetEc2Table-js&template=customWidgets/customWidgetEc2Table-js.yaml&param_DoCreateExampleDashboard=Yes) — CPU 使用率が上位の EC2 インスタンスを表示します。このウィジェットには、デフォルトで無効になっている [再起動] ボタンも含まれます。
+ [AWS CodeDeploy デプロイ](https://console.aws.amazon.com/cloudwatch/cfn.js?region=us-east-1&action=create&stackName=customWidgetCodeDeploy-js&template=customWidgets/customWidgetCodeDeploy-js.yaml&param_DoCreateExampleDashboard=Yes) – CodeDeploy デプロイを表示します。
+ [AWS Cost Explorer レポート](https://console.aws.amazon.com/cloudwatch/cfn.js?region=us-east-1&action=create&stackName=customWidgetCostExplorerReport-js&template=customWidgets/customWidgetCostExplorerReport-js.yaml&param_DoCreateExampleDashboard=Yes) — 選択した時間範囲における AWS の各サービスのコストに関するレポートを表示します。
+ [Display content of external URL](https://console.aws.amazon.com/cloudwatch/cfn.js?region=us-east-1&action=create&stackName=customWidgetFetchURL-js&template=customWidgets/customWidgetFetchURL-js.yaml&param_DoCreateExampleDashboard=Yes) — 外部からアクセス可能な URL の内容を表示します。
+ [Display an Amazon S3 object](https://console.aws.amazon.com/cloudwatch/cfn.js?region=us-east-1&action=create&stackName=customWidgetS3GetObject-js&template=customWidgets/customWidgetS3GetObject-js.yaml&param_DoCreateExampleDashboard=Yes) — アカウントの Amazon S3 バケットにあるオブジェクトを表示します。
+ [Simple SVG pie chart](https://console.aws.amazon.com/cloudwatch/cfn.js?region=us-east-1&action=create&stackName=customWidgetSimplePie-js&template=customWidgets/customWidgetSimplePie-js.yaml&param_DoCreateExampleDashboard=Yes) — グラフィカルな SVG ベースのウィジェットの例です。

------
#### [ Python ]

**Python のカスタムウィジェットのサンプル**
+ [Echo](https://console.aws.amazon.com/cloudwatch/cfn.js?region=us-east-1&action=create&stackName=customWidgetEcho-py&template=customWidgets/customWidgetEcho-py.yaml&param_DoCreateExampleDashboard=Yes) － 新しいウィジェットを作成することなく、カスタムウィジェットで HTML がどのように表示されるかをテストするために使用できる基本的な Echoer です。
+ [Hello world](https://console.aws.amazon.com/cloudwatch/cfn.js?region=us-east-1&action=create&stackName=customWidgetHelloWorld-py&template=customWidgets/customWidgetHelloWorld-py.yaml&param_DoCreateExampleDashboard=Yes) — 非常にベーシックなスターターウィジェットです。
+ [Custom widget debugger](https://console.aws.amazon.com/cloudwatch/cfn.js?region=us-east-1&action=create&stackName=customWidgetDebugger-py&template=customWidgets/customWidgetDebugger-py.yaml&param_DoCreateExampleDashboard=Yes) — Lambda ランタイム環境に関する有用な情報を表示するデバッガーウィジェットです。
+ [Call AWS API](https://console.aws.amazon.com/cloudwatch/cfn.js?region=us-east-1&action=create&stackName=customWidgetAwsCall-py&template=customWidgets/customWidgetAwsCall-py.yaml&param_DoCreateExampleDashboard=Yes) — 任意の読み取り専用 AWS API を呼び出し、結果を JSON 形式で表示します。
+  [Fast CloudWatch bitmap graph](https://console.aws.amazon.com/cloudwatch/cfn.js?region=us-east-1&action=create&stackName=customWidgetCloudWatchBitmapGraph-py&template=customWidgets/customWidgetCloudWatchBitmapGraph-py.yaml&param_DoCreateExampleDashboard=Yes) — サーバー側を使用して CloudWatch グラフをレンダリングし、高速表示します。
+  [Send dashboard snapshot by email](https://console.aws.amazon.com/cloudwatch/cfn.js?region=us-east-1&action=create&stackName=customWidgetEmailDashboardSnapshot-py&template=customWidgets/customWidgetEmailDashboardSnapshot-py.yaml&param_DoCreateExampleDashboard=Yes) － 現在のダッシュボードのスナップショットを作成し、E メールの受信者に送信します。
+  [Send dashboard snapshot to Amazon S3](https://console.aws.amazon.com/cloudwatch/cfn.js?region=us-east-1&action=create&stackName=customWidgetSnapshotDashboardToS3-py&template=customWidgets/customWidgetSnapshotDashboardToS3-py.yaml&param_DoCreateExampleDashboard=Yes) — 現在のダッシュボードのスナップショットを作成し、Amazon S3 に保存します。
+ [Text widget from CloudWatch dashboard](https://console.aws.amazon.com/cloudwatch/cfn.js?region=us-east-1&action=create&stackName=customWidgetIncludeTextWidget-py&template=customWidgets/customWidgetIncludeTextWidget-py.yaml&param_DoCreateExampleDashboard=Yes) — 指定した CloudWatch ダッシュボードの最初のテキストウィジェットを表示します。
+ [Display content of external URL](https://console.aws.amazon.com/cloudwatch/cfn.js?region=us-east-1&action=create&stackName=customWidgetFetchURL-py&template=customWidgets/customWidgetFetchURL-py.yaml&param_DoCreateExampleDashboard=Yes) — 外部からアクセス可能な URL の内容を表示します。
+ [RSS reader](https://console.aws.amazon.com/cloudwatch/cfn.js?region=us-east-1&action=create&stackName=customWidgetRssReader-py&template=customWidgets/customWidgetRssReader-py.yaml&param_DoCreateExampleDashboard=Yes) — RSS フィードを表示します。
+ [Display an Amazon S3 object](https://console.aws.amazon.com/cloudwatch/cfn.js?region=us-east-1&action=create&stackName=customWidgetS3GetObject-py&template=customWidgets/customWidgetS3GetObject-py.yaml&param_DoCreateExampleDashboard=Yes) — アカウントの Amazon S3 バケットにあるオブジェクトを表示します。
+ [Simple SVG pie chart](https://console.aws.amazon.com/cloudwatch/cfn.js?region=us-east-1&action=create&stackName=customWidgetSimplePie-py&template=customWidgets/customWidgetSimplePie-py.yaml&param_DoCreateExampleDashboard=Yes) — グラフィカルな SVG ベースのウィジェットの例です。

------

**JavaScript での Echo ウィジェット**

以下は、JavaScript での Echo ウィジェットのサンプルです。

```
const DOCS = `
## Echo
A basic echo script. Anything passed in the \`\`\`echo\`\`\` parameter is returned as the content of the custom widget.
### Widget parameters
Param | Description
---|---
**echo** | The content to echo back
 
### Example parameters
\`\`\` yaml
echo: <h1>Hello world</h1>
\`\`\`
`;
 
exports.handler = async (event) => {
    if (event.describe) {
        return DOCS;   
    }
    
    let widgetContext = JSON.stringify(event.widgetContext, null, 4);
    widgetContext = widgetContext.replace(/</g, '&lt;');
    widgetContext = widgetContext.replace(/>/g, '&gt;');
    
    return `${event.echo || ''}<pre>${widgetContext}</pre>`;
};
```

**Python での Echo ウィジェット**

以下は、Python での Echo ウィジェットのサンプルです。

```
import json
     
DOCS = """
## Echo
A basic echo script. Anything passed in the ```echo``` parameter is returned as the content of the custom widget.
### Widget parameters
Param | Description
---|---
**echo** | The content to echo back
     
### Example parameters
``` yaml
echo: <h1>Hello world</h1>
```"""
 
def lambda_handler(event, context):
    if 'describe' in event:
        return DOCS
        
    echo = event.get('echo', '')
    widgetContext = event.get('widgetContext')
    widgetContext = json.dumps(widgetContext, indent=4)
    widgetContext = widgetContext.replace('<', '&lt;')
    widgetContext = widgetContext.replace('>', '&gt;')
        
    return f'{echo}<pre>{widgetContext}</pre>'
```

**Java での Echo ウィジェット**

以下は、Java での Echo ウィジェットのサンプルです。

```
package example;
 
import com.amazonaws.services.lambda.runtime.Context;
import com.amazonaws.services.lambda.runtime.RequestHandler;
 
import com.google.gson.Gson;
import com.google.gson.GsonBuilder;
 
public class Handler implements RequestHandler<Event, String>{
 
  static String DOCS = ""
    + "## Echo\n"
    + "A basic echo script. Anything passed in the ```echo``` parameter is returned as the content of the custom widget.\n"
    + "### Widget parameters\n"
    + "Param | Description\n"
    + "---|---\n"
    + "**echo** | The content to echo back\n\n"
    + "### Example parameters\n"
    + "```yaml\n"
    + "echo: <h1>Hello world</h1>\n"
    + "```\n";
 
  Gson gson = new GsonBuilder().setPrettyPrinting().create();
 
  @Override
  public String handleRequest(Event event, Context context) {
 
    if (event.describe) {
      return DOCS;
    }
     
    return (event.echo != null ? event.echo : "") + "<pre>" + gson.toJson(event.widgetContext) + "</pre>";
  }
}
     
class Event {
 
    public boolean describe;
    public String echo;
    public Object widgetContext;
 
    public Event() {}
 
    public Event(String echo, boolean describe, Object widgetContext) {
        this.describe = describe;
        this.echo = echo;
        this.widgetContext = widgetContext;
    }
}
```