herohoroブログ

Tagを整理して雑多なブログを整頓する_Category機能の導入



🔄   2023-03-14

easy-notion-blogのTags列。

image block

便利便利。

記事を探すとき…

記事の内容を読まずになんとなく把握するとき…

記事を仕分けるとき….

意外と使うTags列。

私はこのTags列に勝手な仕分け思考を盛り込んで

結果的に雑多なTags一覧と変貌させてしまっていました。。。。

😱
本家のブログでは「Category」と表記されていますが
私は勝手に「Tag列なんだからTagっしょ!」ってことで【Tag List】と明記しています。。。
image block

いや、気づいてはいました。

でも「なんとかなるっしょ」っていういつもの安易な発想から

記事を投稿する度にカオスにしてしまったTags。

今回はこのTags一覧を整理していく改造過程を紹介します。

なんでこんなことになってしまったのか…..

そこも含めて反省したいと思います(´;ω;`)

原因:トピック以外も扱いたくてTagに丸投げしていた

投稿した記事に対して….

  • トピック的なTags
  • テーマ的なTags
  • 困ったらすぐ見つけたいTags
  • なんとなくで命名したTags

こんな感じでTagsの種類を増やしていってしまいました。。。。

image block

ツッコミどころ満載だと思いますwww

そしてTagsの名前の長さも問題。

「easy-notion-blog_最新情報」とか

「easy-notion-blog_事始め」とか…..

もはや「easy-notion-blog」でよくない!?

と一瞬思うのですが、

そうなると探しにくくなる。

っというかこのブログの全てがeasy-notion-blogネタ。( ゚д゚)ハッ!

だからといって「事始め」だけだと意味が伝わってこない。。。。

そんなこんなで長々としたTagsになってしまっていました。

Tagsが雑多になり苦し紛れにHomeページの上に4つのテーマを提示しました。

image block

今思うとテーマとは言えませんよね。

だって「01_よくある質問」ってズレてますもん。

しれっと【困ったらすぐ見つけたいTags】を混入させていたようです。

だって、すぐ見つけたいから目立つところに置いておきたかったんだもん。。。。。

最後の極めつけは【なんとなくで命名したTags】。

image block

便利だと分かったから記事にしているわけで…..

情報を扱っているのがブログなわけで…..

このTags名、意味が分かりません😂

方向性:トピック的Tagsのみにして整理する

すぐできる要素順に並べると…

  • なんとなくで命名したTags 👉 Tags名を修正する
  • 困ったらすぐ見つけたいTags 👉 テーマありきでTags名を修正する
  • テーマ的なTags 👉 新たに機能を追加する

整理に伴ってブログのコードを改造して機能を追加する必要も出てきました。

テーマ的なTagsをCategoryとして扱い、

そのCategoryありきでTags名を修正する。

これによって長々としたTags名もスッキリする…. という作戦です。

完成イメージ

【easy-notion-blog_事始め】や【easy-notion-blog_最新情報】だったTags名の記事は、

【rootRepository】というCategory名にし、

そのCategoryに属するTagsとしてTags名を考える。

  • 事始め的な内容なら【README】
  • 事始め+【01_よくある質問】なら【README】+【Q&A】
  • 最新情報的な内容なら【Support】

後からサポートされてREADMEにも追加され、

それがよくある質問だったりすると3つのTagsが並ぶこともあります( ゚д゚)ハッ!

image block

Category効果でTags一覧は一気に清潔感が増します。

image block

結局このブログは….改造・改造に向けた勉強・本家の3つのテーマしかないので、

  • 改造:Customize
    • 自分のブログの改造
    • 作業用ページの改造
  • 改造に向けた勉強:Learning
  • 本家:rootRepository

この3つをCategory列にして設定しました。

もちろんSelectプロパティです。

image block

Selectプロパティで選んだ色もブログで使えるように改造しています。

image block

ではさっそくCategoryの改造について見ていきましょ〜〜〜^\(^o^)/

Category列のデータを取得する

今回もBlog learnを参照しながら進めていきます。

型定義

image block

https://herohoro.com/blog/blog-learn_notion-api-read#読み込むデータの型を定義する

Category列はselectプロパティに設定しているので、

Notion公式リファレンスのselect部分を使います。

image block

https://developers.notion.com/reference/property-object#select-configuration

export interface Post {
  PageId: string
  EditTime: string
  Title: string
  Slug: string
  Date: string
  Tags: string[]
  Excerpt: string
  OGImage: string
  Rank: number
  Like: number
+  Category: string
+  CategoryColor: string
}
src/lib/notion/interfaces.ts

取得

Blog learn03の記事の中ではplain_textとdateを扱っていますが、

今回はどちらかというdateの方が近いです。

image block

https://herohoro.com/blog/blog-learn_notion-api-read#Date列のデータは....

function _buildPost(data) {
  const prop = data.properties
  const post: Post = {
    PageId: data.id,
    EditTime: data.last_edited_time,
    Title: prop.Page.title[0].plain_text,
    Slug: prop.Slug.rich_text[0].plain_text,
    Date: prop.Date.date.start,
    Tags: prop.Tags.multi_select.map((opt) => opt.name),
    Excerpt:
      prop.Excerpt.rich_text.length > 0
        ? prop.Excerpt.rich_text[0].plain_text
        : '',
    OGImage:
      prop.OGImage.files.length > 0 ? prop.OGImage.files[0].file.url : null,
    Rank: prop.Rank.number,
    Like: prop.Like.number,
+   Category: prop.Category.select.name,
+   CategoryColor: prop.Category.select.color,
  }
src/lib/notion/client.ts

Category列のデータを表示する

Blog learn03同様、componentで取り出せるように準備します。

image block

https://herohoro.com/blog/blog-learn_notion-api-read#整頓したデータを活用して表示する

流れに沿ってPostCategoryとしてみました。

+ export const PostCategory = ({ post }) => (
+   <div className={`${post.CategoryColor}`}>
+     <p>{post.Category ? post.Category : ''}</p>
+   </div>
+ )
src/components/blog-parts.tsx

このcomponentを使って記事一覧ページに表示させていきます。

image block

https://herohoro.com/blog/blog-learn_notion-api-read#いざ出陣!!

同様にして、PostCategoryをimportし、RenderPostsに追加します。

 import {
	 BlogPostLink,
	 BlogTagLink,
	 NoContents,
   PostDate,
   PostExcerpt,
   PostTags,
+  PostCategory,
   PostTitle,
   PostsNotFound,
   PostThumbnail,
   TwitterTimeline,
   RssFeed,
 } from '../../../components/blog-parts'
src/pages/blog/index.tsx
const RenderPosts = ({
//省略
}) => {
  return (
{posts.map((post) => {
              return (
                 <div className={styles.post} key={post.Slug}>
                   <PostDate post={post} />
+                  <PostCategory post={post} />
                   <PostTitle post={post} />
src/pages/blog/index.tsx

完成\(^o^)/

image block

記事一覧の次のページも表示させるには

src/pages/blog/before/[date].tsx にも同じように追加します。

Tagsのボタンから同じTagで統一された記事一覧ページにも表示させるには….

src/pages/blog/tag 配下のファイルにも追加。。。。

といった感じで表示させたいページに該当するファイルには追加していきます。

😩
結構この作業がキツかった……

Tags機能のように専用ページを用意したい!?

これは、さすがにBlog learnでも触れていない部分なので簡単にお伝えすると….

getStaticPathsを使ってCategory名を当てていくのですが…..

ざっくりしたコツとしては、

Tagsで動いている関数を複製して….

【Tags】と明記されている部分を【Category】に変換し…..

【Categorys】でないとエラーになる部分があるので怒られながら修正し…..

作っていく……

といった戦法でなんとか実装できました(●´ϖ`●)www


