Monaca(Cordova)でThemeableBrowser(アプリ内ブラウザ)プラグインのボタンを表示する方法

f:id:ykira:20180517182422p:plain

暑い日が続いていますが、皆様いかがお過ごしでしょうか。

WOWOWの「連続ドラマW」シリーズにハマっているykiraと申します。

社会派ドラマが好きなので「空飛ぶタイヤ」や「株価暴落」など、池井戸潤原作の作品が好きです。

「半沢直樹」や「下町ロケット」が好きな人は気に入ると思いますので、ぜひ見てみてください！

Monaca(Cordova)でアプリを作りました

先日、簡単なアプリをMonacaで作ることになりました。

会社の業務ではなく、友達から頼まれた、いわゆる副業ですね。

ちなみに、弊社は副業を推奨しております。

・・・で、アプリ内ブラウザが必要だったためMonaca(Cordova)がオススメしている？標準プラグインを使用したのですが、ありえない見た目だったのでなんとかしたというお話です。

Monaca(Cordova)とは？

HTML & css & JavaScriptなどのWeb標準言語でスマホアプリが作れるという優れものです。

ja.monaca.io

実際に使った感想としては、すごく簡単なものなら問題なく作ることができます。

ただ、ちょっとこだわりたかったり、特殊な事をやりたい場合には合ってないかなと思いました。

Android StudioとかXcodeを触らずにアプリをビルド出来たりするので、楽ではあるんですけどね。

無料でもプラグインカスタマイズとかしないなら普通に使えるので、気になる方はチェックしてみてください。

Monaca(Cordova)のアプリ内ブラウザって？

InAppBrowserってやつです。

github.com

Monacaの標準プラグインにもあり、無料プランでも使用することができます。

ただ、デフォルトのUIがちょっと、、、という感じで、ネットで検索すると「見た目をカスタマイズしたい」という質問が大量にでてきます。

で、回答はきまって「できません」

アプリ自体はHTMLが使えるのでiframeとか使えば好きに作れると思いますが、最近はX-Frame-Optionsで禁止されている場合も多いですよね。

なので、なんとか「簡単に」アプリ内ブラウザの見た目をマシにしたいところです。

f:id:ykira:20180518121300j:plain:w300 — InAppBrowserの表示

カスタマイズ可能なアプリ内ブラウザプラグイン

それが、ThemeableBrowserです。

github.com

ちなみにこちらはMonaca標準プラグインではないので、有料プランでしか使えません。

Githubからzipをダウンロードして、Monacaの「Cordovaプラグインの管理」でインポートすれば使えるようになります。

こっちはInAppBrowserよりはカスタマイズできるので多少マシです。

カスタマイズの方法はREADME.mdに書かれているので、概ね分かると思います。

ただ、Cordova用であってMonaca用ではないので、細かいところでどうやったらいいかわからない部分が出てきます。

なんと、デフォルトではツールバーのボタン画像すら表示されません！

f:id:ykira:20180518125438j:plain — ThemeableBrowserの表示

ボタン画像の設定方法

さてやっと本題の「戻る」「進む」などのツールボタン画像をどうやって設定したらいいかというところです。

Cordovaの説明通りではMonacaでどうやったら良いかわかりませんでしたので、調べました。

あまり情報は無いのですがなんとか調べた結果、ThemeableBrowserのplugin.xmlに下記のように書くと設定できることがわかりました。

・plugins/cordova-plugin-themeablebrowser/plugin.xml
<platform name="android">
    …
    <resource-file src="src/android/res/drawable-xhdpi/back.png" target="res/drawable-xhdpi/back.png" />
    <resource-file src="src/android/res/drawable-xhdpi/back_pressed.png" target="res/drawable-xhdpi/back_pressed.png" />
    <resource-file src="src/android/res/drawable-xhdpi/forward.png" target="res/drawable-xhdpi/forward.png" />
    <resource-file src="src/android/res/drawable-xhdpi/forward_pressed.png" target="res/drawable-xhdpi/forward_pressed.png" />
    <resource-file src="src/android/res/drawable-xhdpi/close.png" target="res/drawable-xhdpi/close.png" />
    <resource-file src="src/android/res/drawable-xhdpi/close_pressed.png" target="res/drawable-xhdpi/close_pressed.png" />
    <resource-file src="src/android/res/drawable-xhdpi/share.png" target="res/drawable-xhdpi/share.png" />
    <resource-file src="src/android/res/drawable-xhdpi/share_pressed.png" target="res/drawable-xhdpi/share_pressed.png" />
    <resource-file src="src/android/res/drawable-xhdpi/menu.png" target="res/drawable-xhdpi/menu.png" />
    <resource-file src="src/android/res/drawable-xhdpi/menu_pressed.png" target="res/drawable-xhdpi/menu_pressed.png" />
</platform>