hrdtbs — Personal blog

ohiruneuni/blog

2026

Mini Shai-Hulud 2nd Waveの概要と対策

2026年5月11日から発生した`@tanstack`エコシステムを中心とする「Mini Shai-Hulud」サプライチェーン攻撃の第二波について、侵害手法、被害内容、そして具体的な対策の概要を解説します。

#Security#npm#GitHub Actions 7 min

GTM + iframe + クロスドメインにpostMessageで対応する

公式でも紹介されるリンカー設定だが、計測が不安定になる可能性が拭えず、設定が複雑になるケースが多いため、postMessageを利用したイベント委譲型の計測が有効な場合がある。

#Google Tag Manager#Google Analytics 2 min

Scroll Container内の絶対配置またはAG Gridのバグ

Scroll Containerが包含ブロックでない場合、内部の隔離されていない絶対配置された要素はScroll Containerの外側に配置されるため、ページの高さが大きくなるといった意図しない挙動を引き起こす。

#CSS#AG Grid 2 min

RenovateでGitHub ActionsのSHA Pinningを手軽に行う

GitHub Actionsでサードパーティのアクションを利用する際、バージョンをタグで指定しているケースをよく見かけるが、セキュリティの観点からは推奨されない。GitHub公式ドキュメントでは、アクションを不変なリリースとして利用する唯一の方法として、SHA Pining、つまりコミットSHAにピン留めすることを推奨している。

#Renovate#GitHub Actions 2 min
2025

GitHub releases APIを用いたXR Animatorの自動更新

GitHub Releasesにある最新のリリース情報は固定のURLから取得できる。これを使って自動更新やUI上から更新をサポートしていないXR Animatorの自動更新をサポートする。

#GitHub API#XR Animator 7 min

GASにサービスアカウントは利用できない

Google Apps Script (GAS)には、コードをリポジトリで管理しCI/CDで自動的に同期したい需要が強くある。 さらにチーム開発であれば、個人アカウントに依存しないWorkload Identityやサービスアカウントを利用したい需要も発生する。

#Google Apps Script#Clasp 3 min

GASのproject keyからscript idを取得する

Google Apps Scriptのログを見ると、なぜかscript idを含まず非推奨であるproject key含んでいる。他にもdeployment idやprocess id、user keyなどを含んでいるが、これらからログがどのScriptと紐づいているか特定することは困難に思える。

#Google Apps Script 1 min

ModalとDialogの分類

ModalとDialogは混同されることがあるが、そもそもレイヤーの異なる概念である。 ここでは混同の解消を目的に、これら及び関連用語の大まかな説明を行い、より正しい分類を示す。

#UI Design 4 min

Warudoブループリント集

Warudoハンズオンを実施する際に、サンプルとして作成したブループリント集。随時追加予定。

#Warudo 6 min

ComfyUIでQwen-Image-Editを試す

ComfyUIでQwen-Image-Editを試した結果をまとめる。 ComfyUIが提供するテンプレートが良く出来ており、Lightingもすぐに導入できるようになっている。オブジェクトの追加・削除・変更などは安定して出来たが、スタイルの変更やテキストの編集には一部難があるように感じた。

#AI#ComfyUI#Qwen-Image-Edit 6 min

Google Cloudでサービスを利用している認証情報を特定する

1つのプロジェクトで複数のプロダクトを運用してしまっているケースがよく見られます。 この場合、どのプロダクトで特定のGoogle Cloudサービスが利用されているか特定するには少し上長な手順が必要です。 実際に調査する際に利用した手順を紹介します。

#Google Cloud 2 min

GitHub Copilot Reviewを日本語にする

まだOrganization全体でGitHub Copilot Reviewの言語設定を切り替えることは出来ませんが、リポジトリ毎であれば.github/copilot-instructions.mdで応答する言語を指示できます。

#AI#GitHub Copilot 1 min

NanobrowserとローカルLLMでブラウザを操作する

Nanobrowserは、オープンソースのAIウェブエージェントであり、完全に無料で利用することが出来ます。 また好きなLLMプロバイダと接続することができ、Nanobrowser自体の動作は全てローカルブラウザ内で行われます。

#Nanobrowser#Ollama 2 min

SquarespaceからCloudflareにドメイン移管する

Squarespaceで契約していたドメインをCloudflareに移管する作業を行った。ウェブサイトビルダーとしての機能に特化したSquarespaceから、Cloudflareに移管することでパフォーマンスやセキュリティを重視したサポートが受けられる。また今回のケースでは、ドメインの年間更新費用を約2200円から約1400円に削減できた。移管手数料は実質無料で行える。

#Squarespace#Cloudflare 4 min

Workspace内のGASのメトリクスを定期取得する

Google Apps Script APIを利用することで、GASのメトリクスを取得できる。自分が管理しているGASのメトリクスを取得するだけであればAPIを叩くだけだが、Workspace内のGASのメトリクスを取得する場合は工夫が必要になる。

#Google Apps Script 6 min

Q. CircleCIでPEP 668エラーが発生するようになった

