Skip to content

fix: iOS版を明るい配色に固定し、起動画面から編集画面までの色をそろえる - #118

Merged
K0mork merged 2 commits into
mainfrom
fix/consistent-launch-colors
Oct 6, 2026
Merged

K0mork merged 2 commits into
mainfrom
fix/consistent-launch-colors

Conversation

@K0mork

@K0mork K0mork commented Oct 6, 2026

Copy link
Copy Markdown
Owner

変更内容

端末がダークモードのとき、起動画面(緑)→準備中の表示(黒)→編集画面(明るい生成り色)と色が切り替わっていたのを直します。ライトモードでも準備中の表示は白でした。

  • ios/App/Info.plist に UIUserInterfaceStyle = Light を足し、iOS版を明るい配色に固定しました。準備中の表示、保存画面などのシステムのダイアログ、ステータスバーの領域も明るい配色になります。
  • 起動直後の準備中の表示を、起動画面と同じ LaunchBackground の緑にしました。文字とくるくる回る表示は白です(コントラスト比は約6:1)。
  • 使い方ページから戻るときなど、編集画面を一度表示したあとの準備中の表示は、編集画面の地の色 #f3f0e8 にしました(文字は #526059、約5.9:1)。アプリの中で緑が一瞬出ることはありません。
  • WKWebView の背景を .systemBackground から #f3f0e8 に変えました。文書が描かれるまでの間に白や黒が見えなくなります。
  • 起動画面の色そのものと、App Store用の起動画面のスクリーンショットは変えていません。Web版と packages/ も変えていません。

決めたこと

  • v1.0では明るい配色に固定し、ダークモードには対応しない。 編集画面の共通CSSにはダーク用の配色が無く、対応するには盤面・ダイアログ・使い方ページの配色、紙に印刷するPNG・PDFの扱い、Web版への影響、WCAGのコントラスト確認まで決める必要があります。v1.0前の小さく安全な変更として、Issueの選択肢のうち「明るい配色に固定する」を選びました。ダークモードへの対応は [P2] iOS版のダークモードに対応する #116 に分けました。
  • 起動画面の緑は変えず、準備中の表示を起動画面に合わせる。 起動画面の緑は編集画面のヘッダーの色で、App Store用の起動画面のスクリーンショットもこの色で撮ってあります。準備中の表示を同じ緑にすれば、起動画面→準備中の表示は色が変わらず、次に編集画面(緑のヘッダーと生成り色)が出るだけになります。
  • アプリの中で編集画面へ戻るときの準備中の表示は生成り色にする。 直前の使い方ページと同じ地の色なので、緑が一瞬はさまりません。

実行した確認

  • xcodegen generate --spec ios/project.yml: 新しいテストファイルが project.pbxproj に入ることを確認しました。
  • 手元の iPhone 18 Pro Simulator(iOS 27.0、Xcode 27.0。CIは Xcode 26.6)で xcodebuild test -project ios/knittingEditor.xcodeproj -scheme knittingEditor -destination 'platform=iOS Simulator,id=<udid>' -only-testing:knittingEditorTests CODE_SIGNING_ALLOWED=NO を実行: 33件中、機内モード用の1件がskip、失敗0件(追加した AppAppearanceTests は7件すべて成功)。変更したファイルで警告は増えていません。
  • Simulatorでの画面確認: アプリを入れ直して起動し、xcrun simctl io recordVideo の画面収録と xcrun simctl io screenshot の連続撮影で、ライト・ダークそれぞれの起動から編集画面までを確かめました(収録はリポジトリに入れていません)。端末は iPhone 18 Pro(iOS 27.0)、iPhone 16(iOS 18.2)、iPad (10th generation)(iOS 18.2)です。
    • どの端末でも、ライト・ダークとも「起動画面(緑)→準備中の表示(緑)→編集画面」となり、黒や白の全面表示は出ませんでした。
    • 変更前の状態は手元で収録していません(Issueの記載では、ダークモードで準備中の表示が黒)。
    • 使い方ページから戻るときの準備中の表示は画面では確かめていません。配色の切り替えは単体テストで確かめました。
  • PRのCIに任せたもの: Simulatorのテスト一式(iPhone・iPad)、アプリ更新テスト、Release Archive、同梱物の検査。Webのソースと packages/ は変えていないので、Webの必須スイートとiOS Webの検査は実行していません。

