JavaScript
RestAPI
ServiceNow

ServiceNowでiTunesのRestAPIを使用する(中編)

上編のおさらい

上編では、OutBound IntegrationsのREST Messageを作成し、iTunes Search APIを起動するテストまで実施している。今回は、上編で作成したREST MessageをUI Pageのサーバーサイドスクリプト(Processing Script)から起動して、画面から入力したキーワードの検索結果を表示する画面を作成する。

(1)早速画面の作成

Studioの「File」「Create File」で表示される画面で、Form & UIカテゴリーの「UI Page」を選択してCreateをクリック。
UI Pageの設定画面が表示されるので、Nameに「iTunesSearchPage」を入力する。

(2)HTMLの入力

(1)で作成したUI PAGEのHTMLに次の通り入力する。

html
<?xml version="1.0" encoding="utf-8" ?>
<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"></link>

        <g:ui_form>
  <div class="form-group">
    <label for="searchWord">検索ワード</label>
      <input type="text" class="form-control" name="searchWord" placeholder="検索ワード" value="${searchWord}"></input>
  </div>


            <button type="btn" class="btn btn-primary" name="search" value="search" >検索</button>

        </g:ui_form>
        <div class="container">
            <div class="table-responsive">
           <table class="table table-striped table-bordered table-hover"> 検索結果
               <tr><th>#</th><th>ジャケット</th><th>曲名</th></tr>
             <j:forEach items="${parsed.results}" var="jvar_item" indexVar="i">
                <g:evaluate jelly="true" object="true">
                    var trackName = jelly.jvar_item.trackName;
                    var jacketUrl = jelly.jvar_item.artworkUrl60;
                    var idx = jelly.i + 1 + '';
                </g:evaluate>
                 <tr>
                     <td>${idx}</td>
                     <td><img src="${jacketUrl}" /></td>
                     <td>${trackName}</td>
                 </tr>
             </j:forEach>
            </table> 
            </div>
    </div>
</j:jelly>

(3)サーバーサイドスクリプトを入力する。

(1)で作成したUI PageのProcess Scriptに次の通り入力する。
なお、ここで入力したREST Messageの起動部分のソースは1から入力したのではなく、REST Messageの設定画面の「Preview Script Usage」をクリックして表示したソースを貼り付けてから加工している。

ProcessingScript
try { 
    var r = new sn_ws.RESTMessageV2('x_58872_needit.iTunesSearch', 'Default GET');

    var searchWord = searchWord;
    gs.info('searchWord = ' + searchWord);
    r.setStringParameterNoEscape('term', searchWord);
    r.setStringParameterNoEscape('country', 'jp');
    r.setStringParameterNoEscape('lang', 'ja_jp');
    r.setStringParameterNoEscape('media', 'music');
    r.setStringParameterNoEscape('attribute', 'artistTerm');
 
    var response = r.execute();
    var responseBody = response.getBody();
    var httpStatus = response.getStatusCode();

    var parser = new global.JSON();
    var parsed = parser.decode(responseBody);


}
catch(ex) {
 var message = ex.getMessage();
}

実行用にNavigatorを作成し実行

(1)で作成したUI Pageを起動するためのNavigatorを作成し、起動して動作確認を実施する。

iTunesSearchResult2.png

ソースコードの解説

ソースコードの解説は次回の下編で実施する。

さいごに

iTunes Search APIのレスポンスの検索結果は1回の処理でデフォルトで50件までとなっている。ここに記載したサーバースクリプトではレスポンスが正常以外の場合(http status codeが200以外の場合)の処理を記載していない。またページネーション処理も実施していない。