第1回 Apache Cordovaでできること：連載：Visual Studio＋Apache Cordovaで始めるiOS／Androidアプリ開発（6/6 ページ）

» 2016年03月15日 05時00分公開

[山本康彦，BluewaterSoft／Microsoft MVP for Windows Development]

index.jsファイルにコードを追加する

　それでは、「DEVICE READY」という文字列を現在時刻に書き変えるコードを追加しよう。

　index.jsファイルで文字列を変更している部分を先ほど確認したが、その後ろに次のコードを記述する。1秒ごとのタイマー割り込みをセットし、割り込みが発生したときに現在時刻を取得して表示するというコードだ。

function onDeviceReady() {
……省略……
var element = document.getElementById("deviceready");
element.innerHTML = 'Device Ready';
element.className += ' ready';

// 以下のコードを追加する

// 1秒ごとにshowNowTime関数が呼び出されるようにタイマーをセット
window.setInterval(showNowTime, 1000);

function showNowTime() {
    // 現在時刻
    var now = new Date();

    // 時分秒に分割し、それぞれ2桁の文字列（先頭ゼロ埋め）にする
    var hh = ('0' + now.getHours()).toString().slice(-2);
    var mm = ('0' + now.getMinutes()).toString().slice(-2);
    var ss = ('0' + now.getSeconds()).toString().slice(-2);

    // HH:mm:ssという書式で現在時刻を表示する
    element.innerHTML = hh + ":" + mm + ":" + ss;
}
};

index.jsファイルに現在時刻を表示するコードを追加した（JavaScript）
太字の部分を追加した。
追加したコードの意味は、コメントを見ていただければ大体分かるだろう。関数定義（ここではfunction宣言）の中にさらに関数定義があるというのは、JavaScriptに慣れていないとちょっと奇異に思われるかもしれないが、JavaScriptでは関数もオブジェクトであり、その定義を入れ子にしても構わないのである。むしろ、入れ子にすることで関数のスコープを限定できる（この例では、onDeviceReady関数の外からはshowNowTime関数は見えない）。

実行してみよう

　これでデジタル時計の完成だ。いろいろなエミュレータでデバッグ実行してみて、動作を確かめてほしい。AndroidとiOSのエミュレータで実行している様子を掲載しておく（次の画像）。

　この後は、時刻表示の文字を大きくしたり、画像や背景色を変えたりして、オリジナルなデジタル時計に挑戦してみてほしい。

デバッグ実行している例
上：アプリ中央部分。緑色の部分がデジタル時計になった！
中：グーグル製のAndroidエミュレータ（Nexus Galaxy）。
下： Rippleエミュレータ（iPad 3）。
スマートフォンとタブレットでは、ずいぶんと画面の広さが違う。また、このiPadの例のように、横置きで使われることも想定しないといけない。レスポンシブWebデザインの考え方とテクニックが必要になるのだ。