手打ちサイトでRSS対応の更新履歴を作成しました

現在はPHPでサイトを管理しているためこの方法は利用していません。
HTMLでサイトを作っている人用の記事です。

他の個人サイト運営者の更新を「てがろぐ」のRSSで把握しているため、自分のサイトでも更新履歴をRSS対応にできないかと考えました。
作業にあたっては、ChatGPTやClaudeに大変お世話になりました。

RSSの土台を準備

RSSの基本コードは以下の通りです。rss.xmlという名前でindex.htmlがあるフォルダと同じ階層にに保存します。

<?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にRSSを埋め込む方法を質問する

index.htmlにRSSを埋め込む方法をAIに質問しました。
PHPとjQueryの方法があるようでしたが、既にjQueryを使用していたため、jQueryでの実装を採用しました。

AI用プロンプトは以下の通りです。

同じ階層にある `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 は以下の形式です”の下に記述してあるHTMLは自サイトで使用しているものであり、サイト環境によって異なるため注意が必要です。

AIが出力したコードを、rss.jsとして保存しました。

index.htmlにjQueryとrss.jsを設置

index.htmlの</body>前に作成した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フォルダに配置しています。

rss.jsをどのフォルダに置くかもサイト環境によって異なるので注意が必要です。

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

RSS読み込み中は内容が表示されず、レイアウトが崩れることがあったため、更新履歴セクションの高さをAIに計算してもらい、CSSに反映しました。

AI質問用プロンプト

## 質問内容

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

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

読み込み後の HTML：
サイトをブラウザで表示した際の更新履歴の部分のソースコードを開発者ツールなどで見てそれをコピペ

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

AIが計算した数値をCSSに追加することで、サイトデザインが崩れなくなりました。

動作確認

動作テスト用をするために、サーバーにtestフォルダを作成し、画像以外のサイト構成ファイルをアップロードしました。
アドレス末尾に /test/index.html を入力して確認し、表示やエラーがあればAIに相談して修正しました。

動作確認が完了すれば、更新のたびに rss.xml に <item> を追加することで自動的に表示が変わります。更新履歴の作成とRSS発信を同時に行えるため、一石二鳥です♪

発展編：更新コード作成の自動化

毎回rss.xml内の日時要素である<pubDate>Wed, 20 Nov 2024 21:25:04 +0900</pubDate> の確認と記述をするのが手間だったため、AIに作成してもらったプログラムで自動化しました。

仕組み

rss.xmlと同じフォルダにupdate.txtを作成し、一行ごとに更新内容を書きます。
プログラムを実行すると、内容と日時を <item> として rss.xml に追加します。
このへんのアイデアはじぇねろぐに影響を受けています。

なんでも一覧自動生成プログラム じぇねログ | 創作・同人サイト制作支援メディア do
do.gt-gt.org

Pythonが必要です。コマンドプロンプトやインストールに不安がある場合は注意してください。
私は何も理解していないのにAIに言われるがままやっています。AI様の奴隷です。

Welcome to Python.org
The official home of the Python Programming Language
www.python.org

AIに自動化するためのコードを作ってもらう

AI に色々質問して出来たコードはこちらです。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. エラーハンドリングを実装

バッチファイルで実行（Windowsのみ）

新しいテキストファイルを作成し、以下をコピーして rss.bat として保存します。

@echo off
python rss.py
pause

以降は update.txt に更新内容を入力し、rss.bat をダブルクリックするだけで rss.xml が更新され、index.html を直接編集する必要がなくなります。やったー！

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

タイトルとURLをコピーしました