Google API 第27回

投稿者: | 2016年4月7日

今回は、前回の続きでGoogle Knowledge Graph APIについて紹介します。

まずGoogle Knowledge Graph Search APIとは
Google Knowledge Graphの情報を検索できるようAPI化したものです。
検索して得られる情報は人物や場所、物事などの現実世界のエンティティ(実体)です。

ここから「Google Knowledge Graphのエンティティ」、「Google Knowledge Graph Search APIの使用方法」
「Google Knowledge Graphの予測検索ボックス」の順に説明します。

■Google Knowledge Graphのエンティティ
Google Knowledge Graphには人物、場所などの現実世界のエンティティが格納されており、
構造化データマークアップが形成されています。

現在Googleが提供しているエンティティのタイプは下記の通りです。
前回説明した「構造化データマークアップ」のタイプに当たります。

Google Knowledge Graph Search APIでは、このエンティティのタイプを使用して
人物や場所などを限定して検索することができます。

・本(Book)
・本のシリーズ(BookSeries)
・教育機関(EducationalOrganization)
・イベント(Event)
・行政機関(GovernmentOrganization)
・地域のお店やサービス(LocalBusiness)
・映画(Movie)
・映画のシリーズ(MovieSeries)
・音楽アルバム(MusicAlbum)
・音楽グループ(MusicGroup)
・音楽トラック(MusicRecording)
・組織(Organization)
・雑誌(Periodical)
・人物(Person)
・場所(Place)
・スポーツチーム(SportsTeam)
・テレビ番組のシリーズ(TVSeries)
・テレビ番組のエピソード(TVEpisode)
・テレビゲーム(VideoGame)
・テレビゲームのシリーズ(VideoGameSeries)
・ウェブサイト(WebSite)

■Google Knowledge Graph Search APIの使用方法
Google Knowledge Graph Search APIを使用するにはAPIを有効にし、API KEYを作成する必要があります。

ここでは「Google Developers Consoleの設定」「Google Knowledge Graph Search APIの実行」の順に
使用方法を説明します。

1.Google Developers Consoleの設定
参考サイトのGoogle Developers Consoleにアクセスし適当なプロジェクトを作成します。
そして、下記の操作を順に行います。

・Google Knowledge Graph Search APIを有効にする
左メニューの[API Manager]から[概要]を選択します。
概要画面に移動したら、Google Knowledge Graph Search APIを検索し有効にします。

・APIキーを作成する
左メニューの[API Manager]から[認証情報]を選択します。
認証情報画面に移動したら、[新しい認証情報]のセレクトボックスから
[APIキー]を選択します。

設定値
新しいキーの作成:ブラウザキー
名前:Google Knowledge Graph

[作成]を選択して作成完了です。

2.Google Knowledge Graph Search APIの実行
Google Knowledge Graph Search APIを有効にし、API KEYを作成し終わったら
APIで検索するためのコードを作成します。

まずはjQuryを読み込ませます。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

次にリクエストするパラメータを作成します。
keyには取得したAPI KEYを指定します。※必須
queryには検索した文字列を設定します。※必須
languagesには検索する言語を指定します。デフォルトは英語です。
※言語はISO 639-1で定義されたものを指定します。
その他のパラメータにはtypes、indent、prefix、limitがあります。
typesにはエンティティを指定します。
indentにはfalseまたはtrueを指定します。
trueにすると検索結果のJSONにインデントがつきます。
prefixには接頭辞を指定します。
接頭辞を指定すると実物名などがマッチした検索結果を取得できます。
limitには検索結果の個数を指定します。

    var params = {
        'key' : 'API_KEY',
        'query': 'ラーメン',
        'languages': 'ja',
    };

最後にHTTP通信で検索結果を取得します。

    var url = 'https://kgsearch.googleapis.com/v1/entities:search';
    $.getJSON(url + '?callback=?', params, function(res) {
        console.log(res);
    });

