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

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

ナレッジグラフ検索ウィジェットは、サイト上の入力ボックスです。ユーザーがテキストとウィジェットの入力を開始するは、入力中に Knowledge Graph Search API を使用して関連する検索を行います。

機能

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

試してみる

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

ユーザーが入力するデータの量を減らせます。
より簡単かつ正確にデータを入力できます。
画像と説明を提供することで、ユーザーの認知負荷を軽減します。
同じエンティティに同じ名前を付けないでください（Puff Daddy, P.ディディとショーンコームズは、すべて /en/sean_combs のことを指します。

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

ナレッジグラフ検索ウィジェットをページに追加するには、以下を含めます。追加する必要があります新しい P-MAX キャンペーンを API キーウィジェットが Google Knowledge Graph 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> で、一致します。

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

API キーの取得と使用

API キーを取得すると、アプリから Suggestion リクエストを行えるようになります。なしウィジェットは機能しません。まだ API キーがない場合は記載されている手順に沿って前提条件ページ入手してください。

キーを取得したら、次のようなコードです。

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

検索ウィジェットの設定

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

config オブジェクトを渡す

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

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.` に設定されている場合は、
limit	Integer	20	プルダウンメニューに表示される結果の最大数。
タイプ	配列（文字列）	すべての型	指定した条件のいずれかに一致するエンティティのみを返すエンティティあります。このパラメータを省略すると、任意のエンティティタイプの一致が返されます。
maxDescChars	Integer	無制限	各エンティティの詳細な説明の最大文字数。 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);
  }
});

ヘルプとフィードバック

ナレッジグラフ検索 API を使用するには、ヘルプフォーラム。