@peccul is peccu

(love peccu '(emacs lisp cat outdoor bicycle mac linux coffee))

iOS11から標準カメラでQRCodeを読めるようになったのでみているページのURLをQRCodeで表示するブックマークレットを書いた

iOS11から標準カメラでQRCodeを読めるようになったのでwindow.location.hrefをQRCode表示するブックマークレットを書きました。

お気に入りのURLにコピペすればおそらく動きます。

Appleらしさあふれる作りですよね。QRCodeって選ばなくてもカメラに写ればQRCode読み取れたんだけどアクセスする?みたいな通知してくれるの。

JSだけでSVGを生成するものがあったので利用しました。 qrcode-svg

(ブックマークレット用に 100%100%25 になってます)

javascript:(function(){
  var idname = 'qrplaceholder';
  var createPlaceholder = function(){
    var c = document.createElement('div');
    c.style.width = '100%25';
    c.style.height = '100%25';
    c.style.position = 'fixed';
    c.style.display = 'flex';
    c.style.top = '0';
    c.style.backgroundColor = 'rgba(0, 0, 0, 0.1)';
    c.zIndex = 10000;
    c.onclick = function(){
      document.body.removeChild(c);
    };
    var d = document.createElement('div');
    d.id = idname;
    d.style.width = '266px';
    d.style.height = '266px';
    d.style.marginTop = '10px';
    d.style.zIndex = 9999;
    d.style.margin = 'auto';
    c.appendChild(d);
    document.body.appendChild(c);
  };

  var showSvg = function(){
    try {
      var qrcode = new QRCode({
        content: window.location.href,
        width: 256,
        height: 256,
        padding: 4
      });
      document.getElementById(idname).innerHTML = qrcode.svg();
    }
    catch (e) {
      alert(e.message);
    }
  };

  var loadJS = function(onload){
    var s = document.createElement('script');
    document.head.appendChild(s);
    s.onload = onload;
    s.src = '//papnkukn.github.io/qrcode-svg/javascripts/qrcode.js';
  };

  loadJS(function(){
    createPlaceholder();
    showSvg();
  });
})()

参考