gracetory’s blog

東池袋にある合同会社グレストリのエンジニアブログです

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

f:id:ykira:20180521181651p:plain

こんにちは。ykiraです。

さて、前回の続きです。

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

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

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

カスタマイズの内容

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

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

github.com

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

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

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

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

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

// 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のコミットログを参照してくださいー

最終的なUI

このようなUIになりました。

f:id:ykira:20180521190130j:plain

自分では満足できるデキになりました。

まとめ

2回に渡って私が副業でアプリ制作をした時のお話でした。

Monaca(Cordova)にはもう少し見栄えが良くカスタマイズできるアプリ内ブラウザを用意してほしいものです。

さて、前回も言いましたが弊社は副業を推奨しております。

会社の業務で得た知識で副業をして、副業で得た知識をまた業務で活かしていただければ最高ですね。

副業もやりたーいという方、是非弊社にご応募いただければと思います!

求人はこちら↓、2018/07/05まで掲載しております!!

tenshoku.mynavi.jp

それでは。