comment 0

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

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

連載の第3回です。
今回は、HTML5とjQuery Mobileでユーザインタフェースを作ってみようと思います。

前回は、EclipseのPhoneGapプラグインを使って、P…

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

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

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

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

<div data-role="content">
    <ul data-role="listview" id="booklist">
    </ul>
</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 = '<li><a href="#detail">';
                    item += data.Body.BooksBookSearch.Items.Item[i].title;
                    item += '</a></li>';
                    $('#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エミュレータで実行してみましょう。

PhoneGap 04 01

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

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

Filed under: プログラミング

About the Author

Posted by

ITエンジニア/経済産業省推進資格ITコーディネータ 株式会社ビビンコ代表取締役 AI・IoTに強いITコーディネータとして活動していたところ、ビジネスコンテスト「北九州でIoT」での入選をきっかけに、株式会社ビビンコを創業。IoTソリューションの開発・導入や、画像認識モデルを活用したアプリの開発などを行う。 日本全国でセミナー・研修講師としての登壇も多数。 近著に「使ってわかった AWSのAI」、「ワトソンで体感する人工知能」。

コメントを残す