例:GitHub 検索ソースを設定する

  • リリースバージョン: Yokohama
  • 更新日 2025年01月30日
  • 所要時間:3分
  • 外部 Web サイトからデータのクエリを実行する詳細な検索ソースを設定します。

    始める前に

    必要なロール:なし

    詳細な検索ソースを作成するには、外部 Web サイトに対する REST API 経由の認証されたアクセスと AngularJS の基礎知識が必要です。

    手順

    1. プラットフォーム UI で、次の場所に移動します: サービスポータル > ポータル をクリックし、検索ソースを追加するポータルを選択します。
    2. [検索ソース] 関連リストから、[新規] をクリックします。
    3. 検索ソースの名前と ID を作成します。
      ID は一意でなければならず、スペースや特殊文字を含めることはできません。
    4. [データ ソース] タブで、[スクリプト化済みソース] チェックボックスをオンにします。
    5. データ フェッチ スクリプト フィールドにコンテンツを追加します。

      GitHub インテグレーションを設定するには:

      (function(query) {
          var results = [];
          /* Calculate your results here. */
          var url = "https://api.github.com/search/repositories?q=" + encodeURI(query);
          var ws = new GlideHTTPRequest(url);
          ws.setBasicAuth("YOUR_USERNAME_HERE", "YOUR_PASSWORD_HERE");
          var jsonOutput = ws.get();
          if (jsonOutput) {
              var response = new JSON().decode(jsonOutput.getBody());
              results = response.items;
              results.forEach(function(result) {
                  result.url = result.svn_url;
                  result.target = "_blank";
                  result.primary = result.full_name;
              });
          }
      
          return results;
      })(query);
      注:
      前の例では、ws.setBasicAuth に外部リソースのユーザー名とパスワードが必要です。詳細については、「 GlideHTTPRequest - グローバル」を参照してください。
    6. 検索ページ テンプレートを使用して、検索結果の表示方法をカスタマイズします。
      <div>
        <div class="pull-right">
          <strong>{{item.language}}</strong>
          <a ng-href="{{item.svn_url}}/stargazers" target="_blank" class="m-l-sm"><span class="fa fa-star m-r-xs"></span>{{item.stargazers_count}}</a>
          <a ng-href="{{item.svn_url}}/network" target="_blank" class="m-l-sm"><span class="fa fa-code-fork m-r-xs"></span>{{item.forks}}</a>
        </div>
        <a ng-href="{{item.svn_url}}" target="_blank" class="h4 text-primary m-b-sm block">
          <span ng-bind-html="highlight(item.full_name, data.q)"></span>
        </a>
        <p>{{item.description}}</p>
        <p>Updated <sn-time-ago timestamp="item.updated_at"></sn-time-ago> ago</p>
      </div>