Jetpack Compose で 反転フラップ式案内表示機 (split-flap display) を実装する

これ。

👉 反転フラップ式案内表示機 - Wikipedia
👉 Split-flap display - Wikipedia

まあ、AI で動くものはすぐにできる。

が、なんか微妙なよくわからないコード。

どんなロジックになっているのかな、と興味あったので、ロジックをみながら整理してみました。

 

🧑🏻‍💻 考え方

切り替える文字列を以下に設定。


"各駅電車", "急行", "快速", "特急", "御座候"

そして、2つのレイヤーを重ねる。

・上下半分に分けた文字板
・アニメーションでめくれていく文字板

この考え方がいいようです。

重ね合わせには、BoxModifier.zIndex() を使います。

 

🧑🏻‍💻 上下半分に分けた文字板

下のレイヤーに配置する。

同じタイミングで、上下半分ずつの文字を切り替える。

 

🧑🏻‍💻 アニメーションでめくれていく文字板

上のレイヤーに配置する。

これを下のレイヤーに被せて、同期的にアニメーションさせる。

対象の Composable で Mofifier.graphicsLayer を使うと便利。

意図する回転方向と原点を指定するだけで良い。


modifier = Modifier
    .graphicsLayer {
        this.transformOrigin = TransformOrigin(...)
        this.rotationX = ...
    }

 

🧑🏻‍💻 出来上がり

とりあえず、ある程度まで整理。

アニメーション知識なく AI で生成したコードから入ると、ある程度ロジックを理解するまでは不具合修正はもちろん、調整さえ自在にできない。

厳しい時代かもしれません。


Jetpack Compose 移行完了チェック:旧 AndroidView システムを安全に完全削除できたか確認する

プロダクション環境のAndroidアプリを Jetpack Compose へ移行する作業は、一朝一夕で完了するものではありません。

中〜大規模のコードベースでは、移行は段階的に進むのが一般的です。そのため、XMLレイアウト、ComposeView、AndroidView が、モダンなComposableと数ヶ月〜数年にわたって共存することになります。

段階的な移行は最も安全なアプローチです。しかし、移行が完了したあとも古いインフラを残したままにしておくと、無駄な複雑さが増すだけになってしまいます。

ここで生まれるのが、

「本当に移行が完了したと、どうやって判断すればいいのか?」

という疑問です。

この記事では、アプリから旧Viewシステムのコードを安全に削除し、完全移行を果たすための実践的なチェック方法を紹介します。

 

🧑🏻‍💻 ビルド設定(buildFeatures)をオフにする

まずは一番わかりやすいビルド設定から見直しましょう。

View Binding や Data Binding なしでビルドできれば、旧Viewシステムへの大きな依存を断ち切れた証拠になります。

モジュールレベルの build.gradle.kts を確認・修正します。


android {
    // ...

    buildFeatures {
        compose = true

        viewBinding = false
        dataBinding = false
    }
}

続いて、依存関係を見直し、不要になったライブラリを削除します。


dependencies {
    // 不要になった旧Viewシステムの依存関係を削除

    // implementation("com.google.android.material:compose-theme-adapter:...")
    // implementation("androidx.appcompat:appcompat:...")
    // implementation("androidx.constraintlayout:constraintlayout:...")
    // implementation("androidx.navigation:navigation-fragment-ktx:...")
    // implementation("androidx.navigation:navigation-ui-ktx:...")
}

 

🧑🏻‍💻 エントリーポイントを Compose 単一にする

完全移行したアプリでは、UIをホストするためだけに FragmentActivityNavHostFragment を使う必要はありません。

メインのエントリーポイントは、シンプルな ComponentActivity で十分です。


class MainActivity : ComponentActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        setContent {
            AppTheme {
                AppNavigation()
            }
        }
    }
}

もちろん、以下のようなコードは完全に不要になります。


// 不要!
setContentView(R.layout.activity_main)

Activityは、XMLレイアウトのコンテナではなく、Compose UIへのエントリーポイントとして機能するようになります。

 

🧑🏻‍💻 相互運用(Interop)のためのブリッジコードを削除する

移行期間中、ComposeViewAndroidView といったAPIは非常に強力な味方でした。これらのおかげで、View システムとCompose の境界線を段階的にまたぐことができたからです。

しかし、移行が終わったのであれば、これらの「架け橋」は役目を終えています。

プロジェクト全体で以下を検索してみてください。

- ComposeView

