Web Perception Toolkit を使用した画像検索

簡単に使える、実世界のインタラクティビティ。

ユーザーがカメラを使ってサイトを検索できれば素晴らしいと思いませんか？想像してみてください。お客様のサイトは Razor McShaveyface です。お客様からは、カミソリの再注文時に適切なカートリッジがなかなか見つからないという問い合わせがありました。商品検索に最適なキーワードを 把握していないからです正直言って 彼らは決してそうなることはないでしょう

その必要がまったくない場合はどうすればよいでしょうか。ユーザーがスマートフォンのカメラをパッケージの UPC コードに向け、正しいカートリッジと大きな赤い「再注文」ボタンがサイトに表示されるとしたらどうでしょうか。

サイトでカメラを使用する他の方法を考えてみましょう。店舗での価格チェックに対応しているサイトを考えてみましょう美術館の展示や歴史的なマーカーに関する情報の取得を想像してみてください。ジオキャッシングや情報収集など、ゲームで現実世界のランドマークを特定することを想像してみてください。

Web Perception Toolkit を使用すると、このようなカメラベースのシナリオを作成できます。コードを記述せずにエクスペリエンスを作成できる場合もあります。

仕組み

オープンソースの Web Perception Toolkit は、ウェブサイトに画像検索を追加するのに役立ちます。デバイスのカメラ ストリームを、実世界のオブジェクト（ここでは「ターゲット」と呼びます）をサイトのコンテンツにマッピングする検出機能のセットに渡します。このマッピングは、サイトで構造化データ（JSON-LD）を使用して定義されます。このデータにより、カスタマイズ可能な UI に適切な情報を表示できます。

これから、その仕組みを十分にお見せします。詳細については、スタートガイド ガイド、ツールキット リファレンス、I/O Sandbox のデモ、サンプルデモをご覧ください。

構造化データ

ツールキットはカメラのビュー内でターゲットを見つけることができません。認識するターゲットのリンクされた JSON データを指定する必要があります。このデータには、ユーザーに表示されるターゲットに関する情報も含まれます。

下の画像に示すようなユーザー エクスペリエンスの作成に必要なのは、データだけです。何もしない場合、Web Perception Toolkit はターゲットを識別し、データで提供される情報に基づいてカードの表示と非表示を切り替えることができます。artifact-map デモで、この機能をお試しください。

<script> タグと "application/ld+json" MIME タイプを使用して組み込まれた JSON リンクデータファイルを使用して、サイトにデータを追加します。

<script type="application/ld+json" src="//path/to/your/sitemap.jsonld">

ファイル自体は次のようになります。

[
  {
    "@context": "https://schema.googleapis.com/",
    "@type": "ARArtifact",
    "arTarget": {
      "@type": "Barcode",
      "text": "012345678912"
    },
    "arContent": {
      "@type": "WebPage",
      "url": "http://localhost:8080/demo/artifact-map/products/product1.html",
      "name": "Product 1",
      "description": "This is a product with a barcode",
      "image": "http://localhost:8080/demo/artifact-map/products/product1.png"
    }
  }
]

ユーザー エクスペリエンス

デフォルトのユーザー エクスペリエンス以上のものが必要な場合はどうすればよいでしょうか。このツールキットには、イベントに関するユーザー エクスペリエンスを構築するためのライフサイクル イベント、カードおよびボタン オブジェクト、およびカードを簡単にスタイル設定する方法が用意されています。スタートガイド ガイドに基づくコードベースのコードを使用して、その一部を説明します。

最も重要なライフサイクル イベントは PerceivedResults です。これは、ターゲットが見つかるたびに発生します。ターゲットには、現実世界のオブジェクトやマーカー（バーコードや QR コードなど）を指定できます。

このイベントに応答するプロセスは、すでに述べた例外を除き、他のイベントと同じです。イベントを実装しない場合、構造化データを使用してユーザー インターフェースが自動的に作成されます。この動作をオーバーライドするには、event.preventDefault() を呼び出してイベント ハンドラを開始します。

