# CSV/JSONデータのインポートとダウンロード

Dashcombが提供する[UIコンポーネント](/dashcomb-help-center/ide/ui-component.md)を使って、CSVファイルやJSONデータのインポートとダウンロードが簡単に実現できます。

***

## CSV/JSONデータのインポート <a href="#import" id="import"></a>

[Importer](/dashcomb-help-center/ide/ui-component/importer.md)、[Table](/dashcomb-help-center/ide/ui-component/table.md)、[Button](/dashcomb-help-center/ide/ui-component/ui-component-button.md)や[クエリ領域](/dashcomb-help-center/ide/query-region.md)のオートメーションを使って、CSV/JSONのインポートが実現できます。

### 準備

* Dashcomb以外のところでDashcombがサポートしているデータベースを用意します。
* このデータベースの連携先になる管理画面を作成しておきます。

### 実現

* 管理画面に[Importer](/dashcomb-help-center/ide/ui-component/importer.md)をドラッグ＆ドロップします。
  * 例えば、オブジェクト名は `importer1` とします。
* 右側の[プロパティ領域](/dashcomb-help-center/ide/property-region.md)を開きます。
* 「データ」の「フォーマット」に「CSV」か「JSON」を選びます。
* 管理画面に確認用の[Table](/dashcomb-help-center/ide/ui-component/table.md)をドラッグ＆ドロップします。
* 右側の[プロパティ領域](/dashcomb-help-center/ide/property-region.md)を開きます。
* 「データ」の「ソースデータ」に `{{importer1.value}}` を入力します。
* インポート用のファイルを[Importer](/dashcomb-help-center/ide/ui-component/importer.md)エリアにドラッグ＆ドロップします。
* すると、そのファイルのデータが確認用の[Table](/dashcomb-help-center/ide/ui-component/table.md)に表示されます。
* [クエリ領域](/dashcomb-help-center/ide/query-region.md)で「オートメーション」タブをクリックします。
* 「+」アイコンを押して、オートメーション名を作成します。
  * 例えば、その名前は `automation1` とします。
* 「アクション」に「スマートデータ取り込み」を選びます。
* 「ソースデータ」に `{{importer1.value}}` を入力します。
* 「送信先データソース」にターゲットのデータベースを選びます。
* 「送信先テーブル」にターゲットのテーブルを選びます。
* 「データフィールドマッピング」ではCSV/JSONデータの項目をテーブルのコラムにマッピングします。
* 「実行前アクション」に「アクション無し」、「確認」、「承認」を選べることができます。
  * ここでは初期の「アクション無し」を選びます。
* 「成功時」、「失敗時」の「アクション」や「通知」を設定します。
  * 設定方法の詳細は[アクションエディタ](/dashcomb-help-center/ide/property-region/action-editor.md)にご参考ください。
  * ここでは全て初期の「アクション無し」を選びます。
* 「保存」ボタンを押すと、インポート用のオートメーションの作成ができました。
* 管理画面にインポート実行用の[Button](/dashcomb-help-center/ide/ui-component/ui-component-button.md)をドラッグ＆ドロップします。
* 該当[Button](/dashcomb-help-center/ide/ui-component/ui-component-button.md)の[プロパティ領域](/dashcomb-help-center/ide/property-region.md)を開きます。
* 「アクション」の「onClick」の横にある[アクションエディタ](/dashcomb-help-center/ide/property-region/action-editor.md)アイコンをクリックします。
* [アクションエディタ](/dashcomb-help-center/ide/property-region/action-editor.md)の「タイプ」に「クエリ実行」を選び、「クエリ」に先ほど作成したオートメーション名を選びます。
* 「保存」ボタンを押すと、CSV/JSONデータのインポート機能が完成です。

### 参照項目

* [Importer](/dashcomb-help-center/ide/ui-component/importer.md)
* [Tableの使い方](/dashcomb-help-center/ide/ui-component/table.md)
* [Buttonの使い方](/dashcomb-help-center/ide/ui-component/ui-component-button.md)
* [アクションエディタ](/dashcomb-help-center/ide/property-region/action-editor.md)

***

## CSVファイルのダウンロード <a href="#download" id="download"></a>

[Table](/dashcomb-help-center/ide/ui-component/table.md)を使って、CSVファイルのダウンロードが実現できます。

### 準備

* 管理画面にデータ表示用の[Table](/dashcomb-help-center/ide/ui-component/table.md)を用意します。
  * 固定データでも動的なデータでも構いません。

### 実現

* [Table](/dashcomb-help-center/ide/ui-component/table.md)の[プロパティ領域](/dashcomb-help-center/ide/property-region.md)を開きます。
* 「データ」の「CSVダウンロードボタンを表示」をONにすると、[Table](/dashcomb-help-center/ide/ui-component/table.md)の左下に「CSV Download」ボタンが表示されます。
* 「保存」ボタンを押すと、CSVファイルのダウンロード機能が完成です。

### 参照項目

* [Tableの使い方](/dashcomb-help-center/ide/ui-component/table.md)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.dashcomb.com/dashcomb-help-center/tips-and-tricks/upload-and-download-cvs.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.