2GIS for％browser％または拡張方法

質問をしたら、ユーザーが2gis.ru以外の会社を選択するのをどのように支援できますか？ ブラウザ拡張の形でのアイデアの実装オプションがほぼすぐに提案され、研究と計画の段階の後、 ブラウザ用の2GISの開発を開始しました 。



メインの実装オプションとして、アドレスバーの横にあるボタンをクリックしました。クリックすると、情報ウィンドウが開きます。 さらに-サイトコンテンツ内の電話番号を強調表示します。















利便性を高めるために、関心のある会社までの距離に関する信頼できる情報を表示し、現在の場所から会社までの道順を検索するためのクイックリンクを提供するために、ユーザーの現在の座標を決定することにしました。 その後、座標の決定がより重要になりました。これは、最適なソース（2GISまたはGoogle）からのデータを表示するためにユーザーがいる都市を決定する必要があったためです。

背景とコンテンツのスクリプト

技術的な観点から見ると、平均的なブラウザ拡張機能は、1つ以上のエントリポイントを持つ比較的単純なJavaScriptアプリケーションです。



拡張機能がどのブラウザ向けに書かれているかに関係なく、アプリケーション内で2つのグループのスクリプト、つまりバックグラウンドとコンテンツを区別できます。



バックグラウンドスクリプトは、アプリケーションレベルでサンドボックス（サンドボックス評価）で実行され、実行中のブラウザーインスタンスのデータは同じです。 拡張機能がインストールされたとき、または拡張機能がインストールされた状態でブラウザが起動したときに、セッションごとに1回起動されます。



コンテンツスクリプト （存在する場合）は、表示されているサイトのコンテンツのコンテキストで実行され、DOMツリーにアクセスできますが、そのデータはブラウザーウィンドウとタブごとに異なります。 コンテンツスクリプトは、ブラウザにロードされたページのonloadイベントが発生するたびに起動されます。 バックグラウンドスクリプトはページのコンテンツに直接アクセスできませんが、ブラウザエンジンはバックグラウンドのスクリプトとコンテンツ領域のスクリプトの間の相互作用のメカニズムを提供します。 さらに、各エンジンには、データ交換の組織において独自の特性があります。



バックグラウンドスクリプトとコンテンツスクリプトに加えて、拡張機能には他のエントリポイント（追加リソースごとに1つ）を含めることができます。 たとえば、ポップアップ情報ウィンドウと1つ以上の拡張オプションページ。 追加のリソーススクリプトは、初期化されるたびに実行されます。

拡張機能を作成するためのフレームワーク。 Kango拡張機能

拡張機能が異なるブラウザで動作するようにしたかったので、クロスブラウザ開発フレームワークに注意を向けました。 それらの一部はSaaSとして提供されましたが、これは私たちにはまったく適していません。 その他-コンテンツ領域でのみ作業する方法を知っていたため、クロスブラウザユーザースクリプト（ユーザースクリプト）を実装する可能性が高くなりました。 そして、この「さまざまな」すべての2つのフレームワークだけが要件を満たしました。 Kango Extensionsフレームワークに決めました。

• 低いエントリーしきい値。
• クロスプラットフォームアセンブリ。
• チームの一員としてのロシアの開発者:)。

私たちが選択した無料版では、Mozilla Firefox、Safari、Google Chromeおよびその派生製品の拡張パッケージを作成できます。 インターフェイスは非常に限定されており、すべてのブラウザに共通ですが、アドレスバーとポップアップにボタンを作成するだけで十分です。



フレームワークには以下が含まれます。

• バックグラウンドスクリプトからのみアクセス可能な永続データストレージkango.storage。 興味深いことに、リポジトリはブラウザごとにわずかに異なる動作をします。 たとえば、Firefoxでは、拡張機能を削除して再インストールするとデータが保存され、Webkitブラウザーでは拡張機能を削除するとデータが消去されます。
• kango.browserブラウザーを管理するためのインターフェース。ここから、ウィンドウとタブの現在の状態を取得できるだけでなく、それらを管理することもできます。
• FirefoxバックグラウンドスクリプトでXMLHttpRequestをインスタンス化する問題を解決するkango.xhrというXMLHttpRequestのラッパー。
• バックグラウンドサンドボックス内のスクリプトからデバッグメッセージを出力するための単一のログメソッドを備えたkango.consoleデバッグインターフェイス。
• バックグラウンドスクリプトとコンテンツスクリプト間でメッセージを交換するための単一のインターフェイス。 バックグラウンドスクリプトメソッドはkango.invokeAsyncを介して使用できます。また、KangogoBrowserTab.dispatchMessageおよびkango.addMessageListenerメソッドを介して、バックグラウンドからコンテンツ領域にメッセージをディスパッチするメカニズムもあります。 上記のメソッドはデータを非同期で受信するため、イベントプログラミングを完全に適用し、潜在的な競合状態を監視する必要があります。

使用データと外部サービス

