\r\n \r\n \r\n test\r\n\r\n\r\n\r\n\t \r\n \r\n \r\n \r\n \r\n \r\n\r\n
##
\r\n\r\n\r\n\r\n```\r\n\r\n```\r\n\r\n### 試したこと\r\n\r\n「htmlデータ」で「xmlデータ」を読み込むのは成功。だがcssが反応しない\r\n「xmlデータ」内で別ページに飛ばすリンクを貼ろうとしたがリンクが反応せずにただの文字になってしまう。(cssを適用するにはxmlに反応させるのでしょうか?)\r\n「jsデータ」はどこをいじっていいのかわからずテンプレートほとんどそのまま\r\n\r\n### 補足情報\r\n\r\nwordprress等は使いたくないので、自力でやろうとしてます・・・。\r\nhtml,xml.js全てを昔の誰かのブログから引っ張って来てほとんどそのままで試していました。\r\nよろしくお願いいいたします。","answerCount":1,"upvoteCount":1,"datePublished":"2018-05-08T14:58:57.184Z","dateModified":"2022-01-12T10:55:45.698Z","suggestedAnswer":[{"@type":"Answer","text":"XMLの次の行を変更して\r\n\r\n```\r\n前: <link uri=\"url\" target=\"_blank\">好きな人に恋人がいる時にすべき3つのこと</link>\r\n後: <a href=\"url\" target=\"_blank\">好きな人に恋人がいる時にすべき3つのこと</a>\r\n```\r\n\r\nかつ js の次の部分を変更したら、期待通りになるかと思います。\r\n\r\n```\r\n前: $(this).find(\"title\").text()\r\n後: $(this).find(\"title\").html()\r\n```\r\n\r\ntext()は子孫要素のテキストノードを結合したものとなるので、XMLタグが消えるみたいですね。\r\n\r\n-------\r\n\r\n更新情報を配信するためのXMLの仕様としてはRSSやatomといったメジャーなものがあるので、そのフォーマットをそのまま使ったほうが良いかもです。\r\nこれなら仕様が熟慮されており、かつ読者のRSSリーダーからも読めて一石二鳥かと思います。\r\n参考: [Qiita: RSS、atomの仕様をまとめる](https://qiita.com/you8/items/e903fd463cf770688e1e)\r\n\r\n------------\r\n\r\njquery 使わず直接埋め込む方法\r\n\r\n> atom.xmlのリンクをhtml内でトップページのサイドバー等に新着情報一覧として埋め込み表示は出来ないのでしょうか?\r\n\r\natom.xml を XSLT で変換して HTML で表示したものを iframe で埋め込むっていう方法ができます。\r\n僕も XSLT やったことなかったのでやってみました。\r\n次のスクリーンショットの水色の部分が iframe になります。\r\n\r\n![イメージ説明](46b29cf5ca7b9cea52dfcb55937b71af.png)\r\n\r\nデモURL: [https://set0gut1.github.io/atom-xslt-example/](https://set0gut1.github.io/atom-xslt-example/)\r\nソースコード: [https://github.com/set0gut1/atom-xslt-example](https://github.com/set0gut1/atom-xslt-example)","dateModified":"2018-05-09T23:40:18.694Z","datePublished":"2018-05-08T15:55:36.187Z","upvoteCount":2,"url":"https://teratail.com/questions/125287#reply-190937","comment":[{"@type":"Comment","text":"ありがとうございます!\r\nrssやatomの存在を知らなかったので、調べてみたのですが、atom.xmlのリンクをhtml内でトップページのサイドバー等に新着情報一覧として埋め込み表示は出来ないのでしょうか?\r\n知らないとことばかりですが、よろしくお願いいたします・・・。","datePublished":"2018-05-08T20:07:43.699Z","dateModified":"2018-05-08T20:07:43.699Z"},{"@type":"Comment","text":"本文に追記しました。","datePublished":"2018-05-09T23:41:03.135Z","dateModified":"2018-05-09T23:41:03.135Z"},{"@type":"Comment","text":".","datePublished":"2018-05-13T01:57:11.903Z","dateModified":"2018-05-13T02:24:30.778Z"}]}],"breadcrumb":{"@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"トップ","url":"https://teratail.com"},{"@type":"ListItem","position":2,"name":"XMLに関する質問","url":"https://teratail.com/tags/XML"},{"@type":"ListItem","position":3,"name":"XML","url":"https://teratail.com/tags/XML"}]}}}
質問するログイン新規登録
XML

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

JavaScript

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

1回答

3237閲覧

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

ann_desu

総合スコア8

XML

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

JavaScript

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

1グッド

0クリップ

投稿2018/05/08 14:58

1

0

前提・実現したいこと

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

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

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

表示させたい部分: http://sukinahitowohurimukaseru.com トップページの 「全部」と「新着」欄などのリンク ↓ 好きな人ができたら読んでほしいNEW 好きな人に嫌われてるサイン10NEW 本当に好きな人?見分ける3つの質問 好きな人を振り向かせるためにまず初めにNEW 失恋で泣けると話題の[アテンション]失恋 同性愛の苦しみを歌った[シークレットラブソング]同性 必見!絶対に返ってくるライン術 豊崎愛生さん一般男性と結婚を発表!NEW 諦められない恋をした時に頑張る3つのこと 好きな人に恋人がいる時にすべき3つのこと

該当のソースコード

「xmlデータ」

<?xml version="1.0" encoding="UTF-8"?> <new> <contents> <id>1</id> <title><link uri="sukinahitowohurimukaseru.com/sorry/sukinahitoni-koibito" target="_blank">好きな人に恋人がいる時にすべき3つのこと</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全てを昔の誰かのブログから引っ張って来てほとんどそのままで試していました。 よろしくお願いいいたします。
set0gut1👍を押しています

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

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

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

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

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

guest

回答1

0

XMLの次の行を変更して

前: <title><link uri="url" target="_blank">好きな人に恋人がいる時にすべき3つのこと</link></title> 後: <title><a href="url" target="_blank">好きな人に恋人がいる時にすべき3つのこと</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 編集

.
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

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

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

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

ただいまの回答率
85.29%

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

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

質問する

関連した質問