Claude Code である程度完成してしまったコードを、少しずつ整備していいきたい(あるいは機能を追加していきたい)としたとき、開発プロジェクトとしては、
- 細かいテストをどうするのか?
- 機能追加をしたときの、テストをどうするのか?
- コードレビューは必要か?
の視点で「開発手法」を考えていく必要がある…と思う訳ですが、いざ、AI 時代のコード修正なるものを考えてみると、何から手を付けてよいものやらという感じになってしまったので、ここは、試行錯誤的に「何か手を付けてみて、何らかの障害にぶち当たるまで試してみる」という形でやってみます。
初期の画面に「設定」と「コピーライト」を追加する
BLE-Chat ツールでは、受信したメッセージと送信する入力欄がある1枚だけ(MainActivity.kt)で簡潔しています。これに「設定」と「コピーライト」を追加してみます。

このあたり、設定用の画面とコピーライト用の画面を設計するところなのですが、このあたりの定番の画面ならば雑に追加しても大丈夫であろうということで、agents/ に .md ファイルを作るのではなく、プロンプトで指定してみます。Android アプリの画面の追加は FolkBears で経験済みなので、そこそこうまく追加してくれるはずです。
Claude Code のプロンプトで追加
Claude Code のプロンプトで雑に指定しいます。
「設定」画面と「コピーライト」画面に追加して。
この場合、定番の方式で追加するので、AI がスタンダードで考える画面の構成で追加してくれます。と言いますか、定番の方法で追加してしまいます。
- SettingsScreen.kt
- CopyrightScreen.kt

ファイル名や画面構成は、AI が適当に決めるので、それに従います。逆に言えば、社内の標準フォーマットとかコード規約などを含めることが難しいです。個人開発やツール程度ならばいいけれど、なんらかの標準にあわせる場合には、Agents に .md ファイルで規定を作るか、サンプル用の画面を作るほうがよいでしょうね。

左上に歯車のボタンを付けて、「設定」→「著作権情報」という流れで画面遷移させます。
設定の画面では「送信者ID」や「送信継続時間」などがあるので、これをアプリから固有のもににするのか、ユーザーが設定できるようにするのか、などを開発時に考える必要がでてきます。
送信者IDは変更できるようになっているのですが、実機で試してみます。
SettingsItem(
label = "送信者ID",
value = selfId,
trailingIcon = {
IconButton(onClick = { showEditDialog = true }) {
Icon(
imageVector = Icons.Default.Edit,
contentDescription = "編集",
tint = MaterialTheme.colorScheme.primary
)
}
}
)

