jquery.qrcode.min.jsのファイルを読み取ることができない状態にあります。

今現在QRコードを読み取りし、簡易出席管理システムを作ろうとしています。しかし、viewのheadに<script type="text/javascript" src="jquery.qrcode.min.js">を載せているのですが、上のダウンロードしたファイルを読み取ることができない状態が続いています。もしわかる方がいらしたら、教えていただきたいです。どうぞよろしくお願いします。

配置場所

view
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4	<meta charset="UTF-8">
5	<title>1903-qrcode</title>
6</head>
7<body>
8	<!-- 描画スペースの用意 -->
9	<div id="hoge"></div>
10
11	<!-- js読み込み -->
12	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
13	<script type="text/javascript" src="https://localhost:3000/javascripts/jquery.qrcode.min.js"></script>
14
15	<!-- スクリプトを記述 -->
16	<script>
17		$(function(){
18	    //現在表示しているページのURLをQRコード化する
19	    $('#hoge').qrcode({
20		  text: location.href,
21		  width: 600, //横幅
22		  height: 600, //縦幅
23		  render: 'canvas', //tableまたはcanvas
24	      }); 
25        });
26	</script>
27</body>
28</html>

参考にしたサイト
https://github.com/jeromeetienne/jquery-qrcode
https://webty.jp/staffblog/production/post-377/

行動規範の内容に同意します

回答2件

http://localhost:3000/assets/jquery.qrcode.min.jsのURLで入力したら、qrコードの表示が可能になりました。

投稿2020/03/06 04:24

avicii

総合スコア49

ベストアンサー

<script type="text/javascript" src="assets/javascripts/jquery.qrcode.min.js">

絶対パス、相対パスについて学習されてください。
これだけは覚えておきたい！絶対パスと相対パスの違いとは【初心者向け】

投稿2020/03/06 04:13

編集2020/03/06 04:14

Takumiboo

総合スコア2536

Takumiboo

2020/03/06 04:15

スクリーンショットを改めて見ると、https://としてSSLエラーが出ているようですが、Webサーバがhttpsにて動いていないのであれば、https://と指定すると当然エラーになります。

avicii

2020/03/06 04:22

"http://localhost:3000/assets/jquery.qrcode.min.js"のURLで可能になりました！！ありがとうございました！！

Takumiboo

2020/03/06 04:24

というか、あえてフルパスで書く必要はないと思います。例えばいまここで作ったものをWebにアップしたら動かなくなりますが、"assets/javascripts/jquery.qrcode.min.js"で指定しておけば動きます。

avicii

2020/03/06 04:27

"assets/javascripts/jquery.qrcode.min.js"で入力したんですが、GET http://localhost:3000/assets/javascripts/jquery.qrcode.min.js net::ERR_ABORTED 404 (Not Found)↑このようなエラーが発生しました。どこかおかしい部分があるのでしょうか？

Takumiboo

2020/03/06 04:27

更にいうと絶対パスの場合でも最初のプロトコルを省略して"//localhost:3000/assets/~~~"という書き方もできます。というかなぜ自己解決…(ベストアンサーにしろというわけではありませんが…)

Takumiboo

2020/03/06 04:29

"http://localhost:3000/assets/jquery.qrcode.min.js" で成功したのであれば、そもそもjavascriptsフォルダに入っていないじゃないですか… jsファイルを正しい位置に移すか、"assets/jquery.qrcode.min.js"にすれば問題ないはずです。スクリーンショットと実際に動かしている環境が違うようでは正しい回答はできません。

avicii

2020/03/06 04:40 編集

大変申し訳ございませんでした。"assets/jquery.qrcode.min.js"で解決することができました。

行動規範の内容に同意します

あなたの回答