Bing Custom Search 설치 방법

공식 매뉴얼을 알기 어렵기 때문에 비망록.

마이크로소프트 공식 매뉴얼: Bing Custom Search 빠른 시작

Google Custom Search는 광고가 끌려오므로 Bing에 리플레이스 하려고. Google Custom Search와 마찬가지로 <script> 태그를 포함하면 좋을 것이라고 매뉴얼을 보았지만 알기 어렵다.
【결론】 <script> 태그를 삽입하면 된다.

다음 절차.

Azure에서 Cognitive Services 구독 키 가져오기

우선은 서브스크립션 키를 바.

Azure 포털의 Cognitive Services 화면으로 이동

추가 버튼

Bing Custom Search 선택

만들기 버튼

이름, 구독 분류, 가격 수준(무료 프레임인 경우 F0 선택), 리소스 그룹을 입력하여 생성

작성할 수 있으면 키와 엔드포인트가 되어 있다. 이 키는 구독 키입니다.

Bing Custom Search 인스턴스 만들기

이것은 공식 매뉴얼대로의 순서로 좋다.

Bing Custom Search 포털로( htps //w w. 쿠 s와 m 세아 rch. 아이/아 pぃ카치온 s)

New Instance

instance 이름 입력

사이트의 도메인 이름을 입력하고 +를 클릭하십시오.

인스턴스가 생기면 Hosted UI를 클릭해 표시 옵션적인 설정을 해 가게 된다.

①~③은 외형의 설정이므로 적당히. 단 ④에서 Search Key를 설정하지 않으면 기능하지 않는다. 여기에 구독 키를 입력합니다 (Search Key가 아니라 Subscription Key라고 쓰고 싶은 땀)

그렇다면 화면 오른쪽 상단의 게시 버튼을 클릭하십시오.

Production 페이지로 이동하시겠습니까? 아니면 이 페이지에 머물까요? 라고 듣기 때문에 Production 페이지 가기를 클릭하십시오. 다음과 같은 화면에

이 페이지에서 일일의 쿼리를 시도한다(하지 않아도 되지만)

Call을 클릭하면 JSON이 돌아올 것입니다.

Hosted UI 클릭

이 화면에 있는 코드를 자 사이트에 임베드하면 된다.

Bing Custom Search エンドポイントを呼び出す

다음 단계, 그리고 매뉴얼에는 Node.js を使用して Bing Custom Search エンドポイントを呼び出す 에 가는 버튼이 있지만, 이것도 필요한 순서일까 헤매지만, 필요하지 않다. 표시 화면을 커스터마이즈하고 싶다면 필요하다.

スクリプトコードを埋め込む

우리 Angular8이므로 스크립트 코드는 포함할 수 없습니다.
이하의 방법으로 했다.

.ts

  ngOnInit() {

    const script = document.createElement('script');
    script.async = true;
    script.type="text/javascript";
    script.src = 'https://ui.customsearch.ai/api/ux/rendering-js?customConfig=fcbxxxx3-xxxx-xxxxx-xxxxx-eexxxxa516c2&market=ja-JP&version=latest&q=';
    script.id = 'bcs_js_snippet';

    const div = document.getElementById('script');
    div.insertAdjacentElement('afterend', script);
  }

HTML

<div id="script"></div> 

우선 이상.

検索結果を表示したあと、表示をリセットする

Google Custom Search와 같이 표시 결과를 다른 페이지에 호출하는 옵션이 없기 때문에 SPA라면 다른 화면으로 날아도 표시되지 않습니다. 간단한 해결 방법은 페이지 재로드.
버튼을 붙여 클릭하면 다시 로드하도록 했다.


HTML

  <table style="border: white; border:0; width: 100%;">
    <tr>
      <td style="width: 95%">
        <div id="script"></div>  
      </td>
      <td style="width: 5%; vertical-align: top;">
        <button style="margin-left: 0.5em;" class="simple_square_btn2" (click)="reset()">
            表示<br>リセット
        </button>
      </td>
    </tr>
  </table>

CSS

.simple_square_btn2 {
    display: block;
    position: relative;
    width: 50px;
    height: 46px;
    padding: 0.3em;
    text-align: center;
    font-size: x-small;
    text-decoration: none;
    color: #1B1B1B;
    background: #fff;
    border:1px solid #1B1B1B;
}

TS

    // サーチクリア関数(リロードするだけ）
    reset() {
      location.reload();
    }

Appendix：Angularでエンドポイントを呼び出すコード

커스터마이즈하고 싶은 경우의 코드는 Angular의 경우, 어떠한 느낌일까? 테스트하지 않기 때문에 움직이지 않는다고 생각한다. 어디까지나 이미지.

TS

import { Component, OnInit } from '@angular/core';
import { Observable } from  "rxjs";
import { HttpClient,HttpHeaders,HttpParams } from '@angular/common/http';

class bing {
  name: string;
  url: string;
  displayUrl; string;
  snippet: string;
  dateLastCrawled: string;
}

@Component({
  selector: 'app-bing',
  templateUrl: './bing.component.html',
  styleUrls: ['./bing.component.css']
})

export class BingComponent implements OnInit {

  bingObservable: Observable<bing[]>;

  subscriptionKey = 'a053xxxxxxxxxxxxxxxxxxxxf4ac'; //'YOUR-SUBSCRIPTION-KEY'
  customConfigId = 'fcbxxxx3-xxxx-xxxx-9676-ee7xxxxx516c2'; //'YOUR-CUSTOM-CONFIG-ID'; 
  searchTerm = '';

  url = 'https://bij.cognitiveservices.azure.com/bingcustomsearch/v7.0/search?' + 
  'q=' + this.searchTerm + '&' + 'customconfig=' + this.customConfigId + '&' + 'mkt=ja-JP';

  options = {
    headers: new HttpHeaders().append("Ocp-Apim-Subscription-Key", this.subscriptionKey),
    params: new HttpParams().append("url", this.url)
  }

  loadBing() {
    this.bingObservable = this.http.get<bing[]>(this.url, this.options);
    console.log('◆' + this.bingObservable)
  }

  constructor() {
  }

  ngOnInit() {
  }

HTML

<ul *ngIf="bingObservable| async as results else empty">
  <li *ngFor="let result of results">
  </li>
</ul>

참조:
Angular 9/8 Http - How to Use HttpClient Module with Examples
Angularのテンプレート内で script タグを読み込む方法
how to use bing search in my angular app.?