「Simple Notion Database to Sync」プラグイン-WordPressとNotionを連携させる仕組みをコード解説（Part2）

以下は「Simple Notion Database to Sync」プラグインのコード解説（Part2）です。開発者視点での構成や仕組みについて、重要ポイントを整理しながら解説していきます。

WordPressとNotionを連携させる仕組みをコードで解説（Part2）
クラス構造で整理された設計
APIキーとデータベースIDの設定管理
Notion APIへのリクエスト処理
記事一覧の表示（ショートコード）
スタイルの適用（CSS）
管理画面設定の追加
今後のPart3では？

WordPressとNotionを連携させる仕組みをコードで解説（Part2）

前回は、このプラグインの概要や使い方を紹介しました。今回は、実際のコードをもとに、どのようにNotion APIと連携しているのかを解説していきます。

WordPress初心者の方でもわかりやすいよう、段階的に説明していきます。

クラス構造で整理された設計

このプラグインはオブジェクト指向（OOP）で設計されており、NotionBlogIntegrationというクラスがすべての処理を管理しています。

class NotionBlogIntegration {
    private static $instance = null;
    private $api_key;
    private $database_id;

    private function __construct() {
        ...
    }
}

ポイント：

__construct() の中で必要なWordPressフック（add_actionなど）を設定。
get_instance() メソッドでシングルトンパターンを採用し、複数インスタンスの生成を防いでいます。

APIキーとデータベースIDの設定管理

設定ページで入力されたAPIキーとDatabase IDは、get_option() で取得しプラグイン内部で使用されます。

$this->api_key = get_option('notion_blog_api_key');
$database_id = get_option('notion_blog_database_id');

また、データベースIDはUUID形式に整形されてから使用されます。

private function format_database_id($id) {
    // UUIDフォーマットへ変換処理
}

なぜ整形が必要？
NotionのDatabase IDはURLからコピーするとハイフンがない形式の場合があるため、正しいフォーマットに変換しています。

Notion APIへのリクエスト処理

中核となるのがこの関数です。

private function query_notion_database() {
    ...
    $response = wp_remote_post($url, $args);
}

ここでは wp_remote_post() を使って、Notion APIへリクエストを送っています。

'headers' => array(
    'Authorization' => 'Bearer ' . $this->api_key,
    'Notion-Version' => '2022-06-28',
    'Content-Type' => 'application/json',
)

リクエストの構成：

認証にはBearerトークン（APIキー）を使用
sorts プロパティで記事の表示順を制御

記事一覧の表示（ショートコード）

フロントエンドに表示するのはこの部分。

public function display_blog_list($atts) {
    $data = $this->query_notion_database();
    ...
    foreach ($data['results'] as $page) {
        $title = $page['properties']['title']['title'][0]['plain_text'] ?? '';
        $excerpt = $page['properties']['excerpt']['rich_text'][0]['plain_text'] ?? '';
        ...
    }
}

Notionのデータ構造に合わせ、プロパティを丁寧に取り出して表示しています。
例えば「title」や「excerpt」は、配列の中にある plain_text を参照しています。

HTML出力例：

<article class="notion-blog-item">
  <div class="notion-blog-image"><img src="..." alt="..." /></div>
  <h2>タイトル</h2>
  <div class="notion-blog-excerpt">抜粋</div>
</article>

スタイルの適用（CSS）

CSSは assets/css/style.css に定義され、以下のような設計になっています。

.notion-blog-item {
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    background-color: #fff;
    ...
}

ホバー時のアニメーションやシャドウ効果で、シンプルながらプロっぽいデザインに仕上がっています。

管理画面設定の追加

管理画面には add_menu_page() によってメニューが追加されます。

add_menu_page(
    __('Notion Blog Integration', 'notion-blog-integration'),
    __('Notion Blog', 'notion-blog-integration'),
    'manage_options',
    'notion-blog-integration',
    array($this, 'display_admin_page'),
    'dashicons-admin-generic',
    99
);

フォーム部分は options.php を使って標準的に構成されており、register_setting() を用いて保存処理も行われています。

今後のPart3では？

今後のPart3では？Part3では、以下のような内容を予定しています。

Notionのプロパティ構造の応用（タグ、日付、URLリンク対応）
記事詳細ページへのリンク追加
パフォーマンス改善（キャッシュや非同期処理）

つづく。