<p>rss-parser　エラーでNG</p><pre><code>02:15:00 [ERROR] [vite] x Build failed in 1.76s
[commonjs--resolver] [plugin vite:resolve] Cannot bundle Node.js built-in "http" imported from "node_modules\rss-parser\lib\parser.js". Consider disabling ssr.noExternal or remove the built-in dependency.</code></pre><p>xml2js エラーでNG</p><pre><code>02:15:37 [ERROR] [vite] x Build failed in 1.43s
[commonjs--resolver] [plugin vite:resolve] Cannot bundle Node.js built-in "events" imported from "node_modules\xml2js\lib\parser.js". Consider disabling ssr.noExternal 
or remove the built-in dependency.</code></pre><p>fast-xml-parser　で何とかできた。<br><a href="https://nemunote.com/blog/astro-v3-to-v4.5-updates-and-new-features/" target="_blank" rel="noopener noreferrer">https://nemunote.com/blog/astro-v3-to-v4.5-updates-and-new-features/</a><br>inferSize<br>画像　をassets使う<br>アメブロはない。<br>はてぶは&lt;enclosure url=""&gt;<br>オプションをつけておかないとurlの部分が削除されて取得できなかった</p><pre><code>    const parser = new XMLParser({
      ignoreAttributes: false, // 属性を無視しない
    });

</code></pre><p>qiitaはAtom形式でアイキャッチ画像がない<br>zenはrssでアイキャッチある&lt;enclosure url=""&gt;<br>note.comはrssで&lt;media:thumbnail&gt;</p>

<p>自身のnoteに書いた記事をRSSフィードを利用してAstroに一覧表示するための手順をまとめた記事です。</p><p><span class="txt-small">※RSSを配信しているサービスの利用規約やルールをご確認ください。</span></p><h2 id="ha6370ccfe0">設定と完成したコード</h2><h3 id="h6ae33e7349">設定</h3><ul><li>Astro 4.7.1</li><li>Astroの出力モード<code>hybrid</code></li><li>Cloudflare Pagesの互換性フラグに<code>nodejs_compat</code>を設定</li><li>XMLデータをJSON形式に変換するパッケージ<code>npm i fast-xml-parser -D</code></li></ul><h3 id="h9a8d5667c1">このコードでできること</h3><ul><li>複数のRSSフィードから記事を取得して日付が新しい順に並び替えて10件表示</li><li>RSS 2.0、Atom形式</li><li>日付をYYYY.MM.DD形式</li></ul>

import { XMLParser } from "fast-xml-parser";

// 記事のインターフェースを定義
interface Article {
  title: string;
  link: string;
  thumb: string | null;
  description: string;
  pubDate: string;
}

// RSSフィードを取得してJSONデータに変換する関数
export async function fetchRSS(url: string): Promise<any> {
  try {
    const response = await fetch(url); // URLからRSSフィードをフェッチ
    const xmlData = await response.text(); // フェッチしたデータをテキストとして取得
    const parser = new XMLParser({
      ignoreAttributes: false, // 属性を無視しない設定
    });
    const jsonData = parser.parse(xmlData); // XMLデータをJSONに変換
    return jsonData;
  } catch (error) {
    console.error("Error fetching or parsing RSS feed:", error); // エラーが発生した場合にコンソールに表示
    throw error; // エラーをスロー
  }
}

// 日付をYYYY.MM.DD形式にフォーマットする関数
function formatDate(date: Date): string {
  const year = date.getFullYear();
  const month = (date.getMonth() + 1).toString().padStart(2, "0");
  const day = date.getDate().toString().padStart(2, "0");
  return `${year}.${month}.${day}`;
}

// アイテムからサムネイルURLを抽出する関数
function extractThumb(item: any): string | null {
  if (item.enclosure && item.enclosure.url) {
    return item.enclosure.url;
  } else if (item["media:thumbnail"]) {
    return item["media:thumbnail"];
  } else if (Array.isArray(item.link)) {
    const link = item.link.find(
      (l: any) => l.rel === "enclosure" || l.type?.startsWith("image")
    );
    return link ? link.href : null;
  }
  return null;
}

// RSSアイテムをArticleインターフェースにパースする関数
function parseRSSItem(item: any, isAtom: boolean = false): Article {
  return {
    title: item.title,
    link: isAtom ? item.link?.href || item.link : item.link,
    thumb: extractThumb(item),
    description: item.description || item.summary || item.content,
    pubDate: formatDate(
      new Date(item.pubDate || item.updated || item.published)
    ),
  };
}

// RSS 2.0形式のJSONデータをArticle配列にパースする関数
function parseRSS2(jsonData: any): Article[] {
  const items = Array.isArray(jsonData.rss.channel.item)
    ? jsonData.rss.channel.item
    : [jsonData.rss.channel.item];
  return items.map((item: any) => parseRSSItem(item));
}

// Atom形式のJSONデータをArticle配列にパースする関数
function parseAtom(jsonData: any): Article[] {
  const entries = Array.isArray(jsonData.feed.entry)
    ? jsonData.feed.entry
    : [jsonData.feed.entry];
  return entries.map((entry: any) => parseRSSItem(entry, true));
}

// 複数のRSSフィードURLを処理し、最新の10記事を返す関数
export async function fetchAndProcessRSS(
  rssURLs: string[]
): Promise<Article[]> {
  let articles: Article[] = [];

  await Promise.all(
    rssURLs.map(async (rssURL) => {
      try {
        const rssData = await fetchRSS(rssURL); // 各RSSフィードをフェッチ
        let fetchedArticles: Article[] = [];

        if (rssData.rss) {
          fetchedArticles = parseRSS2(rssData); // RSS 2.0形式を解析
        } else if (rssData.feed) {
          fetchedArticles = parseAtom(rssData); // Atom形式を解析
        } else {
          console.error(`Unknown feed format for ${rssURL}`, rssData); // 不明なフォーマットのフィード
        }

        articles.push(...fetchedArticles); // 取得した記事を追加
      } catch (error) {
        console.error(`Error processing RSS feed ${rssURL}:`, error); // エラー処理
      }
    })
  );

  // 記事を日付でソートし、最新の10記事を取得
  articles.sort(
    (a, b) => new Date(b.pubDate).getTime() - new Date(a.pubDate).getTime()
  );
  articles = articles.slice(0, 10);

  return articles; // 最終的な記事リストを返す
}

