Node.js/NPM

NPMパッケージを使ってアプリケーションレベルでDocs Embedを統合する

より細かい制御が必要でアプリケーションレベルで作業したい場合、npmからGitBookの埋め込みパッケージをインストールできます。この方法はサーバーサイドレンダリング、ビルド時の統合、またはカスタムiframe管理に最適です。

手順

パッケージをインストール

追加 @gitbook/embed プロジェクトに:

npm install @gitbook/embed

完全なAPIリファレンスとソースコードについては、次を参照してください： @gitbook/embed GitHub上のパッケージ.

パッケージをインポート

アプリケーションコードで、 createGitBook 関数をインポートします:

import { createGitBook } from "@gitbook/embed";

または CommonJS を使用する場合:

const { createGitBook } = require("@gitbook/embed");

GitBook を初期化

ドキュメントサイトの URL で GitBook インスタンスを作成します:

const gitbook = createGitBook({
  siteURL: "https://docs.company.com",
});

iframe を作成

iframe 要素を生成し、そのソースを埋め込み URL に設定します:

const iframe = document.createElement("iframe");
iframe.src = gitbook.getFrameURL({
  visitor: {
    token: 'your-jwt-token', // 任意: Adaptive Content または認証アクセス用
    unsignedClaims: { // 任意: 動的式用のカスタムクレーム
      userId: '123',
      plan: 'premium'
    }
  }
});
iframe.id = "gitbook-embed-container";
iframe.style.border = "none";
iframe.style.width = "100%";
iframe.style.height = "600px";

フレームをアタッチ

GitBook フレームインスタンスを作成し、ページにマウントします:

const frame = gitbook.createFrame(iframe);
document.getElementById("gitbook-embed-container").appendChild(iframe);

埋め込みをプログラムで制御

フレームインスタンスを使用して埋め込みと対話します:

// ドキュメントタブの特定ページへ移動
frame.navigateToPage("/getting-started");

// アシスタントタブに切り替え
frame.navigateToAssistant();

// チャットにメッセージを送信
frame.postUserMessage("How do I get started?");

// チャット履歴をクリア
frame.clearChat();

埋め込みを設定

カスタマイズオプションで埋め込みを設定します:

frame.configure({
  tabs: ['assistant', 'docs'],
  actions: [
    {
      icon: 'circle-question',
      label: 'Contact Support',
      onClick: () => window.open('https://support.example.com', '_blank')
    }
  ],
  greeting: { title: 'Welcome!', subtitle: 'How can I help?' },
  suggestions: ['What is GitBook?', 'How do I get started?'],
  tools: [/* ... */]
});

イベントを監視

埋め込みイベントに応答するためにイベントリスナーを登録します:

frame.on('close', () => {
  console.log('Frame closed');
});

// 完了時に購読解除
const unsubscribe = frame.on('navigate', (data) => {
  console.log('Navigated to:', data.path);
});

API リファレンス

クライアントファクトリ

createGitBook(options: { siteURL: string }) → GitBookClient
client.getFrameURL(options?: { visitor?: {...} }) → string - オプションの認証アクセス付きで iframe の URL を取得
client.createFrame(iframe: HTMLIFrameElement) → GitBookFrameClient - iframe と通信するためのフレームクライアントを作成

フレームクライアントのメソッド

frame.navigateToPage(path: string) → void - ドキュメントタブの特定のページへ移動
frame.navigateToAssistant() → void - アシスタントタブに切り替え
frame.postUserMessage(message: string) → void - チャットにメッセージを投稿
frame.clearChat() → void - チャット履歴をクリア
frame.configure(settings: Partial<GitBookEmbeddableConfiguration>) → void - 埋め込みを設定
frame.on(event: string, listener: Function) → () => void - イベントリスナーを登録（購読解除関数を返します）

設定オプション

設定オプションは次から利用できます frame.configure({...}):

`tabs`

表示するタブを上書きします。デフォルトはサイトの設定です。

を入力してから: ('assistant' | 'docs')[]

`actions`

タブの横にサイドバー内でレンダリングされるカスタムアクションボタン。各アクションボタンはクリック時にコールバックをトリガーします。

注意: 以前は次の名前でした buttons。使用するには actions を推奨します。

を入力してから: Array<{ icon: string, label: string, onClick: () => void }>

`greeting`

アシスタントタブに表示される歓迎メッセージ。

を入力してから: { title: string, subtitle: string }

`suggestions`

アシスタントの歓迎画面に表示される推奨質問。

を入力してから: string[]

`tools`

アシスタントを拡張するカスタムAIツール。詳細はカスタムツールの作成を参照してください。

を入力してから: Array<{ name: string, description: string, inputSchema: object, execute: Function, confirmation?: {...} }>

`visitor` (認証付きアクセス)

次に渡します getFrameURL({ visitor: {...} })。使用されるのは Adaptive Content および認証されたアクセス.

を入力してから: { token?: string, unsignedClaims?: Record<string, unknown> }

よくある落とし穴

パッケージのインストールを忘れる – 実行する npm install @gitbook/embed インポート前に。
siteURL が欠落している – オプションの siteURL は必須で、公開されたドキュメントサイトと一致する必要があります。
iframe がレンダリングされない – 親コンテナが iframe を表示するのに十分な幅/高さを持っていることを確認してください。
初期化前にフレームメソッドが呼ばれる – 呼び出す前に createFrame() が完了するのを待ってください。
イベントの購読解除を行わない – メモリリークを防ぐために、frame.on() が返す購読解除関数を呼び出すことを忘れないでください。 frame.on() を呼び出すことを忘れないでください。
古い API メソッドを使用している – 次のようなメソッドは open(), close(), toggle()、および destroy() NPM パッケージでは利用できません。代わりにフレームクライアントのメソッドを使用してください。

最終更新 1 か月前

役に立ちましたか？

手順