Tailwind Logo

Playwright を利用したサムネイル取得 まとめ

Next.js関連技術

公開日: 2023-10-27

これまで複数回に渡って Playright を利用してページのサムネイルを取得できるようにしました。今回は最後に、全体のまとめとして記載しておきます。

コンテンツ更新

ブログで紹介をしていた Playwright のトピックに関しては、最新版では Vercel に展開できるようにしました。以下のページを参照してください。


まず最初に、Playwright を利用したサンプルを紹介していきました。

作成をしたアプリに関して、コンテナ化の手続きをしてプロジェクトとして管理できるように整理をしていきます。

これを Azure に展開して、Web App として立ち上げる手順を進めていきます。

この段階で Playwright を利用してスクリーンショットを撮る、というのを API を通じて実行できるようになりました。

上記のアプリと連携をして、Next.js の API を利用することで画像のスクリーンショットを撮ることが可能となりました。

なお、上記のサンプルに関してはセキュリティに関しての部分は考慮していません。CORS を追加して、API の利用に関しての制限をかける、Web App が利用できる権限を制限するという手続きはもちろん追加で必要です。ここは要件によって変わってくるので、あくまで動かすにあたっての参考、というぐらいでご利用ください。

実はいろいろと記述しましたが、Playwright で動かしたい結果としては、検索結果にページのサムネイルを表示する方法を準備するためでした。ということで、次回から、改めて Sitecore Search の Tips に戻っていきます。

関連タグ