タブブラウザSDKを作った話 #yjcamp

446 Views

April 20, 17

スライド概要

2017/04/19 CAMPFIRE Android #1
https://yj-meetup.connpass.com/event/53419/

profile-image

2023年10月からSpeaker Deckに移行しました。最新情報はこちらをご覧ください。 https://speakerdeck.com/lycorptech_jp

シェア

またはPlayer版

埋め込む »CMSなどでJSが使えない場合

関連スライド

各ページのテキスト
1.

タブブラウザSDK を 作った話 2017年4月20日 小林 俊 Yahoo! JAPAN アプリエンジニア Co p yrig ht © 2 0 1 7 Yaho o Jap an Co rp o ratio n. All Rig hts Reserved .

2.

アジェンダ ・自己紹介 ・背景 ・タブブラウザSDKとは ・三桁を実現させるタブの管理 ・WebViewとCoordinatorLayout 2 Co p yrig ht © 2 0 1 7 Yaho o Jap an Co rp o ratio n. All Rig hts Reserved .

3.

自己紹介 名前: 小林 俊(こばやし しゅん) 担当サービス: Yahoo! JAPAN アプリ Android歴:そろそろ2年 アイマス歴:そろそろ10年 3 Co p yrig ht © 2 0 1 7 Yaho o Jap an Co rp o ratio n. All Rig hts Reserved .

4.

背景 Yahoo!ブラウザ Yahoo! JAPAN ブラウザ機能を持つ2つのアプリ 4 Co p yrig ht © 2 0 1 7 Yaho o Jap an Co rp o ratio n. All Rig hts Reserved .

5.

背景 Yahoo!ブラウザ Yahoo! JAPAN 実は、共通化されたブラウザ機能を利用 5 Co p yrig ht © 2 0 1 7 Yaho o Jap an Co rp o ratio n. All Rig hts Reserved .

6.

タブブラウザSDKとは どんな機能があるの? 6 Co p yrig ht © 2 0 1 7 Yaho o Jap an Co rp o ratio n. All Rig hts Reserved .

7.

タブブラウザSDKとは ・WebView管理 ・タブ管理 ・CoordinatorLayout対応 ・URLスキーマハンドリング ・ページ内検索 ・標準的な振る舞いの提供 7 Co p yrig ht © 2 0 1 7 Yaho o Jap an Co rp o ratio n. All Rig hts Reserved .

8.

タブブラウザSDKとは ・WebView管理 ・タブ管理 ・CoordinatorLayout対応 ・URLスキーマハンドリング ・ページ内検索 ・標準的な振る舞いの提供 8 Co p yrig ht © 2 0 1 7 Yaho o Jap an Co rp o ratio n. All Rig hts Reserved .

9.

タブ管理 三桁を実現させるタブの管理 9 Co p yrig ht © 2 0 1 7 Yaho o Jap an Co rp o ratio n. All Rig hts Reserved .

10.

三桁を実現させるタブの管理 上限N タブ1 タブ2 … タブ3 WebView1 全体像 WebView2 「タブの上限」と 「WebViewの上限」は別扱い … WebView M 10 上限M Co p yrig ht © 2 0 1 7 Yaho o Jap an Co rp o ratio n. All Rig hts Reserved . タブN

11.

三桁を実現させるタブの管理 上限N タブ1 タブ2 タブ3 WebView1 タブ1→2→3の順に開かれた状態 WebView2 4つ目のタブを開くと? WebView3 上限3 11 Co p yrig ht © 2 0 1 7 Yaho o Jap an Co rp o ratio n. All Rig hts Reserved .

12.

三桁を実現させるタブの管理 上限N タブ1 タブ2 タブ3 タブ4 New!!! 破棄 新しく4つ目のタブが開かれると 最もアクセス時刻の古いWebView1 が破棄される WebView2 WebView3 WebView4 12 上限3 Co p yrig ht © 2 0 1 7 Yaho o Jap an Co rp o ratio n. All Rig hts Reserved .

13.

三桁を実現させるタブの管理 上限N タブ1 New!!! ・open Tab1 ・open Tab2 ・open Tab3 ・attach Tab1 ・attach Tab3 ・open Tab4 WebView1 上記手順を踏んだ場合はWebView2が破 棄 上限3 13 Co p yrig ht © 2 0 1 7 Yaho o Jap an Co rp o ratio n. All Rig hts Reserved .

14.

