Playwright を利用したサムネイル取得 まとめ
これまで複数回に渡って Playright を利用してページのサムネイルを取得できるようにしました。今回は最後に、全体のまとめとして記載しておきます。
ブログ
このサイトでブログを提供しています。
Next.js の API と Playwright のコンテナを連動させる（後編）
このシリーズとしては最終回です。スクリーンショットを撮るところまでできたので、ストレージと連携させていきます。今回は、Azure Blob Storage と連携する形に仕上げていきます。
Next.js の API と Playwright のコンテナを連動させる（中編）
Next.js の API として Web サイトのサムネイルを表示するための仕組みを実装していきます。今回は、取得した URL を利用して画像を表示するところまで進めていきます。
Next.js の API と Playwright のコンテナを連動させる（前編）
Playwright のコンテナを動かすところまで進めていきましたが、以前の Sitecore Search のサンプルサイトと連携するように、今回は API を追加します。
Playwright のコンテナイメージを Azure Web Apps で利用する
前回はプロジェクト化ということで docker-compose.yml ファイルを作成して実行できるようにしました。今回は、前回作成したイメージを Azure で利用できるように設定していきます。
Playwright のアプリを含めたプロジェクトとして変更する
サンプルのコードを前回コンテナとして動かすところまで持っていきました。今回は、他の役割のアプリも作りたいと考えているため、階層を設定して管理するようにしていきます。
Playwright のアプリをコンテナ化する
前回まで作ってきたアプリを簡単に展開できるように、Docker を利用してコンテナのイメージにしていきます。今回は実際の動作環境、および Docker ファイルを仕上げるところまで進めていきます。
ChatGPT が生成したコードを参考にコンポーネントを作成する
生成 AI として今年はブレイクしている ChatGPT は JavaScript や TypeScript のサンプルを紹介してくれます。今回は ChatGPT が生成するコードを利用して、XM Cloud のコンポーネントを作成したいと思います。
Headless SXA - コンポーネントウィザードを利用する
Sitecore のコンポーネントを作成することで、簡単にドラッグ＆ドロップのコンポーネントを作成することができます。今回はこのコンポーネントを作るときに便利なウィザードを紹介します。以前に紹介している手順は以下の通りです。
XM Cloud の Promote の動作確認
XM Cloud ではプロジェクトで複数の環境を用意して運用、開発をすることが可能です。今回は Promote の動作に関して確認をしていきます。