About惺光 玖拾玖Notion Lab
About惺光 玖拾玖Notion Lab
🎎
yoshihiko_k’s Notion Lab/NotionLab

Notion - 親子リレーションの階層判定など位置関係を把握する方法

💬
どうもをやっております熊倉です
この記事はPC・タブレット閲覧推奨です

はじめに

親子リレーション、利用していますか？
こういうやつです
 
使ったことある方はお分かりかもしれませんが、
正直親子リレーションって使いづらいといった印象がありますよね。
 
僕もその昔、個人的にタスク管理をNotionでしようと意気込み、
親子関係を作って頑張った結果使わなくなってしまった悲しい思い出があります。
 

親子リレーションの課題

  • 可視化しずらい
  • 以下のように離れた階層が把握しずらい
     
    結果として、ぐちゃる。

    解決の糸口

    その状況を多少変えられる方法を今回はお伝えさせて頂きます。
    内容としては
     
    1. 階層レベルの表示
      1. 上記図のようなレベルは通常表示されない
    1. さかのぼった階層表の表示
      1. 例えばひ孫を見たときに、 といった階層構造であることを把握できる
     
    必要な前提知識
    • 同じDBに対してリレーションをはれる事を知っている
    • 運用時の課題を知っている
    上記を満たす方が対象になります
     

    まずは通常の親子リレーションの状況をご覧ください

    なるほど、親子だけならまだしも、孫まで登場してくるとぱっと見よくわからん。。となりませんか？
    こんなの管理しづらくてしょうがないです。
     
    一応、DBテンプレを利用し、ページを開いたら自分の子供だけを表示する・・ という事は出来ますが、ずっとページ開いていくの辛すぎる。
    • サンプル：親
     

    解決実例

    まずは完成形をご覧ください。
    , , の3つがある事によって、
    グッと位置関係が把握しやすくなりました。

    それでは、具体的な作り方をお伝えします

     
    前提
    • 親子リレーションを作ってあり、それぞれ、という名前のプロパティになっていること
     

    1. 階層レベルの作成

    1. ロールアッププロパティを作る →
      1. 暫定でロールアップ参照先をの に設定しておきます
    1. 関数プロパティを作る →
        • 関数内容 - 以下二つは同じ結果になります
            1. 三項演算子パターン
            1. ifパターン
        • 解説
            1. もし親がいなかったら第一階層 → レベル0
            1. 親がいたら 親の階層レベルに対して
              1. 子なら、 + なので =
              2. 孫なら、 + なので =
              3. ひ孫なら・・・
    1. のロールアップ参照先をのに設定します
      1. この設定を行う事で、親に対して循環的に参照をして取得をすることができます
    1. 出来上がり
     
    💡
    ポイント：ロールアップと関数の組み合わせで、循環参照(エンジニア向けには再帰処理)を組むことが出来ます。まだあまり広まっていないテクニックです。
     

    2. 階層表の作成

    2-1. 自分より親の階層表を作成する

    1. ロールアッププロパティを作る →
      1. 暫定でロールアップ参照先をの に設定しておきます
    1. 関数プロパティを作る →
        • 関数内容
        • 解説
            1. もし親がいなかったら自分の名前を設定する
            1. 親がいたら 親の名前に自分の名前を加える
              1. シンプルにするとこう
              2. しかし、親が複数いる場合、ロールアップではカンマ区切りで表示されるので、カンマ区切りに対してを使い置換をする
                    • 例) 親, 親2
                      • 親 → 子, 親2 → 子
                      • ↑ この結果を作るための関数です
                  💡
                  関数
                  今回のものをわかりやすくすると

                  のでは正規表現というテクニックを利用できます。 今回で使っている という表現は、 と改行コードである が0個か1個当てはまるもの全てを検索して。という命令になります で を最後に加えているためにこういった正規表現が必要になってくるというわけですね。
                  正規表現についてはこちらなど、ググったら色々と情報が出てきますので興味がありましたら調べてみて下さい
    1. のロールアップ参照先をのに設定します
      1. この設定を行う事で、階層レベル同様に親に対して循環的に参照をして取得をすることができます
    1. 出来上がり
     

    2-1. 自分より子の階層表を作成する

    親が作れたら、子に対しても作ってみましょう。
    逆方向になりますが、アプローチは同じようなものです。
     
    1. ロールアッププロパティを作る →
      1. 暫定でロールアップ参照先をの に設定しておきます
    1. 関数プロパティを作る →
        • 関数内容
        • 解説
            1. 親パターンと違うところ
                1. 左に向かって階段を登り自分がいるといった形にするために、お尻に自分をくっつけるのではなく、先頭に自分をくっつけています
    1. のロールアップ参照先をのに設定します
    1. 出来上がり
     
    以上！

    おわりに

    いかがでしたか？
     
    一個一個を覚えるのは大変かもしれませんが、
    多少は前向きになれそうな気がしなくもないですねw
     
    Notion Network Viewer - Sato's Diary
    Notionのデータをネットワーク図で可視化するNotion連携サービスを作りました。 たとえば、私は洋服をNotionでこんな風に、 洋服DBと、コーディネートDBの２つのDBで管理してまして、 洋服DBとコーディネートDBをリレーションで紐づけているのです。 こうしておくと、 「この服とこの服の組み合わせはイマイチだったな」とか、 「この服、いつも同じ組み合わせでしか着てないな」とかがわかって 良い感じなのです。 ただ、 洋服DBとコーディネートDBを紐づける作業が面倒なことと、 洋服のページ上ではコーディネートの写真が見れないので、 「この服を使ったコーディネートは...」というのを見たい時に、 ぱっと俯瞰してコーディネートを確認することができないところが難点。 というわけで、 その難点を解決してくれるNotion連携サービスを作っちゃいました。 その名も「Notion Network Viewer」。 nnv.satocheeen.com いったい、どういうものかというと。 Notion Network Viewerにて、 上述の洋服DBとコーディネートDBを指定して読み込ませると、 こんな風に描画されます。 どの服と、どのコーディネートが紐づいているのか、 一目瞭然！ ※DBのページ数が多いと初回読み込みにちょっと時間がかかりますが、 　データはブラウザ内に保存されるようにしているので、 　２回目以降は、すぐに表示されます。 そして、リレーションも画面上から作成可能です。 このサービスを作った個人的な一番のニーズは、この洋服DB管理目的なのだけど、 ア イデアメモとかにも使えそうだな～と思って、 Webクリップや、本の気になった文言を抜粋している「記事・本DB」と、 自分の感想や考えをつらつらメモった「思考整理DB」を読み込ませてみたら、 ↓こんな風に表示されて、おぉっ、となった。 我ながら、結構良いサービスを作った感がある(笑) 特にユーザ登録も不要な無料サービスですので、 面白そうだな、と思う方いましたら、お気軽にお使いくださ～い。
    https://satoko-room.hatenablog.jp/entry/2022/03/21/Notion_Network_Viewer
    最近、上記サービスのようにリレーションのネットワークを可視化してくれるサービスも出てきたりしていますが、
    Notion自身の工夫により可視化が出来るもんだなという所で、今回紹介した技を活用して頂ければ幸いです。
     
    突き詰めていくと親子リレーションにはまだまだ可能性があるのだという記事をいくつか書いておりますので、是非こちらもご参考下さい。
     
    📂 【続編】NotionDBのツリー構造にフォルダ機能をつけてみる
    👨‍👩‍👧‍👦【タスク管理】親子DBの子の期間から親の期間を自動設定する方法
     
    それでは、ありがとうございましたー！
     
    Xでポスト