---
import Layout from "@/layouts/Layout.astro";
import { fetchAndProcessRSS } from "@/libs/fetchAndProcessRSS";
import { Image } from "astro:assets";
import noimage from "@/images/noimage.png";

// RSSフィードのURL 配列で複数RSSフィードURLの指定が可能
const rssURLs = [
  "https://note.com/xxx/rss"
];

// RSSフィードから記事を取得して統合
const articles = await fetchAndProcessRSS(rssURLs);
---
<Layout>
  <h1>Latest Articles</h1>
  <ul>
    {
      articles.map((article) => (
        <li>
          <a href={article.link}>
            {article.thumb ? (
              <img src={article.thumb} alt="" />
            ) : (
              <Image src={noimage.src} width={400} height={300} alt="" />
            )}
            <div class="info">
              <p class="date">{article.pubDate}</p>
              <p class="title">{article.title}</p>
            </div>
          </a>
        </li>
      ))
    }
  </ul>
</Layout>

<h3 id="h3e3954103e">😢つまづき⓵XMLデータをJSON形式に変換するパッケージでデプロイ失敗</h3><p>はじめはxml2jsで試して作成していましたが、いざデプロイしようとしたらエラーでデプロイできませんでした。</p><h4 id="h5210acff2f">エラー内容</h4><pre><code>02:15:37 [ERROR] [vite] x Build failed in 1.43s
[commonjs--resolver] [plugin vite:resolve] Cannot bundle Node.js built-in &quot;events&quot; imported from &quot;node_modules\xml2js\lib\parser.js&quot;. Consider disabling ssr.noExternal 
or remove the built-in dependency.</code></pre><h4 id="heaa723eefe">ChatGPTに聞いてみた</h4><blockquote><p>このエラーは、Viteビルド中に発生したものです。エラーメッセージによると、<code>node_modules\xml2js\lib\parser.js</code>からNode.jsの組み込みモジュールである &quot;events&quot; をインポートしようとしているが、それがバンドルされていないため、エラーが発生しています。エラーの提案として、<code>ssr.noExternal</code>を無効にするか、組み込みの依存関係を削除することが挙げられています。</p><p>このエラーの理由として、ViteがデフォルトでNode.jsの組み込みモジュールをバンドルしないためです。これは、Viteがブラウザ向けのフロントエンドアプリケーションを効率的にビルドするための設計上の決定です。しかし、<code>xml2js</code>ライブラリがNode.jsの組み込みモジュールである &quot;events&quot; を使用しているため、このエラーが発生しています。</p></blockquote><p>astro.config.mjsのviteに設定を追加したり試したのですが、うまくいきません・・</p><p>rss-parserも試してみたのですが、<code>Cannot bundle Node.js built-in &quot;http&quot; imported from &quot;node_modules\rss-parser\lib\parser.js&quot;</code>と同様のエラーが出たため断念しました。</p><p>最終的にはデプロイできたfast-xml-parserで落ち着きました。</p>

<h3 id="h0701d7302b">😢つまづき②画像を取得するときにundefinedになる</h3><p>はじめはnoteのRSSフィードの形式をもとに作っていたのですが、複数のRSSフィードからデータを取得するときに画像が取得できないケースに遭遇しました。</p><pre><code>&lt;enclosure url=&quot;https://xxx.xyz/xxxx.jpg&quot; type=&quot;image/jpeg&quot; length=&quot;0&quot; /&gt;</code></pre><p>取得しようと設定してもundefinedになります・・</p><p>parserするときに属性が削除されてしまいurlがなくなっていました。そこでXMLParserのignoreAttributesとattributeNamePrefixオプションの設定を追加したら取得できるようになりました🎉</p>

const parser = new XMLParser({
  ignoreAttributes: false, // 属性を無視しない
  attributeNamePrefix: "", // 属性名のプレフィックスを削除
});

<h2 id="h9a28d23373">いろんなサービスのRSSフィードを見てみよう👀</h2><p><span class="txt-small">※2024/6/11時点</span></p><h3 id="ha62a81d053">note</h3><p><a href="https://www.help-note.com/hc/ja/articles/4402395202841-iframe-RSS%E3%81%A7-%E8%87%AA%E5%88%86%E3%81%AE%E3%82%B5%E3%82%A4%E3%83%88%E3%81%ABnote%E3%82%92%E8%A1%A8%E7%A4%BA%E3%81%99%E3%82%8B" target="_blank" rel="noopener noreferrer nofollow">iframe、RSSで、自分のサイトにnoteを表示する</a></p><pre><code>&lt;item&gt;
  &lt;title&gt;記事タイトル&lt;/title&gt;
  &lt;media:thumbnail&gt;画像URL&lt;/media:thumbnail&gt;
  &lt;description&gt;&lt;![CDATA[ 本文 ]]&gt;&lt;/description&gt;
  &lt;note:creatorImage&gt;クリエイター画像&lt;/note:creatorImage&gt;
  &lt;note:creatorName&gt;クリエイター名&lt;/note:creatorName&gt;
  &lt;pubDate&gt;Thu, 08 Sep 2022 01:47:28 +0900&lt;/pubDate&gt;
  &lt;link&gt;記事URL&lt;/link&gt;
  &lt;guid&gt;記事URL&lt;/guid&gt;
