🎨 デザインコミュニティ

canvas-component-utils

Use utility components to render formatted text and media correctly. Use when (1) Rendering HTML text content from props, (2) Displaying images, (3) Working with formatted text or media. Covers FormattedText and Image utilities.

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

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

🍎 Mac / 🐧 Linux

mkdir -p ~/.claude/skills && cd ~/.claude/skills && curl -L -o canvas-component-utils.zip https://jpskill.com/download/9234.zip && unzip -o canvas-component-utils.zip && rm canvas-component-utils.zip

🪟 Windows (PowerShell)

$d = "$env:USERPROFILE\.claude\skills"; ni -Force -ItemType Directory $d | Out-Null; iwr https://jpskill.com/download/9234.zip -OutFile "$d\canvas-component-utils.zip"; Expand-Archive "$d\canvas-component-utils.zip" -DestinationPath $d -Force; ri "$d\canvas-component-utils.zip"

完了後、Claude Code を再起動 → 普通に「動画プロンプト作って」のように話しかけるだけで自動発動します。

💾 手動でダウンロードしたい(コマンドが難しい人向け)

1. 下の青いボタンを押して canvas-component-utils.zip をダウンロード
2. ZIPファイルをダブルクリックで解凍 → canvas-component-utils フォルダができる
3. そのフォルダを C:\Users\あなたの名前\.claude\skills\(Win)または ~/.claude/skills/(Mac)へ移動
4. Claude Code を再起動

⬇ .zip でダウンロード(推奨) ⬇ .skill 形式(上級者用) 元のソース ↗

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

🎯 このSkillでできること

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

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

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

Claude Code を再起動すれば完了。「このSkillを使って…」と話しかけなくても、関連する依頼で自動的に呼び出されます。

詳しい使い方ガイドを見る →

最終更新: 2026-05-18
取得日時: 2026-05-18
同梱ファイル: 1

📖 Skill本文(日本語訳)

※ 原文(英語/中国語)を Gemini で日本語化したものです。Claude 自身は原文を読みます。誤訳がある場合は原文をご確認ください。

[Skill 名] canvas-component-utils

drupal-canvas パッケージからユーティリティをインポートします。

import { FormattedText, Image } from "drupal-canvas";

FormattedText

FormattedText を使用して、props から HTML コンテンツをレンダリングします。これは、component.yml に contentMediaType: text/html を持つすべての prop で必要です。

# component.yml
props:
  properties:
    text:
      title: Text
      type: string
      contentMediaType: text/html
      x-formatting-context: block
      examples:
        - <p>This is <strong>formatted</strong> text.</p>

import { FormattedText } from "drupal-canvas";

const Text = ({ text, className }) => (
  <FormattedText className={className}>{text}</FormattedText>
);

FormattedText を使用するべき場合:

リッチテキスト/HTML コンテンツを受け入れる Props
contentMediaType: text/html を持つすべての prop
、、、<a>、またはその他の HTML タグを含む可能性のあるコンテンツ

FormattedText を使用すべきでない場合:

プレーンテキストの props (contentMediaType のない type: string)
見出しまたはタイトル (通常の要素を使用)

Image

レスポンシブな画像レンダリングには Image を使用します。レスポンシブな動作と最適化を自動的に処理します。

# component.yml
props:
  properties:
    image:
      title: Image
      type: object
      $ref: json-schema-definitions://canvas.module/image
      examples:
        - src: https://example.com/photo.jpg
          alt: Description of image
          width: 800
          height: 600

import { Image } from "drupal-canvas";

const Card = ({ image }) => {
  const { src, alt, width, height } = image;
  return (
    <Image
      src={src}
      alt={alt}
      width={width}
      height={height}
      className="w-full rounded-lg object-cover"
    />
  );
};

Image props:

src - 画像 URL (必須)
alt - アクセシビリティのための代替テキスト (必須)
width - 元の画像の幅
height - 元の画像の高さ
className - スタイリングのための Tailwind クラス

📜 原文 SKILL.md(Claudeが読む英語/中国語)を展開

Import utilities from the drupal-canvas package:

import { FormattedText, Image } from "drupal-canvas";

FormattedText

Use FormattedText to render HTML content from props. This is required for any prop with contentMediaType: text/html in component.yml.

# component.yml
props:
  properties:
    text:
      title: Text
      type: string
      contentMediaType: text/html
      x-formatting-context: block
      examples:
        - <p>This is <strong>formatted</strong> text.</p>

import { FormattedText } from "drupal-canvas";

const Text = ({ text, className }) => (
  <FormattedText className={className}>{text}</FormattedText>
);

When to use FormattedText:

Props that accept rich text/HTML content
Any prop with contentMediaType: text/html
Content that may contain , , , <a>, or other HTML tags

Do NOT use FormattedText for:

Plain text props (type: string without contentMediaType)
Headings or titles (use regular elements)

Image

Use Image for responsive image rendering. It handles responsive behavior and optimization automatically.

# component.yml
props:
  properties:
    image:
      title: Image
      type: object
      $ref: json-schema-definitions://canvas.module/image
      examples:
        - src: https://example.com/photo.jpg
          alt: Description of image
          width: 800
          height: 600

import { Image } from "drupal-canvas";

const Card = ({ image }) => {
  const { src, alt, width, height } = image;
  return (
    <Image
      src={src}
      alt={alt}
      width={width}
      height={height}
      className="w-full rounded-lg object-cover"
    />
  );
};

Image props:

src - Image URL (required)
alt - Alt text for accessibility (required)
width - Original image width
height - Original image height
className - Tailwind classes for styling