CMS を使っておらず、ノーマルの HTML だけで作成されたウェブサイト。CMS ではないため、外部ブログサービスを使ってお知らせを更新し、その RSS フィードを取得して、トップページのお知らせ一覧に表示させる措置を行なっているサイトがあります。
RSS による外部サービスの取得は、Google Ajax RSS feed を皮切りに YQL と相次いで便利な RSS 取得サービスが終了となり、もはや HTML ページに PHP をぶっこんで RSS 取得をするしか無い状態に。
PHP が使えるサーバーじゃないと動かせませんが、簡単に HTML ページに、外部ブログ等の RSS フィードを取得してタイトル一覧を表示させる方法をメモします。
PHP を HTML ページに挿入して RSS Feed を取得する手順
挿入する PHP ページをまとめたフォルダ＆ファイルを作成
「feed」フォルダを作成する。
feed フォルダの中に「feed.js」と「feed.php」の2つのファイルを作成する。
document.write('<script type="text/javascript" src="feed/feed.php"></script>');「feed.php を読み込んで表示してくれ」という命令文が記述されている。
<?php
header("Content-type: application/x-javascript");
//RSSフィードのURL
$rss_url = "http://ここにRSSフィードのURL.rdf";
// 表示件数
$num_data = 5;
$out_data = "";
$rss = simplexml_load_file($rss_url);
$array_rss = array();
foreach ($rss->item as $item) {
$dc = $item->children('http://purl.org/dc/elements/1.1/');
$array_rss[] = array('title'=>$item -> title, 'url' => $item -> link, 'date'=> date('Y年m月d日', strtotime($dc->date)));
}
if( count($array_rss) < $num_data ){
$num_data = count($array_rss);
}
for ($i=0; $i<$num_data; $i++){
$title = $array_rss[$i]['title'];
$date = $array_rss[$i]['date'];
$url = $array_rss[$i]['url'];
$tag_date = "<dt>".$date."</dd>";
$tag_title = "<dd><a href=\"".$url."\" target=_blank>".$title."</a></dd>";
$out_data.= $tag_date.$tag_title;
}
echo "document.write('<dl>');";
echo "document.write('$out_data');";
echo "document.write('</dl>');";
?>feed.php には「外部ブログの RSS を取得して、HTML ページの指定場所に dl dd dt レイアウトの日付とタイトル一覧を表示してくれよ」という命令文が記述されている。
任意の RSS フィードの URL に挿し替えて、外部ブログ記事のタイトルが表示される件数を設定する。デフォルトでは5件表示になっている。
さらに15行目の日付部分。デフォルトでは「Y年m月d日」と漢字日付表記になっている。例えば 2019-01-12 のように「-」で表示したい場合は「Y-m-d」と変更する。
HTML ページへの記述
<script src="feed/feed.js"></script>取得した RSS フィードのタイトル一覧を表示させたい場所に、上記のコードを記述する。script タグなのですが、head に設置するわけではない。間違わないようにする。
HTML ファイルへのコード設置例。
例えば、class : box-info が適応された div タグの中に取得した RSS フィードのタイトル一覧を表示させたい場合はこのように設置する。
外部ブログの RSS フィードを取得したタイトル一覧を表示させるようにしたページが、index.html なら、script タグを入れた index.html と RSS 取得用の動作命令が入った feed フォルダを FTP サーバーに突っ込むだけで、RSS 一覧が表示されるようになる。
取得した外部ブログの RSS タイトル一覧が表示される
実際に上の手順で外部ブログの RSS フィードを取得して、タイトル一覧を HTML ページに表示させるとこんな感じです。
この方法でちゃんと表示されることが確認できた外部ブログサービスは「ラインブログ」「Seesaa ブログ」「ライブドアブログ」です。他の無料ブログは確認していませんので何ともいえない。
取得した RSS タイトル一覧のデザインの変更方法
本記事の手順では、class : box-info が適応された div タグの中に取得した RSS フィードのタイトル一覧を表示させています。
挟んである div タグの Class（ここでは box-info）の中の dl dt dd のレイアウトを CSS でデザインすれば自由にデザイン変更することができます。
dl が一覧の枠。dt が日付表示のデザイン。dd がタイトルのデザインです。
以上。