&lt;/item&gt;</code></pre><h3 id="h36df264104">Qiita</h3><p><a href="https://help.qiita.com/ja/articles/qiita-feed" target="_blank" rel="noopener noreferrer nofollow">フィード機能（ホーム・タイムライン・トレンド）</a></p><pre><code>&lt;entry&gt;
  &lt;id&gt;tag:qiita.com,2005:PublicArticle/記事ID?&lt;/id&gt;
  &lt;published&gt;2024-06-11T15:46:46+09:00&lt;/published&gt;
  &lt;updated&gt;2024-06-11T15:46:49+09:00&lt;/updated&gt;
  &lt;link rel=&quot;alternate&quot; type=&quot;text/html&quot; href=&quot;記事URL＋パラメータ&quot;/&gt;
  &lt;title&gt;記事タイトル&lt;/title&gt;
  &lt;content type=&quot;html&quot;&gt;本文&lt;/content&gt;
  &lt;author&gt;
    &lt;name&gt;ユーザ名&lt;/name&gt;
  &lt;/author&gt;
&lt;/entry&gt;</code></pre><h3 id="hbfca088075">Zenn</h3><p><a href="https://zenn.dev/zenn/articles/zenn-feed-rss" target="_blank" rel="noopener noreferrer nofollow">ZennをRSSフィードで購読する</a></p><pre><code>&lt;item&gt;
  &lt;title&gt;&lt;![CDATA[ 記事タイトル ]]&gt;&lt;/title&gt;
  &lt;description&gt;&lt;![CDATA[ 本文 ]]&gt;&lt;/description&gt;
  &lt;link&gt;記事URL&lt;/link&gt;
  &lt;guid isPermaLink=&quot;true&quot;&gt;記事URL&lt;/guid&gt;
  &lt;pubDate&gt;Wed, 12 Jun 2024 00:00:00 GMT&lt;/pubDate&gt;
  &lt;enclosure url=&quot;OGP画像URL&quot; length=&quot;0&quot; type=&quot;image/png&quot;/&gt;
  &lt;dc:creator&gt;ユーザ名&lt;/dc:creator&gt;
&lt;/item&gt;</code></pre><h3 id="h926adb4daf">はてなブックマーク</h3><p><a href="https://developer.hatena.ne.jp/ja/documents/bookmark/misc/feed/" target="_blank" rel="noopener noreferrer nofollow">はてなブックマークフィード仕様</a></p><p>RSS 2.0、Atom形式の両方あります。</p><pre><code>&lt;item&gt;
  &lt;title&gt;記事タイトル&lt;/title&gt;
  &lt;link&gt;記事URL&lt;/link&gt;
  &lt;description&gt;本文&lt;/description&gt;
  &lt;pubDate&gt;Thu, 23 May 2024 11:57:41 +0900&lt;/pubDate&gt;
  &lt;guid isPermaLink=&quot;false&quot;&gt;hatenablog://entry/ID?&lt;/guid&gt;
  &lt;enclosure url=&quot;画像URL&quot; type=&quot;image/png&quot; length=&quot;0&quot; /&gt;
&lt;/item&gt;</code></pre><pre><code>&lt;entry&gt;
  &lt;title&gt;記事タイトル&lt;/title&gt;
  &lt;link href=&quot;記事URL&quot; /&gt;
  &lt;id&gt;hatenablog://entry/記事ID?&lt;/id&gt;
  &lt;published&gt;2024-06-11T17:45:54+09:00&lt;/published&gt;
  &lt;updated&gt;2024-06-11T17:45:54+09:00&lt;/updated&gt;
  &lt;summary type=&quot;html&quot;&gt;要約&lt;/summary&gt;
  &lt;content type=&quot;html&quot;&gt;本文&lt;/content&gt;
  &lt;category term=&quot;カテゴリ&quot; label=&quot;カテゴリ&quot; /&gt;
  &lt;category term=&quot;カテゴリ&quot; label=&quot;カテゴリ&quot; /&gt;
  &lt;link rel=&quot;enclosure&quot; href=&quot;画像URL&quot; type=&quot;image/png&quot; length=&quot;0&quot; /&gt;
  &lt;author&gt;
    &lt;name&gt;ユーザ名&lt;/name&gt;
  &lt;/author&gt;
&lt;/entry&gt;</code></pre>

<p>📝参考サイト</p><ul><li><a href="https://zenn.dev/kazuki_tam/articles/f7d3c0f1074969" target="_blank" rel="noopener noreferrer nofollow">Astro環境でnote記事一覧を事前ビルドして表示する方法</a></li><li><a href="https://zenn.dev/catnose99/articles/cb72a73368a547756862" target="_blank" rel="noopener noreferrer nofollow">チーム個々人のテックブログをRSSで集約するサイトを作った（Next.js）</a></li></ul>

AstroでRSSフィードから記事一覧を取得してCloudflare Pagesで表示してみる

<pre><code>npm i&nbsp;svgo</code></pre><p><br>fsのエラー<br>この参考サイトを参照：https://gotohayato.com/content/553/<br><br>cssはhttps://flowbite.com/を使う<br><br>MUIにした<br>公式：https://mui.com/material-ui/getting-started/installation/<br>npm install @mui/material @mui/styled-engine-sc styled-components<br><br>https://mui.com/material-ui/experimental-api/css-theme-variables/migration/<br><br>app routerではemotionがいるみたい<br><span style="color:#242424">npm install @mui/material @emotion/react @emotion/styled @emotion/cache</span><br><br><span style="color:#242424">app routerでの実装例があった！</span><br>https://medium.com/frontendweb/how-to-install-material-ui-in-the-next-js-with-the-app-router-10d2a60e41f2<br>https://github.com/mui/material-ui/issues/37935<br><br>カラーパレット<br>https://zenoo.github.io/mui-theme-creator/<br><br>GTMの設定は以下を参考<br>https://haramizu.com/blog/2023/09/01/nextjs-app-router-gtm<br>https://qiita.com/ruiiixiii/items/2f3e3497d13ec804eb40<br><br>// export const runtime = "edge";<br>があるとnpm run buildでビルドしたときにindex.htmlができない・・なんで<br><br>マテリアルデザイン3.0<br>https://m3.material.io/<br><br>デプロイできない→みてもわからんかった・・<br>https://github.com/natemoo-re/astro-icon/issues/35<br><br>Vercelにアップした<br>https://bobbyhadz.com/blog/module-not-found-cant-resolve-fs<br><br><br>どっちもデプロイはできた</p>

