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

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

***

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

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

### 準備

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

### 実現

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

### 参照項目

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

***

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

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

### 準備

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

### 実現

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

### 参照項目

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