この記事はアドベントカレンダー2023の9日目の記事です。
こんにちは、21B SysAd班のmehm8128です。
今回は最近traQの改善で一石二鳥した話をしていきます。といっても当初予定していた記事が間に合わなさそうだったので書いてます。
僕はtraQチームでフロントエンドの改善をしていて、最近は普段traQを使っている中で特に直したくなったUX周りの改善を中心に行っているのですが、今回は元々以下のPRに取り組んでいました。
内容は書いてある通りなので省略しますが、モーダル周りの改善で、PCだとmousedown
、mouseup
を使うところがiOSだとtouchstart
、touchend
を使っている実装だったのが今回の一石二鳥ポイントです。traQのモーダル周りはかなり微妙な感じだと感じているので、いつか直したいですね...。
僕はfeedbackの対応(traQのfeedbackチャンネルにきたバグ報告や機能追加要望への対応)をしていることもあり、約180あるissueのほとんどは把握している(つもりな)のですが、今回上のPRを出すときにisIOSという関数の実装を見て、↓のissueを思い出しました(実装リンク先はissueのバグの修正後のコードなので、19行目が書かれていない状態でした)。
isIOS
の実装を見て、もしかしてこのissueはこのあたりが原因なのではと思い、ちょっと調べてみたらそれらしき記事に出会いました。
iPadではUserAgentにiPad
の文字列が含まれることを想定されたコードだったのですが、あるバージョンからはそうではなくて、iPad
だった部分がMacintosh
になってしまっていたのが原因でした。そのため、isIOS
がfalse
になってしまっていました。
![](https://qiita-user-contents.imgix.net/https%3A%2F%2Fcdn.qiita.com%2Fassets%2Fpublic%2Farticle-ogp-background-9f5428127621718a910c8b63951390ad.png?ixlib=rb-4.0.0&w=1200&mark64=aHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZoPTMzNiZ0eHQ9aU9TJTIwMTMlRTQlQkIlQTUlRTklOTklOEQlMjBpUGFkJUUzJTgxJUFFVXNlckFnZW50JUUzJTgxJUFCJUU2JUIzJUE4JUU2JTg0JThGJTIwJTI4V0tXZWJWaWV3JTI5JnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmdHh0LWNsaXA9ZWxsaXBzaXMmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz1kYTE3NWE1NzgzMTZlMTBjNzgxOTZjMWNiNGQ2ZmNiYw&mark-x=142&mark-y=112&blend64=aHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTYxNiZ0eHQ9JTQwU2hpbmdvRnVrdXlhbWEmdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPTU3YTUzNzE0ODFlZDZmMmJjNWZmYmI3YjgxNjFlZDE0&blend-x=142&blend-y=491&blend-mode=normal&s=12a357dcc1690aeb6bc403929c3d0ff7)
僕はiPadを持っていないので、前にこのバグを報告してくれていた部員にUserAgentの確認をお願いしました。
そうすると結果は以下のようになっていて、記事の通りということが分かりました(複数人報告してくれていたので、依頼した人とは別の人の画像です)。
あとは直すだけなので、↓の記事などを参考にして、macOSで現状の動作を維持しながらiPadでは直るようにいい感じに直しました。
具体的には、(ua.includes('macintosh') && 'ontouchend' in document)
とすることで実現しました。
![](https://res.cloudinary.com/sirycity/image/upload/co_white,w_1000,h_300,c_fit,l_text:Sawarabi%20Mincho_64_center:%E3%80%90JS%E3%80%91%E3%83%A6%E3%83%BC%E3%82%B6%E3%83%BC%E3%82%A8%E3%83%BC%E3%82%B8%E3%82%A7%E3%83%B3%E3%83%88%E3%81%A7iPad%E3%82%92%E5%88%A4%E5%88%A5(iPadOS%E5%AF%BE%E5%BF%9C%E7%89%88)/v1632818685/jn.jpg)
直したものが以下のPRです。
というわけで、元々はモーダルのmousedown
関連のPRに着手していたのですが、途中で別のissueに関連していそうなことに気づき、一石二鳥という形になりました。
traQ clientチームは今たくさんissueがあるのですが、アクティブな人が少なくて困っています。特にデザインも考えたい人とかいると助かります。部員のみなさんは是非参加してください!
明日はだんさんとT4tsu3iくんです、お楽しみにー