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

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

新規登録して質問してみよう
ただいま回答率
85.50%
XML

XMLは仕様の1つで、マークアップ言語群を構築するために使われています。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

HTTPS

HTTPS(Hypertext Transfer Protocol Secure)はHypertext Transfer プロトコルとSSL/TLS プロトコルを組み合わせたものです。WebサーバとWebブラウザの間の通信を暗号化させて、通信経路上での盗聴や第三者によるなりすましを防止します。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

2回答

6143閲覧

XMLが読み込まれずエラー(以前は正常に表示)

8yazaki

総合スコア454

XML

XMLは仕様の1つで、マークアップ言語群を構築するために使われています。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

HTTPS

HTTPS(Hypertext Transfer Protocol Secure)はHypertext Transfer プロトコルとSSL/TLS プロトコルを組み合わせたものです。WebサーバとWebブラウザの間の通信を暗号化させて、通信経路上での盗聴や第三者によるなりすましを防止します。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2017/10/09 01:01

静的HTMLにjQueryを使ってXMLを読み込み表示させていましたが、急に表示されなくなりました。
1ヶ月ほど前までは表示されていたのですが・・・原因が不明のためご教授お願いします。
PCからもスマホからも読み込まれない状態です。

この1ヶ月で変化があったこと

  • OSを最新版に更新(MacOSXとiOS)
  • HTTPS化

もしかして、HTTPS化したのがいけなかったのかとも思いましたが、ローカル環境で表示(MacのSafari)させても表示されませんでした。

なお、サーバ側のXMLファイルのパミッションは755です。

実際のサイト:https://www.8yazaki.jp/free-music.html

添付ファイルはエラー内容と、該当箇所ソースのスクリーンショットです。

HTML

1<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 2 <script> 3 $(function(){ 4 $.ajax({ 5 url:'musics.xml', 6 type:'GET', 7 dataType:'xml', 8 timeout:1000, 9 error:function() { 10 alert("ロード失敗"); 11 }, 12 success:function(xml){ 13 $(xml).find("music").each(function() { 14 $("#musics_list").append( 15 '<article><div><img src="' + 16 $(this).find('jacket').text() + '" alt="'+ 17 $(this).find('title').text() + '"><audio src="' + 18 $(this).find('mp3').text() + '" controls="controls"></audio></div><h4>「' + 19 $(this).find('title').text() + '」</h4><p>' + 20 $(this).find('comment').text() + '</p><a href="' + 21 $(this).find('mp3').text() + '" download="' + 22 $(this).find('mp3').text() + '">MP3ダウンロード</a><div id="cat"></div></article>' 23 24 ); 25 }); 26 } 27 }); 28 }); 29 </script>

XML

1<?xml version="1.0" encoding="UTF-8"?> 2<music_list> 3 <music> 4 <title>睡眠誘導曲8mix</title> 5 <comment>癒される音で眠気を促されるかもしれません♪</comment> 6 <mp3>music/20170319_sleepsong_8mix.mp3</mp3> 7 <jacket>img/music/noimage.gif</jacket> 8 <createdate> 9 <year>2017</year> 10 <month>06</month> 11 <day>04</day> 12 </createdate> 13 </music> 14</music_list>

イメージ説明
イメージ説明

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

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

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

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

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

guest

回答2

0

既に解決済みですが補足です。
外部のリソースを参照する際はスキーム(http, httpsなど)を省略することでSSL移行したときに警告が出ずに読み込む事ができます。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

投稿2017/10/09 02:30

退会済みユーザー

退会済みユーザー

総合スコア0

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

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

0

ベストアンサー

HTTPS化されたことにより、HTTPで参照しているjQueryのライブラリが読み込めていないようです。

これは混在コンテンツをブロックする、ブラウザのセキュリティ機構によるものです。

混在コンテンツのブロック | Firefox ヘルプ

対処としては、1行目を下記のように修正されるとよいのではないかと思います。

html

1<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

投稿2017/10/09 01:50

退会済みユーザー

退会済みユーザー

総合スコア0

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

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

8yazaki

2017/10/09 02:15

ありがとうございます! アドバイス頂いた内容をローカル環境だけで表示テストしてましたが、サーバにアップしてからアクセスしたことで無事に表示できました!
退会済みユーザー

退会済みユーザー

2017/10/09 02:22

表示されるようになったようでなによりです。 サイトを拝見したところ、クリエイトコモンズのロゴなど、他にも混在コンテンツとして判定されるものがあるようでしたので、合わせて修正されるとよいかと思います。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問