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

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

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

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

https://qiita.com/kou1209/items/47a3648898b02680ba55

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

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

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

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

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

# 編集画面カスタマイズ
項目を追加したり、変更したりするには、画面右にある部分(以下、設定画面という)で行います。
## Logicの設定
Logicの右のほうにある「＋」ボタンをクリックすると、下記のように項目を追加する画面が現れます。
![3b_Logicの追加.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2218396/ae89e386-9987-ce53-7181-f7d57d1d16d5.png)
この画面の上部「Logic」の部分は、Notionデータベースのプロパティと項目を自動で関連付けたものの一覧となっていて、クリックすることで、その項目をすぐに編集画面に追加することができます。  
一方、画面下部の「Components」は、自分で表示する項目(部品)を選択し、その後、自分でデータベースのプロパティと関連付けをするものとなります。

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

### Label
任意の固定文言を表示することができます。

#### Style
Labelには表示する固定文言を設定します。
改行もそのまま表示されます。
Label Styleには文字の大きさを設定します。
選択できるのは、SmallとLargeです(あまり大きさは変わらない)。
![4b1_Labelの設定.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2218396/08401c2c-7ad1-dddb-a7fb-009410a35b82.png)
上記のように設定した場合、下記のような表示となります。
![4b1a_Labelの表示.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2218396/54fed5ab-c5dd-a00f-3227-4f3cedffb4a4.png)

### Divider
区切り線を表示することができます。
![4b2_Dividerの設定.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2218396/f36fe70c-7b11-3e94-ec01-c08338fdcb5a.png)
設定項目は特になく、下記のような表示となります。
![4b2a_Dividerの表示.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2218396/9ffdac59-3360-3cd0-eea6-28a06b9a7f5d.png)

### View Text
変更不可のテキストを表示することができます。

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

#### Style
Labelには表示するテキストの見出し文言を設定します。
![4b3_View Textの設定.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2218396/a157f23c-6417-f4f6-b5a3-9c57abca7b4d.png)
上記のように設定した場合、下記のような表示となります。
![4b3a_View Textの表示.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2218396/40c067a3-a408-3223-8902-0c249aa09e7e.png)

### View Checkbox
変更不可のチェックボックスを表示することができます。

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

#### Style
Labelには表示するチェックボックスの見出し文言を設定します。
![4b4_View Checkboxの設定.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2218396/a1e639fd-2bc9-6edb-6461-1fc9d76c222c.png)
上記のように設定した場合、下記のような表示となります。
![4b4a_View Checkboxの表示.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2218396/f9c0e8be-ba4e-4cfe-53a8-6c70c1c77b80.png)

### View Link
変更不可のリンクを表示することができます。

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

#### Style
Labelには表示するリンクの見出し文言を設定します。
![4b5_View Linkの設定.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2218396/75b229d1-e6f6-9fbd-8401-fda94d0bf58d.png)
上記のように設定した場合、下記のような表示となります。
![4b5a_View Linkの表示.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2218396/a4f7218a-9960-4287-4f7d-a1744bbc3edf.png)

### Heading
一覧画面の1行のイメージで複数の情報を表示することができます。

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

#### Style
DividerをONにすると、この項目の下に区切り線が表示されます。
複数Headingを並べるときに使うと良いかもしれません。
![4b6_Headingの設定.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2218396/15540ee9-e8ac-191d-5749-079a8372c399.png)
上記のように設定した場合、下記のような表示となります。
![4b6a_Headingの表示.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2218396/04cc036f-87af-0fbd-86ab-eb826fc7914f.png)

### Contact Card
連絡先(Emailと電話番号)の情報を表示することができます。

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

#### Style
Labelには表示する連絡先の見出し文言を設定します。