返り値は下記のようなJSONで取得できます。
検索結果であるitemListElement内のパラメータの説明をします。
@typeは検索結果のタイプを表します。
resultには一つの検索結果の詳細なパラメータが格納されています。
result.idはエンティティを判別するためのidです。
result.nameは検索したエンティティの名前です。
result.@typeはエンティティのタイプです。
result.descriptionはエンティティの説明です。
result.image.contentUrlはエンティティの画像のURLです。
result.image.urlはエンティティの画像が載っているURLです。
result.image.licenseはエンティティの画像のライセンスが載っているURLです。
result.detailedDescription.articleBodyはエンティティの詳細説明です。
result.detailedDescription.urlはエンティティの詳細説明が載っているURLです。
result.detailedDescription.licenseはエンティティの詳細説明のライセンスが載っているURLです。
result.resultScoreは検索結果のエンティティがどのくらいマッチしているかの指標です。
数値が大きいほどマッチしていることになります。
また検索結果はresultScoreの数値が大きい方から順に並びます。

{
  "@context": {
    "@vocab": "http://schema.org/",
    "goog": "http://schema.googleapis.com/",
    "EntitySearchResult": "goog:EntitySearchResult",
    "detailedDescription": "goog:detailedDescription",
    "resultScore": "goog:resultScore",
    "kg": "http://g.co/kg"
  },
  "@type": "ItemList",
  "itemListElement": [
    {
      "@type": "EntitySearchResult",
      "result": {
        "@id": "kg:/m/09gms",
        "name": "ラーメン",
        "@type": [
          "Thing"
        ],
        "description": "料理",
        "image": {
          "contentUrl": "http://t3.gstatic.com/images?q=tbn:ANd9GcRsLDve1fNEq8FinFkX7ZmK_K8PR9zZ5JJE0mnQfo4eujpCv-21",
          "url": "https://en.wikipedia.org/wiki/Ramen",
          "license": "http://www.gnu.org/copyleft/fdl.html"
        },
        "detailedDescription": {
          "articleBody": "ラーメンとは、中華麺とスープ、様々な具を組み合わせた麺料理。出汁、タレ、香味油の3要素から成るスープ料理としての側面も大きい。漢字表記は拉麺、老麺または柳麺。別名は中華そばおよび支那そば・南京そばなどである。\n日本では、明治時代に開国された港に出現した中国人街に中華料理店が開店し、大正時代頃から各地に広まっていった。日本風に仕立てられ独自の発達をし、現在ではカレーライスと並んで「日本人の国民食」と呼ばれるほど人気の食べ物となり、中華人民共和国や中華民国では日式拉麺または日本拉麺と呼ばれている。英語表記は、オックスフォード英語辞典によるとRamen、Chinese noodles。",
          "url": "http://ja.wikipedia.org/wiki/%E3%83%A9%E3%83%BC%E3%83%A1%E3%83%B3",
          "license": "https://en.wikipedia.org/wiki/Wikipedia:Text_of_Creative_Commons_Attribution-ShareAlike_3.0_Unported_License"
        }
      },
      "resultScore": 637.106628
    },
....
  ]
}

検索結果は指定した言語やエンティティのタイプによって異なります。
例えばラーメンを日本語・英語・フランス語で検索した場合、
検索結果は日本語では20件・英語では7件・フランス語では4件で全て内容が異なります。

■Google Knowledge Graphの予測検索ボックス
Google Knowledge Graphではウェブサイトに
Knowledge Graphの予測検索ボックスを組み込む機能を提供しています。
組み込むことで人物や物事の名前を簡単に調べることができます。

組み込み方の説明をします。
まずKnowledge Graphの予測検索ボックス用のCSSとスクリプトを読み込ませます。

<link type="text/css" rel="stylesheet" href="https://www.gstatic.com/knowledge/kgsearch/widget/1.0/widget.min.css">
<script type="text/javascript" src="https://www.gstatic.com/knowledge/kgsearch/widget/1.0/widget.min.js"></script>

