Chromeカスタムタブ

BY admin
|

Chromeカスタムタブとは何ですか？ #

アプリ開発者は、ユーザーがURLをタップしてブラウザを起動するか、WebViewsを使用して独自のアプリ内ブラウザを構築するかの選択肢に直面しています。

両方のオプションには課題があります—ブラウザの起動はカスタマイズ可能ではない重いコンテキストスイッチですが、Webviewはブラウザと状態を共有せず、メンテナンスのオーバーヘッドを追加します。

Chromeカスタムタブを使用すると、アプリはwebエクスペリエンスをより詳細に制御でき、WebViewに頼らずにネイティブとwebコンテンツ間の遷移をよりシーム

Chromeカスタムタブを使用すると、Chromeの外観や感触をカスタマイズできます。 アプリは次のようなものを変更できます:

  • ツールバーの色
  • アニメーションの入力と終了
  • Chromeツールバー、オーバーフローメニュー、下部ツールバーにカスタムアクションを追加

Chromeカスタムタブでは、開発者がChromeを

Githubのサンプルでこれをテストできます。

ChromeカスタムタブとWebViewを使用する必要があるのはいつですか？ #

アプリ内で独自のコンテンツをホストしている場合、WebViewは良い解決策です。 アプリがユーザーをドメイン外のUrlに誘導する場合は、次の理由からChromeカスタムタブを使用することをお勧めします:

  • 実装が簡単です。 要求、許可付与、またはcookieストアを管理するためのコードを構築する必要はありません。

  • UIカスタマイズ:

    • ツールバーの色
    • アクションボタン
    • カスタムメニュー項目
    • カスタムイン/アウトアニメーション
    • 下のツールバーの色
    • アクションボタン

  • ナビゲーション認識:ブラウザは、外部ナビゲーション時にアプリケーションにコールバックを配信します。

  • セキュリティ：ブラウザは、危険なサイトからユーザーとデバイスを保護するために、Googleのセーフブラウジングを使用しています。

  • パフォーマンスの最適化:

    • アプリケーションからリソースを盗む回避しながら、バックグラウンドでブラウザの事前温暖化。
    • ブラウザに事前に可能性の高いURLを提供し、投機的な作業を実行し、ページの読み込み時間を短縮することができます。

  • ライフサイクル管理：ブラウザは、”フォアグラウンド”レベルの重要性を高めることによって、アプリケーションがシステムの上にある間にシステムによ

  • 共有cookie jarと権限モデルにより、ユーザーは既に接続しているサイトにログインしたり、既に付与した権限を再付与したりする必要がありません。

  • ユーザーがデータセーバーをオンにしている場合でも、その恩恵を受けることができます。

  • より良いフォーム補完のためのデバイス間で同期オートコンプリート。

  • シンプルなカスタマイズモデル。

  • すぐにシングルタップでアプリに戻ります。

  • 古いWebviewの代わりに、Lollipopより前のデバイス（WebViewの自動更新）で最新のブラウザ実装を使用したいとします。

これはいつ利用可能になりますか？ #

Chrome45以降、Chromeのカスタムタブは、ChromeのサポートされているすべてのAndroidバージョン（Jellybean以降）で、Chromeのすべてのユーザーが一般的に利用できるようになりました。

私たちは、このプロジェクトに関するフィードバック、質問や提案を探しているので、我々は上の問題を提出することをお勧めしますcrbug.com そして、私たちのTwitterアカウント@ChromiumDevに質問をしてください。

実装ガイド#

完全な例はhttps://github.com/GoogleChrome/custom-tabs-clientで入手できます。 これには、UIのカスタマイズ、バックグラウンドサービスへの接続、およびアプリケーションとカスタムタブアクティビティの両方のライフサイク

このページのガイダンスに従えば、優れた統合を作成することができます。

カスタムタブ統合の最初のステップは、カスタムタブのサポートライブラリをプロジェクトに追加することです。 build.gradleファイルを開き、サポートライブラリを依存関係セクションに追加します。

dependencies {
...
compile 'com.android.support:customtabs:23.3.0'
}

サポートライブラリがプロジェクトに追加されると、次の2つのカスタマイズが可能になります:

  • UIのカスタマイズとカスタムタブとの対話。
  • ページの読み込みを高速化し、アプリケーションを生きたままにします。

