UIWebView Tips

1. iPhone SDK
UIWebView Tips

2. iPhone SDK
24/7 twenty-four seven
http://d.hatena.ne.jp/KishikawaKatsumi/

3. iPhone SDK
• touch •Subway Map
•LDR touch •MyWebClip
• •
•LCD Clock •

4. iPhone SDK
http://github.com/kishikawakatsumi
•hatena-touch •DescriptionBuilder
•ldr-touch •TiledLayerView
•tv-listings •UICCalendarPicker
•MapKit-Route-Directions
•FlipCardNavigationView
•PhotoFlipCardView

5. iPhone SDK
UIWebView Tips

6. iPhone SDK
UIWebView Tips
• •UI UIWebView
•data URI scheme •
•UIWebView
•JavaScript
•JavaScript
•JavaScript

7. iPhone SDK
•*.js
•

8. iPhone SDK
(1)
NSBundle *mainBundle = [NSBundle mainBundle];
NSString *path =
[mainBundle pathForResource:@"index.html"
ofType:nil
inDirectory:@"html"];
NSURL *fileURL = [NSURL fileURLWithPath:path];
[webView loadRequest:
[NSURLRequest requestWithURL:fileURL]];

9. iPhone SDK
(2)
NSBundle *mainBundle = [NSBundle mainBundle];
NSString *path =
[mainBundle pathForResource:@"index.html"
ofType:nil
inDirectory:@"html"];
NSString *htmlContents =
[NSString stringWithContentsOfURL:fileURL
encoding:NSUTF8StringEncoding
error:nil];
[webView
loadHTMLString: htmlContents baseURL:path];

10. iPhone SDK
*.js

11. iPhone SDK

12. iPhone SDK
OK
<script type="text/javascript" src="json2.js"></script>
NSString *path =
[[NSBundle mainBundle]
pathForResource:@"index" ofType:@"html"];
[webView loadRequest:
[NSURLRequest
requestWithURL:[NSURL fileURLWithPath:path]]];

13. iPhone SDK
*.js

14. iPhone SDK
Make Rule

15. iPhone SDK

16. iPhone SDK

17. iPhone SDK

18. iPhone SDK
NSString *path =
[mainBundle pathForResource:@"index.html"
ofType:nil
inDirectory:@"html"];

19. iPhone SDK
<img src="img/menu_line.png" width="260" height="1">

20. iPhone SDK
•
• HTML

21. iPhone SDK
data URI scheme
• HTML

22. iPhone SDK
data URI scheme
<p>This is a data encoded image.</p>
<img src="data:image/jpeg;base64,/9j/
4AAQSkZJRgABAQEAYABgAAD/
2wBDAAEBAQEBAQEBAQEBAQEBAQICAQEBAQMCA
gICAwMEBAMDAwMEBAYFBAQFBAMDBQcFBQYGBg
YGBAUHBwcGBwYGBg
... +0lShKd4r3XzOLlePTXToYYHOc4w3C9WjTrzj
T5rcqlJKztdWTtZ9e5+p9FFFfsB8gf/2Q==" />

23. iPhone SDK
UIWebView

24. iPhone SDK
webView.opaque = NO;
webView.backgroundColor = [UIColor clearColor];
<style type="text/css">
body {
background-color: transparent;
}
</style>

25. iPhone SDK
JavaScript

26. iPhone SDK
JavaScript
- (void)webViewDidFinishLoad:(UIWebView *)webView {
self.title =
[webView
stringByEvaluatingJavaScriptFromString:@"document.title"];
}

27. iPhone SDK
JavaScript

28. iPhone SDK
in JavaScript
document.location = "app::" + "function::" + param1 + "::" + param2;
app::function::param1::param2

29. URL
iPhone SDK
- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request
navigationType:(UIWebViewNavigationType)navigationType {
NSString *requestString = [[request URL] absoluteString];
NSArray *params = [requestString componentsSeparatedByString:@"::"];
if ([params count] > 1 &&
[[params objectAtIndex:0] isEqualToString:@"app"]) {
if([[params objectAtIndex:1] isEqualToString:@"function"]) {
NSLog([params objectAtIndex:2]); // param1
NSLog([params objectAtIndex:3]); // param2
// Call your method in Objective-C method using the above...
}
return NO;
}
return YES; // Return YES to make sure regular navigation works as expected.
}

30. iPhone SDK
<script type="text/javascript">
separator = "::";
var directionsService = new google.maps.DirectionsService();
function route(request) {
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
document.location = "directions-v3" + separator + "route" +
separator + JSON.stringify(response);
}
});
}
</script>

