PhoneGapで始めるスマホアプリ開発-iOS編　HelloWorldを表示！各種APIを試すまで

Jul 8, 2012   #iPhone  #PhoneGap  #スマートフォン 

こんにちは！

前回の記事

[PhoneGapで始めるスマホアプリ開発~iOS編(セットアップ)~][1]

こちらでPhoneGapでの開発環境を作ったので、引き続き実際にコードを書きながら色々と試してみました。

この記事ではHello Worldを出すまでまとめようと思っていたのですが、表示までなら前回のでほぼ出来ていた事にこの記事を書きながら気づきました…。

とういう事で今回は、用意されているAPIや実際にAPIを実行するために覚えておくと良さそうな事をまとめました。

Hello Worldを表示してみる

早速Hello Worldを表示してみました。

前回と同様にXcodeを起動し、index.htmlを開きます。

本当に「Hello World」だけを表示するためindex.htmlの中身を最低限にしてみました。

index.html

<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />
    <link rel="stylesheet" media="only screen and (max-device-width: 480px)" href="iphone.css" type="text/css" />
    <script type="text/javascript" charset="utf-8" src="cordova-1.8.1.js"></script>
  </head>
  <body>
    <h1>Hello World!! PhoneGap!</h1>
  </body>
</html>

静的な画面を出すだけならHTMLの編集だけで表示することが出来るようですね。

APIを呼び出すために覚えたい事

アプリケーション上でドラッグを禁止する場合

禁止する場合は、先程のindex.htmlのhead内に下記のコードを追記する事で設定する事が出来ます。

index.html

function preventBehavior(e) {
    e.preventDefault();
}
document.addEventListener("touchmove", preventBehavior, false);

PhoneGapの各種APIを使うために重要な項目

PhoneGapのAPIを使用するためには、JavaScriptコードとネイティブコードのロードが完了した時点でAPIの処理を呼び出す必要があります。

なのでAPIを使う場合は下記のメソッド内で処理を記述していきます。

恐らく開発を行なう上で下記のメソッド一番重要になるのではないかと思います。

index.html(JS部分)

// ロード完了時点に呼び出す
function onBodyLoad() {
    document.addEventListener("deviceready", onDeviceReady, false);
}

// PhoneGapライブラリ/ネイティブコードのロード後に呼び出す
function onDeviceReady() {
    // この中でAPI処理を扱う
}

index.html(html部分)

<!-- ロード完了時に呼び出すようにします -->
<body onload="onBodyLoad()">

これで準備は完了となります。

APIを試してみました

せっかくなんで、簡単に使えるAPIを試してみました。

端末情報を取得するAPI(Device API)

端末の情報を取得API、Device APIを実験に使用してみました。

参考： Device APIドキュメント

サンプルコード

<!DOCTYPE html>
<html>
  <head>
  <title></title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />
    <link rel="stylesheet" media="only screen and (max-device-width: 480px)" href="iphone.css" type="text/css" />
    <script type="text/javascript" charset="utf-8" src="cordova-1.8.1.js"></script>
    <script type="text/javascript">
    // ロード完了時点に呼び出す
    function onBodyLoad()
    {       
        document.addEventListener("deviceready", onDeviceReady, false);
    }
    // PhoneGapライブラリ/ネイティブコードのロード後に呼び出す
    function onDeviceReady()
    {
        // 端末情報を取得して表示する
        document.getElementById('deviceDesc').innerHTML =
        '<ul>' +
        '<li>device=' + device.name + '</li>' +
        '<li>platform=' + device.platform + '</li>' +
        '<li>UUID=' + device.uuid + '</li>' +
        '<li>version=' + device.version + '</li>' +
        '</ul>';
    }
    </script>
  </head>
  <!-- ロード完了時に呼び出すようにします -->
  <body onload="onBodyLoad()">
      <h1>API Test</h1>
      <p id="deviceDesc">DeviceInfo</p>
  </body>
</html>

呼び出し方もとても簡単で、すぐに使用することが出来ました。

まとめ

まだまだ、これだけでは全然アプリを作れる状態ではないのですがAPIの呼び出し方と簡単ですが記述方法も覚える事が出来たので、引き続き色々と実験しながらやっていきたいと思います。

覚える事は沢山ありますが、HTMLベースで書けるという事はだいぶ敷居も低くなりますし、何よりデバイス共通で行けるというのは本当に強いですね。

もっともっと実験しながら勉強していきます。

参考URLまとめ:

・PhoneGap API Reference