<?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[isirmtブログの新着投稿]]></title><description><![CDATA[「isirmtブログ」の投稿フィード]]></description><link>https://blog.isirmt.com</link><generator>RSS for Node</generator><lastBuildDate>Fri, 24 Apr 2026 13:08:50 GMT</lastBuildDate><atom:link href="https://blog.isirmt.com/feed" rel="self" type="application/rss+xml"/><language><![CDATA[ja]]></language><item><title><![CDATA[「WELCOME」のテキストが見え隠れしたり跳ねたりするアニメーションを作った]]></title><description><![CDATA[こんにちは。CSS のお時間がやってきました。  アニメーション  アニメーションって組み合わせができるのですよね！(animation)複数の組み合わせで1つの動きのあるアニメーションの作成を目指します  完成物  デモ  実際にアニメーションのデモンストレーションページを用意しました。  https://isirmt.github.io/TemplateCSSAnimation/up_welc...]]></description><link>https://blog.isirmt.com/post/css_up_welcome</link><guid isPermaLink="true">https://blog.isirmt.com/post/css_up_welcome</guid><pubDate>Tue, 24 Mar 2026 00:00:00 GMT</pubDate></item><item><title><![CDATA[blog.isirmt.com のアイコン置き場]]></title><description><![CDATA[「ブログ」という文字が中で表されている、と過去の私が言っていました。カスタムサムネイルの際は必ず放り込んでいるのですが、無くしても悲しいのでここへコピー可能な状態で残しておきます。  ちなみに、作成ソフトはillustrator。      ]]></description><link>https://blog.isirmt.com/post/blog_isirmt_icon</link><guid isPermaLink="true">https://blog.isirmt.com/post/blog_isirmt_icon</guid><pubDate>Wed, 25 Feb 2026 00:00:00 GMT</pubDate></item><item><title><![CDATA[サーバー側のエクスポートとエディター(クライアント)の表示を揃えたい]]></title><description><![CDATA[RubyとRailsを使ってみたかったのと、カレンダー印刷系のウェブアプリが個人的に欲しかったので現在取り組んでいます。  用意すべきパラメータが多いことを把握してER図等予め組んでいたのですが、作っている途中で足りないことに気づきあたふた中です。  Ruby(on Rails)使ってみた  言語としても使うのは初めてでしたが、一言で書きやすくて楽しいです♪  プロジェクト内のappやcontro...]]></description><link>https://blog.isirmt.com/post/ruby-react-pdf-same-format</link><guid isPermaLink="true">https://blog.isirmt.com/post/ruby-react-pdf-same-format</guid><pubDate>Wed, 25 Feb 2026 00:00:00 GMT</pubDate></item><item><title><![CDATA[当ブログシステム構築方法]]></title><description><![CDATA[当ブログ(NextjsBlogWithGitPAT)の構築方法の解説記事ですわ！！  https://github.com/isirmt/NextjsBlogWithGitPAT  前提  GitHubアカウント Vercelアカウント(SSOでGitHubアカウントから作成可能) Node.js pnpm v9~ GitHubにてフォーク済みのisirmt/NextjsBlogWithGitPA...]]></description><link>https://blog.isirmt.com/post/setup-nextjs-blog-with-git-pat</link><guid isPermaLink="true">https://blog.isirmt.com/post/setup-nextjs-blog-with-git-pat</guid><pubDate>Wed, 25 Feb 2026 00:00:00 GMT</pubDate></item><item><title><![CDATA[当ブログの更新まとめ(2026/2/24)]]></title><description><![CDATA[シンタックスハイライターの変更  以前までは、react-syntax-highlighterを利用していましたが、本アップデートからshikiへ変更いたしました。詳細は下のポストを見てね～  マークダウンのスタイルアップデート  h2、h3スタイルや等のスタイル変更もしました。  ブログの詳細ページのキャッシュ問題  このブログの投稿内容が見えているこの画面でキャッシュがヒットしない問題が発生し...]]></description><link>https://blog.isirmt.com/post/update_note_20260224</link><guid isPermaLink="true">https://blog.isirmt.com/post/update_note_20260224</guid><pubDate>Tue, 24 Feb 2026 00:00:00 GMT</pubDate></item><item><title><![CDATA[特定のアカウント以外はログインでエラーが出るようにする【Next.js + Auth.js】]]></title><description><![CDATA[Auth.js(NextAuth)でシングルサインオン(SSO)を実現する際，ログインできるユーザーを絞りたい場合があるかと思われます．  例えば，特定のユーザーのみにWEBアプリケーションを提供したい場合など...  Next.jsであればlibディレクトリにAuth.jsのコンフィグを記述しますが，callbacksではbooleanを返すことができるメソッドがあり，認証で失敗を返すことができ...]]></description><link>https://blog.isirmt.com/post/isirmt-pf-v2%2F3</link><guid isPermaLink="true">https://blog.isirmt.com/post/isirmt-pf-v2%2F3</guid><pubDate>Thu, 05 Feb 2026 00:00:00 GMT</pubDate></item><item><title><![CDATA[枠外のテキストもスライドアニメーションで表示するReactコンポーネント]]></title><description><![CDATA[テキストが長いときに、画面からはみ出したり完全に隠すのではなく、アニメーションを使って、テキストの左端と右端がスライドアニメーションで映るようにするためのReactコンポーネントです。  コンポーネント  "use client"; import React, { useCallback, useEffect, useRef } from "react";  const clamp = (valu...]]></description><link>https://blog.isirmt.com/post/isirmt-pf-v2%2F2</link><guid isPermaLink="true">https://blog.isirmt.com/post/isirmt-pf-v2%2F2</guid><pubDate>Thu, 15 Jan 2026 00:00:00 GMT</pubDate></item><item><title><![CDATA[isirmt.com v2ができました]]></title><description><![CDATA[↑ タグの付けすぎ  みなさん  あけましておめでとうございます  今年もよろしくお願いします  サイトのアップデートだけされてブログの更新が滞っていましたが、今回のシリーズは話が盛りだくさんのはずです。  はじめに  2025年クリスマスにisirmt.com v2をリリースしました。  https://isirmt.com  これまで、内容のアップデートはし続けていましたが、システム全体の刷新...]]></description><link>https://blog.isirmt.com/post/isirmt-pf-v2%2F1</link><guid isPermaLink="true">https://blog.isirmt.com/post/isirmt-pf-v2%2F1</guid><pubDate>Thu, 15 Jan 2026 00:00:00 GMT</pubDate></item><item><title><![CDATA[当ブログの更新まとめ(2025/5/30)]]></title><description><![CDATA[ここ1ヵ月以内の更新はこちら  リンクカードのスタイル変更  https://sai.ac  $\KaTeX$記法の対応  クーロン力 $$ F=k\frac{q_1q_2}{r^2} $$  注釈機能  これが注釈番号^1  ## リンクカードのスタイル変更    ## $\KaTeX$記法の対応  クーロン力 $$ F=k\frac{q_1q_2}{r^2} $$  ## 注釈機能  これが注...]]></description><link>https://blog.isirmt.com/post/update_note_20250530</link><guid isPermaLink="true">https://blog.isirmt.com/post/update_note_20250530</guid><pubDate>Fri, 30 May 2025 00:00:00 GMT</pubDate></item><item><title><![CDATA[メモ: GitHubリポジトリのフォーク先を使ったリンク]]></title><description><![CDATA[以前，Zennで投稿したフォーク元のバージョンを表示する機能  https://zenn.dev/isirmt/articles/vercel-pat-fork-version  ユーザー(今回ならisirmt)の所持しているリポジトリからフォークされたリポジトリで，オリジナルのコミットがある場合に，  const link = `https://github.com/isirmt/NextjsB...]]></description><link>https://blog.isirmt.com/post/note_20250528</link><guid isPermaLink="true">https://blog.isirmt.com/post/note_20250528</guid><pubDate>Wed, 28 May 2025 00:00:00 GMT</pubDate></item><item><title><![CDATA[「i」を流れ星に見立てた名前ロゴを作る]]></title><description><![CDATA[はじめに  今回は，下の画像のような流れ星に見立てた「i」やカラフルな文字列を含む名前ロゴを作成しました．  logo  補足_使用ソフト  使用ソフトウェアはAdobe Illustrator CC(2025)です．  パスファインダー 複合パス  の機能をふんだんに使いました．  作成  メインとなる文字  今回は，「irimoti」という文字列で全てアルファベットの子文字です．前回より太い字...]]></description><link>https://blog.isirmt.com/post/making_logo_pop%2F2</link><guid isPermaLink="true">https://blog.isirmt.com/post/making_logo_pop%2F2</guid><pubDate>Fri, 04 Apr 2025 00:00:00 GMT</pubDate></item><item><title><![CDATA[名前ロゴを作成しよう！～白縁を添えて～]]></title><description><![CDATA[はじめに  今回は，下の画像のような大きく白縁をつけた「名前ロゴ」となるものを作ってみたので備忘録的に．  logo  補足_使用ソフト  使用ソフトウェアはAdobe Illustrator CC(2025)です．ベクタ画像が非常に作成しやすいのでおすすめです．  作成  メインとなる文字  まずは，Adobe Fontsやインストール済みフォントからモデルとなるフォントを探しました．  上のロ...]]></description><link>https://blog.isirmt.com/post/making_logo_pop%2F1</link><guid isPermaLink="true">https://blog.isirmt.com/post/making_logo_pop%2F1</guid><pubDate>Thu, 03 Apr 2025 00:00:00 GMT</pubDate></item><item><title><![CDATA[新年のご挨拶と昨年の振り返り]]></title><description><![CDATA[2025年が始りました  本年もよろしくお願いいたします。昨年はTypeScriptを中心に開発することが多い1年となりました。  主なリポジトリ  コミット数で比較は難しいですが自身にとっても印象深かったリポジトリをいくつか。  ブログもち  https://github.com/isirmt/NextjsBlogWithGitPAT  まずはこれですね。このサイト。「ブログとしてあったら嬉しい...]]></description><link>https://blog.isirmt.com/post/new_year_2025</link><guid isPermaLink="true">https://blog.isirmt.com/post/new_year_2025</guid><pubDate>Sun, 05 Jan 2025 00:00:00 GMT</pubDate></item><item><title><![CDATA[CSSで中央に大きなボタンがあるフッターを作ろう！]]></title><description><![CDATA[こんにちは！CSSのお時間です！  完成物  https://isirmt.github.io/TemplateCSSPlain/native_footer_middle_large/  https://github.com/isirmt/TemplateCSSPlain/blob/main/native_footer_middle_large/index.html  フッター中央のボタンを大きく...]]></description><link>https://blog.isirmt.com/post/css_footer_native_middle_large</link><guid isPermaLink="true">https://blog.isirmt.com/post/css_footer_native_middle_large</guid><pubDate>Sat, 12 Oct 2024 00:00:00 GMT</pubDate></item><item><title><![CDATA[アイコンクリックでDiscordへリンクをシェアするChrome拡張を作る]]></title><description><![CDATA[経緯  興味のあるサイトを見つけた際にメモとしてプライベートサーバーのチャンネルにリンクを投下していたが，環境が状況によって変わるためDiscordを立ち上げなくても同じことができるようにしたかった．  準備  manifest.jsonの作成  /src内にmanifest.jsonを作成します．  {   "name": "Share Link To Discord",   "manifest...]]></description><link>https://blog.isirmt.com/post/chrome-share-link-discord%2F1</link><guid isPermaLink="true">https://blog.isirmt.com/post/chrome-share-link-discord%2F1</guid><pubDate>Thu, 10 Oct 2024 00:00:00 GMT</pubDate></item><item><title><![CDATA[【Next.js】作成済みのコンポーネントにSwiperを導入する]]></title><description><![CDATA[はじめに  今回は、当ブログのアップデートで導入したSwiperについてです。以下の記事であったように前回はページネーション機能を投稿一覧等に導入しました。  よりインタラクティブな操作を実現するためにスワイプ操作でもページがめくれるように変更します。  https://blog.isirmt.com/post/nextjs-app-pagination-button  要件  デザインは従来のま...]]></description><link>https://blog.isirmt.com/post/next-swiper-existing-component</link><guid isPermaLink="true">https://blog.isirmt.com/post/next-swiper-existing-component</guid><pubDate>Mon, 07 Oct 2024 00:00:00 GMT</pubDate></item><item><title><![CDATA[【Tailwind CSS】クリックでスライドアニメーションするボタン]]></title><description><![CDATA[概要  下の2つにある青色の部分が選択された要素へスライドするアニメーションを行います．  有彩色1 有彩色1  ソース  2通りのアプローチでスライドしつつ表示色を変えていきたいと思います．  z-indexによるアプローチ  return    ラベル          setFlag(true)}     >                   setFlag(false)}     >  ...]]></description><link>https://blog.isirmt.com/post/css-template-tailwind%2F3</link><guid isPermaLink="true">https://blog.isirmt.com/post/css-template-tailwind%2F3</guid><pubDate>Wed, 02 Oct 2024 00:00:00 GMT</pubDate></item><item><title><![CDATA[【Next.js】Markdownブログで個別にカスタムサムネイルを設定する]]></title><description><![CDATA[はじめに  みなさんは自身のMarkdownブログで「今回は特別にサムネイルを設定したい！」な時がありませんか？ありますよね！  Markdownブログの管理方法としてGitHubのリポジトリがあると思います．今回はそのリポジトリの画像フォルダにサムネイルを入れている場合を想定して実装し，実際にこの記事のサムネイルとして適用しました！  是非，投稿一覧やOGPが得られるサイト/サービスから確認して...]]></description><link>https://blog.isirmt.com/post/next_md_customize_thumbnail</link><guid isPermaLink="true">https://blog.isirmt.com/post/next_md_customize_thumbnail</guid><pubDate>Tue, 01 Oct 2024 00:00:00 GMT</pubDate></item><item><title><![CDATA[ヘッダー動画の追加とポスタリゼーション【サイトアップデート】]]></title><description><![CDATA[以前まで「準備中...」の部分だったmain要素ヘッダー部に動画を追加しました！常時ループされるようになっています．  動画について  トップページの一番上ということは，「ようこそ！」のようなメッセージを入れたいと考えていました．スマホでも縦画面で横幅いっぱいに表示するため，できるだけ文字は大きく表示したいところです．  はじめてAfter Effectsを触りました．AviUtlやWonders...]]></description><link>https://blog.isirmt.com/post/isirmt-blog-add-header-mov</link><guid isPermaLink="true">https://blog.isirmt.com/post/isirmt-blog-add-header-mov</guid><pubDate>Sat, 28 Sep 2024 00:00:00 GMT</pubDate></item><item><title><![CDATA[クエリパラメータ連携をON/OFF可能なページネーション機能【Next.js】]]></title><description><![CDATA[なぜ必要？  レンダリング的には150件表示したとしても決して重いわけではなく十分に表示する目的を果たせます．しかし，ユーザ側は無限にスクロールをしないといけなかったり，スクロールバーが縮んだりとユーザビリティ面では悪くなる結果になります．SNSでは無いのでスクロールしてネットサーフィンというわけでもなく，必要なトピックに直接ジャンプしてくる方が多いと思っています．そのため簡潔に表示して過大な情報...]]></description><link>https://blog.isirmt.com/post/nextjs-app-pagination-button</link><guid isPermaLink="true">https://blog.isirmt.com/post/nextjs-app-pagination-button</guid><pubDate>Mon, 16 Sep 2024 00:00:00 GMT</pubDate></item><item><title><![CDATA[【Next.js】日付カードコンポーネントとHydrationWarning]]></title><description><![CDATA[完成物  完成物  上のようなものを作ります。当ブログにもある年・月・日を表示します。  作成  イメージ  イメージは「日めくりカレンダー」を意識しています。日付を横書きで記すだけでも良いと思いましたが、アクセントを付けたいということから始まりました。  コンポーネンの作成  執筆時のソースコードを用います。  https://github.com/isirmt/NextjsBlogWithGi...]]></description><link>https://blog.isirmt.com/post/nextjs-gh-blog-css%2F2</link><guid isPermaLink="true">https://blog.isirmt.com/post/nextjs-gh-blog-css%2F2</guid><pubDate>Fri, 13 Sep 2024 00:00:00 GMT</pubDate></item><item><title><![CDATA[CSSでボールのバウンドとブレンドモードを使う]]></title><description><![CDATA[こんにちは。CSS のお時間がやってきました。  アニメーション  アニメーションによってユーザへリアクションを示せ、動きのあるアプリケーションとして魅せることができます。  前作はこちらです ↓  https://blog.isirmt.com/post/css_leaf_gradually_fills_up  完成物  デモ  実際にアニメーションのデモンストレーションページを用意しました。 ...]]></description><link>https://blog.isirmt.com/post/css_ball_bounces_and_reverse_color</link><guid isPermaLink="true">https://blog.isirmt.com/post/css_ball_bounces_and_reverse_color</guid><pubDate>Thu, 12 Sep 2024 00:00:00 GMT</pubDate></item><item><title><![CDATA[【Tailwind CSS】検索フィールドとオブジェクトの一体化]]></title><description><![CDATA[ソース  export default function SearchBox() { return (                               ); }  rounded=border-radiusをそれぞれで制御し，justify-centerで繋げると1つの要素のように振る舞うことができます．そのため，このdivをまとめてコンポーネント化することで自由な場所に貼り付けても分...]]></description><link>https://blog.isirmt.com/post/css-template-tailwind%2F2</link><guid isPermaLink="true">https://blog.isirmt.com/post/css-template-tailwind%2F2</guid><pubDate>Wed, 11 Sep 2024 00:00:00 GMT</pubDate></item><item><title><![CDATA[【Tailwind CSS】「#タグ」を表示するボタン]]></title><description><![CDATA[ソース                          Tailwind CSS                           (アイコン)        というコンポーネントです．  これは，以下の画像のとおりになります．  結果画像  どんなものか  画像のように表示され，ホバーすると縁の色が背景色となり白文字になる仕様です．また，darkモードにも対応しているのでTailwind C...]]></description><link>https://blog.isirmt.com/post/css-template-tailwind%2F1</link><guid isPermaLink="true">https://blog.isirmt.com/post/css-template-tailwind%2F1</guid><pubDate>Wed, 11 Sep 2024 00:00:00 GMT</pubDate></item><item><title><![CDATA[ファイルサイズを確認しながら画像をリサイズできるアプリケーションを作った]]></title><description><![CDATA[app_ogp  アプリはどこに？  https://img-sm.isirmt.com  ↑ よりアクセスしてみてください！  概要  添付する際にファイルサイズ制限があると画像サイズを落とすことで解決しようとする時が私にはありました。そこで、身近なな操作でファイルサイズを確認しつつサイズを小さくするアプリケーションを作成しました！  特徴  👍 ファイルサイズを確認しつつ可能 👍 クリップ...]]></description><link>https://blog.isirmt.com/post/gatsby-image-resizer-setup</link><guid isPermaLink="true">https://blog.isirmt.com/post/gatsby-image-resizer-setup</guid><pubDate>Sat, 07 Sep 2024 00:00:00 GMT</pubDate></item><item><title><![CDATA[【CSS】文字選択ができないようにするプロパティのコピペ]]></title><description><![CDATA[-moz-user-select: none; -ms-user-select: none; -khtml-user-select: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;  何ができるか  長押しやドラッグによる文字・画像選択ができなくなる．これをrootに配置すれば一切選択...]]></description><link>https://blog.isirmt.com/post/css-template-native%2F1</link><guid isPermaLink="true">https://blog.isirmt.com/post/css-template-native%2F1</guid><pubDate>Thu, 05 Sep 2024 00:00:00 GMT</pubDate></item><item><title><![CDATA[葉っぱが下から上へ向かって色が塗られるアニメーションを作った]]></title><description><![CDATA[こんにちは。CSS のお時間がやってきました。  アニメーション  アニメーションによってユーザへリアクションを示せ、動きのあるアプリケーションとして魅せることができます。  完成物  デモ  実際にアニメーションのデモンストレーションページを用意しました。  https://isirmt.github.io/TemplateCSSAnimation/up_leaf/  ↑よりぜひアクセスしてくだ...]]></description><link>https://blog.isirmt.com/post/css_leaf_gradually_fills_up</link><guid isPermaLink="true">https://blog.isirmt.com/post/css_leaf_gradually_fills_up</guid><pubDate>Sat, 31 Aug 2024 00:00:00 GMT</pubDate></item><item><title><![CDATA[App Router で動的にOGP画像を作りたい【Next.js】]]></title><description><![CDATA[Next.js14 の og:image  Metadata型のJSON形式にopenGraphというプロパティがあります。  openGraph: {   title,   description,   url,   siteName,   images: {     url: imageURL,     width: 1200,     height: 630   },   type, }  ...]]></description><link>https://blog.isirmt.com/post/next14-app-dynamic-ogp</link><guid isPermaLink="true">https://blog.isirmt.com/post/next14-app-dynamic-ogp</guid><pubDate>Fri, 16 Aug 2024 00:00:00 GMT</pubDate></item><item><title><![CDATA[【Next.js】両サイドにメニューがある場合のCSS設計]]></title><description><![CDATA[目標  左　：共通メニュー 中央：メインコンテンツ 右　：関連メニュー  左・右のどちらかは、お気に入りの表示や履歴といった常に表示することが目的となるようなコンテンツを置きたいと考えていました。  今回の設計では左にそれを配置し、右に目次等を置くことにしました。  どうHTML要素を配置するか  メニュー画面エリア内の設計  最初にメニュー画面(右・左)のエリア内を考えます。  position...]]></description><link>https://blog.isirmt.com/post/nextjs-gh-blog-css%2F1</link><guid isPermaLink="true">https://blog.isirmt.com/post/nextjs-gh-blog-css%2F1</guid><pubDate>Sat, 10 Aug 2024 00:00:00 GMT</pubDate></item><item><title><![CDATA[はじめまして、最初の投稿]]></title><description><![CDATA[挨拶  サイトの管理者の「isirmt」です。  このサイトでは、プログラミング中に気づいた情報等をまとめたり備忘録として残したりすることを目的にしています。  サイトの仕様  2024/08/07時点の大まかな仕様を以下に記載しています。  Next.js: 14.2.5 Tailwind CSS GitHub APIを用いたリポジトリからのMarkdownファイルの取得 GitHub APIを...]]></description><link>https://blog.isirmt.com/post/first_post_240807</link><guid isPermaLink="true">https://blog.isirmt.com/post/first_post_240807</guid><pubDate>Wed, 07 Aug 2024 00:00:00 GMT</pubDate></item></channel></rss>