次にKGSearchWidgetメソッドを使用して組み込みを行います。
第1引数にはAPI_KEYを設定します。
API_KEYは「Google Knowledge Graph Search APIの使い方」で取得したものです。
第2引数にはテキストボックスのオブジェクトを設定します。
第3引数には予測検索に関わるパラメータを設定します。
パラメータにはlanguages、limit、types、maxDescChars、selectHandler、highlightHandlerがあります。
languagesは検索と検索結果に関わる言語です。※言語はISO 639-1で定義されたものを指定します。
指定した言語と英語で検索が行われ、検索結果が表示されます。デフォルトは英語です。
limitには検索結果を表示する数を指定します。デフォルトは20です。
typesにはGoogleが提供しているエンティティを指定します。
指定したエンティティと一致する検索が行われます。
maxDescCharsには検索結果で表示するエンティティの説明の文字数を指定します。
デフォルトは無限です。
selectHandlerは検索結果が選択された時に呼び出されるコールバック関数です。
highlightHandlerは検索結果の上にカーソルを置いた時に呼び出されるコールバック関数です。

<script type="text/javascript">
function test () {
var key = 'API_KEY';
    var input = document.getElementById('kg')
    var cfg = {
        'languages'       : 'ja',
        'limit'           : 10,
        'types'           : 'Person',
        'maxDescChars'    : 100,
        'selectHandler'   : function(e) {
            console.log(e);
            console.log(row.name);
        },
        'highlightHandler': function(e) {
            console.log(e);
        }
    };
    KGSearchWidget(key , input, cfg);
}
window.onload = test;
</script>
<body>
    <input type="textbox" id="kg" placeholder="入力してください" />
</body>

予測検索ボックスを作成したら、イチローを検索してみます。
google_api27-1
イチローが検索されて、イチローの情報が表示されているのがわかります。

またKnowledge Graphの予測検索ボックスはGoogle検索と組み合わせて使用することができます。
組み合わせることによって予測検索したものをすぐに検索をすることができます。

組み合わせる方法はbody部分を下記のように変更するだけです。


予測検索ボックスの横に検索ボタンがあり、すぐにGoogle検索することができます。
google_api27-2

以上がGoogle Knowledge Graph Search APIの説明です。

Google Knowledge Graph Search APIを使用すると、人物や場所、物などを予測検索することができます。
予測検索した結果はJSONで取得できるので様々な形に加工することができます。

またGoogle Knowledgeの予測検索ボックスはGoogle検索と組み合わせる以外にも
Yahoo検索やBing検索など様々な検索エンジンと合わせて使用することができ便利です。

APIの機能によって工夫次第で様々な事ができます。
ページ内のキーワードをハイライトさせておき、
マウスが上に来た時そのキーワードを予測検索して注釈のようなポップアップを出すこともできます。
興味がありましたら是非使ってみてください。

<参考サイト>
Knowledge Graph Search API
エンティティ(人)
ISO_639-1コード一覧

<付録>
・Google Knowledge Graph Search APIを用いた簡単なサンプル
使用する際はAPI_KEYを自身で作成したAPI KEYに置き換えてください。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
var params = {
    'key' : 'API_KEY',
    'query': 'ラーメン',
    'languages': 'ja',
};
var url = 'https://kgsearch.googleapis.com/v1/entities:search';
$.getJSON(url + '?callback=?', params, function(res) {
    console.log(res);
});
</script>
</head>
<body>
</body>
</html>

・予測検索ボックスを組み込む簡単なサンプル
使用する際はAPI_KEYを自身で作成したAPI KEYに置き換えてください。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link type="text/css" rel="stylesheet" href="https://www.gstatic.com/knowledge/kgsearch/widget/1.0/widget.min.css">
<script type="text/javascript" src="https://www.gstatic.com/knowledge/kgsearch/widget/1.0/widget.min.js"></script>
<script type="text/javascript">
function test () {
var key = "API_KEY";
    var input = document.getElementById('kg')
    var cfg = {
        'languages'       : 'ja',
        'limit'           : 10,
        'types'           : 'Person',
        'maxDescChars'    : 100,
        'selectHandler'   : function(e) {
            console.log(e.row.name);
        },
        'highlightHandler': function(e) {
            console.log(e.row.name);
        }
    };
    KGSearchWidget(key , input, cfg);
}
window.onload = test;
</script>
</head>
<body>
    <input type="text" id="kg" placeholder="入力してください" />
</form>
</body>
</html>