文字列を QR コード画像として表示する表示専用フィールドです。QR の内容は「他フィールドの値を参照」「固定文字列」「スクリプトからの設定」の3通りで指定できます。
QR コードの生成には QRCoder (MIT) を使用します。純 C# 実装で System.Drawing に依存せず、サーバー / WebAssembly のどちらでも動作します。生成した PNG を base64 の data URI に変換し <img> で表示するため、JavaScript は不要です。
- 参照フィールド追従:
SourceFieldに指定したフィールドの値が変わると、QR を自動で再生成 - 固定文字列:
SourceFieldを使わずTextに直接内容を指定 - スクリプト設定:
Field.Text = "..."で内容を動的に変更 (即再描画) - 誤り訂正レベル: L / M / Q / H を選択可能
- 色指定: 前景色 (モジュール色) と背景色を指定可能
- フォールバック: 内容が空、または文字数超過などで生成できない場合は非表示 (点線プレースホルダ)
「デザイナ表示名」は Designer (日本語環境) で表示されるラベルです。
| プロパティ | デザイナ表示名 | 型 | 必須 | 説明 |
|---|---|---|---|---|
| SourceField | 参照フィールド | string | - | QR 化する文字列を取得する参照フィールド名。設定すると値の変更に自動追従する。文字列系フィールド (Text / Link / Id / Select 等) と数値フィールド (Number) に対応 |
| Text | 固定文字列 | string | - | QR 化する固定文字列。SourceField 未設定時の初期値として使用 |
| EccLevel | 誤り訂正レベル | enum (L/M/Q/H) | - | 誤り訂正レベル。既定は M (約15%復元)。高いほど破損に強いが情報密度が上がる |
| DarkColor | 前景色 | string | - | 前景色 (モジュールの色)。既定は #000000 |
| LightColor | 背景色 | string | - | 背景色。既定は #FFFFFF |
SourceFieldが設定されている場合 → 参照フィールドの現在値 (変更に追従)SourceFieldが未設定の場合 →Textの固定文字列- いずれの場合も、スクリプトで
Field.Textを設定すると上書き
| メンバー | 種別 | 説明 |
|---|---|---|
| Text | プロパティ (string) | QR 化する文字列。取得・設定可能。設定すると即座に再描画される |
// 別フィールドの入力値を QR コードにする
async function OnUrlChanged() {
QrCode1.Text = UrlField.Value ?? "";
}
// 複数フィールドを組み合わせて QR 化 (vCard 風など)
async function OnContactChanged() {
QrCode1.Text = `MECARD:N:${NameField.Value};TEL:${TelField.Value};;`;
}| レベル | 復元可能な破損率 | 用途の目安 |
|---|---|---|
| L | 約 7% | データ量を最優先。汚れにくい画面表示向け |
| M | 約 15% | 既定。一般用途 |
| Q | 約 25% | 印刷物などやや汚れる可能性がある場合 |
| H | 約 30% | ロゴ重ね・屋外・汚損が想定される場合 |
誤り訂正レベルを上げるほど同じ内容でも QR のセル数 (バージョン) が増え、密度が高くなります。
- QR は正方形の PNG として生成され、フィールドの領域に合わせて
object-fit: containで表示されます - 拡大時のにじみを防ぐため
image-rendering: pixelatedを指定しています - 内容が空のときは点線の枠 (プレースホルダ) を表示します
- 表示専用フィールドのため、値を DB に保存する機能はありません (QR 化する元の文字列は
SourceField側のフィールドで保持してください) - QR コードの容量には上限があります。非常に長い文字列を指定すると生成に失敗し、非表示になります (必要に応じて
EccLevelを下げるか内容を短くしてください)