Skip to content

fix: iOS版で長押しの文字選択・リンクのプレビュー・画面全体の拡大を抑える - #123

Merged
K0mork merged 2 commits into
mainfrom
fix/suppress-web-view-behaviors
Oct 6, 2026
Merged

K0mork merged 2 commits into
mainfrom
fix/suppress-web-view-behaviors

Conversation

@K0mork

@K0mork K0mork commented Oct 6, 2026 •

Copy link
Copy Markdown
Owner

概要

iOS版の編集画面で、WKWebView由来のWebページ特有の挙動(長押しの文字選択とメニュー、リンクのプレビュー、盤面の外のピンチによる画面全体の拡大)を抑えます。編み図名などの入力欄では、文字の選択・コピー・貼り付けを従来どおりできます。

Refs #81

端末の「ズーム」(アクセシビリティの拡大表示)はSimulatorで確かめられなかったため、Issueは閉じずに実機での確認として残します(下の「レビュー対応」を参照)。

Simulatorでの観察結果(対策前)

iPhone 18 Pro(iOS 27.0)とiPad 10(iOS 18.2)で、調査用の一時テスト(コミットしていません)から操作し、画面とアクセシビリティツリーを記録しました。

操作 結果
見出し・ラベル・ボタン(「保存」)・引き出しの見出しの長押し 文字が選択され、「Copy」「Look Up」「Translate」(iPadではさらに「Search Web」「Share…」など)のメニューが出た
ヘッダーの「使い方」リンクの長押し リンクの文字が選択された。プレビューは出なかった
使い方ページの外部リンク(サポートページ)の長押し リンクのプレビューと「Open Link」「Add to Reading List」「Copy Link」「Share…」のメニューが出た
見出し・ツールバーのピンチ 画面全体が拡大され、「保存」ボタンが約2倍になって画面外へ出た
見出しのダブルタップ 拡大されなかった
編み図名の入力欄のダブルタップ・長押し 「Cut」「Copy」「Paste」などが出た(残すべき挙動)

変更内容

  • ios/App/WebViewContainer.swift: webView.allowsLinkPreview = false。外部リンクはタップされたときだけ従来どおりSafariで開きます。
  • ios/Web/src/styles.css: bodyで文字選択と長押しのメニュー(user-select・-webkit-touch-callout)を止め、input・textarea・contenteditableだけ元に戻しました。
  • ios/Web/index.html: viewportをwidth=device-width, initial-scale=1, maximum-scale=1, user-scalable=noにしました。盤面の拡大は盤面自身のピンチ処理なので影響しません。
  • ios/docs/WEB_SYNC.md: Web版との差分として記録しました。

対策後は、見出し・ラベル・ボタン・リンクを長押ししても文字選択とメニューが出ません。外部リンクを長押ししてもプレビューは出ません(リンクの文字が選択されるだけで、Safariは開きません)。ピンチやダブルタップで画面は拡大されません。入力欄では、ダブルタップで「Cut」「Copy」「Paste」などが出ます。

決めたこと

  • iOS版だけの変更にしました。 Web版は、ブラウザで説明文や見出しを選んでコピーできることと、ブラウザの拡大が普通の挙動なので変えていません。共通CSS(packages/editor-core/styles/base.css)にも入れていません。
  • 使い方ページ(iOS版)は文字選択とピンチでの拡大を残しました。 読み物で、Dynamic Typeに追従していないため、拡大できる方が読みやすいと判断しました。リンクのプレビューはallowsLinkPreviewで両ページとも出しません。
  • ボタンの長押しは、指を離したときにタップとして扱われることがあります(iPadの「保存」で引き出しが開いた)。ネイティブのボタンと同じ挙動なので、そのままにしています。
  • 画面全体の拡大を止めた代わりの文字の拡大は、Dynamic Type(既存のfont: -apple-system-body)と端末の「ズーム」が担います。

