NotionAppsの編集画面をカスタマイズ(その１)

# はじめに
NotionAppsについての第3弾となります。
過去記事はこちら

https://qiita.com/kou1209/items/53d6ce988d3f39d8d188

https://qiita.com/kou1209/items/561b48bdd148196866bf

今回は、編集画面のカスタマイズを行います。
カスタマイズで設定できるアイテムが多いため、参照系と編集系の2回に分けて説明します。
今回は編集系についてです。

# 前提条件・注意事項
Notionアカウント(無料でOK)を持っていること。
NotionAppsアカウント(無料でOK)を持っていること。

なお、2023年8月15日(執筆)時点での内容となります。

# 準備
それぞれの部品ごとに設定できる項目が違うため、Notionで色々な種類のプロパティを追加しています。

Notionにプロパティを追加したり、データを追加・更新した場合、NotionAppsの画面上部にある、「Reload」をクリックしないと反映されないのでお気をつけください。

# 編集画面カスタマイズ
自動生成された編集画面は以下の通りです。
テキストプロパティには、テキスト項目。セレクトプロパティには、ドロップダウン項目といったように、Notionのプロパティに応じて、適切な部品が設定されています。
![3a_自動生成された編集画面.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2218396/d10cbbc0-1b15-4726-1ac1-fa8bee344ada.png)
項目を追加したり、変更したりするには、画面右にある部分(以下、設定画面という)で行います。この辺りは一覧項目のカスタマイズの時と同様です。
![3a1_カスタマイズ画面.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2218396/47397b75-ce43-a04f-c2c9-08b0cd14937a.png)

## Logicの設定
日本語に訳すと「論理」ってなりますが、あまり気にせず。
簡単に言うと、「何をどのように表示するか」を設定するところになります。
Logicの右のほうにある「＋」ボタンをクリックすると、下記のように項目を追加する画面が現れます。
![3b_Logicの追加.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2218396/4affed44-f09e-062c-203a-3bf572ac0d13.png)
この画面の上部「Logic」の部分は、Notionデータベースのプロパティと項目を自動で関連付けたものの一覧となっていて、クリックすることで、その項目をすぐに編集画面に追加することができます。
一方、画面下部の「Components」は、自分で表示する項目(部品)を選択し、その後、自分でデータベースのプロパティと関連付けをするものとなります。

では、それぞれのComponentについて詳細に説明していきます。
今回は編集系のComponentについてのみ紹介します。

### Text
最もポピュラーな部品で、テキストの入力を行えます。

#### Update Property
Notionデータベースのプロパティと関連付けをします。
関連付けができるプロパティのみが選択候補に入っています。

#### Style
Labelにはテキストボックス左上のラベルに表示する文言を設定します。
Helper Textには、テキストボックスが空欄の時に表示されるプレースホルダーを設定します。

#### Behaviour
is RequiredをONにすると、入力必須項目となり、ラベルに＊が付きます。
Allow ScanをONにすると、バーコードスキャナができるようになります。
Visibillity LogicをONにすると、この項目を表示する条件の設定が行えます。
詳細については別の機会に説明したいと思います。
![3b1_Textの設定.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2218396/6b6c4f3a-5b2f-5a4f-13f1-dd7bfc9a5fd9.png)
上記のように設定した場合、下記のような表示となります。
![3b1a_Textの表示.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2218396/629c77b2-a88d-649a-33fb-4cc7c5714678.png)

### Paragraph
複数行のテキストを入力を行えます。
各設定項目については割愛します。
![3b2_Paragraphの設定.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2218396/23ad06af-b188-8602-fc5a-491970d3ed94.png)
上記のように設定した場合、下記のような表示となります。
![3b2a_Paragraphの表示.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2218396/b3344541-eac8-bf6b-0f4e-30d88776f61d.png)

### Number
数値の入力を行えます。
この部品は、Notionのプロパティの「数値の形式」によって見た目が変わります。
各設定項目については割愛します。
![3b3a_Numberの設定.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2218396/4b9f029d-18eb-6094-3508-f2846cd74de6.png)

#### 数値の形式：数値
![3b3_Nuberの設定(数値)Notion側.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2218396/080458a7-bf93-f4c5-5225-f4ef4758ac33.png)
表示は下記のようになります。
![3b3b_Numberの表示.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2218396/edf03ef2-1104-d325-9c22-ef125c594c9f.png)

#### 数値の形式：コンマ付きの数値
![3b3c_Numberの設定(コンマ付きの数値).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2218396/d58c0549-418b-708b-049e-34c3d1ec8ffe.png)
表示は下記のようにコンマ区切りの数値となります。
![3b3d_Numberの表示(コンマ付きの数値).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2218396/1ed5c545-0b4c-95aa-7c01-3d2ffb275547.png)

