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 の動作に関して確認をしていきます。
Playwright を利用してスクリーンショットを取得する（後編）
Typescript のサンプルを作るところまでで、Playwright は何も出てきませんでした。今回は早速、追加していきたいと思います。
Playwright を利用してスクリーンショットを取得する（前編）
ブログでは Playwright に関してしばらく取り上げていきます。というのも、検索結果に対してそのページのスクリーンショットを利用したい、というニーズに対応する簡単なサンプルを作っていくことにします。
Docker の環境を整える（ Windows 版 ）
昨日は簡単に macOS で環境を整えてみましたが、今回は Windows 11 で WSL と連携する Docker の環境を整えていきます。これにより、開発は Linux で進めていきながら、Windows の環境にある Visual Studio Code と連携して作業ができるようになります。
Docker の環境を整える （ macOS 版 )
また後日 Search のネタに戻りますが、その前に Search と連携するためのツールを少し用意したいと思います。そのために、今回は Docker の環境を整えていきます。まずは macOS 版、明日は Windows の環境を私はこうしてます、的なメモ程度のものですが紹介しておきます。