Web開発参考サイト
2009-08-09 (日) 20:19:00 (909d)

lifebuoy.png iPhone/iPod touch用のWebサイト開発時になる参考サイト情報のまとめ

参考サイト 　

NUブログ：iPhoneのsafariについて 　

  • PCSafariとの違い、iPhoneのJavaScriptでできること（コンソールデバッグ、javascript database、マルチタッチ[ピンチ・回転]）など。サンプル付で詳細に解説してくれています。わかりやすい。

iPhone向けサイトのUIを考える会 　

  • SafariのClient-side database storageを使ってのiPhoneローカルにデータベースを作るサンプルを公開されています。

flashcast：フリーで働くITエンジニア集団のブログ: iPhone 　

  • ipod touch用のWeb Applicationを作成してみる

マイコミジャーナル：iPhoneタッチ機能、ジェスチャ機能のプログラミング方法 - SitePen 　

  • タッチ関係のイベントの追加。
    touchstart指を新しくスクリーンに触れた場合に生成されるイベント
    touchendスクリーンから指を離した場合に生成されるイベント
    touchmove指をスクリーンに触れている間にスライドさせた場合に生成されるイベント
    touchcancelイベントがシステムによってキャンセルされた場合に生成されるイベント (システムによる介入時に使われるとみられる)
  • それぞれのイベントは、次のタッチしているポインティング情報のリストを持つ。リストにはclientX、clientY、screenX、screenY、pageX、pageY、target、identifierなどの属性が含められている。
    touchesスクリーンに触れている指ごとの情報
    targetTouchestouchesと似た情報を保持しているものの同じノード内で開始されたタッチ情報に限定
    changedTouchesそのときイベントが発生した指のタッチ情報
  • Drag and Drop with the Touch API 
    node.ontouchmove = function(e){
  if(e.touches.length == 1){ // Only deal with one finger
    var touch = e.touches[0]; // Get the information for finger #1
    var node = touch.target; // Find the node the drag started from
    node.style.position = "absolute";
    node.style.left = touch.pageX + "px";
    node.style.top = touch.pageY + "px";
  }
}
  • Resizing and Rotating with the Gestures API 
    var width = 100, height = 200, rotation = ;

node.ongesturechange = function(e){
  var node = e.target;
  // scale and rotation are relative values,
  // so we wait to change our variables until the gesture ends
  node.style.width = (width * e.scale) + "px";
  node.style.height = (height * e.scale) + "px";
  node.style.webkitTransform = "rotate(" + ((rotation + e.rotation) % 360) + "deg)";
}

node.ongestureend = function(e){
  // Update the values for the next time a gesture happens
  width *= e.scale;
  height *= e.scale;
  rotation = (rotation + e.rotation) % 360;
}

IBM developerWorks Japan：「Eclipse で開発する iPhone の Web アプリケーション」 　

All About > プログラミング > JavaScript > iPhone 3G用のWebページを作る1 　

  • AllAbout?高橋登史朗さんによる解説。Viewportやinitial-scale指定による画面ピクセルなどについて細かく実例で解説してくれています。

ke-tai.org > 90秒で理解するiPhone JavaScript（マルチタッチ編） 　

  • マルチタッチの座標を取得する際の抑えるべき4つのポイントなど。
    • Safari自体のスクロールや拡大・縮小は動作しないようにした方が無難
    • タッチのイベントは、リスナーまたは「onTouchXXX」から取得
    • タッチ数は「event.touches.length」で取得
    • 座標は「event.touches[i].pageX (or pageY)」で取得

ke-tai.org > 90秒で理解するiPhone JavaScript（ジェスチャー編） 　

  • マルチタッチ編に続いてのジェスチャー編です。実例ソース付。以下、ke-tai.org様より。
  • ジェスチャーのイベントには次の3つがあるようです。それぞれ、ジェスチャー開始時、ジェスチャー中、ジェスチャー終了時にイベントが発生します。使い方は、touchXXXのときと同じようにイベントリスナーに登録するか、「on Click」のような感じで「onGestureStart?」属性を追加します。
    • gesturestart
    • gesturechange
    • gestureend 
      function init() {
	document.addEventListener("touchmove", touchHandler, false);
	document.addEventListener("gesturechange", gestureHandler, false);
	document.addEventListener("gestureend", saveStyle, false);
}
function touchHandler(event) {
	//
}
  • 拡大縮小・回転をさせるのに、押さえておくべきポイントは2点だけです。
    • 「event.scale」で、拡大・縮小用の倍率を取得
    • 「event.rotation」で、回転の角度を取得

