手打ちサイトでRSS対応の更新履歴作った

はじめに

ほかの個人サイト運営してある方々の更新をてがろぐの RSS で把握しているので自サイトの更新履歴にも対応できないかな～と思った。 ChatGPTとClaudeにめちゃくちゃ頼った。

RSS の土台を用意して rss.xml で保存

<?xml version="1.0" encoding="utf-8"?>
<rss version="2.0">
  <channel>
    <title>サイト名</title>
    <link>サイトアドレス</link>
    <description>サイト名：更新情報</description>
    <language>ja</language>
    <item>
      <title>更新内容</title>
      <pubDate>Wed, 20 Nov 2024 21:25:04 +0900</pubDate>
      <enclosure url="自サイトのOGP画像" type="image/png"/>
      <link>サイトアドレス</link>
    </item>
    <item>
      <title>更新内容</title>
      <pubDate>Wed, 19 Nov 2024 21:25:04 +0900</pubDate>
      <enclosure url="自サイトのOGP画像" type="image/png"/>
      <link>サイトアドレス</link>
    </item>
    <item>
      <title>更新内容</title>
      <pubDate>Wed, 18 Nov 2024 21:25:04 +0900</pubDate>
      <enclosure url="自サイトのOGP画像" type="image/png"/>
      <link>サイトアドレス</link>
    </item>
  </channel>
</rss>

AI に質問する

index ページに RSS を埋め込みたかったので方法をググった。 php と jQuery を使う方法があるらしい。 jQuery を丁度使ってたので jQuery の方を採用。質問した内容は以下のような感じ。

同じ階層にある `rss.xml` の最新 3 件を `index.html` に jQuery を使って表示したいです。

現在、更新履歴の HTML は以下の形式です：
<section class="white-1">
 <h2 class="news">Update</h2>
  <dl class="news">
    <dt>2024.11.18</dt>
    <dd>更新内容</dd>
  </dl>
    <dl class="news">
    <dt>2024.09.11</dt>
    <dd>更新内容</dd>
  </dl>
    <dl class="news">
    <dt>2024.08.13</dt>
    <dd>更新内容</dd>
  </dl>
</section>


`rss.xml` の内容は以下です：
<?xml version="1.0" encoding="utf-8"?>
<rss version="2.0">
  <channel>
    <title>サイト名</title>
    <link>サイトアドレス</link>
    <description>サイト名：更新情報</description>
    <language>ja</language>
    <item>
      <title>更新内容</title>
      <pubDate>Wed, 20 Nov 2024 21:25:04 +0900</pubDate>
      <enclosure url="自サイトのOGP画像" type="image/png"/>
      <link>サイトアドレス</link>
    </item>
    <item>
      <title>更新内容</title>
      <pubDate>Wed, 19 Nov 2024 21:25:04 +0900</pubDate>
      <enclosure url="自サイトのOGP画像" type="image/png"/>
      <link>サイトアドレス</link>
    </item>
    <item>
      <title>更新内容</title>
      <pubDate>Wed, 18 Nov 2024 21:25:04 +0900</pubDate>
      <enclosure url="自サイトのOGP画像" type="image/png"/>
      <link>サイトアドレス</link>
    </item>
  </channel>
</rss>


jQuery を使った実装例を教えていただけますか？

※HTML はうちのサイトで使ってるやつ。自作かテンプレートかで全然違うので注意。

AI が出力したコードを rss.js で保存。

index.html の前に jQuery と rss.js を設置する

<script src="<https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js>"></script>
<script src="assets/js/rss.js"></script>
</body>

うちはdo様作成プログラムのいいねボタン改とコイブミをすでに設置していたので、設置マニュアルに載ってた jQuery の CDN を読み込んだ。 rss.js はパスに注意。うちは assets フォルダに js フォルダ作ってたのでこんなパスになった。

CSS の高さを AI に計算してもらう

読み込み中は内容が表示されずレイアウト崩れが起きるので、更新履歴セクションの高さを AI に計算してもらう。

## 質問内容

安価なサーバーを使用しており、RSS フィードの読み込みに時間がかかります。
そのため、HTML の読み込み前後で`<section>`の高さが不安定になります。
以下のコードを元に、CSS で適切な高さを設定したいです。
読み込み後の`<section>`の高さを計算して具体的な rem 単位を教えてください。

読み込み前の HTML：
エディタに書いてる更新履歴のコードを載せる

読み込み後の HTML：
自分のサイトの更新履歴の部分ソースコードを見てそれをコピペ

css：
大元の body と、更新履歴で使ってる CSS をコピペ

AI が計算した数値を CSS に追加した。これでサイトデザインが崩れなくなった。

動作確認

サイトに test フォルダ作って、画像以外のサイト構成ファイルアップロード。アドレス末尾に /test/index.html 記入してテストサイトを確認する。表示がおかしかったりエラーが出たりしたら AI に聞いて適宜修正してもらう。

動作したら完成。更新するたびに rss.xml の<item>~</item>を足していけば自動で表示が変わっていく。更新履歴を書いたついでに RSS 発信もできる。一石二鳥だ。

【発展編】コードを楽に作成するプログラムを作った

毎回日時確認するの大変なので、そこを自動化できるプログラムが欲しくなったので AI に作成してもらった。

仕組み：rss.xml 同じフォルダに更新内容を入力した update.txt を作って、一行の更新内容を書き、その内容を rss.xml 内に <item> として新規追加、ついでに日時も入力してもらう（このへんのアイデアはじぇねろぐに影響を受けている）

