井上 研一 HTML5とPhoneGapでAndroidアプリを作ろうという連載ですが、前回までで、入力したキーワードで楽天ブックスを検索し、検索結果の一覧が表示されるところまでが出来ました。
今回は、検索された書籍ごとの詳細表示ができる書籍カード画面の実装に入りたいと思います。
前回の振り返り
前回の記事で、このような検索が出来るところまで完成したのでした。
検索された書籍一覧から、書籍名をクリックすると、その書籍情報が表示される画面に遷移したいというのが、今回の目標。
書籍カード画面のUIを作る
index.htmlの#page-homeの下に、#page-detailという新しいページを作成します。
<div id="page-detail" data-role="page" 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">© 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 = '
<ul>
<li><a href="#page-detail?index='+i+'">';
item += bookdata.Body.BooksBookSearch.Items.Item[i].title;
item += '</a></li>
</ul>
';
$('#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('
' + book.subTitle + '
');
var imgTag = '<img class="detail-image" src="' + book.mediumImageUrl + '" />';
$('#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です。
できました
見た目的にはかなり適当ですが、一通りの情報は出るようになりました。
続きはまた次回ということにしたいと思います。