GIFを逆最適化（毎フレーム描画）する方法

// このファイルはESモジュールとして実行するため、.mjs 拡張子で保存してください。
// または、package.json に "type": "module" を追加してください。

import fs from 'fs/promises';
import path from 'path';
import sharp from 'sharp';

/**
 * 指定されたディレクトリ内のGIFおよびPNG画像を処理します。
 * - もともと1:1のアスペクト比であり、かつ、128px x 128px以下の画像は、そのまま出力フォルダに複製します。
 * - それ以外の画像は、128px x 128pxの1:1のアスペクト比にリサイズします。
 * - リサイズ時、画像は下揃えで配置され、上部（および必要に応じて左右）に透明なパディングが追加されます。
 * - GIFアニメーションは維持されます。
 *
 * @param {string} inputDir - 処理対象の入力ディレクトリのパス。
 */
async function processImages(inputDir) {
  // 出力ディレクトリは入力ディレクトリのサブフォルダとして作成されます
  const outputDir = path.join(inputDir, 'output_resized');
  const targetSize = 128; // リサイズ後の目標サイズ（例: 128px x 128px）

  try {
    // 入力ディレクトリが存在するかどうかを確認します
    const stats = await fs.stat(inputDir);
    if (!stats.isDirectory()) {
      console.error(`エラー: 指定されたパス "${inputDir}" はディレクトリではありません。`);
      return;
    }

    // 出力ディレクトリが存在しない場合は作成します
    await fs.mkdir(outputDir, { recursive: true });
    console.log(`出力ディレクトリ "${outputDir}" を作成しました。`);

    // 入力ディレクトリ内のすべてのファイルを読み取ります
    const files = await fs.readdir(inputDir);
    console.log(`"${inputDir}" 内に ${files.length} 個のファイルが見つかりました。`);

    // 各ファイルを並行して処理します
    await Promise.all(files.map(async (file) => {
      const filePath = path.join(inputDir, file);
      const ext = path.extname(file).toLowerCase(); // ファイル拡張子を取得し、小文字に変換します
      const fileNameWithoutExt = path.basename(file, ext); // 拡張子なしのファイル名を取得します
      const outputPath = path.join(outputDir, `${fileNameWithoutExt}${ext}`); // 出力ファイルのパス

      try {
        const fileStats = await fs.stat(filePath);
        // ファイルがディレクトリ、またはすでにリサイズされた出力ファイルの場合はスキップします
        if (fileStats.isDirectory() || file.endsWith('_resized' + ext)) {
          console.log(`"${file}" はスキップされました (ディレクトリまたは既存のリサイズ済みファイル)。`);
          return; // Promise.all のコールバックでスキップ
        }
      } catch (statError) {
        console.warn(`"${file}" の状態を確認できませんでした。スキップします。エラー: ${statError.message}`);
        return;
      }

      // ファイルがGIFまたはPNGであるかを確認します
      if (ext !== '.gif' && ext !== '.png') {
        console.log(`"${file}" はスキップされました (サポートされていないファイル形式)。`);
        return;
      }

      try {
        console.log(`"${file}" を処理しています...`);

        let imageProcessor;
        // GIF画像の場合は、animated: true オプションを指定して読み込みます
        if (ext === '.gif') {
          imageProcessor = sharp(filePath, { animated: true });
        } else {
          imageProcessor = sharp(filePath);
        }

        // 画像のメタデータを取得します (幅、高さなど)
        const metadata = await imageProcessor.metadata();
        const { width, height } = metadata;

        // メタデータが読み取れない場合はスキップします
        if (!width || !height) {
          console.warn(`"${file}" のメタデータが読み取れませんでした。スキップします。`);
          return;
        }

        const maxOriginalDim = Math.max(width, height);

        // 新しい処理ロジック:
        // 画像が既に1:1のアスペクト比であり、かつ、最大辺がtargetSize以下である場合
        if (width === height && maxOriginalDim <= targetSize) {
          // リサイズやパディングは不要なため、そのまま出力フォルダに複製する
          await fs.copyFile(filePath, outputPath);
          console.log(`"${file}" はすでに1:1のアスペクト比であり、${targetSize}px以下のサイズなので、そのまま"${outputPath}"に複製されました。`);
          return; // このファイルの処理を終了
        }

        // 上記以外のすべての画像はリサイズ処理の対象とする:
        // - 1:1だがtargetSizeより大きい画像 (例: 200x200) -> 128x128に縮小
        // - 1:1ではない画像 (例: 200x100, 50x100) -> 128x128の1:1にパディングして収める
        imageProcessor = imageProcessor.resize(targetSize, targetSize, {
          fit: sharp.fit.contain, // 元の画像の縦横比を維持します
          position: sharp.strategy.south, // 画像を下中央に配置します
          background: { r: 0, g: 0, b: 0, alpha: 0 } // 透明な背景色を設定します (RGBA形式)
        });

        // リサイズされた画像をファイルに保存します
        // GIF画像の場合は、animated: true オプションを指定して出力します
        if (ext === '.gif') {
          await imageProcessor.gif({ animated: true }).toFile(outputPath);
        } else {
          await imageProcessor.toFile(outputPath);
        }

        console.log(`"${file}" は "${outputPath}" に正常にリサイズされました。`);

      } catch (error) {
        console.error(`"${file}" の処理中にエラーが発生しました:`, error);
      }
    })); // Promise.all の map コールバックの終了

    console.log("すべての画像の処理が完了しました。");
  } catch (error) {
    console.error("スクリプトの実行中にエラーが発生しました:", error);
  }
}

// コマンドライン引数から入力ディレクトリを取得します
// process.argv[0] は 'node'、process.argv[1] はスクリプトファイル名です
const args = process.argv.slice(2);
const inputDirectory = args[0] || './'; // 引数があればそれを使用し、なければカレントディレクトリを使用します

// スクリプトを実行します
processImages(inputDirectory);