31. - (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request
navigationType:(UIWebViewNavigationType)navigationType {
NSLog(@"%@/%@", NSStringFromClass([self class]), NSStringFromSelector(_cmd));
iPhone SDK
NSString *requestString = [[request URL] absoluteString];
NSArray *params = [requestString componentsSeparatedByString:@"::"];
NSString *function = [params objectAtIndex:0];
if ([params count] > 1 && [function isEqualToString:@"directions-v3"]) {
NSString *param1 = [params objectAtIndex:1];
if([param1 isEqualToString:@"route"]) {
NSString *param2 = [params objectAtIndex:2];
id JSONValue = [[param2 stringByReplacingPercentEscapesUsingEncoding:NSUTF8StringEncoding]
JSONValue];
if (!JSONValue) {
if ([self.delegate respondsToSelector:@selector(goolgeMapsAPI:didFailWithMessage:)]) {
[(id<UICGoogleMapsAPIDelegate>)delegate goolgeMapsAPI:self didFailWithMessage:param2];
}
} else {
if ([self.delegate respondsToSelector:@selector(goolgeMapsAPI:didGetObject:)]) {
[(id<UICGoogleMapsAPIDelegate>)delegate goolgeMapsAPI:self didGetObject:JSONValue];
}
}
}
return NO;
}
return YES;
}

32. - (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request
navigationType:(UIWebViewNavigationType)navigationType {
NSLog(@"%@/%@", NSStringFromClass([self class]), NSStringFromSelector(_cmd));
iPhone SDK
NSString *requestString = [[request URL] absoluteString];
NSArray *params = [requestString componentsSeparatedByString:@"::"];
NSString *function = [params objectAtIndex:0];
if ([params count] > 1 && [function isEqualToString:@"directions-v3"]) {
NSString *param1 = [params objectAtIndex:1];
if([param1 isEqualToString:@"route"]) {
NSString *param2 = [params objectAtIndex:2];
id JSONValue = [[param2 stringByReplacingPercentEscapesUsingEncoding:NSUTF8StringEncoding]
JSONValue];
if (!JSONValue) {
if ([self.delegate respondsToSelector:@selector(goolgeMapsAPI:didFailWithMessage:)]) {
[(id<UICGoogleMapsAPIDelegate>)delegate goolgeMapsAPI:self didFailWithMessage:param2];
}
} else {
if ([self.delegate respondsToSelector:@selector(goolgeMapsAPI:didGetObject:)]) {
[(id<UICGoogleMapsAPIDelegate>)delegate goolgeMapsAPI:self didGetObject:JSONValue];
}
}
}
return NO;
}
URL
return YES; JSON
}

33. iPhone SDK
• API (Google Maps API )
MapKit-Route-Directions

34. iPhone SDK
JavaScript

35. iPhone SDK
@interface UIWebView (JavaScriptDebug)
- (void)webView:(UIWebView *)sender
runJavaScriptAlertPanelWithMessage:(NSString *)message
initiatedByFrame:(WebFrame *)frame;
@end
@implementation UIWebView (JavaScriptDebug)
- (void)webView:(UIWebView *)sender
runJavaScriptAlertPanelWithMessage:(NSString *)message
initiatedByFrame:(WebFrame *)frame {
NSLog(@"alert: %@", message);
}
@end
alert(item["name"]);

36. iPhone SDK
• alert
•Unpublished API

37. iPhone SDK
UI UIWebView
• HTML + CSS +JavaScript

38. iPhone SDK

39. iPhone SDK
•

40. iPhone SDK
•
•
•
•
•

41. iPhone SDK
<div id="tag_price" class="float_l">${price}</div>
<div id="tag_info" class="float_r"><img src="img/menu_tag_info.png" alt="Info"
width="76" height="39"></div></div><div id="menu"><div class="text">$
{comment}</div>
<div class="bar"><img src="img/menu_line.png" width="260" height="1"></
div>
<div class="text">
<span class="blue"> </span> ${advantage}
</div>
<div class="bar"><img src="img/menu_line.png" width="260" height="1"></
div>
<div class="text">
<span class="blue"> </span> ${spec}

42. iPhone SDK
- (void)viewDidLoad {
[super viewDidLoad];
self.title = [NSString stringWithUTF8String:" "];
NSBundle *mainBundle = [NSBundle mainBundle];
NSString *path = [mainBundle pathForResource:@"index.html" ofType:nil inDirectory:@"html"];
NSURL *fileURL = [NSURL fileURLWithPath:path];
NSString *htmlContents = [NSString stringWithContentsOfURL:fileURL encoding:NSUTF8StringEncoding error:nil];
htmlContents = [htmlContents stringByReplacingOccurrencesOfString:@"${photo}" withString:@"photo.jpg"];
htmlContents = [htmlContents stringByReplacingOccurrencesOfString:@"${name}" withString:[NSString stringWithUTF8String:"USB
USB "]];
htmlContents = [htmlContents stringByReplacingOccurrencesOfString:@"${price}" withString:[NSString stringWithUTF8String:"
950 "]];
htmlContents = [htmlContents stringByReplacingOccurrencesOfString:@"${comment}" withString:[NSString
stringWithUTF8String:"ReadyBoost USB "]];
htmlContents = [htmlContents stringByReplacingOccurrencesOfString:@"${advantage}" withString:[NSString
stringWithUTF8String:"Windows Vista ReadyBoost "]];
htmlContents = [htmlContents stringByReplacingOccurrencesOfString:@"${spec}" withString:[NSString stringWithUTF8String:"<br>
USB Ver.2.0 <br> USB A <br> DC 5V"]];
htmlContents = [htmlContents stringByReplacingOccurrencesOfString:@"${size}" withString:[NSString stringWithUTF8String:"2 GB "]];
htmlContents = [htmlContents stringByReplacingOccurrencesOfString:@"${color}" withString:[NSString stringWithUTF8String:" "]];
htmlContents = [htmlContents stringByReplacingOccurrencesOfString:@"${count}" withString:[NSString stringWithUTF8String:"1 "]];
[web loadHTMLString:htmlContents baseURL:fileURL];
}

43. iPhone SDK

44. iPhone SDK

45. iPhone SDK
CSS
<style type="text/css">
body {
-webkit-user-select: none;
-webkit-touch-callout: none;
}
</style>
JavaScript
<script type="text/javascript">
function OnLoad() {
document.documentElement.style.webkitTouchCallout = "none";
document.documentElement.style.webkitUserSelect = "none";
}
</script>
</head>
<body onload="OnLoad()">

46. iPhone SDK

47. iPhone SDK

48. iPhone SDK
CSS
-webkit-tap-highlight-color:rgba(163,215,112,0.70);

49. iPhone SDK

50. iPhone SDK
#import <Foundation/Foundation.h>
@interface FilteredWebCache : NSURLCache
{
}
@end

51. iPhone SDK
#import "FilteredWebCache.h"
#import "FilterManager.h"
@implementation FilteredWebCache
- (NSCachedURLResponse *)cachedResponseForRequest:(NSURLRequest *)request {
NSURL *URL = [request URL];
BOOL blockURL = [[FilterManager sharedFilterManager] shouldBlockURL:URL];
if (blockURL) {
LOG(@"!%@! was blocked.", URL);
NSURLResponse *response = [[NSURLResponse alloc] initWithURL:URL
MIMEType:@"text/plain"
expectedContentLength:1
textEncodingName:nil];
NSCachedURLResponse *cachedResponse =
[[NSCachedURLResponse alloc] initWithResponse:response
data:[NSData dataWithBytes:" " length:1]];
[super storeCachedResponse:cachedResponse forRequest:request];
[cachedResponse release];
[response release];
}
return [super cachedResponseForRequest:request];
}

52. iPhone SDK
- (void)viewDidLoad {
[super viewDidLoad];
NSArray *paths =
NSSearchPathForDirectoriesInDomains(NSDocumentDirectory, NSUserDomainMask, YES);
NSString *documentDirectory = [paths objectAtIndex:0];
NSString *path = [documentDirectory stringByAppendingPathComponent:@"cache.dat"];
NSUInteger discCapacity = 10 * 1024 * 1024;
NSUInteger memoryCapacity = 512 * 1024;
FilteredWebCache *cache =
[[FilteredWebCache alloc] initWithMemoryCapacity:memoryCapacity
diskCapacity:discCapacity diskPath:path];
[NSURLCache setSharedURLCache:cache];
[cache release];

53. iPhone SDK
•

54. iPhone SDK

55. iPhone SDK
http*://zedo.com*
http*://zencudo.co.uk*
http*://zmedia.com*
*/a.aspx?Zone*
*/a.thefreedictionary.*
*/adjs.php?*
*/ads.pl?*
*/ad.gif?*
*/ad1.jpg
*/adx2.js
http://*.images-amazon.com/*
http://*.ad.adlantis.jp/*
http://*.adlantis.jp/*.js*"

56. iPhone SDK
for (id whiteURL in whiteList) {
NSPredicate *predicate =
[NSPredicate predicateWithFormat:@"SELF like[c] %@", whiteURL];
if ([predicate evaluateWithObject:[URL absoluteString]]) {
[loadedURLsOfCurrentPage addObject:URL];
return NO;
}
}
[@"SELF like[c] http://*.ad.adlantis.jp/*"
evaluateWithObject:@"http://suiheiliebe.blog52.fc2.com/"]

57. iPhone SDK

58. iPhone SDK
NSPredicate *regex =
[NSPredicate predicateWithFormat:
@"SELF MATCHES 'https?://[a-zA-Z0-9/.?_+~=%:;!#-]+'"];
if ([regex evaluateWithObject:source]) {