NotionAPIの使用感

Posted date at 2025-01-04
Notion

こんにちは、Hello,Worldです。今回はNotionAPIを使用したので、感想を書いていこうかと思います。

NotionAPIとは何か

NotionAPIとは、Notionのデータベースやページの内容をプログラムから操作できるようにするインターフェースです。このAPIを使用することで、Notionのコンテンツを外部のアプリケーションやウェブサイトと連携させることが可能になります。つまり、Notionをヘッドレスコンテンツ管理システム（CMS）として活用できるようになるのです。Notion APIは、HTTPベースのREST APIで、

  • ページの作成・取得・更新
  • データベースのクエリ（検索）
  • ページやデータベースの構造を取得
  • コンテンツを読み書き

ということが出来ます。

NotionAPIを使用するメリット

Notionをヘッドレスcmsにすることで、フロントエンドを使えるようになります。SuperやWraptasのようなNotionのページを簡単にウェブサイト化出来るツールでやるよりも、ReactやNextjsを使えるのでSEOに強くなれますし、ページ速度も高速になります。また、フロントエンドを使用できるので、CSSやJavascriptの細かい編集が可能になります。例として、このブログで自分が書いたコードを引用します。

1<ReactMarkdown
2          className="prose prose-lg text-justify leading-relaxed"
3          rehypePlugins={[rehypeRaw]} // 生のHTMLを許可
4          components={{
5            a: ({ href, ...props }) => {  //ユーチューブの埋め込みを修正
6              if (href && href.includes("youtube.com/watch")) {
7                const videoId = href.split("v=")[1]?.split("&")[0];
8                return (
9                  <div className="iframe-container ">
10                    <iframe className="rounded aspect-[3/2]"
11                      src={`https://www.youtube.com/embed/${videoId}`}
12                    ></iframe>
13                  </div>
14                );
15              }
16              return <a href={href} {...props} />;
17            }, //ノーションの文章を整形
18            h1: ({ node, ...props }) => (
19              <h1 className="text-4xl font-bold my-6" {...props} />
20            ),
21            h2: ({ node, ...props }) => (
22              <h2 className="text-3xl font-semibold my-5" {...props} />
23            ),
24            p: ({ node, ...props }) => (
25              <p
26                className="text-lg my-4 text-gray-700 leading-loose"
27                {...props}
28              />
29            ),
30            ul: ({ node, ...props }) => (
31              <ul className="list-disc list-inside my-4" {...props} />
32            ),
33            blockquote: ({ node, ...props }) => (
34              <blockquote
35                className="border-l-4 border-gray-300 pl-4 italic text-gray-600 my-6"
36                {...props}
37              />
38            ),
39            img: ({ node, ...props }) => (
40              <img
41                {...props}
42                style={{
43                  maxWidth: "100%",
44                  height: "auto",
45                }}
46                className="rounded-lg shadow-md my-4"
47              />
48            ),
49            code({
50              inline,
51              className,
52              children,
53              ...props
54            }: {
55              inline?: boolean;
56              className?: string;
57              children?: React.ReactNode;
58            })

引用するYoutubeの大きさからimgまで細かく調整が出来ています。

NotionAPIをどうやって使うか

①Notion APIキーの取得

  1. Notion APIページにアクセスNotion Developers から新しい「Integration」を作成します。
  2. 新しいインテグレーションを作成
    • 名前やアイコンを設定。
    • 「Internal Integration」オプションを選択。
  3. APIキーを取得
    • 作成したIntegrationに対応する「Integration Token」をコピーします。

② NotionデータベースやページをAPIで操作する準備

  1. APIが操作する対象のページやデータベースを用意
    • Notionでデータベースやページを作成。
  2. Integrationにアクセス権を付与
    • 作成したIntegrationを、対象のページやデータベースに「招待」します。

こうするとNotionのAPIを使うことが出来ます。

それでは。

← ホームに戻る
;