--- title: "ウォークスルー:クエリを使ってアイテムをレンダリングする方法" slug: "walkthrough--using-a-query-to-render-items" abstract: "現在のコンテキストアイテムに対して実行するクエリを指定します" --- # ウォークスルー:クエリを使ってアイテムをレンダリングする方法 このウォークスルーでは、関連する製品とそのすべての子項目をレンダリングするブログ記事のレンダリングバリアントを作成する方法を説明します。クエリ項目を組み合わせたレンダリングバリアントを用いてこれを実現します。また、同じタグを共有する著者リストを表示するより複雑なシナリオも説明しています。 このウォークスルーの出発点は、「[ブログ投稿のレンダリングバリアント作成](https://doc.sitecore.com/xp/ja/developers/sxa/93/sitecore-experience-accelerator/walkthrough--creating-a-rendering-variant-for-a-blog-post.html "Walkthrough: Creating a rendering variant for a blog post") 」ウォークスルーで説明されているシナリオと同じです。このシナリオで説明したステップを実行するには、追加の製品リストとタグが必要です。 ## シナリオ このシナリオには以下が含まれます: - ブログ記事を掲載するサイト。 - 製品リスト。 ![Different product variants in the content tree.](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/sxa/93/sitecore-experience-accelerator/images/SXA-Related-products-product-list.PNG) - クエリを用いて製品リストを参照するページテンプレート: ![Page template assigned by using a query.](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/sxa/93/sitecore-experience-accelerator/images/SXA-query.png) - ブログページには、リストから選ばれた関連商品が掲載されています: ![Related products assigned.](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/sxa/93/sitecore-experience-accelerator/images/SXA-related-products-two.PNG) - 著者テンプレートは \_taggableの基本テンプレートを引き継ぎます: ![Base template taggable inherited.](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/sxa/93/sitecore-experience-accelerator/images/SXA-blog-authors-tags.png) - ブログ記事と著者には、以下のリストからタグが割り当てられています: ![Authors and their assigned tags.](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/sxa/93/sitecore-experience-accelerator/images/SXA-blog-tags-author.png) ![Blogs and their assigned tags.](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/sxa/93/sitecore-experience-accelerator/images/SXA-blog-post-1-tag-management.PNG) このウォークスルーでは、以下の方法を説明します: - [レンダリングバリアントを追加する](https://doc.sitecore.com/xp/ja/developers/sxa/93/sitecore-experience-accelerator/walkthrough--using-a-query-to-render-items.html#UUID-2d8e6060-43be-45de-06d7-d12221676a9e_section-idm45811180802976 "Add the rendering variant") - [参照項目を追加してください](https://doc.sitecore.com/xp/ja/developers/sxa/93/sitecore-experience-accelerator/walkthrough--using-a-query-to-render-items.html#UUID-2d8e6060-43be-45de-06d7-d12221676a9e_section-idm45285759982096 "Add the reference item") - [クエリ項目を追加](https://doc.sitecore.com/xp/ja/developers/sxa/93/sitecore-experience-accelerator/walkthrough--using-a-query-to-render-items.html#UUID-2d8e6060-43be-45de-06d7-d12221676a9e_N1540277358321 "Add the query item") - [トークンを使うクエリアイテムを追加してください](https://doc.sitecore.com/xp/ja/developers/sxa/93/sitecore-experience-accelerator/walkthrough--using-a-query-to-render-items.html#UUID-2d8e6060-43be-45de-06d7-d12221676a9e_section-idm45811180850640 "Add a query item that uses a token") ## レンダリングバリアントを追加する 関連する製品のリストをすべてのブログ記事で表示できるように、まずページコンテンツレンダリング用のレンダリングバリアントを作成します。 1. コンテンツエディターで*Presentation/Rendering Variants*に移動し、右クリックで**「ページコンテンツ**」をクリックし、「**挿入**」→**「バリアント定義**」をクリックします。 2. *Related Products*を入力して**OK**をクリックします。 3. 次に、タイトルフィールドを作成するには、**関連製品の**バリアントを右クリックし、「**挿入**」をクリックし、「**テキスト**」をクリックし、「*Title*」を入力、「**OK」**をクリックします。 4. **バリアント詳細**セクションの**タグ**欄で*h3*を選択し、**テキスト**欄で*Related Products*を入力します。 ![Rendering variant for the Page Content rendering.](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/sxa/93/sitecore-experience-accelerator/images/SXA-blog-related-products-title.PNG) ## 参照項目を追加してください 次に、ブログ記事の**RelatedProducts**フィールドに表示されるレンダリングバリアント参照項目を作成し、そのフィールドの内容をレンダリングします。レンダリングバリアント参照項目は参照された項目のフィールドを表示します。参照項目のフィールドを表示したい場合は、**Pass through field**フィールドでこのフィールドを定義できます。 レンダリングバリアント参照項目を作成するには: 1. **関連製品**バリアントを右クリックし、「**挿入**」をクリックし、「**参考文献**」をクリックし、「入力*RelatedProducts*」をクリックし、「**OK」**をクリックします。 **パススルーフィールド**は、入れ子された項目からフィールド名を定義します。レンダリングバリアントは現在、**関連製品**フィールドを通過します。 2. 製品名順にリストアップするには、「**関連製品**」バリアントを右クリックし、「 **フィールド**」をクリックし、「 *Title*」を入力し、「 **OK」**をクリックしてください。 3. **バリアント詳細**セクションの**タグ**欄で*h4*を選択します。 今、ブログページにページコンテンツバリアントを追加すると、次のようになります: ![Page Content variant on the page.](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/sxa/93/sitecore-experience-accelerator/images/SXA-related-products-without.PNG) 参照は**RelatedProducts**フィールドを通過し、以下の内容をレンダリングします: ![Related products field.](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/sxa/93/sitecore-experience-accelerator/images/SXA-related-products-two.PNG) ## クエリ項目を追加 製品の子項目をリストアップするために、もしあればクエリを使いましょう。 クエリ子項目をレンダリングバリアントに追加するには: 1. 右クリックで **関連製品**バリアントをクリックし、「 **クエリ**」をクリックし、「 **OK」**をクリックします。 2. **Variant Details**セクションの**クエリ**欄に、すべての子を検索しつつタイトルを省略するクエリを追加してください:query:./\*@@templatename!='Page Data' 今、ブログページに **ページコンテンツ** バリアントを追加すると、次のようになります: ![SXA-related-products-query-without-line.PNG](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/sxa/93/sitecore-experience-accelerator/images/SXA-related-products-query-without-line.PNG) クエリは製品リストを通過し、内容をレンダリングします:製品1は3つのバリエーション、製品2はバリアントなしです。 ![SXA-Related-products-product-list.PNG](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/sxa/93/sitecore-experience-accelerator/images/SXA-Related-products-product-list.PNG) 3. 異なる製品間の区切り線を追加するには、「 **関連製品**バリアント」を右クリックし、「 **HTMLタグ**」をクリックし、「 *Line*」を入力し、「 **OK」**をクリックしてください。 4. **バリアント詳細**セクションの**タグ**欄で、*hr*を選択します。 ![SXA-related-products-query.PNG](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/sxa/93/sitecore-experience-accelerator/images/SXA-related-products-query.PNG) ## トークンを使うクエリアイテムを追加してください より複雑なクエリを作ることもできます。例えば、類似タグを持つ著者に対してクエリを実行したい場合などです。 この場合、ブログページと著者にはタグが付けられます。 ![SXA-blog-post-1-tag-management.PNG](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/sxa/93/sitecore-experience-accelerator/images/SXA-blog-post-1-tag-management.PNG) ![SXA-tags-per-author.PNG](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/sxa/93/sitecore-experience-accelerator/images/SXA-tags-per-author.PNG) > !注このウォークスルーで説明されているシナリオを実行したい場合は、AuthorテンプレートがSXA \_Taggableベーステンプレートを継承していることを確認しなければなりません。 > > ![SXA-taggable.PNG](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/sxa/93/sitecore-experience-accelerator/images/SXA-taggable.PNG) > > そしてテンプレートを継承します: > > ![SXA-blog-authors-tags.png](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/sxa/93/sitecore-experience-accelerator/images/SXA-blog-authors-tags.png) この例では、ブログ投稿ページに類似タグを持つすべての著者をリストアップするクエリを作成します。 トークンを使用するクエリ項目を作成するには: 1. コンテンツエディターでPresentation/Rendering Variantsに移動し、右クリックで **「ページコンテンツ**」をクリックし、「 **挿入**」→ **「バリアント定義**」をクリックします。 2. *同じ興味を持つ著者*を入力して**「OK」**をクリックします。 3. **「似た興味を持つ著者**」を右クリックし、「**フィールド**」をクリックし、*Title*を入力して「**OK」**をクリックします。 4. **「似た興味を持つ著者**」を右クリックし、「**クエリ**」をクリックし、「*著者のためのクエリ*」を入力して**「OK」**をクリックします。 5. **クエリ**欄で「**クエリを作成**」をクリックします。 6. 「 **Build Search Query** 」ダイアログボックスで、まず「Authors' template」を検索してください:Enter *template*、*Authors*。 7. デフォルトのSXAトークンを追加することで検索範囲を絞ることができます:TaggedWithAtLeastOneTagFromCurrentPage|SxaTags ![SXA-Build-query.PNG](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/sxa/93/sitecore-experience-accelerator/images/SXA-Build-query.PNG) 8. このバリアントには、著者に表示されるフィールドを含むヘッダーラッパーも必要です。例えば、名前、姓、画像のフィールドを追加してください: ![SXA-blog-author-tags-wrapper.PNG](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/sxa/93/sitecore-experience-accelerator/images/SXA-blog-author-tags-wrapper.PNG) 9. もし今、ブログ記事1にレンダリングバリアントを追加すると、ブログ記事1と同じタグを持つすべての著者( *Management*)が一覧表示されます。 ![SXA-authors-similar-interests.PNG](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/sxa/93/sitecore-experience-accelerator/images/SXA-authors-similar-interests.PNG) ![SXA-blog-post-1-tag-management.PNG](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/sxa/93/sitecore-experience-accelerator/images/SXA-blog-post-1-tag-management.PNG) ![SXA-blog-tags-author.png](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/sxa/93/sitecore-experience-accelerator/images/SXA-blog-tags-author.png)