最初は TinyPNG という、ブラウザで PNG 画像を変換してくれるサービスを利用していました。

ところが調べてみると、どうやら WebP というフォーマットがサイト運営にとても向いているらしい、という情報が Google 検索でたくさん出てきます。

この記事を書いた当時は TinyPNG も CLIP STUDIO PAINT も WebP に対応していなかったため、ローカルで一括変換する方法を探しました。

WebP 変換スクリプト

【Node.js】sharp でサクッと「AVIF」「WebP」生成 - Qiita

次世代画像形式といわれる「AVIF」と「WebP」。 WEBサイトに組み込むことで、表示速度を大幅に向上させることができます。 とっても魅力的な「AVIF」と「WebP」ですが、画像を生成するのが課題となります。 対応しているグラフィックソ...

qiita.com

この記事を参考に環境を構築し、AI に相談しながら自分好みにカスタマイズしたスクリプトを作りました。
src フォルダに入れた PNG 画像が、dest フォルダに WebP 形式で出力されます。

import c from 'ansi-colors';
import log from 'fancy-log';
import fs from 'fs';
import globule from 'globule';
import sharp from 'sharp';

class ImageFormatConverter {
  constructor(options = {}) {
    this.srcBase = options.srcBase || 'src';
    this.destBase = options.destBase || 'dest';
    this.includeExtensionName = options.includeExtensionName || false;
    this.formats = options.formats || [
      {
        type: 'webp',
        quality: 80,
      },
    ];
    this.srcImages = `${this.srcBase}/**/*.{jpg,jpeg,png}`;
    this.init();
  }

  init = async () => {
    const imagePathList = this.findImagePaths();
    await this.convertImages(imagePathList);
  };

  /**
   * globパターンで指定した画像パスを配列化して返す
   * @return { array } 画像パスの配列
   */
  findImagePaths = () => {
    return globule.find({
      src: [this.srcImages],
    });
  };

  /**
   * 画像を変換する
   * @param { string } imagePath 画像パス
   * @param { object } format 画像形式と圧縮品質
   */
  convertImageFormat = async (imagePath, format) => {
    const reg = /\\\\/(.*)\\\\.(jpe?g|png)$/i;
    const [, imageName, imageExtension] = imagePath.match(reg);
    const imageFileName = this.includeExtensionName ? `${imageName}.${imageExtension}` : imageName;
    const destPath = `${this.destBase}/${imageFileName}.${format.type}`;
    await sharp(imagePath)
      .toFormat(format.type, { quality: format.quality })
      .toFile(destPath)
      .then((info) => {
        log(`Converted ${c.blue(imagePath)} to ${c.yellow(format.type.toUpperCase())} ${c.green(destPath)}`);
      })
      .catch((err) => {
        log(c.red(`Error converting image to ${c.yellow(format.type.toUpperCase())}\\\\n${err}`));
      });
  };

  /**
   * 配列内の画像パスのファイルを変換する
   * @param { array } imagePathList 画像パスの配列
   */
  convertImages = async (imagePathList) => {
    if (imagePathList.length === 0) {
      log(c.red('No images found to convert'));
      return;
    }
    for (const imagePath of imagePathList) {
      const reg = new RegExp(`^${this.srcBase}/(.*/)?`);
      const path = imagePath.match(reg)[1] || '';
      const destDir = `${this.destBase}/${path}`;
      if (!fs.existsSync(destDir)) {
        try {
          fs.mkdirSync(destDir, { recursive: true });
          log(`Created directory ${c.green(destDir)}`);
        } catch (err) {
          log(`Failed to create directory ${c.green(destDir)}\\\\n${err}`);
        }
      }
      const conversionPromises = this.formats.map((format) => this.convertImageFormat(imagePath, format));
      await Promise.all(conversionPromises);
    }
  };
}
const imageFormatConverter = new ImageFormatConverter();

リサイズとサムネイル生成を同時に行うスクリプトの作成

私は B5 サイズで絵や漫画を描き、PNG で原寸保存しています。
そのため、サイト掲載用には横幅 800px、ギャラリー表示用には正方形 200px の WebP 画像を自動で出力できるようにカスタマイズしました。

AI に聞いた結果できあがったこのスクリプトを imageProcessor.js という名前で保存しています。

import c from "ansi-colors";
import log from "fancy-log";
import fs from "fs";
import path from "path";
import globule from "globule";
import sharp from "sharp";

class ImageProcessor {
  constructor(options = {}) {
    this.srcBase = options.srcBase || "src";
    this.destBase = "dest";
    this.includeExtensionName = options.includeExtensionName || false;
    this.formats = options.formats || [
      {
        type: "webp",
        quality: 80,
      },
    ];
    this.miniFolder = "mini";
    this.srcImages = `${this.srcBase}/**/*.{jpg,jpeg,png,webp,gif}`;
    this.mainWidth = 800;
    this.miniWidth = 200;
    this.init();
  }

