【JavaScript】RSSのリンクが機能しない

お世話になります。
パソコンスクールでJavaScriptを勉強しています。

サンプルコードを使ってRSSの配信ページから、
更新情報を取得して取得したタイトル(更新情報)にリンクを接続する課題がありました。

とりあえず、以下のところまで出来て
タイトルを表示するところまで出来ました。

ですが、サンプルのURL（https://book.studio947.net/feed/）では、
リンクが機能するのですが、自分で設定したURL（http://natalie.mu/music/feed/news)
では表示されたタイトルからリンク先へジャンプしません。

ここまで出来たのですが、何が理由でリンクが機能しないのかわかりません。

このコードで以下のページから取得した更新情報に
http://natalie.mu/music/feed/news
リンクを貼れるように修正したいです。

詳しい人、説明の上手な人、リンクを接続するためは、
どこを修正すれば良いのか教えて下さい。

お手数ですがよろしくお願いします。
コードは以下の通りです。

詳細)
１）サンプルのURLはGoogle Chromeでないと表示出来ません
※理由は不明です
https://book.studio947.net/feed/

２）JavaScriptのコードはサーバー上にアップしています。
※もしページのURLが必要でしたら貼りつけます。

３）PHPはサンプルコードがあり、サーバーの所定のフォルダーにアップしています。
サンプルが機能しており必要ないと思うので
貼りつけていませんが、もし必要でしたら貼りつけます。

４）サンプルのURLと自分で設定したURLではLinkタグの形が違います。
多分これが原因なのだと思いますが、、、。
サンプル
<link>http://www.solidpanda.com/book</link>

自分で設定したページ
<link rel="alternate" href="https://natalie.mu/music/news/318259"/>

↓　コード
<section>
<h1>最新記事一覧を表示する</h1>
<p>ナタリー・MUSIC「https://natalie.mu/music/feed/news」</p>

<ul id="latest"></ul>
</section>

<!-- net上のjqueryを呼び出している -->
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></s …

<script>
$(document).ready(function(){
var rssURL = "https://natalie.mu/music/feed/news";
$.ajax({
url: 'cdxml.php',
type: 'GET',
dataType: 'xml',
data: {
url: rssURL
}
})
.done(function(data){
$(data).find('entry').each(function(){
var itemTitle = $(this).find('title').text();
var permaLink = $(this).find('link rel').text();

$('#latest').append(
$('<li></li>').append(
$('<a></a>')
.attr('href', permaLink)
.text(itemTitle)
)
)
});
})
.fail(function(){
window.alert('データの読み込みに失敗しました。');
});
});
</script>

質問者からの補足コメント

• 

  解答して頂きありがとうございます
  
  アドバイスして頂いたのですが
  こちらの知識不足で教えて頂いたことの意味が理解できません(笑)。
  
  >リンク表示のために取得したい情報の所在として
  ～、text()ではなくてhref属性なのでは？
  
  この意味はページ上に「表示されていないのではないか？」
  という事でしょうか？
  
  もし、その通りでしたらページの画面は画像の通りですので、
  取得は出来ています。
  
  サンプルの場合は記事をクリックすれば、
  各ページにジャンプするのですが、こちらのページはジャンプしません。
  
  機能しないページのURLを貼りつけることが
  利用規約に違反しないのか微妙なので、
  URLではなく画面の画像を貼りつけました。
  ※そのため捕捉に入力しました
  
  解答して頂きありがとうございます
  質問は開けておきます
  
  もし続きがありましたら、またお願いします
  ※お手数でしたらスルーでもOKです

  
  No.1の回答に寄せられた補足コメントです。 補足日時：2019/02/01 17:49

No.2 ベストアンサー 回答者： fujillin 回答日時： 2019/02/02 01:22

No1です。

記憶による返信になってしまいますが・・・

＞この意味はページ上に「表示されていないのではないか？」
＞という事でしょうか？
違います。
そもそも、ご質問の内容が表示に関するものではないのでしょう？
「リンクのURLが取得できていないはず」ということです。
（取得の際に2重に失敗しているのではという意味です）

目で見て確めたいのであれば、一度、URL（のつもりの内容）を文字列として出力（表示）して確認なさってみればよろしいかと思います。
あるいは、ブラウザの開発ツールを利用すれば、DOMの状態を確認できると思いますので、そちらでも良いでしょう。

Jqueryの場合に、要素が取れていない時（lengthが0のJqueryオブジェクト）の属性値を参照した際に何を返すのか忘れてしまいましたが、undifinedかnullあるいは空白のいすれかになっているのではないかと想像します。

この回答へのお礼

解答して頂きありがとうございます。

昨日、No.1さんの解答と使っているテキストを
何回も読み返してアドバイスの意味が分かりました。

ディベロッパーツールで確認したところ、
おっしゃるとおりURLが取得できていませんでした。

最初のサンプルのコードはLinkタグの中のコンテンツ(テキストコンテンツ)を
取得する方法だったのですが、

「https://natalie.mu/music/feed/news」は
リンクのタグの名前も違うし、取得したいURLがコンテンツとして
記載されているのではないので、
与えられたのサンプルコードの形では取得できていない、、、。
という、アドバイスだったんですね。

>（取得の際に2重に失敗しているのではという意味です）

ということですね。
とりあえず、「Link rel」の方はわかりました。

ですが、今の私の知識ではここから解決する方法がわかりません。

ですが、リンクが機能しない理由と
調べたり勉強しなければならない方向がわかったので、
今はここまでで満足です。

今回は、なんども解答して頂きありがとうございます。
機会がありましたら、またお願いします。


追記
>目で見て確めたいのであれば、一度、URL（のつもりの内容）を文字列として出力（表示）して確認なさってみればよろしいかと思います。

こういう方法もあるんですね。

いろいろありがとうございます。

お礼日時：2019/02/02 07:55

No.1 回答者： fujillin 回答日時： 2019/02/01 16:48

こんにちは

よくわかってませんけれど・・・

リンク表示のために取得したい情報の所在として、
　要素セレクタは、'link rel'ではないのでは？
　実際の内容も、text()ではなくてhref属性なのでは？
といったあたりを、再確認してみると吉かも。

この回答へのお礼

解答して頂きありがとうございます。

No2の方にまとめたとおり、
アドバイスしていただいたことの
意味はわかりました。

何度も説明して頂きありがとうございます。
機会がありましたら、またお願いします。

お礼日時：2019/02/02 07:58