# 電車図鑑アプリ このサンプルアプリは、東海道から東北区間で運行されている車両を表示する電車図鑑です。 ## デモ [**プロジェクトをインポート**](https://monaca.mobi/ja/directimport?pid=640814c8e78885661368f94f) **テスト環境** * Android 11.0 * iOS 14.3 ![](https://3046938759-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MfWrOnV1iKerkfShm9O%2F-MgK896Ma7lrSD6EZAay%2F-MgK8UJSqrLk-B9WFBea%2Fimage.png?alt=media\&token=4526f09f-767c-4e99-b754-7af080f884da) ## ファイル構成 ![](https://3046938759-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MfWrOnV1iKerkfShm9O%2F-MgK896Ma7lrSD6EZAay%2F-MgK8XFFyTNQpThSLd5J%2Fimage.png?alt=media\&token=aa7e7e8f-d172-4641-87d9-0b3191c0f4c3) | ファイル | 説明 | | --------------- | -------------- | | `index.html` | スタート画面のページ | | `css/style.css` | アプリのスタイルシート | | `images/*.jpg` | アプリで使用する画像ファイル | ## 必要な JS/CSS コンポーネント * `jQuery Mobile` ## HTML の解説 このサンプルでは、Monaca のネイティブ関数を使用するので、複数の HTML ページを用意しています。 `index.html` ファイル内の記述 ( HTML の \ 内 ) は、次のとおりです。 ```markup

Photos by kimuchi583

``` このサンプルでは、jQuery Mobile を使用して、一覧画面を表示します。一覧画面の各行をタップすると、 `showDetail` 関数を呼び出します。この関数で、ページの遷移を行います。また、 `a` タグの `onclick` 属性内で、 `monaca.invokeBrowser` 関数を使用しています。この関数は、ブラウザーを起動させ、指定した URL を表示します。 ## JavaScript の解説 トップ画面の JavaScript を解説します。 ```javascript function showDetail(filename, trainname) { monaca.pushPage("detail.html", {}, {filename : filename, trainname : trainname}) } ``` `showDetail` 関数は、一覧の行をタップすると呼び出されます。2 つの引数を取り、画像ファイル名 ( `filename` 変数 ) と列車名 ( `trainname` 変数 ) の変数にそれぞれ代入されます。 `monaca.pushPage` 関数を使用して、次のページを表示します。この関数では、Monaca のネイティブ関数を使用した、ページの表示処理と次ページへ渡す変数 ( 第三引数 ) の定義をしています。次ページへ渡す値は、 `monaca.queryParams` 変数を使用して取得します。