QRコードは、URL共有や決済、イベントチケットの確認、ログイン認証など、さまざまな場面で利用されています。
ASP.NET CoreのWebアプリ（Razor Page）において、Free Spire.Barcode for .NET を使えば、C#で簡単にQRコードを生成し、Webページ上に表示・ダウンロードさせることが可能です。
この記事では、以下の流れで実装方法を解説します。
- ユーザーが文字列やURLを入力するフォームの作成
- バックエンドでQRコード画像を生成し、Base64文字列に変換
- 生成したQRコードをページに表示し、ダウンロードリンクを提供
本文では ASP.NET Core Web App（Razor Page） を例に説明します。
QRコード生成には無料の Free Spire.Barcode for .NET を利用します。
NuGetからインストール可能です：dotnet add package FreeSpire.Barcode
1. フロントエンドページの作成（Index.cshtml）
まず、QRコード化したいテキストやURLを入力するフォームを用意します。
送信後、生成されたQRコード画像をBase64形式で表示し、画像のダウンロードも可能にします。
スタイルを調整したHTMLコード例：
@page
@model IndexModel
@{
ViewData["Title"] = "QRコードジェネレーター";
}
<h2 style="font-family: Arial; color: #2c3e50;">QRコードジェネレーター</h2>
<form method="post" style="margin-bottom:20px; background-color:#f9f9f9; padding:15px; border-radius:5px; width: fit-content;">
<label for="InputData" style="font-weight:bold;">テキストまたはURLを入力してください：</label><br />
<input type="text" id="InputData" name="InputData" style="width:300px; padding:5px; margin:5px 0;" required />
<button type="submit" style="padding:5px 15px; background-color:#3498db; color:white; border:none; border-radius:3px; cursor:pointer;">
QRコードを生成
</button>
</form>
@if (!string.IsNullOrEmpty(Model.QrCodeBase64))
{
<div style="margin-top:20px; border:1px solid #ddd; padding:10px; display:inline-block; border-radius:5px;">
<img src="data:image/png;base64,@Model.QrCodeBase64" alt="QRコード" style="display:block; margin-bottom:10px;" />
<a href="data:image/png;base64,@Model.QrCodeBase64" download="qrcode.png"
style="background-color:#2ecc71; color:white; padding:5px 10px; border-radius:3px; text-decoration:none;">
QRコードをダウンロード
</a>
</div>
}
ポイント：
- フォームはPOSTメソッドで送信し、入力必須を設定しています。
- QRコード画像はBase64文字列としてインライン表示し、別途画像ファイルの保存は不要です。
- 「QRコードをダウンロード」リンクは、画像をPNGファイルとして保存できるようになっています。
2. バックエンドのQRコード生成処理（Index.cshtml.cs）
バックエンドでは、Spire.Barcode の BarcodeSettings と BarCodeGenerator を用いてQRコードを生成します。
生成した画像をメモリ上でPNG形式に保存し、Base64文字列としてフロントに返却します。
コード例：
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;
using Spire.Barcode;
public class IndexModel : PageModel
{
[BindProperty]
public string InputData { get; set; }
public string QrCodeBase64 { get; set; }
public void OnPost()
{
if (!string.IsNullOrWhiteSpace(InputData))
{
QrCodeBase64 = GenerateQrCodeBase64(InputData);
}
}
private string GenerateQrCodeBase64(string input)
{
var settings = new BarcodeSettings
{
Type = BarCodeType.QRCode, // QRコードタイプを指定
Data = input, // QRコードに埋め込むデータ
Data2D = input, // 2Dコード用のデータ（通常はDataと同じ）
QRCodeDataMode = QRCodeDataMode.Byte, // バイトモード（多言語対応）
QRCodeECL = QRCodeECL.M, // 中レベル誤り訂正（約15%復元可能）
X = 3, // モジュールサイズ（画像の大きさに影響）
ShowText = false, // デフォルトのバーコード文字は非表示
ShowBottomText = true, // カスタムの底部テキストを表示
BottomText = input // 底部に入力データを表示
};
var generator = new BarCodeGenerator(settings);
using var ms = new MemoryStream();
var qrImage = generator.GenerateImage();
qrImage.Save(ms, System.Drawing.Imaging.ImageFormat.Png);
return Convert.ToBase64String(ms.ToArray());
}
}
技術的なポイント：
-
QRCodeDataMode.Byteにより日本語など多バイト文字も正しくエンコード可能。 -
QRCodeECL.M（中レベルの誤り訂正）は、多少の破損でも復元できるので実用的。 -
BottomTextで入力内容をQRコードの下に表示可能。
3. 実行結果イメージ
ユーザーがテキストやURLを入力し、「QRコードを生成」ボタンを押すと、QRコードがすぐにページ内に表示されます。
また、「QRコードをダウンロード」リンクを押せば、PNG画像として保存可能です。
例： https://www.sample.com/ を入力した場合の画面イメージ
まとめ
ASP.NET Core の Razor Page で Spire.Barcode for .NET を使用すれば、ユーザー入力から QR コードを簡単に生成し、画像を Base64 形式で Web 上に表示するとともにダウンロード機能も提供できるため、柔軟な QR コード生成機能をすぐに実装できます。これにより、業務システムの認証やイベント管理、URL の共有など、幅広い用途に活用可能です。
より高度なQRコード生成（ロゴ埋め込み、色指定、複数生成など）が必要な場合も、BarcodeSettings を拡張して対応できます。
詳しいドキュメントは Spire.Barcode for .NET公式サイト をご覧ください。