Web開発に関する学習記録をまとめたブログです。https://suntory-n-water.com/jahttps://suntory-n-water.com/blog/no-smartphone-trip/https://suntory-n-water.com/blog/no-smartphone-trip/スマートフォンの制限をかけても自分で突破してしまうから、物理的に持っていかない旅をしました。温泉地である越後湯沢の宿で1泊2日、本を読んでぼんやりしてきた感想です。Sun, 12 Apr 2026 00:00:00 GMT旅行ポエムhttps://suntory-n-water.com/blog/agent-browser-vs-playwright-cli-revisit/https://suntory-n-water.com/blog/agent-browser-vs-playwright-cli-revisit/agent-browserがRustネイティブになった今、playwright-cliと改めて比較しました。-i -cオプションでトークン差が約6%まで縮まり、前回の「40%差」は実質解消。ネットワーク監視・diff機能も含めた現時点の選択基準を整理します。Sun, 05 Apr 2026 00:00:00 GMTPlaywrightagent-browserAIhttps://suntory-n-water.com/blog/built-a-blog-site-with-cloudflare-emdash-and-access-control/https://suntory-n-water.com/blog/built-a-blog-site-with-cloudflare-emdash-and-access-control/Cloudflare EmDashのマーケティングテンプレートをベースに、ブログ機能の移植、seed反映の確認、デザイン調整、Cloudflare Accessによる管理画面保護まで試した内容をまとめました。Sun, 05 Apr 2026 00:00:00 GMTCloudflareCMSAstroTypeScripthttps://suntory-n-water.com/blog/cc-spinner-customize-claude-code-spinner-verbs/https://suntory-n-water.com/blog/cc-spinner-customize-claude-code-spinner-verbs/Claude Code の処理中に表示される Spinner Verbs をカスタマイズできる CLI ツール「cc-spinner」を作りました。アニメのセリフを入れたら記憶が蘇る体験ができるのではと思い、1日で形にしました。Sat, 14 Mar 2026 00:00:00 GMTAIClaudeCodeOSShttps://suntory-n-water.com/blog/claude-code-pro-to-max-one-month-review/https://suntory-n-water.com/blog/claude-code-pro-to-max-one-month-review/Claude Code を Pro プランで半年間使い、Max 20x に移行して1ヶ月。Opus をフル活用できた喜びと、「使わなきゃ」という圧に追われた正直な体験談です。性能の話だけでなく、課金モデルと自分の性格の相性について考えました。Sat, 07 Mar 2026 00:00:00 GMTAIClaudeCodehttps://suntory-n-water.com/blog/cloudflare-workers-preview-version-cleanup/https://suntory-n-water.com/blog/cloudflare-workers-preview-version-cleanup/Cloudflare Workers のプレビュー URL は、PR をマージしても自動で無効化されません。バージョンの削除ではアクセスを止められないため、Subdomain API の previews_enabled を GitHub Actions で自動制御する方法を実装しました。Mon, 23 Feb 2026 00:00:00 GMTCloudflareWorkersGitHubActionsセキュリティhttps://suntory-n-water.com/blog/github-agentic-workflows-ci-doctor/https://suntory-n-water.com/blog/github-agentic-workflows-ci-doctor/GitHub Agentic Workflowsを使って、CIの失敗を自動で診断・修正するワークフローを作りました。Markdownに自然言語で指示を書くだけで、AIエージェントがログを解析し、原因を特定し、修正パッチまで生成します。セットアップから検証結果、セキュリティ設計まで実体験をもとに解説します。Sun, 22 Feb 2026 00:00:00 GMTAIGitHubGitHubActionsGitHubAgenticWorkflowshttps://suntory-n-water.com/blog/built-claude-code-changelog-viewer/https://suntory-n-water.com/blog/built-claude-code-changelog-viewer/Claude Codeは更新頻度が高く、英語のCHANGELOGを毎回追うのは大変です。日本語で自動解説してくれるサービスが見当たらなかったので、Gemini APIとGitHub Actionsで更新処理を自動化したWebサイトを作りました。Thu, 19 Feb 2026 00:00:00 GMTAIClaudeCodeAstrohttps://suntory-n-water.com/blog/visceral-aversion-to-ai-generated-text/https://suntory-n-water.com/blog/visceral-aversion-to-ai-generated-text/24時間365日AIを使い倒している私が、技術記事のAI生成文章に感じる「ゾワッ」とする感覚を言語化しました。Markdown記法の残留、不自然なコロン、ビルドがコケるTypeScriptのコード。「またAIね」と萎える瞬間に潜む3つの感情と、使い手だからこそ分かる「AI臭さ」の正体、そしてAI時代に求める技術記事の姿を考えます。Wed, 18 Feb 2026 00:00:00 GMTポエムAIhttps://suntory-n-water.com/blog/bet-everything-on-chichijima/https://suntory-n-water.com/blog/bet-everything-on-chichijima/片道24時間、週1便、乗船者800名。不便さが強制する「何もしない時間」が、他の観光地では得られない体験をくれる。二度訪れた父島の魅力を語ります。Sun, 08 Feb 2026 00:00:00 GMT旅行ポエムhttps://suntory-n-water.com/blog/playwright-cli-vs-agent-browser-token-comparison/https://suntory-n-water.com/blog/playwright-cli-vs-agent-browser-token-comparison/Playwright CLIとagent-browserで同一操作を行い、トークン消費量を比較しました。スナップショットをファイル出力してGrep検索する設計思想により、Playwright CLIはagent-browserより約40%のトークン削減を達成しています。本記事ではAIブラウザ操作ツールの設計思想の違いがコストに与える影響を検証します。Sun, 25 Jan 2026 00:00:00 GMTPlaywrightagent-browserAIhttps://suntory-n-water.com/blog/i-tried-using-agent-browser/https://suntory-n-water.com/blog/i-tried-using-agent-browser/agent-browserの「Up to 93% less context than Playwright MCP」は本当か気になったので、Yahoo! JAPANを対象にPlaywright MCPと比較してデータ削減率とトークン消費量を検証します。Mon, 12 Jan 2026 00:00:00 GMTagent-browserPlaywrightAIhttps://suntory-n-water.com/blog/my-playwright-was-wrong/https://suntory-n-water.com/blog/my-playwright-was-wrong/過去のプロジェクトから流用したPlaywrightのコードは「動いて」いました。しかし、偶然ドキュメントを読み直したとき、「動く」と「正しく動く」の間には設計思想の違いがあることに気づきました。page.evaluate()ではなくlocatorを使うべき理由、waitForNavigation()が非推奨である理由。公式ドキュメントには、単なるAPIリファレンスではなく「なぜこの方法が推奨されるのか」が書かれています。時間がない現実の中で、それでもドキュメントを読む価値とは何かを考えます。Mon, 12 Jan 2026 00:00:00 GMTPlaywrighthttps://suntory-n-water.com/blog/cognitive-load-management-with-diagrams/https://suntory-n-water.com/blog/cognitive-load-management-with-diagrams/AI時代、文字を読む量が圧倒的に増えています。生成AIからの提案を承認する度に大量のテキストを読み込む認知負荷の高さに「もう無理だ」と感じた経験から、技術ブログに図解機能を実装しました。図解は「記憶の定着装置」として機能し、全体像を視覚的に示すことで認知負荷を下げます。本記事では、なぜ図解が有効なのか、そしてAIを活用してどう実装したのかを解説します。Sun, 04 Jan 2026 00:00:00 GMTブログAIhttps://suntory-n-water.com/blog/claude-code-dynamic-skill-loading/https://suntory-n-water.com/blog/claude-code-dynamic-skill-loading/Claude CodeのAgent Skillsは、ベストプラクティスに従った実装を自動化する優れた仕組みですが、Claudeの推論による実行判定には限界があります。Playwrightを例に挙げると、「クリック操作を修正して」のような自然な指示では、descriptionに「Playwright」が含まれていてもスキルが起動しないことがあります。本記事では、UserPromptSubmitフックを活用し、キーワードマッチングによってスキルを確実に起動させる実装方法を解説します。Tue, 30 Dec 2025 00:00:00 GMTClaudeCodeAgentsSkillshttps://suntory-n-water.com/blog/automate-dependency-updates-with-renovate/https://suntory-n-water.com/blog/automate-dependency-updates-with-renovate/依存関係更新の手動対応をやめて、Renovate で自動化する方法をまとめました。クールダウン期間(minimum release age)を設定してサプライチェーン攻撃のリスクを回避しつつ、手間をかけずに安全性を維持する「頑張らない運用」の設計方針を紹介します。Thu, 25 Dec 2025 00:00:00 GMTRenovateGitHubActionshttps://suntory-n-water.com/blog/migrating-nextjs-to-astro/https://suntory-n-water.com/blog/migrating-nextjs-to-astro/ブログに「何でもできる」Next.jsは過剰スペックでした。新機能に追いつけず、Web標準APIとの相性に悩んだ末、SSGに特化したAstroへ移行しました。拡張性を捨て、「必要最小限」を選んだ技術選択の記録です。Sat, 20 Dec 2025 00:00:00 GMTAstroNext.jsPlaywrightブログhttps://suntory-n-water.com/blog/enforce-rules-with-stop-hooks-and-biome-v2/https://suntory-n-water.com/blog/enforce-rules-with-stop-hooks-and-biome-v2/AIに「ルールを覚えておいて」と頼むのは間違ったアプローチです。Claude CodeのHooksとBiome v2を使えば、規約違反を自動検知してAI自身に修正させる環境を構築できます。Sun, 07 Dec 2025 00:00:00 GMTClaudeCodehttps://suntory-n-water.com/blog/delegate-coding-rules-to-biome/https://suntory-n-water.com/blog/delegate-coding-rules-to-biome/Claude Code の CLAUDE.md に記載したコーディング規約が守られない課題を、Biome v2.x の GritQL 機能を使って解決します。「引数が2個以上の場合はオブジェクト形式にする」といった独自ルールを Linter で機械的に強制することで、コンテキストウィンドウを圧迫せず、AI が確実にルールを遵守できる環境を構築する方法を解説します。Sat, 06 Dec 2025 00:00:00 GMTBiomeClaudeCodehttps://suntory-n-water.com/blog/cloudflare-browser-rendering-markdown-example/https://suntory-n-water.com/blog/cloudflare-browser-rendering-markdown-example/Cloudflare Browser RenderingのREST APIを使って、WebページをMarkdownに変換するAPIを構築する方法を解説します。不要な要素の削除やリソース最適化など、実践的な実装例を紹介します。Mon, 24 Nov 2025 00:00:00 GMTCloudflareCloudflareWorkershttps://suntory-n-water.com/blog/annoying-flickering-blog-svg-icon-fix/https://suntory-n-water.com/blog/annoying-flickering-blog-svg-icon-fix/Next.jsのImageコンポーネントで発生するSVGアイコンのちらつき問題を、SVGインライン化によって解決した実装記録です。publicフォルダ配置では解消できなかった初回表示時のちらつきを、ビルド時にSVGコードを埋め込むことで無くしました。Sun, 23 Nov 2025 00:00:00 GMT絵文字ReactSVGNext.jshttps://suntory-n-water.com/blog/nextjs-pagefind-implementation/https://suntory-n-water.com/blog/nextjs-pagefind-implementation/Next.js (App Router) のブログに Pagefind で全文検索機能を実装する手順を紹介します。public ディレクトリへのインデックス出力設定や、クライアントサイドでの動的インポートなど、実装に必要なポイントをコード付きで解説します。Sat, 22 Nov 2025 00:00:00 GMTNext.jsPagefindReacthttps://suntory-n-water.com/blog/github-actions-security-basics-minimum-measures/https://suntory-n-water.com/blog/github-actions-security-basics-minimum-measures/GitHub Actionsで発生しうるScript InjectionやPull Request Target、権限の過剰付与などの脆弱性と、actionlint・ghalint・zizmor等の静的解析ツールを使った具体的な対策方法を解説します。Mon, 17 Nov 2025 00:00:00 GMTGitHubGitHubActionsセキュリティhttps://suntory-n-water.com/blog/blog-new-architecture/https://suntory-n-water.com/blog/blog-new-architecture/NotionとLINEメッセージングAPIを使った外出先からのブログ更新システムから、ObsidianとMarkdownベースのシンプルな管理方式へ移行した経緯を紹介します。Sun, 16 Nov 2025 00:00:00 GMTMarkdownNotionObsidianhttps://suntory-n-water.com/blog/i-tried-running-code-using-official/https://suntory-n-water.com/blog/i-tried-running-code-using-official/AnthropicのMCPコード実行手法をSerena MCPで試しましたが、ツール数が多く型定義が複雑なMCPではうまくいきませんでした。シンプルなMCPでの検証が必要という学びを共有します。Sun, 09 Nov 2025 00:00:00 GMTMCPClaudeCodeSerenahttps://suntory-n-water.com/blog/did-you-know-you-can-easily/https://suntory-n-water.com/blog/did-you-know-you-can-easily/Google Apps Script(GAS)を使うと社内限定で使えるWebアプリケーションを簡単に構築できます。claspとTypeScriptを使ってGoogleDriveのファイルを検索するアプリケーションを作成します。Mon, 03 Nov 2025 00:00:00 GMTTypeScriptGASGoogleAppScriptclasphttps://suntory-n-water.com/blog/there-breaking-change-notion-apis-database/https://suntory-n-water.com/blog/there-breaking-change-notion-apis-database/Notion APIのバージョン2025-09-03における破壊的変更について解説します。単一データベースモデルからマルチソースデータベースモデルへの移行に伴う実装修正方法を紹介します。Sat, 18 Oct 2025 00:00:00 GMTTypeScriptNotionNotionAPIhttps://suntory-n-water.com/blog/dont-forget-check-typescript-types-stop/https://suntory-n-water.com/blog/dont-forget-check-typescript-types-stop/Claude CodeのStop Hooksを使って、TypeScriptの型チェックを自動実行する仕組みを実装します。物忘れを仕組みでカバーして、効率的な開発フローを実現します。Sun, 28 Sep 2025 00:00:00 GMTTypeScriptClaudeCodehttps://suntory-n-water.com/blog/disable-automatic-browser-launch-serena-mcp/https://suntory-n-water.com/blog/disable-automatic-browser-launch-serena-mcp/Dev Container環境でSerena MCPのブラウザ自動起動を無効化する方法を解説します。グローバル設定ファイルとdevcontainer.jsonの設定でダッシュボードの自動起動を制御します。Sat, 27 Sep 2025 00:00:00 GMTMCPDevContainerClaudeCodeSerenahttps://suntory-n-water.com/blog/nextjs-cloudflare-devcontainer-glibc-issue/https://suntory-n-water.com/blog/nextjs-cloudflare-devcontainer-glibc-issue/Debian 11 bullseyeベースのdevcontainerでNext.js 15 + OpenNext.jsの開発サーバーが起動せず、Debian 12 bookwormベースに変更して解決した事例。glibcバージョン要件とworkerdの実行互換について整理。Sun, 21 Sep 2025 00:00:00 GMTNext.jsCloudflareOpenNext.jsDockerhttps://suntory-n-water.com/blog/i-did-pretooluse-failed-non-blocking-status/https://suntory-n-water.com/blog/i-did-pretooluse-failed-non-blocking-status/Claude CodeのPreToolUseがfailed with non-blocking status code 127になったときの解決方法を解説します。改行コードがCRLFになっている場合にLFに変更することで解決します。Thu, 28 Aug 2025 00:00:00 GMTClaudeCodeSerenahttps://suntory-n-water.com/blog/cc-vault-curation-media/https://suntory-n-water.com/blog/cc-vault-curation-media/Claude Codeの新機能が出るたびに色々なサイトを見るのが面倒くさいなと思って、ZennとQiitaのClaude Code記事をまとめるツール「CC-Vault」を作りました。実務でClaude Code使ってて同じような悩みを持つ人に刺さるかもしれません。Sun, 13 Jul 2025 00:00:00 GMTClaudeClaudeCodehttps://suntory-n-water.com/blog/honox-ssr-hydration-issue/https://suntory-n-water.com/blog/honox-ssr-hydration-issue/HonoXのSSRとクライアントHydrationの同期問題を解説。サーバーで正しく描画された表示がクライアントで元に戻る現象の原因を解明し、確実な状態同期を行う実装パターンを紹介します。Sun, 29 Jun 2025 00:00:00 GMTHonoXReacthttps://suntory-n-water.com/blog/i-tried-i-got-illegal-invocation/https://suntory-n-water.com/blog/i-tried-i-got-illegal-invocation/Cloudflare Workers上でMCPサーバーを構築し、Notion APIを使用する際に遭遇した「TypeError: Illegal invocation」エラーの根本原因の特定から解決までの検証プロセスを詳しく解説します。Sun, 08 Jun 2025 00:00:00 GMTMCPCloudflareWorkersNotionAPIhttps://suntory-n-water.com/blog/installing-vitest-honox/https://suntory-n-water.com/blog/installing-vitest-honox/HonoXアプリケーションにVitestを導入する方法を解説します。Cloudflare WorkersのバインディングD1を利用するHonoXアプリケーションのテスト環境構築ガイドです。Sun, 01 Jun 2025 00:00:00 GMTCloudflareWorkersVitestHonoXhttps://suntory-n-water.com/blog/aggregating-dependency-updates-dependabot/https://suntory-n-water.com/blog/aggregating-dependency-updates-dependabot/dependabotによる依存関係更新を1つのPRにまとめる設定方法を解説します。グループ化設定を導入して、複数のPRを個別にマージする際の一時的なバージョン不整合を解消します。Sun, 18 May 2025 00:00:00 GMTGitHubActionsCIdependabothttps://suntory-n-water.com/blog/hands-on-development-hono-obsidian-plugins/https://suntory-n-water.com/blog/hands-on-development-hono-obsidian-plugins/Honoを使用してObsidianプラグインを開発するための環境構築手順を解説します。pnpm workspacesを使ったモノレポ構成でCloudflare Workers上で動作するHonoとObsidianプラグインを管理します。Sun, 11 May 2025 00:00:00 GMTObsidianHonohttps://suntory-n-water.com/blog/kinpatsu-heroine-honox/https://suntory-n-water.com/blog/kinpatsu-heroine-honox/HonoXとCloudflare Workersを活用し、アニメの金髪ヒロインだけを一覧表示するWebサイト「金髪ヒロイン.com」を個人開発した体験と、技術選定や実装の工夫、今後の課題についてまとめました。Wed, 07 May 2025 00:00:00 GMTHonoXHonoCloudflareWorkershttps://suntory-n-water.com/blog/vscode-github-copilot-multiple-prompt/https://suntory-n-water.com/blog/vscode-github-copilot-multiple-prompt/VSCodeで使えるGitHub Copilotでも Cursorと同じようなルールを設定することができます。この記事では複数のルールを設定して開発を行う方法を解説します。Thu, 24 Apr 2025 00:00:00 GMTGitHubGitHubCopilotVisualStudioCodehttps://suntory-n-water.com/blog/chinchillo-mcp-server/https://suntory-n-water.com/blog/chinchillo-mcp-server/Model Context Protocol (MCP) を使うと、AIアシスタントに新しい機能を追加できます。この記事では、サイコロゲーム「チンチロ」を例に、TypeScriptでMCPサーバーを実装し、Claude Desktopで遊ぶ方法を紹介します。AIの進化が進む中、MCPの基本的な仕組みを実際に手を動かして学んでみましょう。Thu, 10 Apr 2025 00:00:00 GMTMCPhttps://suntory-n-water.com/blog/ios-kawaii-emoji/https://suntory-n-water.com/blog/ios-kawaii-emoji/絵文字は私たちのデジタルコミュニケーションに欠かせない存在ですが、同じ絵文字コードでもOSによって見た目が大きく異なります。例えば「🫠」(溶ける顔)や「😎」(サングラスの顔)は、iOSとWindowsで全く異なるデザインです。本記事では、Webアプリケーション上でOSに関係なく統一した絵文字表示を実現するため、MicrosoftのFluent UI Emojiを使った実装方法を解説します。Sun, 30 Mar 2025 00:00:00 GMT絵文字https://suntory-n-water.com/blog/response-header-web-check-list/https://suntory-n-water.com/blog/response-header-web-check-list/Webサービス公開前のチェックリストにあるレスポンスヘッダの意味が全くわからなかったので、どんなリスクから守ってくれるのかを調べてみました。この記事ではWebサービスを公開する前に必要なレスポンスヘッダの内容と設定しなかったときのリスクを知ることができます。Fri, 28 Mar 2025 00:00:00 GMTセキュリティhttps://suntory-n-water.com/blog/notion-images-put-cloudflare/https://suntory-n-water.com/blog/notion-images-put-cloudflare/Notionで作成されたマークダウンコンテンツには、Amazon S3に保存された画像へのリンクが含まれています。ブログ記事として公開する際に、これらの画像をCloudflare R2ストレージなどの外部ストレージに移行することで非公開ページの画像も表示することができます。この記事ではNotionのページに添付されている画像をCloudflare R2に格納する処理について解説します。Tue, 25 Mar 2025 00:00:00 GMTCloudflareWorkersCloudflarehttps://suntory-n-water.com/blog/cloudflare-get-domain-vercel/https://suntory-n-water.com/blog/cloudflare-get-domain-vercel/独自ドメインを購入し、Vercelにデプロイされたウェブサイトに設定する方法を紹介します。Next.jsで作成したポートフォリオサイトを例に、Cloudflareでドメインを購入から設定完了までの手順を解説します。Sat, 22 Mar 2025 00:00:00 GMTCloudflareVercelhttps://suntory-n-water.com/blog/noto-sans-jp-safari-mincho/https://suntory-n-water.com/blog/noto-sans-jp-safari-mincho/SafariやiOSのGoogle Chromeだけフォントが明朝体に変わってしまっている件。Fri, 21 Mar 2025 00:00:00 GMTTailwindCSSNext.jshttps://suntory-n-water.com/blog/messaging-api-github-pr/https://suntory-n-water.com/blog/messaging-api-github-pr/ポートフォリオの技術記事投稿頻度をあげるためにNotion + Messaging APIでブログ記事を自動でPull Requestを発行できるようにしました。mdxファイルの作成はnotion-markdown-converterを使用しています。Thu, 20 Mar 2025 00:00:00 GMTLineMessagingAPICloudflareWorkersNotionhttps://suntory-n-water.com/blog/add-blog-to-portfolio/https://suntory-n-water.com/blog/add-blog-to-portfolio/ポートフォリオサイトにブログページを追加しました。今後はZennやQiitaで投稿していた内容を、こちらに集約する想定です。Mon, 17 Mar 2025 00:00:00 GMTポートフォリオブログhttps://suntory-n-water.com/blog/create-url-shortening-site-honox/https://suntory-n-water.com/blog/create-url-shortening-site-honox/HonoXで短縮URL作成サイトを作成します。基本的な環境構築が終わっているsetupブランチから完成版までの変化を追いながら、実装の流れを解説します。Mon, 03 Mar 2025 00:00:00 GMTHonoHonoXhttps://suntory-n-water.com/blog/i-dont-know-pod-so-ill/https://suntory-n-water.com/blog/i-dont-know-pod-so-ill/KubernetesのPodとは何かを弁当ケースに例えて理解します。1つ以上のコンテナをまとめたものであるPodの概念を、実務で遭遇した場面から学んだことをまとめました。Sat, 22 Feb 2025 00:00:00 GMTDockerKuberneteshttps://suntory-n-water.com/blog/create-slide-your-company-logo-using/https://suntory-n-water.com/blog/create-slide-your-company-logo-using/Marpで企業ロゴが入ったスライドを作成する方法を解説します。gaiaテーマとCSSの::after疑似要素を活用してヘッダーの右上にロゴを配置する実装を紹介します。Sat, 08 Feb 2025 00:00:00 GMTCSSMarphttps://suntory-n-water.com/blog/i-want-make-easier-use-branded/https://suntory-n-water.com/blog/i-want-make-easier-use-branded/Branded Typeを簡単に生成できるツールを作成しました。似たような名前のIDやデータを扱う際の型安全性を高め、間違った型を使う可能性を減らすことができます。Sat, 11 Jan 2025 00:00:00 GMTTypeScripthttps://suntory-n-water.com/blog/2025-all-you-need-do-make/https://suntory-n-water.com/blog/2025-all-you-need-do-make/ベッドメイキングから始まる小さな成功体験の重要性についてのポエム。Fri, 03 Jan 2025 00:00:00 GMTポエムhttps://suntory-n-water.com/blog/learn-clean-architecture-through-hands-on-experience/https://suntory-n-water.com/blog/learn-clean-architecture-through-hands-on-experience/クリーンアーキテクチャの概要をざっくり理解し、実際に手を動かして実装することで腹落ちを目指します。関心ごとの分離と依存関係の方向性について解説します。Thu, 02 Jan 2025 00:00:00 GMTTypeScriptクリーンアーキテクチャSOLID原則Honohttps://suntory-n-water.com/blog/branded-type-learn-doing/https://suntory-n-water.com/blog/branded-type-learn-doing/Branded Typeの概要と実装方法を手を動かして理解します。プリミティブ型に目印を付与して型安全性を高めるテクニックを、既存リポジトリへの適用を通じて学びます。Tue, 31 Dec 2024 00:00:00 GMTTypeScripthttps://suntory-n-water.com/blog/first-execution-plan-recalculating-statistics-analyze/https://suntory-n-water.com/blog/first-execution-plan-recalculating-statistics-analyze/開発環境で正常に動作していたSQLが検証環境でタイムアウトする問題に対して、EXPLAIN ANALYZEを用いた実行計画の改善と統計情報のリセット方法を解説します。Sat, 30 Nov 2024 00:00:00 GMTPostgreSQLデータベースhttps://suntory-n-water.com/blog/lets-actually-request-webapi-retrieves-anime/https://suntory-n-water.com/blog/lets-actually-request-webapi-retrieves-anime/アニメ情報を取得するWebAPI(ShangriLa Anime API、Annict API、MyAnimeList API)を実際にリクエストして比較検証しました。各APIの特徴と違いを解説します。Sun, 17 Nov 2024 00:00:00 GMTAPIWebAPIアニメhttps://suntory-n-water.com/blog/we-created-website-lets-you-see/https://suntory-n-water.com/blog/we-created-website-lets-you-see/都道府県と市区町村を選択するだけで、その地域の人口動態を可視化できるWebサイトを作成しました。Next.js、Recharts、shadcn/uiを使用した実装を紹介します。Sat, 16 Nov 2024 00:00:00 GMTNext.js個人開発Rechartsshadcn/uihttps://suntory-n-water.com/blog/learn-all-wikipedia-articles-fun-them/https://suntory-n-water.com/blog/learn-all-wikipedia-articles-fun-them/Wikipediaの全記事をWord2Vecに学習させて、単語同士の足し算や引き算を行うことができるWebサイトを作成しました。FastAPIの復習も兼ねた実装を紹介します。Sat, 09 Nov 2024 00:00:00 GMTPython個人開発Word2VecWikipediahttps://suntory-n-water.com/blog/prevent-tailwind-css-marker-text-overlap/https://suntory-n-water.com/blog/prevent-tailwind-css-marker-text-overlap/Tailwind CSSでリストアイテムが長くなった場合に、テキストがマーカーと重なってしまう問題の解決方法を解説します。Sun, 06 Oct 2024 00:00:00 GMTCSSTailwindCSShttps://suntory-n-water.com/blog/get-url-page-query-parameters-playwright/https://suntory-n-water.com/blog/get-url-page-query-parameters-playwright/Playwrightでクエリパラメータが付与されているページのURLを取得する方法を解説します。page.on()メソッドでネットワークを監視する方法を紹介します。Thu, 26 Sep 2024 00:00:00 GMTテストPlaywrightE2Ehttps://suntory-n-water.com/blog/creating-dynamic-ogp-images-nextjs-approuter/https://suntory-n-water.com/blog/creating-dynamic-ogp-images-nextjs-approuter/Next.js AppRouterでImageResponse()を使用して動的OGP画像を作成する方法を解説します。エンドポイント作成から画像レイアウトの実装までを紹介します。Sat, 21 Sep 2024 00:00:00 GMTNext.jsOGPAppRouterhttps://suntory-n-water.com/blog/include-build-files-release-notes-github/https://suntory-n-water.com/blog/include-build-files-release-notes-github/GitHub Actionsでビルドしたファイルをリリースノートに格納する方法を解説します。非エンジニアの友人でも簡単に拡張機能をアップデートできる仕組みを実装します。Fri, 13 Sep 2024 00:00:00 GMTGitHubActionshttps://suntory-n-water.com/blog/sure-decode-properly-calling-api/https://suntory-n-water.com/blog/sure-decode-properly-calling-api/Hono + LINE Messaging APIを使ったコンビニスイーツ提供BOTで、HTMLエンティティのデコードを忘れたことで発生したエラーと、その解決方法を解説します。APIを叩く際のデータ処理の重要性を学びます。Mon, 12 Aug 2024 00:00:00 GMTHTMLDecodeLineMessagingAPIHonohttps://suntory-n-water.com/blog/i-investigated-whether-quality-sleep-changed/https://suntory-n-water.com/blog/i-investigated-whether-quality-sleep-changed/ニートから社会人になって睡眠の質がどう変化したのか、iPhoneのヘルスケアアプリのデータを使って定量的に分析しました。睡眠に関するデータ解析の方法を紹介します。Thu, 08 Aug 2024 00:00:00 GMTヘルスケア睡眠https://suntory-n-water.com/blog/little-late-ill-introduce-marp-allows/https://suntory-n-water.com/blog/little-late-ill-introduce-marp-allows/MarkdownでPowerPointスライドが作成できるMarpに入門します。ハンズオン形式でMarpの環境構築から実際のスライド作成までを解説します。Sun, 28 Jul 2024 00:00:00 GMTPowerPointMarphttps://suntory-n-water.com/blog/build-environment-docker-postgresql-learn-about/https://suntory-n-water.com/blog/build-environment-docker-postgresql-learn-about/Docker + PostgreSQLで環境構築を行い、パーティションについて学びます。実務でn千万からn億レコードのテーブルを扱う際に必要なパーティション構成の基礎を実践的に解説します。Thu, 18 Jul 2024 00:00:00 GMTDockerPostgreSQLデータベースhttps://suntory-n-water.com/blog/introduction-hono-service-bindings/https://suntory-n-water.com/blog/introduction-hono-service-bindings/Cloudflare WorkersのService Bindings機能を使って、パブリックにアクセス可能なURLを経由せずに別のWorkersを呼び出す方法を解説します。Honoを使った複数Workersの連携実装例を紹介します。Mon, 08 Jul 2024 00:00:00 GMTCloudflareCloudflareWorkersHonohttps://suntory-n-water.com/blog/using-inversifyjs-hono-di/https://suntory-n-water.com/blog/using-inversifyjs-hono-di/HonoとDIで実装したアプリケーションにInversifyJSを使用して改修します。依存性の注入をサポートする軽量のIoCコンテナであるInversifyJSの使い方を解説します。Sat, 06 Jul 2024 00:00:00 GMTInversifyJSDIHonohttps://suntory-n-water.com/blog/understanding-di-dependency-injection-through-hands-on/https://suntory-n-water.com/blog/understanding-di-dependency-injection-through-hands-on/依存性の注入(DI)という概念を手を動かしながら理解します。読んでもよく分からなかったので、実装を通じてナンモワカランからチョットワカッタカモになることを目指します。Sat, 15 Jun 2024 00:00:00 GMTTypeScriptDIオブジェクト指向プログラミングHonohttps://suntory-n-water.com/blog/start-developing-google-chrome-extensions-vite/https://suntory-n-water.com/blog/start-developing-google-chrome-extensions-vite/Vite + TypeScriptを使用してGoogle Chrome拡張機能を開発する方法を解説します。初めて拡張機能を開発する方の第一歩になる記事です。Thu, 13 Jun 2024 00:00:00 GMTChromeExtensionTypeScriptVitehttps://suntory-n-water.com/blog/create-line-bot-randomly-displays-convenience/https://suntory-n-water.com/blog/create-line-bot-randomly-displays-convenience/CloudflareWorkersとHonoを使ってコンビニスイーツをランダムに表示するLINE BOTを作成。Sat, 27 Apr 2024 00:00:00 GMTLineMessagingAPICloudflareWorkershttps://suntory-n-water.com/blog/create-line-bot-randomly-suggests-ice/https://suntory-n-water.com/blog/create-line-bot-randomly-suggests-ice/Hono + Cloudflare Workersを使用してランダムにアイスクリームを提案するLINE BOTを作成しました。チョコモナカジャンボに変わる新しい最強のアイスクリームを見つけることをコンセプトに、技術選定から実装までを解説します。Thu, 18 Apr 2024 00:00:00 GMTCloudflareWorkersLineMessagingAPIHonohttps://suntory-n-water.com/blog/try-using-real-estate-information-library/https://suntory-n-water.com/blog/try-using-real-estate-information-library/国土交通省の不動産情報ライブラリAPIを使ってみた体験記。Mon, 08 Apr 2024 00:00:00 GMTPythonAPIhttps://suntory-n-water.com/blog/i-did-i-got-runtimeerror-event/https://suntory-n-water.com/blog/i-did-i-got-runtimeerror-event/SQLAlchemyとpytestでRuntimeError Event loop is closedエラーが発生した際の対処法。Sun, 17 Mar 2024 00:00:00 GMTMySQLsqlalchemyDockerpytestFastAPIhttps://suntory-n-water.com/blog/i-almost-got-stuck-without-setting/https://suntory-n-water.com/blog/i-almost-got-stuck-without-setting/Google Places API (New)で言語コードを設定せず沼りかけた経験。Fri, 23 Feb 2024 00:00:00 GMTGoogleMapsAPIGoogleCloudhttps://suntory-n-water.com/blog/setting-id-uuid-careful-type-definition/https://suntory-n-water.com/blog/setting-id-uuid-careful-type-definition/FastAPIでidをuuidで設定する際の型定義の注意点。Sun, 21 Jan 2024 00:00:00 GMTPythonFastAPIhttps://suntory-n-water.com/blog/app-generates-incoherent-sentences/https://suntory-n-water.com/blog/app-generates-incoherent-sentences/GASのLanguageAppクラスを使って支離滅裂な文章を生成するアプリ。Sun, 07 Jan 2024 00:00:00 GMTGASNext.jshttps://suntory-n-water.com/blog/nextjs13-dynamically-change-api-path-during/https://suntory-n-water.com/blog/nextjs13-dynamically-change-api-path-during/Next.js13でデプロイ時にAPIのパスを動的に変更する方法。Wed, 03 Jan 2024 00:00:00 GMTAPINext.jsVercelhttps://suntory-n-water.com/blog/creating-dark-pattern-shadcn-ui/https://suntory-n-water.com/blog/creating-dark-pattern-shadcn-ui/shadcn/uiを使ってダークパターンを実装する例。Fri, 29 Dec 2023 00:00:00 GMTDesignNext.jsshadcn/uihttps://suntory-n-water.com/blog/i-made-pokemon-generator-10percent-chance/https://suntory-n-water.com/blog/i-made-pokemon-generator-10percent-chance/PokeAPIを使って10%の確率でドオーしか表示されないポケモン生成サイトを作成。Sat, 23 Dec 2023 00:00:00 GMT個人開発ポケモンNext.jsPokeAPIhttps://suntory-n-water.com/blog/list-songs-you-havent-heard-minase/https://suntory-n-water.com/blog/list-songs-you-havent-heard-minase/水瀬いのりさんのライブで聴いたことのない曲を一覧表示するアプリの開発。Sun, 29 Oct 2023 00:00:00 GMT個人開発Next.jshttps://suntory-n-water.com/blog/i-created-my-own-booknotion/https://suntory-n-water.com/blog/i-created-my-own-booknotion/KindleのハイライトをNotionにまとめる自分専用BookNotionアプリを開発。Sat, 14 Oct 2023 00:00:00 GMTNext.jsNotionNotionAPIhttps://suntory-n-water.com/blog/i-want-make-booknotion-even-better/https://suntory-n-water.com/blog/i-want-make-booknotion-even-better/BookNotionをより便利にするための機能拡張について。Mon, 09 Oct 2023 00:00:00 GMTJavaScriptNotionNotionAPIhttps://suntory-n-water.com/blog/angular-practice-i-made-population-graph/https://suntory-n-water.com/blog/angular-practice-i-made-population-graph/Angularの練習として船橋市の人口推移グラフを作成。Mon, 18 Sep 2023 00:00:00 GMTTypeScriptAngularchart.jshttps://suntory-n-water.com/blog/postman-unable-send-request-localhost/https://suntory-n-water.com/blog/postman-unable-send-request-localhost/Postmanでlocalhostにリクエストを送信できない問題の解決方法。Sun, 27 Aug 2023 00:00:00 GMTAPIPostmanhttps://suntory-n-water.com/blog/asking-gpt-sensei-good-algorithm-learn/https://suntory-n-water.com/blog/asking-gpt-sensei-good-algorithm-learn/ラーメン二郎のコールシステムを例に、良いアルゴリズムとは何かを学ぶ。Sat, 26 Aug 2023 00:00:00 GMTアルゴリズム初心者TypeScripthttps://suntory-n-water.com/blog/learn-about-callback-functions-typescript/https://suntory-n-water.com/blog/learn-about-callback-functions-typescript/TypeScriptでコールバック関数について学習した備忘録。Sun, 20 Aug 2023 00:00:00 GMTTypeScripthttps://suntory-n-water.com/blog/deepen-your-understanding-tight-loose-coupling/https://suntory-n-water.com/blog/deepen-your-understanding-tight-loose-coupling/密結合と疎結合の違いと、コードの品質への影響について。Fri, 18 Aug 2023 00:00:00 GMTTypeScripthttps://suntory-n-water.com/blog/i-tried-see-if-selenium-really/https://suntory-n-water.com/blog/i-tried-see-if-selenium-really/Seleniumによるスクレイピングが本当にバレるのか実際に検証。Sat, 12 Aug 2023 00:00:00 GMTPythonSeleniumスクレイピングhttps://suntory-n-water.com/blog/typescript-should-i-use-interface-or/https://suntory-n-water.com/blog/typescript-should-i-use-interface-or/TypeScriptでinterfaceとtypeのどちらを使うべきかについての解説。Fri, 11 Aug 2023 00:00:00 GMTJavaScriptTypeScripthttps://suntory-n-water.com/blog/integrating-react-flask-part-2/https://suntory-n-water.com/blog/integrating-react-flask-part-2/React→Flask→Reactのデータフロー実装について。FlaskとReactの連携part2。Sun, 09 Jul 2023 00:00:00 GMTPythonFlaskAPIReacthttps://suntory-n-water.com/blog/lets-integrate-react-flask/https://suntory-n-water.com/blog/lets-integrate-react-flask/ReactとFlaskを連携させたアプリケーション開発の手順。Sat, 01 Jul 2023 00:00:00 GMTPythonFlaskTypeScriptReacthttps://suntory-n-water.com/blog/my-first-frontend-randomly-decide-ramen/https://suntory-n-water.com/blog/my-first-frontend-randomly-decide-ramen/Reactを使ってランダムでラーメン二郎の店舗を表示するアプリを作成。初めてのフロントエンド開発。Sat, 10 Jun 2023 00:00:00 GMTJavaScript初心者FirebaseReacthttps://suntory-n-water.com/blog/little-late-i-got-summary-book/https://suntory-n-water.com/blog/little-late-i-got-summary-book/ChatGPTを使って読んだ本を要約してもらった実験記録。Sun, 28 May 2023 00:00:00 GMTChatGPThttps://suntory-n-water.com/blog/relisting-items-mercari-shops-so-tedious/https://suntory-n-water.com/blog/relisting-items-mercari-shops-so-tedious/メルカリShopsの再出品作業を効率化するため、Pythonとseleniumを使った自動化アプリを開発。Tue, 02 May 2023 00:00:00 GMTPythonSeleniumCSVpandashttps://suntory-n-water.com/blog/introduction-pyautogui-trying-remove-highlights-kindle/https://suntory-n-water.com/blog/introduction-pyautogui-trying-remove-highlights-kindle/デスクトップのKindleアプリでハイライトと注記を自動削除するPyAutoGUIスクリプト。Sun, 23 Apr 2023 00:00:00 GMTPythonOpenCVpyautoguihttps://suntory-n-water.com/blog/my-first-natural-language-processing-i/https://suntory-n-water.com/blog/my-first-natural-language-processing-i/Pythonとdiscord.pyを使ってネガティブな単語に反応するbotを作成。自然言語処理と形態素解析の入門。Sun, 02 Apr 2023 00:00:00 GMTPythonmecab自然言語処理形態素解析Discordhttps://suntory-n-water.com/blog/anaconda-seems-different-way-setting-system/https://suntory-n-water.com/blog/anaconda-seems-different-way-setting-system/Anacondaとcmdでは環境変数の設定方法が異なるという発見についての備忘録。Sat, 01 Apr 2023 00:00:00 GMTAnacondahttps://suntory-n-water.com/blog/introduction-pyautogui-automating-routine-tasks/https://suntory-n-water.com/blog/introduction-pyautogui-automating-routine-tasks/PyAutoGUIとOpenCVを使ってメルカリの定型作業を自動化する方法について。Mon, 27 Mar 2023 00:00:00 GMTPythonOpenCV自動化pyautoguihttps://suntory-n-water.com/blog/3-tips-excel-arent-major-useful/https://suntory-n-water.com/blog/3-tips-excel-arent-major-useful/職場でExcelを使う際によく使うショートカットキーやコマンドを紹介。Sun, 19 Feb 2023 00:00:00 GMTExcelhttps://suntory-n-water.com/blog/django-template-tags-not-recognized-if/https://suntory-n-water.com/blog/django-template-tags-not-recognized-if/Djangoテンプレートタグで空白を入れると認識されない問題についての備忘録。Wed, 15 Feb 2023 00:00:00 GMTPythonHTMLDjangohttps://suntory-n-water.com/blog/i-quickly-read-through-book-read/https://suntory-n-water.com/blog/i-quickly-read-through-book-read/技術書の読書術の重要な部分をまとめた備忘録。効果的な読書方法とアウトプットについて。Mon, 06 Feb 2023 00:00:00 GMT読書https://suntory-n-water.com/blog/dont-put-any-more-strain-your/https://suntory-n-water.com/blog/dont-put-any-more-strain-your/アラーム音による心臓への負担を軽減するため、光で目覚める方法を提案する雑記。Sun, 22 Jan 2023 00:00:00 GMT雑記https://suntory-n-water.com/blog/fall-2022-applied-information-technology-engineer/https://suntory-n-water.com/blog/fall-2022-applied-information-technology-engineer/応用情報技術者試験の不合格体験をもとに、なぜ不合格だったのかを振り返る雑記。Fri, 23 Dec 2022 00:00:00 GMT資格https://suntory-n-water.com/blog/rough-summary-important-parts-readable-code/https://suntory-n-water.com/blog/rough-summary-important-parts-readable-code/リーダブルコードの重要な部分をざっくりまとめて、振り返れるようにした備忘録。Sat, 03 Dec 2022 00:00:00 GMT初心者https://suntory-n-water.com/blog/pyautogui-image-recognition-magnification-ratio-issue/https://suntory-n-water.com/blog/pyautogui-image-recognition-magnification-ratio-issue/PyAutoGUIを用いた作業自動化で発見した画像認識の課題。PCの画面解像度が異なる場合の画像認識の問題について。Mon, 28 Nov 2022 00:00:00 GMTPythonOpenCV画像認識pyautoguihttps://suntory-n-water.com/blog/unable-compile-java/https://suntory-n-water.com/blog/unable-compile-java/Java学習中にコンパイルができず無駄に時間を浪費した経験からの備忘録。Eclipseを使用したコンパイルエラーの解決方法。Wed, 23 Nov 2022 00:00:00 GMTJavaEclipsehttps://suntory-n-water.com/blog/python-beautifulsoup-did-you-mean-call/https://suntory-n-water.com/blog/python-beautifulsoup-did-you-mean-call/Pythonでスクレイピングする際に何度も遭遇したfind()とfind_all()の使い分けエラーについての備忘録。Sat, 12 Nov 2022 00:00:00 GMTPythonスクレイピングBeautifulSouphttps://suntory-n-water.com/blog/importing-csv-file-into-database/https://suntory-n-water.com/blog/importing-csv-file-into-database/MySQLにCSVファイルをインポートする際に躓いた点と解決方法をまとめた備忘録。データベース、テーブル、権限設定について。Fri, 11 Nov 2022 00:00:00 GMTMySQLCSVhttps://suntory-n-water.com/blog/fall-2021-fundamental-information-technology-engineer/https://suntory-n-water.com/blog/fall-2021-fundamental-information-technology-engineer/基本情報技術者試験に合格するまでに使用した参考書やWebサイト、午前免除試験での合格経験をまとめた体験記。Thu, 27 Jan 2022 00:00:00 GMT資格https://suntory-n-water.com/blog/i-want-use-linear-programming-determine/https://suntory-n-water.com/blog/i-want-use-linear-programming-determine/線形計画法を用いてセブンイレブンの食品から栄養バランスと価格を最適化した食事を選択。PuLPライブラリを使用してPFCバランスと価格を考慮した最適解を計算した実験記録。Sat, 11 Dec 2021 00:00:00 GMTPython線形計画法