なぜ#
openlayers の API ドキュメントの内容は非常に優れていますが、使用方法は少々難解です。
一般的な API の検索方法は次の 2 つです：
- 検索エンジンで「openlayers + キーワード」と検索し、指定のリンクを開く
- API ドキュメントページを開き、「キーワード」を検索し、検索結果を使用して指定の結果にアクセスする
OL 検索 1#
OL 検索は、ブラウザの拡張機能です（現在は Edge アドオンにのみ登録されています2）。ブラウザのアドレスバーを使用して、openlayers の API を素早く検索することができます。手順は次のとおりです：
- control+L または cmd+L で検索バーに移動します。
olと入力し、tab または space で OL 検索に移動します。- 目的の API（メソッド、メンバ変数、トリガーなど）のキーワードを入力し、指定のリンクに移動します。
実装#
主に 3 つのステップで行います：
API ドキュメントの解析#
https://openlayers.org/en/latest/apidoc/navigation.tmpl.html
ドキュメントのナビゲーションバーには、上記のアドレスから取得した HTML が埋め込まれています。
ここで 2 つのアプローチがありました。
1 つは、openlayers の「API ビルド」スクリプトを変更して、上記の HTML と同じ内容の JSON 形式の API ドキュメント情報を生成する方法です。
ただし、次の 2 点を考慮しました：
- メンテナンスの問題。この方法を採用すると、各小さなバージョンの更新ごとにプラグインを再度更新する必要があります。
- プラグインのサイズが大きくなること。
もう 1 つの方法は、上記の HTML のナビゲーション情報ファイルを直接解析することです。ただし、ここで問題が発生しました。ブラウザの拡張機能では、backgroud.jsからDOMParserオブジェクトにアクセスできません。最初は迂回策を取りましたが、最初はpopup（拡張機能アイコンをクリックして表示される小さなポップアップ）でデータを読み込む方法でした。この方法の欠点は明らかで、ユーザーがプラグインをインストールした後、直接使用することができず、拡張機能アイコンをクリックしてインデックスファイルの初期化を待つ必要がある点です。その後、純粋なjavascriptの DOM パーサーライブラリを見つけて、この問題を解決しました。
ファジー検索#
最初は厳密な検索を使用していましたが、自分自身でも満足していませんでした。タイプミスは避けられないため、ファジー検索が必要です。
ここでは、mdn-searchの方法を参考にし、fuse.jsを導入しました。さらに、複数のキーワードをサポートするためにいくつかの改良も行いました。
たとえば、readFeaturesメソッドを検索する場合、EsriJSON、KML、WKTなど、さまざまな形式にはすべてreadFeaturesメソッドがありますが、デフォルトの検索結果ではWKTが後ろに表示されます。WKTのreadFeaturesを見つけたい場合、体験に影響を与えます。
fuse.jsのsearch.$orを使用して、複数のキーワードでの複合検索を実現しました。
これにより、readFeatures wktと入力するだけで、WKTを含む結果を最初の候補に表示できます。
デフォルトの推奨を削除#
アドレスバーのomniboxの内容が変更されたイベントのコールバック関数では、ブラウザはデフォルトで、提案結果の前にデフォルトの推奨を追加します。その内容は入力した内容であり、アドレスは拡張機能のアドレスに入力した内容を追加したものです。デフォルトの動作は「File not found」です。
このアイデアはrust-search-extensionから来ました。まず、ユーザーの入力内容と検索結果に基づいて、デフォルトの推奨を元の 2 番目の結果（実際の検索結果の 1 番目）に設定します。その後、ユーザーが Enter キーを押した後、選択肢がデフォルトの推奨かどうかを判断し、デフォルトの推奨であれば、実際の検索結果の 1 番目の結果にリンクします。
最後に#
このツールが openlayers の API ドキュメントを頻繁に使用する皆さんに役立てば幸いです。