SoundCloud、Jetpack Glance を使用して「お気に入りのトラック」ウィジェットをわずか 2 週間で構築

アーティスト ファーストの音楽プラットフォームである SoundCloud のデベロッパーは、Android でのリスニングをさらに簡単にするため、Jetpack Glance を使用して、4.6 つ星の評価と 1 億回以上のダウンロード数を誇るアプリに「お気に入りのトラック」ウィジェットを作成しました。4,000 万人以上のクリエイターによる 4 億曲以上の楽曲を擁する SoundCloud は、音楽を通じてアーティストとファンをつなぐことに注力しています。今回の Android アプリの最新アップデートにより、リスナーはお気に入りの楽曲をさらに便利に楽しめるようになります。Glance のおかげで、チームはわずか 2 週間でプロジェクトを完了することができ、貴重な開発時間を節約し、エンゲージメントを向上させることができました。

ユーザー フレンドリーなタッチポイントで視認性を最大化

新しい「高く評価した曲」ウィジェットでは、最近高く評価した曲のアートワークが表示され、ユーザーはホーム画面から特定の曲に直接移動したり、トラックリスト全体にアクセスしたりできます。これにより、SoundCloud がリスナーの目に留まりやすくなり、個人のライブラリへのショートカットとして機能し、再び利用するよう促すことができます。

「お気に入りのトラック」は、SoundCloud の最初のウィジェットではありません。10 年以上前、SoundCloud のデベロッパーは RemoteViews を使用して、ユーザーが簡単に再生をコントロールしたり、トラックに「いいね」を付けたりできるプレーヤー ウィジェットを作成しました。デザインに関するフィードバックに基づいてプレーヤー ウィジェットを更新した後、デベロッパーは「高く評価したトラック」のパーソナライズされたインターフェースを優先するようにしました。新しいウィジェットは、ライトモードとダークモードの両方を備え、ユーザーの好みに合わせて自由にサイズを変更できます。また、ユーザーの壁紙に合わせてテーマが動的に調整されます。Glance を活用したこれらの設計上の選択により、ウィジェットはシームレスに使用できるだけでなく、SoundCloud アプリへの魅力的でカスタマイズされたゲートウェイとしても機能します。

Glance で開発サイクルを加速

Glance は、Liked Tracks の開発を効率化するうえでも重要な役割を果たしました。すでに Compose に習熟しているデベロッパーにとって、Glance の直感的なデザインは使い慣れたものであり、学習曲線が最小限に抑えられ、チームのオンボーディングが加速しました。このプラットフォームのコードサンプルのコレクションも、デベロッパーがその機能とベスト プラクティスを迅速に把握するのに役立つ、有用な出発点となりました。「サンプルアプリのリポジトリを使用することは、学習に最適な方法です。リポジトリ全体をチェックアウトして、コードがどのように動作するかを調べることができます」と、Android チームの SoundCloud リード エンジニアである Sigute Kateivaite 氏は述べています。「ウィジェットの開発が大幅にスピードアップしました。」

Glance の UI の宣言的な性質は、デベロッパーにとって特に有益でした。ビルド時に追加の XML ファイルを使用する必要がないため、デベロッパーはボイラープレートを減らし、よりクリーンで読みやすいコードを作成できます。また、Glance ではモジュールを個別に操作できるため、コンポーネントを 1 つずつ作成して統合し、後のイテレーションで再利用することができました。コンポーネントを分離することで、開発者はモジュールを迅速にテストし、問題を特定して解決し、重複することなくさまざまな状態を構築できるようになり、ワークフローの効率化につながりました。

Glance の設計により、コードの全体的な品質も向上しました。Android Studio の Glance のリアルタイム プレビューのサポートを使用して変更を加えることができるため、デベロッパーは UI コンポーネントをウィジェットに統合したり、ウィジェット全体をスマートフォンにデプロイしたりすることなく、コンポーネントを個別に構築できます。さまざまな状態を表現し、関連するすべてのケースを表示して、アプリ全体をコンパイルすることなくコンポーネントの変更を確認できます。簡単に言うと、Glance を使用すると、デベロッパーはより迅速にイテレーションを行い、ウィジェットを改良して、より洗練された最終プロダクトを作成できるため、生産性が向上します。

Glance のパワーでアプリ ウィジェットを強化する

効果的な新しいワークフローが導入され、大きな開発上の問題も発生しなかったため、SoundCloud チームは Glance のおかげで制作を効率化できたと高く評価しています。「新しい Liked Tracks ウィジェットのロールアウトは非常に安定していました」と Sigute 氏は言います。「開発とテストのプロセスは非常にスムーズに進みました。」初期のデータでも有望な結果が示されており、アクティブ ユーザーは現在、ウィジェットを操作してアプリにアクセスする回数が 1 日平均複数回に達しています。

SoundCloud チームは、今後も Glance をさらに活用して、正規レイアウトの採用など、既存のウィジェットを改善し、新しいウィジェットを開発したいと考えています。現在の「高く評価したトラック」ウィジェットは主に画像の表示に重点を置いていますが、チームはユーザー エクスペリエンスをさらに充実させるために、他の種類のコンテンツを含めることに関心を持っています。また、プレーヤー ウィジェットを Glance に移行して、フレームワークの堅牢なテーマ設定オプションにアクセスし、サイズ変更プロセスを簡素化して、長年のバグをいくつか解決することも希望していました。

チームは、お気に入りのトラックとプレーヤーの機能だけでなく、Glance を使用してより幅広いウィジェットを構築できる可能性に期待しています。Liked Tracks ウィジェットのモジュール式コンポーネント ベースのアーキテクチャは、UserAvatar や Logo などの再利用可能な要素を備えており、将来の開発のための強固な基盤を提供し、最初からプロセスを簡素化することを約束します。

Jetpack Glance を使用してカスタム アプリ ウィジェットの作成を開始する

Glance を使用して、アプリを表示したままにしてユーザーを引き付けるウィジェットを迅速に開発してデプロイします。

このブログ投稿は、Spotlight Week ウィジェット特集シリーズの一部です。このシリーズでは、ウィジェットの設計と作成に役立つリソース（ブログ投稿、動画、サンプルコードなど）を提供しています。 Spotlight Week: ウィジェットの概要で詳細をご確認ください。この概要は、1 週間を通して更新されます。