Yelp: iOSアプリに組み込むweb viewをネイティブっぽく表現する

http://engineeringblog.yelp.com/2013/11/whoa-that-embedded-web-view-looks-hot-in-your-ios-app.html

1 comment | 0 points | by Jshiike 3年以上前


Jshiike 3年以上前 | ▲upvoteする | link

Yelpがエンジニアブログで、ネイティブのユーザビリティを崩さずにweb viewをネイティブアプリに組み込む工夫を紹介しています。



Yelpのモバイルトラフィックは、2013年の第3四半期平均で月間1,100万ユニークデバイス


iOSにおいてアプリにウェブを組み込む一般的な手法は、UIWebViewをつくって、それにURLを渡すことだが、それだと、読み込み中のままコンテンツがすぐに表示できない事態に陥ることになる。


1) ネイティブっぽいページ遷移を実現する


まず、前提として、UIWebViewはURLのリクエストを読み込もうとするとき、そのdelegate(通常はcontroller)を呼び出し、引数としてそれ自身とURLリクエストとナビゲーションタイプを渡し、NOが返り値となると、URLの読み込みをしない。


上記のようにNOを返した後に、読み込みたいURLを別のweb viewで開く。そして、その新しいweb viewを任意のアニメーションスタイルで画面に挿入することでネーティブっぽい動きをつくることができる。以下そのコード。


- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType {

// Load the first request in place, because there is no web view
currently showing
if (self.makingFirstRequest) {
self.makingFirstRequest = NO;
return YES;
}

// The web view that is currently showing originated the request
if (webView == self.visibleWebView) {
[self.hiddenWebView loadRequest:request];

[UIView animateWithDuration:duration animations:^{
// Some desired animation here
} completion:^(BOOL finished) {
UIWebView *oldVisibleWebView = self.visibleWebView;
self.visibleWebView = self.hiddenWebView;
self.hiddenWebView = oldVisibleWebView;
}
return NO;
}

return YES;
}


2) webコンテンツとネイティブアプリの間の遷移を磨く


まず、新しいURLスキーム、例えば ‘mobile-event’ を定義する。ネイティブアプリとやり取りする際に、webコンテンツはブラウザにこのスキームをもったURLを開くように指示する。Yelpでは、モバイルサイトにこのカスタムURLをもったiframeを読み込ませ、すぐに閉じる。アプリはこのURLが開いたのを検知し、delegateメソッドの”web view event”に適切に対応しなくてはいけなくなる。


- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType {

// Detect a web view event
if ([request.URL.scheme isEqualToString:@”mobile-event”]) {

// Execute code here for the event

// Make sure to return NO or the web view will try to load a fake URL
return NO;
}

// Execute normal URL request handling logic
}


アプリがweb view eventに反応してどうするかは状況次第だが、例えば、新しいwebでないviewを読み込むか、ナビゲーションスタックにある既存のviewに戻る場合などがある。この方法でweb viewとネイティブアプリ間のページ遷移がスムーズにできる。


3) 参考例: Yelp Platform


店舗にオーダーをできるYelp Platform機能は現在モバイルウェブにあり、ネイティブアプリではweb viewで表示される。iOSアプリで、「注文受取り」もしくは「配達」ボタンを押すと、注文フォームのあるweb viewが読み込まれる。(スクリーンショット1 スクリーンショット2


そしてweb view controllerがメニューを画面にアニメーション挿入し、ネティブっぽい遷移を実現する。(スクリーンショット3


ユーザが支払を完了(スクリーンショット4)すれば、モバイルサイトがweb view eventを送り、iOSアプリはそれを検知し、business view画面に戻り、注文完了 & メール送信が表示される。(スクリーンショット5




Yelp: データの正確性を競合サイトと比較してチェックする



#yelp #モバイル #モバイルアプリ #iphone #ios #ui #ux

Back