WordPressの記事をREST APIで取得してポートフォリオへ反映する仕組みについて解説します

現在開発中の「My Portfolio」の技術ブログ一覧ページで、「WordPress同期」ボタンを押せば、

以前、WordPressで書いた技術ブログのデータが同期されるようにしました。

↓ 同期後にサクセスメッセージを表示させています。

WordPress REST APIとは

WordPress REST APIとは、WordPressの記事データをJSON形式で取得するための仕組みです。

プログラムから記事情報を取得できるため、今回のようにWordPressの記事を別のシステムへ取り込む際に利用できます。

WordPress記事同期の処理フローの全体像

全体の処理の流れは以下のとおりです。

1. 同期処理を開始する
   ローカル環境で「WordPress同期」ボタンを押すと、/blogs/import-wordpress にPOSTリクエストが送信されます。
2. 同期対象の記事を特定する
   Googleスプレッドシートから技術ブログの記事URLを取得し、それぞれのURLからWordPressの記事を識別するためのslugを抽出します。
3. WordPressから記事情報を取得・整形する
   slugを使ってWordPress REST APIにアクセスし、記事タイトル、本文、投稿日などの情報を取得して、My Portfolioで扱える形式に整形します。
4. My Portfolioのデータベースを同期する
   すでに登録されている記事は更新し、未登録の記事は新規登録します。また、WordPress側に存在しなくなった記事はデータベースから削除します。
5. 同期結果を返す
   新規登録・更新・削除・スキップした記事の件数を集計し、URLパラメータとして処理結果を返します。

1. 同期処理を開始する

ローカル環境で「WordPress同期」ボタンを押すと、/blogs/import-wordpress にPOSTリクエストが送信されます。

1-1. ローカル環境でWordPress同期ボタンを押す

技術ブログの一覧ページにあるWordPress同期ボタンを押します。

ボタンについての補足 : 本番環境では表示されないようにしている

このボタンは本番環境では表示されません。

{% if not is_production %} で囲まれているためです。

is_productionは、一覧ページ取得処理でテンプレートに渡されています。

本番環境の時、is_productionがTrueになります。

つまり、not is_productionがFalseになります。

そのため、{% if not is_production %} で囲まれているWordPress同期のボタンが表示されなくなります。

1-2. /blogs/import-wordpress にPOSTリクエストが送られる

以下のフォームを指定しているので、/blogs/import-wordpressにPOSTリクエストが送られます。

1-2-1. POSTリクエストの受け取り

ルーターで、POSTリクエストを受け取っています。

1-2-2. import_wordpress関数の処理開始

受け取った後に、import_wordpress関数の処理が始まります。

URLについての補足

/blogs/は、prefixとして指定しています。

Swaggerについての補足

tagsは、Swaggerの見た目・ドキュメント整理のための設定です。

Swaggerは、APIをブラウザで試せるというFastAPIの機能です。

http://127.0.0.1:8000/docs でアクセス可能です。

2. 同期対象の記事を特定する

Googleスプレッドシートから技術ブログの記事URLを取得し、それぞれのURLからWordPressの記事を識別するためのslugを抽出します。

2-1. 事前に用意したGoogleスプレッドシートから技術ブログの記事URLを取得する

事前に、Googleスプレッドシートでリストを作成しておきました。

https://docs.google.com/spreadsheets/d/1w249ZyekrGIN2P0D6dkG98iPGNrTxebScjyOUjnuGyA/edit?usp=sharing

これは、私がこれまでに書いた記事をMy Portfolioのコンテンツ作成のために分類したものです。

2-1-1. CSV形式の公開URLを作成する

CSV形式のgoogleスプレッドシートの公開URLを作成しました。

ファイル > 共有 > ウェブへの公開で作成できます。

2-1-2. CSV形式の公開URLを使用する

get_tech_blog_urls_from_sheet関数でsheet_csv_urlに代入します。

2-1-3. CSVをpandasで読み込んでデータフレームを作成する

pandasのread_csv関数で、このCSVを読み込んでdfに代入します。

2-1-4. データフレームから技術ブログを抽出する

dfから技術ブログの列が◯の行がTrueの行を抽出して、tech_blogsに代入します。

tech_blogsの中身は、以下のようなイメージです。

記事URL	制作物	技術ブログ	職務経歴
https://ki-hi-ro.com/design/		◯
https://ki-hi-ro.com/post-output/		◯
https://ki-hi-ro.com/custom-field/		◯

2-1-5. さらに記事URLを抽出して、リストにする

ここから記事URLの列を抽出して、空白を削除して、リストにします。

これが、get_tech_blog_urls_from_sheet関数の戻り値です。

import_wordpress関数の中で、target_urlsに、urlsが代入されます。

3. WordPressから記事情報を取得・整形する

slugを使ってWordPress REST APIにアクセスし、記事タイトル、本文、投稿日などの情報を取得して、My Portfolioで扱える形式に整形します。

3-1. それぞれの記事URLからslugを取り出す

技術ブログの記事URLのリストが代入されたtarget_urlsを使用して処理を行います。

