iOS WebView App
•
29 likes•14,496 views
社内iOS WebVeiwアプリ勉強会の資料に補足追加した物。 iOSのハイブリッドアプリ開発における、UIのパフォーマンスや設計について。
Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (20)
Similar to iOS WebView App
Similar to iOS WebView App (20)
More from hagino 3000
Recently uploaded
Recently uploaded (9)
iOS WebView App
- 1. iOS WebView App @hagino3000 2013-12-12 社内的な勉強会 atVOYAGE GROUP
- 3. なぜWebView上にアプリを 構築するのか • 任意のタイミングでアプリケーション をアップデートしたい • WebでUI作った方が楽そうだから • そんな事は無い → あとで死ぬ
- 4. 実装戦略
- 5. 実装戦略 • HTML, CSS, JSのリソースをアプリにバン ドルする or NOT • Single Page Web App or NOT • ネイティブUIパーツを使う or NOT
- 6. HTML, CSS, JSファイルを アプリにバンドルするか • 完全にオフラインで動作させる事が可能 • それ以外メリット無し
- 7. Single Page Web Appにするか • Single Page • JSの実装量は増える • なんらかのJSフレームワークを使う Sencha Touch, AngularJS etc... • Multi Page • 作りはシンプルになる
- 8. (番外編) Multi UIWebView • ページ毎にUIWebViewを作る • ネイティブのトランジションが使える • 試してない
- 10. iOSのUIパーツを使うか • NavigationBar, UIAlertView, UIActionSheet etc.. • 使った方が楽 (モーダル制御等) • ネイティブUIを呼び出すブリッジを作る • ブラウザでデバッグできるようにPolyfillを 用意しておく
- 11. UIWebView
- 12. UIWebView iOSVersion Browser Component iOS 6 iOS Safari 6.x iOS 7 iOS Safari 7.0 機能比較 http://caniuse.com/#compare=ios_saf+6.0-6.1,ios_saf+7.0
- 13. コンテンツの配置
- 16. スクロールの制御 • Single Page Web App Height 100%のブロック要素を並べて、 その中でスクロールさせる場合はデフ ォルトのスクロールが邪魔になる。 (二重スクロール) • そうでない場合はscrollViewのスクロー ルを使う
- 17. スクロールの制御 // UIScrollViewのスクロールを無効にする webView.scrollView.scrollEnabled = NO; /* CSSでブロック要素の慣性スクロールを有効にする */ article.page{ box-sizing: border-box; position: absolute; width: 100%; height: 100%; top 0; left: 0; overflow: scroll; -webkit-overflow-scrolling: touch; }
- 18. スクロール速度 scrollView.decelerationRate = UIScrollViewDecelerationRateNormal; // デフォルトは UIScrollViewDecelerationRateFast 慣性スクロールの減速が緩くなる。scrollViewのスクロ ールを使う場合は設定する。 CSSでブロック要素の慣性スクロールを有効にした場 合は UIScrollViewRateNormal 相当になる。
- 19. NavigationBar • ポジション固定にする場合はネイティブのを 使うと楽 • NavigationBarを半透明にして、背後にもコンテ ンツを配置したい (iOS7) • 初期表示でnavbarの下にコンテンツが潜りこ まないようにscrollViewの調節が必要 • webView.scrollView.contentInset • webView.scrollView.contentOffset • webView.scrollView.scrollIndicatorInsets
- 20. position: fixed • 効かない • スクロールに引きずられる • iScroll • onScrollイベントを監視してposition:fixedを再 現している • https://github.com/cubiq/iscroll • 代替策として別のViewにして配置するのもアリ
- 21. テキスト入力 1. <input type=”text”> or <textarea> にフォーカス 2. Keyboard Windowがせり上ってくる 3. document.scrollTopがずれる • テキスト入力パーツはなるべく画面上部に配置す る。下の方だと最悪Keyboard Windowが被る。 • scrollViewのスクロールを無効にしているとユーザ ーが元に戻せない。 →入力後にscrollTopを調整する。 • JavaScriptからキーボードの上げ下げを可能にして おく
- 22. その他よくやる設定 <!-- 電話番号らしき数列をリンクにするのを無効化 --> <meta name="format-detection" content="telephone=no"> body { /* 文字列のコピーや選択をできなくする */ -webkit-user-select:none; /* リンクの長押しメニューを出なくする */ -webkit-touch-callout:none; /* アンカー要素をタップした時に出現する枠を見えなくする */ -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }
- 23. ネイティブとの連係
- 24. To WebView NSString *js = @”window.App.hello();”; [self.webView stringByEvaluationgJavaScriptFromString:js]; // 例：ネイティブからsessionId, userId etc.. を渡す NSString *js = [NSString stringWithFormat: @”window.App.deviceReady({ sessionId: ‘%@’, userId: ‘%@’, apiBase: ‘%@’ });”, self.sessionId, self.user_id, @”http://api.hoge.com”]; [self.webView stringByEvaluatingJavaScriptFromString:js];
- 25. From WebView 1. 独自スキーマを指定してlocationを変更 2. UIWebViewDelegateのshouldStartLoadWithRequest でフック 3. なにかやる 4. UIWebViewのstringByEvaluatingJavaScriptFromString で結果を返す ヒント：PhoneGapのソースの方がこのスライドよりも参考になる https://github.com/phonegap/phonegap/blob/master/lib/ios/CordovaLib/cordova.js
- 26. // JS側の実装例 var transactionId = 0; function nativeBridge(action, params, callback) { // 後で呼び出すためにコールバック関数を保持する var transactionId = transactionId++; callbacks[transactionId] = callback; var data = encodeURIComponent(JSON.stringify({ transactionId: transactionId, params: params })); // iframeのlocation変更リクエストはWebViewDelegateで // フックできる var frame = $('<iframe>').attr('src', 'MyActionHandler://' + action + '/' + data ).css({display: "none"}); $(document.body).append(frame); frame.remove(); }
- 27. // Objective-C - (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType { // Check schema if ([[request.URL.scheme lowercaseString] isEqualToString:@”MyActionHandler”]) { // なんかやる return NO; } return YES; }
- 28. App.nativeBridge(‘alert’, { title: “Error”, message:“Sorry...”, buttonTitle: “OK” }, function(){ // UIAlertViewのOKボタンがタップされた }) 使用例
- 29. 最初から作っておくと便利 • キーボードWindowの上げ下げ • Alert • Confirm • ActionSheet • ジェスチャー認識
- 30. リクエストのフック • UIWebViewDelegateのshouldStartLoadWithRequest ⃝ ロケーション変更 (iframe含む) ⃝ リロード (iframe含む) ⃝ フォームサブミット × XMLHttpRequest × script要素、link要素、img要素による通信 • NSURLProtocol • 全ての通信をフックできる、ホワイトリストを 実装するならこちら
- 31. リクエストのフックの応用 • ロケーション変更時、ドメインによって処理を変 える(ex 自サービスの外に出る場合はSafariで開く) • 認証情報の付加 • NSMutableURLRequestを操作してcookieや独自 ヘッダを付加する • ホワイトリスト (NSURLProtocol) • しかし、アドネットワークを利用して広告を表 示しているとホワイトリストのメンテは困難を 極める
- 32. パフォーマンス
- 33. Clickイベントが遅延する問題 • タッチデバイスブラウザはtouchstart後clickイベント までの間隔が300msec程度空く • リンククリックの反応が遅い • もっさり感 • 解決策 • FastClick.js • clickイベントが速くなる、リンククリックも改善 • jQuery mobileであればvclickイベントを使う • clickでは無くtouchendイベントを使う (ブラウザのデバッグが面倒になる)
- 34. DOM操作のチューニング • DOM操作は最小限に、変更が必要な箇所のみ • アニメーションはGPUを効かせる • -webkit-transform: translate3d を使う • レイアウトの再計算が発生する回数を減らす • 例 • offsetHeightを取得して挿入した要素の高さだけ スクロール位置を下にずらす処理 • DOM操作全てが終ったタイミングで行なう
- 35. 無限リスト • DOMツリーが増え続けると重くなる • iOSのテーブルセルの再利用のような仕組みが必要 になる • iOS SDKのUITabelViewCellの標準機能だけどDOM にはそんな物無いです……
- 36. デバッグ
- 37. ブラウザでデバッグ可能にする Chromeで開発 and デバッグ ↓ iPhoneシミュレーターで開発 and デバッグ ↓ 実機 (最終確認)
- 38. • ブラウザでデバッグする際はネイティブ機能呼び出 しのブリッジを差しかえる (Alert, ActionSheet ...) • AppDelegate相当の物を作っておく • イベント受信部 • Push通知, Navigationbar button操作, on/offline.. • どの画面からでも開始できるようにしておく • 画面遷移して到達しないと機能しない画面はデバ ッグしづらい。なるべくステートレスに。 • Chromeのエミュレーションモード • iPhone5, 4S etc... 選べるがイマイチ ブラウザでデバッグ
- 39. Chromeのエミュレートモード
- 40. • オートリロード必須 • リロードするのが手間 • grunt auto-reload を使う • JS, HTMLはソース編集と同時にリロード • CSSはDOMの状態を維持したまま変更が反映さ れる • window.onerrorでキャッチした例外をXcodeのロ グに吐くようにしておく(特に発生行数) • Safariの開発メニューから、開発者コンソールを アタッチできる iOSシミュレーターでデバッグ
- 41. • ローカルサーバーと通信してると何もかもが一瞬で 取得できてしまう • Network Link Conditioner を使う • 使わないと3G回線の速度を再現できない • 通信中インジケーターをゆっくり眺められる 通信状況のエミュレート
- 42. 通信状況のエミュレート
- 44. サーバーAPIの実装
- 45. • 素直なRESTful APIにしておく • Request • content-type: application/json • Response • content-type: application/json 設計 モダンなJavaScriptライブラリはこれが前提になって いたりする(ex. backbone.js)。道を外れると一気に工 数が跳ね上がる。
- 46. • APIサーバーはCross Domain XHRに対応しておく • HTML, JS, CSSはlocalhost (grunt server)で編集 • APIサーバーはAWS上の開発機を参照してAjaxで 叩く • デザイナー or フロント担当エンジニアはローカ ルに静的ファイルの開発環境のみ作れば良い • 認証情報を独自ヘッダに持たせている場合 • OPTIONSのプリフライトリクエストが飛ぶので APIサーバーをCORSに対応させておく 開発時
- 47. まとめ
- 48. • とにかくブラウザでデバッグする • UIの実装はネイティブ同様時間がか かる (楽はできない) • 覚悟が必要 まとめ