const container = document.querySelector('.container');
async function onPerceivedResults(event) {
  // preventDefault() to stop default result Card from showing.
  event.preventDefault();
  // Process the event.
}
window.addEventListener(PerceptionToolkit.Events.PerceivedResults, onPerceivedResults);

イベントを詳しく見てみましょう。イベント自体には、検出したものと失われたものの両方を含むマーカーとターゲットの配列が含まれます。ワールド内でターゲットが見つかると、event.found で見つかったオブジェクトを配信し、実行します。同様に、ターゲットがカメラビューから通過すると、イベントが再び発生し、event.lost で失われたオブジェクトを渡します。これにより、カメラが十分に安定していない、マーカーが落ちるなど、手とマーカーの動きを把握できます。

async function onPerceivedResults(event) {
  // preventDefault() to stop default result Card from showing
  event.preventDefault();
  if (container.childNodes.length > 0) { return; }
  const { found, lost } = event.detail;
  // Deal with lost and found objects.
}

次に、ツールキットで見つかった情報に基づいて、適切なカードを表示します。

async function onPerceivedResults(event) {
  event.preventDefault();
  if (container.childNodes.length > 0) { return; }
  const { found, lost } = event.detail;
  if (found.length === 0 && lost.length === 0) {
    // Object not found.
    // Show a card with an offer to show the catalog.
  } else if (found.length > 0) {
    // Object found.
    // Show a card with a reorder button.
  }
}

カードとボタンを追加するには、それらをインスタンス化して親オブジェクトに追加します。次に例を示します。

const { Card } = PerceptionToolkit.Elements;
const card = new Card();
card.src = 'Your message here.'
container.appendChild(card)'

最後に全体像をご紹介しますユーザーエクスペリエンスに 便利になったことに注目してくださいマーカーが見つかったかどうかにかかわらず、その状況に最も有用だと思われるものにワンクリックでアクセスできます。

async function onPerceivedResults(event) {
  // preventDefault() to stop default result Card from showing
  event.preventDefault();
  if (container.childNodes.length > 0) { return; }
  const { found, lost } = event.detail;
  const { ActionButton, Card } = PerceptionToolkit.Elements;
  if (found.length === 0 && lost.length === 0) {
    //Make a view catalog button.
    const button =  new ActionButton();
    button.label = 'View catalog';
    button.addEventListener('click', () => {
      card.close();
      //Run code to launch a catalog.
    });
    //Make a card for the button.
    const card = new Card();
    card.src = 'We wish we could help, but that\'s not our razor. Would you like to see our catalog?';
    card.appendChild(button);
    //Tell the toolkit it does not keep the card around
    // if it finds something it recognizes.
    card.dataset.notRecognized = true;
    container.appendChild(card);
  } else if (found.length > 0) {
    //Make a reorder button.
    const button = new ActionButton();
    button.label = 'Reorder';
    botton.addEventListener('click', () => {
      card.close();
      //Run code to reorder.
    })
    const card = new Card();
    card.src = found[0].content;
    card.appendChild(button);
    container.appendChild(card);
  }
}

カードのフォーマット

Web Perception Toolkit には、デフォルトのスタイルシートを使用して、カードとボタンの書式設定が組み込まれています。簡単に追加できます。提供される Card オブジェクトと ActionButton オブジェクトには style プロパティが含まれており、多くのプロパティがあります。これにより、外観に組織のスタンプを付けることができます。デフォルトのスタイルシートを含めるには、<link> 要素をページに追加します。

<link rel="stylesheet" href="//path/to/toolkit/styles/perception-toolkit.css">

まとめ

上で述べたように、これはウェブ認識ツールキットを網羅したものではありません。画像検索をウェブサイトに追加することがいかに簡単であるかをご理解いただけたでしょうか。詳しくは、スタートガイドとサンプルデモをご覧ください。ツールキットのドキュメントで機能をご確認ください。