あらゆるアプリやウェブサイトのOpenAPI仕様を自動生成してくれるChrome向け拡張機能「OpenAPI DevTools」を使ってみた

ウェブ上の通信で利用される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つの形式にまとめることができました。