#### 数値の形式：米ドル
![3b3e_Numberの設定(米ドル).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2218396/4ff06ef8-7f23-d092-f2a8-e0e68db6485f.png)
表示は下記のように左に「＄」マークがつき、コンマ区切り＋小数点第2位表示となります。
![3b3f_Numberの表示(米ドル).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2218396/3150c103-ed96-ffb4-7709-a52001600244.png)

#### 数値の形式：円
![3b3g_Numberの設定(円).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2218396/02da1db3-f549-ecc3-22c7-17193c99b817.png)
左に「￥」マークがつき、コンマ区切りになって欲しいところですが…ならず。
(他の通貨はちゃんとできているので不具合ではないかと思います)
![3b3h_Numberの表示(円).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2218396/8c0d22df-82e0-e1f7-2c3d-5cdba153897b.png)

### Checkbox
チェックボックスのON/OFFが行えます。
各設定項目については割愛します。
![3b4_Checkboxの設定.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2218396/138fdb47-bfaf-f09f-fbf8-30872ce5f87e.png)
上記のように設定した場合、下記のような表示となります。
![3b4a_Checkboxの表示.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2218396/f77a9a5e-ecec-623d-f501-e88dcce308cf.png)

### Dropdown
ドロップダウン(セレクトボックス)で、値の選択が行えます。
Notionのプロパティでオプションの設定がされていれば、DropdownのOptionsにも選択肢が自動で設定されます(自分で追加することもできます)。
![3b5_Dropdownの設定(Notion側).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2218396/88cc929f-7714-c667-4283-bd87cceb2f0b.png)
Options以外の各設定項目については割愛します。
![3b5a_Dropdownの設定.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2218396/f41038ff-e96c-e1ae-7e55-551251cc7c2d.png)
上記のように設定した場合、下記のような表示となります。
![3b5b_Dropdownの表示.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2218396/4f1b4f3a-e47d-62c8-5e49-34cddd449b61.png)

### Multi Select
複数の値の選択が行えます。
Notionのプロパティのマルチセレクトと対応しているものです。
(他にも選択できるプロパティはあります)
![3b6_Multi Selectの設定(Notion側).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2218396/c9d6da6e-4e3f-0e9d-4098-b0aa86047c8e.png)
各設定項目については、Dropdownと同様のため割愛します。
![3b6a_Multi Selectの設定.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2218396/8da7b5b7-8042-fea8-9f21-81fc992c740b.png)
上記のように設定した場合、下記のような表示となります。
![3b6b_Multi Selectの表示.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2218396/8ee3551e-506b-aef6-0e77-86b8f8b0485e.png)
クリックすると、下記のように項目を選択する画面に遷移するので、値を選択します。
![3b6c_Multi Selectの選択.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2218396/f2d79024-b27f-93b7-6877-f24fa5208e7b.png)
選択した値が表示されます。
![3b6d_Multi Selectの選択結果.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2218396/5dee44f8-aec8-f341-a3b3-f07c5a5fc349.png)

### Video Uploader
動画のアップロードが行えます。

#### Behaviour
Allow Video Selection Fromは下記2種類から選択できます。
　　Both Camera & Gallery・・・カメラ起動もしくはファイルからの選択が可能
　　Only Camera・・・カメラが起動
Allow MultipleをONにすると複数アップロードが行えるようになります。
それ以外の設定項目は割愛します。
![3b7_Video Uploaderの設定.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2218396/da1e4299-147a-138d-2265-4e664827bc17.png)
上記のように設定した場合、下記のような表示となります。
![3b7a_Video Uploaderの表示.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2218396/52f6fa78-2351-ee9d-baa9-c5b39a28cfc6.png)
Notionのプロパティが「ファイル＆メディア」だった場合は、下記のようにデータが登録されます。
![3b7b_Video Uploaderの登録結果.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2218396/d927f83a-7d47-4321-9153-c5941e4ad892.png)
Notionのプロパティが「テキスト」のものも関連付けられます。
![3b7c_Video Uploaderの設定(テキスト).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2218396/5ab449be-be70-88a4-6e82-f08014678ddc.png)
その場合、下記のようにURLが登録されます。
![3b7d_Video Uploaderの登録結果(テキスト).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2218396/76feb51d-3083-3367-3394-59047d1ca4f2.png)

### Photo Uploader
画像のアップロードが行えます。

#### Behaviour
Allow Photo Selection Fromは下記2種類から選択できます。
　　Both Camera & Gallery・・・カメラ起動もしくはファイルからの選択が可能
　　Only Camera・・・カメラが起動
Compress PhotosをONにすると、画像が圧縮され保存サイズが小さくなります。
それ以外の設定項目は割愛します。
![3b8_Photo Uploaderの設定.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2218396/b6b72fc0-7a71-5f36-7905-2fbbd28a9d37.png)
上記のように設定した場合、下記のような表示となります。
![3b8a_Photo Uploaderの表示.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2218396/5a8f2fa5-40c1-4b63-b5a8-f1c59d6ee957.png)

