---
title: "GraphQL IDEをセットアップしてください"
slug: "set-up-the-graphql-ides"
abstract: "プレビュー GraphQL APIとデリバリー GraphQL API用にSitecoreAI GraphQL IDEを設定し、ドラフト(未公開)および公開コンテンツのクエリGraphQLテストします。"
---
# GraphQL IDEをセットアップしてください

GraphQL IDE(GraphQL Playground)はグラフィカルなブラウザ内型IDEで、GraphQL APIを探索したり、クエリを作成したり、レスポンス構造を検査・理解したりできます。IDEは特に、アプリケーションで使用する前に開発中のクエリをテストするのに有効です。

このGraphQL IDEは [プレビュー GraphQL APIとデリバリー GraphQL API](https://doc.sitecore.com/sai/ja/developers/sitecoreai/experience-edge/experience-edge-apis.html "Experience Edge APIs")という、読み込み専用のAPIで利用可能で、Sitecoreコンテンツを取得できます。

> !注また、[GraphQL IDEはオーサリングおよび管理GraphQL API](https://doc.sitecore.com/sai/ja/developers/sitecoreai/content-modeling-and-presentation/sitecore-authoring-and-management-graphql-api/walkthrough--enabling-and-authorizing-requests-to-the-authoring-and-management-api.html)でも利用可能で、コンテンツの取得と修正の両方Sitecore可能です。

![The GraphQL IDE showing an example query for a page layout.](https://doc.sitecore.com/api/markdown-image/sai/ja/developers/sitecoreai/images/uuid-21acd496-6ef3-79d2-f8b3-1c65a838d799.jpg)

GraphQL IDEのセットアップ:

1.  [Sitecore Cloud Portalのホームページ](https://portal.sitecorecloud.io/)の**「QUICK LINKS**」セクションで、「**SitecoreAI Deploy**」をクリックしてください。
    
2.  Deployアプリの **プロジェクトページで** 、該当するプロジェクトをクリックしてください。
    
3.  GraphQL IDEを使いたい環境をクリックしてください。
    
4.  アクセスしたいAPIに応じて、以下のいずれかを行ってください。
    
    -   *Preview GraphQL API* - **詳細** タブの **プレビュー GraphQL IDE**セクションで「 **トークンAPIプレビュー**を生成する」をクリックし、トークンをコピーします。トークンは後のステップでGraphQL IDEで使います。
        
        > !警告プレビュー APIトークンは /sitecore/system/Settings/Services/API Keys/に安全に保存されています。この項目を削除または修正すると**、「プレビュー生成 API トークン**」ボタンが壊れる可能性があります。
        
    -   *Delivery GraphQL API* - **詳細** タブの **ライブGraphQL IDE(Experience Edge)** セクションで **「トークンAPI配信生成**」をクリックし、トークンをコピーします。トークンは後のステップでGraphQL IDEで使います。
        
5.  アクセスしたいAPIに応じて、以下のいずれかを行ってください。
    
    -   *Preview GraphQL API* - **プレビュー GraphQL IDE**セクションで「 **Launch IDE**」をクリックします。GraphQL IDEは新しいタブで開きます。
        
        > !注また、ウェブブラウザで以下のURLを開くことでIDEにもアクセスできます:
        > 
        > https://<YOUR\_ENVIRONMENT\_HOST\_NAME>/sitecore/api/graph/edge/ide/
        > 
        > プレースホルダーを環境ホスト名に置き換えてください。環境の「詳細」タブで値を確認できます。
        > 
        > [Sitecore開発にDocker](https://doc.sitecore.com/sai/ja/developers/sitecoreai/using-docker-for-full-stack-development.html)を使っているなら、localhostを使ってプレビュー APIのGraphQL IDEにアクセスすることもできます。
        
    -   *Delivery GraphQL API* - **ライブGraphQL IDE(Experience Edge)** セクションで **「起動IDE**」をクリックします。GraphQL IDEは新しいタブで開きます。
        
        > !注また、ウェブブラウザで以下のURLを開くことでIDEにもアクセスできます:
        > 
        > https://edge.sitecorecloud.io/api/graphql/ide
        
6.  GraphQL IDEの**HTTP HEADERS**タブで、以下のコードを入力し、APIトークンのプレースホルダーを前のステップでコピーしたトークンに置き換えます。
    
    { "sc\_apikey": "<YOUR\_PREVIEW\_API\_TOKEN>" }
    
    これでIDEでGraphQLクエリを始められます。
    

## クエリを出す

GraphQL IDEを設定したら、クエリを始めることができます。

以下は、すべてのサイト名、言語、ルートパスを含むすべてのサイト情報を取得する例のクエリです:

query {
 site {
 allSiteInfo {
 results {
 name
 hostname
 language
 rootPath
 }
 }
 }
}

## クエリ変数を使う

クエリ変数の使用は、再利用のためにキャッシュされ、注入の脆弱性を防ぐための [ベストプラクティス](https://doc.sitecore.com/sai/ja/developers/sitecoreai/experience-edge/experience-edge-best-practices.html#use-variables-in-graphql-queries) です。

以下は、ページのパスでレイアウトデータ(ページ表現)を完全に取得する例のクエリです。クエリは $site、$language、$routePathに対してGraphQL変数を使用していることに注意してください。

query LayoutQuery($site: String!, $language: String!, $routePath: String!) {
 layout(site: $site, language: $language, routePath: $routePath) {
 item {
 rendered
 }
 }
}

このクエリを実行するには、まず**QUERY VARIABLES**タブで変数とその値を指定する必要があります:

{
 "site": "my-site",
 "language": "en",
 "routePath": "/"
}

これにより、よく使われる値を一か所で指定・更新でき、クエリ全体で再利用できます。

## GraphQLスキーマへのアクセス

GraphQLスキーマは、APIが公開するすべての型、フィールド、引数、関係を定義する契約です。これはSDL(スキーマ定義言語)で書かれており、どのクエリが有効で応答がどのような形になるかの唯一の真実の情報源です。IDEからGraphQLスキーマをダウンロードし、開発環境でクエリ検証、オートコンプリート、型生成などのローカルツールを設定することができます。

スキーマファイルは特に検索や型定義のコピーペスト、LLMに読み取ってもらい質問できるのに便利です。

GraphQLスキーマにアクセスするには:

1.  GraphQL IDEの右側で「 **SCHEMA」**をクリックします。GraphQLスキーマが表示されます。
2.  オプションとして、スキーマをダウンロードするには「 **ダウンロード**」をクリックし、利用可能なフォーマットのいずれかを選択してください:
    -   **JSON** - スキーマをJSONファイルとしてダウンロードするためのもの。
    -   **SDL** - スキーマをSDL(.graphql)ファイルとしてダウンロードするためのもの。

## GraphQL参照ドキュメントへのアクセス

GraphQLの参照ドキュメントは、ナビゲートしやすく人間に優しい参照資料です。特にクエリのナビゲートやタイプ、インターフェースの詳細を読むのに便利です。

GraphQLの参考ドキュメントにアクセスするには:

1.  GraphQL IDEの右側で「 **DOCS」**をクリックします。GraphQLの参照ドキュメントが掲載されています。
2.  ナビゲートを始めるには、ルートクエリをクリックしてください。タイプ、インターフェース、引数の詳細が表示されたら、詳しく知りたいものをクリックしてください。

> !注GraphQLスキーマと参照ドキュメントはどちらも同じ基盤データを使用しています。主な違いは、スキーマが機械可読で検索に理想的であるのに対し、参照ドキュメントは人間が読みやすく、GraphQL実装のナビゲーションに適している点です。