tubone BOYAKI is the developer blog by tubone who is Japanese IT Developerhttps://tubone-project24.xyz/jahttps://tubone-project24.xyz/2026/05/09/x402-paywall-ai-agent-autonomous-unlock/https://tubone-project24.xyz/2026/05/09/x402-paywall-ai-agent-autonomous-unlock/前回作ったx402ペイウォールを、今度はAIエージェント側からアンロックして読ませる仕組みをClaude Codeのスキルとして実装しました。なぜリモートMCPだけで完結できないのか、鍵の所在問題と2系統アーキテクチャ、yarnコマンド一発で決済から復号までを自律実行する実装の話を、デモ動画付きで紹介します。Sat, 09 May 2026 00:00:00 GMThttps://tubone-project24.xyz/2026/05/08/x402-protocol-ai-agent-micropayment/https://tubone-project24.xyz/2026/05/08/x402-protocol-ai-agent-micropayment/AWS Bedrock AgentCore Paymentsの発表をきっかけにx402プロトコルを勉強したくなり、自分のブログにペイウォールとして実装してみました。HTTP 402を使ったプロトコルの仕組み、EIP-712によるUSDC送金許可署名、Netlify FunctionとMetaMaskで完結するクライアント実装、そしてAIエージェントが自律決済する世界との対比までを実装ベースで解説します。Fri, 08 May 2026 00:00:00 GMThttps://tubone-project24.xyz/2026/05/02/langfuse-v4-observation-centric-clickhouse-deep-dive/https://tubone-project24.xyz/2026/05/02/langfuse-v4-observation-centric-clickhouse-deep-dive/Langfuse v4で導入された events_full / events_core という単一Spanモデルを、ClickHouseのカラムナーストレージ・Granule・スパースインデックス・ReplacingMergeTree・Part/Partition・Materialized Viewといった内部の仕組みから深掘りし、なぜtraces/observations分離型から非正規化されたobservation-centricモデルへ移行する必要があったのかを公式ドキュメントの引用付きで解説します。Sat, 02 May 2026 00:00:00 GMThttps://tubone-project24.xyz/2026/04/11/midi-mcp-server-mcp-apps/https://tubone-project24.xyz/2026/04/11/midi-mcp-server-mcp-apps/MCP Appsの仕様を活用して、AIが作曲したMIDI楽曲のピアノロール譜面をClaude.ai上でリアルタイムに可視化するMCPサーバーを作りました。MCP Appsのアーキテクチャやライフサイクル、ontoolinputpartialによるプログレッシブレンダリング、Viewからの双方向通信（callServerTool・readServerResource・sendMessage）の仕組みを仕様レベルで解説しつつ、Cloudflare Workersへのデプロイ方法も紹介します。Sat, 11 Apr 2026 00:00:00 GMThttps://tubone-project24.xyz/2026/03/27/mugi-claw-slack-personal-ai-agent/https://tubone-project24.xyz/2026/03/27/mugi-claw-slack-personal-ai-agent/Claude Code CLIの `-p` フラグとサブスクリプションを活用して、Slack上で常駐するパーソナルAIエージェント「むぎ苦労（mugi-claw）」を開発しました。Chrome DevTools Protocolによるブラウザ操作、機密情報をLLMに渡さないCredential Server、macOSのsandbox-execとプロキシによる多層防御など、実装の技術的な詳細を紹介します。Fri, 27 Mar 2026 00:00:00 GMThttps://tubone-project24.xyz/2026/03/17/obsidian-slack-efficient-learning/https://tubone-project24.xyz/2026/03/17/obsidian-slack-efficient-learning/育休中で時間がない。ツェッテルカステンも挫折し、Obsidian Gitのコンフリクトにも悩まされた。そこでSlackをメモの入口にするObsidianプラグインを自作し、Claude Codeでリンク先を自動要約する自分用ブリーフィングシステムを構築した。忙しいエンジニアの情報収集・学習ワークフローを紹介します。Tue, 17 Mar 2026 00:00:00 GMThttps://tubone-project24.xyz/2026/03/13/claude-code-langfuse-hooks-tracing/https://tubone-project24.xyz/2026/03/13/claude-code-langfuse-hooks-tracing/Claude CodeのHooksとLangfuse Ingestion APIを組み合わせて、コーディングエージェントのオブザーバビリティを確保する方法を解説します。OTELでは取得できないLLMの入出力やツール実行の詳細、サブエージェントの親子構造まで、シェルスクリプトで泥臭く可視化する実装手法を紹介します。Fri, 13 Mar 2026 00:00:00 GMThttps://tubone-project24.xyz/2026/03/05/claude-code-remote-control-slack-notification/https://tubone-project24.xyz/2026/03/05/claude-code-remote-control-slack-notification/Claude CodeのRemote Controlはスマホからセッション操作が可能ですが、承認待ちのプッシュ通知がないのが課題です。Slack Incoming WebhookとClaude Code Hooksを組み合わせて、承認待ちをスマホに即座に通知するシェルスクリプトとsettings.jsonの設定方法を紹介します。Thu, 05 Mar 2026 00:00:00 GMThttps://tubone-project24.xyz/2026/02/21/aws-mcp-practical-guide-review/https://tubone-project24.xyz/2026/02/21/aws-mcp-practical-guide-review/献本いただいた「AWSではじめるMCP実践ガイド」の書評です。MCPアーキテクチャの各プリミティブ解説が充実した第二章や、Resources・Prompts・Samplingまで実装できる第四章など、公式ドキュメントだけでは得られない学びが詰まった一冊の見どころを紹介します。Sat, 21 Feb 2026 00:00:00 GMThttps://tubone-project24.xyz/2026/02/04/levtech-freelance-blog-featured/https://tubone-project24.xyz/2026/02/04/levtech-freelance-blog-featured/レバテックフリーランスの特集記事「スキルアップブログ集」に当ブログが紹介されました。実装を重視した技術記事やデモアプリを作りながら技術を深掘りするスタイルを評価していただいた内容と、紹介を受けての所感をまとめています。Wed, 04 Feb 2026 00:00:00 GMThttps://tubone-project24.xyz/2026/02/03/whisper-realtime-claude-code-blog-writing/https://tubone-project24.xyz/2026/02/03/whisper-realtime-claude-code-blog-writing/育休中でもブログを書き続けたい。自作のローカル音声文字起こしツールwhisper-realtimeとClaude Codeのスキル・サブエージェント機能を組み合わせて、音声入力からブログ記事を自動構成・執筆するワークフローを構築しました。textlintによる品質チェックまで含めた実践的な手法を紹介します。Tue, 03 Feb 2026 00:00:00 GMThttps://tubone-project24.xyz/2025/10/29/introduction-to-ap2/https://tubone-project24.xyz/2025/10/29/introduction-to-ap2/Googleが推進するAIエージェント決済プロトコルAP2（Agent Payments Protocol）の仕組みを、Docker Composeで動くデモアプリを作りながら解説します。Mandate（委任状）やデジタル署名の仕組み、A2A通信、WebAuthnを使った安全な決済フローを実装レベルで理解できます。Wed, 05 Nov 2025 04:00:20 GMThttps://tubone-project24.xyz/2025/02/24/celery-monitoring-with-beat-and-cloudwatch/https://tubone-project24.xyz/2025/02/24/celery-monitoring-with-beat-and-cloudwatch/Flowerを使わずにCeleryの監視を実現する方法を解説します。Celery BeatとControl InspectでWorkerの状態を定期取得し、Amazon CloudWatch metricsへ送信することで、アラート設定やECS Auto Scalingまで一気通貫で構築できる実践的な監視手法を紹介します。Mon, 24 Feb 2025 08:52:25 GMThttps://tubone-project24.xyz/2025/02/16/cost-effective-langfuse-v3-deployment/https://tubone-project24.xyz/2025/02/16/cost-effective-langfuse-v3-deployment/Langfuse v3のインフラコストを削減する4つの方法を紹介。Fargate Spot・ARM64(Graviton)・ECS on EC2への切り替え・ClickHouseのS3 Disk運用でEFSコストを大幅削減する具体的な設定手順と効果を解説しますSun, 16 Feb 2025 09:18:19 GMThttps://tubone-project24.xyz/2024/12/30/building-langfuse-v3-with-aws-managed-services/https://tubone-project24.xyz/2024/12/30/building-langfuse-v3-with-aws-managed-services/Langfuse v3のClickHouse導入・Redis非同期キューイング・ReplacingMergeTreeの仕組みをDeep Diveし、App Runner・Aurora Serverless・ECS Fargate・EFS・ElastiCacheを組み合わせたAWS構成をTerraformで構築する全過程を解説しますTue, 31 Dec 2024 02:35:41 GMThttps://tubone-project24.xyz/2024/12/05/cost-effective-company-name-suggestion-feature/https://tubone-project24.xyz/2024/12/05/cost-effective-company-name-suggestion-feature/ECS FargateとElasticsearchのN-gram/Edge N-gramトークナイザーを活用し、小さなコンテナでも高性能な企業名サジェスト機能をコスト効率よく構築する方法を、インデックス設計からデバウンス処理まで詳しく解説しますThu, 05 Dec 2024 14:24:04 GMThttps://tubone-project24.xyz/2024/02/28/idol-update-slack-notification-for-wife/https://tubone-project24.xyz/2024/02/28/idol-update-slack-notification-for-wife/Deno DOMとpteraを使ってFRUITS ZIPPER公式サイトの更新情報をスクレイピングし、Slack Incoming WebhookとNotion Databaseに自動通知する仕組みをGitHub Actionsで定期実行する方法を解説しますMon, 11 Mar 2024 15:57:29 GMThttps://tubone-project24.xyz/2023/10/15/houkoku/https://tubone-project24.xyz/2023/10/15/houkoku/芸能人風の手書き結婚報告を技術ブログらしくツールで再現。Freepikの台紙にモギハ・ペン字フォントで文面を作成し、iPad+Apple Pencilで手書き署名を加えるまでの制作過程を紹介しますSun, 15 Oct 2023 03:22:16 GMThttps://tubone-project24.xyz/2023/05/04/nfc-business-cart/https://tubone-project24.xyz/2023/05/04/nfc-business-cart/NFCタグとPageCrypt（AES256暗号化）を組み合わせたデジタル名刺の作り方を解説。AstroでペライチHTMLをビルドし、Renderにホスティングすることでスマホをかざすだけでアクセスできる電子名刺を実現しますThu, 04 May 2023 05:01:23 GMThttps://tubone-project24.xyz/2023/04/17/cleaning-robot/https://tubone-project24.xyz/2023/04/17/cleaning-robot/ECOVACS DEEBOT T10 OMNIを導入して床掃除から解放された体験と、ロボットのために部屋を片付ける行動変容が「弱いロボット理論」そのものだった気づきを語りますMon, 17 Apr 2023 11:23:06 GMThttps://tubone-project24.xyz/2023/01/18/sentry-replay/https://tubone-project24.xyz/2023/01/18/sentry-replay/Sentry Session Replayのβ版をGatsby.jsブログに導入し、ユーザー操作の動画再現・Network/Console確認・ヒープメモリ計測を実際に検証。導入手順とマスキング挙動の注意点を解説しますWed, 18 Jan 2023 14:53:12 GMThttps://tubone-project24.xyz/2023/01/18/reboot-linux/https://tubone-project24.xyz/2023/01/18/reboot-linux/古いRaspberry PiでWi-Fiドングルが認識されなくなる問題をcrontabによる定期再起動で解決し、再起動時にIPアドレスをSlack通知するPythonスクリプトの実装方法を紹介しますTue, 17 Jan 2023 15:52:28 GMThttps://tubone-project24.xyz/2023/01/15/2023-goals-and-objectives/https://tubone-project24.xyz/2023/01/15/2023-goals-and-objectives/2023年の個人目標として睡眠改善・Spotify投稿・毎日コーディング・Vtuber活動再開・フルサイクルエンジニアリングの5つを毛筆風に掲げます。エンジニアとしての成長と生活の質の向上を目指す抱負ですSun, 15 Jan 2023 05:53:07 GMThttps://tubone-project24.xyz/2022/01/03/owaspzap/https://tubone-project24.xyz/2022/01/03/owaspzap/Snyk CLIによる依存関係・静的コード解析とOWASP ZAPによるアクティブスキャンをGitHub Actionsに組み込み、個人開発でも無料で継続的な脆弱性診断を実現する方法をハンズオン形式で解説しますTue, 03 Jan 2023 05:24:38 GMThttps://tubone-project24.xyz/2023/01/01/this-blog/https://tubone-project24.xyz/2023/01/01/this-blog/Gatsby.js+TypeScript+Netlifyで構築した個人技術ブログの技術スタックを全解説します。Preact導入によるバンドルサイズ削減、Bootstrap+PurgeCSSの最適化、Algoliaによるブログ内検索など無料で実現する構成を紹介します。Sun, 01 Jan 2023 02:00:29 GMThttps://tubone-project24.xyz/2022/12/31/suicide-linux/https://tubone-project24.xyz/2022/12/31/suicide-linux/コマンドをタイポするとrm -rfが実行されるSuicide LinuxをDockerで試してみた体験記です。llコマンドで即死した話に加え、bashのcommand_not_found_handleの仕組みやANSIエスケープコードによるプロンプト制御も解説します。Sat, 31 Dec 2022 11:35:30 GMThttps://tubone-project24.xyz/2022/08/29/wezterm/https://tubone-project24.xyz/2022/08/29/wezterm/iTerm2+tmuxからRust製ターミナルWezTermへの移行体験記です。SSH接続やタブカスタマイズ、右ステータスバーなどのLuaによる設定例を紹介し、GPUアクセラレータやクロスプラットフォーム対応の使い心地を解説します。Mon, 29 Aug 2022 13:00:24 GMThttps://tubone-project24.xyz/2022/04/25/renovate-error/https://tubone-project24.xyz/2022/04/25/renovate-error/Renovateが作成するPRでArtifact update problemエラーが発生した際の原因調査と対処法を解説します。Gatsbyプラグインのpeer dependency競合によるnpm ERESOLVEエラーの具体的な修正手順を共有します。Mon, 25 Apr 2022 14:54:39 GMThttps://tubone-project24.xyz/2022/4/22/textlint/https://tubone-project24.xyz/2022/4/22/textlint/技術ブログの表記揺れや日本語の誤りを自動検出するtextlintの導入手順を解説します。SmartHRプリセットの活用法やreviewdogと連携したGitHub ActionsでのCI自動校正パイプラインの構築方法も紹介します。Thu, 21 Apr 2022 16:30:53 GMThttps://tubone-project24.xyz/2022/04/11/echo-show-15/https://tubone-project24.xyz/2022/04/11/echo-show-15/Amazonの15.6インチスマートディスプレイEcho Show 15を実際に購入し、賃貸での設置方法やカレンダー表示などの使い心地をレビューします。ウィジェット機能の現状や今後の活用アイデアについても率直な感想をまとめました。Mon, 11 Apr 2022 13:37:53 GMThttps://tubone-project24.xyz/2022/04/09/lambda-urls/https://tubone-project24.xyz/2022/04/09/lambda-urls/AWS Lambda Function URLsを使ってHTTPSエンドポイントを構築する方法と、API Gatewayとの違いを実際に検証しました。30秒タイムアウト制限の回避やIAM認証の挙動など、実運用で気になるポイントを詳しく解説します。Sat, 09 Apr 2022 02:50:46 GMThttps://tubone-project24.xyz/2022/03/20/k6-with-typescript/https://tubone-project24.xyz/2022/03/20/k6-with-typescript/Go製負荷テストツールK6の環境をDocker Composeで構築し、テストシナリオをTypeScriptで記述できるテンプレートの作り方を解説します。Grafanaによる結果可視化やGitHub Actionsへの組み込み手順も紹介します。Sun, 20 Mar 2022 08:33:17 GMThttps://tubone-project24.xyz/2022/03/20/desktop/https://tubone-project24.xyz/2022/03/20/desktop/クリエイティブな空間を目指して仕事効率化ツールやガジェットを詰め込んだ結果、コンセプトが迷走してしまったデスクトップ環境を紹介します。2022年時点のデスク周りのセットアップと使用機材をまとめました。Sun, 20 Mar 2022 08:28:54 GMThttps://tubone-project24.xyz/2022/03/05/npx/https://tubone-project24.xyz/2022/03/05/npx/npxコマンド一発でターミナルにカラフルな自己紹介カードを表示するnpmパッケージの作り方を紹介します。TypeScript化やESLint導入、GitHub ActionsによるCI/CD自動パブリッシュの設定手順も解説します。Sat, 05 Mar 2022 10:03:47 GMThttps://tubone-project24.xyz/2022/01/10/colorjs/https://tubone-project24.xyz/2022/01/10/colorjs/npmパッケージcolors.jsの作者が意図的に悪意あるコードを仕込み、CIが停止した事象の原因調査と対処法を解説します。package.jsonのresolutionsによる回復手順やOSSサプライチェーンセキュリティについても考察します。Mon, 10 Jan 2022 06:40:48 GMThttps://tubone-project24.xyz/2022/01/08/personal-task/https://tubone-project24.xyz/2022/01/08/personal-task/GitHub ProjectとGitHub Actionsを組み合わせて個人ToDo管理を構築。Issue自動紐づけ、ラベルによる期日Milestone自動生成、Slack日報リマインダーなど5つのカスタマイズで生産性を向上させる実践手法を紹介します。Sat, 08 Jan 2022 09:06:06 GMThttps://tubone-project24.xyz/2021/12/31/blog-bootstrap/https://tubone-project24.xyz/2021/12/31/blog-bootstrap/Gatsby.jsブログのBootstrap v3をv5に移行した年末リライト記録。Tailwind CSS導入を断念した経緯、jQuery依存の解消、gatsby-plugin-purgecssによるCSS最適化、Lighthouseスコア改善まで実践的なノウハウをまとめました。Fri, 31 Dec 2021 07:09:52 GMThttps://tubone-project24.xyz/2021/11/21/depcheck/https://tubone-project24.xyz/2021/11/21/depcheck/depcheckでpackage.jsonの未使用ライブラリを検出し、GitHub ActionsでPRコメントに自動出力するActionを自作。node_modulesの肥大化対策として、CIに組み込んで依存関係を継続的にチェックする方法を紹介します。Sun, 21 Nov 2021 11:16:54 GMThttps://tubone-project24.xyz/2021/09/22/yak/https://tubone-project24.xyz/2021/09/22/yak/IT業界でよく使われる「ヤクの毛刈り（Yak shaving）」の語源をたどりつつ、ヤクの生態や特徴、チベットでの家畜利用、兜やラピュタとの意外な関係まで、ヤクの魅力をたっぷり紹介するコラム記事です。Tue, 21 Sep 2021 15:00:28 GMThttps://tubone-project24.xyz/2021/07/28/deno-slack/https://tubone-project24.xyz/2021/07/28/deno-slack/Node.jsで書いたSlack投稿スクリプトをDenoに移行し、TypeScript化した実践記録。Hasura CloudのGraphQLからデータ取得してSlackに通知する処理を、Denoのfetchやtop-level awaitを活用して書き直す方法を解説します。Tue, 27 Jul 2021 15:07:09 GMThttps://tubone-project24.xyz/2021/07/27/hasura-graphql/https://tubone-project24.xyz/2021/07/27/hasura-graphql/Hasura CloudとHeroku PostgreSQLを連携し、無料でGraphQLエンドポイントを構築する方法を解説。Pythonでのmutation実装、Next.js+Apollo Clientでのダッシュボード開発、Cypressでの画面キャプチャによるSlack通知まで一気通貫で紹介します。Tue, 27 Jul 2021 02:45:28 GMThttps://tubone-project24.xyz/2021/07/26/calendar/https://tubone-project24.xyz/2021/07/26/calendar/余ったRaspberry Piと2.7インチ電子ペーパーでGoogleカレンダー連携の万年カレンダーを自作。oAuth2.0認証の詰まりポイントやGPIOキースイッチによる4画面切り替え実装など、小型ディスプレイ活用のノウハウを紹介します。Sun, 25 Jul 2021 07:59:27 GMThttps://tubone-project24.xyz/2021/07/21/motion-ir/https://tubone-project24.xyz/2021/07/21/motion-ir/余ったRaspberry Piと赤外線カメラモジュールを使い、motionで動体検知してSlackに画像・動画を自動通知する監視カメラシステムの構築手順。V4L2ドライバの設定やmotion.confの詳細解説も掲載しています。Wed, 21 Jul 2021 10:08:14 GMThttps://tubone-project24.xyz/2021/07/20/akg-fix/https://tubone-project24.xyz/2021/07/20/akg-fix/AKG K712 PROヘッドホンが右側断線で音が出なくなったため、分解・はんだ修理で復活させた記録。テスターでの断線箇所特定から修理手順、ゼンハイザーHD 599 SEとの音質比較まで詳しく解説します。Tue, 20 Jul 2021 07:06:24 GMThttps://tubone-project24.xyz/2021/07/08/chrome-theme/https://tubone-project24.xyz/2021/07/08/chrome-theme/Google Chromeで複数ユーザーを視覚的に区別するためにオリジナルテーマを自作。猫の写真を使ったChrome Webストア公開テーマ「sleepy cat」の作成手順と活用方法を紹介します。Thu, 08 Jul 2021 14:11:26 GMThttps://tubone-project24.xyz/2021/06/25/tech-blog-spider/https://tubone-project24.xyz/2021/06/25/tech-blog-spider/HarperDB・feedparser・GitHub Actionsを組み合わせて、完全無料でRSS更新をSlackに自動通知するシステムを構築。OGP画像取得やキーワード自動抽出機能も実装し、技術ブログのキャッチアップを効率化する方法を解説します。Fri, 25 Jun 2021 11:59:57 GMThttps://tubone-project24.xyz/2021/03/07/react-hook-form/https://tubone-project24.xyz/2021/03/07/react-hook-form/React Hook FormとGetform.ioを組み合わせたお問い合わせフォームの実装方法を解説。useFormによるバリデーション、handleSubmitでのフォーム送信、FormDataを使ったGetform.ioへのPOST処理など、実コード付きで具体的に紹介します。Sun, 07 Mar 2021 13:03:39 GMThttps://tubone-project24.xyz/2021/02/13/netlify-github-action/https://tubone-project24.xyz/2021/02/13/netlify-github-action/Netlify無料枠の月300分ビルド制限をGitHub Actionsに移行して解消する方法を解説。gatsby-plugin-minifyによるAsset最適化、imgurでの画像リサイズ、Getform.ioでのフォーム代替、netlify-cliによるデプロイ自動化の具体的な手順を紹介します。Sat, 13 Feb 2021 01:21:49 GMThttps://tubone-project24.xyz/2021/01/11/vercel-next/https://tubone-project24.xyz/2021/01/11/vercel-next/Next.jsとVercelを使ってAWS障害情報を見やすくするステータスダッシュボードを構築した記録。RecoilによるGlobal State管理、Material Tableでのデータ表示、Chart.jsでの障害可視化、Vercelへのデプロイ方法まで解説します。Mon, 11 Jan 2021 13:20:51 GMThttps://tubone-project24.xyz/2021/01/01/mqtt-nenga/https://tubone-project24.xyz/2021/01/01/mqtt-nenga/MQTTプロトコルとRaspberry Pi接続の電子ペーパーを使い、Webから送信した年賀状を電子ペーパーに表示するシステムの構築方法を解説。FastAPIによるバックエンド、React Hooks＋Tailwind CSSのフロント実装、mosquittoブローカーの構成を紹介します。Fri, 01 Jan 2021 12:58:01 GMThttps://tubone-project24.xyz/2020/12/25/selenium-lambda-container/https://tubone-project24.xyz/2020/12/25/selenium-lambda-container/AWS LambdaのContainer Image Supportを使い、AlpineベースのDockerイメージでSeleniumを動かす方法を解説。RICのインストール、日本語フォント豆腐問題の解消、Lambda in VPCでのIP固定化、Terraformによるインフラ構築まで一連の手順を紹介します。Fri, 25 Dec 2020 14:58:26 GMThttps://tubone-project24.xyz/2020/11/11/ssh-confiig-json/https://tubone-project24.xyz/2020/11/11/ssh-confiig-json/SSH ConfigとSSH鍵をJSON形式で一元管理し、AES暗号化で安全に保存できるPythonツール「ssh-config-json」の開発記。pipでインストールして使えるCLIの使い方、Pycryptodomeによる暗号化実装、PyPIへの自動デプロイ方法を解説します。Wed, 11 Nov 2020 14:42:50 GMThttps://tubone-project24.xyz/2020/09/22/nim-twitter/https://tubone-project24.xyz/2020/09/22/nim-twitter/Nim言語でTwitter API v1.1対応のSDKを自作し、CLI上でタイムライン閲覧や投稿ができるツールを開発した過程を解説。oAuth1.0認証の実装、CORDEA/oauthライブラリの活用、GitHub Actionsによるマルチプラットフォームビルドの方法を紹介します。Tue, 22 Sep 2020 11:39:58 GMThttps://tubone-project24.xyz/2020/08/14/github-action/https://tubone-project24.xyz/2020/08/14/github-action/GitHub JavaScript ActionをTypeScriptで自作し、GitHub ReleaseのUpdate Release機能を実装する方法を解説。action.ymlの設定、tsc＋nccによるバンドル、@actions/core・@actions/githubの使い方、マーケットプレイスへの公開手順を紹介します。Sun, 13 Sep 2020 12:41:20 GMThttps://tubone-project24.xyz/2020/07/25/gas-bot/https://tubone-project24.xyz/2020/07/25/gas-bot/Google Apps Script（GAS）とLINE Messaging APIを使い、位置情報から近くのラーメン屋を検索するLINE BOTの作り方を解説。ぐるなびAPIとホットペッパーAPIの併用、Firebaseとの連携、TypeScript＋Claspでの開発手法を紹介します。Fri, 24 Jul 2020 15:49:47 GMThttps://tubone-project24.xyz/2020/07/18/arctic-code-vault/https://tubone-project24.xyz/2020/07/18/arctic-code-vault/GitHub Arctic Code Vaultプログラムの全容を解説。北極圏スヴァールバル諸島の永久凍土に21TBのOSSコードが1000年保存される仕組みや、Arctic World Archive（AWA）の技術、Arctic Code Vault Contributorバッジの取得条件を紹介します。Sat, 18 Jul 2020 04:14:15 GMThttps://tubone-project24.xyz/2020/07/12/github-profile/https://tubone-project24.xyz/2020/07/12/github-profile/GitHubの隠し機能「GitHub Profile README」の作り方を解説します。ユーザー名と同じリポジトリを作成し、README.mdを編集するだけで自分のプロフィールページをカスタマイズできます。画像リンクの注意点やraw.githubusercontent.comの活用法も紹介。Sat, 11 Jul 2020 15:48:09 GMThttps://tubone-project24.xyz/2020/06/19/react-iframe/https://tubone-project24.xyz/2020/06/19/react-iframe/React Iframeライブラリを使って、Gatsby.js製PortfolioサイトにSoundCloudのメディアプレーヤーを埋め込む方法を紹介します。iframeタグをReactコンポーネントに変換するだけの簡単な手順でSoundCloudプレーヤーを実装できます。Thu, 18 Jun 2020 15:17:39 GMThttps://tubone-project24.xyz/2020/06/01/ssl-cert/https://tubone-project24.xyz/2020/06/01/ssl-cert/2020年5月のDatadog Agent障害を題材に、SSL証明書の仕組みからクロスルート証明書までを詳しく解説します。公開鍵暗号・認証局・証明書チェーン・失効リストの基礎知識とともに、AddTrust External CA Root失効の原因と対処法を紹介します。Mon, 01 Jun 2020 14:51:53 GMThttps://tubone-project24.xyz/2020/05/10/plant-check/https://tubone-project24.xyz/2020/05/10/plant-check/Raspberry Pi Zero WHと土壌センサー・DHT11・フォトレジスタを使って観葉植物の水やり監視システムを自作する方法を紹介します。ADC0832によるアナログ変換、FalconでのAPI化、Zabbixでのグラフ可視化まで一連の手順を解説します。Sun, 10 May 2020 06:29:01 GMThttps://tubone-project24.xyz/2020/05/03/stylegan2-anime/https://tubone-project24.xyz/2020/05/03/stylegan2-anime/NVIDIAのStyleGANとStyleGAN2を使って512x512の高解像度アニメキャラ画像を生成する方法を解説します。GANの仕組みからProgressive Growing・AdaINの技術解説、Windows環境でのCUDA/MSVC環境構築のトラブルシューティングまで詳しく紹介します。Sun, 03 May 2020 09:48:45 GMThttps://tubone-project24.xyz/2020/04/27/anime-face/https://tubone-project24.xyz/2020/04/27/anime-face/Jetson NanoとSainSmart IMX219カメラモジュールを使い、UGATITでリアルタイムにアニメ風自撮り動画を生成する方法を解説します。カメラ互換性の問題によるフレームレート調整やコード修正のポイントも紹介します。Mon, 27 Apr 2020 04:28:55 GMThttps://tubone-project24.xyz/2020/04/24/jetson-nano/https://tubone-project24.xyz/2020/04/24/jetson-nano/Jetson Nanoにtiny_yolov2_onnx_camをインストールし、カメラ映像からリアルタイム物体検知を行う手順を解説します。依存パッケージの導入からCythonのセットアップ、ONNX→TensorRT変換まで、つまづきやすいポイントも含めて紹介します。Fri, 24 Apr 2020 11:28:14 GMThttps://tubone-project24.xyz/2020/04/21/jetson-nano/https://tubone-project24.xyz/2020/04/21/jetson-nano/NVIDIA Jetson Nano開発者キットを購入し、ケースとファンを取り付けてOSをインストールするまでの手順を紹介します。小型ながら本格的なGPUコンピューティングが可能なJetson Nanoの開封レポートです。Mon, 20 Apr 2020 15:51:25 GMThttps://tubone-project24.xyz/2020/1/24/elixir-loadtest/https://tubone-project24.xyz/2020/1/24/elixir-loadtest/Elixirの並列処理を活用してAPIの負荷試験ツールを自作する方法を解説。HTTPoisonによるHTTPリクエスト、Task.asyncによるパラレル実行、CSVライブラリでの結果出力まで、Elixirならではの実装テクニックを紹介しますFri, 24 Jan 2020 02:18:13 GMThttps://tubone-project24.xyz/2020/1/20/x-ray-datadog/https://tubone-project24.xyz/2020/1/20/x-ray-datadog/AWS X-RayでLambda（Python）のリクエストをトレースし、Datadog APMに連携する方法を解説。Lambda Layerの作成、xray_recorderデコレータとpatch_allの使い方、DatadogのAWS Integration設定からAPMモニター構築まで網羅しますMon, 20 Jan 2020 14:08:11 GMThttps://tubone-project24.xyz/2020/1/6/2020-roadmap/https://tubone-project24.xyz/2020/1/6/2020-roadmap/Web Developer Roadmap 2020のフロントエンド編を眺めながら、React・TypeScript・CSS in JS・Gatsby.jsなど2020年に学ぶべき技術を考察。Vue.jsとの比較やSSR不要論、CSS Frameworkの動向についても率直にぼやきますMon, 06 Jan 2020 04:01:46 GMThttps://tubone-project24.xyz/2020/1/5/github-heatmap-blog/https://tubone-project24.xyz/2020/1/5/github-heatmap-blog/Gatsby.jsブログにReact Calendar Heatmapを導入し、記事の投稿日をGitHub風の草（ヒートマップ）として表示する方法を解説。StaticQueryでGraphQLからデータを取得し、ツールチップやクリック遷移も実装する手順を紹介しますSun, 05 Jan 2020 07:44:06 GMThttps://tubone-project24.xyz/2019/1/3/go-jaeger/https://tubone-project24.xyz/2019/1/3/go-jaeger/GoのWebフレームワークEchoにJaeger分散トレーシングを導入してAPIのボトルネックを調査する方法を解説。echo-contribのjaegertracing設定、child spanによる詳細計測、Docker上でのJaeger UIの起動手順まで実践的に紹介しますFri, 03 Jan 2020 08:07:30 GMThttps://tubone-project24.xyz/2019/12/31/lookingback/https://tubone-project24.xyz/2019/12/31/lookingback/2019年のエンジニア活動を振り返り。Vue.jsからReactまでフロントエンド技術の習得、テストコードやCI/CDへのこだわり、Go・Rust・Nim等の新言語挑戦、Chainerを使った機械学習、AWS Summit登壇など1年間の成長と課題をまとめますTue, 31 Dec 2019 06:32:05 GMThttps://tubone-project24.xyz/2019/12/30/newlogo/https://tubone-project24.xyz/2019/12/30/newlogo/tubone BOYAKIブログ用にSVG形式の新しいロゴを作成した過程を紹介。サメをモチーフにしたアイコンとMeriendaフォントを組み合わせ、テーマカラーの緑で仕上げたオリジナルロゴのデザイン制作記録ですMon, 30 Dec 2019 03:28:20 GMThttps://tubone-project24.xyz/2019/12/20/readingtime/https://tubone-project24.xyz/2019/12/20/readingtime/Gatsby.jsのブログにEstimated Reading Time（読了時間）を実装する方法を解説。gatsby-remark-reading-timeプラグインの導入手順に加え、滞在時間が13.8%向上したBrian Crayの実験結果など、読了時間表示の歴史と効果も紹介しますFri, 20 Dec 2019 12:48:26 GMThttps://tubone-project24.xyz/2019/12/16/python-auto/https://tubone-project24.xyz/2019/12/16/python-auto/GitHub API v4（GraphQL）とPython Requestsを使い、masterブランチへのPR情報からリリース実績を自動取得するスクリプトの作り方を解説。GraphQLの利点やISO8601時刻変換、BOM付UTF-8 CSV出力など実践的なTipsも紹介します。Sun, 15 Dec 2019 23:30:57 GMThttps://tubone-project24.xyz/2019/12/15/beginner-gomi/https://tubone-project24.xyz/2019/12/15/beginner-gomi/大学時代に初めてJavaScriptで書いたプログラムを振り返るエッセイ。学籍番号のチェックディジット計算ロジックを解明し、HTMLとJSで計算機を実装した体験談を通じて、未経験からプログラミングに踏み出す大切さを伝えます。Sat, 14 Dec 2019 16:14:53 GMThttps://tubone-project24.xyz/2019/12/12/julia-beginner/https://tubone-project24.xyz/2019/12/12/julia-beginner/プログラミング言語Juliaの入門として、ライプニッツの公式とガウス＝ルジャンドルのアルゴリズムで円周率を計算。JuliaのLLVMベースJITや動的型付けの特徴を解説しつつ、BigFloat対応の実装コードと精度比較の結果を紹介します。Wed, 11 Dec 2019 15:13:29 GMThttps://tubone-project24.xyz/2019/12/09/nuxt-composition-vuex/https://tubone-project24.xyz/2019/12/09/nuxt-composition-vuex/Nuxt.jsとVue Composition APIでVuexのStateをReactiveに扱う方法を解説。toRefsを使ったリアクティブなストア作成、setup内でのstore取得パターン、TypeScriptでの型定義の課題と解決策を実践コード付きで紹介します。Mon, 09 Dec 2019 11:41:54 GMThttps://tubone-project24.xyz/2019/12/08/nuxtjs-toast-module/https://tubone-project24.xyz/2019/12/08/nuxtjs-toast-module/Nuxt.jsの@nuxtjs/toastモジュールでGlobal OptionとRegister機能を活用し、toast設定を共通化する方法を解説。nuxt.config.tsでの一括設定やtoast.global呼び出しにより、コンポーネント側のコードを大幅に簡潔にできます。Sun, 08 Dec 2019 04:16:00 GMThttps://tubone-project24.xyz/2019/12/04/nuxt-toast/https://tubone-project24.xyz/2019/12/04/nuxt-toast/Nuxt.jsのmodulesをVue Composition APIで利用する方法を@nuxtjs/toastを例に詳しく解説。ClassAPIとの書き方の違いや、setup内でContextからモジュールにアクセスする実装パターン、エラーハンドリングとの組み合わせ方を紹介します。Wed, 04 Dec 2019 23:43:19 GMThttps://tubone-project24.xyz/2019/12/02/particles-bg-vue/https://tubone-project24.xyz/2019/12/02/particles-bg-vue/Nuxt.jsでparticles-bg-vueを導入してかっこいいパーティクル背景を実装する方法を解説。pluginsでの読み込み、layoutsでの共通適用、Composition APIでの利用例に加え、canvasObjectによるスタイル調整方法も紹介します。Sun, 01 Dec 2019 23:44:00 GMThttps://tubone-project24.xyz/2019/11/28/hadoop-elephant/https://tubone-project24.xyz/2019/11/28/hadoop-elephant/Hadoopのマスコットキャラである黄色いゾウの由来を、産みの親Doug Cuttingのインタビューから徹底調査。息子が愛したぬいぐるみの名前がHadoopだった逸話や、ロゴとぬいぐるみのギャップについて考察するユニークな技術コラムです。Thu, 28 Nov 2019 11:35:20 GMThttps://tubone-project24.xyz/2019/11/26/go-lambda/https://tubone-project24.xyz/2019/11/26/go-lambda/GoでAWS Lambdaを実装し、GitHub API v4(GraphQL)からリポジトリの使用言語一覧を取得する方法を解説。shurcooL/githubv4クライアントの使い方、Go構造体でのGraphQLクエリ定義、Lambda用ビルドとデプロイ手順を紹介します。Tue, 26 Nov 2019 11:31:35 GMThttps://tubone-project24.xyz/2019/11/25/github/https://tubone-project24.xyz/2019/11/25/github/GitHubに90日間毎日コントリビュートし続けた体験記。Write Code Every Dayの実践で得た実装スピード向上やCI知識の成長、一方で寝不足やアニメ断ちなどリアルな代償もまとめた振り返り記事です。Sun, 24 Nov 2019 23:31:20 GMThttps://tubone-project24.xyz/2019/11/20/docopt-nim/https://tubone-project24.xyz/2019/11/20/docopt-nim/PythonのCLIパーサーdocoptがNim言語でも使えることを発見し、実際にCLIアプリを構築した体験記。Nimの実行速度やトランスパイルの特徴、parseoptとの比較、docoptによるUsageベースのコマンドライン解析の書き方を紹介します。Wed, 20 Nov 2019 11:55:00 GMThttps://tubone-project24.xyz/2019/10/24/gas-webscreenshot/https://tubone-project24.xyz/2019/10/24/gas-webscreenshot/GASとAPI FLASHでWebページのスクリーンショットを定期取得し、SlackAPIで通知するシステムの構築方法を解説。ClaspによるTypeScript開発環境、JestでのURLFetchAppモック化テスト、GitHub Actionでの自動デプロイまで紹介します。Wed, 23 Oct 2019 22:22:00 GMThttps://tubone-project24.xyz/2019/10/23/slack-stamp/https://tubone-project24.xyz/2019/10/23/slack-stamp/Slackの絵文字スタンプを組み合わせて「謝罪ピラミッド」「インベーダゲーム」「福笑い」などのユニークな表現を作るスニペット集。コピペですぐ使えるSlackスタンプアートで、チームのコミュニケーションを楽しくする方法を紹介します。Wed, 23 Oct 2019 13:54:39 GMThttps://tubone-project24.xyz/2019/10/13/typhoon/https://tubone-project24.xyz/2019/10/13/typhoon/台風通過時のNetatmo気象センサーのデータをZabbixやNetatmo Dashboardで可視化した記録。気圧変化や風向の推移から台風の動きを読み取る方法や、IoTセンサーによる気象観測の実体験をまとめています。Sat, 12 Oct 2019 17:56:20 GMThttps://tubone-project24.xyz/2019/10/11/azure-dev-pipeline/https://tubone-project24.xyz/2019/10/11/azure-dev-pipeline/Mac環境構築のAnsible+ServerspecワークフローをクリーンなmacOS環境で検証するため、Azure DevOps Build PipelineでCI化する手順を解説。無料でmacOSイメージが使えるCIの選定理由やYAML定義の書き方を紹介します。Thu, 10 Oct 2019 15:04:39 GMThttps://tubone-project24.xyz/2019/10/08/serverspec/https://tubone-project24.xyz/2019/10/08/serverspec/Ansibleで構築したMac環境をServerspecで自動テストする方法を解説。RSpecベースのテストコード作成手順、パッケージインストール確認・コマンド結果検証・ファイル内容チェックの具体例をコード付きで紹介します。Wed, 09 Oct 2019 11:34:59 GMThttps://tubone-project24.xyz/2019/10/6/mac-auto-setup/https://tubone-project24.xyz/2019/10/6/mac-auto-setup/AnsibleでMacの開発環境構築を自動化する方法をInventory・Role・Playbookの設定手順に沿って解説。Homebrewモジュールによるパッケージ管理、lineinfile/blockinfileでのPATH設定、Makefileによる一発実行まで紹介します。Sun, 06 Oct 2019 02:20:10 GMThttps://tubone-project24.xyz/2019/09/30/netlify-form/https://tubone-project24.xyz/2019/09/30/netlify-form/Netlify Formを使ってGatsby.js製の静的サイトにお問い合わせフォームを実装する方法を解説。data-netlify属性の設定、スパムBot対策のhoneypot設定、フォーム送信通知の確認手順まで、コード付きで紹介します。Mon, 30 Sep 2019 03:47:34 GMThttps://tubone-project24.xyz/2019/09/27/github-weed/https://tubone-project24.xyz/2019/09/27/github-weed/Write Code Every Dayに挑戦してGitHubに30日間毎日コントリビュートし続けた体験談。社会人向けにテーラリングしたルール設定、毎日コードを書くことで得られたメリットと慢性的な寝不足などのデメリットを正直に振り返ります。Fri, 27 Sep 2019 10:41:02 GMThttps://tubone-project24.xyz/2019/09/24/json-resume/https://tubone-project24.xyz/2019/09/24/json-resume/JSON ResumeとAPI With GitHubを使って職務経歴書をJSON APIとして公開する方法を解説。JSON Resumeのスキーマ各項目（職歴・学歴・スキルなど）の書き方を海外事例も交えて紹介し、resume-cliでHTMLレジュメを生成する手順もまとめました。Tue, 24 Sep 2019 10:41:02 GMThttps://tubone-project24.xyz/2019/09/22/sentry/https://tubone-project24.xyz/2019/09/22/sentry/SentryをVue.js（TypeScript）プロジェクトに導入してフロントエンドのエラーをリアルタイムに検知する方法を解説。main.tsへのSentry初期設定、エラー発火時の通知確認、Slack連携によるリアルタイム通知まで、実装手順をコード付きで紹介します。Sat, 21 Sep 2019 15:26:09 GMThttps://tubone-project24.xyz/2019/09/20/gitpitch/https://tubone-project24.xyz/2019/09/20/gitpitch/GitPitchを使ってMarkdownからおしゃれなプレゼンテーションを作成する方法を紹介。Azusa Colorsを参考にした配色設定、背景画像やフォントのカスタマイズ、GitHub BadgeのREADMEへの貼り方まで、実例付きで解説します。Thu, 19 Sep 2019 15:26:30 GMThttps://tubone-project24.xyz/2019/09/12/particles-js/https://tubone-project24.xyz/2019/09/12/particles-js/Vue.jsでparticles.jsを手軽に導入してかっこいいパーティクルエフェクトを実装する方法を紹介。vue-particlesのインストールからmain.tsでの設定、CSSによるz-indexの調整まで、コード例付きでわかりやすく解説します。Thu, 12 Sep 2019 14:57:14 GMThttps://tubone-project24.xyz/2019/09/10/nightwatchjs-chromedriver/https://tubone-project24.xyz/2019/09/10/nightwatchjs-chromedriver/Nightwatch.jsのE2Eテストが動かない原因はnode_modules内のChromeDriverにあった。vue-cliが依存するChromeDriverのバージョン不一致を特定し、CircleCIのDockerイメージ上で解決するまでの調査過程と対処法を詳しく解説します。Tue, 10 Sep 2019 13:00:00 GMThttps://tubone-project24.xyz/2019/09/08/metasploitable-hyperv/https://tubone-project24.xyz/2019/09/08/metasploitable-hyperv/VirtualBox用のMetasploitableをHyper-vで動かす手順を解説。VMDKからVHDXへのディスク変換にMicrosoft Virtual Machine Converterを使い、PowerShellでの変換コマンドから仮想マシン作成・起動までの流れをまとめました。Sun, 08 Sep 2019 12:55:31 GMThttps://tubone-project24.xyz/2019/09/03/chromedriver/https://tubone-project24.xyz/2019/09/03/chromedriver/CircleCIでChromeDriver v76非対応エラーが発生した際のトラブルシューティング記録。DockerイメージのChrome Betaへの差し替えやバージョン固定など、E2Eテスト環境のChrome互換性問題への対処法を試行錯誤した過程をまとめました。Tue, 03 Sep 2019 13:09:22 GMThttps://tubone-project24.xyz/2019/09/02/github-action/https://tubone-project24.xyz/2019/09/02/github-action/GitHub Actionを使ったCI環境の構築手順を紹介。YAMLでのWorkflow定義、PythonのPytestによるMatrixテスト、Trigger設定など、GitHub純正CIの基本的な使い方を実例付きで解説します。Mon, 02 Sep 2019 11:33:53 GMThttps://tubone-project24.xyz/2019/09/01/netlify-and-gatsby/https://tubone-project24.xyz/2019/09/01/netlify-and-gatsby/Netlify CMSとGatsbyを使ったブログ構築の手順を解説。GitHubとの連携、CMS管理画面の設定、独自ドメインの適用まで、静的サイトジェネレーターを使ったHeadless CMSブログの作り方を初心者向けにまとめました。Sun, 01 Sep 2019 07:33:38 GMT