Apidog Docs
🇯🇵 日本語
  • 🇺🇸 English
  • 🇯🇵 日本語
  • 🇪🇸 Español
  • 🇰🇷 한국인
  • 🇨🇳 简体中文
  • 🇵🇹 Português (Portugal)
  • 🇮🇩 Bahasa Indonesia
  • 🇧🇷 Português (Brasil)
  • 🇻🇳 Tiếng Việt
  • 🇨🇳 繁體中文
🇯🇵 日本語
  • 🇺🇸 English
  • 🇯🇵 日本語
  • 🇪🇸 Español
  • 🇰🇷 한국인
  • 🇨🇳 简体中文
  • 🇵🇹 Português (Portugal)
  • 🇮🇩 Bahasa Indonesia
  • 🇧🇷 Português (Brasil)
  • 🇻🇳 Tiếng Việt
  • 🇨🇳 繁體中文
🇯🇵 日本語
  • 🇺🇸 English
  • 🇯🇵 日本語
  • 🇪🇸 Español
  • 🇰🇷 한국인
  • 🇨🇳 简体中文
  • 🇵🇹 Português (Portugal)
  • 🇮🇩 Bahasa Indonesia
  • 🇧🇷 Português (Brasil)
  • 🇻🇳 Tiếng Việt
  • 🇨🇳 繁體中文