- AndroidView

- androidx.fragment.app.Fragment

目指すべき残存数は「0」です。

例えば、以下のようなコードは存在しなくなるはずです。


// これらはもう不要
val composeView = ComposeView(context).apply {
    setContent {
        MainScreen()
    }
}

また、こちらも同様です。


// これらも不要
AndroidView(
    factory = { context ->
        CustomLegacyView(context)
    }
)

重要な考え方はシンプルです。

「相互運用(Interop)は足場であって、目的地ではない」 ということです。

 

🧑🏻‍💻 デザインシステムを Compose 純正にする

完全移行したアプリでは、デザイントークンをKotlinコード内で直接定義できます。


@Composable
fun AppTheme(
    darkTheme: Boolean = isSystemInDarkTheme(),
    content: @Composable () -> Unit
) {
    val colorScheme =
        if (darkTheme) DarkColorScheme
        else LightColorScheme

    MaterialTheme(
        colorScheme = colorScheme,
        typography = AppTypography,
        shapes = AppShapes,
        content = content
    )
}

カラー、タイポグラフィ、シェイプなどを Compose に適用するためだけに、res/values/styles.xml を参照する必要はもうありません。

UIテクノロジーと信頼できる唯一の情報源(Source of Truth)が同じ Kotlin コード上に並ぶため、デザインシステムの保守性・見通しが大幅に向上します。

 

🧑🏻‍💻 ナビゲーションを宣言型にする

画面遷移(ナビゲーション)についても、XMLの Navigation Graph や Fragment トランザクションから脱却しましょう。

ルート(Route)、引数(Arguments)、画面(Destinations)は、Compose Navigation のセットアップ内で直接管理できます。


@Serializable
data object Home : NavKey

@Serializable
data class Detail(val id: String) : NavKey

@Composable
fun AppNavigation() {
    val backStack = rememberNavBackStack(Home)

    NavDisplay(
        backStack = backStack,
        entryProvider = entryProvider {
            entry<Home> {
                HomeScreen(
                    onOpenDetail = { id ->
                        backStack.add(Detail(id))
                    }
                )
            }

            entry<Detail> { key ->
                DetailScreen(
                    id = key.id
                )
            }
        }
    )
}

ここでの目的は、単に「XMLをKotlinに置き換える」ことではありません。

本質は、Fragmentベースのナビゲーション層を取り払い、UIと同じ「宣言型アーキテクチャ」にナビゲーション構造を一致させることにあります。

 

🧑🏻‍💻 最後にリポジトリ全体を走査する

「移行完了!」と宣言する前に、古いUIシステムを引き戻してしまうようなコードが残っていないか、リポジトリ全体を検索して確認しましょう。

ターミナルで以下のコマンドを実行してみるのがおすすめです。


# 残っているUI用XMLレイアウトのチェック
find app/src/main/res/layout -name "*.xml"

# Compose / View 相互運用コードの検索
grep -rn "ComposeView" app/src/main/java/
grep -rn "AndroidView" app/src/main/java/

# Fragment の使用箇所の検索
grep -rn "androidx.fragment.app.Fragment" app/src/main/java/

理想的な状態は以下の通りです。

・ res/layout にUIレイアウト用のXMLが存在しない

・ ComposeView の使用箇所が 0 である

・ AndroidView の使用箇所が 0 である

・ Fragment ベースの画面が存在しない

・ View Binding および Data Binding が無効化されている

・ テーマがXMLスタイルに依存していない

・ ナビゲーションが Fragment インフラに依存していない

 

🧑🏻‍💻 まとめ

100% Jetpack Compose への移行とは、単に XML ファイルを Composable 関数に書き換えることではありません。

本当のゴールは、「旧 View システムがアプリの UI アーキテクチャから完全に消え去ること」 です。

【移行前】


Activity
 └─ Fragment
     └─ XML
         └─ View
             └─ ComposeView
                 └─ Compose

【移行後】


Activity
 └─ Compose
     ├─ Theme
     ├─ Navigation
     └─ Screens

私たちの目標は、単に「Compose を使っている」と言うことではありません。

「もうViewシステムを必要としない」 状態を作ることこそが、本当のゴールなのです。


UI だけで完結する処理は、Compose の拡張関数へ

すべての UI 副作用を ViewModel Event に変換する必要はない

Composeでは、すべてのUI操作を


UI
 ↓
ViewModel
 ↓
Event
 ↓
