HTMLを Portable Text に変換する

ここでは Wordpress のコンテンツエリアで管理をしている RichText のデータを Portable Text 形式に変換して、Sanity のコンテンツとして利用するための手順をまとめています。

公式のドキュメントは以下のサイトで参照できます。

HTML を Portable Text に変換する

Wordpress で管理している HTML ではブロックという考え方があり、そのデータの処理をする必要があります。手順としては、以下の手続きを実施する形です。

HTMLの文字列を取得する
ポータブルテキストに変換する
figure タグが見つかった場合、そのURLをexternalImageブロックに格納する
その後、スロットリングされた非同期関数の配列内で、その画像のファイル名に基づいてWP REST APIを検索する
見つかった場合、メモリ内キャッシュ内の既存の画像を使用するか、画像をアップロードする
空のブロックを削除します
Portable Text を返す

API を利用できる場合は公式のスクリプトを参照してください。ここでは、export をした XML ファイルのアセット情報を参照する形の実装を紹介していきます。

URL から ID を取得する

Wordpress のコンテンツから URL を取得した際に、そのアセットを判別するために URL から ID を取得して処理を進める必要があります。そこで、 migrations/import-wp/lib/wpImageFetchXML.ts のファイルに以下のコードを追加してください。

migrations/import-wp/lib/wpImageFetchXML.ts

上記のコードで、画像の URL から Post ID を取得することができます。

スキーマの更新

今回利用するスクリプトを実行するにあたって、若干のスキーマが不足しているためエラーが発生します。sanityImageHotspot と sanityImageCrop です。 schemaTypes/index.ts のファイルにスキーマの定義を追加します。追加後のファイルは以下の通りです。

schemaTypes/index.ts

HTML の取得

HTML のデータを取得するためのスクリプトを ./migrations/import-wp/lib/htmlToBlockContent.ts のファイルとして以下のコードを追加します。このコードは XML からファイルを読み込んでアップロードする形に書き換えられているため、公式のコードと異なります。動作確認をした時の console.log のコードもコメントアウトしてあります。

./migrations/import-wp/lib/htmlToBlockContent.ts

上記のコードでは、パッケージが不足しているため、以下のコマンドを実行してパッケージを追加します。

Post の Content に反映させる

取得したデータを wpDoc.content として処理をするために、./migrations/import-wp/lib/transformToPost.ts を以下のように更新します。

./migrations/import-wp/lib/transformToPost.ts

データを反映させる

これで HTML のデータを Content に入れる準備ができました。以下のコマンドを実行してください。

結果を確認すると、Wordpress から画像を取得して、コンテンツの中に画像が含まれるように更新されました。

WordPressブロックをポータブルテキストに変換する

この記事に関しては、手持ちで持っているブログでは Wordpress のブロックを利用していないため、検証は省略します。最初に記載していますが、以下のページが公式の手続きになります。

Converting WordPress blocks to Portable Text

カラムブロックについて

Wordpress のブロックにはカラムブロックというのがあります。ページの中で複数の行を用意して、それぞれにコンテンツを配置するという形です。これを利用することで、左側に画像、右側にリッチテキストといった使い方が可能となります。これはリッチテキストで実現しているものではないため、カラムブロックのデータを何らかの処理をする必要があります。

上記の記事では、カラムブロックのデータを受け入れることができるカスタムのタイプを追加して、Portable Text でデータを利用することが可能にするための手順を紹介しています。

またこれらのデータを取得するためのシリアライズの手順、マイグレーションスクリプトのアップデート手順が記載されています。仕上がりは以下のような形となります。

カスタムのコンテンツタイプに関しては、後日いくつかのサンプルを共有しますので、今回はマイグレーションが目的で、手順に関して理解してもらうためにこの部分は紹介しました。

まとめ

ブログの投稿に関して、一通り移行することができました。HTML のデータと画像を移行しただけのため、例えばサイト内リンクとかは URL が変わらなければもちろんそのまま機能しますが、自動的にリンクを張るなどの拡張をしたいところです。その部分はまた後日紹介する予定です。

ここまでのコードは以下のリポジトリのブランチで公開しています。

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

それでは最後に、Posts ではなく Page のデータの移行を実行しましょう。