ホームページの新着情報部分だけをxmlで書いて読み込みたい

前提・実現したいこと

ホームページ内の新着情報を全ページ毎回手動で書き換えて更新している現状をもっと楽にしたいです。
新着情報をxmlで別で書いて、そのリンクをhtmlページで表示させたいです。

当方、html・cssの知識だけだったので、個人で調べて
jsとxmlで表示を試みましたが、上手くいきません。

発生している問題・エラーメッセージ

表示させたい部分：
http://sukinahitowohurimukaseru.com
トップページの
「全部」と「新着」欄などのリンク
↓
好きな人ができたら読んでほしいNEW
好きな人に嫌われてるサイン１０NEW
本当に好きな人？見分ける３つの質問
好きな人を振り向かせるためにまず初めにNEW
失恋で泣けると話題の[アテンション]失恋
同性愛の苦しみを歌った[シークレットラブソング]同性

必見！絶対に返ってくるライン術
豊崎愛生さん一般男性と結婚を発表！NEW
諦められない恋をした時に頑張る３つのこと
好きな人に恋人がいる時にすべき３つのこと

該当のソースコード

「xmlデータ」

<?xml version="1.0" encoding="UTF-8"?>
<new>
<contents>
<id>1</id>
<title><link uri="sukinahitowohurimukaseru.com/sorry/sukinahitoni-koibito" target="_blank">好きな人に恋人がいる時にすべき３つのこと</link></title>
<text>#</text>
</contents>
<contents>
<id>2</id>
<title>#</title>
<text>#</text>
</contents>
<contents>
<id>3</id>
<title>#</title>
<text>#</text>
</contents>
<contents>
<id>4</id>
<title>#</title>
<text>#</text>
</contents>
</new>

「jsデータ」


$(function(){
    $.ajax({
          url : 'test.xml'
        , type : 'get'
        , dataType : 'xml'
        , cache : false
        , success : function(data) {
            var count = 0 ;
            $(data).find("new").find("contents").each(function(){
                $("#new1").append("<tr id=\"data_id" + count + "\" class=\"ins_data\"></tr>") ;
                $("#new1 #data_id" + count).html(
                          "<td>" + $(this).find("title").text() + "</td>"
                        + "<td>" + $(this).find("text").text() + "</td>"
                ) ;
                count++ ;
            }) ;
        }
        , error : function() {
            alert("none") ;
        }
    });
})

「htmlデータ」

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="content-language" content="ja">
        <script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
        <link rel="stylesheet" href="css/style.css">
        <script src="test.js"></script>
        <title>test</title>
</head>
<body>
<table>
	  <thead>
                <tr>
                    <th>#</th>
                    <th>#</th>
                </tr>
            </thead>
<tbody id="new1"></tbody>
</table>
</body>
</html>


### 試したこと

「htmlデータ」で「xmlデータ」を読み込むのは成功。だがcssが反応しない
「xmlデータ」内で別ページに飛ばすリンクを貼ろうとしたがリンクが反応せずにただの文字になってしまう。（cssを適用するにはxmlに反応させるのでしょうか？）
「jsデータ」はどこをいじっていいのかわからずテンプレートほとんどそのまま

### 補足情報

wordprress等は使いたくないので、自力でやろうとしてます・・・。
html,xml.js全てを昔の誰かのブログから引っ張って来てほとんどそのままで試していました。
よろしくお願いいいたします。

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

回答1件

XMLの次の行を変更して

前: <title><link uri="url" target="_blank">好きな人に恋人がいる時にすべき３つのこと</link></title>
後: <title><a href="url" target="_blank">好きな人に恋人がいる時にすべき３つのこと</a></title>

かつ js の次の部分を変更したら、期待通りになるかと思います。

前: $(this).find("title").text()
後: $(this).find("title").html()

text()は子孫要素のテキストノードを結合したものとなるので、XMLタグが消えるみたいですね。

更新情報を配信するためのXMLの仕様としてはRSSやatomといったメジャーなものがあるので、そのフォーマットをそのまま使ったほうが良いかもです。
これなら仕様が熟慮されており、かつ読者のRSSリーダーからも読めて一石二鳥かと思います。
参考: Qiita: RSS、atomの仕様をまとめる

jquery 使わず直接埋め込む方法

atom.xmlのリンクをhtml内でトップページのサイドバー等に新着情報一覧として埋め込み表示は出来ないのでしょうか？

atom.xml を XSLT で変換して HTML で表示したものを iframe で埋め込むっていう方法ができます。
僕も XSLT やったことなかったのでやってみました。
次のスクリーンショットの水色の部分が iframe になります。

デモURL: https://set0gut1.github.io/atom-xslt-example/
ソースコード: https://github.com/set0gut1/atom-xslt-example

投稿2018/05/08 15:55

編集2018/05/09 23:40

set0gut1

総合スコア2413

ann_desu

2018/05/08 20:07

ありがとうございます！ rssやatomの存在を知らなかったので、調べてみたのですが、atom.xmlのリンクをhtml内でトップページのサイドバー等に新着情報一覧として埋め込み表示は出来ないのでしょうか？知らないとことばかりですが、よろしくお願いいたします・・・。

set0gut1

2018/05/09 23:41

本文に追記しました。

ann_desu

2018/05/13 02:24 編集

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

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

まだベストアンサーが選ばれていません

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

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

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

ただいまの回答率
85.29%

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

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

質問する

前提・実現したいこと

発生している問題・エラーメッセージ

該当のソースコード

関連した質問