ウェブ上の通信で利用されるAPIのうち、OpenAPIを使用して記述されているAPIを検知して自動でOpenAPI形式の仕様を作成してくれるツールが「OpenAPI DevTools」です。Chrome向けの拡張機能としてリリースされており、簡単に使えるとのことなので実際に使って試してみました。

AndrewWalsh/openapi-devtools: Effortlessly discover API behaviour with a Chrome extension that automatically generates OpenAPI specifications in real time for any app or website

https://github.com/AndrewWalsh/openapi-devtools

GitHubのリポジトリにアクセスし、「Download and extract the zip」をクリック。



「dist.zip」というzip形式のファイルがダウンロードされるので、選択してエクスプローラーのメニューにある「すべて展開」をクリックします。



ファイルが展開されました。「dist」という名前のフォルダの中に「dist」というフォルダが生成されています。今回使用するのは奥にある方の「dist」フォルダです。



Google Chromeを起動し、右上のメニューの「拡張機能」にある「拡張機能を管理」をクリック。



右上の「デベロッパーモード」を有効にして「パッケージ化されていない拡張機能を読み込む」をクリックします。



先ほど用意した「dist」フォルダを選択し、「フォルダーの選択」をクリック。



下記のように表示されればインストール成功です。



OpenAPI DevToolsを開くには、「Control＋Shift＋i」を同時押ししてデベロッパーツールを開き、上のメニューで「OpenAPI」をクリックすればOK。



今回はWikipediaのAPIを見てみます。「Start Recording」をクリック。



下図の画面になれば準備OK。



Wikipedia内のリンクにカーソルを合わせるとOpenAPI仕様に準拠した通信が行われます。それをOpenAPI DevToolsが検知してOpenAPI仕様を自動で生成してくれるというわけ。「Download」をクリックしてみます。



自動生成されたOpenAPI仕様のデータがJSON形式でダウンロードできました。



OpenAPI DevToolsの画面の横幅を広げると左側に検出した通信の一覧が表示され、クリックするとそれぞれの中身を確認することができます。



OpenAPI DevToolsの画面下部には3つのボタンが存在しています。左は「検出の一時停止」で中央の歯車マークは「設定」、そして右端は「全データを削除」のボタンです。



設定画面では検出したAPIの一部をパラメーター化してまとめることが可能とのこと。例えば、下図の「カルタゴ」の部分をクリックすると「/api/rest_v1/page/summary/〜〜」という形式のAPIを全部まとめることができます。ただし、日本語を含むURLではうまく動作しないようでした。



英語版のWikipediaで同様の操作を行ってみたところ、下図の通り複数のAPIを1つの形式にまとめることができました。