Tagsはmulti_selectプロパティなのでmapする場面がありますが、

Categoryはselectプロパティで1つなのでmap不要です。

それだけではなく….

Category自体を全部取得している部分と

1記事に対して複数存在するTagsとがあり頭の中が混乱….(´;ω;`)

🤯
【s】って2つの意味があるとか聞いてない〜〜〜〜〜〜

今までと何が違っていたかを落ち着いて考えてみたら、

client.databases後が見慣れないメソッドだということに気づき….

export async function getAllCategorys() {
  if (blogIndexCache.exists()) {
    const allPosts = await getAllPosts()
    return [...new Set(allPosts.flatMap((post) => post.Category))].sort()
  }

  const data = await client.databases.retrieve({ 👉 これ
    database_id: DATABASE_ID,
  })
  return data.properties.Category.select.options
    .map((option) => option.name)
    .sort()
}
src/lib/notion/client.ts

公式リファレンスを確認してみると、

「対象は記事ではなく列の情報か!!!」ということを知り…..

image block

https://developers.notion.com/reference/retrieve-a-database

getAllCategorys関連で動くcomponentは

【category】ではなく【categorys】を引数に入れるんだなということが分かり

テンションが上りました。

そこから完成までは一気に進みましたが気づけば朝の5時。

2時までに切り上げる予定が大幅にオーバーしていて焦りました(;´Д`)

easy-notion-blogが作られてからずっとあったTags機能。

Category機能を自力で追加する過程で、

改めてTags機能ってすごい機能だということを痛感しました。。。。

ありがとう。アルパカ先生(´;ω;`)


後半雑だったことを後日反省し、

pathに注目した解説記事を投稿しましたm(_ _)m

Twitterでは更新のお知らせを随時行っています

興味ある方はLet'sフォロー★

▼ この記事に興味があったら同じタグから関連記事をのぞいてみてね

Buy Me A Coffee

新着記事を通知したい??


RSSリーダーにatomのリンクを登録すると通知が行くよ🐌

https://herohoro.com/atom

やってみてね(*´ω`*)(*´ω`*)

Twitter Timeline


フォロー大歓迎\(^o^)/