ナレッジグラフ検索ウィジェット

ナレッジグラフ検索ウィジェットは、サイトの入力ボックスにトピックを追加するのに役立つ JavaScript モジュールです。ユーザーがテキストの入力を開始すると、ウィジェットは Knowledge Graph Search API を使用して、入力中に一致する関連情報を検索します。

機能

クロスブラウザ - Closure で記述され、純粋な JavaScript にコンパイルされます。
クロスドメイン。JSONP のおかげで、プロキシサーバーは不要です。
Google サーバーでホストされます。
無料！（標準の Google API 利用規約が適用されます）。

試してみる

ナレッジグラフ検索ウィジェットを使用する理由

ユーザーが入力する文字数を減らして、より多くのデータを入力できるようにします。
データ入力が簡単かつ正確になります。
画像と説明を提供することで、ユーザーの認知負荷を軽減します。
同じエンティティに重複した名前を使用しない: Puff Daddy、P. Diddy、Sean Combs はすべて /en/sean_combs を指します。

ナレッジグラフ検索ウィジェットをウェブサイトに追加する

ナレッジグラフ検索ウィジェットをページに追加するには、ウェブサイトのソースに次のコードを含めます。ウィジェットが Google Knowledge Graph API にアクセスできるように、API キーを使用する必要があります。

ウェブサイトに含めるコード

HTML ドキュメントの <head> に次のコードを含めます。

<link type="text/css" rel="stylesheet" href="https://www.gstatic.com/knowledge/kgsearch/widget/1.0/widget.min.css">
<style>
  .kge-search-picker {
    width: <DROPDOWN_MENU_WIDTH>;
  }
</style>
<script type="text/javascript" src="https://www.gstatic.com/knowledge/kgsearch/widget/1.0/widget.min.js"></script>

次に、ドキュメント <body> で、次のように一致する ID を持つ入力フィールドを使用します。

<input type="text" id="myInput">
<script type="text/javascript">
  KGSearchWidget(<API_KEY>, document.getElementById("myInput"), {});
</script>

API キーの取得と使用

API キーを取得すると、アプリケーションで候補リクエストを作成できるようになります。API キーがないと、ウィジェットは機能しません。API キーをまだ取得していない場合は、前提条件ページの手順に沿って取得してください。

キーを取得したら、次のようなコードを使用して Knowledge Graph Search Widget に渡します。

KGSearchWidget(<API_KEY>, document.getElementById("myInput"), {});

検索ウィジェットの設定

JavaScript は、上記のように 3 番目の引数を空にして KGSearchWidget() を呼び出すことができます。また、この 3 番目の引数を使用して構成オブジェクトを渡すことで、さまざまなフィルタリング、制約、イベントハンドラを指定することもできます。

構成オブジェクトを渡す

ナレッジグラフ検索ウィジェットは、オプションの構成パラメータを受け取ります。これにより、複数の構成オプションを使用してデータ構造を設定し、次の例に示すようにウィジェットに渡すことができます。

var config = {
  'limit': 10,
  'languages': ['en', 'fr'],
  'types': ['Person', 'Movie'],
  'maxDescChars': 100,
};
config['selectHandler'] = function(e) {
  alert(e.row.name + ' selected');
};
config['highlightHandler'] = function(e) {
  alert(e.row.name + ' highlighted');
};
KGSearchWidget(<API_KEY>, document.getElementById('myInput'), config);

構成オプション

次の表に、ナレッジグラフ検索ウィジェットに渡すことができる構成オプションを示します。

名前	タイプ	デフォルト	説明
言語	Array(String)	英語	指定されたすべての言語で検索を行う言語コードのリスト（ISO 639-1 で定義）。結果はリストの最初の言語でランク付けされ、リストの最初の言語で表示されます。この言語にはエンティティの名前が含まれます。英語が最も広範にカバーされています。この値は、検索 API に透過的に渡されます。たとえば、言語が `[fr, en], the widget will show descriptions for entities in the primary language, French, when possible. Otherwise, it will fall back to English as a secondary language.` に設定されている場合
limit	整数	20	プルダウンメニューに表示する結果の最大数。
タイプ	Array(String)	すべてのタイプ	指定されたエンティティタイプのいずれかに一致するエンティティのみを返します。このパラメータを省略すると、任意のエンティティタイプの一致が返されます。
maxDescChars	整数	無制限	各エンティティの詳細な説明の最大文字数。maxDescChars を超えるコンテンツは切り捨てられます。
selectHandler	関数	null	行が選択されたときに呼び出すコールバック関数。コールバック関数の引数はイベントで、選択された行に関する情報を含む `row` 属性が含まれます。このコールバックの使用例については、イベントハンドラの使用をご覧ください。
highlightHandler	関数	null	ユーザーが行にカーソルを合わせたときに呼び出されるコールバック関数。コールバック関数の引数はイベントであり、選択された行に関する情報を含む `row` 属性が含まれます。多くのデバイス（タッチスクリーンのモバイルハードウェアなど）では、このイベントを生成できません。このコールバックの使用例については、イベントハンドラの使用をご覧ください。

イベントハンドラを実装する

ナレッジグラフ検索ウィジェットは、初期化された入力のコンテキスト内で次のイベントをトリガーします。構成オブジェクトでコールバック関数を指定して、これらのイベントのハンドラを実装できます。

selectHandler - ユーザーが候補リストからアイテムを選択したときにトリガーされるイベント。イベントには、event.row が選択された行のデータであるデータオブジェクトが伴います。event.row.name と event.row.id は、選択した項目の名前と ID を表します。次のコードフラグメントは、selectHandler の動作をテストする方法を示しています。

KGSearchWidget(<API_KEY>, document.getElementById("myInput"), {
  "selectHandler": function(e) {
    alert("selected " + e.row.name);
  }
});

highlightHandler - ユーザーがアイテムにカーソルを合わせたときに、アイテムがハイライト表示されると、このイベントがトリガーされます。次のスニペットは、highlightHandler の動作をテストする方法を示しています。

KGSearchWidget(<API_KEY>, document.getElementById("myInput"), {
  "highlightHandler": function(e) {
    alert("highlighted " + e.row.name);
  }
});

ヘルプとフィードバック

Knowledge Graph Search API に関する質問、バグレポート、フィードバックがある場合は、ヘルプフォーラムをご利用ください。