三桁を実現させるタブの管理 上限N タブ1 タブ2 New!!! ・open Tab1 ・open Tab2 ・open Tab3 ・attach Tab1 ・attach Tab3 ・open Tab4 WebView1 WebView2 上記手順を踏んだ場合はWebView2が破 棄 上限3 14 Co p yrig ht © 2 0 1 7 Yaho o Jap an Co rp o ratio n. All Rig hts Reserved .

15.

三桁を実現させるタブの管理 上限N タブ1 タブ2 タブ3 New!!! ・open Tab1 ・open Tab2 ・open Tab3 ・attach Tab1 ・attach Tab3 ・open Tab4 WebView1 WebView2 上記手順を踏んだ場合はWebView2が破 棄 WebView3 上限3 15 Co p yrig ht © 2 0 1 7 Yaho o Jap an Co rp o ratio n. All Rig hts Reserved .

16.

三桁を実現させるタブの管理 上限N タブ1 タブ2 タブ3 再表示 ・open Tab1 ・open Tab2 ・open Tab3 ・attach Tab1 ・attach Tab3 ・open Tab4 WebView2 WebView3 上記手順を踏んだ場合はWebView2が破 棄 WebView1 上限3 16 Co p yrig ht © 2 0 1 7 Yaho o Jap an Co rp o ratio n. All Rig hts Reserved .

17.

三桁を実現させるタブの管理 上限N タブ1 タブ2 タブ3 再表示 ・open Tab1 ・open Tab2 ・open Tab3 ・attach Tab1 ・attach Tab3 ・open Tab4 WebView2 WebView1 上記手順を踏んだ場合はWebView2が破 棄 WebView3 上限3 17 Co p yrig ht © 2 0 1 7 Yaho o Jap an Co rp o ratio n. All Rig hts Reserved .

18.

三桁を実現させるタブの管理 上限N タブ1 タブ2 タブ3 タブ4 New!!! ・open Tab1 ・open Tab2 ・open Tab3 ・attach Tab1 ・attach Tab3 ・open Tab4 破棄 WebView1 上記手順を踏んだ場合はWebView2が破 棄 WebView3 WebView4 18 上限3 Co p yrig ht © 2 0 1 7 Yaho o Jap an Co rp o ratio n. All Rig hts Reserved .

19.

三桁を実現させるタブの管理 破棄されたWebView 保存・復元はどうなるか? 19 Co p yrig ht © 2 0 1 7 Yaho o Jap an Co rp o ratio n. All Rig hts Reserved .

20.

三桁を実現させるタブの管理 ■保存 final Bundle state = new Bundle(); webview.saveState(state); // 保存用のメソッドが用意されている state.putString(“url”, url); state.putString(“title”, title); // あとはファイルへ保存 20 Co p yrig ht © 2 0 1 7 Yaho o Jap an Co rp o ratio n. All Rig hts Reserved .

21.

三桁を実現させるタブの管理 ■復元 // ファイルからBundleを読み込む final String url = state.getString(“url”); final String title = state.getString(“title”); webview.restoreState(state); // 復元も同様に用意されている 21 Co p yrig ht © 2 0 1 7 Yaho o Jap an Co rp o ratio n. All Rig hts Reserved .

22.

三桁を実現させるタブの管理 まとめ ・タブとWebViewは別々に管理 ・不要なWebViewは小まめに破棄 ・WebViewの saveState/restoreStateが便利 22 Co p yrig ht © 2 0 1 7 Yaho o Jap an Co rp o ratio n. All Rig hts Reserved .

23.

CoordinatorLayout対応 WebViewとCoordinatorLayout 23 Co p yrig ht © 2 0 1 7 Yaho o Jap an Co rp o ratio n. All Rig hts Reserved .

24.

WebViewとCoordinatorLayout これだけではダメ! <CoordinatorLayout> <AppBarLayout> <Toolbar app:layout_scrollFlags="scroll|enterAlwaysCollapsed" /> </AppBarLayout> app:layout_behavior=“AppBarLayout$ScrollingViewBehavior"> <FrameLayout <WebView /> </FrameLayout></CoordinatorLayout> 24 Co p yrig ht © 2 0 1 7 Yaho o Jap an Co rp o ratio n. All Rig hts Reserved .

25.

