https://sakimyto.com sakimyto — ブラウザゲーム＆インタラクション実装集 ja Fri, 12 Jun 2026 02:34:41 GMT https://sakimyto.com/blog/indexnow-cloudflare-pages sitemap.xml をソースに IndexNow へ一括送信する実装と運用。Cloudflare Pages のデプロイ後に URL を確実に通知して、新規記事の発見を最短化する。 Sat, 23 May 2026 00:00:00 GMT https://sakimyto.com/blog/indexnow-cloudflare-pages blog https://sakimyto.com/blog/ant-farm-pheromone-simulation フェロモンベースの経路探索をエージェントベースモデルで実装し、アリの群知能をブラウザで再現する。蒸発・拡散パラメータの調整で創発パターンがどう変わるかも検証した。 Thu, 12 Mar 2026 00:00:00 GMT https://sakimyto.com/blog/ant-farm-pheromone-simulation blog https://sakimyto.com/blog/audio-programming-references Piano、Guitar、Thereminなど11個の音楽コンポーネント実装で学んだWeb Audio APIの勘所と、音プログラミングで参考にした書籍・リソース集。 Thu, 12 Mar 2026 00:00:00 GMT https://sakimyto.com/blog/audio-programming-references blog https://sakimyto.com/blog/breakout-game-canvas Canvas APIとrequestAnimationFrameでBreakoutゲーム（ブロック崩し）を実装する。パドルの反射角計算、ブロック配置のレベルデザイン、スコア管理の勘所をコンポーネント実装を通じて解説。 Thu, 12 Mar 2026 00:00:00 GMT https://sakimyto.com/blog/breakout-game-canvas blog https://sakimyto.com/blog/browser-game-dev-setup-2026 203個のブラウザゲーム・インタラクションを開発する環境を紹介。Claude Code中心のワークフロー、bun + Biome + Vite、Git Worktreeによる並列開発。 Thu, 12 Mar 2026 00:00:00 GMT https://sakimyto.com/blog/browser-game-dev-setup-2026 blog https://sakimyto.com/blog/canvas-component-bug-patterns 203個のインタラクティブコンポーネントを開発する過程で実際に遭遇したバグをgit履歴から集計し、頻出パターンと修正手法をTop 10形式でまとめた。 Thu, 12 Mar 2026 00:00:00 GMT https://sakimyto.com/blog/canvas-component-bug-patterns blog https://sakimyto.com/blog/claude-code-bulk-fix-200-components 203個のインタラクティブコンポーネントに潜むバグを、Claude Codeで6コミット・100+ファイル一括修正した実践記録。分類・テンプレート化・検証の全工程を公開。 Thu, 12 Mar 2026 00:00:00 GMT https://sakimyto.com/blog/claude-code-bulk-fix-200-components blog https://sakimyto.com/blog/claude-md-evolution 323コミットのプロジェクトでCLAUDE.mdを3ヶ月間更新し続けた記録。効いたルール、効かなかったルール、そして「助言的」設定の限界。 Thu, 12 Mar 2026 00:00:00 GMT https://sakimyto.com/blog/claude-md-evolution blog https://sakimyto.com/blog/canvas-vs-dom-decision-criteria 203個のインタラクティブコンポーネントをCanvas APIとDOMに振り分けた判断基準を、実例と実測データで解説する。 Thu, 12 Mar 2026 00:00:00 GMT https://sakimyto.com/blog/canvas-vs-dom-decision-criteria blog https://sakimyto.com/blog/fourier-series-sound-synthesis 矩形波・鋸歯状波・三角波をFourier級数で合成し、エピサイクルで可視化する。倍音の加算が音色をどう変えるか、Web Audio APIによる音合成の実装を通じて体感する。 Thu, 12 Mar 2026 00:00:00 GMT https://sakimyto.com/blog/fourier-series-sound-synthesis blog https://sakimyto.com/blog/custom-physics-engine-180-lines physics.tsの166行で2D物理エンジンを自作し、Matter.jsの300KBを4KBに削減した。重力・衝突・バウンドに絞り、拘束・摩擦・スタッキングを諦めたトレードオフを解説する。 Thu, 12 Mar 2026 00:00:00 GMT https://sakimyto.com/blog/custom-physics-engine-180-lines blog https://sakimyto.com/blog/double-pendulum-chaos 二重振り子シミュレーションの実装を通じて、ラグランジュ力学による運動方程式の導出、RK4積分の安定性、NaN対策、初期値鋭敏性の可視化までを解説する。 Thu, 12 Mar 2026 00:00:00 GMT https://sakimyto.com/blog/double-pendulum-chaos blog https://sakimyto.com/blog/maze-generation-algorithms 再帰バックトラッキング、Kruskal法、Prim法など複数の迷路生成アルゴリズムの特性と、生成される迷路の構造的な違いを比較する。 Thu, 12 Mar 2026 00:00:00 GMT https://sakimyto.com/blog/maze-generation-algorithms blog https://sakimyto.com/blog/one-session-one-task Claude Codeで203コンポーネントを開発する中で、「1セッション1タスク」が最も生産性に効いた原則だった。コンテキスト枯渇の実例と対策。 Thu, 12 Mar 2026 00:00:00 GMT https://sakimyto.com/blog/one-session-one-task blog https://sakimyto.com/blog/physics-simulation-books 203個のインタラクティブデモの裏にある物理・数学の知識は、主に3冊の書籍から得た。各書籍のどの章がどの実装に活きたかを具体的に紹介する。 Thu, 12 Mar 2026 00:00:00 GMT https://sakimyto.com/blog/physics-simulation-books blog https://sakimyto.com/blog/pinball-physics-simulation ピンボールの物理演算をCanvas APIで実装する。フリッパーの回転運動、バンパーの反発、重力とボールの挙動を解説。 Thu, 12 Mar 2026 00:00:00 GMT https://sakimyto.com/blog/pinball-physics-simulation blog https://sakimyto.com/blog/reaction-diffusion-parameter-space Gray-Scott Reaction-Diffusionモデルのfeed/kill率を変えると、斑点・縞模様・珊瑚・細胞分裂と全く異なるパターンが現れる。200×200グリッドでの実装と探索記録。 Thu, 12 Mar 2026 00:00:00 GMT https://sakimyto.com/blog/reaction-diffusion-parameter-space blog https://sakimyto.com/blog/sandpile-self-organized-criticality Bak-Tang-Wiesenfeld砂山モデルの実装を通じて、自己組織化臨界現象をブラウザで可視化する。べき乗則に従う雪崩分布の計測とフラクタルパターンの生成過程を解説。 Thu, 12 Mar 2026 00:00:00 GMT https://sakimyto.com/blog/sandpile-self-organized-criticality blog https://sakimyto.com/blog/tailwind-v4-migration Tailwind CSS v3からv4への移行で踏んだ破壊的変更と、@custom-variantを使ったダークモード/ライトモードの実装パターン。 Thu, 12 Mar 2026 00:00:00 GMT https://sakimyto.com/blog/tailwind-v4-migration blog https://sakimyto.com/blog/tanstack-start-cloudflare-pages CF PagesにTanStack Start v1をデプロイする過程で踏んだ5つの地雷 — Viteプラグイン順序、ServerFnバグ、FOUC対策など — の回避策を実コードで解説する。 Thu, 12 Mar 2026 00:00:00 GMT https://sakimyto.com/blog/tanstack-start-cloudflare-pages blog https://sakimyto.com/blog/why-not-nextjs 203個のインタラクティブコンポーネントを載せるポートフォリオで、Next.jsではなくTanStack Start + Cloudflare Pagesを選んだ技術選定の記録。 Thu, 12 Mar 2026 00:00:00 GMT https://sakimyto.com/blog/why-not-nextjs blog https://sakimyto.com/blog/building-interactive-portfolio ポートフォリオサイトにMatter.jsを使わず約180行の軽量物理エンジンをTypeScriptで自作した経緯と設計判断。バンドルサイズ300KBを4KBに削減しつつ60fpsを維持した手法を解説。 Tue, 10 Mar 2026 00:00:00 GMT https://sakimyto.com/blog/building-interactive-portfolio blog https://sakimyto.com/blog/canvas-particle-system requestAnimationFrame、固定タイムステップ、DPI対応、空間分割を駆使して、Canvas APIで200個以上のパーティクルを60fpsで動かす設計手法を解説。 Sun, 08 Mar 2026 00:00:00 GMT https://sakimyto.com/blog/canvas-particle-system blog https://sakimyto.com/blog/web-audio-instruments Web Audio APIのOscillatorNode、GainNode、ADSRエンベロープを使い、ブラウザで演奏可能なPiano・Guitar・Kalimbaを実装した技術解説。 Fri, 06 Mar 2026 00:00:00 GMT https://sakimyto.com/blog/web-audio-instruments blog https://sakimyto.com/blog/fluid-simulation-browser Navier-Stokes方程式を簡略化し、100×60のグリッドでリアルタイムに流体を動かす。拡散・移流・圧力ソルバーの実装詳細。 Wed, 04 Mar 2026 00:00:00 GMT https://sakimyto.com/blog/fluid-simulation-browser blog https://sakimyto.com/blog/fractal-mandelbrot 複素数反復、エスケープタイムアルゴリズム、IFS（反復関数系）、再帰描画を使い、ブラウザでフラクタルを描画する実装解説。 Mon, 02 Mar 2026 00:00:00 GMT https://sakimyto.com/blog/fractal-mandelbrot blog https://sakimyto.com/blog/perlin-noise-terrain 勾配ノイズの数学的な仕組みからオクターブ合成、Canvas上での3Dメッシュ描画まで、Perlinノイズによる自然な地形生成をステップごとに実装・解説する。 Sat, 28 Feb 2026 00:00:00 GMT https://sakimyto.com/blog/perlin-noise-terrain blog https://sakimyto.com/blog/collision-detection physics.tsの実装を解説しながら、円同士・円と矩形の衝突判定アルゴリズム、反発係数によるバウンド制御、インパルスベースの衝突応答の数学的背景を掘り下げる。 Thu, 26 Feb 2026 00:00:00 GMT https://sakimyto.com/blog/collision-detection blog https://sakimyto.com/blog/css-interactive-ui FidgetSpinner、InfiniteKnob、ToggleSwitchなどのDOM+CSSベースのインタラクティブUIで活用したtransform、transition、custom propertiesのCSS技法を実例で解説する。 Tue, 24 Feb 2026 00:00:00 GMT https://sakimyto.com/blog/css-interactive-ui blog https://sakimyto.com/blog/wave-physics-visualization 1D・2D波動方程式を差分法で実装し、干渉・回折・共鳴パターンをCanvasで可視化する。WaveInterference、WaveEquation、ChladniPlateの描画手法と物理の対応を解説。 Sun, 22 Feb 2026 00:00:00 GMT https://sakimyto.com/blog/wave-physics-visualization blog https://sakimyto.com/blog/pathfinding-algorithms MazeRunnerコンポーネントで実装したA*、BFS、DFSの探索過程を可視化する技法と、各アルゴリズムの比較を解説する。 Fri, 20 Feb 2026 00:00:00 GMT https://sakimyto.com/blog/pathfinding-algorithms blog https://sakimyto.com/blog/cellular-automata ライフゲーム、WaveFunctionCollapse、SandFallの実装を通じて、ルールベースのセルオートマトンの設計パターンとUint8Arrayによるグリッド最適化手法を解説する。 Wed, 18 Feb 2026 00:00:00 GMT https://sakimyto.com/blog/cellular-automata blog https://sakimyto.com/blog/typescript-game-loop Snake、Tetris、Breakoutの実装を通じて、TypeScriptの型システムを活用したゲーム状態管理とフレームレート制御を解説する。 Mon, 16 Feb 2026 00:00:00 GMT https://sakimyto.com/blog/typescript-game-loop blog https://sakimyto.com/blog/nbody-gravity NBody、SolarSystem、GravityWellコンポーネントで使った万有引力計算、ベクトル演算、積分法、軌道描画の実装詳細。 Sat, 14 Feb 2026 00:00:00 GMT https://sakimyto.com/blog/nbody-gravity blog https://sakimyto.com/picks/desk-setup/dev-keyboard HHKB、Realforce、Keychron、NuPhy、Logicoolの人気キーボード5台を独自スコアリングで徹底比較。打鍵感・静音性・カスタマイズ性・接続性・コスパの加重平均で最適な一台を見つけよう。 Fri, 13 Mar 2026 00:00:00 GMT https://sakimyto.com/picks/desk-setup/dev-keyboard picks https://sakimyto.com/picks/desk-setup/dev-monitor Dell・LG・BenQなどおすすめモニター5台を2026年版独自スコアリングで徹底比較。画質・目の疲れにくさ・接続性・コスパの加重平均で最適な一台を見つけよう。 Sat, 14 Mar 2026 00:00:00 GMT https://sakimyto.com/picks/desk-setup/dev-monitor picks https://sakimyto.com/picks/desk-setup/dev-mouse MX Master 3S・MX Ergo S・DeathAdder V3 Proなどおすすめマウス5台を2026年版独自スコアリングで徹底比較。操作精度・エルゴノミクス・コスパの加重平均で最適な一台を見つけよう。 Sat, 14 Mar 2026 00:00:00 GMT https://sakimyto.com/picks/desk-setup/dev-mouse picks https://sakimyto.com/picks/desk-setup/dev-chair Aeron・Steelcase Leap V2・Contessa IIなどおすすめチェア5脚を2026年版独自スコアリングで徹底比較。座り心地・調整機能・耐久性・コスパの加重平均で最適な一脚を見つけよう。 Sat, 14 Mar 2026 00:00:00 GMT https://sakimyto.com/picks/desk-setup/dev-chair picks https://sakimyto.com/picks/dev-tools/terminal-emulator WezTerm・Ghostty・Alacrittyなどおすすめターミナル5本を2026年版独自スコアリングで徹底比較。描画速度・カスタマイズ性・安定性の加重平均で最適な一本を見つけよう。 Sat, 14 Mar 2026 00:00:00 GMT https://sakimyto.com/picks/dev-tools/terminal-emulator picks https://sakimyto.com/picks/dev-tools/code-editor Cursor・VS Code・Zedなどおすすめコードエディタ5本を2026年版独自スコアリングで徹底比較。AI統合・パフォーマンス・拡張性・コスパの加重平均で最適な一本を見つけよう。 Sat, 14 Mar 2026 00:00:00 GMT https://sakimyto.com/picks/dev-tools/code-editor picks https://sakimyto.com/picks/dev-tools/api-client Bruno・Postman・InsomniaなどおすすめAPIクライアント5本を2026年版独自スコアリングで徹底比較。使いやすさ・API対応力・チーム連携の加重平均で最適な一本を見つけよう。 Sat, 14 Mar 2026 00:00:00 GMT https://sakimyto.com/picks/dev-tools/api-client picks https://sakimyto.com/picks/books/typescript-books Effective TypeScript・サバイバルTypeScript等おすすめTS本5冊を2026年版独自スコアリングで徹底比較。内容の深さ・実践性・初学者フレンドリーの加重平均で最適な一冊を見つけよう。 Sat, 14 Mar 2026 00:00:00 GMT https://sakimyto.com/picks/books/typescript-books picks https://sakimyto.com/picks/books/system-design-books DDIA・Clean Architecture・System Design Interviewなどおすすめ設計本5冊を2026年版独自スコアリングで徹底比較。内容の深さ・実践性・網羅性の加重平均で最適な一冊を見つけよう。 Sat, 14 Mar 2026 00:00:00 GMT https://sakimyto.com/picks/books/system-design-books picks https://sakimyto.com/picks/books/algorithm-books CLRS・蟻本・けんちょん本など定番アルゴリズム本5冊を2026年版独自スコアリングで徹底比較。内容の深さ・実装例の加重平均で最適な一冊を見つけよう。 Sat, 14 Mar 2026 00:00:00 GMT https://sakimyto.com/picks/books/algorithm-books picks