Freebase 추천 위젯

  1. Freebase Suggest 정보
  2. 사이트에 Freebase Suggest 추가
  3. 구성 옵션
  4. CSS 수정
  5. 이벤트 작동 방식
  6. 추가 정보 및 FAQ
  7. 예 및 레시피

Freebase Suggest 정보

Freebase Suggest는 사이트의 검색창에 Freebase 주제 자동 완성을 추가하는 jQuery 플러그인입니다. 사용자가 텍스트를 입력하기 시작하면 위젯이 Freebase.com의 수백만 가지 주제나 사람, 위치, 동물과 같은 유형의 하위 집합과 관련성이 높은 항목을 추천합니다. 주제 변경은 사용자가 Freebase ID로 고유하게 식별되는 올바른 항목을 선택하는 데 도움이 됩니다.

Freebase Suggest.png

기능

  • 교차 브라우저 - jQuery 기반, IE7 이상, FF2 이상, Safari 3 이상, Chrome에서 테스트 (최소 jquery 버전 1.4.4)
  • 교차 도메인. JSONP 덕분에 프록시 서버가 필요하지 않습니다.
  • gstatic.com에서 Google이 호스팅함
  • 무료! (표준 Freebase 약관 및 Google Developer API 약관이 적용됩니다.)

사용해 보기

Freebase 추천

Freebase Suggest를 사용하는 것으로 알려진 사이트:

Freebase Suggest를 사용해야 하는 이유

  • 자동 완성을 사용하면 더 적은 데이터를 입력하여 더 많은 데이터를 입력할 수 있습니다.
  • 재미있고 정확한 데이터 입력
  • 주제 배너의 이미지와 설명 덕분에 인지 부하가 줄어듭니다.
  • 텍스트 키워드 대신 강력한 식별자를 사용하세요. 이름 'Sting'은 모호하지만 Freebase ID /en/sting 및 /en/sting_1959는 명확하지 않습니다.
  • 동일한 항목에 중복 이름은 사용하지 않습니다. 퍼프 대디, P. 디디, 션 빗은 모두 /en/sean_combs를 나타냅니다.

웹사이트에 Freebase Suggest 추가

웹페이지에 Freebase Suggest를 추가하려면 웹사이트 소스에 다음 코드를 포함합니다. API 키를 획득하여 사용하여 Freebase Suggest의 기능을 확장할 수도 있습니다.

웹사이트에 포함할 코드

HTML 문서의 <head>에 다음을 포함하세요.

<link type="text/css" rel="stylesheet" href="https://www.gstatic.com/freebase/suggest/4_1/suggest.min.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script>
<script type="text/javascript" src="https://www.gstatic.com/freebase/suggest/4_1/suggest.min.js"></script>
<script type="text/javascript">
$(function() {
  $("#myinput").suggest({filter:'(all type:/film/director)'});
});
</script>

그런 다음 문서 <body>의 다음과 같은 입력란을 사용합니다.

<input type="text" id="myinput"/>

API 키 얻기

API 키를 가져오면 애플리케이션에서 추천 요청을 할 수 있습니다. API 키가 없으면 위젯이 제한된 테스트 용도로 작동합니다. 키를 가져오려면 시작하기 페이지의 안내를 따르세요.

키를 얻은 다음 키를 사용하여 Freebase Suggest에 전달합니다.

$(function() {
  $("#myinput").suggest({ "key" : "<your api key>"});
});

구성 옵션

다음 표에서는 Freebase Suggest의 구성 옵션을 설명합니다.

