LoginSignup
19
5

More than 5 years have passed since last update.

ChromeCustomTabs試してみました

Last updated at Posted at 2016-12-01

はじめに

二日目を担当させていただきます。
よろしくお願いします。

普段、Androidアプリの開発を担当しています。

ネイティブ化を進めていますが、
なんやかんやまだwebページを表示するという場合がまだあるのが現状なので、
試そう試そうと思ってできていなかった、ChromeCustomTabsについて書きます!

ChromeCustomTabsを使ってみる

アプリでwebページを表示する際WebViewを使っていたのですが、
設定項目も多く結構自分で作り込まなければならない部分が多いのです...
(参考:WebView

ユーザーがアプリを何気なく使っていて、
ムム!ここから急に遅い!って感じさせてしまうこともやはり良くない..

と、いうことでGoogle I/O 2015で発表されたChromeCustomTabsです。(もう1年前..w)
高速で動くと聞いていたので、期待!

最低限だと、下記で動きます。

build.gradle
dependencies {
    compile 'com.android.support:customtabs:23.1.1'
}
MainActivity
CustomTabsIntent.Builder builder = new CustomTabsIntent.Builder();
final CustomTabsIntent tabsIntent = builder
        .setShowTitle(true)
        .enableUrlBarHiding().build();
tabsIntent.launchUrl(this, Uri.parse("url"));

導入はとっても簡単でした。
弊社の公式ページを表示してみました。

bloggif_583e60c58408f.gif

ただ、これだと普通に外部ブラウザを開いた感ですよね。

ChromeCustomTabsをカスタマイズしてみる

ちょっといじってみます!

・toolbar変更(せっかくなのでコーポーレートカラーにw)
・closeボタン変更
・アクションとしてシェア機能を追加
・下にスクロールした時にtoolbarを消す

これらを追加したのが、下記です。

MainActivity
//シェア機能の処理
final Intent intent = new Intent(Intent.ACTION_SEND)
        .setType("text/plain")
        .putExtra(Intent.EXTRA_TEXT, "url");

final PendingIntent pendingIntent = PendingIntent.getActivity(this, 0, intent, 0);
final Bitmap icon = BitmapFactory.decodeResource(getResources(), R.drawable.ic_share);

CustomTabsIntent.Builder builder = new CustomTabsIntent.Builder();

//toolbarの色、閉じるボタン設定
final CustomTabsIntent tabsIntent = builder
        .setShowTitle(true)
        .setToolbarColor(ContextCompat.getColor(this, R.color.orange))
        .setCloseButtonIcon(BitmapFactory.decodeResource(getResources(), R.drawable.ic_arrow_back))
        .enableUrlBarHiding()
        .setActionButton(icon, "share", pendingIntent).build();

tabsIntent.launchUrl(this, Uri.parse("url"));

(参考:CustomTabsIntent.Builder

公式で速さの比較がされていましたが、真似して自分も3パターンを表示してみました。

左から、
①ChromeCustomTabsを使ってカスタマイズしたもの
②外部ブラウザで開いたもの
③WebView(最低限の実装だとうまく対応してくれなかったのでちゃんと開けずすみませんw
今回はwebviewが主役ではないので一旦これでw)

bloggif_583e5f36d1b99.gif bloggif_583e6453d88ae.gif  bloggif_583e628fdada0.gif

少しカスタマイズしただけですが、
最低限のものと比べるとアプリっぽく馴染んだかと思います。
速さは1ページだと若干伝わりにくいですかね?

違いが伝わってるかちょっと不安になってきましたが、
気にして見てもらえると、結構いろんなアプリで使われています!

所感

今回は公式ページで試しましたが、ECアプリ等で途中までしかネイティブ化出来てない!
という時に違和感なく操作してほしい場合は、とても有効だと思いました!
アプリから離れてwebページに遷移したときに感じるストレスを軽減できそうです。

今後現場などで本格的に導入する場合は、
遷移のときにアニメーションを加えたり、まだまだやりようがありそうなので色々検討しようと思います。

余談ですが、gifを貼るのが地味に苦労しましたw
ちゃんと動いてるか不安ですw

簡単にはなりますが、以上です!

明日の担当は

EichiSandenさん!
よろしくお願いします^^
また、合同ビアバなり飲み会なりしましょうw

19
5
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
19
5