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 の環境を私はこうしてます、的なメモ程度のものですが紹介しておきます。
Sitecore Search の Preview Search のスタイルシートを変更する
前回はページを少し見やすくするために、Tailwind.css を適用しましたが、今回は Preview Search の Widget でも利用する方法を紹介します。
Sitecore Search のサンプルで Tailwind CSS を適用する
Sitecore Search のサンプルに関しては、まだサンプルのコード、および見た目は何も制御していません。今回は、このプロジェクトに Tailwind.css および NextUI を利用できるように変更していきます。
Next.js のプロジェクトに Search の Widget を追加する（後編）
前回は Sitecore Search のウィジットを追加することができるように、言語切替えのボックスのみ準備をしました。今回は、ウィジットを追加して検索結果を表示したいと思います。
Next.js のプロジェクトに Search の Widget を追加する（前編）
これまでブログでは Sitecore Search SDK を利用して検索結果を表示していました。今回から数回に分けて、Next.js のプレーンな環境に対して Widget を追加していく形で、実際のどういう形で動いているのかを紹介していきます。