WebViewとCoordinatorLayout https://developer.android.com/reference/android/support/v7/widget/RecyclerView.html https://developer.android.com/reference/android/webkit/WebView.html WebViewにはNestedScrollingChildが実装され ていない。自分で実装が必要。 25 Co p yrig ht © 2 0 1 7 Yaho o Jap an Co rp o ratio n. All Rig hts Reserved .

26.

WebViewとCoordinatorLayout public class CommonWebView extends WebView implements NestedScrollingChild { private final NestedScrollingChildHelper mHelper; private float mPrevY; @SuppressWarnings("CheckStyle") private final int[] mConsumed = new int[2]; これだけでは不十分 ウェブの表現を考慮す る必要がある public CommonWebView(final @NonNull Context context) { super(context); mHelper = new NestedScrollingChildHelper(this); setNestedScrollingEnabled(true); } ・地図操作 ・カルーセル ・ピンチイン・アウト @Override public boolean onTouchEvent(MotionEvent event) { final int action = event.getAction(); switch (action) { … } return super.onTouchEvent(event); } @Override public void setNestedScrollingEnabled(final boolean enabled) { mHelper.setNestedScrollingEnabled(enabled); } (省略) 対応例を次スライドか ら紹介 } 26 Co p yrig ht © 2 0 1 7 Yaho o Jap an Co rp o ratio n. All Rig hts Reserved .

27.
[beta]
WebViewとCoordinatorLayout
横スクロール時に縦スクロールが発生する事による、
WebViewの移動&サイズ変更による操作の阻害
・縦横の移動量を考慮(dy > dx)
・縦についても遊びを持たせる(dy > mTouchSlop)
public CommonWebView(final @NonNull Context context) {
super(context);
final ViewConfiguration configuration = ViewConfiguration.get(context);
mTouchSlop = configuration.getScaledPagingTouchSlop();
}
private void onTouchMove(MotionEvent event) {
if (mScrolling) {
final int dy = (int) (mPrevY - event.getRawY());
dispatchNestedPreScroll(0, dy, mConsumed, null);
final int consumedY = mConsumed[1];
dispatchNestedScroll(0, consumedY, 0, dy - consumedY, null);
} else {
final float dx = Math.abs(mStartX - event.getRawX());
final float dy = Math.abs(mStartY - event.getRawY());
if (dy > dx && dy > mTouchSlop && mScrollable) {
mScrolling = true;
startNestedScroll(ViewCompat.SCROLL_AXIS_VERTICAL);
}
}
}

27

Co p yrig ht © 2 0 1 7

・地図操作
・カルーセル
・ピンチイン・アウト

Yaho o Jap an Co rp o ratio n. All Rig hts Reserved .

28.

WebViewとCoordinatorLayout スクロール操作以外で動かないようにする。 ・タッチポイントの数を検知 (event.getPointerCount() != 1) @Override public boolean onTouchEvent(MotionEvent event) { final int action = event.getAction(); switch (action) { case MotionEvent.ACTION_DOWN: (略) case MotionEvent.ACTION_MOVE: if (event.getPointerCount() != 1) { break; } onTouchMove(event); break; case MotionEvent.ACTION_UP: case MotionEvent.ACTION_CANCEL: (略) default: break; } mPrevY = event.getRawY(); return super.onTouchEvent(event); } 28 Co p yrig ht © 2 0 1 7 ・地図操作 ・カルーセル ・ピンチイン・アウト Yaho o Jap an Co rp o ratio n. All Rig hts Reserved .

29.

WebViewとCoordinatorLayout WebViewサイズいっぱいで 操作させるページで動かないように。 ・サイトのコンテンツサイズ(高さ)と WebViewのサイズを比較 @Override protected int computeVerticalScrollRange() { final int verticalScrollRange = super.computeVerticalScrollRange(); mScrollable = verticalScrollRange > getHeight() + mScrollMargin; return verticalScrollRange; } 29 Co p yrig ht © 2 0 1 7 ・地図操作 ・カルーセル ・ピンチイン・アウト Yaho o Jap an Co rp o ratio n. All Rig hts Reserved .

30.

WebViewとCoordinatorLayout まとめ ・WebViewにNestedScrollChildを実装 ・ウェブサイトの作りへの考慮が必要 30 Co p yrig ht © 2 0 1 7 Yaho o Jap an Co rp o ratio n. All Rig hts Reserved .

31.

ご静聴ありがとうござ いました! Co p yrig ht © 2 0 1 7 Yaho o Jap an Co rp o ratio n. All Rig hts Reserved .