ブログ on qwerty.work

【PHP】複数のRSSを結合して最新日付順にリストで表示する

Fri, 05 May 2023 00:00:00 +0000

ブログを複数のCMSに分けたので、RSSが複数になりました。それぞれのRSSを結合する方法は以下の通り。これで複数のRSSの中身を日付順に入れ替えて、記事リストを表示することができます。

PHPソース

<?php
 // 2つのRSSフィードのURL
 $url1 = 'http://example.com/rss1.xml';
 $url2 = 'http://example.com/rss2.xml';

 // 2つのRSSフィードを取得してSimpleXMLElementオブジェクトに変換
 $xml1 = simplexml_load_file($url1);
 $xml2 = simplexml_load_file($url2);

 // 2つのRSSフィードを結合して、日付で降順にソート
 $items = array_merge($xml1->channel->item, $xml2->channel->item);
 usort($items, function($a, $b) {
   return strtotime($b->pubDate) - strtotime($a->pubDate);
 });

 // リスト形式で記事のタイトルとURLを表示
 echo '<ul>';
 foreach ($items as $item) {
   $title = $item->title;
   $url = $item->link;
   $date = date('Y年m月d日', strtotime($item->pubDate));
   echo '<li>' . $date . ' <a href="' . $url . '">' . $title . '</a></li>';
 }
 echo '</ul>';
 ?>

説明

上記のコードでは、simplexml_load_file関数を使用してRSSフィードをSimpleXMLElementオブジェクトに変換し、array_merge関数を使用して2つのRSSフィードを結合しています。その後、usort関数を使用して記事を日付で降順にソートします。

最後に、foreachループを使用して、記事のタイトル、URL、および日付をリスト形式で表示しています。ここで、date関数を使用して日付を表示しています。

これで2つのブログの最新記事が日付順に表示されるはずです。

表示されない場合

item要素がchannelの直下に無いなど、ウェブサイトによってRSSフィードの構造が異なる場合があります。その場合、以下2つのコードのどちらかを追加すると解決できるはずです。

xpathでitemを取得する場合

item要素がchannelの直下にない場合は、以下のようにxpath関数を使用して、item要素を取得することができます。

$items1 = $xml1->xpath('//item');
$items2 = $xml2->xpath('//item');
$items = array_merge($items1, $items2);

当ブログはこちらを追加して解決できました。

https://qwerty.work https://qwerty.work

children()で取得する場合

item要素がchannelの直下にある場合は、item要素が含まれている配列を取得するために、$xml1->channel->itemという形式ではなく、$xml1->channel->children()という形式を使用することもできます。

$items1 = $xml1->channel->children();
$items2 = $xml2->channel->children();
$items = array_merge($items1->item, $items2->item);

Googleアナリティクスとの連携でアクセスランキングが作れる『Ranklet』

Mon, 13 Dec 2021 22:11:12 +0900

ブログにアクセスランキングを設置

どんなブログでもGoogleアナリティクスのアクセス数を利用して、アクセスランキングを埋め込める『Ranklet』というサービスを見つけました。現時点でMovableTypeを使用しているこのブログに埋め込みたいと思います。

https://ranklet.com/ https://ranklet.com/

使い方はとても簡単です。

Googleアカウントでログオン
ランキングに使用するGoogleアナリティクスのプロファイルを選択
表示されたコードをコピペ

これだけで簡単にブログに埋め込むことができます。

HTML、CSS、Javascriptを編集する画面があるので、カスタマイズの自由度はとても高いです。ランキングの集計期も直近の期間から長期までいろいろ選べます。

デフォルトのソース

デフォルトで表示されるHTMLソースは、なぜか****が使用されています。

html

<div class="ranklet ranklet-reset">
    <table class="ranklet-table">
        <tbody class="ranklet-pages">
            {{#context.pages}}
            <tr class="ranklet-page">
                <td class="ranklet-rank">
                    {{rank}}
                </td>
                <td class="ranklet-image">
                    {{#image}}
                    <a href="{{url}}" class="ranklet-link">
                        <img class="ranklet-img" src="{{image}}" />
                    </a>
                    {{/image}}
                </td>
                <td class="ranklet-meta">
                    <div class="ranklet-title">
                        <a href="{{url}}" class="ranklet-link">
                            {{title}}
                        </a>
                    </div>
                    {{#description}}
                    <div class="ranklet-description">
                        <a href="{{url}}" class="ranklet-link">
                            {{description}}
                        </a>
                    </div>
                    {{/description}}
                </td>
            </tr>
            {{/context.pages}}
        </tbody>
    </table>
</div>

CSS

#ranklet-{{context.id}} {
    .ranklet-reset { // リセット
        table, tr, td, div, span {
            margin: 0;
            padding: 0;
            border: 0;
            font-size: 100%;
            font: inherit;
            vertical-align: baseline;
            line-height: 1;
            box-sizing: border-box;
        }
    }

    .ranklet-table {
        border-collapse: separate;
        border-spacing: 8px 24px;
        width: 100%;

        td {
            vertical-align: middle;
        }

        .ranklet-rank {
            text-align: center;
            font-size: 120%;
        }

        .ranklet-image {
            text-align: center;
            img {
                max-width: 64px;
                max-height: 64px;
            }
        }

        .ranklet-meta {
            .ranklet-title {
                font-size: 120%;
                line-height: 125%;
            }

            .ranklet-description {
                margin-top: 8px;
                line-height: 125%;
            }
        }
    }

}

MovableType用に書き換えたテンプレート

デフォルトので組まれているソース嫌なのと、デフォルトのまま使用するとデザインがおかしくなるので、以下のようにリスト形式にカスタマイズしました。デフォルトのソースにあるページの概要は不要なので{{description}}を省きました。

HTML

<aside >
<section id="side-recentpost" class="side-entrylist">
<nav>
<h2 class="widget-header"><i class="far fa-file-alt" aria-hidden="true"></i>週間アクセスランキング</h2>
<div class="widget-content">
	<ol class="entryList ranklet-list">
		{{#context.pages}}
        <li class="ranklet-list-item">
				  <span class="ranklet-image">
					  {{#image}}
						  <a href="{{url}}" class="ranklet-link"><img class="ranklet-img" src="{{image}}" loading="lazy" /></a>
					  {{/image}}
				  </span>
				  <span class="ranklet-title">
              <a href="{{url}}" class="ranklet-link">{{title}}</a>
          </span>
        </li>
		{{/context.pages}}
  </oll>
</div>
</nav>
</section>
</aside>

CSS

ol.ranklet-list {
list-style-position: inside;
}
.ranklet-image, .ranklet-title {
display: table-cell;
}
span.ranklet-image {
width: 25%;
}
img.ranklet-img {
width: 100%;
}

他にもMovableTypeのCSSに合わせスタイルをいじっていますが、最終的に見た目は以下の通りになりました。

参考サイト

https://mbdb.jp/web-technical/html/ranklet-template.html https://mbdb.jp/web-technical/html/ranklet-template.html

[Yahoo!検索アルゴリズム Update　-2008/09/25-」だそうです。

Sat, 27 Sep 2008 12:10:29 +0900

最近は仕事でSEO対策をしていますが、

ヤフー検索でホームページ来る方が多く、

こういった話題には敏感になります。

Yahoo!検索スタッフブログ

http://searchblog.yahoo.co.jp/2008/09/yahoo_algorithm_update.html

会社のホームページは以前より検索結果の上位に反映されていました。

が、以前は上位だったものが表示されなくなりました。