IE 8のビジュアル検索プロバイダー-Two Tomato Challenge

ビジュアル検索プロバイダーは、IE 8.0の3つの新しい拡張機能タイプの1つであり、ユーザーはサイトにアクセスせずにサイト上の何かを検索できます。 また、プロバイダーにファビコンを追加すると、ブランド(または16ピクセルのブランド)が常にユーザーに表示されます。 そして最も重要なのは、検索結果のドライテキストを次のような素敵な写真で希釈できることです。



Play2Game.ruのミニゲーム



また、プロバイダーをIE 8.0拡張ギャラリーに投稿することで、プロバイダーについて話すことができます。 または、ReMIX09カンファレンスの一部として開催されたIE 8.0アドオンコンテストに参加し 、プラズマテレビに勝ちます



IE 8.0アドオンコンペティションの大賞

ところで、現在登録されているビジュアルプロバイダーは3つだけです。 探しているものがあり、さらに良いものがあれば-適切な視聴者がいて、競争でそれをサポートする準備ができているサイト-それを試してみましょうか?



本当に必要なのは、リクエストに応じて見つかったデータを返すメソッドだけです。 どのように見えるかは、お気に入りのテクノロジーとサイトのサイズによって異なります。 私の場合(.NETで書いたミニゲームサイト )は、LINQリクエストの単純な文字列比較でした。 誰かがMS SQL Serverで全文検索をもっと真剣に設定するでしょうが、PHPとMySQLの支持者はおそらく彼らの兵器庫で効果的な何かを選ぶでしょう。



このような方法がある場合、他のすべては2つのトマト1のタスクであり、1つ、2つ、または3つに対して行います。 さらに、 Webスライスとは異なり、予約やニュアンスがなくても、シンプルなソリューションが同時に優れています。



したがって、料理プログラムの最高の伝統では、プロバイダーの準備を成功させるために必要なものは次のとおりです。

さて、製品の準備が整い、水が沸騰しています-始めましょう...



最初に、私たちの料理の基礎を取り上げます-実際にすべての作業を実行する検索方法。 私たちが同意したように、その実装は完全にあなた次第です。 これがどのように行われるかは絶対に重要ではありません。主なことは次のとおりです。



Play2Game.ruで検索

  1. ユーザーが検索バーに入力した入力テキストを受け入れました:

    さらに、ブラウザは文字を入力するたびにサイトにアクセスするため、検索を高速化することをお勧めします。
  2. 見つかったアイテムごとに、以下を返しました。
    • 見出し
    • 簡単な説明
    • 検索時にこの要素を選択してアクセスするページのURL
    • 画像URL
    原則として、ヘッダーまたはURLのみを返すだけで十分です。 しかし、美しい結果を得るには、すべての要素が必要です。
2番目の部分、つまり、ブラウザが検索オプション付きのxmlを取得するために呼び出すサイトのモジュールに移ります。 呼び出し形式は自分で設定できます。ブラウザは要求を記述するいくつかのパラメーターを追加します。 検索文字列が渡されるのは1つだけです。 クエリは次のようになります。



http://{ }/search.aspx?q={searchTerms}







モジュールは、IHttpModuleやWebServiceなど、さまざまな方法で実装できます。 私は最も単純なオプション-通常の.aspxページを好みました:

<%@ Page Language="C#" CodeBehind="visual.aspx.cs" Inherits="Play2game.VisualProvider" %> <? xml version ="1.0" ? >

< SearchSuggestion xmlns ="http://schemas.microsoft.com/Search/2008/suggestions" >

< Query >< asp:Literal ID ="ltKeyword" runat ="server" /></ Query >

< Section title =" Play2Game.ru" >

< asp:Literal ID ="ltItems" runat ="server" />

</ Section >

</ SearchSuggestion >




* This source code was highlighted with Source Code Highlighter .




これは、ブラウザに返す必要があるXMLです。 2つのプレースホルダーが含まれています(ASP.NETからの単純なリテラルコントロールとして)。 最初の代わりに、ユーザーが探していた行を挿入する必要があります。 ブラウザは、この行がリクエストで渡された行と一致する場合にのみ、それをチェックして結果を表示します。



2番目のプレースホルダーの代わりに、見つかった要素の説明でxmlを置き換えます。 対処する前に、さらに2つのことに注意してください。

  1. 行<?Xml version = "1.0"?>は、理由のためにページ宣言と同じ行にあります。 新しい行から書きます(私がやったように、曲がった形式のテキストが嫌いなので)、結果のxmlはキャリッジリターン文字で始まり、ブラウザに認識されません(そして、「エラー」メッセージが表示されます。問題が発生した場合は、コード内の何かを変更してから再試行してください))。

  2. Sectionタグでは、ヘッダーのタイトルを渡しました。ヘッダーのタイトルは、グレーの線(セパレーター)とともに最上部に表示されます。 これを行わなかった場合、IEはそれを「{あなたのプロバイダーの名前}オプション」として自分で作成していました。
次に、結果自体を含むxml形式に切り替えます(2番目のプレースホルダーの場所に挿入されます)。 とても簡単です:

< Item >

<!-- -->

< Text > , </ Text >

<!-- -->

< Description > , . </ Description >

<!-- Url, , -->

< Url > /something.html </ Url >

<!-- Url -->

< Image source ="/something.gif" alt =", " width ="45" height ="45" />

</ Item >

...

< Separator title =" " />

< Item >

...

</ Item >




* This source code was highlighted with Source Code Highlighter .




