0
iPhone SDK


   UIWebView Tips
iPhone SDK




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




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

http://github.com/kishikawakatsumi

•hatena-touch     •DescriptionBuilder
•ldr-touch        •TiledLayerView
•t...
iPhone SDK


   UIWebView Tips
iPhone SDK

              UIWebView Tips
•                      •UI     UIWebView

•data URI scheme       •
•UIWebView
•Ja...
iPhone SDK



•*.js
•
iPhone SDK
                     (1)

NSBundle *mainBundle = [NSBundle mainBundle];

NSString *path =
[mainBundle pathForRe...
iPhone SDK
                        (2)

NSBundle *mainBundle = [NSBundle mainBundle];

NSString *path =
[mainBundle pathFo...
iPhone SDK



*.js
iPhone SDK
iPhone SDK
              OK

<script type="text/javascript" src="json2.js"></script>




NSString *path =
[[NSBundle mainB...
iPhone SDK
*.js
iPhone SDK


             Make Rule
iPhone SDK
iPhone SDK
iPhone SDK
iPhone SDK




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




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


•
•                HTML
iPhone SDK

      data URI scheme

•    HTML
iPhone SDK
data URI scheme

<p>This is a data encoded image.</p>
<img src="data:image/jpeg;base64,/9j/
4AAQSkZJRgABAQEAYAB...
iPhone SDK

UIWebView
iPhone SDK

webView.opaque = NO;
webView.backgroundColor = [UIColor clearColor];


<style type="text/css">
    body {
    ...
iPhone SDK

  JavaScript
iPhone SDK
JavaScript

- (void)webViewDidFinishLoad:(UIWebView *)webView {
    self.title =
     [webView
      stringByEv...
iPhone SDK

JavaScript
iPhone SDK
in JavaScript

document.location = "app::" + "function::" + param1 + "::" + param2;




app::function::param1::...
URL

               iPhone SDK
- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request
nav...
iPhone SDK
<script type="text/javascript">
 separator = "::";
 var directionsService = new google.maps.DirectionsService()...
- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request
navigationType:(UIWebViewNavigatio...
- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request
navigationType:(UIWebViewNavigatio...
iPhone SDK

•      API (Google Maps API      )




              MapKit-Route-Directions
iPhone SDK

JavaScript
iPhone SDK
@interface UIWebView (JavaScriptDebug)
- (void)webView:(UIWebView *)sender
runJavaScriptAlertPanelWithMessage:(...
iPhone SDK


•        alert
•Unpublished API
iPhone SDK

    UI        UIWebView

•        HTML + CSS +JavaScript
iPhone SDK
iPhone SDK
•
iPhone SDK



•
•
•
•
•
iPhone SDK
<div id="tag_price" class="float_l">${price}</div>

<div id="tag_info" class="float_r"><img src="img/menu_tag_i...
iPhone SDK
- (void)viewDidLoad {
   [super viewDidLoad];


          self.title = [NSString stringWithUTF8String:"       "...
iPhone SDK
iPhone SDK
iPhone SDK
CSS
<style type="text/css">
body {
   -webkit-user-select: none;
   -webkit-touch-callout: none;
}
</style>



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

#import <Foundation/Foundation.h>

@interface FilteredWebCache : NSURLCache
{
}

@end
iPhone SDK
#import "FilteredWebCache.h"
#import "FilterManager.h"

@implementation FilteredWebCache

- (NSCachedURLRespons...
iPhone SDK
- (void)viewDidLoad {
   [super viewDidLoad];

    NSArray *paths =
    NSSearchPathForDirectoriesInDomains(NSD...
iPhone SDK


•
iPhone SDK
iPhone SDK
http*://zedo.com*
http*://zencudo.co.uk*
http*://zmedia.com*
*/a.aspx?Zone*
*/a.thefreedictionary.*
*/adjs.php?...
iPhone SDK
for (id whiteURL in whiteList) {
   NSPredicate *predicate =
    [NSPredicate predicateWithFormat:@"SELF like[c...
iPhone SDK
iPhone SDK
NSPredicate *regex =
 [NSPredicate predicateWithFormat:
   @"SELF MATCHES 'https?://[a-zA-Z0-9/.?_+~=%:;!#-]+'"...
Upcoming SlideShare
Loading in...5
×

UIWebView Tips

13,549

Published on

UIWebView Tips

0 Comments
31 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
13,549
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
144
Comments
0
Likes
31
Embeds 0
No embeds

No notes for slide


























































  • Transcript of "UIWebView Tips"

    1. 1. iPhone SDK UIWebView Tips
    2. 2. iPhone SDK 24/7 twenty-four seven http://d.hatena.ne.jp/KishikawaKatsumi/
    3. 3. iPhone SDK • touch •Subway Map •LDR touch •MyWebClip • • •LCD Clock •
    4. 4. iPhone SDK http://github.com/kishikawakatsumi •hatena-touch •DescriptionBuilder •ldr-touch •TiledLayerView •tv-listings •UICCalendarPicker •MapKit-Route-Directions •FlipCardNavigationView •PhotoFlipCardView
    5. 5. iPhone SDK UIWebView Tips
    6. 6. iPhone SDK UIWebView Tips • •UI UIWebView •data URI scheme • •UIWebView •JavaScript •JavaScript •JavaScript
    7. 7. iPhone SDK •*.js •
    8. 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. 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. 10. iPhone SDK *.js
    11. 11. iPhone SDK
    12. 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. 13. iPhone SDK *.js
    14. 14. iPhone SDK Make Rule
    15. 15. iPhone SDK
    16. 16. iPhone SDK
    17. 17. iPhone SDK
    18. 18. iPhone SDK NSString *path = [mainBundle pathForResource:@"index.html" ofType:nil inDirectory:@"html"];
    19. 19. iPhone SDK <img src="img/menu_line.png" width="260" height="1">
    20. 20. iPhone SDK • • HTML
    21. 21. iPhone SDK data URI scheme • HTML
    22. 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. 23. iPhone SDK UIWebView
    24. 24. iPhone SDK webView.opaque = NO; webView.backgroundColor = [UIColor clearColor]; <style type="text/css"> body { background-color: transparent; } </style>
    25. 25. iPhone SDK JavaScript
    26. 26. iPhone SDK JavaScript - (void)webViewDidFinishLoad:(UIWebView *)webView { self.title = [webView stringByEvaluatingJavaScriptFromString:@"document.title"]; }
    27. 27. iPhone SDK JavaScript
    28. 28. iPhone SDK in JavaScript document.location = "app::" + "function::" + param1 + "::" + param2; app::function::param1::param2
    29. 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. 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. 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. 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. 33. iPhone SDK • API (Google Maps API ) MapKit-Route-Directions
    34. 34. iPhone SDK JavaScript
    35. 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. 36. iPhone SDK • alert •Unpublished API
    37. 37. iPhone SDK UI UIWebView • HTML + CSS +JavaScript
    38. 38. iPhone SDK
    39. 39. iPhone SDK •
    40. 40. iPhone SDK • • • • •
    41. 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. 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. 43. iPhone SDK
    44. 44. iPhone SDK
    45. 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. 46. iPhone SDK
    47. 47. iPhone SDK
    48. 48. iPhone SDK CSS -webkit-tap-highlight-color:rgba(163,215,112,0.70);
    49. 49. iPhone SDK
    50. 50. iPhone SDK #import <Foundation/Foundation.h> @interface FilteredWebCache : NSURLCache { } @end
    51. 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. 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. 53. iPhone SDK •
    54. 54. iPhone SDK
    55. 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. 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. 57. iPhone SDK
    58. 58. iPhone SDK NSPredicate *regex = [NSPredicate predicateWithFormat: @"SELF MATCHES 'https?://[a-zA-Z0-9/.?_+~=%:;!#-]+'"]; if ([regex evaluateWithObject:source]) {
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×