【HTML Living Standard】capture属性の使い方
capture属性の使い方について、初心者にもわかりやすく解説します。
基本的な使い方
captureプロパティは、HTMLの<input type="file">要素で使用され、ファイルをアップロードする際に、デバイスのメディア入力デバイスを直接起動するかどうかを制御するプロパティです。このプロパティは、特にスマートフォンやタブレットなどのモバイルデバイスにおいて、ユーザーがカメラで写真を撮ったり、動画を録画したり、マイクで音声を録音したりして、それを即座にWebアプリケーションにアップロードしたい場合に役立ちます。
captureプロパティにuserという値を設定すると、ユーザーに面した（インカメなどの）カメラやマイクが起動されることを推奨します。一方、environmentという値を設定すると、デバイスの背面にある（アウトカメラなどの）カメラやマイクが起動されることを推奨します。これらの値を指定することで、ユーザーが既存のファイルを選択する手間を省き、特定の種類のコンテンツをより迅速かつ直感的に入力できるようになります。
もしcaptureプロパティが設定されていない場合や、指定された値がサポートされていない場合、ユーザーは通常通り、既存のファイルから選択するか、またはデバイスのメディア入力機能を使って新しいコンテンツを生成するかを自由に選択できます。この機能は、Webアプリケーションにおけるユーザーエクスペリエンスの向上に貢献します。
構文(syntax)
1<input type="file" capture="user">
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません
サンプルコード
HTML capture属性でカメラ画像を取得する
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>HTML capture属性サンプル</title> 7</head> 8<body> 9 <h1>デバイスのカメラから画像をキャプチャ</h1> 10 11 <p>以下の入力フィールドは、`capture`属性を使用してデバイスのカメラを直接起動します。</p> 12 13 <!-- accept="image/*" は画像ファイルのみを受け入れることを示します。 --> 14 <!-- capture="user" は、通常、ユーザーに面したカメラ（フロントカメラ）を起動します。 --> 15 <input type="file" accept="image/*" capture="user"> 16 <p>↑ フロントカメラを使用して写真を撮る</p> 17 18 <br> 19 20 <!-- capture="environment" は、通常、ユーザーの反対側にあるカメラ（リアカメラ）を起動します。 --> 21 <input type="file" accept="image/*" capture="environment"> 22 <p>↑ リアカメラを使用して写真を撮る</p> 23 24 <br> 25 26 <!-- capture属性のみを指定した場合、デバイスは利用可能な最適なカメラ（多くの場合、フロントカメラ）を選択します。 --> 27 <input type="file" accept="image/*" capture> 28 <p>↑ デフォルトのカメラを使用して写真を撮る</p> 29</body> 30</html>
HTMLのcapture属性は、<input type="file">要素と組み合わせて使用し、ファイルをアップロードする際に、デバイスに搭載されたカメラを直接起動させるための属性です。これにより、ユーザーは既存のファイルを選択する代わりに、その場で写真や動画を撮影し、アップロードすることが可能になります。
この属性は引数を受け取らず、また、特定の値を返す戻り値もありません。capture属性を単独で指定した場合（例: capture）、デバイスは利用可能な最適なカメラを自動的に選択します。多くの場合は、ユーザーに面したフロントカメラが起動します。
特定のカメラを起動したい場合は、属性値としてuserまたはenvironmentを指定します。capture="user"を指定すると、通常、デバイスのフロントカメラが起動し、自撮りなどに利用できます。一方、capture="environment"を指定すると、デバイスの背面にあるリアカメラが起動し、周囲の風景などを撮影する際に適しています。
サンプルコードでは、accept="image/*"と組み合わせることで、画像ファイルのみをキャプチャするように指定しています。このcapture属性は、特にモバイルデバイスから画像をアップロードする際のユーザー体験を大幅に向上させる機能です。
capture属性はブラウザやデバイスにより対応状況が異なりますので、事前に動作確認が必要です。カメラへのアクセスはユーザーの許可が必須であり、許可がないと機能しません。これはセキュリティとプライバシー保護のため重要な点です。userやenvironmentといった値は推奨設定ですが、デバイスによっては意図しないカメラが選択される可能性もあります。この属性はinput type="file"とaccept属性と組み合わせて使い、指定したファイル形式（例：画像）以外では期待通りの動作をしないことがあります。撮影された画像データは、フォーム送信やJavaScript処理を通じて適切に扱ってください。
HTML capture属性でカメラ入力を取得する
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>capture属性のサンプル</title> 7</head> 8<body> 9 <h1>画像キャプチャのサンプル</h1> 10 11 <p> 12 以下の入力フィールドは、デバイスのカメラを直接起動して画像をキャプチャします。<br> 13 スマートフォンなどのモバイルデバイスでこのページを開くと、動作を確認できます。 14 </p> 15 16 <!-- 17 capture属性は、<input type="file"> 要素でファイルを選択する際に、 18 メディアキャプチャデバイス（カメラ、マイクなど）を直接使用するためのヒントを提供します。 19 20 - accept="image/*" は、画像ファイルのみを受け入れることを示します。 21 - capture="user" は、ユーザー向けのカメラ（通常は前面カメラ）を推奨します。 22 "environment" を指定すると、環境向けのカメラ（通常は背面カメラ）を推奨します。 23 24 この属性は、キーボードからの直接入力ではなく、メディアデバイスからの入力に特化しています。 25 --> 26 <input type="file" accept="image/*" capture="user"> 27</body> 28</html>
HTMLのcapture属性は、<input type="file">要素で使用され、ユーザーがファイルをアップロードする際に、デバイスに搭載されたカメラやマイクなどのメディアキャプチャデバイスを直接起動するためのヒントを提供する属性です。この属性自体に引数や戻り値はなく、WebブラウザとOSが連携してその機能を実現します。通常、ファイル選択ダイアログを表示する代わりに、すぐにカメラやマイクを起動できるため、迅速なメディア入力を可能にします。
capture属性は、受け入れるファイルの種類をaccept属性（例: accept="image/*"）で指定することと組み合わせて使われることが一般的です。指定できる値には「user」と「environment」があります。「user」は、通常、デバイスの前面カメラを推奨し、自撮りなどに適しています。「environment」は、通常、背面カメラを推奨し、風景やオブジェクトの撮影に適しています。
サンプルコードでは、<input type="file" accept="image/*" capture="user">と記述しています。これは、画像ファイルのアップロードを想定しており、かつデバイスの前面カメラを直接起動して画像をキャプチャするようブラウザにヒントを与えています。これにより、特にスマートフォンなどのモバイルデバイスにおいて、ユーザーは写真アプリなどを介さずに直接画像を撮影し、ウェブページにアップロードできるようになります。
capture属性は、<input type="file">要素と組み合わせて使用される特殊な属性です。キーボードからの直接入力とは異なり、デバイスのカメラやマイクを直接起動して画像や音声などのメディアを取り込む際に利用します。
この属性は、accept="image/*"のように受け入れるファイル形式を指定するaccept属性と合わせて使うのが一般的です。capture="user"は前面カメラ、capture="environment"は背面カメラの使用を推奨するヒントとなります。
注意点として、主にスマートフォンなどのモバイルデバイスで効果を発揮します。PC環境では通常のファイル選択ダイアログが表示されることが多いです。また、ユーザーはブラウザからカメラやマイクへのアクセス許可を求められるため、プライバシーへの配慮が必要です。