チャべログ

チャベス(@ChabesuB)のブログ。Notionのこと、プログラミングのこと、日常のこと。

CodeSandbox を使って JavaScript や Python で Notion API を使用する方法

Notion AI
この記事を要約して

【Notion AI の要約】 この記事では、ブラウザ上で Node.js や Python を実行できる CodeSandbox で Notion API を使う方法について解説しています。CodeSandbox を使用して Notion API を利用するためには、API キーの設定や環境変数の登録が必要です。記事では、Node.js と Python の例を紹介していますが、他のプログラミング言語でも同様の手順で Notion API を利用することができます。 【記事の文字数】3211 文字

この記事では、ブラウザ上で Node.js や Python を実行できる CodeSandbox で Notion API を使う方法について解説しています。CodeSandbox は無料で利用でき、高度な使い方をしなければほぼ無制限で利用できます。前半部分は Node.js で SDK を使って Notion API を使用する方法、後半部分では Python で Notion API を使用する方法を解説します。

CodeSandbox の使い方

「Sign In」からアカウントを作成しておいてください。アカウントは Google、Apple、GitHub のアカウントでも作成できます。「Try for free」でアカウント登録なしでも使うことはできますが、自分のコードを保存しておくためにアカウントを作成しておくことがおすすめです。

CodeSandbox のトップ画面

続いて、「New sandbox」をクリックし、新規プロジェクトを作成します。

「New sandbox」をクリック

右上の検索 BOX で「node」と検索し、Node.js のテンプレートを選択します。(Python の場合は後述します。)

Node.js をクリック

以下の画面が開けたら準備完了です。

Node.js の環境構築完了

インテグレーションキーを準備する

Notion API で使用するインテグレーションキーを 準備します。まだ準備していない方は以下のページを参考に準備しておいてください。

ちなみに今回、インテグレーションキーやデータベース ID などはコード内に直接記載します。コードを公開する可能性がある場合は、インテグレーションキーなどが流出しないように環境変数に登録しておいてください。

CodeSandbox を使用する場合、無料プランではプライベートのリポジトリ(非公開)を使用することができず、パブリックのリポジトリ(公開)しか使用することができません。以下の手順で必ずインテグレーションキーを環境変数に登録しておいてください。

CodeSandbox で環境変数を登録する
  1. 左上のメニューで「Project Setting」を選択
    「Project Setting」をクリック
  2. 名前を「NOTION_API_KEY」とし(名前は任意)、インテグレーションキーを入力する。「Add」をクリックする。
    インテグレーションキーを登録
  3. 「Restart instance」をクリックする。
    「Restart instance」をクリック

これでインテグレーションキーを環境変数に登録することができました。ちなみに今回は説明をわかりやすくするためにデータベース ID や ページ ID は環境変数に登録しませんが、実際に使用する場合はこれらも環境変数に登録しておくのがおすすめです。

Node.js で環境変数を使用する

Node.js でインテグレーションキーを使用したい場合は、process.env.NOTION_API_KEYとすれば読み込むことができます。

Python で環境変数を使用する

Python でインテグレーションキーを使用したい場合は、以下のコードで読み込むことができます。

import os

NOTION_TOKEN = os.getenv('NOTION_API_KEY')

Notion SDK for JavaScript で Notion API を使用する

ここからは SDK を使って Notion API を扱ってみます。

SDK をインストール

まずは SDK をインストールします。

  1. 以下のピンクの枠のアイコンをクリックし、「New Terminal 」をクリックする
  2. npm install @notionhq/clientを貼り付けて「Enter」を押す
  3. 以下のようなログが出れば成功

もし、後述のコード実行時にエラーが出る場合は、Sandbox を再起動してみてください。

Sandbox の再起動
Notion SDK でデータベースにページを作成

テスト用に以下のようなデータベースを用意しました。

  • タイトルプロパティ「名前」
  • セレクトプロパティ「タグ」
テスト用 DB

上記のデータベースに以下のページを追加します。

  • 名前:「SDKで追加」
  • タグ:「SDK」

まずはデータベースの ID を取得します。テスト用のデータベースの URL は以下です。

https://www.notion.so/chabesu-blog/22e5dc3676004661a16a6c45e5ee1a4c?v=1cc5044e126b415899a940fb284cab66

