# 電車図鑑アプリ

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

## デモ

<img src="https://docs.monaca.io/images/common/import_img.png" alt="" data-size="line">  [**プロジェクトをインポート**](https://monaca.mobi/ja/directimport?pid=640814c8e78885661368f94f)

**テスト環境**

* Android 11.0
* iOS 14.3

![](/files/-MgK8UJSqrLk-B9WFBea)

## ファイル構成

![](/files/-MgK8XFFyTNQpThSLd5J)

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

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

* `jQuery Mobile`  &#x20;

## HTML の解説

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

```markup
<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 を解説します。

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

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

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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://ja.docs.monaca.io/sampleapp/samples/shinkansen.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
