電車図鑑アプリ

このサンプルアプリは、東海道から東北区間で運行されている車両を表示する電車図鑑です。

デモ

プロジェクトをインポート

テスト環境

  • Android 11.0
  • iOS 14.3

ファイル構成

ファイル 説明
index.html スタート画面のページ
css/style.css アプリのスタイルシート
images/*.jpg アプリで使用する画像ファイル

必要な JS/CSS コンポーネント

  • jQuery Mobile

HTML の解説

このサンプルでは、Monaca のネイティブ関数を使用するので、複数の HTML ページを用意しています。 index.html ファイル内の記述 ( HTML の <body> 内 ) は、次のとおりです。

<div data-role="content">
  <ul data-role="listview">
    <li data-role="list-divider">Tokaido Shinkansen Trains</li>
    <li><a href="#" onclick="showDetail('0kei', 'Series 0')">Series 0</a></li>
    <li><a href="#" onclick="showDetail('300kei', 'Series 300')">Series 300</a></li>
    <li><a href="#" onclick="showDetail('700kei', 'Series 700')">Series 700</a></li>
    <li><a href="#" onclick="showDetail('n700kei', 'Series N700')">Series N700</a></li>
  </ul>
  <p id="attribution">Photos by <a href="#" onclick="monaca.invokeBrowser('http://www.flickr.com/photos/kimuchi583/')">kimuchi583</a></p>
</div>

このサンプルでは、jQuery Mobile を使用して、一覧画面を表示します。一覧画面の各行をタップすると、 showDetail 関数を呼び出します。この関数で、ページの遷移を行います。また、 a タグの onclick 属性内で、 monaca.invokeBrowser 関数を使用しています。この関数は、ブラウザーを起動させ、指定した URL を表示します。

JavaScript の解説

トップ画面の JavaScript を解説します。

function showDetail(filename, trainname) {
  monaca.pushPage("detail.html", {}, {filename : filename, trainname : trainname})
}

showDetail 関数は、一覧の行をタップすると呼び出されます。2 つの引数を取り、画像ファイル名 ( filename 変数 ) と列車名 ( trainname 変数 ) の変数にそれぞれ代入されます。

monaca.pushPage 関数を使用して、次のページを表示します。この関数では、Monaca のネイティブ関数を使用した、ページの表示処理と次ページへ渡す変数 ( 第三引数 ) の定義をしています。次ページへ渡す値は、 monaca.queryParams 変数を使用して取得します。