jpskill.com
📦 その他 コミュニティ

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本体の挙動とは独立した参考情報です。

⚡ おすすめ: コマンド1行でインストール(60秒)

下記のコマンドをコピーしてターミナル(Mac/Linux)または PowerShell(Windows)に貼り付けてください。 ダウンロード → 解凍 → 配置まで全自動。

🍎 Mac / 🐧 Linux
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
🪟 Windows (PowerShell)
$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. 1. 下の青いボタンを押して render-info.zip をダウンロード
  2. 2. ZIPファイルをダブルクリックで解凍 → render-info フォルダができる
  3. 3. そのフォルダを C:\Users\あなたの名前\.claude\skills\(Win)または ~/.claude/skills/(Mac)へ移動
  4. 4. Claude Code を再起動

⚠️ ダウンロード・利用は自己責任でお願いします。当サイトは内容・動作・安全性について責任を負いません。

🎯 このSkillでできること

下記の説明文を読むと、このSkillがあなたに何をしてくれるかが分かります。Claudeにこの分野の依頼をすると、自動で発動します。

📦 インストール方法 (3ステップ)

  1. 1. 上の「ダウンロード」ボタンを押して .skill ファイルを取得
  2. 2. ファイル名の拡張子を .skill から .zip に変えて展開(macは自動展開可)
  3. 3. 展開してできたフォルダを、ホームフォルダの .claude/skills/ に置く
    • · macOS / Linux: ~/.claude/skills/
    • · Windows: %USERPROFILE%\.claude\skills\

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 のプロパティです(例:InteractiveServerInteractiveWebAssemblyInteractiveAuto)。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 on ComponentBase that tells you which render mode was assigned to the component (e.g., InteractiveServer, InteractiveWebAssembly, InteractiveAuto). Note that AssignedRenderMode might be null during static rendering.

Important Notes

  • RendererInfo is 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.