Q&A
前提・実現したいこと
ホームページ内の新着情報を全ページ毎回手動で書き換えて更新している現状をもっと楽にしたいです。
新着情報を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件
0
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
総合スコア2413
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/05/08 20:07
2018/05/09 23:41
2018/05/13 02:24 編集