cs193p - lecture 12 · cs193p - lecture 12 iphone application development web views location &...

28
CS193P - Lecture 12 iPhone Application Development Web Views Location & Maps 1 Thursday, February 11, 2010

Upload: others

Post on 22-Jul-2020

1 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: CS193P - Lecture 12 · CS193P - Lecture 12 iPhone Application Development Web Views Location & Maps Thursday, February 11, 2010 1. ウェブ=ビューと\牏䵿渰묰 뜰 뀰栰 쌰

CS193P - Lecture 12iPhone Application Development

Web ViewsLocation & Maps

1Thursday, February 11, 2010

xkozima
Typewritten Text
ウェブ=ビューと 位置センシングとマップ
xkozima
Typewritten Text
xkozima
Typewritten Text
xkozima
Typewritten Text
Page 2: CS193P - Lecture 12 · CS193P - Lecture 12 iPhone Application Development Web Views Location & Maps Thursday, February 11, 2010 1. ウェブ=ビューと\牏䵿渰묰 뜰 뀰栰 쌰

Announcements• Paparazzi 3 is due next Wednesday at 11:59pm• Friday section tomorrow at 4 PM, Building 260 Room 113

■ Evan Doll■ Former CS193p lecturer■ Giving his thoughts on iPhone and iPad opportunities

2Thursday, February 11, 2010

xkozima
Typewritten Text
Page 3: CS193P - Lecture 12 · CS193P - Lecture 12 iPhone Application Development Web Views Location & Maps Thursday, February 11, 2010 1. ウェブ=ビューと\牏䵿渰묰 뜰 뀰栰 쌰

Today’s Topics• UIWebView

■ Loading■ Navigating

• CoreLocation• MapKit

■ MKMapView■ Annotations■ Reverse Geocoding

3Thursday, February 11, 2010

xkozima
Typewritten Text
今日のトピックス
xkozima
Typewritten Text
xkozima
Typewritten Text
ウェブビュー  ウェブ文書のロード  ナビゲーション
xkozima
Typewritten Text
xkozima
Typewritten Text
コア=ロケーション(位置センシング)
xkozima
Typewritten Text
xkozima
Typewritten Text
xkozima
Typewritten Text
マップ=キット  MKMapView  アノテーション(付加情報)  地理情報の逆変換
xkozima
Typewritten Text
xkozima
Typewritten Text
xkozima
Typewritten Text
xkozima
Typewritten Text
xkozima
Typewritten Text
xkozima
Typewritten Text
xkozima
Typewritten Text
xkozima
Typewritten Text
Page 4: CS193P - Lecture 12 · CS193P - Lecture 12 iPhone Application Development Web Views Location & Maps Thursday, February 11, 2010 1. ウェブ=ビューと\牏䵿渰묰 뜰 뀰栰 쌰

UIWebViews

4Thursday, February 11, 2010

xkozima
Typewritten Text
ウェブ=ビュー
xkozima
Typewritten Text
Page 5: CS193P - Lecture 12 · CS193P - Lecture 12 iPhone Application Development Web Views Location & Maps Thursday, February 11, 2010 1. ウェブ=ビューと\牏䵿渰묰 뜰 뀰栰 쌰

Displaying Web Content• Web content can be displayed with UIWebView• Content can be

■ local HTML string■ local raw data + MIME type■ remote URL

• Leverages WebKit■ full WK functionality not currently exposed■ simple API for loading & navigating■ delegate for some control■ limited JavaScript execution support

■ 5 seconds of execution & 10 MB of memory

5Thursday, February 11, 2010

xkozima
Typewritten Text
ウェブコンテンツ を表示する
xkozima
Typewritten Text
xkozima
Typewritten Text
xkozima
Typewritten Text
xkozima
Typewritten Text
ローカルの HTML 文字列 ローカルの生データ+MIMEタイプ リモート URL(外部ウェブ文書)
xkozima
Typewritten Text
ロード&ナビのための シンプルな API
xkozima
Typewritten Text
xkozima
Typewritten Text
xkozima
Typewritten Text
制約つきの JS 実行  5秒・10MB 以内
xkozima
Typewritten Text
xkozima
Typewritten Text
xkozima
Typewritten Text
Page 6: CS193P - Lecture 12 · CS193P - Lecture 12 iPhone Application Development Web Views Location & Maps Thursday, February 11, 2010 1. ウェブ=ビューと\牏䵿渰묰 뜰 뀰栰 쌰