初期値の「21e4c75c」から変更後の「11112222」に変わっているので大丈夫そうです。
// SharedPreferences から selfId を読み込み、Flow で保持
private val selfIdFlow: MutableStateFlow<String> by lazy {
val stored = prefs.getString("selfId", null)
?: UUID.randomUUID().toString().take(8).also { saveSelfId(it) }
MutableStateFlow(stored)
}
送信者IDは、MainActivity#selfIdFlow として保持されているので、文字列8文字であれば何でもいいのですが、このあたりは、設計書として書くか、AI コーディングのままとするとかで判断の迷うところです。チャットツールとしては、ニックネームを自分でつけたいところなので、8文字の制限はきついかもしれません。
この他に、BLE の設定値として、送信継続時間や重複排除 TTLなどがありますが、これは SettingsScreen.kt に直が気になっています。
// ── BLE 設定セクション ─────────────────────────────────
SettingsSectionHeader(title = "BLE 設定")
SettingsItem(
label = "送信継続時間",
value = "10 秒(固定)"
)
HorizontalDivider(modifier = Modifier.padding(horizontal = 16.dp))
SettingsItem(
label = "重複排除 TTL",
value = "30 秒(固定)"
)
HorizontalDivider(modifier = Modifier.padding(horizontal = 16.dp))
SettingsItem(
label = "参加者タイムアウト",
value = "60 秒(固定)"
)
このあたりの値は、build.gradle.kts に定数として定義しておいて、SettingsScreen.kt 画面で表示させるほうがよいので、これを変更してみましょう。
送信継続時間、重複排除 TTL、参加者タイムアウト の秒数を、build.gradle.kts に定数として定義できるように変更して。それらの値を使って、SettingsScreen.kt などの関連するコードを修正して。
いわゆるリファクタリングで、初期の AI コーディングでマジックナンバー化してしまったものを、環境変数などの設定値として外出しにします。
送信継続時間などは、BLE の受信待ちなどで使っているので、それも修正してもらいます。
defaultConfig {
applicationId = "net.moonmile.ble5_chat.claude"
minSdk = 26
targetSdk = 36
versionCode = 1
versionName = "1.0"
testInstrumentationRunner = "androidx.test.runner.AndroidJUnitRunner"
// BLE タイミング定数(秒単位)
buildConfigField("int", "ADVERTISE_DURATION_SEC", "10")
buildConfigField("int", "DUPLICATE_FILTER_TTL_SEC", "30")
buildConfigField("int", "PEER_TIMEOUT_SEC", "60")
}
ADVERTISE_DURATION_SEC などが追加されています。
SettingsScreen.kt では、これらの値を BuildConfig から読み込んで表示するようになっています。
// ── BLE 設定セクション ─────────────────────────────────
SettingsSectionHeader(title = "BLE 設定")
SettingsItem(
label = "送信継続時間",
value = "${BuildConfig.ADVERTISE_DURATION_SEC} 秒"
)
HorizontalDivider(modifier = Modifier.padding(horizontal = 16.dp))
SettingsItem(
label = "重複排除 TTL",
value = "${BuildConfig.DUPLICATE_FILTER_TTL_SEC} 秒"
)
HorizontalDivider(modifier = Modifier.padding(horizontal = 16.dp))
SettingsItem(
label = "参加者タイムアウト",
value = "${BuildConfig.PEER_TIMEOUT_SEC} 秒"
)
HorizontalDivider(modifier = Modifier.padding(horizontal = 16.dp))

おそらく、こんな風なあまりテストの必要ない画面ならば AI へのプロンプトの指示で十分です。その後に、ビルド&実行して、チャットを使って修正指示を出してもそれほど手間ではないでしょう。
実のところ「送信継続時間」が本当に、その時間で停止しているのかなどの動作チェックが必要なのですが、これはまた別の形でテストをします。
GitHub Copilot のプロンプトで追加
コードを元に戻して、GitHub Copilot のプロンプトで同じことをやってみます。
いちからのコード生成は失敗してしまったので、Claude Code で作成したコードをベースに GitHub Copilot を使って追加する形にします。
「設定」画面と「コピーライト」画面に追加して。

GitHub Copilot の場合は、歯車ではなくて、右上の「︙」のメニューから「設定」と「コピーライト」を選ぶ形になりました。これも定番の方法で、AI が考える画面の構成で追加してくれます。
折角なので、設定画面に
- 送信継続時間(ブロードキャストしている継続時間)
- 重複排除 TTL(同じ送信者IDのメッセージを重複とみなす時間)
- 参加者タイムアウト(受信したメッセージの送信者を参加者とみなす時間)
を追加してもらいましょう。
Copilot のほうは、あらかじめ定義されていた BleAdvertiserManager.ADVERTISE_DURATION_MS などから値を拾って表示するようになっています。
SettingRow(
title = "送信継続時間",
value = BleAdvertiserManager.DEFAULT_ADVERTISE_DURATION_MS.toSecondsLabel()
)
HorizontalDivider()
SettingRow(
title = "重複排除 TTL",
value = DuplicateFilter.DEFAULT_TTL_MS.toSecondsLabel()
)
HorizontalDivider()
SettingRow(
title = "参加者タイムアウト",
value = PeerRegistry.DEFAULT_TIMEOUT_MS.toSecondsLabel()
)
HorizontalDivider()

