feature image

2023年12月9日 | ブログ記事

traQの改善で一石二鳥した話

この記事はアドベントカレンダー2023の9日目の記事です。
こんにちは、21B SysAd班のmehm8128です。
今回は最近traQの改善で一石二鳥した話をしていきます。といっても当初予定していた記事が間に合わなさそうだったので書いてます。

僕はtraQチームでフロントエンドの改善をしていて、最近は普段traQを使っている中で特に直したくなったUX周りの改善を中心に行っているのですが、今回は元々以下のPRに取り組んでいました。

モーダル内でmousedownしてモーダル外でmouseupしたときはモーダルを閉じないように by mehm8128 · Pull Request #4119 · traPtitech/traQ_S-UI
close #3536discussionタグついてるけど使いにくいと感じるときがあるので直しました考慮漏れがないかあんまり自信ないかもです

内容は書いてある通りなので省略しますが、モーダル周りの改善で、PCだとmousedownmouseupを使うところがiOSだとtouchstarttouchendを使っている実装だったのが今回の一石二鳥ポイントです。traQのモーダル周りはかなり微妙な感じだと感じているので、いつか直したいですね...。

僕はfeedbackの対応(traQのfeedbackチャンネルにきたバグ報告や機能追加要望への対応)をしていることもあり、約180あるissueのほとんどは把握している(つもりな)のですが、今回上のPRを出すときにisIOSという関数の実装を見て、↓のissueを思い出しました(実装リンク先はissueのバグの修正後のコードなので、19行目が書かれていない状態でした)。

各種モーダルがiPadだと外側をクリックしても閉じられない · Issue #4003 · traPtitech/traQ_S-UI
根本的に直せたら直したいけど、直せなさそうであれば右上に閉じるボタンを置くなどするのがよさそう

isIOSの実装を見て、もしかしてこのissueはこのあたりが原因なのではと思い、ちょっと調べてみたらそれらしき記事に出会いました。
iPadではUserAgentにiPadの文字列が含まれることを想定されたコードだったのですが、あるバージョンからはそうではなくて、iPadだった部分がMacintoshになってしまっていたのが原因でした。そのため、isIOSfalseになってしまっていました。

iOS 13以降 iPadのUserAgentに注意 (WKWebView) - Qiita
Xcode 11 でビルドしたWebViewのUserAgentのデバイスごとの比較です。注目したいのは iOS 13.0 iPad 9.7 インチ以上のUserAgentで、iPadではなくMa…

僕はiPadを持っていないので、前にこのバグを報告してくれていた部員にUserAgentの確認をお願いしました。
chrome_pjyrs9pgyi
そうすると結果は以下のようになっていて、記事の通りということが分かりました(複数人報告してくれていたので、依頼した人とは別の人の画像です)。
img_0105
あとは直すだけなので、↓の記事などを参考にして、macOSで現状の動作を維持しながらiPadでは直るようにいい感じに直しました。
具体的には、(ua.includes('macintosh') && 'ontouchend' in document)とすることで実現しました。

【JS】ユーザーエージェントでiPadを判別(iPadOS対応版) | JavaScriptに関するお知らせ
JavaScriptのwebサイト。JavaScriptの最新情報など様々な情報をご覧いただけます。

直したものが以下のPRです。

特定のバージョン以上のipadでもモーダルがクリックで閉じられるように by mehm8128 · Pull Request #4117 · traPtitech/traQ_S-UI
close #4003参考: https://qiita.com/ShingoFukuyama/items/ef573a8e3e23ef12542e, https://iwb.jp/ipad-safari-javascript-useragent-is-not-ipad/, https://jsnotice.com/posts/2019-09-08/index.html以下2点が確認でき…

というわけで、元々はモーダルのmousedown関連のPRに着手していたのですが、途中で別のissueに関連していそうなことに気づき、一石二鳥という形になりました。

traQ clientチームは今たくさんissueがあるのですが、アクティブな人が少なくて困っています。特にデザインも考えたい人とかいると助かります。部員のみなさんは是非参加してください!

明日はだんさんとT4tsu3iくんです、お楽しみにー

mehm8128 icon
この記事を書いた人
mehm8128

21BJC。SysAd班で色々やってます

この記事をシェア

このエントリーをはてなブックマークに追加
共有

関連する記事

2023年12月11日
DIGI-CON HACKATHON 2023『Mikage』
toshi00 icon toshi00
2021年8月12日
CPCTFを支えたWebshell
mazrean icon mazrean
2021年5月19日
CPCTF2021を実現させたスコアサーバー
xxpoxx icon xxpoxx
2023年12月13日
HgameOPについて語る
noc7t icon noc7t
2023年7月15日
2023 春ハッカソン 06班 stamProlog
H1rono_K icon H1rono_K
2022年9月26日
競プロしかシラン人間が web アプリ QK Judge を作った話
tqk icon tqk
記事一覧 タグ一覧 Google アナリティクスについて