<p>SVGアイコンをCSSのbackgroundやmaskで使用するときに、パスを最適化したり不要な要素を削除したり・・何かと手間がかかるのでSVGパスを最適化した状態でCSSプロパティとして出力するツールを作りました。</p><figure><img src="https://images.microcms-assets.io/assets/5e670c7778344f88b5eed6bb029b015c/46a9b1b689c846f8822380bd73f3fbe1/motion.gif" alt="" width="1509" height="694"></figure><p><strong>SVG ICON Convert to CSS</strong><br><a href="https://svg-icon-convert-to-css.pages.dev/" target="_blank" rel="noopener noreferrer nofollow">https://svg-icon-convert-to-css.pages.dev/</a></p><h2 id="h68f4ddbb30">ツールでできること</h2><ul><li>SVGの複数&lt;path&gt;を結合するかしないか</li><li>パスやアンカーポイントの位置の小数点の桁数変更</li><li>CSSプロパティ設定<ul><li>background か mask</li><li>cover, contain, カスタム設定</li></ul></li><li>SVGパスをクリップボードにコピー<ul><li>最適化する前</li><li>最適化した後</li></ul></li><li>Base64に変換したSVGパスをCSSプロパティにセットしクリップボードにコピー<ul><li>最適化する前</li><li>最適化した後</li></ul></li><li>最適化前と最適化後のSVGプレビュー</li><li>ダークモード</li></ul>

<h2 id="h32098baedb">使用したライブラリ・フレームワーク</h2><table><tbody><tr><th colspan="1" rowspan="1"><p>SVG最適化</p></th><td colspan="1" rowspan="1"><p><a href="https://github.com/svg/svgo" target="_blank" rel="noopener noreferrer nofollow">SVGO</a></p></td></tr><tr><th colspan="1" rowspan="1"><p>クリップボードコピー</p></th><td colspan="1" rowspan="1"><p><a href="https://github.com/nkbt/react-copy-to-clipboard" target="_blank" rel="noopener noreferrer nofollow">react-copy-to-clipboard</a></p></td></tr><tr><th colspan="1" rowspan="1"><p>CSSフレームワーク</p></th><td colspan="1" rowspan="1"><p><a href="https://mui.com/" target="_blank" rel="noopener noreferrer nofollow">MUI</a></p></td></tr></tbody></table>

<h2 id="h33bc396ad1">SVGパスの貼り付けとプレビュー表示</h2><p>textareaは&lt;TextField&gt;コンポーネントを使用しています。</p>

<p>貼り付けたSVGパスを正規表現でパターンチェックをしています。</p><p>コンテンツ内には&lt;Snackbar&gt;&lt;Alert&gt;でエラー表示用の要素を配置していて、SVGパスでないとき&lt;Snackbar&gt;のプロパティ<code>open</code>に<code>true</code>を渡してエラーを表示させます。</p><p>SVGパスのパターンに一致した場合は、originalSvgPathのstateを更新しています。</p>

const [originalSvgPath, setOriginalSvgPath] = useState(defaultPath);

const pattern = /^<svg[\s\S]*?<\/svg>\s*$/;  //SVGパスの正規表現

const svgPasteChange = (event: React.ChangeEvent<HTMLInputElement>) => {
  if (!event.target) return;
  const newValue = event.target.value;
  if (!pattern.test(newValue)) {  //SVGのパスかパターンチェック
    setStateError({
      open: true,
      vertical: "bottom",
      horizontal: "center",
    });
    return;
  }
  setOriginalSvgPath({
    value: newValue,
    copied: true,
  });
};

<p>最適化されたSVGを表示するだけでもいいのですが、貼り付けたSVGと最適化されたSVGに違いがあるか視覚的に比較したかったのでプレビュー表示のエリアを作りました。</p><p>貼り付けたSVGは、そのままSVGパスを<code>dangerouslySetInnerHTML</code>で表示させています。</p>

<Box sx={previewStyles}>
{originalSvgPath.value && (
  <div
    dangerouslySetInnerHTML={{
      __html: originalSvgPath.value,
    }}
  ></div>
)}
</Box>

<h2 id="h45c359757c">SVGパスの最適化</h2><p>SVGOを使ってパスの最適化を行いますが、SVGOにはプロパティがたくさんあります。自分の好みの設定ができますが、SVGアイコンの最適化には多機能すぎる気がしたので最低限の設定をユーザーに委ねる設計にしました。</p><h4 id="h93140c217a">1. mergePaths</h4><p>複数のパスを1つにマージするか</p>

//貼り付けたSVG
<svg width="278" height="192" viewBox="0 0 278 192" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="133" height="133" fill="#D9D9D9"/>
<rect x="145" y="59" width="133" height="133" fill="#D9D9D9"/>
</svg>

//パスをマージしない場合
<svg xmlns="http://www.w3.org/2000/svg" width="278" height="192" fill="none" viewBox="0 0 278 192">
<path fill="#D9D9D9" d="M0 0h133v133H0z"/>
<path fill="#D9D9D9" d="M145 59h133v133H145z"/>
</svg>

//パスをマージした場合
<svg xmlns="http://www.w3.org/2000/svg" width="278" height="192" fill="none" viewBox="0 0 278 192">
<path fill="#D9D9D9" d="M0 0h133v133H0zm145 59h133v133H145z"/>
</svg>

<p><code>mergePaths</code>を有効にすると&lt;path&gt;が１つになっていることが分かります。<br>パス自体を合体させるオプションではないため、&lt;path&gt;と&lt;path&gt;が重なっている場合、パスはマージされません。パスが重なっていない場合に有効です。</p><h4 id="h4e9867d800">2. convertPathDataのfloatPrecision</h4><p>SVGパスの不要な区切り文字や小数点以下の丸め処理をして軽量化をはかる</p>

//貼り付けたSVG
<svg width="33" height="30" viewBox="0 0 33 30" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M16.5 0L20.2045 11.4012H32.1924L22.494 18.4476L26.1985 29.8488L16.5 22.8024L6.80154 29.8488L10.506 18.4476L0.807568 11.4012H12.7955L16.5 0Z" fill="#D9D9D9"/>
</svg>

