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

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

ただいまの
回答率

90.52%

  • JavaScript

    16401questions

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

  • HTML

    8965questions

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

  • CSS

    5781questions

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

  • XML

    653questions

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

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

受付中

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 274

ann_desu

score 2

 前提・実現したいこと

ホームページ内の新着情報を全ページ毎回手動で書き換えて更新している現状をもっと楽にしたいです。
新着情報を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全てを昔の誰かのブログから引っ張って来てほとんどそのままで試していました。
よろしくお願いいいたします。

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

+2

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/09 05:07

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

    キャンセル

  • 2018/05/10 08:41

    本文に追記しました。

    キャンセル

  • 2018/05/13 10:57 編集

    .

    キャンセル

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

  • ただいまの回答率 90.52%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • JavaScript

    16401questions

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

  • HTML

    8965questions

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

  • CSS

    5781questions

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

  • XML

    653questions

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