いくつかの CircleCI を利用しているプロジェクトで、ある時期を境に PEP 668 エラーが発生するようになった。 これは CircleCI が提供する Docker イメージの Ubuntu が非自明的に上がることにより、意図せず PEP 668 に従った Ubuntu 24.04 になってしまったことによる。

#CircleCI#Docker#Python 5 min

Storybook v9へのマイグレーションのメモ

ほとんどは公式の自動更新コマンドで移行が完了する。Storybook v9への移行を複数のリポジトリで行う必要があるため、作業をメモに残した。他リポジトリで差分があれば追記する。

#Storybook 2 min

Playwrightでテスト実行時にweb serverを立ち上げる

Playwright で書かれたテストの改修をしていると、CI 上でホスティングサービスにデプロイした URL を貰ってきてから実行しているケースが度々見られるが、Web Server を立ち上げて実行した方が良いことが多い。

#Playwright 2 min

MCPサーバーの概観

MCPの仕様、SDKやサーバーの例、MCPのサポート状況、セキュリティ上の懸念、代替の可能性について。

#AI#MCP 4 min

CSSカルーセルを試す

Chrome 135でサポートされたCSS Overflow Module Level 5によるCSSカルーセルの実装方法

#CSS 10 min

GitHub Sub-issuesのすすめ

Sub-issuesを利用することで、GitHubで完結したIssue管理、特に進捗管理が容易になる。

#GitHub 3 min

傍から見たスクラム

スクラムについて漠然として自分が思っていることをある程度まとめたもの。

#人間関係 8 min

Setup ComfyUI for 2025

知人のために2025年版 ComfyUIのセットアップを紹介する内容です。細かいところは直接説明するので省いています。

#AI#ComfyUI 4 min

GitHub Copilot Agent Modeを試す

現在はプレビューなため、Agent ModeはVSCode Insidersでのみ利用可能。合わせてCopilot Editsが一般公開、またVisionもプレビューでの利用が可能になった。

#AI#GitHub Copilot 2 min

Ref callbackとcleanup functions

Ref callback、React v19で追加されたクリーンアップ関数、useEffectとの違いについて。また特にクリーンアップ関数を使ったRef callbackの実装例。

#React 5 min

PRが閉じられたら自動的にNetlifyのDeployを削除する

NetlifyにはDeployを自動的に削除する機能があるが、よりコントロールしたい場合にはNetlify APIが利用できる。この記事では、Github Actionsで自動的にNetlifyのDeployを削除する方法について紹介する。

#Netlify#GitHub Actions 6 min
2024

Web ComponentsのReact v19対応

React v19ではグローバルなJSX名前空間が削除されたため、これを利用している場合に型の変更が必要になる。

#React#Web Components#TypeScript 2 min

コミット前に画像を圧縮させる

sharpを使って画像を圧縮するスクリプトを、lefthookを利用して画像をコミット前に圧縮させる方法について紹介する。

#Git#lefthook#sharp 2 min

StreamDeckをVTube Studioと連携する

StreamDeckのVTube Studioプラグインを利用して、StreamDeckからVTube Studioを操作できるようにする方法を紹介する。

#StreamDeck#VTube Studio 3 min

YouTubeの合成コンテンツ規制

規制を受けているYouTubeのコンテンツを調査する上で、 YouTubeの改変コンテンツと合成コンテンツについてのポリシーについて調べた内容をまとめた。

#YouTube 3 min

QRコードを簡単に生成する

QRコードを生成するライブラリは多く存在する。また、一時的なもので良ければURLで生成できるサービスもある。

#qrcode#QR Code API#GitHub Actions 2 min

Githubの検索に使える記述について

Githubの検索については公式ドキュメントが十分にまとめられている。しかし、少し辿りにくいようなので、人に共有しやすいように公式ドキュメントのリンクや一部の記述についてまとめた。

#GitHub Actions 3 min

カラオケJOYSOUND for STREAMERの利用規約を配信者向けに読む

カラオケ JOYSOUND for STREAMER は、JOYSOUND が提供予定の配信者のためのカラオケアプリであり、搭載されている楽曲はすべて配信に利用できるとしている。 また基本料金は無料（ジャンルに無料プレイが含まれている）であり、利用には月額課金が必要と書かれているが、無料楽曲の搭載も予定しているとのことだ。 https://store.steampowered.com/app/2939590/JOYSOUNDforSTREAMER/

#配信#JOYSOUND 5 min

Unreal Engine 5.4でVMC Protocolを利用する

Unreal Engine 5.4でVirtual Motion Capture Protocol（VMC Protocol）を利用して、モデルにアニメーションを適用する方法をメモした。

#Unreal Engine#VMC Protocol 1 min

Q. Renovateでauto mergeが上手く動作せず、レビュワーが設定されない

Renovateでauto mergeを有効化した上で、Githubのブランチプロテクションでレビューを必須にした場合、適切な対応を行わなければオートマージが行われずレビュワーも設定されない。これによりRenovateのPRが見逃されるケースがあり、相談を受けた際の説明をまとめた。

#Renovate#GitHub 2 min

Renovateのレビュワーにチームを指定して運用する