//丸め処理：デフォルト（小数第三位）
<svg xmlns="http://www.w3.org/2000/svg" width="33" height="30" fill="none" viewBox="0 0 33 30">
<path fill="#D9D9D9" d="m16.5 0 3.704 11.401h11.988l-9.698 7.047 3.704 11.4-9.698-7.046-9.698 7.047 3.704-11.401L.808 11.4h11.988L16.5 0Z"/>
</svg>

//丸め処理：小数第一位
<svg xmlns="http://www.w3.org/2000/svg" width="33" height="30" fill="none" viewBox="0 0 33 30">
<path fill="#D9D9D9" d="m16.5 0 3.7 11.4h12l-9.7 7 3.7 11.4-9.7-7-9.7 7 3.7-11.4-9.7-7h12L16.5 0Z"/>
</svg>

<p>小数第三位では<code>3.704</code>だった値が、小数第一位にすると<code>3.7</code>になっていることが分かります。値が小さくなるほどパスは軽量化されますが、微妙にパスの位置が変わるため見た目に影響が出ます。</p><p>軽量化できてもアイコンがいびつな形になっては意味がありません。プレビュー機能を付けた理由は、この小数点の丸め処理によって変化したSVGを確認するためです。</p><h4 id="h9d02a408fa">ユーザー操作なしの設定</h4><p>removeRasterImagesを有効にして、あとはSVGOのデフォルト設定を利用しました。<br><a href="https://www.npmjs.com/package/svgo#built-in-plugins" target="_blank" rel="noopener noreferrer nofollow">https://www.npmjs.com/package/svgo#built-in-plugins</a></p>

<h2 id="h2a83499af6">クリップボードへのコピー</h2><p>冒頭でも書いたように４種類のSVGパスをコピーできるツールです。</p><ul><li>SVGパスをクリップボードにコピー<ul><li>最適化する前</li><li>最適化した後</li></ul></li><li>Base64に変換したSVGパスをCSSプロパティにセットしクリップボードにコピー<ul><li>最適化する前</li><li>最適化した後</li></ul></li></ul><p>SVGパスは最適化前・後の値を使用し、CSS用のSVGは最適化前・後のSVGパスをSVGOの<code>datauri: enc</code>でエンコードしています。</p><p>Base64にエンコードした値は、CSSにそのまま貼り付けられるようツール上でプロパティの組み合わせを選択しセットした状態でクリップボードにコピーできるようにしました。</p><ul><li>background または mask</li><li>url(Base64エンコードのパス)</li><li>no-repeat</li><li>left top / cover 、left top contain、カスタマイズ</li></ul><p>あとは<code>&lt;Button&gt;</code>コンポーネントをコピーしたい値をセットした<code>&lt;CopyToClipboard&gt;</code>でラップするだけで、ボタンをクリックするとクリップボードに値がコピーされます。</p>

<h2 id="hefb8021c79">おまけ：ダークモードの切り替え</h2><figure><img src="https://images.microcms-assets.io/assets/5e670c7778344f88b5eed6bb029b015c/4f47f27589964367b49e64466e7794c4/darkmode.gif" alt="" width="1501" height="692"></figure><p>せっかくなのでMUIのドキュメントにダークモードのサンプルがあったので組み込みました。</p><p>モード切替後、リロードしても状態を保持するようにしましたが、はじめは一瞬ライトモードが表示されるちらつきに悩まされましたが、MUIの公式で「CSS theme variables」による解決策が掲載されていました。</p><p><a href="https://mui.com/material-ui/guides/next-js-app-router/" target="_blank" rel="noopener noreferrer nofollow">https://mui.com/material-ui/guides/next-js-app-router/</a><br><a href="https://mui.com/material-ui/experimental-api/css-theme-variables/migration/">https://mui.com/material-ui/experimental-api/css-theme-variables/migration/</a></p><p>📝参考<br>・<a href="https://medium.com/frontendweb/how-to-install-material-ui-in-the-next-js-with-the-app-router-10d2a60e41f2" target="_blank" rel="noopener noreferrer nofollow">How to install material UI in the Next.js with the app router?</a><br>・<a href="https://github.com/mui/material-ui/issues/37935" target="_blank" rel="noopener noreferrer nofollow">[Theme Mode] CssBaseline not working with Next.js App Router (with ThemeRegistry)</a></p><p>ちらつきが無くなりました😊</p>

Node.jsのSVGOを使ってSVGの最適化とBase64変換したCSSプロパティをコピーするツールを作ってみた

<h2 id="h9f510f3156">やりたいこと</h2><p><img src="https://images.microcms-assets.io/assets/5e670c7778344f88b5eed6bb029b015c/d81519bca58a49c1bae7e46f29a4f52a/Group%20100.png" alt="" width="879" height="247"></p><p><br></p><h2 id="h58a6675258">パッケージのインストール</h2><pre><code>npm i sharp path fs</code></pre><p><br></p>

├ 📁 images
│　└ 📁 convert
│　└ 📁 dir1
│　└ 📁 dir2
├ convertImages.mjs
├ package.json


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

const __dirname = path.resolve();

const inputDir1Path = path.join(__dirname, 'images', 'dir1');
const inputDir2Path = path.join(__dirname, 'images', 'dir2');
const outputConvertPath = path.join(__dirname, 'images', 'convert');

const dir1Images = [];
const dir2Images = [];

async function readDir1Files() {
  try {
    const dir1Files = await fs.readdir(inputDir1Path);
    dir1Images.push(...dir1Files.map(file => path.join(inputDir1Path, file)));
  } catch (err) {
    console.error('Error reading Dir1 folder:', err);
  }
}

async function readDir2Files() {
  try {
    const dir2Files = await fs.readdir(inputDir2Path);
    dir2Images.push(...dir2Files.map(file => path.join(inputDir2Path, file)));
  } catch (err) {
    console.error('Error reading Dir2 folder:', err);
  }
}

