Android
AndroidStudio

[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を試してみてはいかがでしょうか。