質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.53%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

1回答

1024閲覧

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

Dakoit

総合スコア19

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

1クリップ

投稿2023/05/29 18:36

編集2023/05/31 21:13

実現したいこと

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

前提

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

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

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

VM34283:1 Uncaught ReferenceError: require is not defined

該当のソースコード

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

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

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

JavaScript

1const { Client } = require('@notionhq/client'); 2 3const notion = new Client({ auth: process.env.NOTION_API_KEY }); 4 5(async () => { 6 const blockId = '59833787-2cf9-4fdf-8782-e53db20768a5'; 7 const response = await notion.blocks.children.list({ 8 block_id: blockId, 9 page_size: 50, 10 }); 11 console.log(response); 12})();

試したこと

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

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

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

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

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

JavaScript

1const blockId = '●●'; 2const NOTION_API_KEY = 'secret_★★'; 3 4fetch(`https://api.notion.com/v1/blocks/${blockId}/children`, { 5 headers: { 6 'Authorization': `Bearer ${NOTION_API_KEY}`, 7 'Notion-Version': '2021-05-13', 8 }, 9}) 10 .then(response => response.json()) 11 .then(data => { 12 console.log(data); 13 }) 14 .catch(error => { 15 console.log('エラーが発生しました:', error); 16 });

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

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2023/05/29 21:20

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

2023/05/30 07:43

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

回答1

0

ベストアンサー

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

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

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

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

投稿2023/05/29 21:26

編集2023/05/30 12:01
退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Dakoit

2023/05/30 06:06

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

退会済みユーザー

2023/05/30 11:46 編集

> 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ライブラリ(クラッカー御用達ツール)を使う。 →言語が異なりますが、こちらも結構簡単に使えます。
Dakoit

2023/05/31 12:13

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.53%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問