render-info
BlazorのRendererInfoクラスを活用し、Webアプリケーションの描画環境やユーザーの操作方法を的確に把握し、最適な表示や動作を実装するSkill。
📜 元の英語説明(参考)
Using the RendererInfo class in Blazor to detect rendering context and interactivity.
🇯🇵 日本人クリエイター向け解説
BlazorのRendererInfoクラスを活用し、Webアプリケーションの描画環境やユーザーの操作方法を的確に把握し、最適な表示や動作を実装するSkill。
※ jpskill.com 編集部が日本のビジネス現場向けに補足した解説です。Skill本体の挙動とは独立した参考情報です。
下記のコマンドをコピーしてターミナル(Mac/Linux)または PowerShell(Windows)に貼り付けてください。 ダウンロード → 解凍 → 配置まで全自動。
mkdir -p ~/.claude/skills && cd ~/.claude/skills && curl -L -o render-info.zip https://jpskill.com/download/17179.zip && unzip -o render-info.zip && rm render-info.zip
$d = "$env:USERPROFILE\.claude\skills"; ni -Force -ItemType Directory $d | Out-Null; iwr https://jpskill.com/download/17179.zip -OutFile "$d\render-info.zip"; Expand-Archive "$d\render-info.zip" -DestinationPath $d -Force; ri "$d\render-info.zip"
完了後、Claude Code を再起動 → 普通に「動画プロンプト作って」のように話しかけるだけで自動発動します。
💾 手動でダウンロードしたい(コマンドが難しい人向け)
- 1. 下の青いボタンを押して
render-info.zipをダウンロード - 2. ZIPファイルをダブルクリックで解凍 →
render-infoフォルダができる - 3. そのフォルダを
C:\Users\あなたの名前\.claude\skills\(Win)または~/.claude/skills/(Mac)へ移動 - 4. Claude Code を再起動
⚠️ ダウンロード・利用は自己責任でお願いします。当サイトは内容・動作・安全性について責任を負いません。
🎯 このSkillでできること
下記の説明文を読むと、このSkillがあなたに何をしてくれるかが分かります。Claudeにこの分野の依頼をすると、自動で発動します。
📦 インストール方法 (3ステップ)
- 1. 上の「ダウンロード」ボタンを押して .skill ファイルを取得
- 2. ファイル名の拡張子を .skill から .zip に変えて展開(macは自動展開可)
- 3. 展開してできたフォルダを、ホームフォルダの
.claude/skills/に置く- · macOS / Linux:
~/.claude/skills/ - · Windows:
%USERPROFILE%\.claude\skills\
- · macOS / Linux:
Claude Code を再起動すれば完了。「このSkillを使って…」と話しかけなくても、関連する依頼で自動的に呼び出されます。
詳しい使い方ガイドを見る →- 最終更新
- 2026-05-18
- 取得日時
- 2026-05-18
- 同梱ファイル
- 1
📖 Skill本文(日本語訳)
※ 原文(英語/中国語)を Gemini で日本語化したものです。Claude 自身は原文を読みます。誤訳がある場合は原文をご確認ください。
Blazor での RendererInfo の使用
Blazor の RendererInfo クラスは、コンポーネントを実行しているレンダラーに関するランタイム情報を提供します。これは、コンポーネントがインタラクティブに実行されているか静的に実行されているかを検出し、特定のレンダリングプラットフォーム(例:Server、WebAssembly、WebView)を識別するのに特に役立ちます。
主要なプロパティ
IsInteractive
- 型:
bool - 説明: コンポーネントが現在インタラクティブなレンダリングモードで実行されているかどうかを示します。
- 使用法: これを使用して、静的なサーバーサイドレンダリング(SSR)またはプリレンダリング中にボタンを無効にしたり、ロードインジケーターを表示するなど、インタラクティブ性が必要な UI 要素を条件付きでレンダリングします。
@if (!RendererInfo.IsInteractive)
{
<p>Connecting...</p>
}
else
{
<button @onclick="HandleClick">Click Me</button>
}
Name
- 型:
string - 説明: レンダラーの名前を返します。
- 一般的な値:
"Static": 静的なサーバーサイドレンダリング(SSR)で実行されています。"Server": Interactive Server モード(SignalR)で実行されています。"WebAssembly": Interactive WebAssembly モードで実行されています。"WebView": Blazor Hybrid アプリケーション(MAUI、WPF、WinForms)で実行されています。
<p>Current Render Mode: @RendererInfo.Name</p>
一般的なシナリオ
1. プリレンダリング中の入力を無効にする
コンポーネントがサーバーでプリレンダリングされる場合、イベントハンドラー(@onclick など)はアクティブではありません。RendererInfo.IsInteractive を使用して、インタラクティブなランタイムが引き継ぐまで入力を無効にできます。
<button @onclick="Submit" disabled="@(!RendererInfo.IsInteractive)">
Submit
</button>
2. 静的とインタラクティブで異なるコンテンツをレンダリングする
静的な SSR 用には単純な HTML フォームを表示し、インタラクティブモード用にはリッチでインタラクティブなコンポーネントを表示したい場合があります。
@if (RendererInfo.Name == "Static")
{
<form action="/search" method="get">
<input name="q" />
<button type="submit">Search</button>
</form>
}
else
{
<SearchComponent />
}
関連する概念
AssignedRenderMode: コンポーネントに割り当てられたレンダリングモードを示すComponentBaseのプロパティです(例:InteractiveServer、InteractiveWebAssembly、InteractiveAuto)。AssignedRenderModeは、静的レンダリング中はnullになる可能性があることに注意してください。
重要な注意点
RendererInfoは .NET 8.0 以降で使用できます。- これは静的クラスであるため、インジェクションなしで Razor マークアップまたは C# コードで直接アクセスできます。
📜 原文 SKILL.md(Claudeが読む英語/中国語)を展開
Using RendererInfo in Blazor
The RendererInfo class in Blazor provides runtime information about the renderer that is executing the component. It is particularly useful for detecting whether a component is running interactively or statically, and for identifying the specific rendering platform (e.g., Server, WebAssembly, WebView).
Key Properties
IsInteractive
- Type:
bool - Description: Indicates whether the component is currently running in an interactive render mode.
- Usage: Use this to conditionally render UI elements that require interactivity, such as disabling buttons or showing loading indicators during static server-side rendering (SSR) or prerendering.
@if (!RendererInfo.IsInteractive)
{
<p>Connecting...</p>
}
else
{
<button @onclick="HandleClick">Click Me</button>
}
Name
- Type:
string - Description: Returns the name of the renderer.
- Common Values:
"Static": Running in static server-side rendering (SSR)."Server": Running in Interactive Server mode (SignalR)."WebAssembly": Running in Interactive WebAssembly mode."WebView": Running in a Blazor Hybrid application (MAUI, WPF, WinForms).
<p>Current Render Mode: @RendererInfo.Name</p>
Common Scenarios
1. Disabling Inputs During Prerendering
When a component is prerendered on the server, event handlers (like @onclick) are not active. You can use RendererInfo.IsInteractive to disable inputs until the interactive runtime takes over.
<button @onclick="Submit" disabled="@(!RendererInfo.IsInteractive)">
Submit
</button>
2. Rendering Different Content for Static vs. Interactive
You might want to show a simple HTML form for static SSR and a rich, interactive component for interactive modes.
@if (RendererInfo.Name == "Static")
{
<form action="/search" method="get">
<input name="q" />
<button type="submit">Search</button>
</form>
}
else
{
<SearchComponent />
}
Related Concepts
AssignedRenderMode: A property onComponentBasethat tells you which render mode was assigned to the component (e.g.,InteractiveServer,InteractiveWebAssembly,InteractiveAuto). Note thatAssignedRenderModemight benullduring static rendering.
Important Notes
RendererInfois available in .NET 8.0 and later.- It is a static class, so you can access it directly in your Razor markup or C# code without injection.