やってみよう「読み取りを試す」を押すと、コードを読み取った様子を再現します
表示・レイアウトメジャー（よく見る）
QRコード読み取り画面
QR Code Scanner
カメラ映像の真ん中に四角い枠があり、線が上下に動いて、枠にQRコードを合わせると「ピッ」と読み取る。
別名バーコードスキャナーコードリーダーカメラ読み取り画面スキャン画面
どこで使われている？
- よく見かける場所
- PayPay などの決済アプリ、LINEの友だち追加、チケット入場
- 使うとよい場面
- QRコードやバーコードを読み取ってもらうとき
- 避けたい場面
- 読み取ったあとに何が起きるか伝えない使い方
AIへの指示文
これをコピーしてAIに貼り付ければOKです。Webサイトを作る前提の内容です（右上の「何を作る？」で変えられます）。
HTML / CSS / JavaScript で「QRコード読み取り画面（QR Code Scanner）」を実装してください。 動き：カメラの映像を全画面に出し、中央以外を暗くして四隅だけの枠を表示する。枠の中を横線が上下に動いて読み取り中であることを示し、読み取れたら枠を緑にして結果を下から出す。 使う部品：BarcodeDetector API（または html5-qrcode）
もっと詳しく：プログラムでの部品名
同じ動きでも、作るものによってプログラムの中での部品の名前が違います。上の指示文にはすでに入っているので、覚える必要はありません。AIの説明に出てきた単語を確認したいときに使ってください。
| Webサイトなら | BarcodeDetector API（または html5-qrcode） |
|---|---|
| iPhoneアプリなら | AVFoundation（DataScannerViewController） |
| Androidアプリなら | ML Kit のバーコードスキャン（CameraX） |
| Flutterなら | mobile_scanner パッケージ |
| React Nativeなら | expo-camera のバーコード読み取り |