コンテンツにスキップ

HTML Living Standard/capture属性

出典: フリー教科書『ウィキブックス(Wikibooks)』

capture属性

[編集]

capture属性は、デバイスのカメラやマイクを利用してデータを直接取得するために使用する属性です。この属性は特に<input type="file">要素で使用され、ユーザーがファイル選択ダイアログを開く代わりに、カメラやマイクを直接起動してメディアを記録するよう促します。

基本構文

[編集]
  
<input type="file" capture>

capture属性は、値を指定せず存在するだけで有効になります。また、必要に応じて値をuserまたはenvironmentに指定して、カメラの種類(フロントカメラまたは背面カメラ)を指定することが可能です。

効果

[編集]

capture属性を使用することで、以下のような動作が実現されます:

  • スマートフォンやタブレットなどのデバイスでは、ユーザーがカメラやマイクを直接起動して写真や音声を記録できます。
  • デスクトップブラウザでは、この属性は無視される場合があります。

使用例

[編集]

写真の撮影に使用

[編集]
  
<label for="cameraInput">写真を撮影してください:</label>  
<input type="file" id="cameraInput" accept="image/*" capture="environment">

この例では、背面カメラ(environment)を使用して写真を撮影するよう促します。

音声の記録に使用

[編集]
  
<label for="audioInput">音声を記録してください:</label>  
<input type="file" id="audioInput" accept="audio/*" capture>

この例では、デバイスのマイクを使用して音声を記録するよう促します。

注意点

[編集]
  • capture属性は、主にモバイルブラウザで機能します。一部のデスクトップブラウザではサポートされていない場合があります。
  • 必ずaccept属性と併用して、期待するメディアタイプ(例:画像、音声、動画)を指定してください。
  • ユーザーのプライバシーを保護するため、カメラやマイクへのアクセスはユーザーの許可が必要です。
  • 一部のブラウザやデバイスでの動作は一貫していない場合があるため、ユーザー体験を損なわないようにフォールバック機能を設けることを検討してください。

互換性

[編集]
互換性
ブラウザ サポート状況
Chrome (モバイル) 対応
Edge 一部対応
Firefox 一部対応
Safari (モバイル) 対応
Opera (モバイル) 対応

関連項目

[編集]

参考文献

[編集]