상편의 술집

상편 에서는 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를 작성하고, 기동하여 동작 확인을 실시한다.

소스 코드 해설

소스 코드의 해설은 다음 하편에서 실시한다.

사이고에게

iTunes Search API의 응답 검색 결과는 1회의 처리로 디폴트로 50건까지이다. 여기에 기재한 서버 스크립트에서는 응답이 정상 이외의 경우(http status code가 200 이외의 경우)의 처리를 기재하고 있지 않다. 또한 페이지 네이션 처리도 수행되지 않았습니다.