NotionAppsの一覧画面をカスタマイズ

# はじめに
前回、NotionAppsの事始めとして、Notionに付属している「タスク管理」テンプレートを用いて、NotionAppsでタスク管理アプリを自動作成しました。その時の記事はこちらです。

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

今回は、自動生成したアプリのカスタマイズを行います。
カスタマイズできることは結構多いので、今回は一覧画面のカスタマイズについて説明します。

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

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

# 準備
一覧画面のカスタマイズの説明をするために、まずNotionにデータを登録します。
タスク管理に「予定時刻」というテキストプロパティを追加し、データも以下のように設定しました。ちょうど、昼食を食べ終わって、あと片づけをしているタイミングを切り出しているイメージです。
![2a_Notionタスク管理.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2218396/e2287dc5-f442-774e-5101-bb83fbaa9305.png)

Notionにプロパティを追加したり、データを追加・更新した場合、NotionAppsの画面上部にある、「Reload」をクリックすると、データがNotionAppsに反映され、下記のような表示になります。
![2b_前回作成時の状態.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2218396/86c9d15f-bccf-4610-4a4c-133b18ec5726.png)

# 一覧画面カスタマイズ
NotionAppsでカスタマイズを行うには、画面右にある部分(以下、設定画面という)で行います。
![2c_カスタマイズ(表示内容).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2218396/170022f1-b16e-626c-c372-28e25543b19c.png)

## Styleの設定
### View Type
ListとGridが選択できます。
#### List
「View Less Data」トグルボタンが表示されます。
これをONにすると、1件あたりの表示内容が少なくなります。
![2f_ViewLessData設定.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2218396/d7a5102b-0105-32af-0986-d330a9ab2c39.png)
View Less DataのOFFの場合の表示
![2b_前回作成時の状態.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2218396/86c9d15f-bccf-4610-4a4c-133b18ec5726.png)
View Less DataがONの場合の表示
![2g_ViewLessData設定結果.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2218396/e15a4f86-07e0-d7ca-c50e-f8b49b5b9d50.png)
なるべく多くのデータを一覧表示したい場合に利用すると良いと思います。

#### Grid
「Grid Column Count」が指定できるようになります。
これはグリッドの列数を指定でき、値は「One」または「Two」です。
![2d_グリッド設定.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2218396/a1a9ec69-131d-10c6-2d6b-afe6abb22a94.png)
「Two」を指定した場合の表示
![2e_グリッド設定結果.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2218396/3fdcb0a8-6679-db83-06d9-41f6bc4daefb.png)

## Dataの設定
### Title, Description, Caption
Title、Description、Captionで設定した項目が3段に並んで表示されます。
Description、Captionという意味は気にせず、表示した項目を選びます。
自動生成したタスク管理アプリでは、「作成日」が設定されていますが、タスクを作った日を表示してもあまり意味がないので、「予定時間」に変更します。
![2h_Data設定.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2218396/d88066fb-e283-2400-c905-a65f4db3e177.png)
![2i_Data設定結果.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2218396/60a11761-809b-7869-63a8-4ecff14c1494.png)

### Color Tag
Color Tagは左の色付きの部分です。
値が一致した場合、対応する色の帯で表示されます。一致する値がない場合は、青色の帯で表示されます。一致しない値が設定される可能性がある場合は、青色の帯の設定は止めた方がいいです。
![2j_ColorTag設定.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2218396/2a8db4dd-e7b3-f43e-4ca3-95f73bfeac2f.png)
![2k_ColorTag設定結果.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2218396/eee295e2-76d7-cb71-9e55-c72757e9d12b.png)

### Image
Imageには画像を設定できます。
Notionにファイル&メディアプロパティで画像を設定すると、その画像が表示されます。
また、URLやテキスト等で直接画像のURLを設定しても表示できます。

画像でないものが指定されると以下のような表示になります。
![2l_Image設定結果.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2218396/96c7e8c4-396a-9c95-c44b-617a122b986f.png)

## Behaviourの設定
振る舞いについての設定を行います。
画面遷移やデータのフィルタリングやソートなどの設定が行えます。

### Go To Update Screen
Go To Update Screenをクリックすると、編集画面の設定画面に遷移します。
編集画面のベースは自動で作成されています。
編集画面のカスタマイズについては、別投稿で説明予定です。