UIWebView• UIView subclass, configure in IB or in code• Feed it data to display- (void)loadHTMLString:(NSString *)string baseURL:(NSURL *)baseURL;

- (void)loadData:(NSData *)data MIMEType:(NSString *)MIMEType textEncodingName:(NSString *)encodingName baseURL:(NSURL *)baseURL;

• Or give it a URL request- (void)loadRequest:(NSURLRequest *)request;

• What’s this NSURLRequest?■ Encapsulates a URL to load and caching policy for fetched data

6Thursday, February 11, 2010

xkozima
Typewritten Text
表示するデータの与え方
xkozima
Typewritten Text
xkozima
Typewritten Text
xkozima
Typewritten Text
xkozima
Typewritten Text
HTML文字列
xkozima
Typewritten Text
画像等のデータ
xkozima
Typewritten Text
xkozima
Typewritten Text
xkozima
Typewritten Text
URL でリクエスト
xkozima
Typewritten Text
xkozima
Typewritten Text
NSURL はウェブ文書をロード/キャッシュ
xkozima
Typewritten Text
xkozima
Typewritten Text
Page 7: CS193P - Lecture 12 · CS193P - Lecture 12 iPhone Application Development Web Views Location & Maps Thursday, February 11, 2010 1. ウェブ=ビューと\牏䵿渰묰 뜰 뀰栰 쌰

UIWebView• Properties and actions you’d expect from a web view @property BOOL loading; @property BOOL canGoBack; @property BOOL canGoForward;

- (void)reload; - (void)stopLoading; - (void)goBack; - (void)goForward;

• A couple others that are handy @property BOOL scalesPageToFit; @property BOOL detectsPhoneNumbers;

7Thursday, February 11, 2010

xkozima
Typewritten Text
ウェブ=ビューに期待されるプロパティとアクション
xkozima
Typewritten Text
xkozima
Typewritten Text
xkozima
Typewritten Text
xkozima
Typewritten Text
ロード中か? 「戻る」は可能か? 「進む」は可能か?
xkozima
Typewritten Text
xkozima
Typewritten Text
xkozima
Typewritten Text
xkozima
Typewritten Text
xkozima
Typewritten Text
xkozima
Typewritten Text
xkozima
Typewritten Text
xkozima
Typewritten Text
xkozima
Typewritten Text
xkozima
Typewritten Text
再読込 停止 戻る 進む
xkozima
Typewritten Text
xkozima
Typewritten Text
他の便利な機能
xkozima
Typewritten Text
xkozima
Typewritten Text
文書を拡大フィットするか? 電話番号をリンク化するか?
xkozima
Typewritten Text
xkozima
Typewritten Text
xkozima
Typewritten Text
xkozima
Typewritten Text
xkozima
Typewritten Text
xkozima
Typewritten Text
Page 8: CS193P - Lecture 12 · CS193P - Lecture 12 iPhone Application Development Web Views Location & Maps Thursday, February 11, 2010 1. ウェブ=ビューと\牏䵿渰묰 뜰 뀰栰 쌰

UIWebViewDelegate• Callbacks for load progress - (void)webViewDidStartLoad:(UIWebView *)webView; - (void)webViewDidFinishLoad:(UIWebView *)webView;

• Error handling - (void)webView:(UIWebView *)webView didFailLoadWithError:(NSError *)error;