get_slug_from_url関数を使用してslugを取得します。

この関数の定義はこちらです。

対象記事のURLを解析した後のイメージは以下です。

pathの最後の/を取り除くと「/design」のようになります。

“/” で分割して作成したリストの最後の英単語を取得したもの（ = slug）を返します。

補足 : WordPress REST APIからslugで記事を検索できる

WordPress REST APIでは、記事を slug で検索できます。

例えば、

https://ki-hi-ro.com/design/

という記事URLの場合、

slug は design になります。

そのため、URLから slug を取り出して、
後続の WordPress REST API の検索に利用しています。

3-2. slugを使用してWordPress REST APIで記事情報を取得する

requestsのget関数で、記事情報を取得します。

3-2-1. WordPress REST APIのURLを指定する

base_urlは、WordPress REST APIのURLを指定します。

WordPress REST APIのURLには、投稿情報のJSONのリストが入っています。

3-2-2. requestに渡すヘッダーを定義する

headersでは、requestに渡すヘッダーを定義します。

User-Agentは、ブラウザなどのアクセスしてきたクライアントを指定します。

今回はサーバーからのBot対策を回避するため、ブラウザっぽい Mozilla/5.0という名前を指定しました。

Acceptは、どんな形式のレスポンスを受け取れるかを指定します。

application/json,text/html,*/*は、JSON, HTML, なんでもという意味です。

Refererは、どのページから来たかを指定します。

https://ki-hi-ro.com/は、私のブログです。

3-2-3. 取得した値をresponseに代入する

取得した値は、responseに代入します。

3-2-4. ステータスコードが正常（200）ではない場合

ステータスコードが正常ではない場合は、処理を中断して、次のURLの処理に進みます。

3-3. slugを使用して取得したWordPress REST APIの記事情報をPythonで扱えるデータに変換する

responseはJSON形式のため、json関数でPythonのデータに変換します。

記事が存在しない場合はスキップします。

3-4. 記事データを取り出す

WordPress REST APIは検索結果をリスト形式で返します。

今回の処理ではslugを指定しているので、リストには一つしか要素がありません。

3-4-1. まずはWordPress REST APIの検索結果から大枠を取り出す

そのため、posts[0]で最初の記事データを取り出しています。

3-4-2. 次に記事タイトル、本文、投稿日などの情報を取得する

postからtitleとblog_urlとcontentとsummaryとpublished_atとtagsを取得します。

postには、以下のようなJSONが入っているため、

{
  "title": {
    "rendered": "記事タイトル"
  },
  "link": "https://ki-hi-ro.com/design/"
}

post[“title”][“renderd”]でタイトルを取得しています。

4. My Portfolioのデータベースを同期する

すでに登録されている記事は更新し、未登録の記事は新規登録します。また、WordPress側に存在しなくなった記事はデータベースから削除します。

4-1. My PortfolioのDBに存在する記事なら更新する

DBのURLとWordPressから取り込んだURLを比較して、一致した場合、タイトルなどを更新します。

updatedは、for文の前で初期化しています。

4-2. My PortfolioのDBに存在しない記事なら新規登録する

DBに存在しない場合は、Blogモデルのインスタンスのblogを作成して、DBに新規登録します。

importedは、updateと同様に、for文の前で初期化しています。

4-3. WordPress側に存在しなくなった記事はMy PortfolioのDBから削除する

wp_urlsは、WordPress側の記事URLを格納するためのリストです。

post[“link”]で、WordPress側の記事URLが取得できます。

wp_urlsにblog_urlを追加します。

wp_urlsがあれば、wp_urlsにないDB側のurlを抽出して、delete関数で削除します。

delete関数は、削除した件数を返します。

5. 同期結果を返す

新規登録・更新・削除・スキップした記事の件数を集計し、URLパラメータとして処理結果を返します。

5-1. 新規・更新・削除・スキップ件数をURLパラメータで返す

最後に、同期結果をURLパラメータとして /blogs-page に渡しています。

imported には新規登録件数、
updated には更新件数、
deleted には削除件数、
skipped にはスキップ件数が入ります。

5-2. 一覧ページ取得処理で、新規・更新・削除・スキップ件数のURLパラメータを受け取って、テンプレートファイルに返す

一覧ページ取得処理で、この4つの集計値をテンプレートファイルに渡します。

5-3. テンプレートファイルで、受け取った新規・更新・削除・スキップ件数のURLパラメータを表示させる

テンプレートファイルで、4つの集計値を表示させます。

これにより、同期後の一覧画面で「何件追加・更新・削除・スキップされたか」を確認できます。

まとめ

今回は、WordPress REST APIで取得した記事データを、自作ポートフォリオサイトのDBに同期する仕組みを実装しました。

Googleスプレッドシートで対象記事を管理し、WordPress REST APIから記事情報を取得し、DBに存在する記事は更新、存在しない記事は新規登録、WordPress側に存在しない記事は削除するようにしました。

単に記事を取得するだけではなく、外部サービスのデータを自作アプリケーションに取り込み、同期状態を管理する処理を作れたのが大きな学びでした。