Hello World アプリ

前へ広告アプリ (AdMob)次へメモ帳アプリ

最終更新 1 年前

役に立ちましたか？

Hello World アプリ

このサンプルアプリは、基本プラグインのデモ用アプリです。デモとして、複数の端末機能を実装させています。

デモ

テスト環境

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 はスタート画面のページです。ソースコードを次に記します。

<body>
    <h1>HelloWorld!</h1>
    <a class="button--large" href="phonegap-demo.html">Start Demo</a>
</body>

上記 HTML コードの <body> タグ内の記述で、HelloWorld! と Start Demoボタンの表示を、次のように行います。

phonegap-demo.html

phonegap-demo.html を使用して、携帯端末の基本情報と次に列挙した機能を、基本プラグインデモ画面ページに表示します。

位置情報の取得: 携帯端末の現在の位置情報の取得
電話 ( 411 ): 電話番号 411 の呼び出し
バイブレーション: 携帯端末の振動
写真の撮影: 携帯端末のカメラの起動
ネットワークの確認: 携帯端末が接続を行っている、現在のネットワークタイプの確認

これらの機能を記述した JavaScript コードに関しては、後ほど説明します。

JavaScript の解説

main.js は、基本プラグインデモ画面ページで使用する一連の処理を記述した JavaScript ファイルです。このファイルでは、前述した 5 個の機能を記述しています。

位置情報の取得

携帯端末の位置情報を取得します。この関数の 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 コードを次に記します。

...
<a href="tel:411" class="btn large">Call 411</a>
...

href="tel:411" を使うためには、以下の設定が必要です config.xml。

<allow-intent href="tel:*" />

Call 411ボタンをクリックすると、電話するかを確認するメッセージを表示します。

バイブレーション

携帯端末を振動させます。この関数の JavaScript コードを次に記します。

...
var vibrate = function() {
  navigator.vibrate(500);
};
...

Vibrateボタンをクリックすると、携帯端末が振動します。

写真の撮影

携帯端末搭載のカメラを起動します。この関数の 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 コードを次に記します。

...
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ボタンをクリックすると、現在接続しているネットワークの種類を表示します。

前へ広告アプリ (AdMob)次へメモ帳アプリ

最終更新 1 年前

役に立ちましたか？

このサンプルアプリは、基本プラグインのデモ用アプリです。デモとして、複数の端末機能を実装させています。

デモ

テスト環境

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 はスタート画面のページです。ソースコードを次に記します。

<body>
    <h1>HelloWorld!</h1>
    <a class="button--large" href="phonegap-demo.html">Start Demo</a>
</body>

上記 HTML コードの <body> タグ内の記述で、HelloWorld! と Start Demoボタンの表示を、次のように行います。

phonegap-demo.html

phonegap-demo.html を使用して、携帯端末の基本情報と次に列挙した機能を、基本プラグインデモ画面ページに表示します。

位置情報の取得: 携帯端末の現在の位置情報の取得
電話 ( 411 ): 電話番号 411 の呼び出し
バイブレーション: 携帯端末の振動
写真の撮影: 携帯端末のカメラの起動
ネットワークの確認: 携帯端末が接続を行っている、現在のネットワークタイプの確認

これらの機能を記述した JavaScript コードに関しては、後ほど説明します。

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 コードを次に記します。

...
<a href="tel:411" class="btn large">Call 411</a>
...

href="tel:411" を使うためには、以下の設定が必要です config.xml。

<allow-intent href="tel:*" />

Call 411ボタンをクリックすると、電話するかを確認するメッセージを表示します。

バイブレーション

携帯端末を振動させます。この関数の JavaScript コードを次に記します。

...
var vibrate = function() {
  navigator.vibrate(500);
};
...

Vibrateボタンをクリックすると、携帯端末が振動します。

写真の撮影

携帯端末搭載のカメラを起動します。この関数の 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
  });
}
...

ネットワークの確認

携帯端末が現在使用してるネットワークの種類を確認します。この関数の 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ボタンをクリックすると、現在接続しているネットワークの種類を表示します。