HomeLearning Center
Support CenterAPI ReferencesDownloadChangelog
HomeLearning Center
Support CenterAPI ReferencesDownloadChangelog
  1. APIドキュメントの公開
  • Apidog ラーニングセンター
  • はじめに
    • Apidog の概要
    • Apidog の基本概念
    • Apidog のナビゲーション
    • クイックスタート
      • 概要
      • エンドポイントの作成
      • リクエストの作成
      • アサーションの追加
      • テストシナリオの作成
      • APIドキュメントの共有
      • さらに詳しく
    • Apidogへの移行
      • 概要
      • 手動インポート
      • スケジュールインポート(データソースのバインド)
      • インポートオプション
      • データのエクスポート
      • インポート元
        • Postman からのインポート
        • OpenAPI 仕様のインポート
        • cURL のインポート
        • Markdown のインポート
        • Insomnia からインポート
        • apiDoc からインポート
        • .har ファイルをインポート
        • WSDL のインポート
  • モックAPIデータ
    • 概要
    • Smart Mock
    • カスタムモック
    • モック優先順位
    • モックスクリプト
    • Cloud Mock
    • セルフホスト Runner モック
    • モック言語(ロケール)
  • アカウントと設定
    • アカウント設定
    • OpenAPI アクセストークンの生成
    • 通知
    • 言語設定
    • ホットキー
    • ネットワークプロキシ設定
    • データのバックアップ
    • Apidog の更新
    • アカウントの削除
    • 実験的機能
  • リクエスト送信
    • 概要
    • SSE デバッグ
    • MCP Client
    • Socket.IO
    • WebSocket
    • Webhook
    • SOAP または WebService
    • GraphQL
    • gRPC
    • デバッグにリクエストプロキシエージェントを使用する
    • リクエスト作成
      • リクエスト履歴
      • リクエストの基本
      • パラメータとボディ
      • リクエストヘッダー
      • リクエスト設定
      • リクエストのデバッグ
      • リクエストをエンドポイントとして保存する
      • HTTP/2
    • 認証と認可
      • 概要
      • CA 証明書とクライアント証明書
      • 認可タイプ
      • Digest Auth
      • OAuth 1.0
      • OAuth 2.0
      • Hawk 認証
      • Kerberos
      • NTLM
      • Akamai EdgeGrid
    • レスポンスとCookie
      • APIレスポンスの表示
      • Cookie の管理
      • 概要
  • APIの開発とデバッグ
    • 概要
    • リクエストの生成
    • リクエストの送信
    • デバッグケース
    • テストケース
    • 動的値
    • レスポンスの検証
    • Design-First と Request-First
    • コード生成
    • 環境と変数
      • 概要
      • 変数の使用
      • 環境管理
    • Vaultシークレット
      • 概要
      • HashiCorp Vault
      • Azure Key Vault
      • AWS Secrets Manager
    • 動的値モジュール
      • Airline
      • Animal
      • Color
      • Commerce
      • 会社
      • Database
      • データ型
      • 日付
      • Finance
      • Food
      • Git
      • Hacker
      • Helpers
      • 画像
      • Internet
      • Location
      • Lorem
      • 音楽
      • Number
      • Person
      • Phone
      • Science
      • 文字列
      • システム
      • Vehicle
      • Word
    • プリプロセッサとポストプロセッサ
      • 概要
      • アサーション
      • 変数の抽出
      • Wait
      • セキュリティ
      • データベース操作
        • 概要
        • MySQL
        • MongoDB
        • Redis
        • Oracle Client
      • スクリプトの使用
        • 概要
        • プリプロセッサスクリプト
        • ポストプロセッサスクリプト
        • Public Scripts
        • Postman Scripts Reference
        • 他のプログラミング言語の呼び出し
        • JS ライブラリの使用
        • レスポンスの可視化
        • スクリプト例
          • アサーションスクリプト
          • 変数の使用
          • リクエストの変更
          • その他の例
    • APIデバッグ
      • AI Agent Debugger
      • A2A Debugger
  • API設計
    • 概要
    • 新しい API プロジェクトを作成する
    • エンドポイントの基本
    • API設計ガイドライン
    • モジュール
    • 複数のリクエストボディ例を設定する
    • コンポーネント
    • 共通フィールド
    • グローバルパラメータ
    • エンドポイント変更履歴
    • コメント
    • エンドポイントの一括管理
    • カスタムプロトコル API
    • Spec-first Mode(ベータ)
    • セキュリティスキーム
      • 概要
      • セキュリティスキームを作成する
      • セキュリティスキームを使用する
      • オンラインドキュメントにおけるセキュリティスキーム
    • 高度な機能
      • カスタムエンドポイントフィールド
      • 関連するテストシナリオ
      • エンドポイントステータス
      • パラメータ一覧の表示形式
      • エンドポイントの一意識別
    • スキーマ
      • 概要
      • 新しいスキーマを作成する
      • スキーマを構築する
      • JSON などからスキーマを生成
      • oneOf、allOf、anyOf
      • Discriminator の使用
  • APIテスト
    • 概要
    • テストシナリオ
      • テストシナリオを作成する
      • リクエスト間でデータを受け渡す
      • フロー制御条件
      • エンドポイントおよびエンドポイントケースからデータを同期する
      • 他のプロジェクトからエンドポイントとエンドポイントケースをインポートする
      • テストシナリオのエクスポート
    • テストレポート
      • テストレポート
    • テストシナリオの実行
      • テストシナリオを実行する
      • テストシナリオを一括実行する
      • データ駆動テスト
      • 共有テストデータ
      • スケジュールされたタスク
      • 他のプロジェクトの API の実行環境を管理する
    • テストスイート
      • 概要
      • テストスイートを作成する
      • テストスイートを編成する
      • テストスイートをローカルで実行する
      • CLI でテストスイートを実行する
      • スケジュールタスク
    • APIのテスト
      • 統合テスト
      • パフォーマンステスト
      • エンドツーエンドテスト
      • 回帰テスト
      • コントラクトテスト
    • Apidog CLI
      • 概要
      • Apidog CLI のインストールと実行
      • Apidog CLI オプション
    • CI/CD
      • 概要
      • Github Actions との連携
      • Gitlab との統合
      • Jenkins との連携
      • Git コミットによるテストのトリガー
  • APIドキュメントの公開
    • 概要
    • サポートされているAPI技術
    • クイック共有
    • API ドキュメントの閲覧
    • Markdown ドキュメント
    • ドキュメントサイトの公開
    • カスタムログインページ
    • カスタムレイアウト
    • カスタム CSS、JavaScript、HTML
    • カスタムドメイン
    • AI 機能
    • SEO 設定
    • 詳細設定
      • ドキュメント検索
      • CORS プロキシ
      • Google Analytics の連携
      • フォルダツリー設定
      • 表示設定
      • ドキュメントURLへの値の埋め込み
    • APIバージョン
      • 概要
      • API バージョンの作成
      • API バージョンの公開
      • API バージョンを指定したエンドポイントの共有
  • ブランチ
    • 概要
    • スプリントブランチの作成
    • ブランチでAPIをテストする
    • ブランチで API を設計する
    • スプリントブランチのマージ
    • スプリントブランチの管理
    • AI Branch(ベータ)
  • AI機能
    • 概要
    • AI機能の有効化
    • テストケースの生成
    • AI によるスキーマの変更
    • エンドポイントコンプライアンスチェック
    • APIドキュメント完全性チェック
    • AIを活用したフィールド命名
    • FAQ
  • Apidog MCPサーバー
    • 概要
    • Apidog プロジェクトを AI に接続する
    • 公開済みドキュメントを AI に接続する
    • OpenAPI ファイルを AI に接続する
  • ベストプラクティス
    • API署名の処理
    • OAuth 2.0 で保護された API へのアクセス
    • コラボレーションワークフロー
    • 認証状態の管理
  • オフラインスペース
    • 概要
  • 管理
    • プロジェクト管理
      • プロジェクトの管理
      • 通知設定
      • プロジェクトメンバーの管理
      • プロジェクトリソース
        • データベース接続
        • Git 接続
    • チーム管理
      • チームの管理
      • チームメンバーの管理
      • チームアクティビティ
      • チームのロールと権限
      • チームリソース
        • General Runner
        • チーム変数
        • リクエストプロキシエージェント
      • リアルタイムコラボレーション
        • チームコラボレーション
    • オンボーディングチェックリスト
      • 基本概念
      • オンボーディングガイド
    • 組織管理
      • 組織の管理
      • 組織ロールと権限
      • プラン管理
        • 組織の請求管理者
      • シングルサインオン(SSO)
        • SSO 概要
        • Microsoft Entra ID の設定
        • Okta の設定
        • 組織の SSO を設定する
        • ユーザーアカウントの管理
        • グループをチームにマッピングする
      • SCIMプロビジョニング
        • SCIM プロビジョニングの概要
        • Microsoft Entra ID
        • Okta
      • 組織リソース
        • セルフホスト Runner
  • 請求
    • 概要
    • クレジット
    • プランのアップグレード
    • 代替支払い方法
    • サブスクリプションの管理
    • 有料チームの組織への移動
  • Apidog Europe
    • Apidog Europe
  • アドオン
    • API Hub
    • Apidog Intellij IDEA プラグイン
    • ブラウザ拡張機能
      • Chrome
      • Microsoft Edge
    • リクエストプロキシ
      • Web でのリクエストプロキシ
      • 共有ドキュメントにおけるリクエストプロキシ
      • クライアントでのリクエストプロキシ
  • データとセキュリティ
    • データストレージとセキュリティ
    • ユーザーデータのプライバシーとセキュリティ
    • リクエストルーティングとデータセキュリティ
  • リファレンス
    • APIデザインファーストアプローチ
    • Apidog OpenAPI 仕様拡張
    • JSONPath
    • XPath
    • 正規表現
    • JSON Schema
    • CSVファイル形式
    • Java 環境のインストール
    • Runner デプロイ環境
    • Apidog Markdown 構文
    • Apidog Swagger拡張
      • 概要
      • x-apidog-folder
      • x-apidog-status
      • x-apidog-name
      • x-apidog-maintainer
    • Apidog JSON Schema拡張
      • 概要
      • x-apidog-mock
      • x-apidog-orders
      • x-apidog-enum
  • サポートセンター
  1. APIドキュメントの公開

