モバイルWebの画像入力は accept と capture を分け、導線ごとに capture の要否を判断する
フロントエンド
モバイル
HTML
知識
運用
モバイルWebで画像撮影を促すファイル入力では、受け付けるファイル種別とカメラ起動のヒントを一つの属性値へ連結しない。MIMEタイプは accept 属性、撮影デバイスの希望は capture 属性へ分け、背面カメラを望む場合は environment を指定する。
古い連結形式はブラウザによって正しく解釈されず、Android系ブラウザでカメラが直接起動せず、標準のファイル選択メニューへフォールバックしたり、カメラ候補が重複表示されたりすることがある。capture は強制ではなくブラウザへのヒントなので、端末やブラウザ差は残る。
落とし穴は、見た目やコードが似た複数の入力UIへ capture を一括で当ててしまうこと。同じ「画像を取り込む」操作でも「その場でカメラを直接起動する」導線と「端末内に保存済みの画像から選ぶ」導線は要件が異なる。後者に capture を付けると端末内画像の選択メニューが出なくなり、選択機能そのものを壊す。属性の一括置換の前に、各利用箇所がどちらの意図なのかを1箇所ずつ確認し、直接カメラ起動の導線にだけ capture を付ける。
回帰テストも導線ごとに分ける。直接カメラ起動側は capture が意図したカメラ向きになっていることを、端末内選択側は accept が画像MIMEタイプだけで capture が付いていないことを、それぞれ独立に検証する。最終確認は対象のAndroid実機でも行い、ボタン操作から期待するカメラまたは選択UIへ遷移するかを見る。