NotionAPIでページコンテンツを取得したい

Question

実現したいこと

Notionのページ上で実行し、別ページのコンテンツをAjaxで取得したいです。

前提

・APIキー取得済みです。
・YouTubeのAPIを用いてJavaScriptでjosnを取得したことがありますが、コードの意味はよくわかっていないレベルです。

発生している問題・エラーメッセージ

公式ドキュメントを参照し、該当のソースコードを実行しましたが、下記のエラーでした。

VM34283:1 Uncaught ReferenceError: require is not defined

該当のソースコード

実行は完全に下記のままです。

おそらく３つ値（@notionhq/clientとprocess.env.NOTION_API_KEYとblockId）はそれぞれ適切な値が入るのかと思いますが、そういったことはせず、とりあえずエラー覚悟で完全に下記のまま実行しました。

実行場所はAPIキーを発行したNotioinアカウントにある、とあるページで開発ツールを開き、そのコンソール画面です。

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

const notion = new Client({ auth: process.env.NOTION_API_KEY });

(async () => {
  const blockId = '59833787-2cf9-4fdf-8782-e53db20768a5';
  const response = await notion.blocks.children.list({
    block_id: blockId,
    page_size: 50,
  });
  console.log(response);
})();

試したこと

先に述べましたように３つ値はそれぞれ適切な値が入るのかと思います。

それらを欠いた状態で実行しましたので、
「@notionhq/clientというURLにはアクセスできません」か
「NOTION_API_KEYが不一致です」か
「blockIdのコンテンツが見つかりません」などのエラーになるのかと思っていました。

しかし「requireが実行できません」と言っているので、この３つ以前の問題だと思っています。

しかし「requireってなんだ？」というレベルで、該当のソースコードの構造がよくわかっていないので、使い慣れたfetchで下記のように実行しました。

下記の●●は対象ページID32文字です。★★は取得したAPIキーです。（取得時にsecret_の接頭辞がありましたが、この接頭辞をつけたままでいいのかどうかも分かっていません。）

const blockId = '●●';
const NOTION_API_KEY = 'secret_★★';

fetch(`https://api.notion.com/v1/blocks/${blockId}/children`, {
  headers: {
    'Authorization': `Bearer ${NOTION_API_KEY}`,
    'Notion-Version': '2021-05-13',
  },
})
  .then(response => response.json())
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.log('エラーが発生しました:', error);
  });

しかしコンソールに出たのは下記のエラーでした

Refused to connect to 'https://api.notion.com/v1/pages/●●/children' because it violates the document's Content Security Policy.
エラーが発生しました: TypeError: Failed to fetch

Comments

[退会済みユーザー]

実行環境（例:node.js上で実行しているならばそのバージョン）を詳細に記載してください

[nin-nin]

APIキーを発行したNotioinアカウントにある、とあるページで開発ツールを開き、そのコンソール画面です。ここではnode.jsが使えないようなので、質問のようなfetchで試したみたという経緯になります。

Answer 1

後半の書き方をブラウザのコンソール経由で入力しても、うまくいきません。

Node.jsなどのサーバー経由ではなく、ブラウザのコンソールから後半の書き方でNotion APIを叩こうとすると通常「 has been blocked by CORS
policy 」というエラーが出ます。

公式の
const { Client } = require('@notionhq/client');
みたいなコードはnode.jsなどのサーバー環境で実行することを想定してます。

なので、公式のコードはnode.jsでWEBアプリとして実行してください。

Comments

[nin-nin]

node.jsを使えば「Notionのページ上で実行し、別ページのコンテンツをAjaxで取得」ができるのでしょうか？
または使ってもできないのでしょうか？
もし使わずにできれば、例えばfetchの正しい記述などを知りたいです。
これらの点につきまして知見がございましたらよろしくお願いいたします。

[退会済みユーザー]

> node.jsを使えば「Notionのページ上で実行し、別ページのコンテンツをAjaxで取得」ができるのでしょうか？
「Notionのページ上で実行し」というのが「Notionのページ ”に対して、アイテムの読み取り操作などを" 実行し」の意味ならば、node.js上で、公式ドキュメントが参照しているライブラリ（https://github.com/makenotion/notion-sdk-js
）を使ってできるはずです。

> もし使わずにできれば、例えばfetchの正しい記述などを知りたいです。
残念ながら、Node.jsなどのサーバー経由ではなく、ブラウザのコンソール経由では通常「 has been blocked by CORS
policy 」というエラーが出ますので、通常はできません。

ブラウザ自体のCORSを設定するという裏技[https://webbibouroku.com/Blog/Article/cors-browser-setting]はありますが、すべての通信についてこの設定が適用されるため、全くおすすめしません。
(最近のバージョンのブラウザではこの裏技自体封じられている可能性もあります）

Notion APIをちょっと試してみたい、けどnode.jsなんて難しそうだし調べるのもめんどくさいから嫌だ、ってんなら下記をおすすめします。

・Google Apps Script （おもちゃ）を使う。
→fetch に似た「UrlFetchApp」というクラスがあり、質問文の後半に書いてあるjavascriptのコードをちょっと変えれば、内容が取得できます。

・pythonのrequestsライブラリ（クラッカー御用達ツール）を使う。
→言語が異なりますが、こちらも結構簡単に使えます。

[nin-nin]

なんとまぁ…詳細にどうもありがとうございます。大変参考になりました。