なお、公式の手続きは以下のとおりです。

• Uploading assets performantly

基本的にはこのページの手順で進めて行くので問題ありませんが、今回の記事では少しだけ前提条件を変えてその手順を紹介していきます。

メディアデータの取得

Wordpress から、メディアに関するデータを取得することが可能な REST API は用意されています。例えば、https://public-api.wordpress.com/wp/v2/sites/{site}.wordpress.com/media
にアクセスをするとメディアの一覧を取得することが可能ですが、今回の対象となるデータを Postman で確認をすると以下のようにエラーが表示されています。

一方、Wordpress で管理しているメディアに関するデータに関して、XML 形式でデータを出力することが可能です。Wordpress の管理画面から「ツール」ー「エクスポート」の画面に切り替えて、メディアを選択すると XML ファイル形式でメディアに関するデータを取得することが可能です。

出力される XML のデータの形式のうち、以下の項目を利用することでオリジナルの画像を取得することができます。

今回はこれを利用できるようにカスタマイズをしていきます。なお、普通に API 経由でデータが取れる場合は公式の手順のみで対応できます。

メディア関連のスクリプトの追加

まず最初に、記事などの中にメディアに関するデータがあった場合に Wordpress からデータを取得するスクリプトとして、./migrations/import-wp/lib/wpImageFetch.ts を追加します。BASE_URL に関しては記事のデータを取得する時と同じ値を利用しています。

取得したデータを Sanity にアップロードするためのコードとして、./migrations/import-wp/lib/sanityUploadFromUrl.ts のファイルを追加します。

画像の参照を可能にするためのリファレンスとして、./migrations/import-wp-lib/sanityIdToImageReference.ts のファイルを追加します。

画像のアップロードをするためのスクリプトを作成します。これまで作成した ID を利用して Sanity にアップロードをします。この際、以前にアップロードした画像があるかどうかを確認します。 ./migrations/import-wp/lib/sanityFetchImages.ts のファイルを追加します。

最後に、./migrations/import-wp/index.ts のファイルに上記のプロセスを追加します。ポイントは以下のとおりです。

• const limit =pLimit(5) として並行処理の数を制御します
• 画像が既にアップロード済みか確認をします
• 並行処理を制御するために、for 分ではなく limit(async を利用する形に変更

変更後のコードは以下のようになります。

API を利用できる場合は、以下のコマンドを実行することで画像が Sanity へアップロードされて、管理画面で参照できるようになります。

ここまでが Wordpress の API を利用して画像を取得、アップロードをする手順となります。

XML を利用してインポート

今回実行している環境では Wordpress の API を利用して画像を取得できないため、以下の追加の手続きが必要となります。

XML ファイルの準備

事前に Wordpress からダウンロードしているファイルを migrations/import-wp/lib/WordPress.assets.xml に追加します。この XML ファイルのデータを元に、オリジナルの画像を取得してアップロードする形とします。

アップロードの手順を追加

実際のコードでは XML のデータを Node.js の上で利用するために、パッケージを追加します。

続いてファイルからデータを取得するスクリプトとして、migrations/import-wp/lib/wpImageFetchXML.ts を追加します。

続いて画像のアップロードをする際の migrations/import-wp/lib/transformToPost.ts の処理を変更します。変更点は２箇所です。

参考: https://github.com/haramizu/sanity-wordpress/commit/e8b0bc1ec273a53c6fb012de4529ed2d84c806b6

アップロードの実行

以下のコマンドを実行して、投稿で利用している画像のアセットをアップロードします。

処理が正しく終了すると、以下のように Studio の記事に対してサムネイルの画像、および記事で指定している画像がアップロードされて参照されるようになりました。

まとめ

今回は公式サイトの手順を参考にしつつ、API からではなくアセットの情報が含まれている XML の情報からアセットに関する URL を取得してアップロードする手順をまとめました。ここまでのコードは、以下で公開をしています。

• https://github.com/haramizu/sanity-wordpress/tree/step-4

次のステップでは、リッチテキストエリアの取り扱いを進めていきます。