Notion APIを使用してCMSを構築する方法

[[436044]]

[51CTO.com クイック翻訳]オープンソースフレームワークであるAppsmithを使用すると、開発者は必要なコードのみを使用してダッシュボード、ワークフロー、CRUDアプリケーションを構築できます。同時に、MongoDB、PostgreSQL、MySQLなどの任意のAPIまたはデータベースに接続して、チャート、テーブル、フォームなどの複数のコンポーネントにアクセスし、さまざまなUIを迅速に構築できます。最も一般的なアプリケーションの1つは、AppsmithでNotionを使用してコンテンツカレンダーを管理し、外部チームとのコラボレーションを実現することです。もちろん、きめ細かいアクセス制御を作成し、Notion上でスムーズに機能するワークフローを開発するには、Notionが対応するアプリケーションを構築するためのAPIを公開し、一箇所で統一されたコンテンツ管理を可能にし、共同作業者に必要なアクセス権限を提供することがよく行われます。

以下では、コンテンツ管理システム（CMS）の構築方法を説明します。このアプリケーションは、Notion（模擬）の表をデータソースとして使用し、ユーザーがテキストコンテンツを入力、送信、編集できるようにします。また、SendGridを介して選択したメールサービスと連携し、チームメンバーにメールアラートや最新情報を送信できるようにします。機能面では、以下の点に焦点を当てます。

さまざまな著者からの新しいコンテンツのアイデアを提出する
提出期限を設定する
著者に直接メールで連絡する
Notionページですべてのデータを整理する

まずはアプリのスクリーンショットをいくつか見てみましょう。実際のインターフェースは、こちらのリンクからご覧いただけます：https://app.appsmith.com/applications/609e60fd5864501cc39c4836/pages/609e60fd5864501cc39c4838

Appsmith Notion APIアプリケーションのスクリーンショット

Notion APIを設定する

Notion API を使用すると Notion のページやデータベースに接続できるため、まず API を設定し、必要なキーをすべて収集して、Appsmith に接続する方法について説明します。

Notionで使用したいワークスペースを選択してください。テストのみをご希望の場合は、新しいワークスペースを作成してください。
左側のナビゲーションバーにある「設定とメンバー」オプションをクリックして、ワークスペース設定を開きます。すると、すべての設定を含む新しいモーダルが表示されます。
設定メニューの「統合」オプションで、「ワークスペース」オプションを見つけて選択します。これにより、「統合」タブにリダイレクトされます。
次に、「統合を開発する」オプションを選択してください。

すべての統合オプション

統合ページで「新しい統合」オプションを選択し、名前と使用するワークスペースを追加して、「送信」をクリックします。これで新しいキーが作成されます。

新しい統合を作成する

次に、ワークスペースに戻り、特定のページを選択して、共有オプション (右上隅にあります) をクリックします。
次に、「招待」ボタンをクリックし、新しく開いたモードで作成された統合を見つけて選択し、招待を確認します。
これでNotionページとの連携は完了です。連携キーは後ほどNotion APIで使用するので、大切に保管してください。

Notion では、作成、読み取り、更新、サードパーティアプリケーションへの接続などのさまざまな操作を実行するために、ワークスペースに統合キーを追加する必要があります。

Notionページを設定する

Notion API を使用する前に、コンテンツカレンダー用のデータベースを作成する必要があります。

このページで、コンテンツマネージャーに必要な次のフィールドを含む新しいテーブルを追加してください。

ジャワ
タイトル: テキストフィールド
説明: テキストフィールド
著者: テキストフィールド
カテゴリ: テキストフィールド
ステータス: ドロップダウンフィールド
注記: テキストフィールド
締め切り:日付フィールド
著者メールアドレス: Eメールフィールド

上記のNotionページをモックデータベースとして直接使用するには、このリンクをクリックしてワークスペースにコピーしてください。もちろん、AppsmithでNotion APIを使用してアプリケーションを構築するには、そのページに統合が追加されていることを確認してください。

Notion APIからデータをクエリする

Notion API を使用してデータをクエリするには、次の手順に従ってください。

