[HTML5でAndroidアプリ開発] JavaScriptで検索ロジックを実装しよう

連載の第4回目になりました。
前回はユーザインタフェースを作ったのですが、今回は検索ロジックを実装します。ついに、ちゃんとしたアプリになりますよ。

HTML5を使ったAndroidアプリの開発では、ロジックはJavaScriptで書きます。サーバとの通信はAjaxで行います。完全にWebアプリと同じですね。

ユーザインタフェースの振り返り

前回の記事でユーザインタフェースのHTML5コードを掲載しましたが、重要な部分を振り返っておきます。

<div data-role="header">
<h1>BookNavi</h1>
<form id="searchForm"><input id="keyword" name="keyword" type="search" value="" placeholder="検索キーワード" /></form></div>
<div data-role="content"></div>

実装したいロジックは、検索キーワードを入力してformをsubmitすると、booklistというidのulリストに検索結果を表示すればよいわけです。

検索ロジックの実装

検索ロジックの実装はJavaScriptで行います。AjaxやJSONも使いますのでjQueryを使いたいと思います。
jQueryを使ってイベント処理（ここではformのsubmit）を実装するには、$(document).ready()を使うことが一般的ですが、jQuery Mobileを使う際は、$(document).on(‘pageinit’)を使います。

$(document).on('pageinit', '#page-home', function(event){
  $('#searchForm').on('submit', function() {
    var keyword = $('#keyword').val();
    if (keyword == '') {
      alert('検索キーワードを入力してください');
      return false;
    }

    url = 'http://api.rakuten.co.jp/rws/3.0/json';
    url += '?developerId=your_developer_id';
    url += '&version=2011-12-01';
    url += '&operation=BooksBookSearch';
    url += '&title=' + encodeURIComponent(keyword);
    url += '&sort=' + encodeURIComponent('-releaseDate');
    url += '&outOfStockFlag=1';

    $('#booklist').empty().listview('refresh');

    $.ajax({
      type: 'GET',
      url: url,
      dataType: 'json',
      success: function(data) {
        for (var i=0; i<data.Body.BooksBookSearch.Items.Item.length; i++) {
          item = '
<ul>
  <li><a href="#detail">';
    item += data.Body.BooksBookSearch.Items.Item[i].title;
    item += '</a>
  </li>
</ul>
          ';
          $('#booklist').append(item);
        }
        $('#booklist').listview('refresh');
      },
      error: function(xhr, status, thrown) {
        alert(status);
      }
    });

    return false;
  });
});

このアプリでは書籍の検索を楽天ブックスのAPIを使っています。結果はJSONで戻ってきますので、1行ずつ処理してbooklistというidのulリストに、liタグを内部挿入しています。

注目して欲しいのは、listview(‘refresh’)というコードです。jQuery Mobileで表示したい部分をDOMで操作した場合、refreshが必要です。

Androidエミュレータで実行してみましょう。

検索結果が表示されていますね。これですっかりアプリといっても過言ではない状態になりました。（まだ過言か・・・）

次回は、検索結果をクリックすると書籍の詳細を表示するようにしていきましょう。