子ども向けサイトの読み上げに Gemini TTS と Google Cloud TTS を試した話
教育向けWebアプリの音声読み上げ機能に、ブラウザ標準のWeb Speech API・Google Cloud Text-to-Speech・Gemini TTSの3つを比較検証。実装コード付きで、品質・コスト・導入しやすさを解説します。
プランタン東京ブログ
Next.js・React などの Web 開発から、Neovim・Cursor などの開発環境、
Python・AI 活用、デザイン、セキュリティまで幅広い技術記事を投稿しています。
LangChain.jsとは？ AIエージェント開発の定番フレームワークを活用例とコードで解説
LangChain.jsは、LLMを活用したAIエージェントやアプリケーションを構築するためのTypeScript/JavaScriptフレームワークです。基本概念から実践的なコードサンプルまで、活用例とともに解説します。
AIに毎日の活動日記を書いてもらう仕組みを作った
gitログ、ファイル更新履歴、Cursor・Claude Code・Codexの各AIエージェントログを情報源として、AIに1日の活動日記を自動生成してもらう仕組みを構築。さらにCRONとシェルスクリプトで完全自動化するまでの話。
大好きなカーズのキャラクター125体以上の画像をAPIで一括収集してみた
ピクサー映画「カーズ」シリーズ全3作品に登場するキャラクター125体以上の名前と画像を、Fandom WikiのMediaWiki APIを使ってPythonスクリプトで自動収集。子ども向けキャラクター図鑑サイトも公開しました。
Tailwind CLI入門 ― Node.jsなしでも使えるCSS構築ツール
Tailwind CSS v4で刷新されたTailwind CLIの使い方を解説。npmインストールからスタンドアロン版、v4の新機能（@import、@theme、CSS-firstな設定）まで、実践的なコード例付きで紹介します。
サイコロゲームで比較！React Three Fiber vs Framer Motion
同じサイコロゲームをReact Three Fiber（本格3D）とFramer Motion（CSS疑似3D）の2つのアプローチで実装。それぞれの特徴と使い分けを解説します。
Claude Code バージョンヒストリー完全ガイド - v0.2からv2.1までの進化の軌跡
Anthropicが開発したCLIベースのAIコーディングエージェント「Claude Code」の進化を、v0.2の初期リリースから最新v2.1まで、全バージョンの機能と変更点を詳細に解説します。
Cursor バージョンヒストリー完全ガイド - v0.1からv2.4までの進化の軌跡
CursorのAIコードエディタとしての進化を、2023年3月の初期リリースから2026年1月の最新v2.4まで、全バージョンの機能と変更点を詳細に解説します。
Kaggle完全ガイド - データサイエンス学習とコンペティションの世界標準プラットフォーム
Kaggleの概要から始め方、コンペティション参加のコツ、学習リソースまで徹底解説。データサイエンティストを目指す方必見のプラットフォーム活用ガイドです。
Windows App Development CLI（winapp）がパブリックプレビューで登場 - Visual Studio不要のWindows開発
MicrosoftがWindows App Development CLI（winapp）をパブリックプレビューとしてリリース。Visual StudioやMSBuildを使わずにElectron、Rust、.NETなどでWindowsアプリ開発が可能に。
Manus AIエージェント完全ガイド - Metaが20億ドルで買収した次世代AIの全貌
Meta傘下となったAIエージェント「Manus」の機能、性能、そして今後の展望を徹底解説。自律的にタスクを実行する次世代AIの可能性を探ります。
React useEffect 完全ガイド - セットアップ・クリーンアップ・依存配列を徹底解説
ReactのuseEffectフックを完璧に理解するための完全ガイド。基本的な使い方から依存配列、クリーンアップ関数、よくある間違いと解決策まで、実践的な例とともに徹底解説します。
OpenClaw（旧Clawdbot/Moltbot） - 話題のAIエージェントとセキュリティ懸念
WhatsApp/TelegramからPCを操作できるAIエージェント「OpenClaw（旧Clawdbot/Moltbot）」が話題ですが、深刻なセキュリティ懸念も報告されています。機能と注意点を解説します。
CSS Scroll-driven Animations 完全ガイド - JavaScriptなしでスクロール連動アニメーション
CSS Scroll-driven Animationsの基本から応用まで徹底解説。scroll()、view()、animation-timeline、animation-rangeなど、JavaScriptを使わずにスクロール連動アニメーションを実装する方法を実践的なデモとともに紹介します。
Figma MCP × Cursor でデザインからHTMLを自動生成 - 実践ガイド
Figma公式のMCPサーバーを使って、CursorでデザインからHTMLを自動生成する方法を解説。設定手順から実践、再現度を高めるためのベストプラクティスまで紹介します。
Lottie 完全ガイド - After EffectsアニメーションをWebで再生
Lottieの基本から応用まで徹底解説。lottie-webによるアニメーション制御、インタラクティブな操作、スクロール連動、React/Next.jsでの実装方法まで、実践的なデモとともに紹介します。
React × Framer Motion で作る一人麻雀ゲーム
ブラウザで遊べる一人麻雀ゲームを React と Framer Motion で実装します。牌のアニメーション、役判定、リーチ・ドラ・フリテンなど本格的な機能を解説します。
View Transitions API 完全ガイド - ネイティブアプリのようなページ遷移をWebで実現
View Transitions APIの基本から応用まで徹底解説。document.startViewTransition()、カスタムアニメーション、共有要素トランジション、クロスドキュメントトランジションまで、実践的なデモとともに紹介します。
Framer Motion 完全ガイド - React向け高性能アニメーションライブラリ
Framer Motionの基本から応用まで徹底解説。motion.div、variants、AnimatePresence、useScroll、ドラッグ、レイアウトアニメーションなど、実践的なデモとともに紹介します。
React Three Fiber 完全ガイド - Reactで3Dグラフィックスを宣言的に構築
Three.jsとReact Three Fiberの基本から応用まで徹底解説。メッシュ、ジオメトリ、マテリアル、ライティング、アニメーション、インタラクションなど実践的なデモとともに紹介します。
Svelte & SvelteKit 完全ガイド - コンパイラベースUIフレームワークの全貌
Svelteの革新的なコンパイラアプローチとSvelteKitによるフルスタック開発を徹底解説。Svelte 5のRunes、リアクティビティ、ルーティング、SSR/SSGまで実践的なコード例とともに紹介します。
tsParticles 完全ガイド - リッチなパーティクルアニメーションをReactで実装
tsParticlesを使用してReact/Next.jsでパーティクルアニメーションを実装する方法を解説。紙吹雪、雪、星空、花火など様々なエフェクトをインタラクティブなデモと共に紹介します。
GSAP ScrollTrigger 入門 - 応用編：パララックス、水平スクロール、スナップ
GSAPのScrollTriggerを使った高度なアニメーション技術を解説します。パララックス効果、水平スクロール、スナップ、staggerアニメーションなど、実践的なテクニックを紹介します。
GSAP ScrollTrigger 入門 - 基本編：スクロールアニメーションの実装
GSAPのScrollTriggerプラグインを使ったスクロールアニメーションの基本を解説します。セットアップからscrub、pin、toggleActionsまで、実際のデモとコード例で学べます。
React2Shell（CVE-2025-55182）の実際の被害事例 - クリプトマイナー感染とその対策
Next.jsの脆弱性CVE-2025-55182（React2Shell）を悪用したクリプトマイナー感染の実際の事例を報告します。発見の経緯、感染状況、そして行った対策について詳しく解説します。
jQuery 4.0 完全ガイド - 10年ぶりのメジャーアップデート全変更点解説
2026年1月17日にリリースされたjQuery 4.0.0の全変更点を、具体的なコード例とともに詳しく解説。非推奨APIの削除、ブラウザサポート変更、AJAX・CSS・イベントの仕様変更など、移行に必要な情報を網羅します。
Anime.js で作るサイトアニメーションの基本
Anime.jsを使ってWebサイトにスムーズなアニメーションを実装する方法を、実際に動くデモとコード例とともに解説します。移動、回転、色変化、タイムラインまで基礎から学べます。
Chart.js 入門 - 美しいグラフを簡単に実装する方法
Chart.jsを使ってWebサイトに棒グラフ、折れ線グラフ、円グラフなど様々なチャートを実装する方法を、実践的なコード例とともに解説します。
YouTube動画の文字起こしデータを一括取得＆AI要約 - Pythonツール開発記
大量のYouTube動画から目当ての情報を効率的に見つけるため、youtube-transcript-apiを使った文字起こし一括取得ツールを開発しました。IPブロック問題の解決方法やCursor AIでの要約活用法まで詳しく解説します。
oath-toolkit で CLI から OTP を取得する - 自動化時代の2FA対応
Google Authenticator で使う OTP（ワンタイムパスワード）を CLI で取得する方法。oath-toolkit を使えば、Playwright や AI エージェントでのログイン自動化にも対応できます。
Chatwork API × AIエージェントでチームメンバーの状況を分析する
Chatwork APIで日々のやり取りを蓄積し、AIエージェントにチームメンバーのタスク状況や困りごとを分析させる実験。ローカルLLMで情報を集約するシステムの実践編。
Googleスプレッドシート × MCP × Cursor で スプレッドシート自動編集を試してみる
CursorのMCP機能を使ってGoogleスプレッドシートを自動操作する方法を解説。GCPの設定からMCP連携、実際にエラー調査レポートをスプレッドシートにまとめるまでの手順を紹介します。
ローカルの技術メモをObsidianへ移行し、Dropbox経由でPCとスマホで同期する
長年蓄積した技術メモをObsidianに整理し、Dropbox + Dropsyncでスマホからも参照可能にした移行作業の記録。
Neovim マークダウンプレビュー - markdown-preview.nvim を選んだ理由
Neovimでマークダウンをプレビューするプラグインを比較検討。markview.nvimとmarkdown-preview.nvimを試した結果、ブラウザプレビュー型のmarkdown-preview.nvimを選択。Mermaid対応も決め手に。
おすすめスニペットツール - espanso と LuaSnip の使い分け
システム全体で使えるespansoと、Neovimのファイルタイプ別スニペットエンジンLuaSnipを使い分けて効率化。外部スクリプト連携やBetter Touch Toolを使った入力ミス対策も紹介。
mini.nvim シリーズ #02 - mini.diff で変更行の可視化とhunk操作
mini.diffを使ってNeovimでGitの変更行を可視化し、hunk単位でのステージ・リセット操作を実現する設定を紹介します。gitsignsからの乗り換えにも最適。
Neovim小ネタ - バッファを開き直さずにsudo権限で保存する
Neovimで編集中のファイルをsudo権限で保存する方法。Vimのsudo.vimが使えない理由と、プラグインなしで実現するカスタムコマンドの実装を解説します。
SEO対策チェックリスト - サイト公開時に最低限やっておきたい設定
サイトを公開したら確認しておきたいSEO設定のチェックリスト。HTMLメタタグ、HTTPステータスコード、画像設定、HTML構文など、基本的な項目をまとめました。
Liquid Glass デザイン完全ガイド - CSS実装からFigma制作まで
Apple発の新UIスタイル「Liquid Glass」の考え方、CSSでの実装方法、Figmaでの作り方を解説します。Glassmorphismの進化系とも言えるこのデザインを、自分のプロジェクトに取り入れてみませんか。
ロゴデザインで私がこだわる3つのポイント - printemps tokyo ロゴの設計思想
黄金比、和モダン、ミニマリズム。printemps tokyo のロゴデザインを例に、私がロゴを作る際にこだわっているポイントを解説します。
Next.js App Router に GTM と GA4 を導入する方法
Next.js の公式パッケージ @next/third-parties を使って、GTM（Google Tag Manager）経由で GA4 を導入する方法を解説します。たった数行のコードで完了します。
超緊急：React Server Components に CVSS 10.0 の RCE 脆弱性「React2Shell」CVE-2025-55182
React Server Componentsに認証不要でリモートコード実行（RCE）可能な脆弱性「React2Shell」が発見されました。CVSSスコアは最大値の10.0。Next.js含む多くのフレームワークが影響。今すぐ対応が必要です。
vscode-neovim が最高だった - 本物の Neovim を VSCode/Cursor で使う
VSCode や Cursor で本物の Neovim を動かす vscode-neovim 拡張機能を使ってみたら、今までの Vim キーバインド系プラグインとは次元が違った話
mini.nvim 探訪 Day 1: 直感的なファイル操作を実現する mini.files
Neovimの軽量プラグイン集mini.nvimから、Millerカラム方式のファイルエクスプローラーmini.filesを紹介します。バッファ編集によるファイル操作が革命的です。
2FA開発で知ったArgon2：パスワードハッシュ化の新時代
MD5やSHA-1で十分だと思っていたが、Argon2を知って世界が変わった。パスワードハッシュ化の正解がここにある。
Cursor × Marpでプレゼン資料作成が革命された話
AIとMarkdownで、PowerPointから解放された。技術プレゼンのワークフローが根本的に変わった。
ローカルLLMで情報を集約する - プライバシーを守りながらAI活用する未来
散らばった情報を一箇所に集約。ローカルLLMで検索・要約・自動化。コストゼロでプライバシーも守る。
ブログのデザインをSolarized Dark風に変更した話
目に優しいダークテーマ、Solarized。エディタで使ってたカラースキームを、ブログにも適用しました。
2025年のテストフレームワーク事情 - Vitest × Playwright で構築する鉄壁のテスト環境
テスト書いてますか？このブログは、最新のテストフレームワークで守られています。
pyenv から uv に乗り換えて世界が変わった話
Pythonのバージョン管理、もう迷わない。uvが速すぎて戻れなくなった。
OANDA Tick データ自動ダウンロードバッチを構築した話
毎月手動でダウンロードするのに疲れた。Seleniumで自動化したら人生が変わった。
VimからNeovimへ移行した理由とLazyVimの導入
長年使ってきたVimからNeovimへ移行し、LazyVimで快適な開発環境を構築した記録
AI搭載のRSSリーダー・記事要約サービス開発をスタート
オープンソースAIを活用したRSSリーダー・記事要約サービスの開発プロジェクトを開始しました。
Next.js App Router を使ってみて感じた革命的な変化
Pages Routerから移行して分かった。App Routerは別次元だった。
技術ブログ始めました - Next.js × Tailwind CSS で構築
「アウトプットしなきゃ」と思い続けて数年。ついに技術ブログを立ち上げました。