html スマホで撮影orファイル選択して、ファイルアップ（capture、accept）

基本

スマホの端末で挙動が異なる

ファイル選択

accept属性を追加

<input type="file" name="xxx" accept="image/*">

撮影

capture属性、accept属性を追加

<input type="file" name="xxx" capture="user" accept="image/*">

属性

capture属性

サイトによって値の種類が異なるのでひとまずマルっと記載

• camera - カメラ
• camcorder - ビデオカメラ。未調査
• microphone - 音声レコーダー。未調査
• filesystem - ファイル選択システム
• user - インカメラ。「camera」と同じっぽい
• environment - 背面カメラ。端末によってはインカメラが起動するので手動で背面に切替えてもらう

※噂によるとiphoneだとenvironmentが動作する。アンドロイドは不明だが、私のアンドロイドはcameraと同じ挙動。

accept属性

今回はスマホで…って話なので「image/*」と「video/*」のみが重要

• image/* - 画像ファイル
• video/* - ビデオファイル
• audio/* - 音声ファイル
• ファイル拡張子 - .jpgや.pdfといった拡張子で取り扱うファイル
• MIMEタイプ - 有効なMIMEタイプで拡張子のないものtext/plain等

ファイル選択の記述サンプル

静止画限定

<input type="file" name="xxx" accept="image/*">

動画限定

<input type="file" name="xxx" accept="video/*">

静止画、動画限定

<input type="file" name="xxx" accept="image/*, video/*">

指定なし

<input type="file" name="xxx">

撮影の記述サンプル

求めている挙動じゃない…のでUI側で諸々考える必要があるっぽい

静止画限定

カメラが起動し、写真のみ撮れる。動画は撮れない

<input type="file" name="xxx" capture="camera" accept="image/*">

動画限定

カメラが起動し、動画のみ撮れる。写真は撮れない

<input type="file" name="xxx" capture="camera" accept="video/*">

静止画、動画限定

「カメラ」「閲覧」の選択肢が表示され、「カメラ」を選ぶと写真のみ撮れる。「閲覧」を選ぶとスマホに保存されているファイルが選択できる

<input type="file" name="xxx" capture="camera" accept="image/*, video/*">

希望は「カメラ」を選ぶとカメラが起動して、カメラ内で写真・動画の撮影を切り替える…ってやつ。コレができないっぽい。端末によって出来る・出来ないがあるのかは不明。少なくとも私の端末では動画の撮影に切り替えることが出来なかった

保存されているファイルの選択

• 通常…スマホで保存されている画像・動画を見ると「各フォルダ→各ファイル」
• 「accept="image/*, video/*"」とした場合「画像or動画→各フォルダ→各ファイル」となる