jQueryで別ドメインのXMLを読み込んでみる

2015.02.02

クロスドメインでのXML取得を、phpを使って実装してみます。

同一ドメインの場合

まずは、同一ドメインの場合のXML取得のサンプルです。

HTML

1
<div id="sample"></div>

JavaScript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
$(function() {
    $.ajax({
        url: 'https://cly7796.net/blog/feed/',
        dataType: 'xml',
        success: function(data) {
            // 取得件数
            var getCount = 5;
            if ($('item', data).length < getCount) {
                getCount = data.length;
            };
 
            var insert = '';
            insert += '<h1>';
            // リンク先の挿入
            insert += '<a href="' + $('channel', data).children('link').text() + '">';
            // タイトルの挿入
            insert += $('channel', data).children('title').text();
            insert += '</a>';
            insert += '</h1>';
 
            insert += '<ul>';
            for (var i = 0; i < getCount; i++) {
                var thisItem = $('channel', data).children('item').eq(i);
                insert += '<li>';
 
                // 日時の挿入
                insert += '<p class="pubDate">';
                insert += thisItem.children('pubDate').text();
                insert += '</p>';
 
                // タイトルの挿入
                insert += '<p class="title">';
                insert += thisItem.children('title').text();
                insert += '</p>';
 
                // リンク先の挿入
                insert += '<a href="' + thisItem.children('link').text() + '">詳細はコチラ</a>';
 
                insert += '</li>';
            };
            insert += '</ul>';
 
            $('#sample').append(insert);
        }
    });
});

同一ドメインの場合のデモページ
　

この読み込むXMLを別ドメインのものに変更しても、このままではうまく表示されません。

JavaScript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
$(function() {
    $.ajax({
        url: 'http://feedblog.ameba.jp/rss/ameblo/clown-happy/rss20.xml',
        dataType: 'xml',
        success: function(data) {
            // 取得件数
            var getCount = 5;
            if ($('item', data).length < getCount) {
                getCount = data.length;
            };
 
            var insert = '';
            insert += '<h1>';
            // リンク先の挿入
            insert += '<a href="' + $('channel', data).children('link').text() + '">';
            // タイトルの挿入
            insert += $('channel', data).children('title').text();
            insert += '</a>';
            insert += '</h1>';
 
            insert += '<ul>';
            for (var i = 0; i < getCount; i++) {
                var thisItem = $('channel', data).children('item').eq(i);
                insert += '<li>';
 
                // 日時の挿入
                insert += '<p class="pubDate">';
                insert += thisItem.children('pubDate').text();
                insert += '</p>';
 
                // タイトルの挿入
                insert += '<p class="title">';
                insert += thisItem.children('title').text();
                insert += '</p>';
 
                // リンク先の挿入
                insert += '<a href="' + thisItem.children('link').text() + '">詳細はコチラ</a>';
 
                insert += '</li>';
            };
            insert += '</ul>';
 
            $('#sample').append(insert);
        }
    });
});

別ドメインの場合のデモページ
　

別ドメインの場合

方法はいくつかあるみたいですが、今回はPHPで一回取得してから、それを読み込むようにします。

PHP

1
2
3
4
5
<?php
$url = "http://rssblog.ameba.jp/clown-happy/rss20.xml";
$xml = file_get_contents($url);
header("Content-type: application/xml; charset=UTF-8");
print $xml;

JavaScript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
$(function() {
    $.ajax({
        url: 'get.php',
        dataType: 'xml',
        success: function(data) {
            // 取得件数
            var getCount = 5;
            if ($('item', data).length < getCount) {
                getCount = data.length;
            };
 
            var insert = '';
            insert += '<h1>';
            // リンク先の挿入
            insert += '<a href="' + $('channel', data).children('link').text() + '">';
            // タイトルの挿入
            insert += $('channel', data).children('title').text();
            insert += '</a>';
            insert += '</h1>';
 
            insert += '<ul>';
            for (var i = 0; i < getCount; i++) {
                var thisItem = $('channel', data).children('item').eq(i);
                insert += '<li>';
 
                // 日時の挿入
                insert += '<p class="pubDate">';
                insert += thisItem.children('pubDate').text();
                insert += '</p>';
 
                // タイトルの挿入
                insert += '<p class="title">';
                insert += thisItem.children('title').text();
                insert += '</p>';
 
                // リンク先の挿入
                insert += '<a href="' + thisItem.children('link').text() + '">詳細はコチラ</a>';
 
                insert += '</li>';
            };
            insert += '</ul>';
 
            $('#sample').append(insert);
        }
    });
});

別ドメインの場合のデモページ
　

【参考サイト】

　

関連記事

8件のコメント

  1. ひひ より:
    2018/01/15 14:10

    こちらの記事を参考にブログの表示が出来ました！ありがとうございます。
    ただ、上記記事のように、日付を2017.01.01みたいに表示させたいと思うのですが表示が上手くできません。
    また、ブログの内容を150字程度表示させる事は可能でしょうか？
    表示させたいものは
    日付（2017.01.01みたいな）＋ブログ記事のタイトル＋ブログ記事の内容（159字程度）です。

    返信
  2. つっちー より:
    2017/01/31 18:25

    何度もすみません。
    HTMLでの表示はできました。

    ・記事内の最初の画像の表示
    ・記事内に画像がなかった場合の代わりの画像表示
    ・タイトルにリンクをつける

    以上のようなことはできますでしょうか？

    返信
    • cly7796.net より:
      2017/01/31 23:45

      つっちーさん
      コメントありがとうございます。

      ・記事内の最初の画像の表示
      ・記事内に画像がなかった場合の代わりの画像表示

      →こちらはXMLにサムネイルの項目があれば表示できますが、記事の本文中にある画像を表示する、ということでしたら難しいかもしれません。

      ・タイトルにリンクをつける

      →こちらは以下にサンプルをおいています。
      https://cly7796.net/blog/sample/ajax-get-xml/index5.html
      下記ファイルの31～36行目でタイトルにリンクをつけています。
      https://cly7796.net/blog/sample/ajax-get-xml/sample5.js

      返信
  3. つっちー より:
    2017/01/31 16:39

    HTMLで作成したホームページにこちらを使用することはできるのでしょうか？

    返信
  4. yama より:
    2017/01/28 02:08

    日付を2017.01.01みたいに表示させることは出来るのでしょうか？

    返信

cly7796.net へ返信する コメントをキャンセル

メールアドレスが公開されることはありません。
* が付いている欄は必須項目です

CAPTCHA


コメントが承認されるまで時間がかかります。

Category

Tag

Recent

2025年3月
日 月 火 水 木 金 土
 1
2345678
9101112131415
16171819202122
23242526272829
3031