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

Copyrig ht © 2017 Yahoo Japan Corporation. All Rig hts Reserved .

小林俊 Yahoo! JAPAN アプリエンジニア

タブブラウザSDK

を

作った話

2017年4月20日


アジェンダ

2

・自己紹介

・背景

・タブブラウザSDKとは

・三桁を実現させるタブの管理

・WebViewとCoordinatorLayout


自己紹介

3

名前：小林俊（こばやししゅん）

担当サービス：Yahoo! JAPANアプリ

Android歴：そろそろ２年アイマス歴：そろそろ１０年


背景

4

Yahoo! JAPANYahoo!ブラウザ

ブラウザ機能を持つ２つのアプリ


背景

5

Yahoo! JAPANYahoo!ブラウザ

実は、共通化されたブラウザ機能を利用


タブブラウザSDKとは

6

どんな機能があるの？



7

・WebView管理

・タブ管理

・CoordinatorLayout対応

・URLスキーマハンドリング

・ページ内検索

・標準的な振る舞いの提供



8

・WebView管理

・タブ管理

・CoordinatorLayout対応

・URLスキーマハンドリング

・ページ内検索

・標準的な振る舞いの提供


タブ管理

9

三桁を実現させるタブの管理



10

タブ１タブ２タブ３タブN…

WebView１

WebView２

WebView M

…上限M

上限N

全体像

「タブの上限」と「WebViewの上限」は別扱い



11

タブ１タブ２タブ３

上限N

WebView１

WebView２

WebView３

上限３

タブ１→２→３の順に開かれた状態

４つ目のタブを開くと？



12


上限N

WebView２

WebView３

上限３

タブ４

New!!!

WebView４

破棄

新しく４つ目のタブが開かれると最もアクセス時刻の古いWebView１が破棄される



13

タブ１

上限N

・open Tab1・open Tab2 ・open Tab3・attach Tab1・attach Tab3・open Tab4

上記手順を踏んだ場合はWebView２が破棄

WebView１

上限３

New!!!



14

タブ１タブ２

上限N



WebView１

WebView２

上限３

New!!!



15


上限N



WebView１

WebView２

WebView３

上限３

New!!!



16


上限N



WebView１

上限３

再表示

WebView２

WebView３



17


上限N



WebView２

WebView３

上限３

再表示

WebView１



18


上限N

タブ４



WebView１

WebView３

上限３

New!!!

WebView４

破棄



19

破棄されたWebView

保存・復元はどうなるか？



20

final Bundle state = new Bundle();

webview.saveState(state); // 保存用のメソッドが用意されている

state.putString(“url”, url);state.putString(“title”, title);

// あとはファイルへ保存

■保存



21

// ファイルからBundleを読み込む

final String url = state.getString(“url”);final String title = state.getString(“title”);

webview.restoreState(state); // 復元も同様に用意されている

■復元



22

まとめ

・タブとWebViewは別々に管理

・不要なWebViewは小まめに破棄

・WebViewの

saveState/restoreStateが便利


CoordinatorLayout対応

23

WebViewとCoordinatorLayout



24

これだけではダメ！

<CoordinatorLayout> <AppBarLayout> <Toolbar app:layout_scrollFlags="scroll|enterAlwaysCollapsed" /> </AppBarLayout> <FrameLayout

app:layout_behavior=“AppBarLayout$ScrollingViewBehavior">

<WebView /></FrameLayout></CoordinatorLayout>



25

https://developer.android.com/reference/android/support/v7/widget/RecyclerView.html

https://developer.android.com/reference/android/webkit/WebView.html

WebViewにはNestedScrollingChildが実装されていない。自分で実装が必要。



26

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);

}

（省略）}

これだけでは不十分

ウェブの表現を考慮する必要がある

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

対応例を次スライドから紹介



27

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);

}}

}

横スクロール時に縦スクロールが発生する事による、WebViewの移動＆サイズ変更による操作の阻害・縦横の移動量を考慮（dy > dx）・縦についても遊びを持たせる（dy > mTouchSlop）




28

@Overridepublic 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);

}

スクロール操作以外で動かないようにする。・タッチポイントの数を検知

(event.getPointerCount() != 1)




29

@Overrideprotected int computeVerticalScrollRange() {

final int verticalScrollRange = super.computeVerticalScrollRange();mScrollable = verticalScrollRange > getHeight() + mScrollMargin;return verticalScrollRange;

}

WebViewサイズいっぱいで操作させるページで動かないように。

・サイトのコンテンツサイズ（高さ）とWebViewのサイズを比較




30

まとめ

・WebViewにNestedScrollChildを実装

・ウェブサイトの作りへの考慮が必要


ご静聴ありがとうござ

いました！

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

Technology