Monaca(Cordova)でThemeableBrowser(アプリ内ブラウザ)プラグインをカスタマイズした話(Android編)

f:id:ykira:20180521181651p:plain

こんにちは。ykiraです。

さて、前回の続きです。

前回の記事は↓です。 techblog.gracetory.co.jp

ボタンは表示できたものの、UIが理想とはかけ離れていたので修正したお話です。

ちなみに、Androidの方でしかチェックしてないのでiOSはよくわかりません(そのうちやってみます)

(6/18 追記)iOSでもやりましたー↓ techblog.gracetory.co.jp

カスタマイズの内容

カスタマイズしたものをGithubに上げました。

使い方はREADMEを参照してください。

github.com

修正点は大きく3つです。

(1) ツールバーを画面下に表示するように修正

WEBサイトを開いた際に上部にはヘッダーが表示されていたので、ツールバーは下に表示するようにしました。

片手で操作するときにも、上より下のほうが操作し易いですし。

src/android/ThemeableBrowser.javaの950行目付近にWebViewとtoolbarをaddViewしている箇所があったので修正しました。

// WebViewをaddしたあとにtoolbarをaddする
if (features.fullscreen) {
    main.addView(inAppWebView);
}

if (!features.fullscreen) {
    main.addView(inAppWebView);
}

if (features.location) {
    main.addView(toolbar);
}

(2) 戻る・進むが正しくenable状態にならないのを修正

こちらの解決にかなり時間を要しました。

アプリ内ブラウザでページ遷移した際に戻るボタンや進むボタンが押下できる状態になりませんでした。

ちなみに標準のInAppBrowserでも同じ症状だったので、Webサイトの作りに問題があったのかもしれません？

デバッグをしてみるとバグなのかなんなのかわかりませんが、ページ読み込み時に呼び出されるはずのメソッドshouldOverrideUrlLoading()やonPageFinished()が遷移するページによって呼ばれたり呼ばれなかったりしています。

ということでページの遷移をキャッチすることができなかったので、苦肉の策としてリソース読み込み時に呼ばれるonLoadResource()でページが読み込まれた場合のみ、BackForwardListを取得して戻るボタンと進むボタンの更新を行うようにしました。

private static final String WEB_URL = "https://www.yahoo.co.jp/";

public void onLoadResource(WebView view, String url) {
    super.onLoadResource(view, url);

    if (url.startsWith(WEB_URL)) {
        WebBackForwardList list = inAppWebView.copyBackForwardList();
        int current_idx = list.getCurrentIndex();
        int max_idx = list.getSize();

        if (this.callback != null) {
            this.callback.onLoadResource(url, (max_idx > 0), view.canGoForward());
        }
    }
}

これで正しくボタンが反応するようになりました。

(3) リロード機能を追加

ブラウザの更新機能がなかったので追加してみました。

が、これはプラグインには既に実装済みで、jsなどからブラウザ起動する際にイベントを設定するだけです。

      // 起動時にインスタンスを取得
      browser = cordova.ThemeableBrowser.open(url, '_blank', {
      
      // カスタムボタン押下時にreloadPressedイベント
      customButtons: [
            {
                image: 'reload',
                imagePressed: 'reload_pressed',
                align: 'right',
                event: 'reloadPressed'
            }
        ],

    // reloadPressedイベント時に呼び出されるメソッドを設定
    }).addEventListener('reloadPressed', function(e) {
        doBrowserReload();
    }

// ブラウザ更新
function doBrowserReload() {
    browser.reload();
}

この辺、GithubのREADMEにも書いてますので確認してみてください。

その他の細かい修正などはGithubのコミットログを参照してくださいー