まず、Appsmithアカウントが必要です。次に、「新規作成」ボタンをクリックして、組織内に新しいアプリケーションを作成してください。
左側のナビゲーションには、アプリケーション構築に役立つ様々なウィジェット、API、データベースクエリが用意されています。まずはNotion APIを作成してみましょう。
API の横にある + アイコンをクリックし、[新規作成] をクリックして、API に query_data_from_database という名前を付けます。
次の URL コンテンツを API に追加してください。

 HTTP
 https://api.notion.com/v1/databases/<db-id>/query

ここで、db-id は Notion ページのデータベース ID です。これを見つけるには、Notion テーブルをページとして開き、URL からデータベース ID を選択して、次のコードを入力します。

 https://www.notion.so/myworkspace/a8aec43384f447ed84390e8e42c2e089?v=...
 | --------- データベース ID --------|

次に、「ヘッダー」タブの下に次のキーを追加します。

認証: <秘密鍵>  統合から>
 Notionバージョン: 2021-05-13
コンテンツタイプ: application/json

以下は構成インターフェースのスクリーンショットです。

AppsmithのNotion API設定のスクリーンショット

最後に、[実行] ボタンをクリックして、レスポンス本文でページ上のすべてのデータを検索します。

Notion APIをAppsmithにバインドする

次に、Notion TableからのAPIレスポンスをリストウィジェットにバインドして、詳細情報をすべて表示する必要があります。具体的な手順は以下のとおりです。

ページ1の左側にあるナビゲーションを選択し、ウィジェットセクションの横にある+アイコンをクリックします。UIの構築に使用できるさまざまなUIウィジェットが表示されます。
必要に応じて、テーブルウィジェットまたはリストウィジェットを選択して、Notion APIからデータをバインドできます。この例では、リストウィジェットを使用します。
次に、リストウィジェットを画面にドラッグ＆ドロップします。リストウィジェット上部の歯車アイコンをクリックすると、Itemsプロパティのデータを確認できます。詳細については、https://docs.appsmith.com/widget-reference/list をご覧ください。
以下では、AppsmithでMustache構文を使用してJavaScriptを記述します。Itemsは、リストウィジェットのプロパティを以下のコードスニペットに置き換えます（Appsmithでは、Mustache構文の任意の場所でAPI名を使用してAPIにアクセスできます）。

 {{
 query_data_from_database.data.results.map(
 （アイテム） => {
戻り値(item.properties)
 })
 }}

ここでは、次の画像に示すように、`query_data_from_database` を使用して、返されたアイテムの属性にマッピングします。

データベースクエリからの応答のスクリーンショット。

次に、Notion APIから取得した詳細情報を表示するために、リストウィジェットに様々なウィジェットを追加します。ここでは、6つのテキストウィジェットをドラッグ＆ドロップし、Textプロパティを以下のように設定します。

 - タイトル
- 説明
- 状態
- 著者
- メール
締め切り

それらの隣にさらに6つのテキストウィジェットを追加し、Notion APIから対応する値をバインドします。Textプロパティは以下のように設定されます。

 {{ currentItem.Title.title[0].text.content }}

ここで、`currentItem` はリストウィジェット内の一意のアイテムに対応します。次に、`Items` リストの `Title` プロパティにアクセスし、JSON を解析します。次の画像はレスポンスを示しています。

対応するスクリーンショット

これで、リストウィジェットのNotion APIエントリを通じてタイトルを表示できるようになりました。同様に、他のテキストウィジェットのTextプロパティを設定することで、APIから取得したコンテンツを表示できます。例えば、次のようになります。

説明テキストウィジェットの場合は、Text プロパティを次のように設定します。

 {{currentItem.Description.rich_text[0].text.content}}

ステータステキストウィジェットの場合、Text プロパティを次のように設定します。

 { { currentItem.Status.select.name } }

著者テキストウィジェットの Text プロパティは次のように設定されています。

 {{currentItem.Author.rich_text[0].text.content}}

電子メールテキストウィジェットの場合、Text プロパティを次のように設定します。

 {{currentItem[ "著者メールアドレス" ].email || "追加されていません" }}

