---
title: フォーム画面を構築する
description: Kurocoを利用したプロジェクトで、フォームの利用方法を紹介します。
---

import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';

Kurocoを利用したプロジェクトで、フォームの利用方法を紹介します。

:::info
本チュートリアルでは以下のバージョンでコードを書いています。  
Nuxt2: v2.15.8  
Nuxt3: v3.8.0  
:::

:::info
このページはKurocoでのプロジェクトが構築済みであることを前提としています。    
まだ構築していない場合は、下記のチュートリアルを参照してください。  
Nuxt.js：[Kurocoビギナーズガイド](/ja/docs/tutorials/beginners-guide/)  
:::

## Kurocoにおけるフォームとは

Kurocoにおけるフォームとは、HTMLフォームの作成支援のためのデータの定義、自動返信の設定、ユーザーから送信されたフォーム用データの閲覧などができる機能です。

フォームの設定は、管理画面の[キャンペーン]の[フォーム]から管理/設定ができます。  

![Image from Gyazo](https://t.gyazo.com/teams/diverta/e4b68551bb59dd0143277bb578e63969.png)

詳細は下記を参照してください。
- [フォーム一覧](/ja/docs/management/inquiry-forms/)
- [フォーム基本設定](/ja/docs/management/inquiry-basic-settings/)
- [フォーム項目設定](/ja/docs/management/form-field-settings/)

フォームへの回答の送信はAPIを通して行われますので、各種設定とフロントエンド側のコーディングが必要となります。
この記事では、フロントエンドからKurocoのフォームに回答を送信する手順を紹介します。

## フォームのデータを作成する
### フォームを作成する
まず、フォーム定義を作成します。
[フォーム一覧](/ja/docs/management/inquiry-forms/)画面より、[フォーム追加]をクリックします。

![Image (fetched from Gyazo)](https://t.gyazo.com/teams/diverta/4e6e66adf2ce4714165e2d1dc66cbf55.png)
新規フォーム作成画面が表示されるので、[フォーム基本設定](/ja/docs/management/inquiry-basic-settings/)を参考に、動作確認用のフォーム定義を入力します。今回は下記のように設定しました。

![Image (fetched from Gyazo)](https://t.gyazo.com/teams/diverta/f005733c55df20ba50ced6662fa6f983.png)

|項目   |値  |
| :--- | :--- |
|タイトル|テストフォーム|
|説明|説明です。<br/>説明です。<br/>説明です。|
|サンクス文言|サンクス文言です。<br/>サンクス文言です。<br/>サンクス文言です。|

最下部の[追加する]をクリックします。  

![Image (fetched from Gyazo)](https://t.gyazo.com/teams/diverta/c91ac4d0873c83447059560d5675d5c0.png)
自動で[フォーム一覧](/ja/docs/management/inquiry-forms/)画面に遷移し、入力したフォームが新規追加されていることが確認できます。  

![Image from Gyazo](https://t.gyazo.com/teams/diverta/2844158c724cfedeb22f604ac9b24c3a.png)

この画面に表示されている`ID`が、これから作成していく対象のフォームですので、メモをしておいてください。  

:::caution
ここでは`ID: 3`となっていますが、この値は自動採番のため、値は環境によって異なります。この後の操作は、実際に画面に表示された`ID`を使用してください。
:::

ここまででフォーム定義の作成は完了しました。

### フォームの設定を確認する
次に、先ほど作成したフォームの設定やデータを確認します。

#### 「項目設定」の確認
フォーム一覧画面より、作成した[テストフォーム]をクリックします。  

![Image from Gyazo](https://t.gyazo.com/teams/diverta/956d0878312778be9a91699ae33de87e.png)

フォーム基本設定画面が表示されるので、[項目設定]タブをクリックします。

![Image from Gyazo](https://t.gyazo.com/teams/diverta/aa7b1d569921dca3bbd93f0987629441.png)

[フォーム項目設定](/ja/docs/management/form-field-settings/)画面が表示されます。 

![Image from Gyazo](https://t.gyazo.com/teams/diverta/36e49a5f2e340c1ad32d68c1076ba257.jpg)

この画面は、Kurocoが受け付けるフォーム項目を定義するものです。

「name」「email」「message」は、Kurocoで必須の項目のためあらかじめ設定されています。  
項目を追加したい場合は、ご自身で項目の定義を追加できます。  
[message]以下に空白の項目が見えていますが、必要に応じて、ここに項目を追加していきます。

![Image from Gyazo](https://t.gyazo.com/teams/diverta/b2b0fb2ff209878affbe106b5b816971.jpg)

今回はデフォルトの項目のみでフォームを作成しますので、項目の設定はこのままにしておいてください。  

#### 「回答」の確認
続いて[回答]タブをクリックすると、ユーザーから送信されたフォームの回答データの一覧が表示されます。  
![Image from Gyazo](https://t.gyazo.com/teams/diverta/13d21b4addbcfd59e41be6c242a11992.png)

ここにはフォームに送信された回答が一覧で表示されます。  
(現在はまだデータが送信されていないため、0件で表示されています)  
回答内容などの詳細はこの画面や、右隣に隣接している[レポート]タブから確認できます。

## フォーム用のAPIを作成する
次に、作成したフォームに関するAPIを作成し、フロントエンドから回答の送信ができるように設定をします。  

### API基本設定を行う
Kurocoの管理画面から[API]->[Default]をクリックします。  
![Image from Gyazo](https://t.gyazo.com/teams/diverta/d5a0c3aacbb47a0e6c9fb95819d14622.png)

[追加]をクリックします。  
![Image from Gyazo](https://t.gyazo.com/teams/diverta/aa425815fa52294d9cac473ad30f8128.png)

タイトル、版、ディスクリプションを入力して[追加する]をクリックします。  
![Image from Gyazo](https://t.gyazo.com/teams/diverta/ea58072fdb40851f7545a92f029e4daf.png)

追加したAPIに遷移しますので、続いて、セキュリティの設定をします。  
[セキュリティ]をクリックします。  
![Image from Gyazo](https://t.gyazo.com/teams/diverta/35fecb9c385fad0db7d495c215ca0776.png)

[Cookie]を選択して[保存する]をクリックします。  
![fetched from Gyazo](https://t.gyazo.com/teams/diverta/6dcf2c3d012ebf03155f8926f0695379.png)
注意)  
Cookieをセキュリティ用のトークンとして利用する場合、APIドメインとフロントエンドのドメインが違うとサードパティクッキーの問題があり、Safari等で認証が効きません。  
フロントエンドとAPIドメインをサブドメイン違いで設定をする必要があるので、[独自ドメイン/TLS証明書](/ja/docs/management/custom-domain-tls-certificate/)でAPIドメインを設定し、[アカウント設定](/ja/docs/management/account/)からAPIドメインを変更ください。  
（Chromeでは正常に動作しますので、開発やテストの段階ではまずChromeで構築していただくことをお勧めします。）

### CORS設定を行う
[CORSを設定する] をクリックします。

![Image from Gyazo](https://t.gyazo.com/teams/diverta/c00d2e328ea75c53a3bada503227d7f5.png)

CORS_ALLOW_ORIGINSの [Add Origin] をクリックし、下記を追加します。
- `http://localhost:3000/`
- フロントエンドドメイン
- 管理画面URL

CORS_ALLOW_METHODSの [Add Method] をクリックし、下記を追加します。
- GET  
- POST
- OPTIONS

CORS_ALLOW_CREDENTIALSの[Allow Credentials]にチェックが入っていることを確認します。  

![Image from Gyazo](https://t.gyazo.com/teams/diverta/b7181aee5dfb419ad133ad40295ae1ca.png)

問題なければ [保存する] をクリックします。

### エンドポイントを設定する

今回は下記2つのエンドポイントを作成します。
- フォーム定義を取得するエンドポイント: `(GET) form`
- データを送信するエンドポイント: `(POST) form`

#### フォーム定義を取得するエンドポイントを作成する
対象のAPI画面より [新しいエンドポイントの追加] をクリックます。 

![Image from Gyazo](https://t.gyazo.com/teams/diverta/fdf6fc2ca42acee8dfee2403612f5755.png)

今回は下記設定にてエンドポイントを作成します。  

:::tip
ここでは簡易化のため、APIリクエスト制限はNoneを指定しています。  
:::

![Image from Gyazo](https://t.gyazo.com/teams/diverta/f3106d8a526f020ca8f02a9fd56d518f.png)

|項目|設定内容|
| :--- | :--- |
|パス|form|
|カテゴリー|フォーム|
|モデル|InquiryForm|
|オペレーション|details|
|APIリクエスト制限|None|

[追加する]をクリックしてエンドポイントを作成します。  

#### データを送信するエンドポイントを作成する
次に、HTMLから対象のフォームにデータを送信するためのエンドポイントを作成します。

対象のAPI画面より [新しいエンドポイントの追加] をクリックます。 

![Image from Gyazo](https://t.gyazo.com/teams/diverta/fdf6fc2ca42acee8dfee2403612f5755.png)

今回は下記設定にてエンドポイントを作成します。

:::tip
ここでも同じく、APIリクエスト制限はNoneを指定してください。  
:::

![Image from Gyazo](https://t.gyazo.com/teams/diverta/b5adda5a81ba913819853c3fe0c35efd.png)

![Image from Gyazo](https://t.gyazo.com/teams/diverta/f0574bb98ba2888c1baf41ec115d05ba.png)

|項目|設定内容|
| :--- | :--- |
|パス|form|
|カテゴリー|フォーム|
|モデル|InquiryMessage|
|オペレーション|send|
|APIリクエスト制限|None|
|id|送信先のフォームID (3)|

[追加する]をクリックしてエンドポイントを作成します。  

#### SwaggerUIで確認する
SwaggerUIにて、作成したフォーム定義を取得できるか確認します。
API画面より、[Swagger UI]をクリックします。  

![Image from Gyazo](https://t.gyazo.com/teams/diverta/759b45e26fce65607490c1e3241f27b4.png)

Swagger UI画面が表示されるので、先ほど作成したフォーム定義を取得するエンドポイントをクリックします。  

![Image from Gyazo](https://t.gyazo.com/teams/diverta/c3273ebdcdedb99763922400d36fac0f.png)

[Try it out]をクリックします。

![Image from Gyazo](https://t.gyazo.com/teams/diverta/468de26786c3584f0cf708e25e99d10a.png)

入力項目[inquiry_id]に、先ほど作成したフォームのIDを入力し(ここでは`3`を入力しています)、[Execute]をクリックします。  

![Image from Gyazo](https://t.gyazo.com/teams/diverta/af7e1e3f4d4767e80312fe7130380b16.jpg)

作成したフォーム定義がJSON化されて表示されることが確認できます。  

![Image from Gyazo](https://t.gyazo.com/teams/diverta/b6e6576387ac18cb1d3f5c03a7a37964.png)

次にPOSTの動作も確認します。

先ほど作成したInquiryMessage::sendのエンドポイントの[Try it out]をクリックします。

![Image from Gyazo](https://t.gyazo.com/teams/diverta/71a1075e19f99d5fc1b9639fd92b718d.png)

Request bodyの項目に送信できるデータのサンプルが表示されているので、以下のJSONに編集して[Execute]をクリックします。

```json
{
  "name": "My Name",
  "email": "email@example.com",
  "body": "Example Message"
}
```

![Image from Gyazo](https://t.gyazo.com/teams/diverta/f79f9a3e47ed48c115e442ffb703f915.png)

Kurocoのフォームに登録された回答のIDと、サンクス文言がレスポンスされます。  
![Image from Gyazo](https://t.gyazo.com/teams/diverta/85d9d82625e6d892caf419cacae5b5a2.png)

回答を確認すると、送信したデータがKurocoに保存されていることが分かります。  

![Image from Gyazo](https://t.gyazo.com/teams/diverta/d3d22d846fca11ed89cf3a22b5aa5020.png)

以上でフォーム用のエンドポイントが完成です。  

ここまでで以下の2種類のエンドポイントができました。
* フォーム定義を取得するエンドポイント: `(GET) form`
* フォームを送信するエンドポイント: `(POST) form`

では実際にこれらのエンドポイントを使用して、HTML上からフォームの作成と送信をしていきます。

## フロントエンドで、HTMLフォームを作成する

Nuxtインストールディレクトリに、下記構造のファイル追加作成します。  
今回は`/form/`のディレクトリでフォームが表示できるように、以下のファイルを作成します。

```
pages
 - form
   - index.vue 
```

追加したファイルに下記を記載します。

<Tabs>
<TabItem value="Nuxt2" label="Nuxt2" default>

```markup reference title="/pages/form/index.vue"
https://github.com/diverta/kuroco-documents/blob/main/sample_code/front-end/nuxtjs/form_default.vue
```

</TabItem>
<TabItem value="Nuxt3" label="Nuxt3" default>

```markup reference title="/pages/form/index.vue"
https://github.com/diverta/kuroco-documents/blob/main/sample_code/front-end/nuxt3/form_default.vue
```

</TabItem>
</Tabs>

:::caution
`const FORM_ID = 3`の箇所は、ご自身の作成したフォーム定義のIDをご記入ください。  
:::

:::caution
`/rcms-api/8/form/${FORM_ID}`、`/rcms-api/8/form`の箇所は、Kuroco管理画面に記載のパスをご記入ください。
:::

### ブラウザで確認する
次に、先ほど作成したファイルをブラウザで確認します。
ローカルサーバーが停止している場合は`npm run dev`を実行し、`http://localhost:3000/form`にアクセスします。  
すると、下記画面が表示されます。

![Image from Gyazo](https://t.gyazo.com/teams/diverta/3956415ec68ae145f18a4aadace5d4b7.png)

Chromeの開発者コンソールから、[Network]タブを確認すると、Kurocoと通信して、フォームの詳細情報を取得していることが確認できます。

![Image from Gyazo](https://t.gyazo.com/teams/diverta/1b70e8a1ab89e71901ad7f6df015a756.png)

レスポンスされる情報の詳細は開発コンソールから確認するか、SwaggerUIを利用してKuroco管理画面から確認ください。  

### データを送信する
次に、実際にHTMLフォームからデータを送信します。    
各項目に下記のように値を入力します。

|項目名|入力値|
| :--- | :--- |
|Name|テスト名|
|Email|`test@example.com`|
|Message|テストメッセージ|

[submit]ボタンをクリックすると、データが送信されサンクス文言が表示されます。  

![Image from Gyazo](https://t.gyazo.com/teams/diverta/0f39f6156021bed1df544b520069cd61.png)

ソースコード内「`handleOnSubmit()`」にあるように、この操作によって、[フォーム項目]のデータをKurocoにPOSTしました。  

POSTした内容も開発コンソールから確認できますので、うまく送信できない場合は、データの形式がSwaggerUIで確認した形式になっているか確認してください。

![Image from Gyazo](https://t.gyazo.com/teams/diverta/6f75dee26aeb54d18fa4d3c4fd3b5276.png)

### データをKurocoで確認する。
次に、送信したデータをKurocoで確認します。  
フォーム一覧画面より、作成した[テストフォーム]をクリックします。  

![Image from Gyazo](https://t.gyazo.com/teams/diverta/8fad490830faae8f08f597875970f8cd.png)

[回答]タブをクリックして、回答の一覧を表示すると、データが追加されていることを確認できます。

![Image from Gyazo](https://t.gyazo.com/teams/diverta/00e10acf329f6a8bb6949970179c3474.png)

[No.]をクリック(ここでは`14`)すると、回答内容の詳細を確認できます。  

![Image from Gyazo](https://t.gyazo.com/teams/diverta/0e0807d9d967ae5d221355d00ff31691.jpg)

回答の詳細に、HTMLフォームから送信された値が含まれていることが確認できます。

### フォームのバリデーションを確認する
最後に、フォームのバリデーションを確認します。

先ほど作成したフロントの画面を再度表示し、[email]の項目に無効なメールアドレスを入力して、エラーが返却されることを確認します。

各行に以下を入力します。  
([email]の値は無効なメールアドレスですので、エラーとなることが望ましいです)  

|項目名|入力値|
| :--- | :--- |
|[name]|空欄|
|[email]|**mail**|
|[message]|空欄|

[submit]をクリックすると、画面上部にエラーメッセージが表示されます。  
開発コンソールでKurocoからのエラーメッセージも確認してください。

![Image from Gyazo](https://t.gyazo.com/teams/diverta/8267185496f53eaa32eeea1900de0b33.png)

このように、Kurocoにはサーバー側のバリデーションがあることを確認できます。  
エラー時はHTTPのステータスコードでのエラーと共に、レスポンスボディ内にエラー内容が返却されてきます。
ソースコード内にある通り、エラー時のハンドリングを実装したい場合には、フロント側でその実装をする必要があります。

:::tip
動的なバリデーションが必要な場合は、Kurocoから取得してきた値を元に実装が必要になります。
:::

## カスタム項目を追加する
デフォルトのフォーム項目以外に、自由にカスタム項目の定義/作成が可能です。  
カスタム項目を作成する場合の手順を確認します。

### カスタム項目追加手順
フォーム一覧画面より、作成した[テストフォーム]をクリックします。  

![Image from Gyazo](https://t.gyazo.com/teams/diverta/8fad490830faae8f08f597875970f8cd.png)

[項目設定]タブをクリックして、[フォーム項目設定](/ja/docs/management/form-field-settings/)画面を表示します。

![Image from Gyazo](https://t.gyazo.com/teams/diverta/36e49a5f2e340c1ad32d68c1076ba257.jpg)

### 単一選択(セレクトボックス)を追加する。
例として、単一選択(セレクトボックス)を追加します。

![Image from Gyazo](https://t.gyazo.com/teams/diverta/58dba1aa68753596d498a6c139c6405b.png)

|項目名|入力値|
| :---- | :---- |
|タイトル|item|
|必須属性|任意|
|回答形態/入力制限|単一選択(セレクトボックス)|
|選択項目の設定|1::apple<br/>2::banana|

設定したら、画面下部の[更新する]をクリックしてください。

![Image from Gyazo](https://t.gyazo.com/teams/diverta/f07ff8b314eda7febfe1a0068fe4edea.png)

SwaggerUIを利用して、InquiryForm::details のエンドポイントのレスポンスに、追加したフォームの項目(ext_01)が含まれていることを確認します。  

![Image from Gyazo](https://t.gyazo.com/teams/diverta/0edded8d7fe1af5ac5a4300adabdbe4e.png)

次にSwaggerUIを利用して、InquiryMessage::send のエンドポイントに`ext_01`の項目をどのようなデータ形式でPOSTすれば良いか確認します。    

SwagerUIのExample Value及びSchemaを確認します。  

![Image from Gyazo](https://t.gyazo.com/teams/diverta/2da388f369aa6994d2c792f8d93983a1.png)

![Image from Gyazo](https://t.gyazo.com/teams/diverta/cc60c5740b0ea6523f3a305d4b455260.png)

この場合、単一選択(セレクトボックス)は以下の形式のデータを受け付けます。

- `"ext_01": {"key": "1" , "label": "apple"}`
- `"ext_01": "1"`


確認した内容を元に、Kurocoから得たoptionsの内容を選択肢として表示し、セレクトボックスで選択されたkeyをPOSTするようにフロントエンドのコードを追加します。  

更新したコードは以下になります。

<Tabs>
<TabItem value="Nuxt2" label="Nuxt2" default>

```markup reference title="/pages/form/index.vue"
https://github.com/diverta/kuroco-documents/blob/main/sample_code/front-end/nuxtjs/form_dropdown_selection.vue
```

</TabItem>
<TabItem value="Nuxt3" label="Nuxt3" default>

```markup reference title="/pages/form/index.vue"
https://github.com/diverta/kuroco-documents/blob/main/sample_code/front-end/nuxt3/form_dropdown_selection.vue
```

</TabItem>
</Tabs>

追加した項目が表示されることを確認します。  

![Image from Gyazo](https://t.gyazo.com/teams/diverta/287636397a5adff301923b6130077263.png)

フォームを送信して、Kurocoに回答を登録できることを確認します。  
  
開発コンソールで、セレクトボックスで選択したkeyが`"ext_01":"1"`の形式でPOSTされていることを合わせて確認してください。

![Image from Gyazo](https://t.gyazo.com/teams/diverta/e8b57505f2bff955e1472ca4e5467a4f.png)

### 日付の入力項目を追加する
続いて、日付の入力項目を追加してフォームを確認します。

#### 日付の入力項目をフォーム定義に追加する
既存で作成したフォーム定義の[項目設定]タブをクリックして、[フォーム項目設定](/ja/docs/management/form-field-settings/)画面を表示します。  
ここに日付のinput項目を追加定義します。

![Image from Gyazo](https://t.gyazo.com/teams/diverta/349525fc750bac75a162325b978fc0bd.png)

|項目名|入力値|
| :---- | :---- |
|タイトル|date|
|必須属性|任意|
|回答形態/入力制限|日付フォーマット|
|選択項目の設定|(なし)|

設定したら、画面下部の[更新する]をクリックしてください。

![Image from Gyazo](https://t.gyazo.com/teams/diverta/f07ff8b314eda7febfe1a0068fe4edea.png)

先ほどと同じようにSwaggerUIで項目の追加とPOSTするデータの形式を確認します。  
日付はString形式で`Y-m-d`でPOSTすることがわかるので、対応するようにindex.vueを修正します。  

<Tabs>
<TabItem value="Nuxt2" label="Nuxt2" default>

```markup reference title="/pages/form/index.vue"
https://github.com/diverta/kuroco-documents/blob/main/sample_code/front-end/nuxtjs/form_date.vue
```

</TabItem>
<TabItem value="Nuxt3" label="Nuxt3" default>

```markup reference title="/pages/form/index.vue"
https://github.com/diverta/kuroco-documents/blob/main/sample_code/front-end/nuxt3/form_date.vue
```

</TabItem>
</Tabs>

Dateの項目に`1900/01/01`を入力してフォームを送信し、Kurocoに回答を登録できることを確認します。  

![Image from Gyazo](https://t.gyazo.com/teams/diverta/12cd9b292a6ab68d8b0f5f4dac6ac864.png)

#### 日付の入力項目にバリデーションを設定する

項目にはKuroco側でのバリデーションを設定できます。  
今回は一例として、今現在から10年前までを許容範囲とするバリデーションを設定します。

作成したフォーム定義の[項目設定]から、[フォーム項目設定](/ja/docs/management/form-field-settings/)画面を表示します。  
[設定]をクリックします。

![Image from Gyazo](https://t.gyazo.com/teams/diverta/0401ccf1e0a96c113e16645b9b23dd4f.png)

設定画面にて、`開始までの期間`に`-10 years`を入力して設定、適用します。

![Image from Gyazo](https://t.gyazo.com/teams/diverta/87efcd3a1470a948712667bbe3c3e181.png)

:::tip
項目設定については、[フォーム定義で利用できるフォーム項目一覧 -> 日付フォーマット](/ja/docs/reference/form-field-list/#%E6%97%A5%E4%BB%98%E3%83%95%E3%82%A9%E3%83%BC%E3%83%9E%E3%83%83%E3%83%88)を参照してください。
:::

これでバリデーションが設定されましたので、10年前より以前の日付はエラーとなります。  
フロントエンドのフォーム画面から先ほどと同様に`1900-01-01`をリクエストして、失敗することを確認します。

![Image from Gyazo](https://t.gyazo.com/teams/diverta/3d3c9c6c59abd69af95d233b14fdf559.png)

:::info
Kuroco側のバリデーションはあくまでバックエンド側のバリデーションです。  
フロントエンドでのバリデーションをさらに実施されたい場合には、ご自身で実装していただく必要があります。  
:::

:::tip
フォーム項目の設定で`年 (下限)`、`年 (上限)`を設定すると、InquiryForm::details のレスポンスのdetails.cols.ext_02.options で、選択肢となる年のリストが取得できます。  
こちらを利用して選択できる年を制限したり、セレクトボックスで年を選択させることも可能です。  
例えば、Kurocoのエンドポイントへのリクエストが`"ext_02":"1990-01-01"`の形式になっていれば、日付の項目をどんなタグで入力させても構いません。
:::

### ファイルの入力項目を追加する
カスタム項目のうち、ファイルの入力項目を追加してフォームを確認します。

#### ファイルの入力項目をフォーム定義に追加する

既存で作成したフォーム定義の[項目設定]タブをクリックして、[フォーム項目設定](/ja/docs/management/form-field-settings/)画面を表示します。  
ここにファイルのinput項目を追加定義します。

![Image from Gyazo](https://t.gyazo.com/teams/diverta/2ebff93420f8323510216f17263aa479.png)

|項目名|入力値|
| :---- | :---- |
|タイトル|file|
|必須属性|任意|
|回答形態/入力制限|ファイル(KurocoFiles)|
|拡張子の設定|（なし）|

設定したら、画面下部の[更新する]をクリックしてください。

![Image from Gyazo](https://t.gyazo.com/teams/diverta/f07ff8b314eda7febfe1a0068fe4edea.png)

#### アップロード用のエンドポイントを作成する

ファイルアップロードの実装は下記の流れとなります。
1. Kurocoへファイルをアップロードする
2. アップロードしたファイルIDを送信する

そのため、まずはアップロードの受け口となるエンドポイントを追加します。  
[API]より対象のAPIを選択し、API管理画面より [新しいエンドポイントの追加] をクリックます。 

![Image from Gyazo](https://t.gyazo.com/teams/diverta/fdf6fc2ca42acee8dfee2403612f5755.png)

今回は下記設定にてエンドポイントを作成します。

![Image from Gyazo](https://t.gyazo.com/teams/diverta/a379f3ca20798fa4daf06a30b85552ae.png)

|項目|設定内容|
| :--- | :--- |
|パス|file|
|カテゴリー|ファイル|
|モデル|Files|
|オペレーション|upload|
|APIリクエスト制限|None|

:::tip
簡易化のため、APIリクエスト制限はNoneを指定しています。
:::

#### SwaggerUIで確認する
SwaggerUIにて、作成したフォーム定義を取得できるか確認します。
API画面より、[Swagger UI]をクリックします。  

![Image from Gyazo](https://t.gyazo.com/teams/diverta/759b45e26fce65607490c1e3241f27b4.png)

Swagger UI画面が表示されるので、先ほど作成したエンドポイントをクリックします。  

![Image from Gyazo](https://t.gyazo.com/teams/diverta/619b015491ef49438cf7aeffa1ffca98.png)

[Try it out]をクリックします。

![Image from Gyazo](https://t.gyazo.com/teams/diverta/0297503ec6adf1bab1f49fbb0efbe462.png)

入力項目[file]に、サンプルのファイルを選択し、[Execute]をクリックします。ここでは`kuroco.png`というロゴ画像を選択しました。

![Image (fetched from Gyazo)](https://t.gyazo.com/teams/diverta/22573d7a463010d712eca6fc9650e6cd.png)

ファイルがアップロードされ、一時領域にファイルが格納されます。`file_id`には、ファイルの格納先が表示されます。

![Image from Gyazo](https://t.gyazo.com/teams/diverta/065ff6b8d012661d7ec029d79ffd36d3.png)

:::note
ファイルアップロードの場合は、ヘッダーの指定が`'Content-Type: multipart/form-data'`になります。フロントエンドからPOST処理を行う場合に指定するように注意してください。
:::

なお、`file_id`にブラウザでアクセスすると、アップロードした画像が表示され、ファイルが格納されていることが確認できます。  

![Image from Gyazo](https://t.gyazo.com/teams/diverta/0e4b32f59f76f1a6c1673498c276d27c.png)

:::tip
確認先のURLは、`管理画面のホスト名 + file_id`です。
:::

この`file_id`をInquiryMessage::send のエンドポイントに送信すると、一時領域に格納されたファイルが、回答に紐づいてKurocoFilesに保存されます。  

以上でフォーム用のエンドポイントが完成しました。

#### フォームを修正してファイルを送信する。

次に、`pages/form/index.vue`を変更します。

以下が更新したコードです。

<Tabs>
<TabItem value="Nuxt2" label="Nuxt2" default>

```markup reference title="/pages/form/index.vue"
https://github.com/diverta/kuroco-documents/blob/main/sample_code/front-end/nuxtjs/form_file.vue
```

</TabItem>
<TabItem value="Nuxt3" label="Nuxt3" default>

```markup reference title="/pages/form/index.vue"
https://github.com/diverta/kuroco-documents/blob/main/sample_code/front-end/nuxt3/form_file.vue
```

</TabItem>
</Tabs>

では実際に画像のアップロードとフォームデータ送信し、新しい[file]項目がKurocoに送信されることを確認します。  

フロント画面から画像ファイルをアップロードすると、アップロードしたタイミングで、Files::upload のエンドポイントにリクエストが送付され、`file_id`を取得したことを確認できます。

![Image from Gyazo](https://t.gyazo.com/teams/diverta/1480ae74fa1f1820aad0c9bd7ae1b5f8.png)

次に、必須項目を入力して、[submit]をクリックすると、`file_id`をInquiryMessage::send のエンドポイントにPOSTしたことが確認できます。

![Image from Gyazo](https://t.gyazo.com/teams/diverta/5e2cc4403bcb370fc79ef2434319af26.png)

管理画面の[フォーム]から[回答]タブをクリックして回答の一覧を表示し、データが追加されていることを確認します。  

![Image from Gyazo](https://t.gyazo.com/teams/diverta/bf63e7001a98148be2248e186c3623e2.png)

[No.]をクリック(ここでは`31`)して詳細を表示すると、新規追加した項目[file]と、その項目に入力した値が適用されていることが確認できます。  

![Image from Gyazo](https://t.gyazo.com/teams/diverta/e1f5282470c1dd990014d184fbca2ec1.jpg)

## 参考
本チュートリアルでは簡易化のため、Kurocoの各項目に対応したHTMLをフロントエンドで書いています。そのため、Kurocoの項目設定を変更するとフロントエンドのコードも更新が必要です。

Kurocoの項目設定に合わせてフロントエンドの表示を動的に変更する場合は、InquiryForm::detailsのレスポンスに含まれる`type`を利用して出し分けしてください。  

詳しくはコーポレートサンプルサイトのリポジトリを参照してください。  
https://github.com/diverta/front_nuxt_corporate/blob/main/pages/contact/index.vue
