Jekyllで試してみたので以下のようになっている。

やっていることは _config.yml に記載されているビットコインアドレスからQRコード生成。 その生成したQRコードを表示して、クリックするとビットコインアドレスをコピーできる仕様になっている。

Gemfile

今回利用する rqrcode をインストールする

group :qrcode do
  gem "rqrcode", "~> 2.0"
end

Rakefile

Rakefileは文字列からQRコードを生成するコードがあるだけ。

あとは、 bundle exec 関連を意識せずに実行できるようなコマンドを書いている。

amespace :qr do
  desc 'QRcode'
  task :code do
    sh "bundle install --path vendor/bundle"
    sh "bundle exec rake qr:svg"
  end

  task :svg do
    require "rqrcode"
    require 'yaml'
    data = YAML.load_file("_config.yml")
    qr = RQRCode::QRCode.new(data["bitcoin_address"])
    svg = qr.as_svg(
      color: "000",
      shape_rendering: "crispEdges",
      module_size: 11,
      standalone: true,
      use_path: true,
      viewbox: true
    )
    File.open("assets/svg/bitcon.svg", "w") { |f| f.write(svg)}
  end
end

HTML

Bootstrap や poper.js を使っている。 body にはクリックできる a タグを設置し、クリック後にModalが表示されるようになっている。

<head>
  <script type="text/javascript" src="https://makietan.github.io/assets/js/clipboard.js"></script>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</head>

<body>
  <li>
    <a class="fab fa-2x fa-bitcoin text-white no-decoration" data-toggle="modal" data-target="#bitcoinSvgModal">
      <span class="description">Bitcoin</span>
    </a>
    <!-- Modal -->
    <div class="modal fade" id="bitcoinSvgModal" tabindex="-1">
      <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
          <div class="modal-body">
            <img class="clipboard" src="https://makietan.github.io/assets/svg/bitcoin.svg"
              data-clipboard="" data-toggle="tooltip" data-placement="top"
              title="Copy!">
          </div>
        </div>
      </div>
    </div>
  </li>
</body>

clipboard.js

クリップボードにコピーするための自作JSである。 poper.js を操作したいのでどうしても必要となった。 これも poper.js も画像を表示するだけなら不要なので実装する必要はない。

window.onload = () => {
  [...document.querySelectorAll('.clipboard')].forEach((e) => {
    e.addEventListener("click", () => {
      copy(e.dataset.clipboard);
      showTooltip('Copy!');
      hideTooltip();
    });
  });

  $('[data-toggle="tooltip"]').tooltip({
    trigger: 'click',
    placement: 'top'
  });
};

function hideTooltip() {
  setTimeout(function() {
    $('[data-toggle="tooltip"]').tooltip('hide');
  }, 1000);
}

function showTooltip(message) {
  $('[data-toggle="tooltip"]').tooltip('hide')
    .attr('data-original-title', message)
    .tooltip('show');
}

function copy(string) {
  var tmp = document.createElement('div');
  tmp.appendChild(document.createElement('pre')).textContent = string;
  var s = tmp.style;
  s.position = 'fixed';
  s.left = '-100%';
  document.body.appendChild(tmp);
  document.getSelection().selectAllChildren(tmp);
  var result = document.execCommand('copy');
  document.body.removeChild(tmp);
  return result;
}