Hello World アプリ
このサンプルアプリは、基本プラグインのデモ用アプリです。デモとして、複数の端末機能を実装させています。
デモ
テスト環境
Android 11.0
iOS 14.3
index.html | phonegap-demo.html |
ファイル構成
ファイル | 説明 |
| スタート画面のページ |
| 基本プラグイン デモ画面ページ |
| 基本プラグイン デモ画面ページのスタイルシート |
| 基本プラグイン デモ画面ページ上の一連の処理を行う JavaScript ファイル |
| アプリに適用する共通スタイルシート |
| アイコン用のファイル |
必要な JS/CSS コンポーネント
jQuery
HTML の解説
index.html
index.html
はスタート画面のページです。ソースコードを次に記します。
上記 HTML コードの <body>
タグ内の記述で、HelloWorld!
と Start Demo
ボタンの表示を、次のように行います。
phonegap-demo.html
phonegap-demo.html
を使用して、携帯端末の基本情報と次に列挙した機能を、基本プラグイン デモ画面ページに表示します。
位置情報の取得: 携帯端末の現在の位置情報の取得
電話 ( 411 ): 電話番号
411
の呼び出しバイブレーション: 携帯端末の振動
写真の撮影: 携帯端末のカメラの起動
ネットワークの確認: 携帯端末が接続を行っている、現在のネットワークタイプの確認
これらの機能を記述した JavaScript コードに関しては、後ほど説明します。
JavaScript の解説
main.js
は、基本プラグイン デモ画面ページで使用する一連の処理を記述した JavaScript ファイルです。このファイルでは、前述した 5 個の機能を記述しています。
位置情報の取得
携帯端末の位置情報を取得します。この関数の JavaScript コードは次のとおりです。
Get Location
ボタンをクリックすると、現在の位置情報を示したメッセージが次のように表示されます。
電話 ( 411 )
411
に電話します。この関数の JavaScript コードを次に記します。
href="tel:411"
を使うためには、以下の設定が必要です config.xml
。
Call 411
ボタンをクリックすると、電話するかを確認するメッセージを表示します。
バイブレーション
携帯端末を振動させます。この関数の JavaScript コードを次に記します。
Vibrate
ボタンをクリックすると、携帯端末が振動します。
写真の撮影
携帯端末搭載のカメラを起動します。この関数の JavaScript コードを次に記します。
Get a Picture
ボタンをクリックすると、携帯端末のカメラが起動します。写真を撮り、画面上に表示する場合には、次のスクリーンショット ( 画像 1 枚目、赤い囲み ) のようになります。表示しない場合には、メッセージが次 ( 画像 2 枚目 ) のように表示されます。
ネットワークの確認
携帯端末が現在使用してるネットワークの種類を確認します。この関数の JavaScript コードを次に記します。
Check Network
ボタンをクリックすると、現在接続しているネットワークの種類を表示します。
最終更新