### Add New Data
Add New DataをONにすると、Go To Screenが現れ、それをクリックすると、登録画面の設定画面に遷移します。登録画面のベースも自動で作成されています。
登録画面のカスタマイズについても、別投稿で説明予定です(編集画面と併せてかも？)。
![2n_AddNewData設定.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2218396/cfb9cd8b-4bd4-62fc-f686-0769257b2df1.png)
Add New DataをONにすると、画面右下に「＋」アイコンが表示されます。
これをクリックすると、登録画面に遷移します。
![2o_AddNewData設定結果.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2218396/9860a632-0fdd-2d06-8b65-739b860acf85.png)

### Search
SearchがONの場合、画面上部に検索窓が表示されます(デフォルトでON)。
Allow ScanをONにすると、バーコードスキャンができるようになります。
また、Search Helper Textは検索窓に表示するプレースホルダーです。
![2p_Search設定.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2218396/055c73df-c4ae-e1be-1545-f6e5e403fa56.png)
上記のように設定すると、このような表示となります。
![2q_Search設定結果.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2218396/25ebf021-ce82-193b-42fa-643e8020cb3a.png)
検索窓に入力した値の検索対象は全項目で、あいまい検索となります。
上図で、「対応中」で検索したり、「8:00」で検索したりできます。
また、画面に表示されていない項目に対しても検索範囲となっています。

### Filtering
Filteringは表示する内容のフィルタリング設定ができます。
まだ完了していないタスクだけを表示する場合、以下のように設定します。
![2r_Filtering設定.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2218396/e5707b7a-d9de-06b2-862b-3d8c2da835f6.png)
フィルタリングした結果、「対応中」と「未着手」のもののみ表示されるようになりました。
![2s_Filtering設定結果.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2218396/4dee8522-086f-2d93-84d4-132d479d9700.png)
フィルタリングは、複数項目指定することができ、複数の条件がどちらも満たす場合(And)、複数の条件のいずれかを満たす場合(Or)の指定も行えます。

### Sorting
Sortingは表示する順序を設定できます。
予定時刻順に上から並べるには以下のように設定します。
![2t_Sorting設定.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2218396/e68676b9-b6d8-6760-ed52-c4b6df3148bf.png)
並び替えした結果、予定時刻の順に並びました。
これで、次に何をやらなくてはいけないかが分かりやすくなりました。
![2u_Sorting設定結果.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2218396/83e8ed6c-20f2-21ef-52b3-cfdbac9caccc.png)

### In-App Filtering
アプリ内でユーザが絞り込みを行う機能を提供します。
検索窓は全項目に対するあいまい検索でしたが、こちらは、開発側で絞り込む項目を指定できます。以下は、Nameでの絞り込みができるようにする設定です。
![2v_In-App Filtering設定.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2218396/cf64089f-70ca-6e5e-ad5a-b9cc4e201bbf.png)
「＋」ボタンの上に、漏斗マークが表示されます。
![2w_In-App Filtering設定結果.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2218396/885807e2-fd48-cc1c-0c74-bff9705f0784.png)
クリックすると、下記のように、絞り込む値の選択画面が表示されます。
絞り込む値にチェックを入れ、「Apply」をクリックします。
![2x_絞り込み画面.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2218396/83d9f2ee-91d7-4f4f-e1a9-4b088e6dd563.png)
絞り込んだ内容が表示されます。
絞り込みを解除するには、「Reset」をクリックします。
![2y_絞り込み結果.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2218396/f9a05947-3328-d93d-eb99-d5e0ec70e4ba.png)

## 画面タイトルの設定
最後に、設定画面の最上部にある「タスク管理」を変更することで、画面タイトルを変更できます。ここでは、「未完了タスク一覧」に変更します。

最終的にできた未完了タスク一覧がこちらです。
![2z_未完了タスク一覧.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2218396/151c48b2-e701-11a3-bb12-0068ce72baa6.png)
# 気になった点
色々とカスタマイズをしてみて、気になる点(改善して欲しい…)は以下の2点です。
1. 日付項目の表示形式が変えられない
日付項目を表示すると、「15 August 2023」と表示されます。
日時でも、この形式に時刻が付くだけです。
日本では見慣れない形式なので、「yyyy/MM/dd」形式とかで表示できるようにして欲しいです。

1. レイアウトを自由に変えられない
ListとGridの決まったレイアウトしかできない。
見出しを折り返して2行表示にしたり、幅を広げたり、文字の大きさを変えたりができません。もう少し柔軟になっていると嬉しいなと思いました。

# まとめ
NotionAppsの一覧画面で行えるカスタマイズについて説明しました。
自由なレイアウトは行えませんが、ノーコードで簡単に一覧画面の作成が可能です。

編集画面のカスタマイズについては別記事で紹介する予定ですが、
基本的には一覧画面のカスタマイズと変わりありません。

本稿を参考に、色々と試して頂けるとうれしいです。