# Hello World アプリ
このサンプルアプリは、基本プラグインのデモ用アプリです。デモとして、複数の端末機能を実装させています。
## デモ
[**プロジェクトをインポート**](https://monaca.mobi/ja/directimport?pid=640812d8e788850e2dda647a)
**テスト環境**
* Android 11.0
* iOS 14.3
| index.html | phonegap-demo.html |
| -------------------------------- | -------------------------------- |
|  |  |
## ファイル構成
| ファイル | 説明 |
| -------------------------- | ----------------------------------------- |
| `index.html` | スタート画面のページ |
| `phonegap-demo.html` | 基本プラグイン デモ画面ページ |
| `phonegap-demo/master.css` | 基本プラグイン デモ画面ページのスタイルシート |
| `phonegap-demo/main.js` | 基本プラグイン デモ画面ページ上の一連の処理を行う JavaScript ファイル |
| `css/style.css` | アプリに適用する共通スタイルシート |
| `img/icon/*.png` | アイコン用のファイル |
## 必要な JS/CSS コンポーネント
* `jQuery`
## HTML の解説
### index.html
`index.html` はスタート画面のページです。ソースコードを次に記します。
```markup
HelloWorld!
Start Demo
```
上記 HTML コードの `` タグ内の記述で、`HelloWorld!` と `Start Demo`ボタンの表示を、次のように行います。
### phonegap-demo.html
`phonegap-demo.html` を使用して、携帯端末の基本情報と次に列挙した機能を、基本プラグイン デモ画面ページに表示します。
* *位置情報の取得*: 携帯端末の現在の位置情報の取得
* *電話 ( 411 )*: 電話番号 `411` の呼び出し
* *バイブレーション*: 携帯端末の振動
* *写真の撮影*: 携帯端末のカメラの起動
* *ネットワークの確認*: 携帯端末が接続を行っている、現在のネットワークタイプの確認
これらの機能を記述した JavaScript コードに関しては、後ほど説明します。
## JavaScript の解説
`main.js` は、基本プラグイン デモ画面ページで使用する一連の処理を記述した JavaScript ファイルです。このファイルでは、前述した 5 個の機能を記述しています。
### 位置情報の取得
携帯端末の位置情報を取得します。この関数の JavaScript コードは次のとおりです。
```javascript
...
var getLocation = function() {
var suc = function(p) {
alert(p.coords.latitude + " " + p.coords.longitude);
};
var locFail = function() {
};
navigator.geolocation.getCurrentPosition(suc, locFail);
};
...
```
`Get Location`ボタンをクリックすると、現在の位置情報を示したメッセージが次のように表示されます。
### 電話 ( 411 )
`411` に電話します。この関数の JavaScript コードを次に記します。
```markup
...
Call 411
...
```
{% hint style="info" %}
`href="tel:411"` を使うためには、以下の設定が必要です `config.xml`。
```markup
```
{% endhint %}
`Call 411`ボタンをクリックすると、電話するかを確認するメッセージを表示します。
### バイブレーション
携帯端末を振動させます。この関数の JavaScript コードを次に記します。
```javascript
...
var vibrate = function() {
navigator.vibrate(500);
};
...
```
`Vibrate`ボタンをクリックすると、携帯端末が振動します。
### 写真の撮影
携帯端末搭載のカメラを起動します。この関数の JavaScript コードを次に記します。
```javascript
...
function dump_pic(data) {
var viewport = document.getElementById('viewport');
console.log(data);
viewport.style.display = "";
viewport.style.position = "absolute";
viewport.style.top = "10px";
viewport.style.left = "10px";
document.getElementById("test_img").src = data;
}
function fail(msg) {
alert(msg);
}
function show_pic() {
navigator.camera.getPicture(dump_pic, fail, {
quality : 50
});
}
...
```
`Get a Picture`ボタンをクリックすると、携帯端末のカメラが起動します。写真を撮り、画面上に表示する場合には、次のスクリーンショット ( 画像 1 枚目、赤い囲み ) のようになります。表示しない場合には、メッセージが次 ( 画像 2 枚目 ) のように表示されます。
### ネットワークの確認
携帯端末が現在使用してるネットワークの種類を確認します。この関数の JavaScript コードを次に記します。
```javascript
...
function check_network() {
var networkState = navigator.network.connection.type;
var states = {};
states[Connection.UNKNOWN] = 'Unknown connection';
states[Connection.ETHERNET] = 'Ethernet connection';
states[Connection.WIFI] = 'WiFi connection';
states[Connection.CELL_2G] = 'Cell 2G connection';
states[Connection.CELL_3G] = 'Cell 3G connection';
states[Connection.CELL_4G] = 'Cell 4G connection';
states[Connection.NONE] = 'No network connection';
confirm('Connection type:\n ' + states[networkState]);
}
...
```
`Check Network`ボタンをクリックすると、現在接続しているネットワークの種類を表示します。
---
# 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/hello_world.md?ask=
```
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.