期日テキストウィジェットの場合、Text プロパティを次のように設定します。

 { {currentItem.Deadline.date.start }}

カテゴリテキストウィジェットの場合、Text プロパティを次のように設定します。

 {{currentItem.Category.rich_text.map(row => { return row.plain_text})[0]}}

プロジェクトを解析するためのコードは、Notion API の API 応答に応じて変更されることに注意してください。

最後に、管理者がAppsmithから著者に直接メールを送信できるように、ボタンウィジェットを追加しました。以下は、NotionテーブルをAppsmithのリストウィジェットに解析したスクリーンショットです。

Notion テーブルのすべてのデータを Appsmith リストウィジェットに解析した後のアプリのスクリーンショット。

`query_data_from_database` クエリに更新ボタンを追加するには、Button ウィジェットを画面にドラッグ＆ドロップし、Label プロパティを Refresh に設定します。次に、`onClick` プロパティを開き、「API 呼び出し」オプションをクリックして、`query_data_from_database` API を選択します。これで、更新ボタンをクリックするたびに、Notion ページに更新された新しいデータがすべて表示されるようになります。

Notionデータベースにエントリを追加する

コンテンツカレンダーにコンセプトテーブルの詳細をすべて表示できるようにするには、次の手順に従って、Appsmith のデータテーブルに新しいエントリを追加します。

まず、「Author Submission」という新しいページを作成し、フォームウィジェットをインターフェイスにドラッグアンドドロップします。
フォームウィジェットに、テキストウィジェットと入力ウィジェットをいくつか追加して、作成者が新しいコンテンツのアイデアを送信できるようにします。

フォームインターフェイスを次の図に示します。

コンテンツアイデア提出フォームのスクリーンショット

以下は参考用に作成したフィールドです。POST APIメソッドで将来参照できるように、これらのウィジェットには以下のように名前を付けました。

タイトル - titleInput
説明 - descriptionInput
著者名- authorInput
メール - emailInput
カテゴリー - categoryInput
提出日- dateInput

Appsmithからフォームが送信された際に、Notionページに新しい値を追加できるように、新しいAPIを作成しましょう。具体的な手順は以下のとおりです。

まず、「著者の提出」ページに新しい API を作成し、add_an_item_to_database という名前を付けます。
次に、「ヘッダー」タブの下に次のキーと値のペアを追加します。

認証: <秘密鍵>  統合から>
 Notionバージョン: 2021-05-13
コンテンツタイプ: application/json

本文タブに次のコードを貼り付けます。

 "親" : { "データベースID" : "<db-id>" },
 「プロパティ」 : {
 "著者" ： {
 「タイプ」 : 「リッチテキスト」 、
 "リッチテキスト" : [
 {
 「タイプ」 : 「テキスト」 、
 "文章" ： {
 「コンテンツ」 : 「{{authorInput.text}}」 、
 「リンク」 : null  
 }
 }
 ]
 },
 「著者メールアドレス」 : {
 「タイプ」 : 「メール」 、
 「メール」 : 「{{emailInput.text}}」  
 },
 「カテゴリー」 : {
 「タイプ」 : 「リッチテキスト」 、
 "リッチテキスト" : [
 {
 「タイプ」 : 「テキスト」 、
 "文章" ： {
 「コンテンツ」 : 「{{categoryInput.text}}」 、
 「リンク」 : null  
 }
 }
 ]
 },
 "状態" ： {
 「タイプ」 : 「選択」 、
 「選択」 : {
 「名前」 ： 「開始されていません」
 「色」 ： 「青」  
 }
 },
 "説明" ： {
 「タイプ」 : 「リッチテキスト」 、
 "リッチテキスト" : [
 {
 「タイプ」 : 「テキスト」 、
 "文章" ： {
 「コンテンツ」 : 「{{descriptionInput.text}}」 、
 「リンク」 : null  
 }
 }
 ]
 },
 "締め切り" ： {
 「タイプ」 : 「日付」 、
 "日付" ： {
 "開始" : "{{dateInput.selectedDate}}" ,
 「終了」 : null  
 }
 },
 "タイトル" ： {
 「タイプ」 : 「タイトル」 、
 "タイトル" ： [
 {
 「タイプ」 : 「テキスト」 、
 "文章" ： {
 「コンテンツ」 : 「{{titleInput.text}}」 、
 「リンク」 : null  
 }
 }
 ]
 }
 }
 }

