> For the complete documentation index, see [llms.txt](https://gitbook.com/docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://gitbook.com/docs/documentation/ja-gitbook-documentation/gong-kai/embedding/implementation/script.md). # script タグ Docs Embed をウェブサイトやアプリに追加する最も簡単な方法は、HTML に含めるスタンドアロンのスクリプトを使うことです。各 GitBook の docs サイトには、ウィジェットを自動的に読み込み、docs に接続する、そのまま使える埋め込みスクリプトが用意されています。このページでは、その方法を説明します。 SDK、ビルド手順、フレームワーク統合は不要です。スクリプトを含めるだけで、ウィジェットがページに表示されます。 ## 始める {% stepper %} {% step %} #### 埋め込みスクリプトの URL をコピー GitBook アプリで docs サイトに移動し、 **設定** タブを開き、次に **AIとMCP** 埋め込みスクリプトの URL をコピーします。手動でも作成できます: ``` https://YOUR_DOCS_DOMAIN/~gitbook/embed/script.js ``` 次のものを置き換えてください `YOUR_DOCS_DOMAIN` 実際の docs サイトのドメインに置き換えてください。 {% endstep %} {% step %} #### スクリプトを HTML に追加ページの HTML に次のタグを追加します。中に配置してください `` または直前に ``. ```html ``` {% endstep %} {% step %} #### docs に認証が必要な場合 docs が [認証の背後にある場合](/docs/documentation/ja-gitbook-documentation/gong-kai/site-audience/authenticated-access.md)、スクリプトには署名付き JWT トークンを含める必要があります。クエリパラメータとして追加します: ```html ``` {% endstep %} {% step %} #### 確認ページを再読み込みしてください。ウィジェットは右下隅に表示されるはずです。 {% endstep %} {% endstepper %} ### 必要に応じて埋め込みを設定表示する前にウィジェットをカスタマイズできます。次を呼び出します `configure` スクリプトの読み込み後、次を呼び出す前に `window.GitBook('show')`. ```html ``` この方法を使うと、次をカスタマイズできます: * ボタンのラベルとアイコン * ウィジェット内で表示されるタブ * カスタムアクションボタン * 挨拶のタイトルとサブタイトル * UI に表示されるアシスタント名 * アシスタント内の閉じるボタン * ユーザーに表示されるおすすめのプロンプト。検索はデフォルトで有効です。 `tabs`、保持したいタブをすべて列挙してください。 ### 配色を設定デフォルトでは、埋め込みは iframe の CSS に従います `color-scheme`。これにより、アプリのテーマやブラウザーの設定を自動的に継承できます。特定のモードを強制したい場合は、埋め込みを初期化して次を渡します `colorScheme` に `frameOptions`: ```html ``` フレームレベルのオプションが必要な場合は、このパターンを使用します。たとえば `colorScheme` または `visitor`. ### ウィジェットの表示を制御 API を通じて、実行時に表示状態やステートを制御できます。 ```html ``` ウィジェットを独自の UI トリガーに接続したいときに便利です。 ### プログラムで移動し、操作するコードからウィジェットを操作して、ページ移動、タブ切り替え、メッセージ送信ができます。 ```html ``` この機能の典型的な用途は次のとおりです: * アプリから docs ページへのディープリンクを追加する * 質問を事前入力する * フロー間で会話をリセットする ### 埋め込みスクリプトを動的に読み込むウィジェットを条件付きで読み込みたい場合や、実行時に認証トークンを付与する必要がある場合は、スクリプトをプログラムで挿入します。 ```html ``` ウィジェットをユーザー操作や機能フラグの後にのみ読み込みたい場合は、このパターンを使用します ## API リファレンス ### 初期化 * `GitBook('init', options: { siteURL: string }, frameOptions?: { visitor?: {...}, colorScheme?: 'light' | 'dark' })` - サイト URL と任意のフレームオプションでウィジェットを初期化する ### ウィジェット制御 * `GitBook('show')` - ウィジェットボタンを表示する * `GitBook('hide')` - ウィジェットボタンを非表示にする * `GitBook('open')` - ウィジェットウィンドウを開く * `GitBook('close')` - ウィジェットウィンドウを閉じる * `GitBook('toggle')` - ウィジェットウィンドウの開閉を切り替える ### ナビゲーション * `GitBook('navigateToPage', path: string)` - docs タブの特定のページに移動する * `GitBook('navigateToAssistant')` - アシスタントタブに移動する ### チャット * `GitBook('postUserMessage', message: string)` - チャットにメッセージを送信する * `GitBook('clearChat')` - チャット履歴をクリアする ### 設定 * `GitBook('configure', settings: {...})` - ウィジェット設定を構成する（下の Configuration セクションを参照） * `GitBook('unload')` - ウィジェットをページから完全に削除する ## 設定オプション ### `GitBook('configure')` ほとんどの設定オプションは次から利用できます `GitBook('configure', {...})`: #### `tabs` で利用できます。表示するタブを上書きします。検索はデフォルトで有効です。 `tabs`を設定すると、埋め込みには指定したタブのみが表示されます。 * **種類**: `('assistant' | 'search' | 'docs')[]` * **オプション**: * `['assistant', 'search', 'docs']` - すべてのタブを表示する * `['search', 'docs']` - 検索と docs のみを表示する * `['docs']` - docs タブのみを表示する #### `actions` タブと並んでサイドバーに表示されるカスタムアクションボタン。各アクションボタンは、クリック時にコールバックを実行します。 **注意**: これは以前は `buttons`と呼ばれていました。 `actions` を使用してください。 * **種類**: `Array<{ icon: string, label: string, onClick: () => void }>` * **プロパティ**: * `アイコン`: `string` - アイコン名。任意の [FontAwesome アイコン](https://fontawesome.com/search) がサポートされています * `label`: `string` - ボタンのラベルテキスト * `onClick`: `() => void | Promise` - クリック時のコールバック関数 #### `greeting` Assistant タブに表示されるウェルカムメッセージ。 * **種類**: `{ title: string, subtitle: string }` #### `assistantName` UI に表示される Assistant 名を上書きします。 * **種類**: `string` * **最大長**: `32` 文字 * **例**: ```javascript window.GitBook('configure', { assistantName: 'サポートコパイロット' }); ``` #### `closeButton` Assistant 内に閉じるボタンを表示します。 * **種類**: `boolean` * **例**: ```javascript window.GitBook('configure', { closeButton: true }); ``` #### `suggestions` Assistant のウェルカム画面に表示されるおすすめの質問。 * **種類**: `string[]` #### `trademark` Docs Embed のフッターや Assistant のブランド表示を含め、埋め込み UI 内で GitBook の商標を表示または非表示にします。 * **種類**: `boolean` * **既定**: `true` * **例**: ```javascript window.GitBook('configure', { trademark: false }); ``` #### `tools` Assistant を拡張するためのカスタム AI ツール。詳細は [カスタムツールの作成](/docs/documentation/ja-gitbook-documentation/gong-kai/embedding/configuration/creating-custom-tools.md) をご覧ください。 * **種類**: `Array<{ name: string, description: string, inputSchema: object, execute: Function, confirmation?: {...} }>` #### `ボタン` 埋め込みを起動するウィジェットボタンを設定します（スタンドアロンスクリプトのみ）。これにより、ページ右下に表示されるボタンのラベルとアイコンをカスタマイズできます。 * **種類**: `{ label: string, icon: 'assistant' | 'sparkle' | 'help' | 'book' }` * **プロパティ**: * `label`: `string` - ボタンに表示されるテキスト * `アイコン`: `'assistant' | 'sparkle' | 'help' | 'book'` - ボタンに表示されるアイコン * `アシスタント` - アシスタントのアイコン * `きらめき` - きらめきアイコン * `ヘルプ` - ヘルプ/質問アイコン * `本` - 本のアイコン **例:** ```javascript window.GitBook('configure', { button: { label: '質問する', icon: 'assistant' } }); ``` {% hint style="info" %} **注：** このオプションは、スタンドアロンの script タグ実装でのみ利用できます。React または Node.js の実装では、埋め込みを起動するための独自のボタンを作成する必要があります。 {% endhint %} ### `frameOptions` 一部のオプションは設定ではなくフレーム側で指定します。それらは次で渡してください `frameOptions` を呼び出すときに `GitBook('init', options, frameOptions)`. #### `colorScheme` に渡されます。埋め込みの配色を上書きします。省略した場合、埋め込みは iframe の CSS に従い、 `color-scheme`親ページまたはブラウザの設定を継承できます。 * **種類**: `'light' | 'dark'` * **例**: ```javascript window.GitBook( 'init', { siteURL: 'https://docs.company.com' }, { colorScheme: 'dark' } ); ``` #### `visitor` (認証済みアクセス) 初期化時に渡します `GitBook('init', options, frameOptions)`。用途は [Adaptive Content](/docs/documentation/ja-gitbook-documentation/gong-kai/adaptive-content.md) 、 [認証済みアクセス](/docs/documentation/ja-gitbook-documentation/gong-kai/site-audience/authenticated-access.md). * **種類**: `{ token?: string, unsignedClaims?: Record }` * **プロパティ**: * `トークン`: `string` （任意）- 署名付き JWT トークン * `署名なしクレーム`: `Record` （任意）- 動的な式のための署名なしクレーム ## よくある落とし穴 * **スクリプト URL が正しくありません** – 実際の docs URL を使用していることを確認してください。例の URL ではありません `docs.company.com`. * **スクリプトが読み込まれる前に GitBook を呼び出しています** – API 呼び出しを次でラップしてください `script.onload` または script タグの後に配置してください。 * **認証済み docs にアクセスできません** – docs にサインインが必要な場合は、次を指定する必要があります `visitor.token` 初期化時に。参照: [認証済み docs での使用](/docs/documentation/ja-gitbook-documentation/gong-kai/embedding/using-with-authenticated-docs.md). * **CORS または CSP エラー** – サイトの Content Security Policy が、GitBook ドメインからのスクリプトと iframe の読み込みを許可していることを確認してください。 * **ウィジェットが表示されない** – ページ上の他の要素との z-index の競合を確認してください。ウィジェットはデフォルトで高い z-index を使用します。 * **初期化し忘れている** – 次を呼び出してください `GitBook('init', { siteURL: '...' })` 他のメソッドを使う前に。 --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter: ``` GET https://gitbook.com/docs/documentation/ja-gitbook-documentation/gong-kai/embedding/implementation/script.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.