テスト

  • XCUITest testEditorChromeIgnoresPageZoomAndTextSelection(新規): 見出しとツールバーでピンチし、見出しをダブルタップしても、見出しと「保存」の位置・大きさが変わらない。見出し・ラベル(「色」)・リンク(「使い方」)・ボタン(「描く」)の長押しでメニューが出ない。
  • XCUITest testGuideExternalLinkShowsNoPreview(新規): 使い方ページの外部リンクの長押しで、プレビューのコレクションビュー・メニュー項目・シート・リンク用の操作(「Open Link」など)のどれも出ず、使い方ページのまま。
  • XCUITest testTwoFingerGestureDoesNotDrawOnBoard(追記): 盤面のピンチの前後で盤面の画像が変わる(盤面の拡大が効く)。
  • XCUITest testDocumentDialogRemainsUsableAfterFocusingInput(追記): 入力欄のダブルタップで、選択・コピーのメニューが出る。
  • iOS Web Vitest ios/Web/src/webViewBehaviors.test.ts(新規): viewportの設定。
  • どの確認方法も、対策前のアプリで同じ操作をすると挙動を検出できることを、調査用の一時テストで確かめました。

実行した確認

  • xcodegen generate、アプリとテストのビルド(手元はXcode 27.0)
  • iPhone 16(iOS 18.2)とiPad 10(iOS 18.2)のSimulatorで、新しい2件とtestDocumentDialogRemainsUsableAfterFocusingInputを実行し、すべて成功
  • iPad 10で、関係する既存テスト(testGuideNavigationReturnsToUsableEditor、testTwoFingerGestureDoesNotDrawOnBoard、testPromptDialogIgnoresBackgroundTaps、testUndoAndRedoRestoreBoardEdits、testAccessibilityExtraExtraExtraLargeKeepsPrimaryFlowsUsable)も成功
  • Dynamic Type: 最大のアクセシビリティサイズ(AX XXXL)で、iPhone 16とiPad 10の編集画面と入力ダイアログの文字が大きく表示されることをスクリーンショットで確認(スクリーンショットは手元に保存し、コミットしていません)
  • iOS Web: tsc -p tsconfig.app.json --noEmit、vitest run --config vite.config.ts(9件成功)
  • ルート: npm run typecheck、npm test(159件成功)

実行していない確認

  • npm run build、npm run check:dist、npm run test:e2e: Web版のファイルと共通コードを変えていないため
  • iOSのSimulatorテスト一式、アプリ更新テスト、Release Archive、同梱物検査: PRのCIに任せます
  • 端末の「ズーム」(アクセシビリティの拡大表示): Simulatorでは操作を再現できませんでした(「レビュー対応」を参照)。実機で確かめます
  • 実機での確認: していません。TestFlightのビルドで、見出し・ボタンの長押し、盤面の外のピンチ、盤面のピンチでの拡大、入力欄での選択・コピー、端末の「ズーム」を確かめることを勧めます

レビュー対応

  • 端末の「ズーム」はSimulatorで確かめられませんでした。 iPhone 16(iOS 18.2)のSimulatorで次を試しました。
    • Simulator内の設定(com.apple.AccessibilityのZoomTouchEnabled)をオンにして再起動し、XCUITestのtap(withNumberOfTaps: 2, numberOfTouches: 3)で3本指ダブルタップを送ろうとしたが、対象をアプリ・ウインドウ・WebViewのどれにしても「unable to compute coordinates for gesture」で送れなかった。
    • Simulatorの設定アプリの「アクセシビリティ」に「ズーム」の項目が無く、設定アプリからもオンにできなかった。
    • Simulatorの画面への入力は2本指までで、3本指の操作はできない。
    • 確認後、設定は元の状態(未設定)に戻し、端末を停止しました。実機(TestFlight)で、3本指ダブルタップで編集画面のヘッダーとツールの文字を読める大きさにできることを確かめる必要があります。
  • testGuideExternalLinkShowsNoPreviewの判定を、メニュー項目・シート・リンク用の操作の文言にも広げ、検出力の無かったapp.state == .runningForegroundの確認を外しました。allowsLinkPreview = falseを一時的に外したビルドで、iPhone 16(iOS 18.2)でこのテストが失敗することを確かめてから戻しました。
  • testTwoFingerGestureDoesNotDrawOnBoardに、盤面のピンチで盤面の画像が変わることの確認を足しました。盤面のピンチ処理を一時的に止めたビルドで失敗することを確かめてから戻しました。
  • ios/docs/WEB_SYNC.mdと開発ログの、文字選択を戻す対象の記述をCSS(input・textarea・[contenteditable])に揃えました。
  • 実行した確認: xcodegen generate、アプリとテストのビルド。iPhone 16(iOS 18.2)のSimulatorで、testGuideExternalLinkShowsNoPreview、testTwoFingerGestureDoesNotDrawOnBoard、testEditorChromeIgnoresPageZoomAndTextSelection、testDocumentDialogRemainsUsableAfterFocusingInputがすべて成功。iOS Webのtscとvitest(9件成功)。

