HTMLから画像をアップロードするためのinput type="file"とHTML Media Capture

HTML を使って、スマートフォンから画像をアップロードをするケースがあります。 このような場合、エンドユーザに対して

• カメラを使ってアップロードさせる
• フォトライブラリや iCloud Drive からアップロードさせる

などができると便利です。 このあたりをどのように実現するのかを調べてみたので、理屈上どのようになるかを説明したいと思います。

HTML

HTML を使ってファイルをアップロードさせるためには、<input type="file"> のタグを使うことになります。 一般に、<input type="file"> の要素があると、ブラウザはユーザに対して、ファイル選択ダイアログを表示します。

この <input type="file"> に対しては accept 属性を付与でき、この属性を用いて「どのようなファイルのアップロードが」期待されているのかを示すことができます。具体的には、「画像」「動画」あたりが代表的でしょうか。

この指定により、ブラウザは一般的なファイル選択ダイアログではなく、そのコンテキストに見当ったダイアログを出すことが可能になります。

例えば、画像のアップロードを行う場合、

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

と書くことで、例えば Mobile Safari は以下のような画像選択用のダイアログを表示する実装になっています。

同様に、動画のアップロードを行う場合は、

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

と書くことで(静止画像ではなく)動画撮影を選択することが可能です。

言っていれば、accept 属性に対しては、MIME Type のようなものを設定すれば良いということです。

ちなみに、一応、HTML 仕様上は .gif など、拡張子指定も可能ということになっていますが、Mac の Chrome は対応していた(※)ものの、iPhone 7 の Safari は未対応でした。

※Mac の場合は「形式」として Graphics Interchange Format と認識されていることが分かります。

HTML Media Capture

上記のような <input type="file"> のタグに加えて、ユーザデバイス上のカメラとかマイクとかを利用できるようにした拡張機能が HTML Media Capture です。 百聞は一見にしかずで、下記のタグを使うと、iPhone Safari から「ファイルを選択」ボタンを押下するだけで、直接カメラが立ち上がります。

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

ここでは capture 属性がミソで、capture ã‚’ user にするとフロントカメラが立ち上がり、セルフィー撮影モードになります。一方、capture ã‚’ environment にすると、リアのカメラが立ち上がります。

この HTML Media Capture の仕様については、W3C では Candidate Recommendation となっていて、以下で定義されています。

• HTML Media Capture

ちなみに、Web 上のサンプルとしては、capture="camera" とかが散見されるんですが、これは上記の仕様には沿っていません。 Mobile Safari のドキュメントにも、その記載はありません。

Safari 10.1 via kwout

補足

とりあえず、体験用に HTML ページを置いとくので、よかったらどうぞ。

https://gistpreview.github.io/?71a54c10507364abbc8335c4bfa7d1b0

ソースはこちらです。