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(); }); })()
参考
- qrcode-svg
- Tryit Editor v3.5 from CSS3 Flexible Box
- modal