UI
 ↓
Effect

という経路に乗せる必要はありません。

UI だけで意味が完結する処理は、Compose 側に残して、必要なら拡張関数として共通化する方が自然です。

例えば以下です。


├── Navigation
├── Snackbar
├── Toast
├── Scroll
├── Focus
├── Keyboard
├── Clipboard
├── Haptic feedback
├── Share
├── Open URL
├── Permission launcher
└── File picker

これらは「副作用」ではありますが、副作用だから ViewModel Event にする必要があるわけではありません。

 

🤔 ViewModel Event にすることの問題

Navigation 3を例にします。


sealed interface UiEvent {
    data class NavigateToDetail(
        val id: String
    ) : UiEvent
}


fun onItemClick(id: String) {
    viewModelScope.launch {
        _events.emit(
            UiEvent.NavigateToDetail(id)
        )
    }
}

UI 側では Event を受け取ります。


LaunchedEffect(Unit) {
    viewModel.events.collect { event ->
        when (event) {
            is UiEvent.NavigateToDetail -> {
                backStack.add(
                    Detail(event.id)
                )
            }
        }
    }
}

このパターン自体が間違いというわけではありません。
しかし、ここで一つ質問できます。

Detail へ移動するために、ビジネスロジックは必要でしょうか?

もし必要ないなら、UI 操作を ViewModel に渡して、再び UI に戻しています。

 

🤔 Navigation 3 は UI で完結できる

Navigation 3 では、BackStack が明示的に存在します。


Button(
    onClick = {
        backStack.add(
            Detail(id)
        )
    }
) {
    Text("Open")
}

拡張関数にすると、より読みやすくできます。


fun NavBackStack<NavKey>.navigateTo(
    destination: NavKey
) {
    add(destination)
}

UIはこうなります。


Button(
    onClick = {
        backStack.navigateTo(
            Detail(id)
        )
    }
) {
    Text("Open")
}

ここには、


UiEvent
Channel
SharedFlow
LaunchedEffect

が必要ありません。

UI → Navigation 3 で完結します。

 

🤔 Snackbar の場合

従来なら、


ViewModel
 ↓
ShowSnackbar Event
 ↓
UI
 ↓
showSnackbar()

とします。

これを、UI側の処理を拡張関数にできます。


suspend fun String.showSnackbar(
    hostState: SnackbarHostState
) {
    hostState.showSnackbar(this)
}


LaunchedEffect(uiState.message) {
    uiState.message?.showSnackbar(
        snackbarHostState
    )
}

この UI に対して ViewModel は「大事な状態」を持っています。


data class UiState(
    val message: String? = null
)

 

🤔 重要なのは「UI の責務」と「ビジネスロジック」の境界

例えば、次の2つは明確に違います。

これはUI側に置けます。


backStack.navigateTo(
    Detail(id)
)

これは ViewModel / UseCase側です。


viewModel.save()

 

🤔 まとめ

- UIだけで完結する処理は、UIに置く。
- 繰り返し使うUI操作は、Compose の拡張関数として共通化する。

 

🤔 参考


OkHttp・Retrofit等の主要ライブラリ、コントリビューションへのLLM使用を禁止方針に

View on Mastodon

本日より、Lysineプロジェクト(OkHttp、Okio、Retrofit、SQL Delightファミリー)では、コードの作成、およびPR(プルリクエスト)/ Issueの記述やコメントにおいてLLM(大規模言語モデル/生成AI)の使用を禁止するコントリビューションポリシーを導入します。

ただし、利用を明示することを条件に、翻訳補助としての使用は例外として認められます。

リサーチ、分析、あるいは実験の目的でローカル環境でLLMを使用されることについて、私たちがそれを止めることはできません。しかし、プロジェクトへ貢献する際にはあなた自身がコードを書き、やり取りの相手もあなた自身であることを要求します。

 

🤔 まとめ

対象プロジェクト:
OkHttp、Okio、Retrofit、SQL Delightシリーズなど(Lysine配下のプロジェクト)

禁止事項:
提出コードの作成、PR/Issueの本文やコメントにおけるLLM(生成AI)の使用

許可される例外:
翻訳補助としての利用(ただし使用した旨の明記が必要)

個人での利用:
手元での調査・分析・実験的なコード試作におけるLLM使用は制約外

コアメッセージ:
コントリビューションにおいては「AIではなく開発者本人が直接書くこと」および「人間同士で対話すること」を重視する方針

