comment 0

[HTML5でAndroidアプリ開発] 書籍カード画面を実装しよう

前回の記事から日が経ってしまいました。

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

HTML5とPhoneGapでAndroidアプリを作ろうという連載ですが、前回までで、入力したキーワードで楽天ブックスを検索し、検索結果の一覧が表示されるところまでが出来ました。
今回は、検索された書籍ごとの詳細表示ができる書籍カード画面の実装に入りたいと思います。

前回の振り返り

前回の記事で、このような検索が出来るところまで完成したのでした。

BookNavi 検索

検索された書籍一覧から、書籍名をクリックすると、その書籍情報が表示される画面に遷移したいというのが、今回の目標。

書籍カード画面のUIを作る

index.htmlの#page-homeの下に、#page-detailという新しいページを作成します。

<div data-role="page" id="page-detail" data-theme="a" data-add-back-btn="true" data-back-btn-text="戻る">
    <div data-role="header" data-position="fixed">
        <h1>書籍カード</h1>
    </div>

    <div data-role="content">
        <ul data-role="listview">
            <li data-role="list-divider">概要</li>
            <li id="detail-title" class="detail-field"></li>
            <li id="detail-itemPrice" class="detail-field"></li>
            <li id="detail-author" class="detail-field"></li>
            <li id="detail-publisherName" class="detail-field"></li>
            <li id="detail-isbn" class="detail-field"></li>
            <li data-role="list-divider">詳細</li>
            <li id="detail-itemCaption" class="detail-field"></li>
        </ul>
    </div>

    <div data-role="footer" data-position="fixed">
        <p class="copy">&copy; 2013 Artisan Edge</p>
    </div>
</div>

注目して欲しいのは、data-role=”page”のdivタグの、

data-add-back-btn="true" data-back-btn-text="戻る"

という属性です。
この属性の記述で、ヘッダに戻るボタンが表示されます。iOSでよく見るあれですね。

(今回のターゲットはAndroidなので、戻る操作はBackボタンで実装するのが正しいのではないかと思います。AndroidアプリのUIがiOS風というのはちょっと変です。ただ、この連載では、このまま進めます。)

それ以外については、検索画面(#page-home)と似たようなリストビュー構造なので、特にどうってことはないと思います。

検索画面から書籍カード画面への遷移を実装する

success: function(data) {
    bookdata = data;
    for (var i=0; i<bookdata.Body.BooksBookSearch.Items.Item.length; i++) {
        item = '<li><a href="#page-detail?index='+i+'">';
        item += bookdata.Body.BooksBookSearch.Items.Item[i].title;
        item += '</a></li>';
        $('#booklist').append(item);
    }
    $('#booklist').listview('refresh');
},

前回作成した書籍検索のロジックですが、書籍のタイトルを囲むaタグの遷移先として、#page-detail?index=0のようなURLを設定しました。indexパラメータの値はItem配列の添字となります。

今回は検索と書籍カードの2つの画面を1つのHTML(index.html)に入れているので、遷移先はIDで指定します。?以降がクエリパラメータのようになっていますが、これを後で正規表現で処理してindexの値を取得しようという魂胆です。

また、楽天ブックスAPIでの検索結果を後で使う必要があるので、bookdata変数(グローバル変数)にコピーしておきます。

書籍カード画面の表示ロジックを実装する

$(document).on('pagebeforeshow', '#page-detail', function(e, data) {
    $('.detail-field').empty();
    var dataUrl = $(this).attr('data-url');
    dataUrl.match(/index=(d*)/);
    var index = RegExp.$1;
    var book = bookdata.Body.BooksBookSearch.Items.Item[index];
    $('#detail-title').append('<h3>' + book.title + '</h3>');
    if (book.subTitle !== '') $('#detail-title').append('<p>' + book.subTitle + '</p>');
    var imgTag = '<img src="' + book.mediumImageUrl + '" class="detail-image" />';
    $('#detail-title').append(imgTag);
    $('#detail-itemPrice').append(book.itemPrice);
    $('#detail-author').append(book.author);
    $('#detail-publisherName').append(book.publisherName);
    $('#detail-isbn').append(book.isbn);
    $('#detail-itemCaption').append(book.itemCaption);
});

書籍カード画面の表示時に値を可変にしたいので、pagebeforeshowイベントで処理しています。

前画面からのパラメータの受け渡しは、$(this).attr(‘data-url’)で画面遷移先のURL(つまり書籍カード画面)がパラメータ付きで取得できるので、それを正規表現で処理して、indexパラメータの値だけを取得しました。この辺は、jQuery Mobileのプラグインでうまく解決できるものがあるようです・・・。

あとは、DOM操作でどんどん情報を埋めていけばOKです。

できました

BookNavi BookCard 01

見た目的にはかなり適当ですが、一通りの情報は出るようになりました。

続きはまた次回ということにしたいと思います。

Filed under: プログラミング

About the Author

Posted by

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

コメントを残す