ブラウザでアプリが送信するリクエストをNetworkタブで確認したことはあるでしょう。次は、そのURL、ヘッダー、JSONボディを手入力せずに、同じ呼び出しを保存・モック・テストできる再利用可能なエンドポイントとして扱いたいはずです。
その「見えているトラフィック」を「再利用可能なエンドポイント」に変換するために使えるのがHARファイルです。ブラウザはすでにリクエストとレスポンスを記録しています。記録をエクスポートしてApidogへインポートすると、キャプチャした呼び出しをプロジェクト内のAPIエンドポイントとして扱えます。
この記事では、Chrome DevToolsでHARを取得し、Apidogへインポートして、テスト・モック・ドキュメントに使える状態へ整理する手順を説明します。キャプチャの選択肢全般については、Apidogを使用したパケットキャプチャツールも参照してください。
Apidogを無料でダウンロードして、同じ画面で試せます。
HARファイルとは何か
HARはHTTP Archiveの略です。.harファイルは、ブラウザとWebサイト間の通信をJSON形式で記録するファイルです。リクエストURL、HTTPメソッド、ヘッダー、リクエストボディ、レスポンス、タイミング情報などを含みます。
つまりHARは、ブラウジングセッション中に実際に発生したHTTP通信の記録です。
HARをエンドポイントとしてインポートすると、次の情報を再利用できます。
- 実際のリクエスト形式: URL、クエリパラメーター、ヘッダー、ボディを推測せずに取得できる
- 実際のレスポンス: ステータスコードとレスポンスペイロードを、モックやテストアサーションの例として利用できる
- ドキュメントの出発点: 未文書化の内部APIを、名前付きのAPIエンドポイントとして整理できる
特に、OpenAPI仕様が存在しないサービスを引き継ぐ場合、サードパーティのウィジェットがバックエンドと通信する方法を調査する場合、または障害を起こしたリクエストをそのまま再現したい場合に有効です。
ステップ1: DevToolsでHARをキャプチャする
HARのキャプチャはApidogではなくブラウザで行います。ChromeとEdgeは同じDevToolsフローを利用できます。
ここでは、注文履歴画面の通信をキャプチャする例で進めます。
- 記録したいページを開きます。セッション認証が必要なAPIの場合は、先にログインします。
- DevToolsを開きます。
- Windows / Linux:
F12またはCtrl+Shift+I - macOS:
Cmd+Opt+I
- Windows / Linux:
- Network タブを開きます。
- ページを再読み込みする、または記録したい操作を実行します。
- たとえば注文履歴を開くと、
/api/ordersや/api/orders/{id}のようなリクエストがNetwork一覧に表示されます。 - 任意のリクエストを右クリックし、Save all as HAR with content を選択します。
-
order-history.harのような名前で保存します。
メニューの場所は、Chrome DevTools Networkリファレンスでも確認できます。
with content を必ず選ぶ
Save all as HAR with content の with content は重要です。
これを選ばない場合、HARにはリクエスト情報だけが含まれ、レスポンスボディが含まれないことがあります。レスポンス例がなければ、インポート後にモックやテストデータとして利用しにくくなります。
保存後は、.har ファイルをテキストエディタで開いて確認できます。通常はJSON形式で、entries 配列の各要素に request と response オブジェクトが含まれます。
{
"log": {
"entries": [
{
"request": {},
"response": {}
}
]
}
}
なお、HARにはAPI通信だけでなく、画像、CSS、JavaScriptなどの静的リソースも含まれます。この時点でブラウザ側のフィルタリングは不要です。Apidogのインポート時に除外できます。
ステップ2: HARをApidogへインポートする
HARファイルを保存したら、Apidogで次の操作を行います。
- 対象のプロジェクトを開きます。
- Settings > Import Data > Manual を開きます。
- 形式として HAR を選択します。
-
order-history.harなど、保存した.harファイルをアップロードします。
インポートを確定する前に、主に次の3項目を設定します。
オプション1: BaseURLの処理
キャプチャしたリクエストには、次のような完全なURLが含まれています。
https://api.shop.example.com/v1/orders/123
BaseURLの扱いは、通常次の2通りです。
- ハードコード: 完全なURLをエンドポイント側に保持する
- 削除（推奨）: BaseURLを除き、パスだけを保持する
削除を選ぶと、エンドポイントは次のようになります。
/v1/orders/123
BaseURLは環境変数で管理できます。これにより、同じエンドポイントをステージング、本番、ローカル環境に切り替えて使えます。
{{baseUrl}}/v1/orders/123
環境ごとにホストを切り替える必要がある場合は、BaseURLを削除して管理する方法が実用的です。環境変数を使ったAPI管理も参照してください。
オプション2: 静的リソースを除外する
Static Resource を Exclude に設定します。
これにより、画像、CSS、JavaScriptなどの静的リソースをインポート対象から除外できます。1ページの読み込みだけでも多数のファイルが取得されますが、それらは通常、ドキュメント化・テストしたいAPIではありません。
インポート対象を次のようなAPI呼び出しに絞れます。
/api/orders
/api/orders/123
/api/users/me
オプション3: エンドポイントごとにテストケースを生成する
Endpoint Case Generation を ON にすると、インポート時に各エンドポイントのデフォルトテストケースを作成します。
テストケースには、キャプチャされた値を含む実行可能なリクエストが保存されます。インポート直後に動作確認したい場合や、後からテストシナリオを組み立てる場合に便利です。
設定後、インポートを実行します。ApidogはHARを解析し、ブラウザ通信をAPIエンドポイントへ変換します。
たとえば、次のリクエストがキャプチャされていたとします。
GET /v1/orders/123
Host: api.shop.example.com
Authorization: Bearer <token-from-capture>
Accept: application/json
インポート後は、対応するレスポンス例も保存できます。
{
"id": 123,
"status": "shipped",
"total": 48.5,
"currency": "USD",
"items": [
{
"sku": "TSHIRT-BLK-M",
"qty": 2,
"price": 19.25
}
],
"createdAt": "2026-07-14T09:31:00Z"
}
このような実レスポンスは、モック作成やテストアサーションの出発点になります。
ステップ3: インポートしたエンドポイントを整理する
HARインポートは、API定義を作るための高速な初期ステップです。キャプチャ結果はそのままではノイズを含むため、共有・運用前に整理します。
不要なエンドポイントを削除する
静的リソースを除外していても、以下のような通信が残る場合があります。
- アナリティクス
- ヘルスチェック
- 関係のないサードパーティAPI
- 一時的な内部リクエスト
使用しないエンドポイントは削除し、APIツリーを実際の対象APIに絞ります。
エンドポイント名とフォルダーを整理する
HARからインポートしたエンドポイントは、パスを元にした名前になる場合があります。
たとえば、次のように名前を付け直すと、チームで扱いやすくなります。
| パス | 推奨する名前 |
|---|---|
/v1/orders/123 |
IDで注文を取得 |
/v1/orders |
注文一覧を取得 |
/v1/orders/123/cancel |
注文をキャンセル |
さらに、Orders、Users、Auth のようなフォルダーに分けると、ドキュメントとテストの両方で見通しがよくなります。
リテラル値をパスパラメーターに置き換える
HARでは、実際にアクセスした値がパスに含まれます。
/v1/orders/123
ただし、123 が固定値ではなく注文IDなら、エンドポイントを次のように変更します。
/v1/orders/{orderId}
これにより、1回のキャプチャを任意の注文に対して再利用できるエンドポイントに変換できます。
認証情報を環境変数へ移動する
HARには、セッション中に使用したBearerトークンやCookieが含まれる可能性があります。
Authorization: Bearer eyJhbGciOi...
プロジェクトを共有・コミットする前に、認証情報を環境変数へ移動してください。
Authorization: Bearer {{accessToken}}
HARファイルやインポート済みのサンプルは、秘密情報を含む可能性があるアーティファクトとして扱うべきです。StripeのAPIキー管理ドキュメントでも、本番キーを共有アーティファクトへ含めない重要性が説明されています。
レスポンスボディを確認する
レスポンスが返るはずのエンドポイントでボディが空の場合、with content を付けずにHARをエクスポートした可能性があります。
その場合は、DevToolsで再度キャプチャし、Save all as HAR with content を使って再インポートしてください。
整理後、エンドポイントは通常のApidog APIと同じように扱えます。
- APIドキュメントを作成する
- レスポンス例からモックを作成する
- テストケースを追加する
- テストシナリオへ組み込む
- クライアントコードを生成する
次のステップとして、Apidogでテストシナリオを作成するガイドや、Apidogでクライアントコードを生成する方法を参照してください。
バリエーションと制限事項
自動レコーダーではない
Apidogがプロキシのようにバックグラウンドで通信をリアルタイム記録することを期待するかもしれませんが、現在はその機能をサポートしていません。
現時点でのフローは次のとおりです。
- ブラウザのDevToolsで通信をキャプチャする
- HARファイルをエクスポートする
- Apidogへインポートする
- 必要に応じてテストシナリオを作成する
つまり、インポートは容易ですが、キャプチャ自体はブラウザのDevToolsで行います。
Apidogブラウザ拡張機能はHARキャプチャ用ではない
Apidogブラウザ拡張機能は、ブラウザ上でAPIテストやデバッグを行うためのツールです。HARトラフィックをキャプチャする機能とは別です。
HARを取得する場合は、ブラウザ標準のDevToolsとHARエクスポートを使用してください。
また、ブラウザ拡張機能を利用したテストには、ブラウザ由来の制限があります。たとえば、Cookie、Host、Origin、Content-Lengthなどのヘッダー制御、GET・HEADリクエストのボディ、ローカル環境への到達性に制約が発生する場合があります。完全なヘッダー制御が必要な場合は、Apidogデスクトップクライアントを使用します。
OpenAPIやPostman形式がある場合は優先する
HARは、仕様が存在しない場合に実際の通信からAPI定義を作る手段です。
すでにOpenAPI、Swagger、Postmanコレクションがある場合は、それらをインポートしたほうが意図的に構造化された結果を得やすくなります。
実際の仕様がなく、ブラウザ通信が唯一の信頼できる記録である場合にHARを使用してください。
Apidog CLIでHARインポートを自動化する
HARのインポートはGUIだけで行う必要はありません。Apidog CLIの import コマンドを使うと、HARファイルを直接プロジェクトへ取り込めます。
サーバー上でキャプチャしたHARを処理する場合や、CI/CDパイプラインでインポートをスクリプト化する場合に適しています。
npm install -g apidog-cli
apidog login --with-token <YOUR_ACCESS_TOKEN>
# キャプチャしたHARをプロジェクトのエンドポイントとしてインポート
apidog import --project <PROJECT_ID> --format har --file ./capture.har
--format は har のほか、openapi、postman、wsdl、insomnia なども受け付けます。
エンドポイントをテストシナリオとして保存した後は、CLIからヘッドレス実行できます。
apidog run --access-token $APIDOG_ACCESS_TOKEN \
-t <SCENARIO_ID> \
-e <ENV_ID> \
-r cli
各オプションの意味は次のとおりです。
-
-t: 保存済みテストシナリオID -
-e: 環境ID -
-r: レポーターの種類。cliはコンソール出力用
シナリオの作成はApidogでテストシナリオを作成するガイド、CI/CDへの組み込みはApidog CLI CI/CDガイドを参照してください。
よくある質問
どのブラウザでHARをエクスポートできますか？
DevToolsを備えたChromiumベースのブラウザでは、同様のフローでHARをエクスポートできます。ChromeとEdgeでは、Network タブから Save all as HAR with content を選びます。
他のブラウザでもHAR出力に対応している場合がありますが、メニュー名は異なる可能性があります。
インポート後のエンドポイント数が多すぎます
Static Resource を除外していない可能性があります。
ページの読み込みには画像、CSS、JavaScriptなどが含まれます。再インポート時に Static Resource を Exclude に設定すると、API呼び出しへ絞り込めます。
BaseURLはハードコードと削除のどちらを選ぶべきですか？
ほとんどの場合は 削除（推奨） を選びます。
BaseURLを環境変数として管理すれば、エンドポイントを編集せずに本番、ステージング、ローカル環境を切り替えられます。Apidogでのテストシナリオでも、実行時に環境設定を利用できます。
HARには認証トークンが含まれますか？
はい。HARにはセッション中の実際のヘッダーが記録されるため、BearerトークンやCookieが含まれることがあります。
HARを公開のIssue、リポジトリ、チャットに貼り付けないでください。インポート後は認証情報を環境変数に移動し、共有前にサンプルから削除します。
CLIからHARをインポートできますか？
はい。次のコマンドでHARをプロジェクトへインポートできます。
apidog import --project <PROJECT_ID> --format har --file ./capture.har
一度きりのキャプチャでインポート設定を細かく調整したい場合はGUIが適しています。スクリプト化されたインポート、CIジョブ、エージェント主導のワークフローではCLIが適しています。
インポート後は、作成したテストシナリオを apidog run で実行できます。
まとめ
HARファイルを使うと、ブラウザで確認できる実際のトラフィックを、再利用可能なAPIエンドポイントへ変換できます。
実装手順は次のとおりです。
- DevToolsで対象操作を実行する
- Save all as HAR with content でHARを保存する
- Apidogの Settings > Import Data > Manual からHARをインポートする
- BaseURLは Remove、Static Resourceは Exclude を選ぶ
- エンドポイント名、パスパラメーター、認証情報を整理する
- モック、ドキュメント、テストシナリオへ活用する
次のキャプチャを実際のエンドポイントに変換したい場合は、Apidogをダウンロードして試してください。
Top comments (0)