はじめに

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

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

前提条件・注意事項

Notionのアカウント(無料でOK)を持っていること。
NotionAppsのアカウント(無料でOK)を持っていること。

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

準備

一覧画面のカスタマイズの説明をするために、まずNotionにデータを登録します。
タスク管理に「予定時刻」というテキストプロパティを追加し、データも以下のように設定しました。ちょうど、昼食を食べ終わって、あと片づけをしているタイミングを切り出しているイメージです。

Notionにプロパティを追加したり、データを追加・更新した場合、NotionAppsの画面上部にある、「Reload」をクリックすると、データがNotionAppsに反映され、下記のような表示になります。

一覧画面カスタマイズ

NotionAppsでカスタマイズを行うには、画面右にある部分(以下、設定画面という)で行います。

Styleの設定

View Type

ListとGridが選択できます。

List

「View Less Data」トグルボタンが表示されます。
これをONにすると、1件あたりの表示内容が少なくなります。

View Less DataのOFFの場合の表示

View Less DataがONの場合の表示

なるべく多くのデータを一覧表示したい場合に利用すると良いと思います。

Grid

「Grid Column Count」が指定できるようになります。
これはグリッドの列数を指定でき、値は「One」または「Two」です。

「Two」を指定した場合の表示

Dataの設定

Title, Description, Caption

Title、Description、Captionで設定した項目が3段に並んで表示されます。
Description、Captionという意味は気にせず、表示した項目を選びます。
自動生成したタスク管理アプリでは、「作成日」が設定されていますが、タスクを作った日を表示してもあまり意味がないので、「予定時間」に変更します。

Color Tag

Color Tagは左の色付きの部分です。
値が一致した場合、対応する色の帯で表示されます。一致する値がない場合は、青色の帯で表示されます。一致しない値が設定される可能性がある場合は、青色の帯の設定は止めた方がいいです。

Image

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

画像でないものが指定されると以下のような表示になります。

Behaviourの設定

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

Go To Update Screen

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

Add New Data

Add New DataをONにすると、Go To Screenが現れ、それをクリックすると、登録画面の設定画面に遷移します。登録画面のベースも自動で作成されています。
登録画面のカスタマイズについても、別投稿で説明予定です(編集画面と併せてかも？)。

Add New DataをONにすると、画面右下に「＋」アイコンが表示されます。
これをクリックすると、登録画面に遷移します。

Search

SearchがONの場合、画面上部に検索窓が表示されます(デフォルトでON)。
Allow ScanをONにすると、バーコードスキャンができるようになります。
また、Search Helper Textは検索窓に表示するプレースホルダーです。

上記のように設定すると、このような表示となります。

検索窓に入力した値の検索対象は全項目で、あいまい検索となります。
上図で、「対応中」で検索したり、「8:00」で検索したりできます。
また、画面に表示されていない項目に対しても検索範囲となっています。

Filtering

Filteringは表示する内容のフィルタリング設定ができます。
まだ完了していないタスクだけを表示する場合、以下のように設定します。

フィルタリングした結果、「対応中」と「未着手」のもののみ表示されるようになりました。

フィルタリングは、複数項目指定することができ、複数の条件がどちらも満たす場合(And)、複数の条件のいずれかを満たす場合(Or)の指定も行えます。

Sorting

Sortingは表示する順序を設定できます。
予定時刻順に上から並べるには以下のように設定します。

並び替えした結果、予定時刻の順に並びました。
これで、次に何をやらなくてはいけないかが分かりやすくなりました。

In-App Filtering

アプリ内でユーザが絞り込みを行う機能を提供します。
検索窓は全項目に対するあいまい検索でしたが、こちらは、開発側で絞り込む項目を指定できます。以下は、Nameでの絞り込みができるようにする設定です。

「＋」ボタンの上に、漏斗マークが表示されます。

クリックすると、下記のように、絞り込む値の選択画面が表示されます。
絞り込む値にチェックを入れ、「Apply」をクリックします。

絞り込んだ内容が表示されます。
絞り込みを解除するには、「Reset」をクリックします。

画面タイトルの設定

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

最終的にできた未完了タスク一覧がこちらです。

気になった点

色々とカスタマイズをしてみて、気になる点(改善して欲しい…)は以下の2点です。

日付項目の表示形式が変えられない
日付項目を表示すると、「15 August 2023」と表示されます。
日時でも、この形式に時刻が付くだけです。
日本では見慣れない形式なので、「yyyy/MM/dd」形式とかで表示できるようにして欲しいです。
レイアウトを自由に変えられない
ListとGridの決まったレイアウトしかできない。
見出しを折り返して2行表示にしたり、幅を広げたり、文字の大きさを変えたりができません。もう少し柔軟になっていると嬉しいなと思いました。

まとめ

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

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

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