カスタム CSS、JavaScript、HTML

API ドキュメントを公開する際、カスタムのグローバル HTML、CSS、JavaScript を追加して、ページスタイルをパーソナライズし、機能を拡張できます。
この機能は、次の用途に役立ちます。
サードパーティサービス(例:チャットボット、AI アシスタント)の埋め込み
デフォルトスタイル(例:フォント、色、背景)の変更
インタラクティブ要素(例:ボタン、ポップアップ、クイックフィードバック)の追加
この機能を適切に使用することで、ドキュメントにブランドアイデンティティをより反映させ、ユーザー体験を向上できます。

CSS#

カスタム CSS を使用すると、フォントの変更、要素の非表示、余白の調整、色の変更などができます。
ドキュメント構造は今後の更新で変更される可能性があるため、スタイルを有効に保つために、次の 2 つの原則に従うことをおすすめします。
1.
予約済み CSS 変数を使用する
2.
予約済み CSS クラス名を使用する

予約済み CSS 変数を使用する#

Apidog は、フォント、色、背景などの基本的なページスタイルを制御するために、--g- プレフィックス付きの CSS 変数セットを提供しています。これらの変数はライトモードとダークモードの両方に適切に対応するため、スタイルをより安定して保守しやすくできます。
一般的な変数リファレンス
例:メインテキストの色を変更する

予約済み CSS クラス名を使用する#

特定の領域を対象にスタイルを適用するには、.g- プレフィックス付きの Apidog の予約済みクラス名を使用してください。これらは比較的安定しており、DOM の変更によって壊れにくくなっています。
一般的な CSS クラスリファレンス
例:左サイドバーを非表示にする

ページ構造とクラス名を確認する#

