Hot pepper for ipod touch
This presentation is the property of its rightful owner.
Sponsored Links
1 / 31

Hot Pepper for iPod touch PowerPoint PPT Presentation


  • 108 Views
  • Uploaded on
  • Presentation posted in: General

Hot Pepper for iPod touch. iPhone / iPod touch Web アプリ 開発 Tips リクルート Media Technology Labs engineer 石橋 利真 aka iandeth. iPhone ?. リクルート Web サービス. Apple 推奨 iPhone アプリ の 3 step 進化 Web サイトの CSS デザイン最適化 Web サイトの UI 最適化 + フル AJAX 対応 iPhone native application.

Download Presentation

Hot Pepper for iPod touch

An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -

Presentation Transcript


Hot pepper for ipod touch

Hot Pepper for iPod touch

iPhone / iPod touch Web アプリ開発 Tips

リクルート Media Technology Labs

engineer 石橋利真aka iandeth


Hot pepper for ipod touch

iPhone ?


Hot pepper for ipod touch

  • リクルート Web サービス


Hot pepper for ipod touch

  • Apple 推奨 iPhone アプリの 3 step 進化

    • Web サイトの CSS デザイン最適化

    • Web サイトの UI 最適化 + フル AJAX 対応

    • iPhone native application


Http i hotpepper jp

http://i.hotpepper.jp/


Hot pepper for ipod touch

  • platform 検証 5 日

  • 2人で開発 – 2週間

  • Full AJAX web application

    • HTML + CSS + JavaScript only

    • サーバ側スクリプトは無し

    • Hot Pepper JSONP API


Hot pepper for ipod touch

  • iPhone SDK

    • Dashcode IDE

    • iPhone Simulator

    • JavaScript Framework


Hot pepper for ipod touch

  • User Interface

  • マウスは無い。あるのはタップのみ

    • click : OK

    • double click : NG (デフォルトで画面拡大)

    • mouse over : NG

    • drag : NG (デフォルトで画面移動)

  • 未検証 events

    • gesture

    • touch

    • SDK final 版で multi touch 可能に?


Hot pepper for ipod touch

  • Web App 版のメリット

  • Full Browser ! (Safari 3.x)

  • HTML / JavaScript / CSS

    • 既存の Web 技術で 100% 作成可能

  • 任意の Web サーバで手軽に公開


Hot pepper for ipod touch

  • Web App 版の制約

  • デバイス機能が使えない (GPSほか)

  • 実行速度 (Native App と比較して)

  • iPhone Safari のメモリ上限

    • 1 window 内で

    • すべての window tab 合算でも

    • 上限超えるとページリロードが発生

  • ユーザーリーチが Native App に比べて弱い

    • App Store に登録できない

    • ブラウザ検索エンジン経由

    • URL 直打ち

    • QRコードが無い


Hot pepper for ipod touch

  • User Agent

  • iPhoneMozilla/5.0 (iPhone …) AppleWebKit …

  • iPod touchMozilla/5.0 (iPod …) AppleWebKit …


Hot pepper for ipod touch

  • iPhone と iPod touch の挙動違い

  • iPod touch : SDK Framework で実装されている画面遷移のアニメーションが動かない

  • 画面の縦スクロール位置の取得方法

    • iPhone : window.scrollY

    • iPod touch : window.pageYOffset

    • OS version 2.0 に upgrade する事で解消


Hot pepper for ipod touch

  • ページ表示と同時に URL バーを消す

  • iPhone

    • window.scrollTo( 0, 0 );

  • iPod touch

    • setTimeout( function (){ window.scrollTo( 0, 1 )}, 100 );


Hot pepper for ipod touch

  • iPhone の傾き変更を検知する

  • orientationchange event

    • window.addEventListener( ‘orientationchange’, handler );

  • iPod touch の場合

    • <body onorientationchage=“handler”>


Hot pepper for ipod touch

  • AJAX loading 効果

  • jQuery Block UI プラグイン

    • ちょこっと iPhone 用に修正


Hot pepper for ipod touch

  • Windows で動作確認

  • Safari for Windows

    • “開発” メニューで user agent を iPhone / iPod touch として装う事が可能


Hot pepper for ipod touch

  • サーバ接続エラーを自前で用意

  • JSONP

  • var timer_id = setTimeout( function (){ alert( ‘サーバ接続出来ませんでした’ );}, 5000 );$.getJSON( url, function ( json ){ clearTimeout( timer_id ); // … 以下検索結果表示のコード});


Hot pepper for ipod touch

  • Customizing JavaScript Framework

  • Header title, back button label

  • On webkit transition end

  • Header Orientation change for iPod touch


Hot pepper for ipod touch

  • And More…

  • Local Database

  • WebKit CSS Animation

  • And beyond …

    • iPhone native app with Objective-C

      • GPS, camera, phone, custom UI

      • iTunes App Store


Hot pepper for ipod touch

  • リクルート Web サービス


Hot pepper for ipod touch

  • Mashup Awards 4th開催中!


Hot pepper for ipod touch

iPhone !


  • Login