使いやすい現実世界でのインタラクティビティ。
必要がない場合はどうすればよいですか？スマートフォンのカメラをパッケージの UPC コードに向けると、サイトに適切なカートリッジと大きな赤い [再注文] ボタンが表示されたらどうでしょうか。
サイト上でカメラを活用できる他の方法を検討してください。店頭での価格チェックをサポートするサイトがあるとします。美術館の展示物や歴史的標識に関する情報を取得するとします。ジオキャッシングや宝探しなどのゲームで、現実世界のランドマークを特定することを想像してみてください。
ウェブ パーセプション ツールキットを使用すると、このようなカメラベースのシナリオを実現できます。コードを記述せずにエクスペリエンスを構築できる場合もあります。
仕組み
オープンソースの Web Perception Toolkit を使用すると、ウェブサイトにビジュアル検索を追加できます。この API は、デバイスのカメラ ストリームを、実際のオブジェクト（ここでは「ターゲット」）をサイトのコンテンツにマッピングする一連の検出機能に渡します。このマッピングは、サイトの構造化データ（JSON-LD）を使用して定義されます。このデータを使用して、カスタマイズ可能な UI に適切な情報を表示できます。
その仕組みを理解するために十分ご説明します。詳しくは、スタートガイド、ツールキット リファレンス、I/O サンドボックスのデモ、サンプルデモをご覧ください。
構造化データ
ツールキットは、カメラの視野内の任意のターゲットを検出できるわけではありません。認識するターゲットのリンクされた JSON データを指定する必要があります。このデータには、ユーザーに表示されるターゲットに関する情報も含まれます。
下記の画像のようなユーザー エクスペリエンスを作成するには、このデータのみが必要です。何も設定しない場合、Web Perception Toolkit はターゲットを特定し、データに提供された情報に基づいてカードを表示または非表示にします。アーティファクト マップのデモで、この方法を試してみてください。
<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">
まとめ
冒頭で述べたように、これは ウェブ認識ツールキットのすべてを網羅したものではありません。これで、ウェブサイトにビジュアル検索を追加するのがいかに簡単かがお分かりいただけたと思います。詳しくは、スタートガイドとサンプルデモをご覧ください。ツールキットのドキュメントで、ツールキットの機能を確認してください。