ASP.NET Core で QR コードの生成

はじめに

ここでは、Visual Studio 2019 での ASP.NET Core 3.1 プロジェクトにおいて、クライアント サイド、 JavaScript による QR コードの生成方法を説明します。
今回は、以下のライブラリを使用します。

• qrcode.js

QR コード生成ライブラリの追加

qrcode.js からダウンロードして、プロジェクトに追加しても良いですが、今回は、Visual Studio のクライアント ライブラリ マネジャー使って、プロジェクトにライブラリを追加します。

[ソリューション エクスプローラー] - [対象プロジェクト] - [wwwroot] - [lib] で、右クリック メニューから、[追加] - [クライアント側のライブラリ] を選択します。

[ライブラリ] に "qrcode.js" と入力して、[Enter] とすると、CDNJS から、最新のライブラリが検索されます。[インストール] を選択します。

"wwww\lib" 以下に "qrcode" というフォルダーが作成され、同フォルダー以下にライブラリが追加されます。

ここで、プロジェクト直下の "libman.json" を開いてみてやると、"qrcodejs" のエントリが追加されていることが分かります。

もちろん手動でプロジェクトに qrcode.js を追加してもよいのですが、パッケージ マネジャーを使ってインストールすると、削除や更新が容易になります。

QR コード生成コードの実装

QR コード生成のスクリプトを実装していきます。ここでは、Visual Studio から生成した ASP.NET Core プロジェクト テンプレート内の index.cshtml への実装例を説明します。

まず、QR コードを表示したい箇所に div 要素を定義します。この時、div 要素に任意の id を付与しておきます。
次に、Scripts セクションに、先にインストールしたライブラリへの参照と、QR コード生成のコードを記述します。
コード記述では、QRCode クラスのインスタンス生成時のコンストラクタの第一引数で、QR コードを表示したい箇所に定義した div 要素の id を指定します。

Index.cshtml

@page
@model IndexModel
@{
    ViewData["Title"] = "Home page";
}

<div class="text-center">
    <h1 class="display-4">Welcome</h1>
    <p>Learn about <a href="https://docs.microsoft.com/aspnet/core">building Web apps with ASP.NET Core</a>.</p>
    @*QR コード表示箇所*@
    <div class="qrCodeImg" id="qrCode"></div>
</div>


@section Scripts{
    @*qr.code.js への参照*@
    <script type="text/javascript" src="~/lib/qrcodejs/qrcode.js"></script>
    <script type="text/javascript">

        $(function () {
            //id=qrCode の要素に、QR コードを表示
            new QRCode('qrCode',
                {
                    text: 'https://qiita.com/hiromasa-masuda',
                    width: 150,
                    height: 150,
                    colorDark: '#8b0000',
                    colorLight: '#ffffff',
                    correctLevel: QRCode.CorrectLevel.H
                });
        });

    </script>
}

実行結果は、以下となります。

Tips としては、QR コードをセンタリングしたい場合、動的に生成される img 要素が block 要素として定義されるので、スタイル設定で、".qrCodeImg > img { margin: 0 auto; }" といったように、子要素の img を block 要素として扱ってセンタリングすればうまくいきます。

qrcode.js を使えば容易にクライアント サイドで QR コードを生成できます。
Visual Studio のライブラリ マネージャを使うことで、Java Script ライブラリの管理も容易になります。

参考サイト

• qrcode.js
• ASP.NET Core での TOTP authenticator アプリの QR コード生成を有効にする