追加したテスト(ios/Tests/KnittingEditorAppTests/AppAppearanceTests.swift):

  • UIUserInterfaceStyle が Light である
  • 起動画面が LaunchBackground を使い、起動直後の準備中の表示が同じ色である(ライト・ダークの両方で)
  • 準備中の表示の文字のコントラスト比が WCAG AA(4.5:1)以上である
  • 戻るときの準備中の表示と WKWebView の背景が #f3f0e8 で、同梱したCSSにも同じ色がある
  • 準備中の表示の配色が「起動直後」から「編集画面を表示したあと」へ切り替わり、使い方ページから戻るときも起動画面の色に戻らない

残っている懸念(#117 に分けました)

  • 準備中の表示が消えてから編集画面が出るまでに、0.1〜0.3秒ほど、編集画面の地の色だけの画面や、Web側の「編み図を読み込んでいます…」が見えます。色は編集画面と同じです。webReady が端末内データの準備より前に届くためで、この変更の前からあります。消す時期を変えると .knit の受け渡しや初期化失敗時の表示に影響するので、このPRでは変えていません。
  • iOS 27.0 のSimulatorでは、起動画面の緑が、同じ色を使う準備中の表示より鮮やかに表示されました(iOS 18.2 では同じ色)。色空間を display-p3 にしても差は残ったので、色定義は変えていません。実機で確かめる必要があります。
  • 実機(TestFlight)でのライト・ダークの確認は、まだ行っていません。

デプロイ影響

Pagesへの配信はありません(iOSだけの変更)。TestFlightに載せたら、実機のライト・ダークそれぞれで、起動から編集画面まで色がちらつかないことを確かめます。

Closes #79

🤖 Generated with Claude Code

Fix the iOS app to the light appearance for v1.0, match the startup
loading overlay to the launch screen color, and give the in-app loading
overlay and the WKWebView background the editor page color, so dark mode
no longer shows a black screen between the launch screen and the editor.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Copilot AI balanced review requested due to automatic review settings October 6, 2026 11:49
@K0mork K0mork added the bug Something isn't working label Oct 6, 2026

Copilot AI left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Copilot was unable to review this pull request because the user who requested the review has reached their quota limit.

@K0mork K0mork left a comment

Copy link
Copy Markdown
Owner Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

レビュー結果

CI

実行 37458945971 のジョブはすべて成功しました(changes、app_store_docs、ios_web、ios(iPhone 17・iPad (A16))、app_update(iPhone 17・iPad (A16))、release_archive、ci-gate)。CodeQL も成功です。web、deploy、smoke は iOS だけの変更なのでスキップされています。両方の ios ジョブで、追加した AppAppearanceTests 7件が実行され、すべて成功したことをログで確認しました。

確認したこと(問題なし)

  • 色の流れ: 起動直後は LaunchBackground、webReady のあとは hasShownEditor によって #f3f0e8 になります。使い方ページ(guide/index.html の地の色も #f3f0e8)から戻るときに緑がはさまらないことも、コードとテストで確かめました。WKWebView と scrollView の背景も #f3f0e8 で、base.css の :root と一致しています。
  • UIUserInterfaceStyle = Light は Issue の選択肢「明るい配色に固定する」と合っています。ダークモードへの対応は #116 に分けてあります。
  • .knit の受け渡しへの影響: webContentReady、pendingBackup、isPreparingEditor の扱いは変わっていません。足したのは配色を選ぶフラグだけなので、影響は無いと判断しました。
  • project.pbxproj: PR の内容から xcodegen generate で作り直した結果と完全に一致しました。
  • docs/dev-log/ のエントリは README の書式どおりです。手元で実行した確認と、PR の CI に任せた確認(Simulator のテスト一式、アプリ更新テスト、Release Archive、同梱物の検査)が分けて書かれています。
  • 差分、PR 本文、コミットメッセージに機密情報はありませんでした。Closes #79 と bug ラベルもあります。
  • 最新の main から2コミット遅れていますが、コンフリクトはありません。

指摘(どれも軽微で、マージを止めるものではありません)

  1. (軽微・誤記) ios/App/KnittingEditorApp.swift の AppColors.editorSecondaryText のドキュメントコメントが 編集画面の補足の文字の色()。 となっていて、括弧の中が空です。参照元(base.css の .gesture-hint の color など)を書くか、括弧を消してください。
  2. (任意) testEditorPageBackgroundMatchesBundledStylesheet は、圧縮後の CSS の書き方 background:#f3f0e8 を文字列のまま探しています。CSS の圧縮方法や宣言の書き方が変わると、色が同じでも失敗します。今は CI で成功しているので、このままでも構いません。

Issue #79 の完了条件と規約のうち、満たしていないもの

  • PR に画面の記録が添付されていません。 Issue は「iPhone と iPad の Simulator で、ライト・ダークそれぞれの起動から編集画面までを画面収録する」ことを求めています。確認は手元で行われていますが、収録もスクリーンショットも PR に付いていません。AGENTS.md の「UI の変更ではスクリーンショットを PR に含める」にも当たるので、ライト・ダークのそれぞれ、iPhone と iPad について、起動画面→準備中の表示→編集画面のスクリーンショット(または収録)を添付してください。
  • 使い方ページから戻るときの準備中の表示(#f3f0e8)は、画面では確認されていません(単体テストだけ)。PR 本文に書かれているとおりです。
  • 実機(TestFlight)での確認は、Issue の完了条件には含まれていません(needs-device もありません)。デプロイ影響の欄に、配信後に確かめることとして書かれています。

… string

- Fill in the empty source reference in the AppColors.editorSecondaryText doc comment.
- Extract the :root background color from the bundled CSS with a whitespace-tolerant
  regex and compare it with AppColors.editorPageBackground.
- Record the review follow-up and the Simulator check of returning from the guide page.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@K0mork

K0mork commented Oct 6, 2026

Copy link
Copy Markdown
Owner Author

レビュー指摘への対応(47862da)

  • AppColors.editorSecondaryText のドキュメントコメントの空の括弧に、参照元(packages/editor-core/styles/base.css の .gesture-hint の color)を書きました。
  • testEditorPageBackgroundMatchesBundledStylesheet は、圧縮後の文字列 background:#f3f0e8 を探すのをやめ、同梱CSSの :root から background(または background-color)の色を空白に寛容な正規表現で取り出して AppColors.editorPageBackground と比べるようにしました。圧縮の有無、空白、宣言の順番、3桁の書き方が変わっても、色が同じなら失敗しません。
  • 使い方ページから編集画面へ戻るときの準備中の表示を、iPhone 16(iOS 18.2)の Simulator で画面収録して確かめました。使い方ページ(#f3f0e8)→準備中の表示(#f3f0e8、約0.2秒)→地の色だけのページ(約0.2秒)→編集画面と移り、緑・黒・白の全面表示ははさまりませんでした。開発ログにも書き足しました。

確認

  • 手元: iPhone 18 Pro Simulator(iOS 27.0)で AppAppearanceTests 7件すべて成功(アプリのビルドを含む)。
  • CI(実行 37462190821): changes、app_store_docs、ios_web、ios(iPhone 17・iPad (A16))、app_update(iPhone 17・iPad (A16))、release_archive、ci-gate すべて成功。CodeQL も成功。web、deploy、smoke は iOS だけの変更なのでスキップ。両方の ios ジョブで testEditorPageBackgroundMatchesBundledStylesheet の成功をログで確認しました。

残っていること

  • レビューで求められた、ライト・ダークそれぞれの iPhone・iPad の起動から編集画面までのスクリーンショット(または収録)の PR への添付は、まだ行っていません。

@K0mork
K0mork merged commit cee6a3e into main Oct 6, 2026
15 checks passed
@K0mork
K0mork deleted the fix/consistent-launch-colors branch October 6, 2026 23:31
@K0mork

K0mork commented Oct 7, 2026

Copy link
Copy Markdown
Owner Author

デプロイ確認

main の e1a2001(#120 のマージ。#118・#123・#115・#124・#126・#120 をすべて含む)の CI and deploy Pages(run 37560031792)が成功しました。

  • ci-gate: 成功
  • deploy: 成功(github-pages 環境の最新のデプロイが e1a2001)
  • smoke: 成功(本番の HTML が配信物と一致し、参照する /assets/ などが取れること)
  • そのほかのジョブ(web、ios_web、ios(iPhone 17・iPad (A16))、app_update(両端末)、release_archive)もすべて成功

途中の 736dd6d(#124)と 2bde0a3(#126)の run は、iOS の UI テストの失敗で ci-gate が通らず、配信されていません。前者は #115 と #123 の組み合わせで壊れたテスト(#126 で修正)、後者は Simulator の一時的な失敗です。

このPRについて

このPRは iOS だけの変更なので、Pages の配信には影響しません。この run で iOS のジョブ(ios(iPhone 17・iPad (A16))、app_update(両端末)、release_archive)がすべて成功しました。実機(TestFlight)での確認は、まだ残っています。

K0mork added a commit that referenced this pull request Oct 7, 2026
Keep both sides in WebViewContainer.swift: the launch colors and loading
style from #118, and the menu command state and native UI flag from #125.
The share sheet completion now clears the native UI flag and reports the
finished export for the review request (#121). Regenerate project.pbxproj
with XcodeGen.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

bug Something isn't working

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[P1] ダークモードで起動画面・準備中の表示・編集画面の色がそろわない

2 participants