Home > Tags > iPhone

iPhone

iPhone タッチイベント

2011-04-11 (月)
HTML/CSS | JavaScrpit | iPhone
HTML5 | iPhone | JavaScript

スマートフォンのためのHTML5アプリケーション開発ガイド―iPhone/iPad/Android対応

touchevent画像

サンプルURL

Apple資料

Safari Web Content Guide – Handling Events

onTouchStart
onTouchMove
onTouchEnd
onTouchCancel

※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
HTML5 | iPhone | JavaScript | PhoneGap | Webkit

■PhoneGapとは
HTML/CSS/JavaScriptで、iPhoneやAndroidアプリを作るフレームワーク。

1. PhoneGapをはじめる。

今回は、iPhoneアプリでのPhoneGapを試します。
Android編はこちらから。

公式サイトもしくは、GitHubから、PhoneGapフレームワークをダウンロードします。

PhoneGap

DLしてきたZipファイルを解凍し、iOSフォルダにある、
「PhoneGapLibInstaller.pkg」を開いて、PhoneGapフレームワークをインストールします。

PhoneGapTemplate

XCodeを起動して、新規プロジェクトを作成すると、
「PhoneGap」というテンプレートが追加されているので
それを、選択してプロジェクトを作成します。

PhoneGapIndex

「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から、ビルドします。

phoneGapAPIAccelr