<?xml version="1.0" encoding="UTF-8"?><rss xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:atom="http://www.w3.org/2005/Atom" version="2.0"><channel><title><![CDATA[Cygraさんのフィード]]></title><description><![CDATA[ZennのCygraさん（@cygra）のRSSフィードです]]></description><link>https://zenn.dev/cygra</link><image><url>https://storage.googleapis.com/zenn-user-upload/avatar/109a72d48e.jpeg</url><title>Cygraさんのフィード</title><link>https://zenn.dev/cygra</link></image><generator>zenn.dev</generator><lastBuildDate>Thu, 16 Apr 2026 21:28:34 GMT</lastBuildDate><atom:link href="https://zenn.dev/cygra/feed" rel="self" type="application/rss+xml"/><language><![CDATA[ja]]></language><item><title><![CDATA[和暦と西暦を変換するための NPM パッケージを作成しました]]></title><description><![CDATA[https://www.npmjs.com/package/date-format-wareki
https://github.com/Cygra/date-format-wareki

 インストール
npm install date-format-wareki

 使い方
import { toWareki, toDate } from "date-format-wareki";

const date = new Date(1996, 10, 27);
toWareki(date); // =&gt; "平成8/11/27"
toWareki(date, { era: "narro...]]></description><link>https://zenn.dev/cygra/articles/d829914ebd60eb</link><guid isPermaLink="true">https://zenn.dev/cygra/articles/d829914ebd60eb</guid><pubDate>Thu, 20 Feb 2025 03:28:41 GMT</pubDate><enclosure url="https://res.cloudinary.com/zenn/image/upload/s--kbdCHqnv--/c_fit%2Cg_north_west%2Cl_text:notosansjp-medium.otf_55:%25E5%2592%258C%25E6%259A%25A6%25E3%2581%25A8%25E8%25A5%25BF%25E6%259A%25A6%25E3%2582%2592%25E5%25A4%2589%25E6%258F%259B%25E3%2581%2599%25E3%2582%258B%25E3%2581%259F%25E3%2582%2581%25E3%2581%25AE%2520NPM%2520%25E3%2583%2591%25E3%2583%2583%25E3%2582%25B1%25E3%2583%25BC%25E3%2582%25B8%25E3%2582%2592%25E4%25BD%259C%25E6%2588%2590%25E3%2581%2597%25E3%2581%25BE%25E3%2581%2597%25E3%2581%259F%2Cw_1010%2Cx_90%2Cy_100/g_south_west%2Cl_text:notosansjp-medium.otf_37:Cygra%2Cx_203%2Cy_121/g_south_west%2Ch_90%2Cl_fetch:aHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyLzEwOWE3MmQ0OGUuanBlZw==%2Cr_max%2Cw_90%2Cx_87%2Cy_95/v1627283836/default/og-base-w1200-v2.png?_a=BACAGSGT" length="0" type="false"/><dc:creator>Cygra</dc:creator></item><item><title><![CDATA[[Tailwind CSS]表示と編集の便利方法]]></title><description><![CDATA[
中国人です、日本語の文法が下手で申し訳ございません。コメント欄で私の間違いを指摘していただければ幸いです。

Tailwind は、最も人気がある CSS フレームワークの一つです。
しかし、Tailwind を使用すると、このような状況に遭遇することがよくあります：
&lt;div
  className={
    "relative rounded mr-2 lg:my-2 overflow-hidden text-primary w-[180px] h-[100px] text-2xl font-semibold text-center leading-[100px] bg-w...]]></description><link>https://zenn.dev/cygra/articles/9eeec2ca813797</link><guid isPermaLink="true">https://zenn.dev/cygra/articles/9eeec2ca813797</guid><pubDate>Mon, 27 Jan 2025 08:29:17 GMT</pubDate><enclosure url="https://res.cloudinary.com/zenn/image/upload/s--J-qiqlTv--/c_fit%2Cg_north_west%2Cl_text:notosansjp-medium.otf_55:%255BTailwind%2520CSS%255D%25E8%25A1%25A8%25E7%25A4%25BA%25E3%2581%25A8%25E7%25B7%25A8%25E9%259B%2586%25E3%2581%25AE%25E4%25BE%25BF%25E5%2588%25A9%25E6%2596%25B9%25E6%25B3%2595%2Cw_1010%2Cx_90%2Cy_100/g_south_west%2Cl_text:notosansjp-medium.otf_37:Cygra%2Cx_203%2Cy_121/g_south_west%2Ch_90%2Cl_fetch:aHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyLzEwOWE3MmQ0OGUuanBlZw==%2Cr_max%2Cw_90%2Cx_87%2Cy_95/v1627283836/default/og-base-w1200-v2.png?_a=BACAGSGT" length="0" type="false"/><dc:creator>Cygra</dc:creator></item><item><title><![CDATA[[Tailwind CSS]テキストフェードイン効果を実現]]></title><description><![CDATA[
中国人です、日本語の文法が下手で申し訳ございません。コメント欄で私の間違いを指摘していただければ幸いです。


 [Tailwind CSS + IntersectionObserver] フェードイン 効果

Apple の公式 Web サイトにあるようなテキストのフェードイン効果を実現するには、IntersectionObserver を使用して、テキストがウィンドウに入ったかどうかを判断します。
テキストがウィンドウに入ったら、opacity 　と　 translate-y 　を変化する。
export const Comp = () =&gt; {
  const ref = ...]]></description><link>https://zenn.dev/cygra/articles/3bd10bf5d2b150</link><guid isPermaLink="true">https://zenn.dev/cygra/articles/3bd10bf5d2b150</guid><pubDate>Thu, 23 Jan 2025 05:41:57 GMT</pubDate><enclosure url="https://res.cloudinary.com/zenn/image/upload/s--kVVll_t2--/c_fit%2Cg_north_west%2Cl_text:notosansjp-medium.otf_55:%255BTailwind%2520CSS%255D%25E3%2583%2586%25E3%2582%25AD%25E3%2582%25B9%25E3%2583%2588%25E3%2583%2595%25E3%2582%25A7%25E3%2583%25BC%25E3%2583%2589%25E3%2582%25A4%25E3%2583%25B3%25E5%258A%25B9%25E6%259E%259C%25E3%2582%2592%25E5%25AE%259F%25E7%258F%25BE%2Cw_1010%2Cx_90%2Cy_100/g_south_west%2Cl_text:notosansjp-medium.otf_37:Cygra%2Cx_203%2Cy_121/g_south_west%2Ch_90%2Cl_fetch:aHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyLzEwOWE3MmQ0OGUuanBlZw==%2Cr_max%2Cw_90%2Cx_87%2Cy_95/v1627283836/default/og-base-w1200-v2.png?_a=BACAGSGT" length="0" type="false"/><dc:creator>Cygra</dc:creator></item><item><title><![CDATA[[Next.js] Mediapipe + カメラで手のジェスチャー認識スケッチパッド]]></title><description><![CDATA[Demo Link: https://cygra.github.io/hand-gesture-whiteboard/
https://github.com/Cygra/hand-gesture-whiteboard
参考：https://ai.google.dev/edge/mediapipe/solutions/vision/gesture_recognizer

 環境を構築し、Mediapipeをインストールする
https://www.npmjs.com/package/@mediapipe/tasks-vision
npx create-next-app@latest

np...]]></description><link>https://zenn.dev/cygra/articles/143cdf306abb29</link><guid isPermaLink="true">https://zenn.dev/cygra/articles/143cdf306abb29</guid><pubDate>Tue, 21 Jan 2025 09:54:40 GMT</pubDate><enclosure url="https://res.cloudinary.com/zenn/image/upload/s--gFJHQfQo--/c_fit%2Cg_north_west%2Cl_text:notosansjp-medium.otf_55:%255BNext.js%255D%2520Mediapipe%2520%252B%2520%25E3%2582%25AB%25E3%2583%25A1%25E3%2583%25A9%25E3%2581%25A7%25E6%2589%258B%25E3%2581%25AE%25E3%2582%25B8%25E3%2582%25A7%25E3%2582%25B9%25E3%2583%2581%25E3%2583%25A3%25E3%2583%25BC%25E8%25AA%258D%25E8%25AD%2598%25E3%2582%25B9%25E3%2582%25B1%25E3%2583%2583%25E3%2583%2581%25E3%2583%2591%25E3%2583%2583%25E3%2583%2589%2Cw_1010%2Cx_90%2Cy_100/g_south_west%2Cl_text:notosansjp-medium.otf_37:Cygra%2Cx_203%2Cy_121/g_south_west%2Ch_90%2Cl_fetch:aHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyLzEwOWE3MmQ0OGUuanBlZw==%2Cr_max%2Cw_90%2Cx_87%2Cy_95/v1627283836/default/og-base-w1200-v2.png?_a=BACAGSGT" length="0" type="false"/><dc:creator>Cygra</dc:creator></item></channel></rss>