### File Uploader
任意のファイルのアップロードが行えます。
各設定項目については割愛します。
![3b9_File Uploaderの設定.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2218396/2e814cfb-195d-9e84-e0e1-3b9eee7886ca.png)
上記のように設定した場合、下記のような表示となります。
![3b9a_File Uploaderの表示.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2218396/9555e305-7f7e-1103-98f9-eda859b1a207.png)

### Detect Location
現在の位置情報の検出を行えます。

#### Behaviour
Save Location asは下記2種類から選択できます。
　　Google Maps Link…Googleマップのリンクで登録
　　Latitude/Longitude…緯度,経度で登録
他の各設定項目については割愛します。
![3b10_Detect Locationの設定.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2218396/de6429c3-8b25-6827-7115-a33a1dee7dd6.png)
現在位置検出をクリックすると、現在位置が表示されます。
![3b10a_Detect Locationの表示.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2218396/7a2b6378-313b-167f-2b15-708891ae6419.png)
Google Maps Linkで登録した場合は、下記のように登録されます。
![3b10b_Detect Locationの登録結果.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2218396/a8eeb11f-edc0-63be-fb7a-fcec700be69b.png)

### Address Finder
住所の検索が行えます。
各設定項目については割愛します。
![3b11_Address Finderの設定.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2218396/12b2c844-03fc-aa2b-30e0-7120a289632d.png)
住所や施設名などを入力すると、候補が表示されるので、選択します。
![3b11a_Address Finderの入力.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2218396/45898ad4-e69b-9d42-ec5b-8bf0be6f6b63.png)
選択した地点が地図表示されます。
![3b11b_Address Finderの表示.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2218396/c911693f-6cec-cfb6-6ac8-92b89bab9618.png)
登録内容は下記のように住所となります(微妙･･･)。
![3b11c_Address Finderの登録結果.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2218396/b20da192-6a23-52de-c814-6f25e2170f38.png)

### Date Picker
日付(時刻)の設定が行えます。

#### Style
Show Date/Timeでは、以下の3つから選択できます。
　　Show Only Date…日付のみ
　　Show Only Time・・・時刻のみ
　　Show Both Date & Time…日付と時刻
Date Helper Textは、日付のプレースホルダーの設定
Time Helper Textは、時刻のプレースホルダーの設定
他の設定項目については割愛します。
![3b12_Date Pickerの設定.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2218396/1b2efca7-fd48-960e-2019-c00ae395a8eb.png)
上記のように設定した場合、下記のような表示となります。
日付の選択については、カレンダーから選択可能です。
![3b12a_Date Pickerの表示(日付).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2218396/4d2ad39c-abba-f9f8-3a22-c09213d1164e.png)
時刻の選択については、ドロップダウン風に選択可能です。
![3b12b_Date Pickerの表示(時刻).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2218396/53712da0-15bd-f6e0-f062-f9e2f44701f6.png)

## Behaviourの設定
画面の振る舞いについての設定が行えます。
Save Button Text ･･･ 保存ボタンの文言を設定できます。
Button Position
　　Floating・・・入力画面から浮いた状態で、画面下に常に表示されます。
　　Fixed at Bottom・・・入力項目の下に固定で表示されます。項目が多いとスクロールしないと保存ボタンが見えません。
![Pasted image 20230815125516.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2218396/00966637-b932-9e21-4c5e-6731d2112c5c.png)
上記のように設定した場合、下記のような表示となります(Floating)。
![Pasted image 20230815125530.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2218396/360c343d-1aed-1a63-afac-d19deb78c600.png)
Allow DeleteをONにすると、削除ボタンが表示され、削除可能となります。
Button Text ･･･ 削除ボタンの文言を設定できます。
Ask for confirmationをONにすると、削除時に確認メッセージが表示されるようになります。
Delete Confirmation Text ･･･ 削除確認メッセージの文言を設定できます。
![Pasted image 20230815125649.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2218396/9ea5555e-a1ab-5f2a-74d4-de8fef6b46fc.png)
上記のように設定し、削除ボタンを押した場合、下記のような表示となります。
![Pasted image 20230815125659.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2218396/3e627661-ab23-5f76-9d2c-7c7a9fc75d54.png)

# 気になった点
色々とカスタマイズしてみて、気になる点は以下の通りです。
1. 数値項目が「円」の場合の表示がおかしい
	他の通貨と同様に「\\」だったり、カンマ区切りだったりして欲しいです。

2. 日付項目の表示が変えられない
	一覧の時にも書きましたが、「yyyy/MM/dd」とかで表示できるようにして欲しいです。
	時刻については、24時間表示が選べるようにして欲しいです。

3. Address Finderが使いづらい
	入力した住所がそのまま登録されて欲しいです。
	
# まとめ
NotionAppsの編集画面で行えるカスタマイズについて、今回は入力項目について説明しました。自由なレイアウトは行えませんが、ノーコードで簡単にカスタマイズできることが分かって頂けたかと思います。
次回は、編集画面のカスタマイズその2として、表示項目について説明します。
本稿を参考に、色々と試して頂けるとうれしいです。