上記の予約済み CSS 変数とクラス名に加えて、ブラウザの開発者ツールを使用して、変更したいページ要素に対応するクラス名を見つけ、その後 CSS を記述してスタイルを調整することもできます。
まずは .g- で始まるクラス名を使用することをおすすめします。これらはプラットフォームによって予約されており、構造が比較的安定しているため、機能しなくなりにくいです。その他の構造的なクラス名については、製品アップグレード後にスタイルが機能しなくなることを避けるため、慎重に使用してください。
公開済みのドキュメントサイトをブラウザで開き、開発者ツール(開発者モード/コンソール)を使用して、ページ構造とスタイルのクラス名を確認できます。
Mac: Command + Option + Iまたはfn + F12
Windows: Ctrl + Shift + Iまたはfn + F12またはF12
開いたら、「要素セレクター」(マウスアイコン)をクリックし、ページ上の任意の領域をクリックすると、その領域に対応する HTML タグとクラス名を確認できます。
検索機能(Cmd/Ctrl + F)を使用してクラス名を特定することもできます。
画像.png

JavaScript#

カスタム JavaScript は、AI アシスタントやサポートウィジェットなどのサードパーティサービスを埋め込むために使用します。注意:Apidog のカスタム JavaScript フィールドは、<script> タグや <style> タグをサポートしていません。これらは純粋な JavaScript に変換する必要があります。例:
❌ 元のコード(サポートされていません)
✅ 純粋な JavaScript に変換後
サードパーティのスクリプトやスタイルを埋め込みたいものの、純粋な JS 形式に書き換える方法がわからない場合は、以下のプロンプトをコピーして AI ツール(Claude など)に貼り付けることで、AI に自動変換を支援させることができます。
I'm using Apidog's "Custom JavaScript" feature, which only allows pure JavaScript (no <script> or <style> tags).

Please convert the following code to pure JavaScript. Here are the requirements:
1. Rewrite the <script> tag to document.createElement('script') dynamic creation method;
2. Inject the <style> content into the newly created style tag and insert the head;
3. Please use standard methods (such as createElement, appendChild) for all DOM operations, and do not use document.write;
4. If the original code uses `window.addEventListener('DOMContentLoaded', ...)` or `window.addEventListener('load', ...)` only to wait for the page before running code, remove the event listener and run the code directly. Apidog executes custom JavaScript after the documentation page has been rendered, so the browser's `load` event may already have passed by that time; code registered inside a `load` listener may not be executed;
5. The final generated JavaScript should be able to run directly in the browser without any explanation.

Original code:
---
(paste your code here)
---
セキュリティ上の理由により、カスタム JavaScript は Custom domain 経由でドキュメントにアクセスした場合のみ動作します。
Apidog が提供するデフォルトのドキュメントアドレス(https://xxx.apidog.io/ で始まるものなど)経由でアクセスした場合、カスタム JS は読み込まれず、実行されません。
通常の読み込みに影響したり、ページ構造を壊したりしないよう、コード自体が信頼できることを確認してください。
カスタム JavaScript は、ドキュメントページのレンダリング後に実行されます。その時点ではブラウザの load イベントがすでに発生している可能性があるため、window.addEventListener('load', ...) 内に配置されたコードは実行されない場合があります。ほとんどの場合、代わりにコードを直接実行してください。

例:展開/折りたたみ可能なボックス#

下のボタンをクリックすると、iframe ダイアログを展開/折りたたみできます。
「ボタンをクリックして iframe ダイアログを展開/折りたたみする」ためのスクリプト
使用方法:
1
コードを Apidog の「Custom JavaScript」領域に貼り付けます。
2
カスタムドメイン経由でドキュメントサイトにアクセスします。
3
右下にボタンが表示されます。クリックするとチャット iframe が開きます。
4
iframe.src を AI サービスに置き換えます。例:
カスタム CSS と JavaScript

例:Chatbase ウィジェットの埋め込み#

「Chatbase チャットウィジェットの埋め込み」用スクリプト
使用方法:
1
Chatbase アプリを作成し、埋め込みコードを取得して、上記のプロンプトを使用して純粋な JS に変換します。
画像.png
変換後のコードを Apidog の Custom JS セクションに貼り付けます。
2
カスタムドメイン経由でドキュメントサイトにアクセスします。
3
右下にボタンが表示されます。クリックするとダイアログウィンドウが開きます。
カスタム CSS と JavaScript

HTML#

HTML 機能は現在開発中です。リリースまでしばらくお待ちください。

FAQ#

カスタム JS が動作しませんか?
custom domain 経由でドキュメントにアクセスしていることを確認してください。カスタム JavaScript は、バインド済みのカスタムドメインを使用している場合のみ実行されます。
カスタム JavaScript で 'load' または 'DOMContentLoaded' を使用すべきですか?
Modified at 2026-06-11 07:06:02
Previous
カスタムレイアウト
Next
カスタムドメイン
Built with