このページは Cloud Translation API によって翻訳されました。

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

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

機能

クロスブラウザ - 十分にテストされたクロスブラウザ Closure で記述され、純粋な JavaScript にコンパイルされます。
クロスドメイン。JSONP のおかげでプロキシサーバーは必要ありません。
Google サーバーでホストされます。
自由だ！（標準の Google API 利用規約が適用されます）。

試してみる

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

入力データを少なくして入力できるようにします。
データを簡単かつ正確に入力できます。
画像と説明を提供して、ユーザーの認知負荷を軽減します。
同じエンティティに対して重複した名前は避けてください: Puff Daddy, P。ディディ、ショーンコームは全部 /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 キーを取得すると、アプリケーションから Suggest リクエストを行うことができます。API キーがないと、ウィジェットは機能しません。API キーをまだ取得していない場合は、前提条件ページの手順に沿って取得してください。

キーを取得したら、次のようなコードを使用してナレッジグラフ検索ウィジェットに渡します。

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);

構成オプション

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

名前	種類	デフォルト	説明
言語	配列(文字列)	英語	指定されたすべての言語で検索を行う言語コード（ISO 639-1 で定義）のリスト。結果は最初に表示される言語でランク付けされ、エンティティの名前を持つリストの最初の言語で表示されます。英語が最も多く使われています。この値は透過的に Search 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.` に設定されている場合
上限	Integer	20	プルダウンメニューに表示される結果の最大数。
types	配列(文字列)	すべてのタイプ	指定されたエンティティタイプのいずれかに一致するエンティティのみを返します。このパラメータを省略すると、任意のエンティティタイプに一致します。
maxDescChars	Integer	無制限	各エンティティの詳細な説明に含めることができる最大文字数。maxDescChars より長いコンテンツは切り捨てられます。
selectHandler	職務	null	行が選択されたときに呼び出すコールバック関数。コールバック関数の引数はイベントで、選択された行に関する情報を含む `row` 属性が含まれます。このコールバックの使用例については、イベントハンドラの使用をご覧ください。
highlightHandler	職務	null	ユーザーが行にカーソルを合わせたときに呼び出されるコールバック関数。コールバック関数の引数はイベントで、選択された行に関する情報を含む `row` 属性が含まれます。多くのデバイス（タッチスクリーンのモバイルハードウェアなど）では、このイベントを生成できません。このコールバックの使用例については、イベントハンドラの使用をご覧ください。

イベントハンドラの実装

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

selectHandler - ユーザーが候補リストからアイテムを選択すると、このイベントがトリガーされます。このイベントには、選択した行のデータであるデータオブジェクトが付属しています。event.rowevent.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 に関する質問、バグレポート、フィードバックについては、ヘルプフォーラムをご利用ください。