上記の URL の22e5dc3676004661a16a6c45e5ee1a4cがデータベース ID です。

JavaScript のファイルを作成し(ファイル名は任意ですが、例えば index.js など)、下記のコードを記載します。

const { Client } = require("@notionhq/client");

const notion = new Client({
  auth: "secret_*******************************************", //環境変数を使う場合は process.env.NOTION_API_KEY
});

const DATABASE_ID = "22e5dc3676004661a16a6c45e5ee1a4c";

(async () => {
  const response = await notion.pages.create({
    parent: {
      type: "database_id",
      database_id: DATABASE_ID,
    },
    properties: {
      名前: {
        title: [
          {
            text: {
              content: "SDKで追加",
            },
          },
        ],
      },
      タグ: {
        select: {
          name: "SDK",
        },
      },
    },
  });

  console.log(response);
})();

上記の作成したファイルを Node.js で実行します。node ***.js コマンドで実行することができます。成功していればデータベースに「SDKで追加」が追加されています。

※ CodeSandbox の場合はコードを保存すると自動で実行されます。

CodeSandbox での実行結果
「SDKで追加」が追加

Python で Notion API を使用する

ここからは、Python で Notion API を扱う方法を説明します。

まずは、「New sandbox」をクリックし、新規プロジェクトを作成します。

「New sandbox」をクリック

右上の検索 BOX で「python」と検索し、Python のテンプレートを選択します。

Python をクリック

以下の画面が開けたら準備完了です。

Python の環境が準備完了
必要なライブラリをインストール

今回は、requestsというライブラリを使用するので、以下のコマンドでインストールしておきます。

pip install requests
CodeSandbox の場合

requirements.txtrequestsを追加します。

左上のメニューから「Restart Sandbox」をクリックします。

Notion API でデータベースにページを作成

テスト用に以下のようなデータベースを用意しました。

テスト用 DB

上記のデータベースに以下のページを追加します。

  • 名前:「Pythonで追加」
  • タグ:「Python」

まずはデータベースの ID を取得します。テスト用のデータベースの URL は以下です。

https://www.notion.so/chabesu-blog/22e5dc3676004661a16a6c45e5ee1a4c?v=1cc5044e126b415899a940fb284cab66

上記の URL の22e5dc3676004661a16a6c45e5ee1a4cがデータベース ID です。

Python のファイルを作成し(ファイル名は任意ですが、例えば main.py など)、下記のコードを記載します。

import requests
#import os 環境変数を使う場合

NOTION_API_KEY = 'secret_*******************************************' # 環境変数を使う場合は NOTION_API_KEY = os.getenv('NOTION_API_KEY')
DATABASE_ID = '22e5dc3676004661a16a6c45e5ee1a4c'

url = 'https://api.notion.com/v1/pages'

headers =  {
    'Notion-Version': '2022-06-28',
    'Authorization': 'Bearer ' + NOTION_API_KEY,
    'Content-Type': 'application/json',
}

json_data = {
    'parent': { 'database_id': DATABASE_ID },
    'properties': {
        '名前': {
            'title': [
                {
                    'text': {
                        'content': 'Pythonで追加'
                    }
                }
            ]
        },
        'タグ': {
            'select': {
                'name': 'Python'
            }
        },
    },
}

response = requests.post(url, headers=headers, json=json_data)
print(response)

上記の作成したファイルを python ***.py コマンドで実行します。成功していればデータベースに「Pythonで追加」が追加されています。

※ CodeSandbox の場合はコードを保存すると自動で実行されます。

CodeSandbox での実行結果
「Pythonで追加」が追加

おわりに

この記事では、CodeSandboxを使用してNotion APIを使ってみる方法について説明しました。Notion APIを利用することで、プログラミング言語を使用してNotionのデータベースにページを作成したり、情報を取得したりすることができます。

Notion APIを使うためには、まずはAPIキーの設定や環境変数の登録が必要です。また、各プログラミング言語ごとにNotion SDKをインストールし、APIを利用する準備を整える必要があります。

記事では、Node.jsとPythonの例を紹介しましたが、他のプログラミング言語でも同様の手順でNotion APIを利用することができます。

これからは、自分のプロジェクトでNotion APIを活用し、効率的な情報管理やデータ処理を行ってみましょう!(by Notion AI)