async function convertImgs(dir1Images, dir2Images) {
  for (let index = 0; index < dir1Images.length; index++) {
    const dir1ImagePath = dir1Images[index];
    const dir2ImagePath = dir2Images[index];

    //Dir1->image info
    const dir1ImageInfo = await sharp(dir1ImagePath).metadata();
    const dir1ImgWidth = dir1ImageInfo.width;
    const dir1ImgHeight = dir1ImageInfo.height;

    //Dir2->image info
    const dir2ImageInfo = await sharp(dir2ImagePath).metadata();
    const dir2ImgWidth = dir2ImageInfo.width;
    const dir2ImgHeight = dir2ImageInfo.height;

    const convertWidth = dir1ImgWidth + dir2ImgWidth + 100; //100は、画像と画像の間分
    const convertHeight = Math.max(dir1ImgHeight, dir2ImgHeight);  //画像の高さを比較し高いサイズを採用->生成する画像の高さになる

    const convertFilePath = dir1ImagePath.replace(/.(jpeg|png)/g, '.jpg'); //強制的に拡張子をjpgに置き換え

    await sharp({ create: { width: convertWidth, height: convertHeight, channels: 4, background: { r: 255, g: 255, b: 255, alpha: 1 } } }) //背景を黒にする場合は、alpha: 0
      .jpeg({
        quality: 50, //圧縮 品質を50に設定
        progressive: true
      })
      .composite([
        {
          input: dir1ImagePath,
          left: 0,
          top: 0,
          gravity: 'northwest'
        },
        {
          input: dir2ImagePath,
          left: dir1ImgWidth + 100, // 1枚目との間を100px空ける
          top: 0,
          gravity: 'northeast'
        }
      ])
      .toFile(path.join(outputConvertPath, path.basename(convertFilePath))); //合成したファイル名
  }
}

async function main() {
  await readDir1Files();
  await readDir2Files();
  await convertImgs(dir1Images, dir2Images);
  console.log('Images conversion complete.');
}

main().catch(error => {
  console.error('Error:', error);
});

<pre><code>node convertImages.mjs</code></pre><p><br></p><p>実行すると画像が生成されました！</p>

Node.jsライブラリsharpを使って2枚を1枚の画像に合成・圧縮する自動化mjsを作る

<p>参考：https://zenn.dev/rik9228/articles/256d26cbfcaf1e<br>https://qiita.com/super-mana-chan/items/47c71d63c0de21818318<br><br>並列処理させる；<br>https://zenn.dev/luma/articles/9d2272cd98fcc7<br><br><br></p><h3 id="h6b1fd73780">実行したらパソコンがフリーズ・・！！</h3><p>メモリが96%まで・・<br>停止してvscode閉じたら40%くらいまでになった。もうこれのせいやん・・<br><br>npm-script-allでまとめて実行させる<br>https://qiita.com/sugurutakahashi12345/items/2a17a3cdfbc4a7e5e4eb<br>まさかの並列実行と直列実行でpackage.jsonの書き方が違った・・・そうなの？？！<br></p><h3 id="h36f90f799c">webpが安定して生成されないから、sharpに変更してみよう</h3><p>ライセンス<br>Apache ライセンス 2.0<br><br>https://blog.kozakana.net/2019/04/sharp-output-format/<br><br>階層を深くすると管理者の実行権限～がでるからvscodeから削除すると削除できる<br><br>ファイル削除しようとすると↓がでる<br>node.js javascript runtimeによって開かれているため、操作を完了できません。<br><br>削除したら連動させたけど、安定しない。<br>・削除すると権限周りでひっかかるしちゃんと削除出来てるか不安になる<br>・実行したり切ったりを繰り返すのは面倒</p>

<p>画像の圧縮とWebP画像の生成を自動化させるモジュールjsを作成しました。</p><p>当初はimageminを使用していましたが、クオリティの設定や元ファイルの状態によっては圧縮されないファイルがあり<sup>（※）</sup>、sharpを使用することにしました。</p><p>※これ以上圧縮できない場合に生成されない（・？）</p><p><br></p><p>オリジナル画像があるフォルダ（src\/imagesとする）と圧縮した画像・WebP生成した画像を入れるフォルダ（\/public\/imagesとする）を用意する。</p><h3 id="hf471dec208">タスク</h3><ul><li>📁\src\imagesのjpg/pngを📁\public\imagesへ圧縮して格納する</li><li>📁public/imagesに圧縮されたjpg/pngが格納されたらWebP画像を生成する</li><li>gif/svgは変換せず📁public/imagesへ複製</li><li>📁src/images内のフォルダ・画像を削除したら📁public/images内も削除する</li><li>フォルダを監視して実行する</li></ul><h3 id="hdebde90f2c">使用したライブラリ</h3><pre><code>npm i fs fs-extra path sharp chokidar</code></pre>

import fs from 'fs';
import fsExtra from "fs-extra"; //ファイルがあっても削除できる
import path from 'path';
import sharp from 'sharp';
import chokidar from 'chokidar';

const srcDir = './src/images/';
const publicDir = './public/images/';
const allowedExtensions = ['.jpg', '.png'];  //対象拡張子

//画像変換処理の設定
const sharpOptions = {
  'jpg' : [
    'jpg',
    {
      quality: 90,
      progressive: true
    }
  ],
  'png' : [
    'png',
    {
      quality: 80,
    }
  ]
}

//ディレイクトリ置換
const replaceFilePath = (beforeDir, afterDir, filePath) => path.join(afterDir, path.relative(beforeDir, filePath));

//webpへの拡張子置換
const replaceWebpFilePath = filePath => filePath.replace(/\.(jpg|png)$/i, '.webp');

//jpg,pngは圧縮処理、それ以外の拡張子はコピー
function optimizeImage(srcPath, destPath) {
  const extname = path.extname(srcPath).toLowerCase();

  if (allowedExtensions.includes(extname)) {
    const convertFormat = /\.png$/i.test(srcPath) ? sharpOptions.png : sharpOptions.jpg;
    sharp(srcPath)
      .toFormat(convertFormat[0])
      .toFile(destPath, (err) => {
        if (err) {
          console.error('Error processing image:', err);
        } else {
          console.log('convert iamge:', srcPath);
        }
      });
  } else {
    fs.copyFile(srcPath, destPath, (err) => {
      if (err) {
        console.error('Error copying image:', err);
      } else {
        console.log('Copied image:', srcPath);
      }
    });
  }
}