#### Behaviour
Allow MailをONにすると、メーラー起動ボタンが表示されます。
Allow MessageをONにすると、SMS起動ボタンが表示されます。
Allow CallをONにすると、電話起動ボタンが表示されます。
![4b7_Contact Cardの設定.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2218396/3727ddc9-c4b0-beae-47e3-c2b91b909453.png)
上記のように設定した場合、下記のような表示となります。
![4b7a_Contact Cardの表示.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2218396/f8a28ba0-c4a1-8a16-a11f-782c50e5335a.png)

### Video Viewer
動画を表示することができます。

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

#### Style
Labelには表示する動画の見出し文言を設定します。
![4b8_Video Viewerの設定.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2218396/317cf039-4708-195b-5ae9-2a5fcd86156c.png)
上記のように設定した場合、下記のような表示となります。
![4b8a_Video Viewerの表示.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2218396/d6aa2e56-4cdf-cac1-2713-71f4e4ab9295.png)

### Photo Viewer
画像を表示することができます。

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

#### Style
Labelには表示する画像の見出し文言を設定します。

#### Behaviour
Allow MultipleをONにすると、複数画像表示できるようになります。
※関連づいたプロパティにはカンマ区切りで画像が設定されている必要があります。
![4b9_Photo Viewerの設定.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2218396/89f3a57f-ac28-fc17-3594-19c51a9e707e.png)
上記のように設定した場合、下記のような表示となります。
![4b9a_Photo Viewerの表示.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2218396/4caed525-7ca9-69bb-c44c-59ee975e2ee0.png)

### Location Viewer
位置情報を表示することができます。

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

#### Style
Labelには表示する位置情報の見出し文言を設定します。
![4b10_Location Viewerの設定.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2218396/ce51146a-8c0b-b432-ba5c-01ae13658641.png)
上記のように設定した場合、下記のような表示となります。
![4b10a_Location Viewerの表示.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2218396/3ac9d649-9a24-575b-805f-3843f97d0bf0.png)

### Address Viewer
指定住所の位置情報を表示することができます。

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

#### Style
Labelには表示する位置情報の見出し文言を設定します。
![4b11_Address Viewerの設定.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2218396/0740d803-3f84-cd49-0356-85fb39db1767.png)
上記のように設定した場合、下記のような表示となります。
![4b11a_Address Viewerの表示.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2218396/a9135c11-1133-ac9a-5d94-706c44d5db6f.png)

### Button
ボタンを表示することができます。

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

#### Style
Titleにはボタンの文言を設定します。
Colorにはボタンの色を設定します。Dark, Lightから選択できます。

#### Behaviour
on Clickにはボタンの挙動を設定します。
それぞれ関連付けたプロパティに保存された値が使用されます。
Open Link･･･リンクを開く
Dial Phone･･･発信先として電話アプリを開く
Open Email･･･送信先としてメールアプリを開く
Open SMS･･･発信先としてSMSアプリを開く
![4b12_Buttonの設定.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2218396/41e19600-1374-9e73-ea9f-b909f44a4f88.png)
上記のように設定した場合、下記のような表示となります。
![4b12a_Buttonの表示.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2218396/f137513f-c65b-11cf-c1f7-efb5e2c476ac.png)

### File Viewer
ファイルを表示することができます。

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

#### Style
Labelには表示するファイルの見出し文言を設定します。

#### Behaviour
Allow MultipleをONにすると、複数ファイル表示できるようになります。
※関連づいたプロパティにはカンマ区切りで画像が設定されている必要があります。
![4b13_File Viewerの設定.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2218396/7e229ba6-5f3f-15ec-1f9c-01750efba365.png)
上記のように設定した場合、下記のような表示となります。
![4b13a_File Viewerの表示.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2218396/53851d71-eabe-3a09-2ffa-5e9d6dedde2d.png)

# まとめ
NotionAppsの編集画面で行えるカスタマイズについて、今回は参照項目について説明しました。自由なレイアウトは行えませんが、ノーコードで簡単にカスタマイズできることが分かって頂けたかと思います。  
次回は、Visibility Logic(条件付き表示) の方法について説明する予定です。
本稿を参考に、色々と試して頂けるとうれしいです。