- 2010-11-06 (土) 22:30
- HTML/CSS | JavaScrpit | PhoneGap | iPhone
■PhoneGapとは
HTML/CSS/JavaScriptで、iPhoneやAndroidアプリを作るフレームワーク。
1. PhoneGapをはじめる。
今回は、iPhoneアプリでのPhoneGapを試します。
Android編はこちらから。
公式サイトもしくは、GitHubから、PhoneGapフレームワークをダウンロードします。
DLしてきたZipファイルを解凍し、iOSフォルダにある、
「PhoneGapLibInstaller.pkg」を開いて、PhoneGapフレームワークをインストールします。
XCodeを起動して、新規プロジェクトを作成すると、
「PhoneGap」というテンプレートが追加されているので
それを、選択してプロジェクトを作成します。
「www」というフォルダに、index.htmlファイルが追加されています。
このhtmlに、記述したり、PhoneGap APIをJSから使用することで
iPhoneアプリを作成していきます。
PhoneGap – API Reference http://docs.phonegap.com/
- Accelerometer
- Camera
- Contacts
- Device
- Events
- Geolocation
- Network
- Notification
2. PhoneGap APIの加速度センサーを使ってみる。
Accelerometerを参考に、accelerometer.getCurrentAccelerationを使った加速度センサーのAPIを使ってみます。
前述のwwwフォルダの、index.htmlを記述します。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<!-- Change this if you want to allow scaling -->
<meta name="viewport" content="width=default-width; user-scalable=no" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>PhoneGapTest</title>
<!-- iPad/iPhone specific css below, add after your main css >
<link rel="stylesheet" media="only screen and (max-device-width: 1024px)" href="ipad.css" type="text/css" />
<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="phonegap.js"></script>
<script type="text/javascript" charset="utf-8">
// If you want to prevent dragging, uncomment this section
/*
function preventBehavior(e)
{
e.preventDefault();
};
document.addEventListener("touchmove", preventBehavior, false);
*/
// Wait for PhoneGap to load
function onBodyLoad() {
document.addEventListener("deviceready",onDeviceReady,false);
}
/* When this function is called, PhoneGap has been initialized and is ready to roll */
// PhoneGap is ready
//
function onDeviceReady() {
navigator.accelerometer.getCurrentAcceleration(onSuccess, onError);
}
// onSuccess: Get a snapshot of the current acceleration
//
function onSuccess(acceleration) {
alert('Acceleration X: ' + acceleration.x + '\n' +
'Acceleration Y: ' + acceleration.y + '\n' +
'Acceleration Z: ' + acceleration.z + '\n' +
'Timestamp: ' + acceleration.timestamp + '\n');
}
// onError: Failed to get the acceleration
//
function onError() {
alert('onError!');
}
</script>
</head>
<body onload="onBodyLoad()">
<!-- PhoneGap Test Code -->
<h1>PhoneGap test.</h1>
<p>getCurrentAcceleration</p>
<!-- /PhoneGap Test Code -->
</body>
</html>
通常のiPhoneアプリと同じように、XCodeから、ビルドします。
JavaScriptで実装したアラートに加速度センサーが動きました。
3. PhoneGap ドキュメント関連
■PhoneGap
http://www.phonegap.com/
■PhoneGap Roadmap
http://wiki.phonegap.com/w/page/16494820/Roadmap
■GitHub
https://github.com/phonegap
オフィシャルのプラグインやAPIの、レポジトリがあります。
■DOCS API Reference
http://docs.phonegap.com/
Comments:0
Trackbacks:0
- Trackback URL for this entry
- http://splitchin.com/tech/2010/11/06/phonegap-htmlcssjavascript%e3%81%a7%e3%80%81iphone%e3%82%84android%e3%82%a2%e3%83%97%e3%83%aa%e3%82%92%e4%bd%9c%e3%82%8b%e3%83%95%e3%83%ac%e3%83%bc%e3%83%a0%e3%83%af%e3%83%bc%e3%82%af/trackback/
- Listed below are links to weblogs that reference
- PhoneGap – HTML/CSS/JavaScriptで、iPhoneやAndroidアプリを作るフレームワーク from あらびき林檎。
