【要約】退勤ボタンを『押すだけ』で終わらせず、タイムカード画像まで作った [Qiita_Trend] | Summary by TechDistill
> Source: Qiita_Trend
Execute Primary Source
// Problem
開発者が、退勤の儀式を画像としてSNSへ共有したいと考えた際、ブラウザの仕様による制約に直面した。具体的には以下の問題が発生した。
- ・XのWeb Intentでは、生成した画像ファイルをURLパラメータで直接渡せない。
- ・PC環境で新しいウィンドウを開こうとすると、ポップアップブロックに阻まれる。
- ・Web Share APIの有無だけでなく、端末の操作感に合わせた適切な分岐が必要であった。
// Approach
開発者は、ブラウザ標準APIを組み合わせ、デバイスごとに最適化された共有フローを実装した。以下の手法を採用している。
- ・Canvas APIを用いて、退勤時刻やメッセージを含む1200×630の画像を動的に生成。
- ・スマホ環境では、Web Share APIを利用して画像とテキストを同時に共有。
- ・PC環境では、Clipboard APIで画像をコピーし、現在のタブでXを開く。
- ・環境判定にはuserAgentとmaxTouchPointsを用い、誤作動を防止。
// Result
開発者は、サーバーレス構成ながら、一貫したユーザー体験を実現した。以下の成果が得られている。
- ・localStorageにより、リロード後も打刻状態が保持される。
- ・デバイス特性を考慮した共有フローにより、画像付き投稿への導線を確保。
- ・CSS疑似要素とCanvas APIの併用により、軽量かつ視覚的に豊かなUIを実現。
Senior Engineer Insight
> 本実装は、サーバーレスで極めて低コストかつ低レイテンシな設計である。大規模システムとは対照的だが、ブラウザAPIの制約を、デバイス別の挙動差（Web Share vs Clipboard）で解決するアプローチは非常に実戦的だ。ただし、localStorageへの依存はデータの揮発性を伴うため、信頼性が求められる業務用途には不向きである。UXの「心地よさ」を技術で補完する設計思想は、フロントエンド開発において学ぶべき点が多い。