ブログサイトのロゴsui Tech Blog

Blog

Total 92 posts
Cloudflare
CloudflareWorkers

Cloudflareのグローバルネットワーク上でヘッドレスChromeを実行するBrowser Rendering

Cloudflare Browser RenderingのREST APIを使って、WebページをMarkdownに変換するAPIを構築する方法を解説します。不要な要素の削除やリソース最適化など、実践的な実装例を紹介します。

記事を読む
絵文字
React
SVG

ブログのSVGアイコンがチラついてムカついたのでやったこと

Next.jsのImageコンポーネントで発生するSVGアイコンのちらつき問題を、SVGインライン化によって解決した実装記録です。publicフォルダ配置では解消できなかった初回表示時のちらつきを、ビルド時にSVGコードを埋め込むことで無くしました。

記事を読む
Next.js
Pagefind
React

Next.js App RouterとPagefindで爆速のサイト内検索を実装する

Next.js (App Router) のブログに Pagefind で全文検索機能を実装する手順を紹介します。public ディレクトリへのインデックス出力設定や、クライアントサイドでの動的インポートなど、実装に必要なポイントをコード付きで解説します。

記事を読む
GitHub
GitHubActions
セキュリティ

今日から学ぶGitHub Actionsのセキュリティ設定の基本と最低限の対策

GitHub Actionsで発生しうるScript InjectionやPull Request Target、権限の過剰付与などの脆弱性と、actionlint・ghalint・zizmor等の静的解析ツールを使った具体的な対策方法を解説します。

記事を読む
Markdown
Notion
Obsidian

ブログ記事のアーキテクチャをMDXからMarkdownへ変更しました

NotionとLINEメッセージングAPIを使った外出先からのブログ更新システムから、ObsidianとMarkdownベースのシンプルな管理方式へ移行した経緯を紹介します。

記事を読む
MCP
ClaudeCode
Serena

Anthropic公式のMCPによるコード実行をserena MCPで試してみたけど無理だった件

AnthropicのMCPコード実行手法をSerena MCPで試しましたが、ツール数が多く型定義が複雑なMCPではうまくいきませんでした。シンプルなMCPでの検証が必要という学びを共有します。

記事を読む
TypeScript
GAS
GoogleAppScript

GASを使うと社内だけで使えるWebサイトが簡単に作れるの知ってました?

Google Apps Script(GAS)を使うと社内限定で使えるWebアプリケーションを簡単に構築できます。claspとTypeScriptを使ってGoogleDriveのファイルを検索するアプリケーションを作成します。

記事を読む
TypeScript
Notion
NotionAPI

Notion APIのデータベース操作APIに破壊的変更があったので、実装を修正してみる

Notion APIのバージョン2025-09-03における破壊的変更について解説します。単一データベースモデルからマルチソースデータベースモデルへの移行に伴う実装修正方法を紹介します。

記事を読む
TypeScript
ClaudeCode

仕組みでカバーするStop Hooksで忘れないTypeScriptの型チェック

Claude CodeのStop Hooksを使って、TypeScriptの型チェックを自動実行する仕組みを実装します。物忘れを仕組みでカバーして、効率的な開発フローを実現します。

記事を読む
MCP
DevContainer
ClaudeCode

Dev Container環境でSerena MCPのブラウザ自動起動を無効化する

Dev Container環境でSerena MCPのブラウザ自動起動を無効化する方法を解説します。グローバル設定ファイルとdevcontainer.jsonの設定でダッシュボードの自動起動を制御します。

記事を読む
Next.js
Cloudflare
OpenNext.js

Next.js + OpenNext.js をdevcontainerで起動しようとしたときにハマったこと

Debian 11 bullseyeベースのdevcontainerでNext.js 15 + OpenNext.jsの開発サーバーが起動せず、Debian 12 bookwormベースに変更して解決した事例。glibcバージョン要件とworkerdの実行互換について整理。

記事を読む
ClaudeCode
Serena

PreToolUseがfailed with non-blocking status code 127になったときにやったこと

Claude CodeのPreToolUseがfailed with non-blocking status code 127になったときの解決方法を解説します。改行コードがCRLFになっている場合にLFに変更することで解決します。

記事を読む