UIのカスタマイズは、CustomTabsIntentクラスとCustomTabsIntent.Builderクラスを使用して行われます。CustomTabsClientを使用してカスタムタブサービスに接続し、Chromeをウォームアップし、どのurlを開くかを知

Chromeカスタムタブを開く#

アドレスバーの色を設定する#

Chromeカスタムタブの最も重要な（そして実装するのが最も簡単な）側面の一つは、アプリのテーマ

// Changes the background color for the omnibox. colorInt is an int
// that specifies a Color.
builder.setToolbarColor(colorInt);

カスタムアクションボタンを設定する#

アプリの開発者は、Chromeタブ内でユーザーに表示されるアクションボタンを完全に制御できます。

ほとんどの場合、これは共有などの主要なアクション、またはユーザーが実行する別の一般的なアクティビティになります。

アクションボタンは、アクションボタンのアイコンと、ユーザーがアクションボタンを押したときにChromeによって呼び出されるpendingIntentを持つバンドルとして表 アイコンは、高さが24dp、幅が24-48dpのcurrenltyです。

カスタムメニューの設定#

Chromeブラウザには、ユーザーがブラウザ内で頻繁に実行する操作の包括的なメニューがありますが、アプリケーションコンテキストには関連しない場合があ

開発者は、アイコンの行と足の項目の間に表示される最大5つのメニュー項目を追加およびカスタマイズできます。

メニュー項目は、ユーザーが項目をタップしたときにChromeがあなたに代わって呼び出すタイトルとpendingIntentでCustomTabsIntent.Builder#addMenuItemを呼び出すことによって追加されます。

builder.addMenuItem(menuItemTitle, menuItemPendingIntent);

カスタム入力アニメーションと終了アニメーションの設定#

多くのAndroidアプリケーションは、Android上のアクティビティ間の遷移時にカスタムビューの入 Chromeのカスタムタブは違いはありません、あなたは、アプリケーションの残りの部分との一貫性を保つために（ユーザーが戻って押したとき）アニメーションの入

Chromeをウォームアップしてページの読み込みを高速化#

デフォルトでは、CustomTabsIntent#launchUrlが呼び出されるとChromeがスピンアップし、URLが起動します。 これは、貴重な時間と滑らかさの知覚に影響を与えることができます。

私たちは、ユーザーがほぼ瞬時の経験を要求すると信じているので、私たちはあなたのアプリがに接続し、ブラウザとネイティブコンポーネントをウォームアッ また、開発者がユーザーが訪問する可能性の高いwebページのセットをChromeに伝える機能を試しています。 Chromeは次のように実行できます:

  • メインドメインのDNS事前解決
  • 最も可能性の高いサブリソースのDNS事前解決
  • HTTPS/TLSネゴシエーションを含む宛先への事前接続。

Chromeをウォームアップするプロセスは次のとおりです:

  • サービスに接続するにはCustomTabsClient#bindCustomTabsServiceを使用します。
  • サービスが接続されたら、CustomTabsClient#warmupに電話して舞台裏でChromeを起動します。
  • 新しいセッションを作成するには、CustomTabsClient#newSessionを呼び出します。 このセッションは、APIへのすべての要求に使用されます。
  • 必要に応じて、新しいセッションを作成するときにパラメータとしてCustomTabsCallbackを添付して、ページがロードされたことを確認します。
  • ユーザーがCustomTabsSession#mayLaunchUrlでロードする可能性のあるページをChromeに指示します。
  • 作成されたCustomTabsSessionをパラメーターとして渡すCustomTabsIntent.Builderコンストラクターを呼び出します。

Chromeサービスに接続する#

CustomTabsClient#bindCustomTabsServiceメソッドは、カスタムタブサービスへの接続の複雑さを取り除きます。

CustomTabsServiceConnectionを拡張するクラスを作成し、onCustomTabsServiceConnectedを使用してCustomTabsClientのインスタンスを取得します。 このインスタンスは、次の手順で必要になります。

#

boolean warmup(long flags)

ブラウザのプロセスを暖め、ネイティブライブラリをロードします。 ウォームアップは非同期で、戻り値は要求が受け入れられたかどうかを示します。 複数の呼び出しが成功した場合もtrueが返されます。

は成功のためにtrueを返します。

新しいタブセッションを作成する#

boolean newSession(CustomTabsCallback callback)

