データベース設計お疲れさまでした。
あとは見た目だけですね！
こちらをクリックしてください
最初に作ったこんなページになります
見た目は同じ。でも中身は初期とは全然違います。
先にホーム画面設計でどんなことをやるのか記してから、順に作っていきます。
ホーム画面設計の基本
よくやる設定
右上の ･･･ ボタンから出る Small text と Full width
好き好きですがONにしておくと画面が広く使えるのでオススメ
よく使うコマンド
ほぼこの4つのコマンドだけで終わる
| 名称 | 楽な呼び出し | 機能 |
| Linked view of database | /linke | データベースを読みだして配置します。 |
| Toggle list | >+space | トグルリストを設置 |
| Callout | /ca | レイアウト的なハコを設置 |
| 2 columns | /2c | あらかじめカラムを分けられます。 |
カラムは、ハンドルつかんで引っ張っていったらなってくれますけどね。
結構感覚的に作れるはずです。
Linked view of database
/linkeで出てくるデータベース埋込ビュー
ホーム画面を作るキホンです。ページ内にデータベースを埋め込むのに使います。
へタブ切り替えで、複数のデータベースへのアクセスもできます。
Toggle list
>をおしてからスペースを押すと、すぐに作れます。
使いやすい画面にするには、普段見ないものはしまっておく方がオススメ
普段見ないDBリストも、ページ内のDB自身もしまっておくことができます。
Callout
/caと打ち込んだら出てきます。
こんなハコが作れます。メリットは
・Calloutブロックごと動かせるので、グループのようになって便利
・アイコンや背景色の設定が可能で、視認性が良くなる
・長いデータベースも箱の中に納められるので、レイアウト調整が楽になる
というところ
2 clumuns
/2cと打ち込んだら出てきます。
この左右に分かれた部分を作ります。
NotionのPC版とスマホアプリ版で表示される順番
こうなります。なので一番使うのは１に設置するのがオススメ
支出入力部分を設置する
支出管理にデータを入れていきたいところです。
まずDB_支出管理に入ってビューを作ります。
家計簿で入力するビューを作成
tableのよこの+をクリックすると、New viewというタブが出ます。
ここは丁寧に説明していきます。次から重複分は省略します。
右側にある･･･をクリックすると、View optionsが出ます。
名称：Tableから「支出入力」に変更します。
次に必要なプロパティだけ表示します。
Propertiesをクリック
目のマークでON/OFFが変わります。
今回はDB_出力カテゴリー、Price、レビュー、URL、inputDateを表示します。
ここの設定はテーブル上の表示だけで、入力時とは違います。
なのでお好みで「inputDateもいらないとかURLも表示しない」としてもOK
表示錠はこれで隠れましたけど、
新しいレコードを入力するときにはプロパティが表示されてしまうので
NewやレコードのOpenをクリック
どのプロパティでも良いので、名称をクリック。Priceとか。
こんな画面がでるので、一番下のCustomize pageをクリック
propertiesの右側にある「Always show」を必要なものだけ残してAlways hideに変更
↓の入力する部分だけ残して、他はAlways hide
すると、レコード登録時の画面がスッキリ
確認したければ more properties を押せば出てきます。
ホーム画面に設置
ホーム画面で /linked といれて、Linked view of databaseを呼び出し
DB_支出管理を選択
右側の支出入力を選択
で、画面を閉じます。
/ca でcalloutブロックを作って、入れておきましょう。
点が6つ並んだハンドルをつかんで、Calloutブロックの中にドラッグします。
アイコンを変えたり背景色を変えたり、データベースの名称を消したりします。
アイコン変更はアイコンをクリックして選ぶだけ。
背景色はCalloutブロック左上にカーソルを合わせてハンドルをクリック
colorから変更
フィルターをかける
「どんな表示ならうれしいか」でいいんですけど。
今回は「今日の入力分だけ表示する」とします。
ここのFilterをクリック
＋Add advanced filterをクリック
Created timeがTodayで今日作ったレコードだけ表示されます。
これで支出の入力分は完成
収入入力部分を設置する
DB_収入管理に移動してViewの作成をしましょう
Name:収入管理
テーブルでの表示プロパティ:cash / カテゴリー / inputDate / 入金先
入力画面での表示プロパティ:cash / カテゴリー / inputDate / 入金先
入力画面は入力が必要な分を出しますが、他はお好みで。
ホームに戻って設置します。
/linkedview → DB_収入管理 → 収入管理
/callout →Title:今月の収入
フィルターの設定
今月分を表示させておきたいので
thisMonth → >0
とします。
↑のフィルターからthisMonthを選んで。
フィルターのthisMonthのすぐ右、↓写真の傾向ピンクの部分をクリックして＞を選択
入力欄に0と入力します。
買ってうれしかったものを表示させる
DB_支出管理でview作成しましょう
Table→properties:レビュー / Price
title:高レビュー
何を見たいか、名前もお好みで！
こちらは入力しないので、入力画面のプロパティをhideにするのはしなくて良いです。
ホームへの設置とフィルター
/linked → DB_支出管理→ 高レビュー
フィルター→レビュー→表示したいところにチェック（☆☆☆☆☆、☆☆☆☆）
/caでコールアウトブロックを作って、入れます。
予算残高を表示させる
DB_支出カテゴリーでviewを作ります。
+を押してNew view→Table→Done→Properties:今月の支出、月額残高、年間残予算
Title：残予算
入力はしないので、入力時のプロパティ表示は触らなくて良いです。
ホーム画面で設置します。
/Ca Callout設置→残予算
/linked → DB_支出カテゴリー → 残予算
Calloutブロック内にドラッグ
↑ですと、今月の支出と年間残予算が円になってないです。
こうなった場合、参照先のフォーマットがNumberになっています。
どこにつながっているのか確認して、Number formatをYenにしてください。
修正したら円表記になります。
年間の支出履歴を表示させる(トグル内)
DB_支出カテゴリーでviewを作ります。
Title:年間支出
Table → Done
Properties:1月～12月、年間支出
Claculate:SUM
テーブル下段のCalculateをSUMにしておきます。
ホームに設置します。
>を押してスペースでトグルリスト
→年間支出と入力
/linked → DB_支出カテゴリー → 年間支出
プロパティの並び方はクリック→ドラッグで調整できます。
個人的には年間支出が隠れがちなので、一番左にしておくのがオススメ
年間の収入履歴を表示させる(トグル内)
DB_収入カテゴリーでviewを作ります。
Title:年間収入
Table → Done
Properties:1月～12月、年間支出
Claculate:SUM
テーブル下段のCalculateをSUMにしておきます。
セルの幅が広い場合、↓の青のあたりをダブルクリックしたら調整されます。
ホームに設置します。
>を押してスペースでトグルリスト
→年間収入と入力
/linked → DB_輸入カテゴリー → 年間収入
配置調整
これで出したいものは概ね出し終えました。
入力されたデータさえあれば加工・出力は結構自由にできるかと思います。
あとは配置を変えてあげましょう
トグルリストをコールアウトの中にまとめる
複数のトグルも1つのコールアウトにまとめられます。
別の箇所に配置したい場合は入れなくていいのですが、まとめておきたい場合は便利です。
まぁもう一つトグルつくって入れておくとか、なんとでもできるのがNotionのいいところ。
お気に入りの方法を探してみて下さい。
それぞれのブロックのハンドルをつかんで好きに配置する
もちろん /2c で2カラムにしたり、それ以上に分けたりしてもいいです。
ここはホントに使いやすければなんでも。
移動したいブロックのハンドルをつかんで、移動先のブロックの隣に持っていくと
縦の青ラインがでます。ここで離すと、2カラムに変更になります。
— と入力すると区切り線が入ります。
スマホでの表示を調整したい場合は便利です。
あとはセンスで。色や名前、アイコン、カバー画像を触ってみましょう
OZZの例
【Notionで理想の家計簿をつくる】のまとめ
本当にお疲れさまでした。
長らくお付き合いいただきありがとうございます。
一連の講義で、Notionよく使う項目は概ねカバーできたつもりです。
理想の家計簿
これからNotionを触っていく知識
を提供できていれば嬉しいです。
分かりにくい点や、ミス等ございましたらご指摘ください。
他の講座も随時作ってまいりますので、今後ともよろしくお願いいたします。
筆者を応援する
ご自身用やプレゼント用に上記リンクよりご購入いただけると、
額面の4%が紹介料として私に支払われます。ご負担はありません。
私宛にお送りいただけると、泣いて喜びながら
関連書籍の購入やサーバー費用に当てさせていただきます。
メッセージ欄に機能改善リクエスト等頂ければトライしてみます。
Notionで家計簿を作る講座リンク
はじめに：講座で作る家計簿の説明
Notionはそもそも家計簿作りに向いてるかの検討
家計簿を作る目的の設定をしよう
まずは必要な項目を決めよう
Notionへログインして、空のデータベースを作るところまで
支出管理データベースの設定:Relation,Formula
支出カテゴリーデータベースの設定:Rollup
収入管理データベースの設定
収入カテゴリーデータベースの設定
コメント