> For the complete documentation index, see [llms.txt](https://docs.dashcomb.com/dashcomb-help-center/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.dashcomb.com/dashcomb-help-center/tips-and-tricks/upload-and-download-cvs.md).

# 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)