이름 유형 기본 설명
고급 불리언 true true인 경우 Freebase Suggest는 입력의 인라인 name:value 쌍을 파싱하고 추가 필터 제약 조건으로 처리합니다. 예를 들어 'bob type:artist contributed_to:"Love and Theft"'의 경우 추가 필터 제약조건인 '(all type:artist contributed_to:"Love and Theft")'이 검색에 전달됩니다. 또한 고급이 true인 경우 Freebase Suggest는 Freebase ID 및 MID를 인식하여 ID 또는 MID로 항목을 직접 검색할 수 있습니다.
일치검색 불리언 false true인 경우 Search API가 입력에서 정확히 일치하는 항목만 반환하도록 지정합니다. 이 값은 Search API에 투명하게 전달됩니다.
filter 문자열 null 필터 매개변수로 Search API에 투명하게 전달할 기본 검색 필터 제약조건을 지정합니다. 예를 들어 Freebase Suggest가 대학만 검색하도록 제한하려면 '(all type:/education/university)'를 필터로 사용합니다. 사용 가능한 검색 필터의 전체 목록은 Search API 또는 텍스트 제약 조건을 참고하세요.
키 문자열 null service_url + service_path으로 지정된 기본 Search API의 API 키를 제공합니다. API 콘솔에서 다운로드할 수 있습니다.
lang 문자열 null lang 매개변수는 지정된 모든 언어로 검색을 실행하는 쉼표로 구분된 언어 코드 목록을 허용합니다. 검색결과의 첫 번째 언어로 항목 순위가 지정된 목록의 첫 번째 언어로 결과가 표시됩니다. 현재 지원되는 언어는 en(영어), es(스페인어), fr(프랑스어), de(독일어), it(이탈리아어), pt(포르투갈어), zh(중국어), ja(일본어), ko(한국어), ru(러시아어), sv(스웨덴어), fi(핀란드), 영어가 현재 가장 많이 사용되고 기본 언어입니다. 이 값은 Search API에 투명하게 전달됩니다.
점수 매기기 문자열 null scoring 매개변수를 사용하면 최종 점수를 계산하는 데 사용되는 관련성 점수 구성요소를 제어할 수 있습니다. 이 값은 Search API에 투명하게 전달됩니다.
  • entity: FREEBASE 및 Google 관련성 점수를 모두 사용하여 누락된 Google 점수가 1.0으로 기본 설정됩니다. 이는 기본값입니다.
  • freebase: Freebase 관련성 점수만 사용합니다.
  • schema: 유형, 속성 또는 도메인과 같은 스키마 항목을 찾을 때 사용합니다. 스키마 항목의 링크 수는 다르게 계산됩니다.
