> 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/skill/build-integration.md). # インテグレーションを構築する GitBookインテグレーションを構築、開発、公開する — GitBook内で動作し、カスタムブロックの追加、イベントへの反応、OAuth経由の外部サービス接続、エディタの拡張を行うアプリ。このスキルは、〜する場合に使用する GitBook の開発者プラットフォーム上で統合を構築するためのスキルです。GitBook 自体の内部で動作するアプリです。統合では、エディタ内にカスタムブロックを描画したり、構成用 UI を表示したり、イベント（コンテンツ更新、Git 同期完了、スペース閲覧）を監視したり、OAuth で外部サービスに対して認証したり、HTTP 経由であらゆるものと通信したりできます。 このスキルは、統合のライフサイクル — 雛形作成、実装、開発、公開 — をカバーします。ドキュメントを作成または再構成するために *site* 統合がインストールされる先としては、に委ねることがあります。 `configure-site`ページコンテンツの作成には、に委ねます。 `write-docs`. ## 統合とは何か（メンタルモデル） 統合は、GitBook のランタイムによって実行される小さな TypeScript アプリです。ページに注入されるスクリプトでも、ユーザーのサーバー上で動作するコードでもありません。以下の 3 つの結果が、他のすべてを形作ります: 1. **レンダリングは GitBook のバックエンドで行われます。** コンポーネントの `render` 関数は、やり取りのたびにサーバー側で実行され、ContentKit のマークアップ（JSX 風の UI 記述）を返します。あなたが制御できるクライアント側の React ツリーも、DOM へのアクセスもなく、UI の更新は action → 新しい state → 再レンダー のループを通って流れます。 2. **サイトに JavaScript を注入することはできません。** この `site:script:inject` と `site:script:cookies` GitBook 所有の統合で見かける scopes は内部専用です。ユーザーの要望が「ドキュメントに script タグを追加する」ことに相当するなら、早い段階で止めてそう伝えてください。サポートされている手段は、カスタムブロック、webframe、イベントです。 3. **ローカル開発はプロキシであり、アクセスするサーバーではありません。** `gitbook dev` は *インストール済みの* 統合のトラフィックをあなたのマシンに転送します。開発サーバーのポートをブラウザで直接開くことはありません。app.gitbook.com 内で統合を操作します。 ## プロジェクトは `gitbook new` この形を雛形として作成します: ``` my-integration/ ├── gitbook-manifest.yaml # identity, scopes, blocks, configuration schema ├── .gitbook-dev.yaml # local dev config (`gitbook dev` により生成) ├── package.json └── src/ └── index.tsx # エントリーファイル — default-exports createIntegration() ``` エントリーファイル（ `script:` マニフェスト内のが指す先）で default export される `createIntegration({ fetch, components, events })`: ```tsx import { createIntegration, createComponent } from '@gitbook/runtime'; const helloBlock = createComponent({ componentId: 'hello-world', // マニフェスト内のブロック id と一致している必要があります initialState: { message: 'Say hello!' }, action: async (element, action, context) => { switch (action.action) { case 'say': return { state: { message: 'Hello world' } }; default: return {}; } }, render: async (element, context) => (