Help us understand the problem. What is going on with this article?

[Android] Chrome Custom Tabs

More than 1 year has passed since last update.

Custom Tabs機能は、Chrome 45から導入されました。
Custom Tabsを使用することにより、これまでよりもWebページの読み込みを高速化させることができます。
どのくらい違うかは、Chrome Custom Tabs で確認できます。

この他にも、WebViewの動作速度や脆弱性の問題などがありますが、最新版のChromeを使うことにより、これらの問題も解消されます。そして、Custom Tabsでは、Internetパーミッションを必要としません。これは、Custom Tabsを組み込んでいるアプリが直接インターネットに接続しているわけではなく、Customアプリがインターネットに接続しているためです。

Custom Tabsの準備

Custom Tabsをアプリへ導入するには、Android Studioにサポートライブラリを組み込みます。
app/guild.gradleのdependenciesにcustomtabsを追加します。

app/guild.gradle
dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    testCompile 'junit:junit:4.12'
    compile 'com.android.support:appcompat-v7:23.1.1'
    compile 'com.android.support:customtabs:23.1.1'
}

Custom Tabsのテスト

src/MainActivity.java
public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        String url = "https://www.google.co.jp";
        CustomTabsIntent.Builder builder = new CustomTabsIntent.Builder();
        CustomTabsIntent customTabsIntent = builder.build();
        customTabsIntent.launchUrl(this, Uri.parse(url));
    }

}

WebページをCustom Tabsで表示するだけであれば、コードはこれだけです。

Custom Tabsは、Chromeのバージョン45から導入されましたので、Chromeのバージョン45以下またはChromeがインストールされていない場合は、端末にインストールされているブラウザが起動します。
この仕組みは、通常のIntentの動作と同じでなので、開発者が意識する必要はありません。

Custom Tabsのさらなる準備

Custom Tabsのテストで行った処理では、端末によってブラウザの選択画面が出たりすることがあります。
そこで、CustomTabsIntent.intentにChromeのパッケージ名を設定します。

Chromeのパッケージ名を取得するためには、CustomTabsHelperクラスを使用します。
CustomTabsHelperクラスは、Googleが提供しているChrome Custom TabsのサンプルにあるSharedプロジェクトを組み込むことによって使用できます。

Custom Tabsの準備でサポートライブラリを組み込みましたが、ここでは、Sharedプロジェクトとバージョンを合わせるために、サポートライブラリを使用せず、customtabsプロジェクトを使用します。

customtabsとsharedの準備

customtabsとsharedは、GoogleChrome/custom-tabs-client から取得できます。
取得したcustomtabsとsharedをプロジェクトのルートへコピーし、settings.gradeとapp/guild.gradleを編集します。

settings.gradle
include ':app',':customtabs',':shared'
settings.gradle
dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    testCompile 'junit:junit:4.12'
    compile 'com.android.support:appcompat-v7:23.1.1'
    compile project(':customtabs')
    compile project(':shared')
}

Custom Tabsのパッケージ名を指定したテスト

src/MainActivity.java
public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        String url = "https://www.google.co.jp";

        // 追加
        String packageName = CustomTabsHelper.getPackageNameToUse(this);

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

        // 追加
        customTabsIntent.intent.setPackage(packageName);

        customTabsIntent.launchUrl(this, Uri.parse(url));
    }

}

これで、Chromeのバージョン45以上がインストールされていれば、正しくChromeが起動するようになります。Chromeのバージョン45以下またはChromeがインストールされていない場合は、端末にインストールされているブラウザが起動します。

Chrome Custom Tabsには、これ以外にも、

  • Toolbarでは、色や表示内容の変更、閉じるボタンのアイコンの変更、アクションボタンの追加
  • オーバーフローメニューへのメニューの登録
  • Webページ切り替え時のアニメーション
  • PreFetch機能によるWebサイトの先読み(画面遷移時の表示速度の高速化)

など、これからのアプリ開発に役立つ機能が沢山あります。
カスタマイズすることによりアプリの統一感が生まれますので、アプリの世界観を損なうことがなくなるのも大きなメリットではないでしょうか。

みなさんのアプリでも、一度Chrome Custom Tabsを試してみてはいかがでしょうか。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away