ブログにコメントできないコメント機能を表示させることにした

📅 2024-10-04

Customize

ブログにコメントできないコメント機能を表示させることにした

ブログ改造日記

🔄 2024-10-05

horomi:

コメントをする

horomi:

２つめのコメントをする。これは、スレッドにぶらさげてる感じかな？

horomi:

@cross

horomi:

画像はキャッシュをいじらないとっぽいのでテキストのみ繋いでます(チキンw)

cross:

Notionでコメントは見れてますよ〜

horomi:

本文に画像貼ってみましたw 今、dev上ではこんな感じ！！

horomi:

アットマーク入れるとそのあとのテキスト死んでますね。。。。なぞい

horomi:

いいな〜これ。めっちゃいいわー。

horomi:

内緒のお話したいときはメンションつければブログには表示されないw

cross:

コメントの内容を拾えるんですね😋

horomi:

動物園みたいな感じになりますね！！外から見ててね！入ってこないでね！みたいな🤭

cross:

スペースがはいったらそれ以降が出ないとかではないですかね？

horomi:

え！ ←スペース入れて書いてみてます。。。今。。。。ちょっとbuild中なのでそれが終わって本番環境で動き出したらこのコメントの表示見てみますね👀

horomi:

@cross

ここからは本文です

＼できあがった状態は以下の通り／

ブログ上：

Notion上：

返ってきたやつメモ：

{
  object: 'list',
  results: [
    {
      object: 'comment',
      id: '1155c7d2-12ad-802e-afde-001d7c2dda7b',
      parent: [Object],
      discussion_id: '1155c7d2-12ad-8090-a3fa-001c1bf734f8',
      created_time: '2024-10-04T07:50:00.000Z',
      last_edited_time: '2024-10-04T07:50:00.000Z',
      created_by: [Object],
      rich_text: [Array]
    },
    {
      object: 'comment',
      id: '1155c7d2-12ad-80af-a872-001dd957ff5c',
      parent: [Object],
      discussion_id: '1155c7d2-12ad-8090-a3fa-001c1bf734f8',
      created_time: '2024-10-04T13:25:00.000Z',
      last_edited_time: '2024-10-04T13:25:00.000Z',
      created_by: [Object],
      rich_text: [Array]
    }
  ],
  next_cursor: null,
  has_more: false,
  type: 'comment',
  comment: {},
  request_id: '372094f9-f0e9-4dde-b2bd-670d2f81d256'
}

すばらしくて涙が出そう….( ；∀；)

では、さっそく作り方を解説します！！！

分からない部分はAIに聞いて下さい。ポイントだけ提示されていれば把握できるかと思います✌

作り方

1. データの流れを雑に作る

1-1. Notion pageのコメントのデータを取得する

export async function getCommentsPage(pageId: string): Promise<Comment> {
  const blockId = pageId;
  const res = await client.comments.list({ block_id: blockId });
  const comments = res.results.map((comment) => {
    return {
      id: comment.id,
      text: comment.rich_text[0].plain_text // 例えば、コメントのテキストを抽出
    };
  });
  
  return comments
}

lib/notion/client.ts

これをconsole.logすると、配列になって返ってくる

[
  {
    id: '1155c7d2-12ad-802e-afde-001d7c2dda7b',
    text: 'コメントをする',
  },
  {
    id: '1155c7d2-12ad-80af-a872-001dd957ff5c',
    text: '２つめのコメントをする。これは、スレッドにぶらさげてる感じかな？',
  }
]

1-2. functionで処理した内容を表示させる

<div>{comment.map((comment) => (<div>{comment.text}</div>))} </div>

app/blog/[slug]/page.tsxのconst BlogSlugPage内

2. 見た目を整える

コメントごとに改行を加える。

<div>{comment.map((comment) => (<div style={{ marginBottom: '10px'}}>{comment.text}</div>))} </div>

app/blog/[slug]/page.tsxのconst BlogSlugPage内

3. 他に欲しい情報を加える

コメントをした主の名前を添える。

3-1. コメント主名を取得する

async function getUserName(userId: string){
   const res = await client.users.retrieve({ user_id: userId });
   const user= res.name
   return user
}

lib/notion/client.ts

3-2. コメント内容とコメント主名をまとめて処理する

Promiseで約束をしとくw

export async function getCommentsPage(pageId: string) {
  const blockId = pageId;
  const res = await client.comments.list({ block_id: blockId });
  const comments = await Promise.all(res.results.map(async (comment) => {
    const userName = await getUserName(comment.created_by.id);
    return {
      id: comment.id,
      text: comment.rich_text[0].plain_text, // コメントのテキストを抽出
      user: userName // ユーザー名を追加
    };
  }));

  return comments
}

lib/notion/client.ts

3-3. 横並びにして表示する

<div>
  {comment.map((comment, index) => (
    <div key={index} style={{ display: 'flex', alignItems: 'center', marginBottom: '10px' }}>
      <div style={{ marginRight: '10px', fontWeight: 'bold' }}>{comment.user}:</div>
      <div>{comment.text}</div>
    </div>
  ))}
</div>