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 は、[高く評価した曲] の開発を効率化するうえでも重要な役割を果たしました。Compose に精通しているデベロッパーにとって、Glance の直感的なデザインは使い慣れたものに感じられ、学習コストを最小限に抑え、チームのオンボーディングを加速させることができました。プラットフォームのコードサンプル集も、デベロッパーがその機能とベスト プラクティスを迅速に把握するのに役立つ出発点となりました。「サンプルアプリ リポジトリを使用することは、学習に最適な方法です。リポジトリ全体を確認して、コードの動作を確認できます」と、Android チームの SoundCloud のリード エンジニアである Sigute Kateivaite 氏は述べています。「ウィジェットの開発が大幅にスピードアップしました。」

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

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

Glance の力でアプリ ウィジェットを強化

SoundCloud チームは、効果的な新しいワークフローと大きな開発上の問題がないことから、Glance がプロダクションの効率化に貢献したことを高く評価しています。「新しい [高く評価した曲] ウィジェットでは、ロールアウトが非常に安定しています」と Sigute 氏は述べています。「開発とテストのプロセスは非常にスムーズに進みました。」初期データでも有望な結果が得られています。アクティブ ユーザーは、ウィジェットを操作して 1 日に平均複数回アプリにアクセスしています。

SoundCloud チームは、Glance をさらに活用して、正規のレイアウトの採用など、既存のウィジェットを改善したり、新しいウィジェットを開発したりすることに意欲的です。現在の [高く評価した曲] ウィジェットは主に画像の表示に重点を置いていますが、ユーザー エクスペリエンスをさらに向上させるために、他の種類のコンテンツを含めることに関心があります。また、デベロッパーはプレーヤー ウィジェットを Glance に移行して、フレームワークの堅牢なテーマ設定オプションにアクセスし、サイズ変更プロセスを簡素化し、長年のバグに対処したいと考えています。

[高く評価した曲] 機能とプレーヤー機能に加えて、チームは Glance を使用して幅広いウィジェットを構築できる可能性に期待しています。[高く評価した曲] ウィジェットのモジュール型コンポーネント ベースのアーキテクチャは、UserAvatar やロゴなどの再利用可能な要素を備えており、今後の開発の確固たる基盤となり、最初からプロセスを簡素化することが期待できます。

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

Glance を使用して、アプリの視認性とエンゲージメントを維持するウィジェットを迅速に開発してデプロイします。

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