Renovateでレビュワーを指定する際、Githubで設定したチームを指定することで、放置される可能性を減らしたり、チームメンバーが変わっても設定を変更する必要がなくなるなどのメリットを受けられる。

#Renovate#GitHub 2 min

iOS Safariの音声再生における制限とその回避策の検証

ブラウザでは音声の自動再生を防ぐ目的で、音声の再生が制限されている。この記事では、特に制限が厳しいと言われるiOS Safariについて、その制限と回避策の検証を行った内容をまとめる。

#JavaScript#HTML#Web Audio API 10 min

WindowsからHugging Faceにssh接続する

Hugging Face固有の内容はほぼない。Windows環境からSSH接続しようとするとError connecting to agentと言われた。その対応をまとめる。

#AI#Windows#SSH#Hugging Face 3 min

PCで流れている曲を検索する

Shazamを使えばいい。PCで流れている音楽を検索する方法を紹介する。ブラウザで流れている音声を検索する方法や、周囲で流れている音声を検索する方法、モバイルで検索する方法について。

#Shazam 1 min

Tabs using Parallel Routes with Next.js App Router

公式ドキュメントを十分に読んでいないと理解が難しいと思われるParallel routesが404になる理由やdefault.jsの意味について、タブの実装を例に書いた。

#Next.js#React 2 min

React 19の機能を見る会のメモ

React公式ドキュメントを見ながらReact 19の新機能を見る会を主催した際のメモです。多くは最低限このくらいの理解はしておいた方がいいという内容を事前に羅列しておいたものですが、一部その場で話題になった内容も含まれています。

#React 4 min

Setup Stylelint v16 for CSS-in-JS

StylelintはCSS-in-JSで扱うことが少し困難になった時期に使わなくなっていたが、久しぶりStylelintを調べると十分に対応されていたので、導入を行った。その際の設定方法を記載する。

#Stylelint 2 min

fireEventではなくuserEventを使う

fireEventではなくuserEventを使うべき理由と、userEventの使い方、userEventが対応できないケースについて解説する。

#React Testing Library 2 min

Q. position: stickyが効かない

position: stickyが効かないという質問を受けたことが度々あったので、その原因と解決策についてまとめた。

#CSS 1 min

Q. Remix Cloudflareで404 not matchエラーが出る

Remix + Cloudflareの環境で、トップページのOutlet内部のコンテンツが表示されず、他のページでは404 Not matchエラーが発生するようになったと相談を受けたので、その原因と解決策についてまとめた。

#Cloudflare#Remix 1 min
2023

ReactコンポーネントはJSXとして呼ぶべき

ReactコンポーネントをJSX形式ではなく、ただの関数として呼ぶとバグの原因になる場合がある。これが原因のバグの相談を度々受けるので、問題になる例と対策をまとめた。

#React 2 min

2種類のスクロールバーとscrollbar-gutterによる制御

動的的にコンテンツが増えるようなサービスでは、クラシックスクロールバーによって画面が崩れたような印象を与えてしまう場合がある。この記事では、クラシックスクロールバーとオーバーレイスクロールバーの軽い説明と、scrollbar-gutterによる対策を説明する。

#CSS 4 min

VOICEVOXをREST APIとして利用する

チャットボットの音声としてVOICEVOXの利用を検討した際に、REST APIとして利用する方法を調査した内容をまとめた。

#VOICEVOX 2 min

Prism.jsでハイライトされない言語があった

Prism.jsを利用していると対応言語に書かれているがハイライトされない言語がいくつかあった。これはprism-react-rendererからprismjs本来の機能を使うように移行した際のメモです。

#React#Prism.js 1 min
2022

Reactのイベント型について

Reactのイベント型について書いた。React.MouseEvent、React.ChangeEvent、React.SyntheticEvent、NativeのEvent型、React.XXXEventHandlerなどについて、どれを使うべきか。

#React#TypeScript 3 min

Reactのpropsをunion typeにする方法について

Reactのpropsをunion typeにする方法をいくつか紹介する。ただし、これらの利用やそもそもunion typeをpropsに使うこと自体が適切かどうかは慎重に検討する必要がある。

#React#TypeScript 4 min

ReactとTypeScriptでHTML属性を拡張する方法について

ReactとTypeScriptでHTML属性を拡張する方法について書いた。React.ComponentPropsWithoutRefやReact.ComponentPropsWithRef、React.ComponentProps、JSX.IntrinsicElements、React.DetailedHTMLProps、React.ButtonHTMLAttributes、React.HTMLProps、React.AllHTMLAttributes、React.HTMLAttributesなど。

#React#TypeScript 2 min

CSS in JS 2022-10

2022年10月時点でのCSS in JSについてのメモ。Zero Runtime CSS in JSやZero-runtime CSS in JSライブラリの比較など。

#CSS#CSS-in-JS 3 min

CSSで印刷時の見た目を調整する

@media printや@page、break-inside、break-before、break-after、print-color-adjustなどを利用して印刷時の見た目を調整する方法を紹介する。

#CSS 5 min

Upgrade to React 18

会社にて、ほとんどのサービスのReactのバージョンをアップグレードするイベントを開催した際のQ&Aなどをまとめました。

#React 8 min
2020
2019