私たちはまたデータベースIDを追加します。Mustache操作を追加することで、Appsmithの各入力フォームから入力を取得し、各属性のbodyフィールドを観察できるようになります。

次に、送信ボタンのプロパティウィンドウを開き、onClickプロパティを「APIを呼び出す」に更新し、「add_an_item_to_database API」を選択します。これで、Appsmithフォームを使用してNotionテーブルに新しいデータを追加できるようになります。

メール統合

Appsmith と著者間のコミュニケーションを容易にするために、Sendgrid を使用して電子メール統合を追加します。

電子メールを送信するためのパターンを作成します。

まず、リスト項目の「メールを送信」ボタンをクリックして、新しいモーダルを作成します。onClickプロパティを「モーダルを開く」に設定し、「新規作成」を選択することで作成できます。
プロパティペインでオプションを切り替えて、モードタイプをフォームに設定します。
モーダルウィジェットに、テキストウィジェットと入力ウィジェットをいくつか追加して、電子メールの送信を有効にしましょう。
作成した次のフィールドを参照してください。

送信先: 入力ウィジェット
メールの件名: 入力ウィジェット
メールコンテンツ: リッチテキストエディターウィジェット

ここで、これらのウィジェットに次のような名前を付けて、後で POST API メソッドで参照として使用できるようにします。

送信先: emailInput
メールの件名: subjectInput
メールの内容: contentInput

モードインターフェースのスクリーンショット

SendGrid API を構成する

まず、SendGrid アカウントが必要です。
次に、左側のナビゲーションペインで Email API をクリックして、統合ガイドに移動します。
Web API を選択し、cURL 言語を選択すると、検証タブにリダイレクトされます。
「検証」タブで、「APIを作成」をクリックして名前を付けます。これにより、SendGrid APIキーが生成されます。
次に、Appsmith を開き、ページ 1 の下に send_email という名前の新しい API を作成します。リクエストタイプを POST に設定し、URL フォームに次のコンテンツを追加します。

 https://api.sendgrid.com/v3/mail/send
承認: ベアラー <SendGridAPIKey>
コンテンツタイプ: application/json

最後に、本文を次の内容に設定します。

 { "personalizations" : [{ "to" : [{ "email" : "{{emailInput.text}}" }]}], "from" : { "email" : "[email protected]" }, "subject" : "{{subjectInput.text}}" , "content" : [{ "type" : "text/plain" , "value" : "{{contentInput.text}}" }]}

ここでは、スキーマウィジェットから宛先メールアドレス、送信元メールアドレス、件名、コンテンツの各フィールドを動的に渡します。フォームのonClickプロパティを「APIを呼び出す」に設定し、send_emailクエリを選択すると、Appsmithからメールを送信できるようになります。

まとめ

上記の手順を通して、Appsmith上でNotionバックエンドを備えたCMSアプリケーションを簡単に構築し、Notion APIに接続してデータを作成・取得する方法をご紹介しました。また、インタラクティブなページの作成方法やウィジェットのカスタマイズ方法もご紹介しています。アプリケーションのコード全体と関連するデモデータは、こちらのリンクからご覧いただけます：https://app.appsmith.com/applications/609e60fd5864501cc39c4836/pages/609e60fd5864501cc39c4838?utm_source=blog&utm_medium=direct&utm_content=notion-api-crm&utm_campaign=weeklyblog&utm_term=notion-api-crm

原題: Notion API を使用したコンテンツ管理システムの構築、著者: Vihar Kurama

[この記事は51CTOによって翻訳されました。提携サイトへの転載の際は、元の翻訳者と出典を51CTO.comとして明記してください。]

DUICUO