質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
PWA(Progressive Web Apps)

PWA(Progressive Web Apps)は、アプリのようなWebサイトを指します。仕様が異なる様々なデバイスで表示でき、インストールも不要。さらに訪問し続けることでユーザーについて学び、強力なPWAとなります。

iPhone 6

iPhone 6は、2014年に発売されたアップル社のスマートフォンです。画面サイズは4.7インチあり、A8コアチップとM8モーションコプロセッサを搭載しています。

Q&A

0回答

1413閲覧

PWA jsQRがiPhoneのホーム画面から起動しない

kumakake

総合スコア42

PWA(Progressive Web Apps)

PWA(Progressive Web Apps)は、アプリのようなWebサイトを指します。仕様が異なる様々なデバイスで表示でき、インストールも不要。さらに訪問し続けることでユーザーについて学び、強力なPWAとなります。

iPhone 6

iPhone 6は、2014年に発売されたアップル社のスマートフォンです。画面サイズは4.7インチあり、A8コアチップとM8モーションコプロセッサを搭載しています。

0グッド

0クリップ

投稿2019/06/10 07:25

jsQRを利用してQRコードリーダーの作成をしています。
githubのサンプルを利用して、manifest.jsonを追加してPWAに挑戦しています。

https://github.com/cozmo/jsQR/tree/master/docs

javascript

1<html> 2<head> 3 <meta charset="utf-8"> 4 <meta name="viewport" content="width=device-width, initial-scale=1"> 5 <meta name="apple-mobile-web-app-status-bar-style" content="black"> 6 <!-- <meta name="apple-mobile-web-app-status-bar-style" content="default"> --> 7 <meta name="apple-mobile-web-app-capable" content="yes"> 8 <meta name="apple-mobile-web-app-title" content="タイトル"> 9 10 <title>jsQR PWA Demo</title> 11 <!-- <script src="./jsQR.js"></script> --> 12 <script src="jsQR.js"></script> 13 <link href="https://fonts.googleapis.com/css?family=Ropa+Sans" rel="stylesheet"> 14 <link rel="manifest" href="manifest.json"> 15 <style> 16 body { 17 font-family: 'Ropa Sans', sans-serif; 18 color: #333; 19 max-width: 640px; 20 margin: 0 auto; 21 position: relative; 22 } 23 24 #githubLink { 25 position: absolute; 26 right: 0; 27 top: 12px; 28 color: #2D99FF; 29 } 30 31 h1 { 32 margin: 10px 0; 33 font-size: 40px; 34 } 35 36 #loadingMessage { 37 text-align: center; 38 padding: 40px; 39 background-color: #eee; 40 } 41 42 #canvas { 43 width: 100%; 44 } 45 46 #output { 47 margin-top: 20px; 48 background: #eee; 49 padding: 10px; 50 padding-bottom: 0; 51 } 52 53 #output div { 54 padding-bottom: 10px; 55 word-wrap: break-word; 56 } 57 58 #noQRFound { 59 text-align: center; 60 } 61 </style> 62</head> 63<body> 64 <h1>jsQR Demo1</h1> 65 <a id="githubLink" href="https://github.com/cozmo/jsQR">View documentation on Github</a> 66 <p>Pure JavaScript QR code decoding library.</p> 67 <div id="loadingMessage">???? Unable to access video stream (please make sure you have a webcam enabled)</div> 68 <canvas id="canvas" hidden></canvas> 69 <div id="output" hidden> 70 <div id="outputMessage">No QR code detected.</div> 71 <div hidden><b>Data:</b> <span id="outputData"></span></div> 72 </div> 73 <script> 74 <!-- service workerの登録関係 --> 75 if ('serviceWorker' in navigator) { 76 navigator.serviceWorker.register('service_worker.js').then(function(registration) { 77 console.log('ServiceWorker registration successful with scope: ', registration.scope); 78 }).catch(function(err) { 79 console.log('ServiceWorker registration failed: ', err); 80 }); 81 } 82 83 var video = document.createElement("video"); 84 var canvasElement = document.getElementById("canvas"); 85 var canvas = canvasElement.getContext("2d"); 86 var loadingMessage = document.getElementById("loadingMessage"); 87 var outputContainer = document.getElementById("output"); 88 var outputMessage = document.getElementById("outputMessage"); 89 var outputData = document.getElementById("outputData"); 90 91 function drawLine(begin, end, color) { 92 canvas.beginPath(); 93 canvas.moveTo(begin.x, begin.y); 94 canvas.lineTo(end.x, end.y); 95 canvas.lineWidth = 4; 96 canvas.strokeStyle = color; 97 canvas.stroke(); 98 } 99 100 // Use facingMode: environment to attemt to get the front camera on phones 101 navigator.mediaDevices.getUserMedia({ video: { facingMode: "environment" } }).then(function(stream) { 102 video.srcObject = stream; 103 video.setAttribute("playsinline", true); // required to tell iOS safari we don't want fullscreen 104 video.play(); 105 requestAnimationFrame(tick); 106 }); 107 108 function tick() { 109 loadingMessage.innerText = "⌛ Loading video..." 110 if (video.readyState === video.HAVE_ENOUGH_DATA) { 111 loadingMessage.hidden = true; 112 canvasElement.hidden = false; 113 outputContainer.hidden = false; 114 115 canvasElement.height = video.videoHeight; 116 canvasElement.width = video.videoWidth; 117 canvas.drawImage(video, 0, 0, canvasElement.width, canvasElement.height); 118 var imageData = canvas.getImageData(0, 0, canvasElement.width, canvasElement.height); 119 var code = jsQR(imageData.data, imageData.width, imageData.height, { 120 inversionAttempts: "dontInvert", 121 }); 122 if (code) { 123 drawLine(code.location.topLeftCorner, code.location.topRightCorner, "#FF3B58"); 124 drawLine(code.location.topRightCorner, code.location.bottomRightCorner, "#FF3B58"); 125 drawLine(code.location.bottomRightCorner, code.location.bottomLeftCorner, "#FF3B58"); 126 drawLine(code.location.bottomLeftCorner, code.location.topLeftCorner, "#FF3B58"); 127 outputMessage.hidden = true; 128 outputData.parentElement.hidden = false; 129 outputData.innerText = code.data; 130 } else { 131 outputMessage.hidden = false; 132 outputData.parentElement.hidden = true; 133 } 134 } 135 requestAnimationFrame(tick); 136 } 137 </script> 138</body> 139</html>

manifest.json

json

1{ 2 "short_name": "PWA-QR", 3 "name": "PWA sample qr app", 4 "display": "standalone", 5 "start_url": "index0.html", 6 "dir": "ltr", 7 "lang": "ja-jp", 8 "icons": [ 9 { 10 "src": "images/app-icon-192x192.png", 11 "sizes": "192x192", 12 "type": "image/jpg" 13 } 14 ] 15}

Androidはホーム画面のアイコンから起動してQRコードを読み取れるのですが、
iPhoneはカメラへのアクセス確認のダイアログが表示されません。
※ブラウザでは、iPhoneも動作します。

iPhoneでアイコンから起動させるためにはどうすればよいかご教授ください。
よろしくお願いします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問