//jpg,pngをwebp変換
function convertWebp(destPath){
  const replaceExtension = replaceWebpFilePath(destPath);
  const webpFilePath = path.join(publicDir, path.relative(publicDir, replaceExtension))
  sharp(destPath)
    .webp({ quality: 85 })
    .toFile(webpFilePath)
}

//ディレクトリの監視と画像圧縮・変換の実行
const convertImages = async () => {
  // src/imagesディレクトリの監視を開始
  const srcWatcher = chokidar.watch(srcDir, {
    ignored: /(^|[\/\\])\../, // 隠しファイルを無視
    persistent: true
  });

  srcWatcher
    .on('all', (event, filePath) => {
      const targetFilePath = replaceFilePath(srcDir, publicDir, filePath);
      if( event === 'add' || event === 'change' ){
        optimizeImage(filePath, targetFilePath);
      } else if( event === 'addDir' ){
        fsExtra.ensureDirSync(targetFilePath);
      } else if( event === 'unlinkDir' ){  //フォルダ名を変更・削除したとき
        fsExtra.removeSync(targetFilePath);
      } else if( event === 'unlink' ){  //ファイルを削除したとき
        fsExtra.removeSync(targetFilePath);
      }
    })

  // public/imagesディレクトリの監視を開始
  const publicWatcher = chokidar.watch(publicDir, {
    ignored: /(^|[\/\\])\../, // 隠しファイルを無視
    persistent: true
  });

  publicWatcher
  .on('all', (event, filePath) => {
    const extension = path.extname(filePath).toLowerCase();
    if (allowedExtensions.includes(extension)) {
      if( event === 'add' || event === 'change' ){
        convertWebp(filePath);
      } else if( event === 'unlink' ){
        const removeFilePath = replaceWebpFilePath(filePath);
        if( !fs.existsSync(removeFilePath) ) return;
        fs.unlink(removeFilePath, (err) => {
          if (err) throw err;
          console.log('remove:', removeFilePath);
        })
      }
    }
  })
}

convertImages();

<p>📝参考：</p><p><a href="https://sharp.pixelplumbing.com/" target="_blank" rel="noopener noreferrer">sharp公式ドキュメント</a></p><h3 id="heae24d5f27">フォルダの監視にchokidarを使う</h3><pre><code>npm i chokidar</code></pre><p>監視フォルダを指定すると指定フォルダ内でフォルダ・ファイルの生成や削除などを感知してくれ、イベント名とファイルパスが取得できます。</p><p>今回使用したイベントは以下の通り。</p><ul><li>add / change　追加・変更</li><li>unlink　削除</li><li>addDir　フォルダの追加</li><li>unlinkDir　フォルダの削除</li></ul><p><br></p><p>だいたい使用するファイル名に変更した状態でフォルダに入れることが多いのですがフォルダは都度、監視フォルダ内で生成する予定です。</p><p>フォルダを作成するとaddDirイベントがはしり、publicにフォルダを作成する仕様にしています。</p><p>フォルダを生成した瞬間フォルダ名を確定させていなくても「新しいフォルダー」が生成されてしまう・・🤔？</p><p><br></p><p>問題ありませんでした。</p><p>フォルダの削除でunlinkDirがはしり、publicフォルダも連動させています。</p><p>フォルダ名を確定させていない状態で「新しいフォルダー」が生成され、フォルダ名を変更し確定すると、unlinkDir→addDirのイベントが発生したので「新しいフォルダー」が削除され、確定したフォルダ名のフォルダが生成されました！</p><p><br></p><p>GitHub：<a href="https://github.com/paulmillr/chokidar" target="_blank" rel="noopener noreferrer">chokidar</a></p>

<h2 id="h6478de15d3">Next.jsの実行時に画像の圧縮・生成も実行させる</h2><p>複数のnpm-scriptを実行させるために<code>npm-run-all</code>をインストール</p><pre><code>npm i npm-run-all</code></pre><h3 id="hc04b17e0a2">package.jsonのscriptを変更</h3><p>変更前</p><pre><code>"scripts": {
  "dev": "next dev",
～
}</code></pre><p>変更後</p><pre><code>"scripts": {
&nbsp;&nbsp;"dev": "npm-run-all -p dev:*",
&nbsp;&nbsp;"dev:next": "next dev",
&nbsp;&nbsp;"dev:optimize-images": "node convertImages.mjs",
～
}</code></pre><p>npm run devを実行すると両方まとめて実行してくれます。</p><p><br></p><p>📝参考：</p><p><a href="https://qiita.com/sugurutakahashi12345/items/2a17a3cdfbc4a7e5e4eb" target="_blank" rel="noopener noreferrer">npm-scripts の 順次・並列実行（npm-run-all）</a></p>

<h2 id="ha330d1bff0">無駄な処理が多かった失敗版</h2>

import fs from "fs";
import fsExtra from "fs-extra"; //ファイルがあっても削除できる
import sharp from "sharp";
import path from "path";
import chokidar from "chokidar";

//元画像と変換後画像のディレクトリ
const inputDir = "./src/images";
const outputDir = "./public/images";

//ディレクトリ・ファイル名の置換
const replaceSrcToPublic = path => path.replace(/src/g, "public");
const replacePublicToSrc = path => path.replace(/public/g, "src");
const fileRenameWebp = fileName => fileName.replace(/\.(jpg|jpeg|png)$/i, '.webp');

//画像変換処理の設定
const sharpOptions = {
  'jpg' : [
    'jpg',
    {
      quality: 75,
      progressive: true
    }
  ],
  'png' : [
    'png',
    {
      quality: 70,
    }
  ]
}