補足

  • AX XXXLのiPhoneでは、ヘッダーの「使い方」「編み図」ボタンの文字が窮屈に見えます。この変更の前からある見た目で、このPRでは扱っていません。

🤖 Generated with Claude Code

iOS版の編集画面で、見出し・ラベル・ボタン・リンクの長押しで出る文字選択と
メニュー、リンクのプレビュー、盤面の外のピンチによる画面全体の拡大を抑える。
入力欄の文字選択・コピーは残す。Web版は変えず、使い方ページの文字選択と
拡大も残す。

Refs #81

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Copilot AI balanced review requested due to automatic review settings October 6, 2026 16:07
@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確認済み・マージはしていません)

CI(cd5a115、CI and deploy Pages)

  • 成功: changes、app_store_docs、ios_web、ios (iPhone 17)、ios (iPad (A16))、app_update (iPhone 17)、app_update (iPad (A16))、release_archive、ci-gate。CodeQLも成功。
  • スキップ: web、deploy、smoke(iOSだけの変更なので想定どおり)。
  • iOS 26.5 Simulator(Xcode 26.6)の両端末で、新しいtestEditorChromeIgnoresPageZoomAndTextSelection・testGuideExternalLinkShowsNoPreviewと、追記したtestDocumentDialogRemainsUsableAfterFocusingInputが実行され、再試行なしで成功しました。関係する既存のtestAccessibilityExtraExtraExtraLargeKeepsPrimaryFlowsUsable・testTwoFingerGestureDoesNotDrawOnBoard・testGuideNavigationReturnsToUsableEditorも成功しています。

良い点

  • 差分はios/とdocs/dev-log/だけで、Web版(ルートのindex.htmlはmaximum-scale=5のまま)と共通CSSには影響しません。
  • 入力欄はuser-select: text・-webkit-touch-callout: defaultで戻しており、入力欄のダブルタップで選択メニューが出ることをUIテストで確かめています。
  • 共通CSSのフォントサイズはpx指定が無く、iOS版の:rootのfont: -apple-system-bodyに追従するので、user-scalable=noにしてもDynamic Typeで文字を大きくできます(AX XXXLのUIテストもCIで成功)。
  • 使い方ページは別のHTML(インラインのstyle、viewportにmaximum-scaleなし)なので、文字選択とピンチでの拡大が残るという説明と合っています。
  • Closes #81、ラベルbug、docs/dev-log/の書式・ファイル名も規約どおりです。差分・本文・コミットメッセージに機密情報は見当たりません。

