Airbnb Showkaseは、特定のコードアノテーションに基づいて合成されるブラウジングアクティビティによって、Jetpack Compose UIエレメントを検出し、体系化し、視覚化するツールである。
設計システムおよびUIコンポーネントのメンテナンスに必要な手作業を削減し、コンポーネントの検出を容易にすることで、Androidコードベース内にある再利用可能なコンポーネントの採用を促進する役割を果たします。
公式アプリに関してはまだJetpack Composeを導入していないが、Airbnbではすでにツールの準備を開始しており、この新技術が運用可能な段階に達した時点で採用する予定である。同社シニアソフトウェアエンジニアのVinay Gaba氏の説明によれば、ShowkaseはAirbnbが現在のクラシックAndroid UIで使用している他のツールにヒントを得て、それらと同じように作られている。Showkaseのようなツールが有効なのは、再利用可能なUIライブラリが肥大し過ぎて管理不能に陥ることを避けたいような場合だ、とGaba氏は言う。
この種のコンポーネントは検出性に問題があります。容易に検索する手段がないのです。その結果として、コードベースの中に、同じような機能を提供するコンポーネントが重複することも少なくありません。
この問題はコンポーネントに限ったものではない。カラーや字体など、Androidアプリの再利用可能な他のプロパティにも同じ問題がある。
Showkaseを使うことで、Jetpack Composeエレメントを名前あるいは所属グループに基づいて検索することが可能になる。それぞれのコンポーネントに対して、通常時とダークモード、スケールフォントを使用した場合など、さまざまな設定下でどのように見えるのか、プレビュー表示することもできる。さらに、各コンポーネントの関連ドキュメントにブラウザから直接アクセスすることも可能である。
build.gradleファイルに依存関係を加えてShowkaseをインストールした後は、Showkaseカタログに含めたいコードベース内のすべてのUIコンポーネントにアノテートする。例えば、標準的なAndroid Studioの@Previewアノテーションを@Composableなエレメントに使用することもできる。
@Preview(name = "Custom name for component", group = "Custom group name")
@Composable
fun MyComponent() { ... }
同じように、Colorプロパティに@ShowkaseColorを、TextStyleプロパティに@ShowkaseTypographyを、さらにその他のアノテーションが使用できる。
@ShowkaseColor(name = "Primary Color", group = "Material Design")
val primaryColor = Color(0xFF6200EE)
@ShowkaseTypography(name = "Custom name for style", group = "Custom group name")
val h1 = TextStyle(
...
)
最後のステップとして、rootモジュール内にShowkaseRootModuleインターフェースの実装を定義した上で、任意の場所からShowkaseアクティビティを起動すればよい。
@ShowkaseRoot
class MyRootModule: ShowkaseRootModule
...
startActivity(createShowkaseBrowserIntent(this))
...
Jetpack Compose自体と同じく、Showkaseはまだ安定版ではなく、APIは変更される可能性がある。
Jetpack ComposeはGoogleで開発されたKotlinベースのツールキットで、Androidアプリ用の宣言型UIの作成を可能にするものだ。ReactによってWebアプリで一般的になったアプローチと同じような、構成可能な関数を接続することによるUI開発を可能にする。Jetpack Composeｍによって開発の加速化とコード削減が可能になる、とGoogleは主張している。非常に魅力的ではあるが、Jetpack Composeはまだアルファ版であり、APIは変更される予定があるため、実際のアプリ開発での使用は推奨されていない。