大切じゃないパスワードを記録するためのiPhone用ブックマークレットとclient-side storageの可能性 - bits and bytes 　

  • ためしにちょっと触ってみようと思ってclient-side storageをバックエンドにして、入力したパスワードを保存して次回から入力を楽にするためのbookmarkletをつくりました。とのことで、GMOインターネットラボの熊谷さんが簡易パスワード記憶ブックマークレットを公開してくれています。ソース付。

sukechan.net - iPhone 向けのタスク管理アプリを作ってみる 　

  • 今回は iPhone 用の Safari にも組み込まれている SQLite を JavaScript から利用できる SQL API を使って、タスク管理（ToDo? 管理とも呼びますね）アプリを作ってみようと思います。

iPhone向けサイトを考える：よろしい、ならばiPhoneでくぱぁだ 　

  • くぱぁ(i)はiPhone/touchで直感的にくぱぁできるWebサービスです。

JavaScript でテトリスみたいなゲームを作ろう！ - セキュリティ＆プログラミングキャンプ JavaScript 入門講座資料 　

  • iPhone用ではないですが、テトリス風ゲームを作るまで逐一解説。

連載物 　

マイコミジャーナル：【ハウツー】iPhoneゲーム自作工房 　

  • iPhoneゲーム自作工房3 - タッチポイントゲームを作成
    • 画面全体をタッチした場合に指定した関数checkPointを呼び出すには、document.addEventListener?("touchstart", checkPoint, false);を使います。iPhone用のSafariには他にも以下のタッチイベントが用意されています。
      touchstart タッチ開始 (mousedownに相当)
      touchend タッチ終了 (mouseupに相当)
      touchmove タッチ中 (mousemoveに相当)
      touchcancel タッチキャンセル
  • iPhoneゲーム自作工房5 - Googleマップ回転ゲームの作成
    • 今回は、回転させるジェスチャーを使って、ちょっとした回転ゲームを作成してみます。使用するのはgesturechangeとgestureendイベントです。gesturechangeにより現在の回転角度を表示します(遅延描画が行われるためかリアルタイムに角度が表示されないことがあります)。
  • iPhoneゲーム自作工房6 - ひとりで壁に向かってボールを打ち続けるゲーム
    • パドルの移動はタッチパネルをドラッグ(タッチムーブ)することで行います。パドルの移動はiPhone専用のイベントであるtouchmove(タッチムーブ)イベントを使います。touchmoveイベントが発生したらデフォルトのイベントを禁止します。これは、touchmoveイベントが発生するとイベントによりSafariの画面全体がスクロールしてしまうのを防ぐためです。これはevent.preventDefault();とすることでデフォルトのイベントを禁止することができます。

@IT：iPhone向けWebアプリを作ろう 　

特集：CSS3大接近｜gihyo.jp … 技術評論社 　

[Think IT]：iPhone向けWebサイトをつくろう 　

海外サイト 　

Ajaxian » iPhone 　

The iPhone SDK for Web Development 　

  • Here's part of the announcement that Steve Jobs forgot to mention...

CSS, JavaScript and XHTML Explained » iPhone 　

  • CSS Selectors and Safari 3.0
    • Below are the various CSS selectors, including CSS3 selectors, and Safari 3.0 for Windows and iPhone support. Green / √ means current support. Orange / Δ means that the browsers have some support for the selector. Red / Χ means that the browser is non-compliant. Non-compliant selectors can be used and a valid way to target individual browsers.

iPhone-Dev 　

iPhone Lovers in Japan 　

iDoc 　

CSS3 Exciting Functions and Features: 30+ Useful Tutorials | Noupe 　

  • CSS3 Exciting Functions and Features: 30+ Useful Tutorials



スポンサード　リンク