画像ビューアーのピンチズーム機能を変更

背景


外部WebView(UniWebView)プラグインを利用して問題の解説画像(配線図、構造図など)やホームページを表示していました。アプリ内で完結できる良さはあったのですが、


・満足のいくUIを作ることができなかった

・保守負荷が高く、プラグインのアップデートに翻弄される


ということで、画像の表示はUnityの機能を使って実装し、ホームページ等の表示はユーザーの通常利用しているブラウザに任せることにしました。



実行内容


1. WebViewプラグインを削除して自前UI化


UniWebViewの依存を完全に削除し、Unityのネイティブ UI(Canvas + Image)に置き換えました。シンプルな画像表示機能に機能削減にはなりましたが、保守性と動作安定性が向上しました。


2. ピンチズーム・パン機能を実装


ユーザーが画像を2本指で拡大縮小(ピンチズーム)し、1本指でスクロール(パン)できるようにしました。


- **ピンチイン**:0.8倍(最小)

- **ピンチアウト**:5倍(最大)

- **パン**:0.8倍より大きいサイズで1本指スクロール


3. マルチタッチの問題を解決


新Input Systemの環境下で、ピンチズームの2本目のタッチが認識されない問題が発生しました。


原因は、EventSystemの UI入力モジュール(InputSystemUIInputModule)が、`Pointer Behavior`設定を使ってタッチを一部吸収していたこと。`Pointer Behavior`を「All Pointers As Is」に変更し、すべてのポインタをゲーム側に流すようにしました。


さらに、開くたびに`Input.multiTouchEnabled = true`を実行して、マルチタッチが確実に有効になるようにしました。



結果


画像を開いて何度もピンチ・パンできるようになり、ユーザーが解説図を自由にズーム・移動しながら確認できるようになりました。



追伸


1日の終りにClaude Codeにその日の内容をブログに書いてもらうことにしました。非常に楽になりました。