ブラウザ用の2GISデータのほとんどはバックグラウンドスクリプトに保存され、不必要なリクエストを避けるためにそこにもキャッシュされます。 たとえば、ユーザーの現在の場所と、ドメインまたは電話で検索して取得した組織のデータ。 組織データは、 APIを通じて2GISとGoogleプレイスから取得されます 。 次に、ユーザーの場所は、HTML5 Geolocation APIを使用するか、APIがエラーを返した場合または利用できない場合は、サードパーティのオープンGeoIPサービスを使用して決定されます。











考えられる状況は非常に少数であったため、ユーザーの現在位置の特定に関連するいくつかの難しい決定があります。 たとえば、ユーザーがラップトップのふたを閉じて街の反対側に出て、ラップトップを開くとどうなりますか？ そして、彼が2つのWi-Fiポイント間を移動しただけで、接続が短時間失われた場合はどうでしょうか？ ビルトインメソッドnavigator.geolocation.watchPositionを使用して問題を真正面から解決することはできませんでした。 positionChangedイベントは、ラップトップのふたを閉じたり開いたりする状況では機能しなかったことに加えて、予想よりもはるかに少ない頻度で発生しました。 navigator.onLineフラグが助けになりました。 彼を見て、インターネット接続の出現時にイベントをトリガーできました。 残念ながら、このフラグはWebkitブラウザでのみ確実に機能しますが、これは何もないよりはましです。



組織がユーザーと同じ都市、または2GISの都市の1つにある場合、2GISからの情報を表示します。信頼性が高く、検証済みであると考えられるためです。 情報がない領域の座標を取得するには、Googleプレイスが使用されますが、フィルターが使用されます。 情報は、検索結果のドメインが、表示されているページが存在するドメインと一致する場合にのみ表示されます。 同様に、電話による検索も行います。 唯一の違いは、ドメインではなく電話でフィルタリングすることです。 これは、組織の電話がサードパーティの広告サイトなどでホストされている場合に便利です。



言い換えると、ユーザーがWebサイトを訪問した組織に関して地球の反対側にいる場合でも、この組織に関する正しいデータを見つけて提供しようとします。

仕組み

この拡張機能は、通常のJavaScriptアプリケーションのように機能します。作業に必要な初期データを受け取り、特定のイベントのハンドラーを追加し、ヘルプを使用して着信イベントを処理します。 したがって、ウィンドウとタブを切り替えるときの動作が実装されます。たとえば、このタブで開かれたサイトの情報の可用性に応じて、インジケータを変更します。



タブの切り替えに加えて、ユーザーによるURLの変更にも対応する必要があります。 これを行うために、ページの読み込みを開始する前にブラウザが起動するonBeforeNavigateイベントを処理します。 Safariでは少し困難が生じました。アドレスバーが変更されるたびにこのイベントがトリガーされることはありません。ページがキャッシュにないか、キャッシュの有効期限が切れている場合のみです。 妥協する必要がありました-ページがロードされた後に呼び出されるハンドラーをonLoadイベントに追加します。



また、応答ヘッダー、メタタグ、またはjs呼び出しを介したリダイレクトの問題も発生しました。この種のソフトウェアリダイレクトは、追加のonBeforeNavigateイベントを生成しません。 一方、すべてのブラウザでonLoadにアタッチしたくはありません。見た目が遅くなるためです。 解決策として、現在のタブのURLのステータスを30秒間定期的にポーリングし、必要に応じてデータを更新することを選択しました。

Webページでの電話認識

ページのコンテンツ領域では、拡張機能が唯一のタスクを実行します-電話と見なすことができる数字と記号のコンテンツシーケンスから抽出します。 これにより、これらの電話で情報を取得し、スマートフォンに通話を送信して電話をかけることができます。



電話機自体を認識するタスクは、さまざまな形式があるため簡単ではありません。そのため、完全に信頼できるソリューションについての幻想はありませんでした。 対処しなければならなかったフォーマットの例：34.76.35.05.39-フランス、+ 1 234 345 6789-アメリカ、67 2354 9548-ブラジル。



最善の解決策は、正規表現と単純な条件に基づく2段階のフィルターでした。 最初の段階では、理論的には電話に似た文字のシーケンスがテキストから抽出されます。 このために、比較的緩やかな正規表現と条件が使用され、さらに、追加情報を提供できるコンテキストの出現がチェックされます。 さらに、最初のステップでは、長いシーケンスを短いシーケンスに分割することができ、不適切なコンテキストを持つシーケンスの一部も除外される場合があります。









2番目の段階では、見つかった一連のシーケンスを取得し、より厳しいルールに基づいて、この式を受け入れるかどうかを決定します。 ルールには、既知のマスクと単純な条件のチェックが含まれます。 たとえば、送信されたシーケンスは浮動小数点数の文字列表現ですか？



いくつかの厳格な規則により、実数は認識されませんが、例外またはコンテキストの追加表示によって修正されます。 今日、電話パーサーをチェックするために、正と負の両方のケースを含む385のテストラインのセットが使用されます。 生産の準備は、セットから正常に合格したテストの95％のしきい値によって評価されます。