  init = async () => {
    const imagePathList = this.findImagePaths();
    await this.processImages(imagePathList);
  };

  findImagePaths = () => {
    return globule.find({
      src: [this.srcImages],
    });
  };

  convertImageFormat = async (imagePath, format) => {
    const reg = /\/(.*)\.(jpe?g|png|webp|gif)$/i;
    const [, imageName, imageExtension] = imagePath.match(reg);
    const imageFileName = this.includeExtensionName ? `${imageName}.${imageExtension}` : imageName;
    const destPath = `${this.destBase}/${imageFileName}.${format.type}`;

    try {
      let sharpOptions = {};
      if (imageExtension.toLowerCase() === "gif") {
        sharpOptions.pages = 1;
      }

      // メインの画像を800pxで出力
      await sharp(imagePath, sharpOptions)
        .resize({
          width: this.mainWidth,
          withoutEnlargement: true,
        })
        .toFormat(format.type, { quality: format.quality })
        .toFile(destPath);

      log(
        `Converted ${c.blue(imagePath)} to ${c.yellow(format.type.toUpperCase())} ${c.green(
          destPath
        )}`
      );

      // WebPの場合、ミニバージョン(200px)も作成
      if (format.type === "webp") {
        await this.createMiniVersion(imagePath, imageFileName);
      }
    } catch (err) {
      log(c.red(`Error converting image to ${c.yellow(format.type.toUpperCase())}\n${err}`));
    }
  };

  createMiniVersion = async (imagePath, imageFileName) => {
    const miniDestPath = path.join(this.destBase, this.miniFolder, `${imageFileName}_th.webp`);

    try {
      fs.mkdirSync(path.dirname(miniDestPath), { recursive: true });
      await sharp(imagePath)
        .resize({
          width: this.miniWidth,
          height: this.miniWidth,
          position: "center",
        })
        .toFormat("webp", { quality: 80 })
        .toFile(miniDestPath);

      log(`Created mini version: ${c.green(miniDestPath)}`);
    } catch (err) {
      log(c.red(`Error creating mini version\n${err}`));
    }
  };

  processImages = async (imagePathList) => {
    if (imagePathList.length === 0) {
      log(c.red("No images found to process"));
      return;
    }

    for (const imagePath of imagePathList) {
      const reg = new RegExp(`^${this.srcBase}/(.*/)?`);
      const path = imagePath.match(reg)[1] || "";
      const destDir = `${this.destBase}/${path}`;

      if (!fs.existsSync(destDir)) {
        try {
          fs.mkdirSync(destDir, { recursive: true });
          log(`Created directory ${c.green(destDir)}`);
        } catch (err) {
          log(`Failed to create directory ${c.green(destDir)}\n${err}`);
        }
      }

      const conversionPromises = this.formats.map((format) =>
        this.convertImageFormat(imagePath, format)
      );
      await Promise.all(conversionPromises);
    }
  };
}

const imageProcessor = new ImageProcessor();

package.json の編集

バッチファイルから簡単に変換できるよう、package.json の "scripts" に次のように追記しました。

"imageProcessor": "node imageProcessor.js"

全体はこんな感じです。

{
  "name": "image-format-converter",
  "version": "1.0.0",
  "license": "UNLICENSED",
  "private": true,
  "scripts": {
    "image-format-converter": "node ./image-format-converter.js",
    "imageProcessor": "node imageProcessor.js"
  },
  "type": "module",
  "devDependencies": {
    "ansi-colors": "^4.1.3",
    "fancy-log": "^2.0.0",
    "globule": "^1.3.4",
    "sharp": "^0.33.5"
  }
}

バッチファイルの作成

変換をワンクリックでできるように、フォルダの上のほうに置いておくため !imageProcessor.bat という名前で保存しました。

@echo off
npm run imageProcessor
pause

スクリプトを実行

!imageProcessor.bat をダブルクリックすると、コマンドプロンプトが開き、画像がまとめて変換されます。

また、imageProcessor.js 内の

this.mainWidth = 800;
this.miniWidth = 200;

の数値を変えることで、メイン画像やサムネイルのサイズを自由に変更できます。

私は、簡単なラクガキを 500px や 600px で掲載することが多いので、用途ごとに変換スクリプトやバッチファイルを作り分けています。
現在は「同時変換用」「サムネイル専用」「500px」「600px」「1000px」用のスクリプトをそれぞれ運用しています。

現在は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 を使った実装例を教えていただけますか？

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フォルダに配置しています。

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

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 を直接編集する必要がなくなります。やったー！

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