• Navigation management - (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType;

■ navigationType specifies things like link clicked, reload, form submitted, back/forward, or other

8Thursday, February 11, 2010

xkozima
Typewritten Text
デリゲート(委任/委譲)
xkozima
Typewritten Text
xkozima
Typewritten Text
xkozima
Typewritten Text
xkozima
Typewritten Text
ロード開始した ロード終了した
xkozima
Typewritten Text
xkozima
Typewritten Text
ロード失敗
xkozima
Typewritten Text
xkozima
Typewritten Text
xkozima
Typewritten Text
ロード中にロードを     許可するか
xkozima
Typewritten Text
xkozima
Typewritten Text
xkozima
Typewritten Text
ロードの原因(イベント)を navigationType に入れる
xkozima
Typewritten Text
xkozima
Typewritten Text
xkozima
Typewritten Text
xkozima
Typewritten Text
xkozima
Typewritten Text
xkozima
Typewritten Text
xkozima
Typewritten Text
xkozima
Typewritten Text
xkozima
Typewritten Text
xkozima
Typewritten Text
xkozima
Typewritten Text
Page 9: CS193P - Lecture 12 · CS193P - Lecture 12 iPhone Application Development Web Views Location & Maps Thursday, February 11, 2010 1. ウェブ=ビューと\牏䵿渰묰 뜰 뀰栰 쌰

DemoUIWebView

9Thursday, February 11, 2010

xkozima
Typewritten Text
3行で出来るウェブブラウザ (ほんとよ)
xkozima
Typewritten Text
xkozima
Typewritten Text
xkozima
Typewritten Text
Page 10: CS193P - Lecture 12 · CS193P - Lecture 12 iPhone Application Development Web Views Location & Maps Thursday, February 11, 2010 1. ウェブ=ビューと\牏䵿渰묰 뜰 뀰栰 쌰

DemoUIWebView - using WebViews for “rich” text

10Thursday, February 11, 2010

xkozima
Typewritten Text
(これは割愛します)
xkozima
Typewritten Text
Page 11: CS193P - Lecture 12 · CS193P - Lecture 12 iPhone Application Development Web Views Location & Maps Thursday, February 11, 2010 1. ウェブ=ビューと\牏䵿渰묰 뜰 뀰栰 쌰

Core Location

11Thursday, February 11, 2010

xkozima
Typewritten Text
位置情報のセンシング
xkozima
Typewritten Text
xkozima
Typewritten Text
Page 12: CS193P - Lecture 12 · CS193P - Lecture 12 iPhone Application Development Web Views Location & Maps Thursday, February 11, 2010 1. ウェブ=ビューと\牏䵿渰묰 뜰 뀰栰 쌰

What is CoreLocation?• A framework to manage Location

■ CLLocation■ CLLocationManager■ CLHeading

• No UI

12Thursday, February 11, 2010

xkozima
Typewritten Text
コア=ロケーションとは?
xkozima
Typewritten Text
xkozima
Typewritten Text
位置情報を管理するFW
xkozima
Typewritten Text
ユーザインタフェースはない
xkozima
Typewritten Text
xkozima
Typewritten Text
xkozima
Typewritten Text
緯度・経度・高度 もろもろの管理 方角(磁気コンパス)
xkozima
Typewritten Text
Page 13: CS193P - Lecture 12 · CS193P - Lecture 12 iPhone Application Development Web Views Location & Maps Thursday, February 11, 2010 1. ウェブ=ビューと\牏䵿渰묰 뜰 뀰栰 쌰

How Does it KNOW??• Three tiered approach:

■ GPS■ Wifi■ Cell Network

• The more accurate the technology, the more power it costs

13Thursday, February 11, 2010

xkozima
Typewritten Text
どのように位置を把握するのか
xkozima
Typewritten Text
3階層アプローチ  ・GPS  ・Wifi 基地局の位置情報  ・携帯基地局の位置情報
xkozima
Typewritten Text
精度が高いほどパワーを消費する(らしい)
Page 14: CS193P - Lecture 12 · CS193P - Lecture 12 iPhone Application Development Web Views Location & Maps Thursday, February 11, 2010 1. ウェブ=ビューと\牏䵿渰묰 뜰 뀰栰 쌰

CLLocation• An object to represent a point and vector in the real world

@property CLLocationCoordinate2D coordinate; @property CLLocationDistance altitude;

@property CLLocationAccuracy horizontalAccuracy; @property CLLocationAccuracy verticalAccuracy;

@property CLLocationDirection course; @property CLLocationSpeed speed;

- (NSDate *)timeStamp;

- (CLLocationDistance)distanceFromLocation:(CLLocation *)location

14Thursday, February 11, 2010

xkozima
Typewritten Text
実世界における点とベクトルを表現するオブジェクト
xkozima
Typewritten Text
xkozima
Typewritten Text
座標(緯度・経度) 高度
xkozima
Typewritten Text
xkozima
Typewritten Text
水平精度 垂直精度
xkozima
Typewritten Text
xkozima
Typewritten Text
移動方向(ベクトル) 移動速度 m/s
xkozima
Typewritten Text
xkozima
Typewritten Text
時刻
xkozima
Typewritten Text
xkozima
Typewritten Text
ある位置からの距離
xkozima
Typewritten Text
xkozima
Typewritten Text
Page 15: CS193P - Lecture 12 · CS193P - Lecture 12 iPhone Application Development Web Views Location & Maps Thursday, February 11, 2010 1. ウェブ=ビューと\牏䵿渰묰 뜰 뀰栰 쌰

CLLocationManager• Your entry point to the location service

@property CLLocation *location;

@property id <CLLocationManagerDelegate> delegate;

@property CLLocationDistance distanceFilter; @property CLLocationAccuracy verticalAccuracy;

- (void)startUpdatingLocation - (void)stopUpdatingLocation - (void)startUpdatingHeading - (void)stopUpdatingHeading

15Thursday, February 11, 2010

xkozima
Typewritten Text
位置情報サービスへの入口
xkozima
Typewritten Text
xkozima
Typewritten Text
位置更新スタート     ストップ 方向更新スタート     ストップ
xkozima
Typewritten Text
xkozima
Typewritten Text
距離フィルタ 垂直精度
xkozima
Typewritten Text
xkozima
Typewritten Text
Page 16: CS193P - Lecture 12 · CS193P - Lecture 12 iPhone Application Development Web Views Location & Maps Thursday, February 11, 2010 1. ウェブ=ビューと\牏䵿渰묰 뜰 뀰栰 쌰

CLLocationManagerDelegate• Callbacks for location change - (void)locationManager:(CLLocationManager *)manager didUpdateToLocation:(CLLocation *)newLocation fromLocation:(CLLocation *)oldLocation;

Callbacks for heading change - (void)locationManager:(CLLocationManager *)manager didUpdateHeading:(CLHeading *)newHeading;

Error handling - (void)locationManager:(CLLocationManager *)manager didFailLoadWithError:(NSError *)error;

16Thursday, February 11, 2010

xkozima
Typewritten Text
委任/委譲
xkozima
Typewritten Text
位置変化時に呼び出されるメソッド
xkozima
Typewritten Text
xkozima
Typewritten Text
xkozima
Typewritten Text
方角変化時に呼び出されるメソッド
xkozima
Typewritten Text
xkozima
Typewritten Text
xkozima
Typewritten Text
新しい位置 古い位置
xkozima
Typewritten Text
xkozima
Typewritten Text
新しい方角
xkozima
Typewritten Text
エラーのとき
xkozima
Typewritten Text
xkozima
Typewritten Text
xkozima
Typewritten Text
xkozima
Typewritten Text
xkozima
Typewritten Text
xkozima
Typewritten Text
xkozima
Typewritten Text
Page 17: CS193P - Lecture 12 · CS193P - Lecture 12 iPhone Application Development Web Views Location & Maps Thursday, February 11, 2010 1. ウェブ=ビューと\牏䵿渰묰 뜰 뀰栰 쌰

MapKit

17Thursday, February 11, 2010

Page 18: CS193P - Lecture 12 · CS193P - Lecture 12 iPhone Application Development Web Views Location & Maps Thursday, February 11, 2010 1. ウェブ=ビューと\牏䵿渰묰 뜰 뀰栰 쌰

What is MapKit?• API to display Maps• Classes to transalte between CLLocation and human-readable

addresses

• Support for “annotations” (pins on a map)• Reverse Geocoding

18Thursday, February 11, 2010

xkozima
Typewritten Text
マップ=キットとは?
xkozima
Typewritten Text
xkozima
Typewritten Text
地図を表示する API
xkozima
Typewritten Text
xkozima
Typewritten Text
住所(アドレス)→ 位置情報
xkozima
Typewritten Text
付加情報(ピン)
xkozima
Typewritten Text
xkozima
Typewritten Text
xkozima
Typewritten Text
xkozima
Typewritten Text
xkozima
Typewritten Text
位置情報 → 住所(アドレス)
xkozima
Typewritten Text
xkozima
Typewritten Text
xkozima
Typewritten Text
xkozima
Typewritten Text
Page 19: CS193P - Lecture 12 · CS193P - Lecture 12 iPhone Application Development Web Views Location & Maps Thursday, February 11, 2010 1. ウェブ=ビューと\牏䵿渰묰 뜰 뀰栰 쌰

MKMapView

• Handles display of map• “Map” & “Satellite” types• Panning and Zooming• Annotations• Display User Location

19Thursday, February 11, 2010

xkozima
Typewritten Text
マップ表示
xkozima
Typewritten Text
xkozima
Typewritten Text
地図/衛星
xkozima
Typewritten Text
xkozima
Typewritten Text
移動とズーム
xkozima
Typewritten Text
xkozima
Typewritten Text
付加情報
xkozima
Typewritten Text
xkozima
Typewritten Text
ユーザ位置の 表示
xkozima
Typewritten Text
xkozima
Typewritten Text
xkozima
Typewritten Text
xkozima
Typewritten Text
xkozima
Typewritten Text
xkozima
Typewritten Text
Page 20: CS193P - Lecture 12 · CS193P - Lecture 12 iPhone Application Development Web Views Location & Maps Thursday, February 11, 2010 1. ウェブ=ビューと\牏䵿渰묰 뜰 뀰栰 쌰

MKMapView• Properties in MKMapView @property MKCoordinateRegion region; @property CLLocationCoordinate2D centerCoordinate;

@property MKMapType mapType;

@property NSArray *annotations; @property MKUserLocation userLocation;

@property id <MKMapViewDelegate> delegate;

20Thursday, February 11, 2010

xkozima
Typewritten Text
プロパティ(変数)
xkozima
Typewritten Text
xkozima
Typewritten Text
xkozima
Typewritten Text
地図上の長方形領域      その中央
xkozima
Typewritten Text
xkozima
Typewritten Text
xkozima
Typewritten Text
標準・衛星・両方など
xkozima
Typewritten Text
付加情報(ピン等) ユーザ位置(読み出しのみ)
xkozima
Typewritten Text
xkozima
Typewritten Text
xkozima
Typewritten Text
xkozima
Typewritten Text
Page 21: CS193P - Lecture 12 · CS193P - Lecture 12 iPhone Application Development Web Views Location & Maps Thursday, February 11, 2010 1. ウェブ=ビューと\牏䵿渰묰 뜰 뀰栰 쌰

MKMapViewDelegate• Callback methods about loading state: - (void)mapViewWillStartLoadingMap:(MKMapView *)mapView;

- (void)mapViewDidFinishLoadingMap:(MKMapView *)mapView;

- (void)mapViewDidFailLoadingMap:(MKMapView *)mapView withError:(NSError *)error;

• Callback methods about region changes: - (void)mapView:(MKMapView *)mapView regionWillChangeAnimated:(BOOL)animated;

- (void)mapView:(MKMapView *)mapView regionDidChangeAnimated:(BOOL)animated;

21Thursday, February 11, 2010

xkozima
Typewritten Text
マップロードに伴って 呼び出されるメソッド
xkozima
Typewritten Text
xkozima
Typewritten Text
リージョン変更(ユーザ によるドラッグ/ズーム) に伴って呼び出される       メソッド
xkozima
Typewritten Text
xkozima
Typewritten Text
xkozima
Typewritten Text
Page 22: CS193P - Lecture 12 · CS193P - Lecture 12 iPhone Application Development Web Views Location & Maps Thursday, February 11, 2010 1. ウェブ=ビューと\牏䵿渰묰 뜰 뀰栰 쌰

MKMapViewDelegate• Callback methods to customize and interact with “annotations”:

- (MKAnnotationView *)mapView:(MKMapView *)mapView viewForAnnotation:(id <MKAnnotation>)annotation;

- (void)mapView:(MKMapView *)mapView didAddAnnotationViews:(NSArray *)views;

- (void)mapView:(MKMapView *)mapView annotationView:(MKAnnotationView *)view calloutAccessoryControlTapped:(UIControl *)control;

22Thursday, February 11, 2010

xkozima
Typewritten Text
付加情報(ピン等)の操作
xkozima
Typewritten Text
xkozima
Typewritten Text
xkozima
Typewritten Text
xkozima
Typewritten Text
xkozima
Typewritten Text
xkozima
Typewritten Text
xkozima
Typewritten Text
Page 23: CS193P - Lecture 12 · CS193P - Lecture 12 iPhone Application Development Web Views Location & Maps Thursday, February 11, 2010 1. ウェブ=ビューと\牏䵿渰묰 뜰 뀰栰 쌰

MKAnnotation• A @protocol - not a @class• Add to a MapView to plot pins

@property CLLocationCoordinate2D coordinate;

@property NSString *title; @property NSString *subtitle;

23Thursday, February 11, 2010

xkozima
Typewritten Text
付加情報(ピン)は 位置だけでなく タイトルとサブタイトルをもつ
xkozima
Typewritten Text
xkozima
Typewritten Text
Page 24: CS193P - Lecture 12 · CS193P - Lecture 12 iPhone Application Development Web Views Location & Maps Thursday, February 11, 2010 1. ウェブ=ビューと\牏䵿渰묰 뜰 뀰栰 쌰

MKPlacemark• Conforms to MKAnnotation protocol• Convenience for holding human-readable addresses alongside

Coordinate

- (void)initWithCoordinate:(CLLocationCoordinate2D *)coordinate addressDictionary:(NSDictionary *)dictionary;

• Easy to convert between AddressBook addresses and location:■ thoroughfare, subThoroughfare, locality, subLocality,

administrativeArea, subAdministrativeArea, postalCode, country, countryCode

24Thursday, February 11, 2010

xkozima
Typewritten Text
住所アドレスとの変換
xkozima
Typewritten Text
xkozima
Typewritten Text
xkozima
Typewritten Text
xkozima
Typewritten Text
Page 25: CS193P - Lecture 12 · CS193P - Lecture 12 iPhone Application Development Web Views Location & Maps Thursday, February 11, 2010 1. ウェブ=ビューと\牏䵿渰묰 뜰 뀰栰 쌰

MKUserLocation• Special case of an MKAnnotation• Represents device’s location only

@property BOOL updating (getter = isUpdating); @property CLLocation *location;

@property NSString *title; @property NSString *subtitle;

25Thursday, February 11, 2010

xkozima
Typewritten Text
デバイスの位置を表わす
xkozima
Typewritten Text
xkozima
Typewritten Text
xkozima
Typewritten Text
Page 26: CS193P - Lecture 12 · CS193P - Lecture 12 iPhone Application Development Web Views Location & Maps Thursday, February 11, 2010 1. ウェブ=ビューと\牏䵿渰묰 뜰 뀰栰 쌰

MKReverseGeocoder• Given a location, what’s the human-readable address?

- (void)initWithCoordinate:(CLLocationCoordinate2D)coordinate;

@property id <MKReverseGeocoderDelegate> delegate;

- (void)start;

- (void)cancel;

• Delegate callbacks: - (void)reverseGeocoder:(MKReverseGeocoder *)geocoder didFindPlacemark:(MKPlacemark *)placemark;

- (void)reverseGeocoder:(MKReverseGeocoder *)geocoder didFailWithError:(NSError *)error;

26Thursday, February 11, 2010

xkozima
Typewritten Text
位置情報からアドレスを得るには?
xkozima
Typewritten Text
Page 27: CS193P - Lecture 12 · CS193P - Lecture 12 iPhone Application Development Web Views Location & Maps Thursday, February 11, 2010 1. ウェブ=ビューと\牏䵿渰묰 뜰 뀰栰 쌰

DemoMKMapView and friends

27Thursday, February 11, 2010

xkozima
Typewritten Text
3行で出来る地図アプリ(ほんとよ)
xkozima
Typewritten Text
Page 28: CS193P - Lecture 12 · CS193P - Lecture 12 iPhone Application Development Web Views Location & Maps Thursday, February 11, 2010 1. ウェブ=ビューと\牏䵿渰묰 뜰 뀰栰 쌰

Questions?

28Thursday, February 11, 2010