아래 snippet은 Touch Events를 지원하는 iPhone/iPad에서 기존 mousedown/mouseup events를 대신하는 touchstart/touchend event 탐지 목적에 쓰일 수 있다.

if ('createTouch' in document) {
  // Touch events are supported. 
  // So we can use touch events like 'touchstart' or 'touchend' instead of mousedown/mouseup. 
}

iPad에서의 click event handling은 약간 지체되는 느낌이 있으므로, 되도록이면 대응하는 touch events를 써주는 것이 좋을 것이다.

그리고 참고로, Android에선 Touch Events를 지원하지만 위의 방법을 사용할 수 없다고 하니, 어쩔 수 없이 navigator.userAgent도 살펴봐야 한다.

function supportsTouch() {
  var android = navigator.userAgent.indexOf('Android') != -1;
  return android || !!('createTouch' in document);
}

iPhone용 웹 애플리케이션 개발을 위한 JavaScript, CSS, 이미지들이 포함된 iUI – iPhone User Interface Library가 오랜만에 갱신되었다.

iUI 0.20 갱신 내용

WordPress의 iPhone용 인터페이스 제작 기법을 참고해서 만든 이 곳 블로그의 iPhone용 인터페이스에도 iUI가 사용되고 있는데, 새로운 파일을 덮어씌우고 기본 그림 배경을 흰색으로 바꾸는 작업으로 간단하게 갱신 완료.

그나저나, iPhone을 내 손아귀에 쥐어볼 수 있을 날은 언제일지…

iPhone SDK드디어 오늘 많은 사람들이 고대하던 iPhone SDK가 공개되었다. 키노트를 보고 있자니, 여기서 개발된 iPhone 어플리케이션들은 앞으로 App Store를 통해서 공식 배포될 예정이라고 하는데, 올 6월 있을 iPhone/iPod Touch Firmware Update 2.0을 통해 정식 3rd Party 어플리케이션들의 배포 창구가 열리는 것이다.

키노트를 보고 있노라니, 다시금 Objective-C와 Cocoa Touch를 파고 싶은 뜬금없는 욕구가 마구 샘솟는 것을 막을 길이 없구나.
iPod Touch도 없거니와 초창기 iPod로 연명하고 있는 주제에… 😳

어쨌거나, iPhone SDK를 설치하고 나면, Developer/Platforms/AspenSimulator.platform/Developer/Applications/ 경로에 Aspen Simulator.app라는 어플리케이션이 자리잡고 있는데, Apple이 제공하는 공식 iPhone 시뮬레이터로, 실제 iPhone에서 웹 서핑을 하는 것처럼 여러 사이트들을 둘러볼 수가 있었다.

올 6월 쯤, 때맞춰 갱신된 iPhone/iPod Touch가 한국에도 상륙하길 기다리면서, 당분간 대리 시뮬레이션…

iPhone's Home Screen Icon for my site최근에 갱신된 iPhone 1.1.3 firmware update를 설치하면 새로 추가된 Safari의 WebClips 기능으로 iPhone의 Home Screen에 자주 가는 웹 사이트들을 등록해서 손쉽게 다시 꺼내볼 수 있게 되었다.
그런데, 이렇게 등록해고 iPhone의 Home Screen에서 보여지는 웹 사이트들의 아이콘들은 등록 당시의 웹 사이트 모습을 그대로 축소해 놓은 모양이다. 이렇게 되면 간혹 등록해 둔 다른 웹 사이트들과 비슷해져서 혼동을 일으킬 수 있는데, iPhone Dev Center 문서에 있는 Create a WebClip Bookmark Icon 단락에 가면 이 아이콘을 대체하는 방법이 소개되어 있다.

간단히, 보통 “favicon.ico”이 위치하는 웹 사이트의 root 디렉토리에 57X57 픽셀 크기의 “apple-touch-icon.png” 이름의 파일을 위치시켜 주면 된단다. 그리고, 만약 웹 사이트 전체를 위한 책갈피 아이콘 대신에 특정 웹 페이지의 책갈피 아이콘을 다르게 사용하려면, 해당 페이지의 <head> 부분에 다음과 같이 추가해줘도 됨.

<head>
  <link rel="apple-touch-icon" href="/customIcon.png" />
</head>

아이콘의 “반들거리는(glossy)” 효과는 iPhone 혹은 iPod touch가 알아서 처리해 준단다.