Home > Tags > iPhone
iPhone
iPhone タッチイベント
- 2011-04-11 (月)
- HTML/CSS | JavaScrpit | iPhone
スマートフォンのためのHTML5アプリケーション開発ガイド―iPhone/iPad/Android対応

Apple資料
Safari Web Content Guide – Handling Events
- onTouchStart/li>
- onTouchMove/li>
- onTouchEnd/li>
- onTouchCancel/li>
※onClickのようなイベントの使い方。iPhoneでは、onClickよりレスポンスが良いらしい。
タッチ数の取得
- event.touches.length
タッチ座標(x, y)の取得
- event.touches[i].pageX
- event.touches[i].pageY
※iで、各タッチの座標を格納。
- Comments: 0
- Trackbacks: 0
PhoneGap – HTML/CSS/JavaScriptで、iPhoneやAndroidアプリを作るフレームワーク
- 2010-11-06 (土)
- 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
iPhoneアプリ 世界時計 “Palm+Piece”
- 2010-08-10 (火)
- Object-C | iPhone | iPhone SDK4
iPhoneアプリ 世界時計 ”Plam+Piece”をリリースしました!
“Palm+Piece”は、iPhoneの回転方向に合わせて、
「東京」「上海」「ロンドン」「ニューヨーク」と、
時刻とデザインが変化する、世界時計です。
また、画面をタップすると、国花が舞い散ります。
- Comments: 0
- Trackbacks: 0
Home > Tags > iPhone
