はじめに
NotionAppsについての第4弾となります。
過去記事はこちら
今回は、編集画面のカスタマイズを行います。
カスタマイズで設定できるアイテムが多いため、参照系と編集系の2回に分けて説明します。
今回は参照系についてです。
前提条件・注意事項
Notionアカウント(無料でOK)を持っていること。
NotionAppsアカウント(無料でOK)を持っていること。
なお、2023年8月25日(執筆)時点での内容となります。
準備
それぞれの部品ごとに設定できる項目が違うため、Notionで色々な種類のプロパティを追加しています。
Notionにプロパティを追加したり、データを追加・更新した場合、NotionAppsの画面上部にある、「Reload」をクリックしないと反映されないのでお気をつけください。
編集画面カスタマイズ
項目を追加したり、変更したりするには、画面右にある部分(以下、設定画面という)で行います。
Logicの設定
Logicの右のほうにある「＋」ボタンをクリックすると、下記のように項目を追加する画面が現れます。
この画面の上部「Logic」の部分は、Notionデータベースのプロパティと項目を自動で関連付けたものの一覧となっていて、クリックすることで、その項目をすぐに編集画面に追加することができます。
一方、画面下部の「Components」は、自分で表示する項目(部品)を選択し、その後、自分でデータベースのプロパティと関連付けをするものとなります。
では、それぞれのComponentについて詳細に説明していきます。
今回は参照系のComponentについて紹介します。
Label
任意の固定文言を表示することができます。
Style
Labelには表示する固定文言を設定します。
改行もそのまま表示されます。
Label Styleには文字の大きさを設定します。
選択できるのは、SmallとLargeです(あまり大きさは変わらない)。
上記のように設定した場合、下記のような表示となります。
Divider
区切り線を表示することができます。
設定項目は特になく、下記のような表示となります。
View Text
変更不可のテキストを表示することができます。
View Property
Notionデータベースのプロパティと関連付けをします。
関連付けができるプロパティのみが選択候補に入っています。
Style
Labelには表示するテキストの見出し文言を設定します。
上記のように設定した場合、下記のような表示となります。
View Checkbox
変更不可のチェックボックスを表示することができます。
View Property
Notionデータベースのプロパティと関連付けをします。
関連付けができるプロパティのみが選択候補に入っています。
Style
Labelには表示するチェックボックスの見出し文言を設定します。
上記のように設定した場合、下記のような表示となります。
View Link
変更不可のリンクを表示することができます。
View Property
Notionデータベースのプロパティと関連付けをします。
関連付けができるプロパティのみが選択候補に入っています。
Style
Labelには表示するリンクの見出し文言を設定します。
上記のように設定した場合、下記のような表示となります。
Heading
一覧画面の1行のイメージで複数の情報を表示することができます。
View Property
Notionデータベースのプロパティと関連付けをします。
関連付けができるプロパティのみが選択候補に入っています。
Style
DividerをONにすると、この項目の下に区切り線が表示されます。
複数Headingを並べるときに使うと良いかもしれません。
上記のように設定した場合、下記のような表示となります。
Contact Card
連絡先(Emailと電話番号)の情報を表示することができます。
View Property
Notionデータベースのプロパティと関連付けをします。
関連付けができるプロパティのみが選択候補に入っています。
Style
Labelには表示する連絡先の見出し文言を設定します。
Behaviour
Allow MailをONにすると、メーラー起動ボタンが表示されます。
Allow MessageをONにすると、SMS起動ボタンが表示されます。
Allow CallをONにすると、電話起動ボタンが表示されます。
上記のように設定した場合、下記のような表示となります。
Video Viewer
動画を表示することができます。
View Property
Notionデータベースのプロパティと関連付けをします。
関連付けができるプロパティのみが選択候補に入っています。
Style
Labelには表示する動画の見出し文言を設定します。
上記のように設定した場合、下記のような表示となります。
Photo Viewer
画像を表示することができます。
View Property
Notionデータベースのプロパティと関連付けをします。
関連付けができるプロパティのみが選択候補に入っています。
Style
Labelには表示する画像の見出し文言を設定します。
Behaviour
Allow MultipleをONにすると、複数画像表示できるようになります。
※関連づいたプロパティにはカンマ区切りで画像が設定されている必要があります。
上記のように設定した場合、下記のような表示となります。
Location Viewer
位置情報を表示することができます。
View Property
Notionデータベースのプロパティと関連付けをします。
関連付けができるプロパティのみが選択候補に入っています。
Style
Labelには表示する位置情報の見出し文言を設定します。
上記のように設定した場合、下記のような表示となります。
Address Viewer
指定住所の位置情報を表示することができます。
View Property
Notionデータベースのプロパティと関連付けをします。
関連付けができるプロパティのみが選択候補に入っています。
Style
Labelには表示する位置情報の見出し文言を設定します。
上記のように設定した場合、下記のような表示となります。
Button
ボタンを表示することができます。
View Property
Notionデータベースのプロパティと関連付けをします。
関連付けができるプロパティのみが選択候補に入っています。
Style
Titleにはボタンの文言を設定します。
Colorにはボタンの色を設定します。Dark, Lightから選択できます。
Behaviour
on Clickにはボタンの挙動を設定します。
それぞれ関連付けたプロパティに保存された値が使用されます。
Open Link･･･リンクを開く
Dial Phone･･･発信先として電話アプリを開く
Open Email･･･送信先としてメールアプリを開く
Open SMS･･･発信先としてSMSアプリを開く
上記のように設定した場合、下記のような表示となります。
File Viewer
ファイルを表示することができます。
View Property
Notionデータベースのプロパティと関連付けをします。
関連付けができるプロパティのみが選択候補に入っています。
Style
Labelには表示するファイルの見出し文言を設定します。
Behaviour
Allow MultipleをONにすると、複数ファイル表示できるようになります。
※関連づいたプロパティにはカンマ区切りで画像が設定されている必要があります。
上記のように設定した場合、下記のような表示となります。
まとめ
NotionAppsの編集画面で行えるカスタマイズについて、今回は参照項目について説明しました。自由なレイアウトは行えませんが、ノーコードで簡単にカスタマイズできることが分かって頂けたかと思います。
次回は、Visibility Logic(条件付き表示) の方法について説明する予定です。
本稿を参考に、色々と試して頂けるとうれしいです。