<?xml version="1.0" encoding="utf-8"?>
<rss version="2.0">
    <channel>
        <title>stin's Blog</title>
        <link>https://blog.stin.ink/</link>
        <description>すてぃんの個人ブログです。技術的なこと、日常のこと、雑記など色々書きます。</description>
        <lastBuildDate>Wed, 15 Apr 2026 06:15:34 GMT</lastBuildDate>
        <docs>https://validator.w3.org/feed/docs/rss2.html</docs>
        <generator>https://github.com/jpmonette/feed</generator>
        <language>ja</language>
        <image>
            <title>stin's Blog</title>
            <url>https://blog.stin.ink/images/opengraph-image.png</url>
            <link>https://blog.stin.ink/</link>
        </image>
        <copyright>All right reserved 2026, stin_factory</copyright>
        <item>
            <title><![CDATA[Claude Code で Shiki のテーマを見比べられるサイトを作った (Jotai もあるよ)]]></title>
            <link>https://blog.stin.ink/articles/shiki-theme-viewer-with-claude-code-and-jotai</link>
            <guid>https://blog.stin.ink/articles/shiki-theme-viewer-with-claude-code-and-jotai</guid>
            <pubDate>Sun, 18 Jan 2026 05:55:25 GMT</pubDate>
            <description><![CDATA[Shiki というコードシンタックスハイライターライブラリがあります。 https://shiki.style/ Shiki は多くのテーマバリエーションを提供しています。それらを並べて見比べたいと思い、Claude Code に作ってもらいました。 https://y-hiraoka.github.io/shiki-...]]></description>
            <enclosure length="0" type="image/png" url="https://blog.stin.ink/articles/shiki-theme-viewer-with-claude-code-and-jotai/opengraph-image"/>
        </item>
        <item>
            <title><![CDATA[2026年の目標]]></title>
            <link>https://blog.stin.ink/articles/new-years-resolutions-for-2026</link>
            <guid>https://blog.stin.ink/articles/new-years-resolutions-for-2026</guid>
            <pubDate>Sun, 04 Jan 2026 14:33:21 GMT</pubDate>
            <description><![CDATA[あけましておめでとうございました。 2025年の振り返りと2026年の目標を立てていきましょう。 2025年の振り返り 2025年の目標は以下です。 https://blog.stin.ink/articles/new-years-resolutions-for-2025 技術ブログを 12 記事以上書く(媒体は問わな...]]></description>
            <enclosure length="0" type="image/png" url="https://blog.stin.ink/articles/new-years-resolutions-for-2026/opengraph-image"/>
        </item>
        <item>
            <title><![CDATA[ts-rest や他色々を試すために Todo アプリを作る]]></title>
            <link>https://blog.stin.ink/articles/ts-rest-todo-app</link>
            <guid>https://blog.stin.ink/articles/ts-rest-todo-app</guid>
            <pubDate>Sat, 08 Nov 2025 05:57:49 GMT</pubDate>
            <description><![CDATA[ts-rest という RPC ライブラリを見かけて気になったので、実際に Todo アプリを作って試してみました。 ts-rest とは https://ts-rest.com/ ts-rest は、REST API を型安全に実装するためのライブラリです。サーバーサイドだけでなく、REST API にアクセスするク...]]></description>
            <enclosure length="0" type="image/png" url="https://blog.stin.ink/articles/ts-rest-todo-app/opengraph-image"/>
        </item>
        <item>
            <title><![CDATA[Hono Conf 2025 に参加してきたので感想を書く]]></title>
            <link>https://blog.stin.ink/articles/hono-conf-2025</link>
            <guid>https://blog.stin.ink/articles/hono-conf-2025</guid>
            <pubDate>Sun, 19 Oct 2025 03:53:28 GMT</pubDate>
            <description><![CDATA[2025年10月18日に開催された Hono Conf に現地参加したので、自分が見たセッションについて覚えている限りで感想を書きます。 https://honoconf.dev/2025 以下、「発表タイトル by 発表者名」で区切って書いていきます。発表資料が見つかったものについてはリンクも貼っておきます。 令和最...]]></description>
            <enclosure length="0" type="image/png" url="https://blog.stin.ink/articles/hono-conf-2025/opengraph-image"/>
        </item>
        <item>
            <title><![CDATA[Next.js on Cloudflare Workers (OpenNext) で Drizzle + D1 を使ったユニットテストを書く]]></title>
            <link>https://blog.stin.ink/articles/cloudflare-d1-nextjs-vitest</link>
            <guid>https://blog.stin.ink/articles/cloudflare-d1-nextjs-vitest</guid>
            <pubDate>Tue, 23 Sep 2025 05:50:14 GMT</pubDate>
            <description><![CDATA[OpenNext は Next.js アプリケーションを Vercel 以外に簡単にデプロイするためのツールです。Cloudflare Workers をサポートしています。 Cloudflare 自体も OpenNext によるデプロイを推奨しており、次のコマンドによって OpenNext による Next.js ア...]]></description>
            <enclosure length="0" type="image/png" url="https://blog.stin.ink/articles/cloudflare-d1-nextjs-vitest/opengraph-image"/>
        </item>
        <item>
            <title><![CDATA[Drizzle ORM を使った書き捨てスクリプトから Cloudflare D1 にアクセスしたい]]></title>
            <link>https://blog.stin.ink/articles/drizzle-cloudflare-remote-d1</link>
            <guid>https://blog.stin.ink/articles/drizzle-cloudflare-remote-d1</guid>
            <pubDate>Mon, 08 Sep 2025 12:32:47 GMT</pubDate>
            <description><![CDATA[Cloudflare D1 (以下 D1) は Cloudflare のリレーショナルデータベースサービスです。実態はリモートにある SQLite です。 Drizzle ORM は TypeScript で各種データベースに接続するデータベースクライアントで ORM です。テーブルスキーマ管理と型安全性に優れています...]]></description>
            <enclosure length="0" type="image/png" url="https://blog.stin.ink/articles/drizzle-cloudflare-remote-d1/opengraph-image"/>
        </item>
        <item>
            <title><![CDATA[resend-local というツールを作った]]></title>
            <link>https://blog.stin.ink/articles/resend-local</link>
            <guid>https://blog.stin.ink/articles/resend-local</guid>
            <pubDate>Thu, 05 Jun 2025 15:12:49 GMT</pubDate>
            <description><![CDATA[Resend というメール送信サービスがあります。 そのAPIエミュレーターをローカルで起動する npm パッケージを作りました。次のコマンドでサーバー http://localhost:8005 で起動します。 Resend SDK は Base URL を環境変数経由で変更できます。.envなどで次のように指定すれ...]]></description>
            <enclosure length="0" type="image/png" url="https://blog.stin.ink/articles/resend-local/opengraph-image"/>
        </item>
        <item>
            <title><![CDATA[2025年の目標]]></title>
            <link>https://blog.stin.ink/articles/new-years-resolutions-for-2025</link>
            <guid>https://blog.stin.ink/articles/new-years-resolutions-for-2025</guid>
            <pubDate>Mon, 06 Jan 2025 16:39:52 GMT</pubDate>
            <description><![CDATA[あけましておめでとうございました。すでに 6 日が経過してしまいましたが、2024年の振り返りと2025年の目標を立てます。 2024年の振り返り 2024年の目標は以下の通りでした。 https://blog.stin.ink/articles/new-years-resolutions-for-2024 技術ブログ...]]></description>
            <enclosure length="0" type="image/png" url="https://blog.stin.ink/articles/new-years-resolutions-for-2025/opengraph-image"/>
        </item>
        <item>
            <title><![CDATA[ハロー！プロジェクトファンクラブのデジタル会員証があまりに杜撰なので、正しい実装を考える]]></title>
            <link>https://blog.stin.ink/articles/fc-membership-card</link>
            <guid>https://blog.stin.ink/articles/fc-membership-card</guid>
            <pubDate>Wed, 01 Jan 2025 13:51:55 GMT</pubDate>
            <description><![CDATA[ハロー！プロジェクトのファンクラブ(以下FC)サイトが2024年11月にリニューアルされました。 https://www.upfc.jp/helloproject/news\_detail.php?@uid=s32dbjT7VpPSK55H リニューアル内容のひとつにデジタル会員証があります。 今までプラスチックカード...]]></description>
            <enclosure length="0" type="image/png" url="https://blog.stin.ink/articles/fc-membership-card/opengraph-image"/>
        </item>
        <item>
            <title><![CDATA[指定したWebページを動く状態でクローンする方法]]></title>
            <link>https://blog.stin.ink/articles/clone-web-page</link>
            <guid>https://blog.stin.ink/articles/clone-web-page</guid>
            <pubDate>Sun, 29 Dec 2024 10:01:15 GMT</pubDate>
            <description><![CDATA[ふと、指定したURLのWebページをクローンして別の環境で再現する方法がないかと考えました。 HTMLとそれが参照するCSS, JavaScript, 画像ファイルなどをダウンロードして保存しておき、静的ファイルとして配信すれば同じWebページを再現できるはずです。 wget を使う wgetコマンドを使えば、HTML...]]></description>
            <enclosure length="0" type="image/png" url="https://blog.stin.ink/articles/clone-web-page/opengraph-image"/>
        </item>
        <item>
            <title><![CDATA[Honoの捉え方、またはNext.jsとの組み合わせ方]]></title>
            <link>https://blog.stin.ink/articles/hono-nextjs-and-web-standard</link>
            <guid>https://blog.stin.ink/articles/hono-nextjs-and-web-standard</guid>
            <pubDate>Mon, 16 Dec 2024 15:22:54 GMT</pubDate>
            <description><![CDATA[この記事は「Hono Advent Calendar 2024 シリーズ 2」17日目の記事です。 https://qiita.com/advent-calendar/2024/hono HonoというWebフレームワークがあります。Express.jsのような書き方でWebアプリケーションを作れるものです。 Hono...]]></description>
            <enclosure length="0" type="image/png" url="https://blog.stin.ink/articles/hono-nextjs-and-web-standard/opengraph-image"/>
        </item>
        <item>
            <title><![CDATA[記事をPicture-in-Pictureで読めるようにしてみた]]></title>
            <link>https://blog.stin.ink/articles/article-in-picture-in-picture</link>
            <guid>https://blog.stin.ink/articles/article-in-picture-in-picture</guid>
            <pubDate>Wed, 27 Nov 2024 15:29:46 GMT</pubDate>
            <description><![CDATA[Document Picture-in-Picture APIというWeb APIがあります。まだブラウザの実装が限定的ですが、Chromeなら116から使えるようです。 https://developer.mozilla.org/en-US/docs/Web/API/Document\_Picture-in-Pict...]]></description>
            <enclosure length="0" type="image/png" url="https://blog.stin.ink/articles/article-in-picture-in-picture/opengraph-image"/>
        </item>
        <item>
            <title><![CDATA[Next.js 15にアップデートした]]></title>
            <link>https://blog.stin.ink/articles/update-nextjs-to-15</link>
            <guid>https://blog.stin.ink/articles/update-nextjs-to-15</guid>
            <pubDate>Sat, 02 Nov 2024 13:41:02 GMT</pubDate>
            <description><![CDATA[このサイトで使っているNext.jsをv15にアップデートしました。 所詮ブログサイトなのでほとんど大きな変更はないですが、変更した内容を残しておきます。 内容 パッケージのアップデート 使っているNext.js関連のパッケージを一気にアップデートします。 注意点は、Next.js自体はv15が正式リリースされています...]]></description>
            <enclosure length="0" type="image/png" url="https://blog.stin.ink/articles/update-nextjs-to-15/opengraph-image"/>
        </item>
        <item>
            <title><![CDATA[Rust始めてみた。JSONフォーマッターを作ってみた]]></title>
            <link>https://blog.stin.ink/articles/rust-json-formatter-cli</link>
            <guid>https://blog.stin.ink/articles/rust-json-formatter-cli</guid>
            <pubDate>Mon, 14 Oct 2024 17:53:47 GMT</pubDate>
            <description><![CDATA[唐突にRustを使ってみたいと思ったので勉強を始めてみました。 始めた理由 始めてみたかった理由は色々あります。 まずはやはりフロントエンド開発ツールが色々とRustで実装されることです。VercelはTurborepoとTurbopackをRustで実装していますね。JavaScriptコンパイラのSWCもRustで...]]></description>
            <enclosure length="0" type="image/png" url="https://blog.stin.ink/articles/rust-json-formatter-cli/opengraph-image"/>
        </item>
        <item>
            <title><![CDATA[React useで非同期処理を簡単に扱う]]></title>
            <link>https://blog.stin.ink/articles/use-react-use-on-lz-string-vs-compression-stream</link>
            <guid>https://blog.stin.ink/articles/use-react-use-on-lz-string-vs-compression-stream</guid>
            <pubDate>Sat, 28 Sep 2024 05:32:04 GMT</pubDate>
            <description><![CDATA[先日 続・URLシェアを支える技術 CompressionStream という記事をZennに投稿しました。 この記事のためにlz-stringとCompressionStreamの圧縮率を比較できるサイト(以下比較サイト)をVite+Reactで作りました。 https://stinbox.github.io/lz-...]]></description>
            <enclosure length="0" type="image/png" url="https://blog.stin.ink/articles/use-react-use-on-lz-string-vs-compression-stream/opengraph-image"/>
        </item>
        <item>
            <title><![CDATA[React.FCを使うよ、理に適っているからね]]></title>
            <link>https://blog.stin.ink/articles/i-do-use-react-fc-type</link>
            <guid>https://blog.stin.ink/articles/i-do-use-react-fc-type</guid>
            <pubDate>Sun, 01 Sep 2024 13:11:24 GMT</pubDate>
            <description><![CDATA[唐突に、React.FCの是非についてポジションを示そうと思ったので書きます。積極的に使う派閥です。 React.FC vs Normal Function Reactで関数コンポーネントを宣言するとき、TypeScriptの型の付け方として大きく次のような２つの書き方があります。 React.FCを使うパターン コン...]]></description>
            <enclosure length="0" type="image/png" url="https://blog.stin.ink/articles/i-do-use-react-fc-type/opengraph-image"/>
        </item>
        <item>
            <title><![CDATA[viteがプラグインなしでできることを探る]]></title>
            <link>https://blog.stin.ink/articles/vite-without-plugins</link>
            <guid>https://blog.stin.ink/articles/vite-without-plugins</guid>
            <pubDate>Sun, 04 Aug 2024 07:44:18 GMT</pubDate>
            <description><![CDATA[pluginを使わずにviteだけで始めてみることで理解が深まったらいいと思い、やってみる。 セットアップ 適当なディレクトリ内で、git初期化してnpm初期化してviteとTypeScriptをインストールする。 package.jsonのtypeはmoduleにして、scriptsにnpm run buildを追加...]]></description>
            <enclosure length="0" type="image/png" url="https://blog.stin.ink/articles/vite-without-plugins/opengraph-image"/>
        </item>
        <item>
            <title><![CDATA[真にチラつかないダークモードをついに実現したぞ。実現方法と気付きを書く]]></title>
            <link>https://blog.stin.ink/articles/how-to-implement-a-perfect-dark-mode</link>
            <guid>https://blog.stin.ink/articles/how-to-implement-a-perfect-dark-mode</guid>
            <pubDate>Sun, 14 Jul 2024 05:36:21 GMT</pubDate>
            <description><![CDATA[このサイトはダークモードに対応しています。なぜならダークモードは基本的人権だからです(要出典)。 しばらく、サイトに訪問した直後ライトモードとダークモードが切り替わってチラつく現象が発生していました。これを改善したので、実装方法と気付いたことを残しておきます。 ダークモードの実装方法 一般に、ダークモードの実装方法は3...]]></description>
            <enclosure length="0" type="image/png" url="https://blog.stin.ink/articles/how-to-implement-a-perfect-dark-mode/opengraph-image"/>
        </item>
        <item>
            <title><![CDATA[Remix を Cloudflare Pages にデプロイするまでやってみる]]></title>
            <link>https://blog.stin.ink/articles/remix-on-cloudflare-pages-tutorial</link>
            <guid>https://blog.stin.ink/articles/remix-on-cloudflare-pages-tutorial</guid>
            <pubDate>Tue, 09 Apr 2024 15:24:44 GMT</pubDate>
            <description><![CDATA[Remix に興味を持ったのでドキュメントを読み漁ってだいたい読み切ったので、練習がてら Node.js 向け Remix テンプレートを修正して Cloudflare Pages にデプロイする。 create-remix という npx コマンドでさっとテンプレートを作る。プロジェクト名は remix-on-clo...]]></description>
            <enclosure length="0" type="image/png" url="https://blog.stin.ink/articles/remix-on-cloudflare-pages-tutorial/opengraph-image"/>
        </item>
        <item>
            <title><![CDATA[2024年の目標]]></title>
            <link>https://blog.stin.ink/articles/new-years-resolutions-for-2024</link>
            <guid>https://blog.stin.ink/articles/new-years-resolutions-for-2024</guid>
            <pubDate>Fri, 05 Jan 2024 14:10:24 GMT</pubDate>
            <description><![CDATA[あけましておめでとうございました。すでに 5 日が経過してしまいましたが、2024 年の目標を立てます。 技術ブログを 20 記事以上書く(媒体は問わない) 個人開発アプリを 1 つリリースする 引っ越す 加えて、達成する目標とはちょっと違いますが、行動指針として「思い立ったらすぐに行動する」を掲げます。 2023 年...]]></description>
            <enclosure length="0" type="image/png" url="https://blog.stin.ink/articles/new-years-resolutions-for-2024/opengraph-image"/>
        </item>
        <item>
            <title><![CDATA[react-markdown をやめて remark から自力でレンダリングするようにした話]]></title>
            <link>https://blog.stin.ink/articles/replace-react-markdown-with-remark</link>
            <guid>https://blog.stin.ink/articles/replace-react-markdown-with-remark</guid>
            <pubDate>Thu, 28 Dec 2023 07:27:31 GMT</pubDate>
            <description><![CDATA[Intro このブログサイトの記事ページではこれまで react-markdown というライブラリでマークダウンを HTML に変換して表示していました。この度、react-markdown を剥がして remark を直接使って記事をレンダリングするように変更しました。 前回の記事で Playwright で VR...]]></description>
            <enclosure length="0" type="image/png" url="https://blog.stin.ink/articles/replace-react-markdown-with-remark/opengraph-image"/>
        </item>
        <item>
            <title><![CDATA[ブログに Playwright で VRT を導入した]]></title>
            <link>https://blog.stin.ink/articles/add-vrt-with-playwright</link>
            <guid>https://blog.stin.ink/articles/add-vrt-with-playwright</guid>
            <pubDate>Mon, 25 Dec 2023 14:51:59 GMT</pubDate>
            <description><![CDATA[Intro 記事ページのスタイルを維持したまま内部実装に大きめの変更を加えたかったので、Visual Regression Test(VRT)を導入しました。 といってもあまりに簡易的な内容です。CI で自動化とか Chromatic とか大規模なことはしていません。ただローカルPCで Playwright を動かして...]]></description>
            <enclosure length="0" type="image/png" url="https://blog.stin.ink/articles/add-vrt-with-playwright/opengraph-image"/>
        </item>
        <item>
            <title><![CDATA[ポケモンBGMループ再生サイトの音声ファイルをキャッシュするために色々調べた]]></title>
            <link>https://blog.stin.ink/articles/pokemon-soundlibrary-cache-strategy</link>
            <guid>https://blog.stin.ink/articles/pokemon-soundlibrary-cache-strategy</guid>
            <pubDate>Sat, 16 Dec 2023 07:39:39 GMT</pubDate>
            <description><![CDATA[Intro 以前の記事でポケモンBGMループ再生サイトを Cloudflare Pages に載せ替えた話をつらつらと書きました。 https://blog.stin.ink/articles/pokemon-soundlibrary-on-cloudflare この記事が多くの方にご覧頂けて非常に嬉しい限りです。 そ...]]></description>
            <enclosure length="0" type="image/png" url="https://blog.stin.ink/articles/pokemon-soundlibrary-cache-strategy/opengraph-image"/>
        </item>
        <item>
            <title><![CDATA[ポケモンBGMループ再生サイトを Cloudflare Pages に載せ替えた]]></title>
            <link>https://blog.stin.ink/articles/pokemon-soundlibrary-on-cloudflare</link>
            <guid>https://blog.stin.ink/articles/pokemon-soundlibrary-on-cloudflare</guid>
            <pubDate>Sun, 10 Dec 2023 06:21:26 GMT</pubDate>
            <description><![CDATA[Intro https://pokemon-soundlibrary.stin.ink/ このポケモンのBGMを無限ループで再生できる Next.js 製サイトは、これまで Vercel にデプロイしていました。しかし Vercel にデプロイすることはいくつか問題点を抱えていました。 大量の音声ファイルを publi...]]></description>
            <enclosure length="0" type="image/png" url="https://blog.stin.ink/articles/pokemon-soundlibrary-on-cloudflare/opengraph-image"/>
        </item>
        <item>
            <title><![CDATA[Next.js App Router の Static Exports の可能性を探るためにブログでやってみた話]]></title>
            <link>https://blog.stin.ink/articles/static-exports-with-nextjs-app-router</link>
            <guid>https://blog.stin.ink/articles/static-exports-with-nextjs-app-router</guid>
            <pubDate>Mon, 04 Dec 2023 12:55:35 GMT</pubDate>
            <description><![CDATA[Next.js Advent Calendar 2023 の12月4日の記事です。 https://qiita.com/advent-calendar/2023/next Static Exports とは Next.js の Static Exports は Next.js のビルド結果として完全に静的な HTML,...]]></description>
            <enclosure length="0" type="image/png" url="https://blog.stin.ink/articles/static-exports-with-nextjs-app-router/opengraph-image"/>
        </item>
        <item>
            <title><![CDATA[stin.ink を Google Domains から Cloudflare Registrar に移管した]]></title>
            <link>https://blog.stin.ink/articles/sitn-ink-from-google-to-cloudflare</link>
            <guid>https://blog.stin.ink/articles/sitn-ink-from-google-to-cloudflare</guid>
            <pubDate>Sat, 02 Dec 2023 16:08:22 GMT</pubDate>
            <description><![CDATA[Cloudflare Registrar に移管した このブログもサブドメインとして使用されている stin.ink は、僕が持つ唯一のドメインです。Google Domains で取得して、色々サブドメインを生やして使っています。 半年ほど前ですが、Google Domains がサービスを終了して事業譲渡されること...]]></description>
            <enclosure length="0" type="image/png" url="https://blog.stin.ink/articles/sitn-ink-from-google-to-cloudflare/opengraph-image"/>
        </item>
        <item>
            <title><![CDATA[個人ブログ開発でとても便利な Contentlayer を導入してみた]]></title>
            <link>https://blog.stin.ink/articles/introduce-contentlayer</link>
            <guid>https://blog.stin.ink/articles/introduce-contentlayer</guid>
            <pubDate>Mon, 27 Nov 2023 14:10:08 GMT</pubDate>
            <description><![CDATA[またまた自分のブログサイトを改修した報告です。自分のブログサイトを改修してはそれをネタに記事を書くのを繰り返していて、なんか面白いですね。 このブログはソースコードと同じリポジトリに Markdown 記事を保存しています。サイト自体は Next.js で、Markdown はただの .md ファイルです。 これまで気...]]></description>
            <enclosure length="0" type="image/png" url="https://blog.stin.ink/articles/introduce-contentlayer/opengraph-image"/>
        </item>
        <item>
            <title><![CDATA[Chakra UI は "use client" なしで使えるようになった「だけ」]]></title>
            <link>https://blog.stin.ink/articles/chakraui-is-still-client-components</link>
            <guid>https://blog.stin.ink/articles/chakraui-is-still-client-components</guid>
            <pubDate>Thu, 23 Nov 2023 03:18:56 GMT</pubDate>
            <description><![CDATA[Chakra UI が自分で "use client" を付けている 最近 Chakra UI が "use client" を付けずとも Next.js の App Router で使えるようになったと話題になりました。しかし調べてみると、どうやら JS 非依存なコードに書き換えられた訳ではなく、Chakra UI ...]]></description>
            <enclosure length="0" type="image/png" url="https://blog.stin.ink/articles/chakraui-is-still-client-components/opengraph-image"/>
        </item>
        <item>
            <title><![CDATA[ブログの記事ページに Table of Contents を設置したので実装方法などを書く]]></title>
            <link>https://blog.stin.ink/articles/implement-toc</link>
            <guid>https://blog.stin.ink/articles/implement-toc</guid>
            <pubDate>Sat, 18 Nov 2023 13:39:20 GMT</pubDate>
            <description><![CDATA[画面幅 991px 以上で閲覧すると、記事ページの右側に目次リンクが表示されるように実装しました。 目次生成ライブラリ tocbot tocbot というライブラリを使用しました。 https://tscanlin.github.io/tocbot 今までこちらのライブラリの存在を知らずに、どうやって実装しようか迷子に...]]></description>
            <enclosure length="0" type="image/png" url="https://blog.stin.ink/articles/implement-toc/opengraph-image"/>
        </item>
        <item>
            <title><![CDATA[ポケモンBGMループ再生サイトをアップデートした]]></title>
            <link>https://blog.stin.ink/articles/update-pokemon-soundlibrary</link>
            <guid>https://blog.stin.ink/articles/update-pokemon-soundlibrary</guid>
            <pubDate>Mon, 13 Nov 2023 16:39:44 GMT</pubDate>
            <description><![CDATA[https://pokemon-soundlibrary.stin.ink ポケモン公式が公開している「ポケットモンスター ダイヤモンド・パール」の BGM をループ再生できるようにしたサイトを以前作りました。その後公式から「ポケットモンスター 赤・緑」の BGM も配布されたので、追加分も再生できるようにアップデート...]]></description>
            <enclosure length="0" type="image/png" url="https://blog.stin.ink/articles/update-pokemon-soundlibrary/opengraph-image"/>
        </item>
        <item>
            <title><![CDATA[ブログのデザインを刷新した]]></title>
            <link>https://blog.stin.ink/articles/stin-blog-updated-2023</link>
            <guid>https://blog.stin.ink/articles/stin-blog-updated-2023</guid>
            <pubDate>Sun, 05 Nov 2023 13:50:14 GMT</pubDate>
            <description><![CDATA[このサイトのデザインを刷新しました（1 年半ぶり 2 回目）。 変更した理由 最近 Vercel のエンジニアが開発している Nextra という静的サイトジェネレーターをよく見かけるようになりました(出来たばかりのツールではなく、自分が意識的に見るようになったという意味)。このツールで実装できるサイトのダークモードデ...]]></description>
            <enclosure length="0" type="image/png" url="https://blog.stin.ink/articles/stin-blog-updated-2023/opengraph-image"/>
        </item>
        <item>
            <title><![CDATA[localStorage に同期する React State を作るカスタムフック]]></title>
            <link>https://blog.stin.ink/articles/react-use-local-storage</link>
            <guid>https://blog.stin.ink/articles/react-use-local-storage</guid>
            <pubDate>Sat, 27 May 2023 15:28:41 GMT</pubDate>
            <description><![CDATA[React の useState と似た使い方で localStorage に保存されるカスタムフック useLocalStorage の実装を紹介します。このブログサイトのソースコードで使用しています。 react-use に同じ目的同じ名前のカスタムフックが入っていることは知っていますが、インターフェイスも内部実装...]]></description>
            <enclosure length="0" type="image/png" url="https://blog.stin.ink/articles/react-use-local-storage/opengraph-image"/>
        </item>
        <item>
            <title><![CDATA[ブログサイトを Next.js App Router に移行したので学びを書く]]></title>
            <link>https://blog.stin.ink/articles/update-blog-site-with-next-app-router</link>
            <guid>https://blog.stin.ink/articles/update-blog-site-with-next-app-router</guid>
            <pubDate>Sun, 14 May 2023 16:55:21 GMT</pubDate>
            <description><![CDATA[このサイトを Next.js App Router で実装し直しました。Server Components が扱えてなんか便利なやつです。 移行にあたって学んだことや App Router の嬉しいポイントなどを書いておきます。 スタイリングメソッドの移行 このブログサイトのスタイリングは vanilla-extrac...]]></description>
            <enclosure length="0" type="image/png" url="https://blog.stin.ink/articles/update-blog-site-with-next-app-router/opengraph-image"/>
        </item>
        <item>
            <title><![CDATA[個人ブログから Chakra UI を剥がして vanilla-extract を入れた(剥がした理由編)]]></title>
            <link>https://blog.stin.ink/articles/replace-chakra-ui-with-vanilla-extract</link>
            <guid>https://blog.stin.ink/articles/replace-chakra-ui-with-vanilla-extract</guid>
            <pubDate>Mon, 30 Jan 2023 15:32:54 GMT</pubDate>
            <description><![CDATA[すてぃんのブログから Chakra UI を剥がして vanilla-extract を導入しました。見た目はほとんど変わっていませんが、Chakra UI でスタイリングされていたものをすべて vanilla-extract で 1 から作り直しました。 ライブラリの変更理由は以下の通り。 最近 vanilla-ex...]]></description>
            <enclosure length="0" type="image/png" url="https://blog.stin.ink/articles/replace-chakra-ui-with-vanilla-extract/opengraph-image"/>
        </item>
        <item>
            <title><![CDATA[2022 年振り返りを書き散らし]]></title>
            <link>https://blog.stin.ink/articles/year-end-party-2022</link>
            <guid>https://blog.stin.ink/articles/year-end-party-2022</guid>
            <pubDate>Sat, 31 Dec 2022 13:57:04 GMT</pubDate>
            <description><![CDATA[Hello! Project Year-End Party 2022 〜GOOD BYE & HELLO ! 〜参戦帰りの電車内で暇だったので書き散らす。 生活スタイル 2022 年の前半はアパートの隣の部屋の物音が気になりすぎてメンタルを壊しかけた。自分が過敏なだけかもしれないとメンタルクリニック的なところにも行くか...]]></description>
            <enclosure length="0" type="image/png" url="https://blog.stin.ink/articles/year-end-party-2022/opengraph-image"/>
        </item>
        <item>
            <title><![CDATA[@vercel/og を使ってブログに動的 og:image 生成を実装した]]></title>
            <link>https://blog.stin.ink/articles/add-vercel-og</link>
            <guid>https://blog.stin.ink/articles/add-vercel-og</guid>
            <pubDate>Fri, 14 Oct 2022 17:32:29 GMT</pubDate>
            <description><![CDATA[Vercel で og:image の動的生成するなら一択 先日 Vercel から HTML\&CSS で画像を生成できるライブラリ @vercel/og が発表されました。 https://vercel.com/blog/introducing-vercel-og-image-generation-fast-dyn...]]></description>
            <enclosure length="0" type="image/png" url="https://blog.stin.ink/articles/add-vercel-og/opengraph-image"/>
        </item>
        <item>
            <title><![CDATA[Firebase Auth, Firestore, Functions for Firebase でサクッと管理者権限を割り振る]]></title>
            <link>https://blog.stin.ink/articles/assign-admin-right-to-firebase-user</link>
            <guid>https://blog.stin.ink/articles/assign-admin-right-to-firebase-user</guid>
            <pubDate>Mon, 10 Oct 2022 14:46:35 GMT</pubDate>
            <description><![CDATA[Firebase のユーザーに個別に権限を割り振りたい要件は多そう。すでに似たような記事はたくさんありますが、自分も実装方法を調べたので文章にしておきます。 実装イメージ Firebase Auth のカスタムクレームを使用します。Firebase ユーザーオブジェクトに独自のプロパティを生やすことができる機能です。 ...]]></description>
            <enclosure length="0" type="image/png" url="https://blog.stin.ink/articles/assign-admin-right-to-firebase-user/opengraph-image"/>
        </item>
        <item>
            <title><![CDATA[React + TypeScript 用の eslint セットアップメモ書き]]></title>
            <link>https://blog.stin.ink/articles/eslint-setup-for-react-typescript</link>
            <guid>https://blog.stin.ink/articles/eslint-setup-for-react-typescript</guid>
            <pubDate>Wed, 13 Jul 2022 15:23:30 GMT</pubDate>
            <description><![CDATA[Vite で立ち上げた React + TypeScript プロジェクトには eslint のセットアップはされていない。プライベートでちょっとライブラリを試すみたいなケースでしか Vite を使っていなかったので eslint なしで作業していたが、やっぱり useEffect の依存配列の渡し漏れをして混乱するこ...]]></description>
            <enclosure length="0" type="image/png" url="https://blog.stin.ink/articles/eslint-setup-for-react-typescript/opengraph-image"/>
        </item>
        <item>
            <title><![CDATA[React でキーボードショートカットを設定するためのカスタムフックを実装する]]></title>
            <link>https://blog.stin.ink/articles/react-hooks-keybind</link>
            <guid>https://blog.stin.ink/articles/react-hooks-keybind</guid>
            <pubDate>Sun, 19 Jun 2022 07:40:51 GMT</pubDate>
            <description><![CDATA[以前、『ポケットモンスターダイヤモンド・パール』の BGM をループ再生できる Web サイトを作成しました。 https://dp-soundlibrary.stin.ink/ この Web サイトの実装については過去に Zenn に投稿しているのでそちらも御覧ください。 https://zenn.dev/stin/...]]></description>
            <enclosure length="0" type="image/png" url="https://blog.stin.ink/articles/react-hooks-keybind/opengraph-image"/>
        </item>
        <item>
            <title><![CDATA[WebSocket を使ってみたくて簡単なチャットアプリを作って Google Cloud Run にデプロイしてみる]]></title>
            <link>https://blog.stin.ink/articles/build-chat-app-with-websocket</link>
            <guid>https://blog.stin.ink/articles/build-chat-app-with-websocket</guid>
            <pubDate>Sun, 12 Jun 2022 04:41:36 GMT</pubDate>
            <description><![CDATA[WebSocket でリアルタイム通信したいんじゃ WebSocket 通信を使ってみたいので調べた学習ノート。Node.js 用ライブラリの ws を使わずに WebSocket サーバー実装とかできたらかっこいいけどとりあえずライブラリに甘えます。 ws による最小構成 サーバーを起動する最小構成。 このコードをコ...]]></description>
            <enclosure length="0" type="image/png" url="https://blog.stin.ink/articles/build-chat-app-with-websocket/opengraph-image"/>
        </item>
        <item>
            <title><![CDATA[Google AdSense を Next.js 製ブログに入れるのに一手間かかる話]]></title>
            <link>https://blog.stin.ink/articles/add-google-adsense-to-blog</link>
            <guid>https://blog.stin.ink/articles/add-google-adsense-to-blog</guid>
            <pubDate>Sun, 15 May 2022 15:55:30 GMT</pubDate>
            <description><![CDATA[ブログに広告を入れてみたので許してください ブログにちょっとでも広告収入あると嬉しいなと思っていたものの、Adsense は審査が厳しいと聞いていたので手を出していませんでした。でもふとダメ元で申請してみたらなんと承認されて広告を貼り付けられるようになったので導入しました。煩わしく感じない程度の広告数にしておくのでどう...]]></description>
            <enclosure length="0" type="image/png" url="https://blog.stin.ink/articles/add-google-adsense-to-blog/opengraph-image"/>
        </item>
        <item>
            <title><![CDATA[見た目が同じなだけのコンポーネントを共通化すべきでない]]></title>
            <link>https://blog.stin.ink/articles/write-everything-twice-in-react</link>
            <guid>https://blog.stin.ink/articles/write-everything-twice-in-react</guid>
            <pubDate>Sat, 14 May 2022 02:31:47 GMT</pubDate>
            <description><![CDATA[WET is better than DRY https://twitter.com/stin\_factory/status/1522521205080989696 こんなツイートをしたらちょっと反響がありました。 大した事ないツイートがプチバズりしているの不思議 ではありますが、みんな似た経験をしているのでしょう。...]]></description>
            <enclosure length="0" type="image/png" url="https://blog.stin.ink/articles/write-everything-twice-in-react/opengraph-image"/>
        </item>
        <item>
            <title><![CDATA[『プロを目指す人のためのTypeScript入門』読書感想文]]></title>
            <link>https://blog.stin.ink/articles/typescript-introduction-book-report</link>
            <guid>https://blog.stin.ink/articles/typescript-introduction-book-report</guid>
            <pubDate>Sun, 08 May 2022 15:24:57 GMT</pubDate>
            <description><![CDATA[https://twitter.com/stin\_factory/status/1520251902877118464?s=20\&t=ObJNlQRqSKg5E02UCk5xOw 尊敬する TypeScript の師匠(勝手に思ってるだけ)である uhyo さんが書いた『プロを目指す人のための TypeScript...]]></description>
            <enclosure length="0" type="image/png" url="https://blog.stin.ink/articles/typescript-introduction-book-report/opengraph-image"/>
        </item>
        <item>
            <title><![CDATA[HTML 解体新書 読書感想文]]></title>
            <link>https://blog.stin.ink/articles/html-kaitai-shinsho-book-report</link>
            <guid>https://blog.stin.ink/articles/html-kaitai-shinsho-book-report</guid>
            <pubDate>Sat, 30 Apr 2022 03:37:37 GMT</pubDate>
            <description><![CDATA[https://twitter.com/stin\_factory/status/1516718102813511680 https://www.borndigital.co.jp/book/25999.html Amazon で予約開始してすぐに予約していたものが先日届いて 1 周読み切ったので読書感想文的なものを書...]]></description>
            <enclosure length="0" type="image/png" url="https://blog.stin.ink/articles/html-kaitai-shinsho-book-report/opengraph-image"/>
        </item>
        <item>
            <title><![CDATA[Next.js ～RSS フィードの実装方法探訪記、或いは、 getServerSideProps での res.end() の考察について～]]></title>
            <link>https://blog.stin.ink/articles/add-rss-feed-to-nextjs-blog</link>
            <guid>https://blog.stin.ink/articles/add-rss-feed-to-nextjs-blog</guid>
            <pubDate>Fri, 08 Apr 2022 13:01:51 GMT</pubDate>
            <description><![CDATA[この個人ブログに RSS フィード機能を実装しました。 RSS フィードとはブログの記事のタイトルや公開日などの情報を XML 形式で配信するものです。 実装方法自体はググって出てきた記事を参考に行いましたが、その中で一つ疑問があったので調べてみました。 参考記事 https://zenn.dev/catnose99/...]]></description>
            <enclosure length="0" type="image/png" url="https://blog.stin.ink/articles/add-rss-feed-to-nextjs-blog/opengraph-image"/>
        </item>
        <item>
            <title><![CDATA[ブログに next-seo を導入した]]></title>
            <link>https://blog.stin.ink/articles/add-next-seo-to-blog</link>
            <guid>https://blog.stin.ink/articles/add-next-seo-to-blog</guid>
            <pubDate>Sat, 02 Apr 2022 13:28:45 GMT</pubDate>
            <description><![CDATA[適当にやってた meta タグ設定をちゃんとしました Next.js のプロジェクトの meta タグ類を設定してくれるライブラリ next-seo をインストールしました。 今まで適当に meta タグをセットしていて、特に OGP 系は必須プロパティとかも入れずにやっていましたが、今回 next-seo を導入する...]]></description>
            <enclosure length="0" type="image/png" url="https://blog.stin.ink/articles/add-next-seo-to-blog/opengraph-image"/>
        </item>
        <item>
            <title><![CDATA[Twitter シェアボタン React 作り方]]></title>
            <link>https://blog.stin.ink/articles/put-twitter-share-button</link>
            <guid>https://blog.stin.ink/articles/put-twitter-share-button</guid>
            <pubDate>Thu, 31 Mar 2022 10:43:24 GMT</pubDate>
            <description><![CDATA[Twitter のシェアボタンをブログに設置しました 記事ページの下部に Twitter のシェアボタンと Buy me a coffee のリンクを設置しました！ Twitter のシェアボタンを作るに当たって考えたことを書いていきます。 コード https://github.com/y-hiraoka/stin-b...]]></description>
            <enclosure length="0" type="image/png" url="https://blog.stin.ink/articles/put-twitter-share-button/opengraph-image"/>
        </item>
        <item>
            <title><![CDATA[Twitter ツイート埋め込み機能完全に理解した]]></title>
            <link>https://blog.stin.ink/articles/fully-understood-embedding-tweets</link>
            <guid>https://blog.stin.ink/articles/fully-understood-embedding-tweets</guid>
            <pubDate>Fri, 25 Mar 2022 15:25:46 GMT</pubDate>
            <description><![CDATA[Tweet URL を Tweet 埋め込みに変換して表示するように実装しました Tweet の URL だけを Markdown に記述すると ↓ Tweet 埋め込みの iframe が展開されるようにブログを実装しました！↓ https://twitter.com/jack/status/20 この記事では Tw...]]></description>
            <enclosure length="0" type="image/png" url="https://blog.stin.ink/articles/fully-understood-embedding-tweets/opengraph-image"/>
        </item>
        <item>
            <title><![CDATA[ブログをフルリニューアルした！]]></title>
            <link>https://blog.stin.ink/articles/stin-blog-updated-2022</link>
            <guid>https://blog.stin.ink/articles/stin-blog-updated-2022</guid>
            <pubDate>Tue, 22 Mar 2022 10:15:41 GMT</pubDate>
            <description><![CDATA[すてぃんブログレボリューション 21 (updated) このブログサイトをフルリニューアルしました！(5 記事しか書いていなかったのにもうリニューアルとかｗｗというのはそれはそう) 今回はこのリニューアルについて、こだわりポイントと技術的な内容の 2 つを書こうと思います。 こだわりポイント Web デザイン リニュ...]]></description>
            <enclosure length="0" type="image/png" url="https://blog.stin.ink/articles/stin-blog-updated-2022/opengraph-image"/>
        </item>
        <item>
            <title><![CDATA[react-router の型定義が知らない間にきれいになっていたので使い方を再考する]]></title>
            <link>https://blog.stin.ink/articles/use-new-react-router-types</link>
            <guid>https://blog.stin.ink/articles/use-new-react-router-types</guid>
            <pubDate>Sat, 16 Oct 2021 07:17:47 GMT</pubDate>
            <description><![CDATA[@types/react-router v5.1.9 から型定義がきれいになっていた react-router の型定義は受け取るパスが全て文字列のため、以前は TS コンパイラでパスの間違いを検出できませんでした。 そのため僕は typed-path-builder というライブラリを作って次の記事を書きました。 h...]]></description>
            <enclosure length="0" type="image/png" url="https://blog.stin.ink/articles/use-new-react-router-types/opengraph-image"/>
        </item>
        <item>
            <title><![CDATA[Immutable.js で React ステートのモデルクラスを作る]]></title>
            <link>https://blog.stin.ink/articles/model-class-for-react-with-immutable-js-v4</link>
            <guid>https://blog.stin.ink/articles/model-class-for-react-with-immutable-js-v4</guid>
            <pubDate>Sat, 09 Oct 2021 02:13:44 GMT</pubDate>
            <description><![CDATA[Immutable.js で React ステート用モデルクラスを作る 昨今の React は関数コンポーネント一辺倒になり、 React エンジニアがクラス定義する場面はかなり減ってきているんじゃないかと思います。 関数コンポーネント内部で取り回されるステートもクラスインスタンスではなくプレーンなオブジェクトで、それ...]]></description>
            <enclosure length="0" type="image/png" url="https://blog.stin.ink/articles/model-class-for-react-with-immutable-js-v4/opengraph-image"/>
        </item>
        <item>
            <title><![CDATA[React Context を export するのはアンチパターンではないかと考える]]></title>
            <link>https://blog.stin.ink/articles/do-not-export-react-context</link>
            <guid>https://blog.stin.ink/articles/do-not-export-react-context</guid>
            <pubDate>Sun, 21 Feb 2021 12:14:46 GMT</pubDate>
            <description><![CDATA[Context を export するな みなさんは React Context を使っていますか？非常に便利ですよね。 え、使ってない？みんな React Context 使っとる。使ってへんのお前だけ。 冗談はさておき、この記事では Context を export するなという内容をお話しします。 React C...]]></description>
            <enclosure length="0" type="image/png" url="https://blog.stin.ink/articles/do-not-export-react-context/opengraph-image"/>
        </item>
        <item>
            <title><![CDATA[Fragment をコンポーネントのトップに置くのはアンチパターンではないかと考える]]></title>
            <link>https://blog.stin.ink/articles/react-fragment-is-anti-pattern</link>
            <guid>https://blog.stin.ink/articles/react-fragment-is-anti-pattern</guid>
            <pubDate>Fri, 05 Feb 2021 12:46:41 GMT</pubDate>
            <description><![CDATA[Fragment をコンポーネントのトップに置くな 「Fragment をコンポーネントにトップに置く」というのは下のようなコンポーネントを作成することを指します。 これは、この MyComponent が生成する HTML 要素が h1 と p のふたつあるということを意味します。 この書き方がアンチパターンではない...]]></description>
            <enclosure length="0" type="image/png" url="https://blog.stin.ink/articles/react-fragment-is-anti-pattern/opengraph-image"/>
        </item>
        <item>
            <title><![CDATA[個人ブログを作ったので初記事を書く]]></title>
            <link>https://blog.stin.ink/articles/my-first-article</link>
            <guid>https://blog.stin.ink/articles/my-first-article</guid>
            <pubDate>Thu, 21 Jan 2021 14:42:02 GMT</pubDate>
            <description><![CDATA[個人ブログを開発しました 「開発」という単語がふさわしいのか不明です。 開発 作成 制作 開発というと大げさな気がします。作成というと軽い気がする。 制作は工作とか美術っぽい。 CMS 使わずにフルスクラッチなので開発でいいでしょう。 stin's blog を支える技術 「〇〇を支える技術」っていう言い回しを使ってみ...]]></description>
            <enclosure length="0" type="image/png" url="https://blog.stin.ink/articles/my-first-article/opengraph-image"/>
        </item>
    </channel>
</rss>