そもそも、LLMで勘違いしてるやつ、多いですよね?


Android アーキテクチャは Event-Driven UI から State-Driven UI へ移行している

Google の公式 Android ガイダンスは 2026年5月18日に更新され、ViewModel のイベントを UI State に変換することを明示的に推奨するようになった

これは、もはや単なる昔からのアーキテクチャ論争ではありません。

Google の Android ドキュメントは 2026年5月18日 に更新され、現在では明確に次のように述べています。

ViewModel events should always result in a UI state update.

ViewModel のイベントは、常に UI State の更新につながるべきです。

これは、ViewModel と UI の間の通信をどのように考えるべきかという点で、大きな変化です。

これまで Android では、次のようなパターンが一般的でした。


ViewModel
   │
   ├── UiState
   │
   └── UiEvent
          ↓
         UI

UiEvent は、Snackbar の表示、画面遷移、ダイアログの表示など、一度だけ実行したい処理によく使われていました。

しかし現在のガイダンスは、次の方向へ移りつつあります


ViewModel
   │
   │ UI State
   ↓
  UI

ここでは、簡単な Snackbar の例を使って、この違いを見てみましょう。

 

🤔 Event-Driven アプローチ

従来の実装は、例えば次のようになります。


sealed interface UiEvent {
    data class ShowSnackbar(
        val message: String
    ) : UiEvent
}

private val _events = Channel<UiEvent>()
val events = _events.receiveAsFlow()

fun save() {
    viewModelScope.launch {
        repository.save()

        _events.send(
            UiEvent.ShowSnackbar("Saved successfully")
        )
    }
}

UI 側では、このイベントを消費します。


LaunchedEffect(Unit) {
    viewModel.events.collect { event ->
        when (event) {
            is UiEvent.ShowSnackbar ->
                snackbarHostState.showSnackbar(event.message)
        }
    }
}

この場合、ViewModel は実質的に UI に対して次のように指示しています。


"Snackbar を表示してください。"

これが Event-Driven なアプローチです。

 

🤔 State-Driven アプローチ

現在の Android ガイダンスは、上記とは異なる方向を示しています。

ShowSnackbar を送るのではなく、ViewModel が UI State を更新します。


data class UiState(
    val userMessage: String? = null
)


private val _uiState = MutableStateFlow(UiState())
val uiState: StateFlow<UiState> = _uiState.asStateFlow()
        
fun save() {
    viewModelScope.launch {
        repository.save()

        _uiState.update {
            it.copy(userMessage = "Saved successfully")
        }
    }
}

fun userMessageShown() {
    _uiState.update {
        it.copy(userMessage = null)
    }
}

UI は State を監視します。


LaunchedEffect(uiState.userMessage) {
    uiState.userMessage?.let { message ->
        snackbarHostState.showSnackbar(message)
        viewModel.userMessageShown()
    }
}

この場合、ViewModel は次のように言っているわけではありません。


"Snackbar を表示してください。"

代わりに、次のように伝えています。


"現在、表示すべきメッセージがあります。"

どのように表示するのかは UI が決定します。

 

🤔 重要な違い

この違いは、単純に


Channel → StateFlow

という API の置き換えではありません。

本質的には次の違いです。

Event-Driven:


ViewModel
    ↓
"これを実行して"
    ↓
UI

State-Driven:


ViewModel
    ↓
"これが現在の状態です"
    ↓
UI

Google は、この違いを次のようにも表現しています。

「State は存在する。Events は発生する。」

もちろん、イベントそのものがなくなったわけではありません。

ボタンのクリックは、今でもイベントです。


User
 ↓
Button.onClick
 ↓
ViewModel
 ↓
State
 ↓
UI

重要な変化は、ViewModel → UI の通信が、一度きりのイベントではなく State を中心とする方向へ進んでいることです。

 

🤔 では、Event を使うのをやめるべきなのか?

公式ガイダンスは、ChannelSharedFlow、あるいはイベントそのものを禁止しているわけではありません。

むしろ、ViewModel のイベントを UI State として表現できないかを改めて考えることを求めています。

ViewModel を設計するときには、次の問いが役立ちます。

- ViewModel は UI に「何をすべきか」を伝える必要があるのか?

- 「現在何が起きているのか」を State として表現するだけでよいのか?

この小さな考え方の変化が、Android の UI アーキテクチャの設計を大きく変える可能性があります。

 

🤔 参考