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

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です。

できました

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

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

この記事を書いた人

井上 研一

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