ここでも、2つの点に注意する価値があります。 最初は画像のサイズです。 それらを指定すると、すべてが正常に機能します。 ただし、画像のサイズがわずかに異なる場合、これは問題になる可能性があります。 imgタグの通常のhtmlで2つのうち1つの次元のみを指定すると、画像は比例的に拡大縮小されます。 このトリックはここでは機能しません-画像の表示が停止するだけです(サイズをまったく指定しないようにすると、プロバイダーに接続した後の最初の要求で画像が通常表示され、その後すべてが消えました)。 したがって、サイズを正しく計算する方法を理解する必要があります。



この場合、私は幸運でした-すべてのアイコンが44から44の同じサイズでした。さらに悪いことに、写真が異なっていて、45x45のようなものを指定すると、すべてがこの正方形にスケーリングされ、容赦なく歪められました。 最後に、物理ファイルを見つけ、そのサイズを決定し、幅と高さの属性を正しく設定するメソッドを追加しました。 恐怖とは反対に、それは非常に高速に動作しました-2番目のポイントのおかげで、これについて説明します。



Play2Game.ruでゲームを検索する



実際には、リストのサイズは制限されています-リストに表示される要素は10個以下です(したがって、最大10個のファイルのサイズを確認するのは非常に簡単でした)。 これらの要素は、「セパレータ」で区切ることができます-XMLのタグ<Separator title =「別のリストはわからない」/>。 ただし、セパレータは10箇所のうちの1つを占有します。 そのため、見つかった要素を美しくグループ化するためにセパレーターを表示するか、より多くの検索結果を表示するかを決定する必要があります。



単純なASP.NET StringBuilderを使用して結果を含むXmlを作成し、プレースホルダーを所定の場所に挿入しました。 複雑で正しいソリューションのサポーターである場合は、Guy BursteinがWCF RESTサービスとXMLシリアル化を使用してそのようなモジュールを正しく作成する方法を教えている投稿「 Building an IE8 Visual Search Provider for my Twitter Friends 」を必ず読んでください。



ほとんどすべての準備ができており、2つの小さなことが残っています。 1つ目は、プロバイダーの説明を含むxmlファイルを作成することです。

<? xml version ="1.0" encoding ="utf-8" ? >

< OpenSearchDescription xmlns ="http://a9.com/-/spec/opensearch/1.1/" xmlns:ie ="http://schemas.microsoft.com/Search/2008/" >

< ShortName > { } </ ShortName >

< Image height ="16" width ="16" type ="image/icon" > http://{ }/favicon.ico </ Image >

< Url type ="text/html" template ="http://{ }/search-page.aspx?q={searchTerms}" />

< Url type ="application/x-suggestions+xml" template ="http://{ }/search.aspx?q={searchTerms}" />

</ OpenSearchDescription >




* This source code was highlighted with Source Code Highlighter .




ここで注意すべきこと:

  1. <Url type = "text / html"タグは、ユーザーが提案リストのオプションを選択せず​​に検索バーの入力を押すだけで呼び出されるURLを定義します。 任意のURLを指定できます。主なことは、プレースホルダー{searchTerms}が含まれていることです。プレースホルダーは、ブラウザーがユーザーが入力した文字列を置換する場所です。

    サイトで既に検索が実装されている場合は、このURLを送信してください。 そうでない場合は、次のように、お気に入りの検索エンジンにこれを信頼してください。



    <Url type="text/html" template="http://www.google.com/search?q={searchTerms}"/>







  2. <Url type = "application / x-suggestions + xml"タグは、結果のxmlを返すモジュールのURLを定義します。 条件は同じです。必須のプレースホルダー{searchTerms}を持つ任意のURLで、代わりにブラウザーが検索の代わりに文字列を使用します。 さらに、さらにいくつかのプレースホルダーを使用すると、ブラウザーからもう少し役立つ情報が得られます。 したがって、たとえば、次の形式のクエリ:



    <Url type="text/html" template="http://www.google.com/search?q={searchTerms}&language={Language}"/>







    ユーザーにインストールされている言語(ユーザーのシステムのロケール)を見つけることができます。 追加のパラメーターの詳細については、ドキュメントをご覧ください。リンクは記事の最後にあります。 特に有用なものはありません。写真とテキストのサイズをより適切に計算するために、ほとんどすべてが結果を含むドロップダウンリストのサイズを決定することになります。
アーティストの最後の仕上げ-サイトのヘッドにプロバイダーの説明を含むhtmlタグを追加します。 次のようになります。



<link rel="search" type="application/opensearchdescription+xml" href="/opensearch.xml" title=" " />







検索プロバイダーの追加



私たちのサイトIEでそれを見つけると焦りでオレンジ色に変わり、すでに登録されている拡張機能にすばやく追加することを提案します。



「タイトル」属性の値は、プロバイダーの説明の「ShortName」タグの同じ名前と正確に一致する必要があることに注意してください。 これらの行が異なる場合、ブラウザーは、このプロバイダーが既に追加されているとは思わず、再度追加することを提案します。



さて、テーブルにお願いします、ゆでました!



あなたの人生を簡素化できる別のヒント。 ブラウザーは結果のxmlをキャッシュするため、テスト中に入力する単語を変更し続けます。 しばらくの間、デバッガーの下に座って、古典的な「sdfsdf」(「ytsuken」または「qwerty」オプション)を入力したときにモジュールが呼び出されなかった理由を理解しようとして失敗しました。



そして、すべての詳細を理解したい場合は、メインのMicrosoftクックブック、Internet Explorerの検索プロバイダー拡張機能およびXML検索提案形式の仕様をご覧ください。また、Sebastian Zimmerman(ビジュアル検索機能の主要開発者)の記事を読んでください。 IE8 Visual Searchおよび私のブログ「 .NET:Notes by a Programmer 」のIE 8.0用のVisual Search Providerの作成に関する記事のもう少し詳細な版。



コンテストで料理と勝利をお楽しみください!



1 XP , . - , . « ».






All Articles