> For the complete documentation index, see [llms.txt](https://ja.docs.monaca.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://ja.docs.monaca.io/sampleapp/samples/hello_world.md).
# 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`ボタンをクリックすると、現在接続しているネットワークの種類を表示します。