セッションは、mayLaunchUrl呼び出し、CustomTabsIntentおよび相互に生成されたタブをリンクするための後続の呼び出しで使用されます。 ここで提供されるコールバックは、作成されたセッションに関連付けられます。 作成されたセッションの更新(以下のカスタムタブコールバックを参照)もこのコールバックを介して受信されます。 セッションが正常に作成されたかどうかを返します。 同じCustomTabsCallbackまたはnull値を使用して複数の呼び出しを行うと、falseが返されます。

ユーザーが開く可能性のあるURLをChromeに伝えます#

boolean mayLaunchUrl(Uri url, Bundle extras, List otherLikelyBundles)

このCustomTabsSessionメソッドは、URLへの将来のナビゲーションの可能性をブラウザに伝えます。 メソッドwarmup()は、ベストプラクティスとして最初に呼び出す必要があります。 最も可能性の高いURLを最初に指定する必要があります。 必要に応じて、他の可能性のあるUrlのリストを提供することができる。 それらは最初のものよりも可能性が低いとして扱われ、優先順位の低い順序でソートする必要があります。 これらの追加Urlは無視される場合があります。 このメソッドへの以前の呼び出しはすべて剥奪されます。 操作が正常に完了したかどうかを返します。

カスタムタブ接続コールバック#

void onNavigationEvent(int navigationEvent, Bundle extras)

カスタムタブでナビゲーションイベントが発生したときに呼び出されます。 ‘NavigationEvent int’は、ページの状態を定義する6つの値のいずれかです。 詳細については、以下を参照してください。

ユーザーが最新バージョンのChromeをインストールしていない場合はどうなりますか？ #

カスタムタブは、UIをカスタマイズするために主要な追加機能を持つACTION_VIEWインテントを使用します。 これは、デフォルトでは、ページがシステムブラウザ、またはユーザーのデフォルトブラウザで開くことを意味します。

ユーザーがChromeをインストールしていて、それがデフォルトのブラウザである場合、自動的に追加機能が選択され、カスタマイズされたUIが表示されます。 また、別のブラウザでIntent extrasを使用して、同様のカスタマイズされたインターフェイスを提供することもできます。

ChromeがChromeカスタムタブをサポートしているかどうかを確認するにはどうすればよいですか？ #

ChromeカスタムタブをサポートするすべてのバージョンのChromeでは、サービスが公開されます。 Chromeがカスタムタブをサポートしているかどうかを確認するには、サービスにバインドしてみてください。 成功した場合は、カスタムタブを安全に使用できます。

ベストプラクティス#

Chromeカスタムタブが発売されて以来、品質レベルの異なるさまざまな実装が見られてきました。 このセクションでは、優れた統合を作成するために見つけた一連のベストプラクティスについて説明します。

カスタムタブサービスに接続してwarmup()#

カスタムタブとのリンクを開くときに、サービスに接続してChromeを事前にロードすることで、最大700msを節約できます。

カスタムタブを起動する予定のアクティビティのonStart()メソッドでカスタムタブサービスに接続します。 接続時に、warmup()を呼び出します。

読み込みは優先度の低いプロセスとして行われ、アプリケーションに悪影響を与えることはありませんが、リンクをロードするときに大きなパフォーマ

プレレンダリングコンテンツ#

プレレンダリングは外部コンテンツを即座に開きます。 したがって、ユーザーがリンクをクリックする可能性が少なくとも50％あるかのように、mayLaunchUrl()メソッドを呼び出します。

mayLaunchUrl()を呼び出すと、カスタムタブがサポートされているコンテンツを持つメインページを事前にフェッチし、事前レンダリングされます。 これは、ページの読み込みプロセスに最大速度を与えるが、ネットワークとバッテリーコストが付属しています。

カスタムタブはスマートで、ユーザーが従量制ネットワーク上で電話を使用しているのか、ローエンドデバイスであり、プリレンダリングがデバイスの全体的なパ そのため、そのような場合にアプリケーションを最適化する必要はありません。

カスタムタブがインストールされていない場合のフォールバックを提供する#

カスタムタブは大多数のユーザーに利用できますが、カスタムタブをサポート

デフォルトのブラウザを開くか、独自のWebView実装を使用して、優れたユーザーエクスペリエンスを提供するフォールバックを提供してください。

アプリをリファラーとして追加#

ウェブサイトがトラフィックがどこから来ているかを追跡することは、通常非常に重要です。 カスタムタブを起動するときにリファラーを設定して、ユーザーに送信していることを知らせるようにしてください

