Shoelace

「Shoelace」でQRコードを生成する方法

2023年2月25日 by single コメントはまだありません

QRコードは広く利用されていますが、自分自身生成できたら便利ですよね。

今回は「Shoelace」でQRコードを生成する方法を紹介します。

「Shoelace」でQRコードを生成する方法

タグ「<sl-qr-code>」

タグ「<sl-qr-code>」を利用すると、QRコードを表示できます。

<sl-qr-code value="https://shoelace.style/"></sl-qr-code>

タグ「sl-qr-code」の『value』にQRコードを読み取った後、出力される文字列を定義することで、QRコードを生成することがd系ます。

ここでは、読み取った後の文字列が『https://shoelace.style/』となっています。

導入方法

「Shoelace」の全機能を利用する必要はなく、QRコードだけ生成／表示させたい場合には、QRコードのJSファイル（qr-code.js）だけ読む込むだけで利用できます。

<script type="module" src="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.1.0/dist/components/qr-code/qr-code.js"></script>

なお、全機能を利用したい場合には、CDNで「Shoelace」全体のライブラリを読み込んでください。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.0.0/dist/themes/light.css" />
<script type="module" src="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.0.0/dist/shoelace.js"></script>

サンプル


保存する

HTMLコード

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
  <title>Shoelace QR Code demo(1)</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.0.0/dist/themes/light.css" />
  <script type="module" src="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.0.0/dist/shoelace.js"></script>
  <script type="module" src="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.0.0/dist/translations/ja.js"></script>
  <style>
    body {
      opacity: 0;
    }
    body.ready {
      opacity: 1;
      transition: 0.25s opacity;
    }
  </style>
</head>
<body>
  <div class="qr-overview">
    <sl-qr-code value="https://shoelace.style/" label="QRコードをスキャンすれば、Shoelaceのウェブサイトがわかります"></sl-qr-code>
    <br />
    <sl-input maxlength="255" clearable label="文字列"></sl-input>
    <sl-input maxlength="3"  label="サイズ" value="128"></sl-input>
    <sl-button onclick="saveQR();">保存する</sl-button>
  </div>
  <script type="module">
    // ロードし終わってから表示
    document.body.classList.add('ready');

    const container = document.querySelector('.qr-overview');
    const qrCode = container.querySelector('sl-qr-code');
    const input = container.querySelector('sl-input[label="文字列"');
    const size = container.querySelector('sl-input[label="サイズ"');

    // 初回初期値設定
    input.value = qrCode.value;
    qrCode.size = size.value;

    // 「sl-input」（入力完了イベントでQRコード生成）；QRコード再生成
    input.addEventListener('sl-input', () => (qrCode.value = input.value));

    // 「sl-input」（入力完了イベントでQRコード生成）：サイズ再設定
    size.addEventListener('sl-input', () => (qrCode.size = size.value));

  </script>
  <script >
    // QRコード保存処理
    function saveQR() {
      const qrCode = document.querySelector('sl-qr-code');
      const a = document.createElement("a");
      a.href = qrCode.canvas.toDataURL("image/png", 0.92); // PNGなら"image/png"
      a.download = "qrcode.png";
      a.click();
    }
  </script>
  <style>
    .qr-overview {
      max-width: 256px;
    }
    .qr-overview sl-input {
      margin-top: 1rem;
    }
  </style>
</body>
</html>

デモ

動的にQRコードを生成する方法

<script type="module">
  const container = document.querySelector('.qr-overview');
  const qrCode = container.querySelector('sl-qr-code');
  const input = container.querySelector('sl-input');

  // 初回初期値設定
  input.value = qrCode.value;

  // 「sl-input」（入力完了イベントでQRコード生成）
  input.addEventListener('sl-input', () => (
      qrCode.value = input.value
    )
  );
</script>

テキストボックスに入力された文字列をもとにQRコードを動的に生成させるには、「<sl-qr-code>」タグのvalueに入力された文字列を設定すればいいだけです。

なお、イベント『sl-input』はタグ「<sl-input>」の入力時のイベントになります。

生成したQRコードを出力する方法

<script >
  // QRコード保存処理
  function saveQR() {
    const qrCode = document.querySelector('sl-qr-code');
    const a = document.createElement("a");
    a.href = qrCode.canvas.toDataURL("image/png", 0.92); // PNGなら"image/png"
    a.download = "qrcode.png";
    a.click();
  }
</script>

タグ「<sl-qr-code」の配下には『canvas』オブジェクトがあります。

「HTMLCanvasElement」オブジェクトにはメソッド『toDataURL』があるので、それを利用することで生成したQRコードをダウンロードさせることが可能です。

「<sl-qr-code> 」の属性・プロパティ

デモ

属性・プロパティ

value

QRコードで読み取らせたい文字列を定義する属性です。

label

補助デバイスに通知したい文字列を定義できる属性です。もし指定がなければ、「value」の文字列が代わりに『label』として利用されます。

fill／background

「fill」はQRコードの色、「background」は背景色の定義になります。

「fill」のデフォルトは『black』、「background」は『white』です。

<sl-qr-code value="https://shoelace.style/" fill="deeppink" background="white"></sl-qr-code>
<sl-qr-code value="https://shoelace.style/" fill="red" background="white"></sl-qr-code>
<sl-qr-code value="https://shoelace.style/" fill="blue" background="white"></sl-qr-code>
<sl-qr-code value="https://shoelace.style/" fill="green" background="white"></sl-qr-code>

size

QRコードのサイズをピクセルで指定できる属性です。デフォルトは『128』です。

<sl-qr-code value="https://shoelace.style/" size="64"></sl-qr-code>
<sl-qr-code value="https://shoelace.style/" size="128"></sl-qr-code>
<sl-qr-code value="https://shoelace.style/" size="256"></sl-qr-code>

radius

縁の背景を指定できるプロパティです。0～0.5の間で指定してください。

デフォルトは『0』です。

<sl-qr-code value="https://shoelace.style/" radius="0"></sl-qr-code>
<sl-qr-code value="https://shoelace.style/" radius="0.1"></sl-qr-code>
<sl-qr-code value="https://shoelace.style/" radius="0.2"></sl-qr-code>
<sl-qr-code value="https://shoelace.style/" radius="0.3"></sl-qr-code>
<sl-qr-code value="https://shoelace.style/" radius="0.4"></sl-qr-code>
<sl-qr-code value="https://shoelace.style/" radius="0.5"></sl-qr-code>

errorCorrection／error-correction

データを修復するためのエラー訂正能力を指定できるオプションです。

指定できる文字列は『L』『M』『Q』『H』です。デフォルトは『H』です。

上級者向けのオプションです。詳細は以下のページをご覧ください。

<sl-qr-code value="https://shoelace.style/" error-correction="L"></sl-qr-code>
<sl-qr-code value="https://shoelace.style/" error-correction="M"></sl-qr-code>
<sl-qr-code value="https://shoelace.style/" error-correction="Q"></sl-qr-code>
<sl-qr-code value="https://shoelace.style/" error-correction="H"></sl-qr-code>

ご参考

関連記事