ツリーの幅の単純な反復走査中に、ドキュメントの各テキストDOMノードのコンテンツで電話が検索されます。 手順では、次のようになります：テキストで見つかった電話番号が強調表示されます→外部サービスにカーソルを合わせると、電話番号で会社情報が要求されます→受信したデータがポップアップウィンドウに表示されます→類似するものが見つからない場合、「通話」リンクが表示されます



データはバックグラウンドで受信されるため、ページに干渉することはありません。また、データをキャッシュすると、同じ電話による他のタブやウィンドウからの追加リクエストが除外されます。

そして、データがAjaxによって取得された場合はどうなりますか？

ロードの段階でページコードを解析することで多かれ少なかれ明確な場合、ajaxを介して動的に受信できる、またはクライアントスクリプトによって単純に形成される電話をどうするか？



この場合、MutationObserverインターフェースに基づいたページ内の新しいテキストデータの処理を提供しました。これは、すべての最新のブラウザー（Safari 5 for Windowsを除く）でサポートされています。 DOMが変更されたときに発生するイベントをサブスクライブするために、mutation-summaryライブラリを使用しました。 追加したDOMノードを簡単かつ簡単に追加できます。 処理されるデータの量を減らすために、新しいテキストノードを受信するためだけにサブスクライブし、そのコンテンツを解析しようとします。 電話をフィールドに入力し、別のテキストノードに表示する場合の内線番号の動作を観察するのは興味深いことです。

国際化 私たちは英語を話します

現時点では、拡張機能はロシア語と英語でリリースされており、言語の選択は現在のブラウザのロケールとその設定によって異なります。 翻訳する際、コンテンツと追加のスクリプトから、バックグラウンドへの非同期呼び出しを介してのみi18nコンポーネントに到達できるという事実に直面しました。 これは、国際化インターフェースの概念に適合しませんでした。 そのため、小さなモジュールが実装され、そのタスクには次のものが含まれていました。

• 現在のロケールの定義。
• ロケールに応じて、kango.io.getExtensionFileContentsを直接呼び出すか、モジュールがコンテンツまたは追加のスクリプトでインスタンス化されている場合は非同期でローカライズリストをロードします。
• 単純な文字列補間でローカライズメッセージを受信するためのシンプルなインターフェイスを提供します。

非同期性の可能性があるため、他のオブジェクトよりも早くロケールを初期化する機能を提供する必要がありました。デザイナーがローカライズされたテキストを取得するための呼び出しを含めることができるからです。 同時に、kango.i18nに加えて、ロケールファイルは部分的に拡張パッケージの構築に使用されるため、kangoで受け入れられているロケール形式から離れることはありませんでした。

パッケージアセンブリ

アセンブリ自体に関しては、フレームワークは、Pythonベースのビルダーを使用して拡張機能を構築する簡単な方法を提供します。 ビルドするには、buildパラメーターと拡張ファイルが置かれているディレクトリを指定してkango.pyスクリプトを呼び出すだけです。 その後、コレクターは必要なアンパックアセンブリを作成し、ChromeとFirefoxに関連するアセンブリもパックします。 残念ながら、拡張機能に署名する複雑なメカニズムのため、すぐに使用できるビルダーはSafari用のパッケージをパッケージ化できません。 Safari開発者センターで認定プロセス全体を実行することにより、Safari拡張機能ビルダーを使用して拡張機能を構築することで取得できます。 また、 パッチを適用したxarアーカイバと証明書を使用して、拡張機能を自動的に、任意の* nixシステムで収集できます。



kangoビルダーと、safariでのアセンブリを自動化する単純なbashスクリプトに加えて、gulpを使用してコードスタイルの確認、テストの実行、およびいくつかの補助アクションも実行します。 まず、現在のアセンブリのバージョン番号をいくつかのファイルに置き換える必要があります。 第二に、すべてのデバッグ出力が無効になっていることを確認するとよいでしょう。 そして最後に、特別なパッケージオプションを作成する必要があります。 たとえば、addons.mozilla.orgでは、拡張機能に自動更新用のURLがないことを要求しており、サイトから自動的に更新するよう動機付けています。 一方、Firefoxの拡張機能は独自のソースから公開しているため、更新プログラムのURLが存在する場合はオプションも必要です。 また、拡張機能をOperaストアに配置するには、いくつかのローカライズの変更が必要です。

次は何ですか

世界は止まっておらず、ブラウザ用の2GISも成長および発展しています。近い将来に私たちがやろうとしていることのいくつかを以下に示します。

• 反復的な電話認識の強化。 さらに多くのテストケースを追加し、パーサーを修正します。人生はより良く、より楽しくなります。
• 静的な画像ではなく、ポップアップウィンドウにインタラクティブな2GISマップを埋め込みます。
• 外観が非常に悪く、デザインが非常に粗末なサイトでも要素を美しく表示できるようにするための変更。
• そしてもちろん、さまざまな修正と改善、メールextension@2gis.ruを待っている提案

ご清聴ありがとうございました。 ブラウザ用の拡張機能を作成します-それは楽しいだけでなく、便利です！