送信者IDが編集できないので、これを追加します。
送信者IDを編集できるようにして。

最後に定数を build.gradle.kts に移動して、SettingsScreen.kt で表示するように変更します。
– 送信継続時間、重複排除 TTL、参加者タイムアウト の秒数を、build.gradle.kts に定数として定義できるように変更して。それらの値を使って、SettingsScreen.kt などの関連するコードを修正して。
同じパターンで build.gradle.kts で定数を定義できるように変更されます。
defaultConfig {
applicationId = "net.moonmile.ble5_chat.claude"
minSdk = 26
targetSdk = 36
versionCode = 1
versionName = "1.0"
buildConfigField("long", "ADVERTISE_DURATION_MS", "10000L")
buildConfigField("long", "DUPLICATE_FILTER_TTL_MS", "30000L")
buildConfigField("long", "PEER_TIMEOUT_MS", "60000L")
testInstrumentationRunner = "androidx.test.runner.AndroidJUnitRunner"
}
比較

Copilot のほうはちょっと手間取ったのですが、Claude Code とほぼ同じ画面が作成できます。
おそらく、それぞれのモデルの中にある典型的な設定画面をピックアップしたと思うです。
ただし、これは AI が好き勝手に作った画面なので、ならからのデザインの統一をするときにはこの方式では困ります。
これを agents/ に UI 設計として保存しておき、狙った形で設定画面と著作権表示の画面を作成できるようにしてみます。
この場合、2つの方式があって、
- 機能を作ってから後から画面のデザインだけ合わせる
- 最初の画面のデザインを決めておいて、後から機能を追加していく
ということが考えられます。
設定画面の UI 設計書を作成する
さて、どのように AI に渡す UI 設計書を作るかという問題です。
この場合、既にできあがった「設定」と「著作権表示」の画面から、UI 設計書を作って貰うことにします。
SettingsScreen.kt, CopyrightScreen.kt から、UI 設計書を作成して。
Figma などの UI デザインツールを使って UI 設計書を作る方法もあるのですが、今回のような定番の画面であれば「AI が読み取れるような UI 設計書を AI 自身に作って貰う」方が手っ取り早いでしょう。
agents/UI設計書_設定_著作権.md
# UI設計書: 設定画面 / 著作権情報画面
## 1. 対象画面
- 設定画面
- 実装: `SettingsScreen`
- ファイル: `src/app/src/main/java/net/moonmile/ble5_chat/claude/ui/SettingsScreen.kt`
- 著作権情報画面
- 実装: `CopyrightScreen`
- ファイル: `src/app/src/main/java/net/moonmile/ble5_chat/claude/ui/CopyrightScreen.kt`
## 2. 画面遷移
```mermaid
flowchart LR
A[チャット画面] -->|メニューから設定| B[設定画面]
B -->|戻る| A
B -->|著作権情報| C[著作権情報画面]
C -->|戻る| B
B -->|送信者ID編集| D[送信者ID編集ダイアログ]
D -->|保存| B
D -->|キャンセル| B
```
## 3. 設定画面
### 3.1 目的
- 端末設定として送信者IDを表示・編集する
- BLE動作に関する設定値を参照表示する
- アプリ情報への導線を提供する
### 3.2 レイアウト構成
- 画面全体は `Scaffold`
- 上部に `TopAppBar`
- 本文は `Column` + `verticalScroll`
- セクションごとに見出しと項目を配置
- 項目間は `HorizontalDivider` で区切る
次は、この UI 設計書をもとに、AI コーディングで「設定」画面と「著作権表示」画面を作成してみます。
コード
https://github.com/moonmile/BLE-chat
- branch: dev/add-setting-page : Claude Code で 追加
- branch: dev/add-setting-page-copilot : GitHub Copilot で 追加