//ファイルパスをWindowsからLinux/macOSの形式に変換する関数
const convertFilePathsToUnixStyle = paths => {
  return paths.map((filePath) => {
    const extname = path.extname(filePath).toLowerCase();
    if( ['.jpg', '.jpeg', '.png', '.gif', '.svg'].includes(extname) ){
      return filePath.replace(/\\/g, "/");
    }
  });
}

const optimizeImages = async(filePaths) => {
  try {
    const inputFiles = convertFilePathsToUnixStyle(filePaths);
    for (const file of inputFiles) {
      const outputPath = replaceSrcToPublic(file);
      const convertFormat = /\.png$/i.test(file) ? sharpOptions.png : sharpOptions.jpg;
      //TODO: svgとgifはただファイルコピーしたいだけ

      await sharp(file)
        .toFormat(convertFormat[0])
        .toFile(outputPath)
        .catch(error => {
          console.error(`Error processing ${file}:`, error);
        });
      // sharpモジュールを終了してリソースを開放
      // sharp.cache(false); // キャッシュを無効化
      // sharp.simd(false); // SIMDを無効化
      // sharp.concurrency(0); // 並行処理を無効化
    }
    console.log('img conversion completed!');
  } catch (error) {
    console.error('Error converting to 圧縮:', error);
    throw error;
  }
}

const createWebpImages = async(filePaths) => {
  try {
    const beforeImageFiles = convertFilePathsToUnixStyle(filePaths);
    for (const beforeFile of beforeImageFiles) {
      const fileNameWebp = fileRenameWebp(beforeFile)
      await sharp(beforeFile)
      .webp({
        quality: 60,
        lossless: true,
      })
      .toFile(fileNameWebp)
      .catch(error => {
        console.error(`Error processing ${beforeFile}:`, error);
      });
      console.log(`create Webp -> ${fileNameWebp}`);
    }
    console.log('create WebP completed!');
  } catch (error) {
    console.error('Error creating to WebP:', error);
    throw error;
  }
}

//inputDir内の画像を圧縮する
const createOptimizeImages = (filePath) => {
  let batchFileList = [];
  let batchTimeout = null;
  const createImgPath = replaceSrcToPublic(filePath);
  const imgSrcMs = fs.statSync(filePath).birthtimeMs;
  const imgPublicMs = fs.existsSync(createImgPath) && fs.statSync(createImgPath).birthtimeMs;
  if( imgSrcMs < imgPublicMs ) return

  batchFileList.push(filePath);
  if (!batchTimeout) {
    batchTimeout = setTimeout(async () => {
      try {
        await optimizeImages(batchFileList);
      } catch (error) {
        console.error('Error optimizing images:', error);
      }
      batchFileList = [];
      batchTimeout = null;
    }, 2000);
  }
}

//inputDirのフォルダ・ファイルを削除したらoutputDirのファイルを自動で削除する
const removeFile = (filePath) => {
  const relativePath = path.relative(inputDir, filePath);
  const destFilePath = path.join(outputDir, relativePath);
  if ( fs.existsSync(destFilePath) ) {
    const stats = fs.statSync(destFilePath);
    if (stats.isDirectory()) {  //フォルダか判定
      fsExtra.removeSync(destFilePath, (err) => {
        if (err) throw err;
        console.log(`${destFilePath}を削除しました`);
      });
    } else {
      const destWebpFilePath = fileRenameWebp(destFilePath);
      fs.unlink(destFilePath, (err) => {
        if (err) throw err;
        console.log(`${destFilePath}を削除しました`);
      });
      if ( destFilePath === destWebpFilePath || !fs.existsSync(destWebpFilePath) ) return;
      fs.unlink(destWebpFilePath, (err) => {
        if (err) throw err;
        console.log(`${destWebpFilePath}を削除しました`);
      });
    }
  }
}

//inputDirにフォルダがある場合outputDirにフォルダ作成
const createAddDir = (filePath) => {
  if( fs.statSync(filePath).isFile() ) return;
  return fsExtra.ensureDirSync(replaceSrcToPublic(filePath))
}

// optimizeImgs関数を呼び出すことでファイルの監視と処理を行う関数
const watchOptimizeImgs = async () => {
  console.log('Start watching images...');

  // let batchTimeout = null;
  // let batchFileList = [];
  let batchTimeout2 = null;
  let batchFileList2 = [];

  // inputDirを監視
  chokidar.watch(inputDir).on('all', (event, filePath) => {
    switch (event) {
      case "add":
        createOptimizeImages(filePath);
        break;
      case "addDir":
        createAddDir(filePath);
        break;
      // case "unlink":
      // case "unlinkDir":
      //   removeFile(filePath);
      //   break;
      default:
        break;
    }
  });
  chokidar.watch(outputDir).on('add', (event, filePath) => {
    createWebpImages(filePath);
  })
  chokidar.watch(outputDir).on('all', (event, filePath) => {
    const createImgPath = replacePublicToSrc(filePath);
    if( event === 'add' && /\.(jpg|jpeg|png)$/i.test(createImgPath) ){
      console.log(createImgPath);
      //ファイルがあって日付が新しい場合だけwebp生成する
      if( fs.existsSync(createImgPath) && fs.statSync(filePath).birthtimeMs > fs.statSync(createImgPath).birthtimeMs ){
        batchFileList2.push(filePath);
        // 一定時間経過後にバッチ処理を実行
        if (!batchTimeout2) {
          batchTimeout2 = setTimeout(async () => {
            try {
              await createWebpImages(batchFileList2);
            } catch (error) {
              console.error('Error optimizing images:', error);
            }
            // バッチ処理用のリストをクリア
            batchFileList2 = [];
            batchTimeout2 = null;
          }, 5000); // 5秒間のディレイを設定
        }
      }
    }
    //publicにだけあるファイルはpublicから削除する
    if( event === 'add' && /\.(jpg|jpeg|png|svg|gif)$/i.test(filePath) ){
      if (!fs.existsSync(createImgPath)) {
        fs.unlink(filePath, (err) => {
          if (err) throw err;
          console.log(`${filePath}を削除しました`);
        });
        //webpも消すように処理する
      }
    }
  });
}

watchOptimizeImgs();