指摘

  1. (中・完了条件)端末の「ズーム」(アクセシビリティの拡大表示)は未確認です。 Issueの完了条件「Dynamic Typeとアクセシビリティの拡大表示で、文字が読める大きさにできることを確かめる」のうち、Dynamic Typeはスクリーンショットで確かめていますが、ズームは「viewportの影響を受けないシステムの機能」という理由づけだけです(PR本文とログには未確認と正直に書かれています)。Issueを閉じる前に、Simulatorの設定(アクセシビリティ > ズーム)か実機で一度確かめて記録するか、理由づけで十分とするかを判断してください。
  2. (低)testGuideExternalLinkShowsNoPreviewの検出条件が狭いです。 プレビューの有無をapp.collectionViewsの存在だけで見ており、対策前に検出できることを確かめたのはiOS 27.0と18.2で、CIのiOS 26.5では未確認です。OSによってプレビューやリンクのメニューの公開のされ方が変わると、対策が外れても成功してしまうおそれがあります。app.menuItems・app.sheetsも出ないことを足すと安心です。またapp.state == .runningForegroundは、長押しでSafariへ移らない限り常に成り立つので、検出力はあまりありません。
  3. (低・文書)WEB_SYNC.mdとログの記述がCSSと少し違います。 文書は「入力欄(input・textarea)だけ元に戻し」ですが、CSSは[contenteditable]も戻しています。今はcontenteditableの要素が無いので実害はありませんが、記述を揃えるとよいです。
  4. (情報)盤面のピンチ拡大が引き続き効くことは、テストでは確かめていません。 盤面はtouch-action: noneとpointerイベントで拡大を扱っているので、viewportの変更の影響は受けないはずです。ただ、既存のtestTwoFingerGestureDoesNotDrawOnBoardが確かめているのは「2本指で記号が入らないこと」だけです。ログの「盤面のピンチ(盤面の拡大)は従来どおり」の根拠は、目視だったのか理屈だったのかを書いておくと、後から追えます。TestFlightでの確認項目に入れておくのも一案です。
  5. (情報) エラーやトーストの文言も選択・コピーできなくなります。問い合わせのときに文言をコピーしたい場面がありえますが、編集画面としては妥当な判断だと考えます。

1は完了条件にかかわるので、マージの前に判断が必要です。2〜5はマージを止めるものではありません。

レビュー対応。使い方ページの外部リンクの長押しで、プレビューのコレクション
ビューだけでなくメニュー項目・シート・リンク用の操作も出ないことを確かめ、
検出力の無いアプリ状態の確認を外す。2本指ジェスチャのテストに、盤面の
ピンチで盤面が拡大されることの確認を足す。WEB_SYNC.mdと開発ログの文字選択の
記述をCSSに揃え、端末の「ズーム」をSimulatorで確かめられなかった経緯を記録する。

Refs #81

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

K0mork commented Oct 6, 2026

Copy link
Copy Markdown
Owner Author

レビュー対応(d3eca91)

  1. 端末の「ズーム」: Simulatorでは確かめられませんでした。iOS 18.2のSimulatorで、Simulator内の設定(ZoomTouchEnabled)をオンにして再起動しても、XCUITestから3本指ダブルタップを送れず(「unable to compute coordinates for gesture」)、設定アプリの「アクセシビリティ」にも「ズーム」の項目がありませんでした。設定は元に戻しています。実機で確かめる必要があるので、本文をRefs #81に変え、#81に残りをコメントし、needs-deviceラベルを付けました。
  2. testGuideExternalLinkShowsNoPreview: コレクションビューだけでなく、メニュー項目・シート・リンク用の操作(「Open Link」など)も出ないことを確かめるようにし、app.state == .runningForegroundの確認は外しました。allowsLinkPreview = falseを一時的に外したビルドで、このテストが失敗することを確かめてから戻しました。
  3. 文書: WEB_SYNC.mdと開発ログの記述を、CSS(input・textarea・[contenteditable])に揃えました。
  4. 盤面のピンチ: testTwoFingerGestureDoesNotDrawOnBoardに、ピンチの前後で盤面の画像が変わること(盤面の拡大)の確認を足しました。盤面のピンチ処理を一時的に止めたビルドでは失敗することを確かめています。

手元ではiPhone 16(iOS 18.2)のSimulatorで変えたテストを含む4件と、iOS Webのtsc・vitestを実行し、すべて成功しました。

CI(d3eca91)

  • 成功: changes、app_store_docs、ios_web、ios (iPhone 17)、ios (iPad (A16))、app_update (iPhone 17)、app_update (iPad (A16))、release_archive、ci-gate、CodeQL。
  • スキップ: web、deploy、smoke(iOSだけの変更なので想定どおり)。
  • 両端末で、testGuideExternalLinkShowsNoPreview、testTwoFingerGestureDoesNotDrawOnBoard、testEditorChromeIgnoresPageZoomAndTextSelection、testDocumentDialogRemainsUsableAfterFocusingInputの成功を確かめました。

マージはしていません。

@K0mork
K0mork merged commit 87d7c48 into main Oct 6, 2026
15 checks passed
@K0mork
K0mork deleted the fix/suppress-web-view-behaviors branch October 6, 2026 23:32
@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)での確認は、まだ残っています。

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.

2 participants