Python が必要なので、コマンドプロンプトが怖くて使えないとか、Python をインストールしたくない人は回れ右。インストール方法はググれ。ちなみに私は Python のことを何も理解していない。どんなソフトなのかとかも分かってない。AI に言われたからやった。AI の奴隷だ。

AI に色々質問して出来た py ファイルはこちら。rss.py で保存する。

import xml.etree.ElementTree as ET
from datetime import datetime
import xml.dom.minidom
import re

def prettify_xml(xml_string):
    """XMLを整形して返す"""
    # minidomを使用して整形
    dom = xml.dom.minidom.parseString(xml_string)
    pretty_xml = dom.toprettyxml(indent='  ', encoding='utf-8').decode('utf-8')
    
    # 空行を削除
    lines = pretty_xml.split('\n')
    # 空白行や空白文字のみの行を除去
    cleaned_lines = [line for line in lines if line.strip()]
    # 最初の行（XML宣言）を除去（後で追加するため）
    cleaned_lines = cleaned_lines[1:]
    
    # 行を結合して返す
    return '\n'.join(cleaned_lines)

def insert_updates_to_rss(rss_file_path, update_file_path):
    try:
        # 既存のXMLファイルを文字列として読み込む
        with open(rss_file_path, 'r', encoding='utf-8') as f:
            xml_content = f.read()
        
        # XMLパーサーを作成
        parser = ET.XMLParser(encoding='utf-8')
        tree = ET.fromstring(xml_content, parser=parser)
        
        # channelタグを見つける
        channel = tree.find('channel')
        if channel is None:
            raise ValueError("Channel element not found in RSS")
        
        # update.txtから更新情報を読み込む
        with open(update_file_path, 'r', encoding='utf-8') as f:
            updates = f.readlines()
        
        # 現在時刻をRFC822フォーマットで取得
        current_time = datetime.now().strftime('%a, %d %b %Y %H:%M:%S +0900')
        
        # channelの既存の要素を取得
        existing_items = channel.findall('item')
        
        # 既存のitem要素を一時的に削除
        for item in existing_items:
            channel.remove(item)
        
        # 新しいitem要素を追加
        for update in updates:
            update = update.strip()
            if update:
                item = ET.SubElement(channel, 'item')
                
                title = ET.SubElement(item, 'title')
                title.text = update
                
                pubdate = ET.SubElement(item, 'pubDate')
                pubdate.text = current_time
                
                enclosure = ET.SubElement(item, 'enclosure')
                enclosure.set('url', 'https://mikamibox.com/img/OGP.png')
                enclosure.set('length', '0')
                enclosure.set('type', 'image/png')
                
                link = ET.SubElement(item, 'link')
                link.text = 'https://mikamibox.com/'
        
        # 既存のitem要素を元の位置に戻す
        for item in existing_items:
            channel.append(item)
        
        # XMLツリーを文字列に変換して整形
        rough_string = ET.tostring(tree, encoding='utf-8')
        pretty_xml = prettify_xml(rough_string)
        
        # 整形済みXMLを保存
        with open(rss_file_path, 'w', encoding='utf-8') as f:
            f.write('<?xml version="1.0" encoding="utf-8"?>\n')
            f.write(pretty_xml)
            
        print("RSS file has been successfully updated!")
        
    except Exception as e:
        print(f"Error occurred: {e}")

# プログラムの実行
if __name__ == '__main__':
    rss_file_path = 'rss.xml'
    update_file_path = 'update.txt'
    insert_updates_to_rss(rss_file_path, update_file_path)

このコードができるようなプロンプトを逆算してもらった。この内容を自分の要望に合わせてカスタマイズして質問してみるといいのかもしれない。（試してない）

RSSフィードを更新するPythonスクリプトを作成してください。以下の要件を満たすものが必要です：

1. 既存のRSS XMLファイルを読み込み、新しい更新情報をチャンネルの最上部に追加する
2. 更新情報は別のテキストファイル（update.txt）から読み込む
3. 各更新項目に対して以下の要素を含める：
   - タイトル（更新テキストそのもの）
   - 公開日時（現在時刻、RFC822フォーマット）
   - エンクロージャー（OGP画像のURL）
   - リンク（ウェブサイトURL）
4. XMLの整形機能を含める（インデント付きの読みやすいフォーマット）
5. 既存の項目は保持したまま、新しい項目を追加する
6. エラーハンドリングを実装する

コードは完全に機能する形で、必要なすべてのインポートと関数を含めて提供してください。また、XMLの整形のための補助関数も含めてください。

プログラムを動かすバッチファイルを作成する（Win のみ）

新しいテキストファイルを作って、以下の内容をコピペして rss.bat という名前を付けて保存。

@echo off
python rss.py
pause

これからは update.txt に更新内容を書いて、rss.bat をダブルクリックし、コマンドプロンプトを閉じ、rss.xml を確認して FTP ソフトでアップロードするだけで index.html をいじらずとも、更新履歴と RSS が自動で作成されるぞ！やったー！

…意外と面倒くさいな。面倒くさいとか言ってたら静的サイトベタ打ちしません。そりゃそうじゃ。

はじめに#

RSS の土台を用意して rss.xml で保存#

AI に質問する#

index.html の前に jQuery と rss.js を設置する#

CSS の高さを AI に計算してもらう#

動作確認#

【発展編】コードを楽に作成するプログラムを作った#

プログラムを動かすバッチファイルを作成する（Win のみ）#