맞춤법 문자열 always 유효한 값은 always, no_results, no_spelling입니다. 맞춤법을 요청하고 검색에서 맞춤법 수정을 반환하는 경우 Freebase Suggest는 추천 목록에 수정 사항을 표시합니다. 이 값은 검색 서비스에 투명하게 전달됩니다.
플라이아웃 부울, bottom true 마우스를 가져가면 플라이아웃 설명을 표시할지 여부를 결정합니다. bottom인 경우 추천 목록 하단에 플라이아웃을 표시합니다. 추천 목록 입력란이 입력란 위에 표시되면 목록 상단에 플라이아웃이 표시됩니다. true인 경우 추천 목록의 최상단에 왼쪽 또는 오른쪽이 표시됩니다.
추천_새_항목 문자열 null 추천 목록 아래에 표시될 텍스트입니다. 선택하면 fb-select-new가 트리거됩니다.
css 객체 다양한 Freebase Suggest 요소에 사용되는 기본 CSS 클래스 이름을 덮어씁니다. 자세한 내용은 CSS 수정을 참고하세요.
css_접두어 문자열 null Suggest 요소의 클래스 이름 앞에 추가될 프리픽스를 지정할 수 있습니다. 예를 들어 css_prefix이 foo-이면 컨테이너 이름은 'foo-fbs-pane' 및 'foo-fbs-flyoutpane'이 됩니다.
show_id 불리언 true 검색에서 반환된 'notable' 값을 표시합니다. 하지만 값을 사용할 수 없고 true인 경우 항목의 ID가 표시됩니다.
service_url 문자열 값: https://www.googleapis.com/freebase/v1 추천 URL의 기본 URL입니다.
서비스_경로 문자열 /search service_url + service_path = 추천 서비스 URL
flyout_service_url 문자열 null 플라이아웃 서비스의 기본 URL입니다. null이면 기본값은 service_url입니다.
비행_서비스_경로 문자열 값: /topic${id}?filter=suggest&limit=3&key=${key} flyout_service_url + flyout_service_path = 플라이아웃 서비스 URL ${id}및{key}은 마우스 오버된 항목 ID와 API 키로 각각 대체됩니다.
flyout_image_service_url[flyout_image_service_url] 문자열 null 확장화면에 있는 이미지의 기본 URL입니다. null이면 기본값은 service_url입니다.
flyout_image_service_path[flyout_image_service_path] 문자열 /image${id}?maxwidth=75&key=${key} flyout_image_service_url + flyout_image_service_path = 이미지 서비스의 URL입니다. ${id}및 {key}는 마우스 오버된 항목 ID 및 API 키로 각각 대체됩니다.
상위 이동_부모 문자열 (jQuery 선택기) null 기본적으로 플라이아웃 컨테이너는 문서 본문에 추가되며 절대로 배치됩니다. flyout_parent는 다른 상위 요소를 지정하며 플라이아웃은 절대적으로 배치되지 않습니다.
정렬 문자열 null align가 설정되어 있지 않으면 추천 목록이 문서의 위치 위치에 따라 입력 상자의 '왼쪽' 또는 '오른쪽'에 정렬됩니다. 이 동작을 재정의하고 정렬을 명시적으로 설정하려면 align를 'left' 또는 'right'로 설정합니다.
status 배열[4](문자열) ["입력하여 추천을 받으세요...", "검색 중...", 목록에서 항목 선택:", 죄송합니다. 문제가 발생했습니다. 나중에 다시 시도하세요.'] 추천 단계의 네 단계에 표시되는 상태 메시지[0] 입력 상자가 비어 있고 포커스가 있을 때 [1] 결과 검색, [2] 결과 표시, [3] 추천 서비스에서 오류가 발생하는 경우 4가지 다른 단계에 해당하는 다른 문자열 배열을 전달하여 이러한 기본 상태 메시지를 재정의할 수 있습니다.
parent 문자열 (jQuery 선택기) null 기본적으로 추천 목록은 문서 본문에 추가되며 절대적으로 배치됩니다. parent를 사용하여 다른 상위 요소를 지정하면 목록이 절대적으로 배치되지 않습니다.
animate 불리언 false true인 경우 추천 검색어 표시는 jQuery 슬라이드다운 효과를 사용하여 애니메이션됩니다.
xhr_delay 정수 (밀리초) 200 결과를 반환하기 전에 지연을 지정합니다. 이는 mql_filters가 복잡하고 Suggest API가 하드코딩된 지연보다 답변하는 데 더 많은 시간 또는 비슷한 시간이 소요되어 사용자 경험이 다소 저하되고 불필요한 로드가 발생하는 경우에 유용합니다.
Z-색인 정수 null 가장 외부 컨테이너 (fbs-pane, fbs-flyoutpane)의 Z-색인을 설정합니다. 대화상자에서 프리베이스 추천 기능을 사용할 때 추천 요소가 맨 위에 표시되도록 할 때 유용합니다.

CSS 수정하기

Freebase Suggest에서 사용되는 기본 CSS 클래스는 css 구성 옵션을 사용하여 CSS 클래스 이름의 대체 값 맵을 전달하여 재정의할 수 있습니다. 다음 표에서는 기본 CSS의 클래스를 설명합니다.

창 추천 목록의 외부 컨테이너

기본값: 'fbs-pane'
list 추천 목록

기본값: 'fbs-list'
item[상품] 추천 목록 항목

기본값: 'fbs-item'.
item_name 항목의 이름이 포함된 요소입니다.

기본값: 'fbs-item-name'
선택 현재 강조표시된/선택한 항목 기본값: 'fbs-selected'.
상태 상태 메시지가 포함된 요소입니다. 기본값: 'fbs-status'.
상품 유형 항목의 주요 유형이 포함된 요소입니다. 기본값: 'fbs-item-type'.
플라이아웃 창 플라이아웃 외부 컨테이너입니다.

기본값: 'fbs-flyoutpane'

예를 들면 다음과 같습니다.

$("#myinput").suggest({
  "css": {
    "pane": "custom-pane-class",
    "list": "custom-list-class"
  }
});

이벤트 작동 방식

Freebase Suggest는 초기화된 입력의 컨텍스트 내에서 다음 이벤트를 트리거합니다.

fb-select - 추천 목록에서 항목이 선택된 경우 이 이벤트는 데이터 객체와 함께 제공되며 여기서 data.name 및 data.id는 선택한 항목의 이름과 ID를 나타냅니다.

$("#myinput").suggest().bind("fb-select", function(e, data) { ... });

fb-select-new - suggest_new 옵션을 사용 설정하면 제안_새 항목이 선택될 때 이 이벤트가 트리거됩니다. 이벤트는 입력 값이 수반됩니다.

$("#myinput").suggest({'suggest_new': 'This is the suggest new text'}).bind("fb-select-new", function(e, val) { ... });

FAQ 및 추가 정보

Freebase Developers Google Group 또는 Issues List(‘검색/제안’ 구성요소 선택)에서 질문, 버그 신고, 의견을 환영합니다.

방금 새로운 주제를 만들었지만 추천에 표시되지 않습니다. 어떻게 된 건가요?

Freebase Suggest는 Search API를 사용하여 결과를 제공하며 거의 실시간으로 업데이트됩니다. 새 주제는 일반적으로 1분 정도 표시되지만, 부하가 높은 경우에는 더 오래 걸릴 수 있습니다.

예시 및 레시피

기본 사용법

$("#example1")
 .suggest()
 .bind("fb-select", function(e, data) {
   alert(data.name + ", " + data.id);
});

사용해 보기

새로 제안

$("#example2")
 .suggest({
   "suggest_new": "Click on me if you don't see anything in the list"
 })
 .bind("fb-select", function(e, data) {
   alert(data.name + ", " + data.id);
 })
 .bind("fb-select-new", function(e, val) {
   alert("Suggest new: " + val);
 });

사용해 보기

필터를 사용하여 추천 제한

스티븐 스필버그가 감독한 영화를 추천합니다.

$("#example5")
.suggest({
   "filter": "(all type:/film/film contributor:\"Steven Spielberg #directed_by\")"
})
.bind("fb-select", function(e, data) {
   alert(data.name + ", " + data.id);
});

사용해 보기

텍스트 상자에서 필터링

추천 입력란에 필터 제약 조건을 직접 입력하여 결과를 필터링할 수 있습니다. 예를 들어 원예 관련 도서를 검색하려면 다음 단계를 따르세요.

gardening type:/book/book
gardening type:book

실제로 모든 Search Metaschema 제약조건을 사용하여 결과를 필터링할 수 있습니다. 예를 들어 'contributed_to 비공개 라이언 영화'를 검색하는 모든 사용자를 검색하려면 다음을 시도해 보세요.

contributed_to:"Saving Private Ryan" type:/people/person

구성 옵션에 설명된 대로 lang, scoring, spell, exact는 Search API에 투명하게 전달됩니다. 인라인으로 덮어쓸 수도 있습니다. 예를 들어 Freebase Suggest가 lang:"en"로 초기화되고 프랑스어 이름도 검색하려는 경우 다음을 시도합니다.

babar lang:fr,en

추가 필터링 및 검색 제약조건은 검색 설명서를 참조하세요.