KINTO Tech Blog

Development

Compose超初心者のPreview感動体験

Romie
Romie
Cover Image for Compose超初心者のPreview感動体験

自己紹介

はじめまして!モバイルアプリ開発Gにてmy routeアプリのAndroid側の開発を担当しておりますRomieです。
前職からAndroidの開発を始めて2年経ちましたが、個人開発も含めてレイアウトは全てxml形式で実装してきたためComposeにきちんと触れたのはお恥ずかしながら2023年12月にKINTOテクノロジーズ株式会社(以下KTC)に入社してからになります。
TechBlogに記事を書くのも初めてになります!

こんな人に読んでほしい

本記事は以下が対象です。

  • Androidの開発超初心者の方
  • さまざまな事情でxml形式でしかレイアウトを書いたことがなくComposeを全くご存知ない方
  • 実機で動作確認する際なかなか修正した箇所を表示できず困っている方

Previewとの出会い

入社して一番最初Composeのコの字も知らないということで、以下の画面をxml形式からComposeで実装し直す作業を行いました。

About my route画面
About my route画面

早速コードリーディングを始めると、Previewを冠した謎の関数が。

@Preview
@Composable
private fun PreviewAccountCenter() {
    SampleAppTheme {
        AccountCenter()
    }
}

その関数はアカウントセンターのボタンのPreviewを表示するためのものでした。
ですがprivate関数にもかかわらず同じktファイル内のどの箇所でも呼び出されていなかったため「この関数は使用されていないのだろう」と考えPreview周辺のコードは触らずに実装を進めることにしました。
そして無事Compose化の作業を終え、pull requestを出したところcommentが来ました。
「Previewがないので作ってください!」

「呼び出されない関数を作って何の意味があるんだろう」と思いつつ他を真似して画面全体のPreviewを実装し、buildして実機が問題なく動いていることを確認しましたが、この時は実機ばかり見ていました。
Previewは何のためのものなのだとまだボンヤリしつつ何気なくAndroid StudioのSplit画面を見ると、そこには実機で表示されているのと全く同じ画面がAndroid Studioに表示されているではありませんか。
「Previewってそういうことか、関数を呼び出さなくてもSplit画面で表示するためのものなのか!」
公式ドキュメント[1]にもきちんと書いてありました。

アプリをデバイスやエミュレータにデプロイする必要はありません。幅と高さの制限、フォントのスケーリング、テーマがそれぞれ異なる、特定のコンポーズ可能な関数を複数プレビューできます。アプリの開発を行うとプレビューが更新され、変更内容をすばやく確認できます。

Previewと動作確認

ある日、my routeアプリのルート詳細画面に駅出口からの進行方向セクション8方向の画像と文言を追加する作業を行いました。
実装自体はすぐにできましたが、問題は動作確認でした。8方向分の画像と文言が正しく追加できているかどうか確認するのに実際に動作させていると非常に時間がかかります。
再現手順は以下の通りです。

進行方向セクション表示の再現手順
進行方向セクション表示の再現手順

では、効率的に8方向分全て確認するにはどうすればよいでしょうか。
更にUI表示が崩れていたり違った画像が表示されていたりして修正し最初から確認しようとすると、余計時間がかかります。

ここで活躍するのがPreviewです。
以下の通り実装します。

@Preview
@Composable
fun PreviewWalkRoute() {
    SampleAppTheme {
        Surface {
            WalkRoute(
                routeDetail = RouteDetail(),
                point = Point(
                    pointNo = "0",
                    distance = "200",
                    direction = Point.Direction.FORWARD,
                ),
            )
        }
    }
}

Buildを通しAndroid StudioでSplit画面を確認すると、ご覧の通り。

進行方向セクションのプレビュー画面
進行方向セクションのプレビュー画面

確認したい方向を入れるだけで正しい画像と文言が入っているか確認できるのです。
そして実際に表示が崩れているかは1パターンのみ確認できればOK!これで大幅に動作確認の時間を短縮できます。

まとめ

これからもPreviewだけでなくComposeの諸々を体感することがもっと増えると思います。
とりあえず軽く触っただけでもこのような感動があったので共有しました!
Compose超初心者の感動体験、これからもお付き合いのほどよろしくお願いいたします。

脚注
  1. 引用元:https://developer.android.com/jetpack/compose/preview?hl=ja ↩︎

KINTOテクノロジーズMeetUp!情シスによる情シスのための事例シェア

関連記事 | Related Posts

We are hiring!

【iOS/Androidエンジニア】モバイルアプリ開発G/東京・大阪

モバイルアプリ開発GについてKINTOテクノロジーズにおける、モバイルアプリ開発のスペシャリストが集まっているグループです。KINTOやmy routeなどのサービスを開発・運用しているグループと協調しながら品質の高いモバイルアプリを開発し、サービスの発展に貢献する事を目標としています。

【モバイルアプリUI/UXデザイナー(リードクラス)】my route開発G/東京

my route開発グループについてmy route開発グループでは、グループ会社であるトヨタファイナンシャルサービス株式会社の事業メンバーと共に、my routeの開発・運用に取り組んでおります。現在はシステムの安定化を図りながら、サービス品質の向上とビジネスの伸長を目指しています。