intent.putExtra(Intent.EXTRA_REFERRER,
Uri.parse(Intent.URI_ANDROID_APP_SCHEME + "//" + context.getPackageName()));

カスタムアニメーションの追加#

カスタムアニメーションは、アプリケーションからwebコンテンツへの移行をスムーズにします。 ナビゲーションが開始されたコンテンツに戻っていることをユーザーが理解するのに役立つので、finishアニメーションがstartアニメーションの逆であることを

アクションボタンのアイコンを選択する#

アクションボタンを追加すると、ユーザーはアプリの機能にもっと関心を持つようになります。 ただし、アクションボタンが実行するアクションを表す適切なアイコンがない場合は、アクションを説明するテキストを含むビットマップを作成し

ビットマップの最大サイズは、高さ24dp x幅48dpです。

他のブラウザの準備#

ユーザーには、カスタムタブをサポートする複数のブラウザがインストールされている可能性があることを覚えておいてくださ

ユーザーがカスタムタブからオプトアウトできるようにする#

ユーザーがカスタムタブを使用するのではなく、デフォルトのブラウザでリンクを開く これは、カスタムタブのサポートを追加する前に、アプリケーションがブラウザを使用してリンクを開いた場合に特に重要です。

ネイティブアプリケーションにコンテンツを処理させる#

一部のUrlはネイティブアプリケーションで処理できます。 ユーザーがTwitterアプリをインストールしていて、ツイートへのリンクをクリックした場合。 彼女はTwitterアプリケーションがそれを処理することを期待しています。

アプリケーションからurlを開く前に、ネイティブの代替手段が利用可能かどうかを確認し、それを使用します。

ツールバーの色をカスタマイズする#

コンテンツがアプリケーションの一部であることをユーザーに感じさせたい場合は、アプリケーションの原色でカスタマイ

ユーザーがアプリケーションを離れたことを明確にしたい場合は、色をまったくカスタマイズしないでください。

共有アクションを追加する#

ユーザーはほとんどのユースケースで表示されているコンテンツへのリンクを共有できることを期待しており、カスタムタブ

閉じるボタンのカスタマイズ#

閉じるボタンをカスタマイズして、カスタムタブがアプリケーションの一部であると感じさせるようにします。

カスタムタブがモーダルダイアログであるようにユーザーに感じさせたい場合は、デフォルトの”X”ボタンを使用します。 カスタムタブがアプリケーションフローの一部であるとユーザーに感じさせるには、戻る矢印を使用します。

内部リンクの処理#

android:autoLinkによって生成されたリンクのクリックを傍受したり、WebViewsのリンクのクリックを上書きしたりする場合は、アプリケーションが内部リンクを処理し、カスタムタブが外部リンクを処理していることを確認してください。

複数のクリックを処理する#

ユーザーがリンクをクリックしてカスタムタブを開く間に処理を行う必要がある場合は、100ms以下で実行されていることを確認してください。

遅延を回避できない場合は、ユーザーが同じリンクを複数回クリックし、カスタムタブを複数回開かないときにアプリケーションが準備されていることを

低レベルAPI#

アプリケーションをカスタムタブと統合するための推奨される方法は、カスタムタブサポートライブラリを使用することですが、低レベル

サポートライブラリの完全な実装はGithubで利用可能であり、開始点として使用することができます。 Chromiumリポジトリに含まれるファイルはAndroid Studioで直接使用できないため、サービスに接続するために必要なAIDLファイルも含まれています。

低レベルAPIを使用してカスタムタブを起動するための基本#

UIカスタマイズの追加#

UIカスタマイズは、Action_VIEWインテントにエキストラを追加する UIをカスタマイズするために使用されるextrasキーの完全なリストは、CustomTabsIntentドキュメントにあります。 カスタムツールバーの色を追加する方法の例を次に示します:

カスタムタブサービスへの接続#

カスタムタブサービスは、他のAndroidサービスと同じ方法で使用できます。 インターフェイスはAIDLで作成され、自動的にプロキシサービスクラスが作成されます。

プロキシサービスのメソッドを使用して、ウォームアップ、セッションの作成、および

便利なリンクを事前にフェッチします#

  • Githubデモ
  • StackoverflowのChromeカスタムタブ

FAQ#

  • これはいつ安定したチャネルで利用可能になりますか？
    • ChromeカスタムタブはChrome45以降で使用できます。
  • どこで質問できますか？
    • Stackoverflowタグ:chrome-custom-tabs