jpskill.com
🎨 デザイン コミュニティ

canvas-component-upload

検証済みのコンポーネントをDrupal Canvasへアップロードし、依存関係の問題など一般的なアップロード失敗から自動的に復旧することで、コンポーネント作業完了後のアップロードを円滑に進めるSkill。

📜 元の英語説明(参考)

Upload validated components to Drupal Canvas and recover from common upload failures. Use after component work is complete and validated. Handles upload failures including dependency-related issues that require retry.

🇯🇵 日本人クリエイター向け解説

一言でいうと

検証済みのコンポーネントをDrupal Canvasへアップロードし、依存関係の問題など一般的なアップロード失敗から自動的に復旧することで、コンポーネント作業完了後のアップロードを円滑に進めるSkill。

※ jpskill.com 編集部が日本のビジネス現場向けに補足した解説です。Skill本体の挙動とは独立した参考情報です。

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

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

🍎 Mac / 🐧 Linux 
mkdir -p ~/.claude/skills && cd ~/.claude/skills && curl -L -o canvas-component-upload.zip https://jpskill.com/download/9233.zip && unzip -o canvas-component-upload.zip && rm canvas-component-upload.zip
🪟 Windows (PowerShell) 
$d = "$env:USERPROFILE\.claude\skills"; ni -Force -ItemType Directory $d | Out-Null; iwr https://jpskill.com/download/9233.zip -OutFile "$d\canvas-component-upload.zip"; Expand-Archive "$d\canvas-component-upload.zip" -DestinationPath $d -Force; ri "$d\canvas-component-upload.zip"

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

💾 手動でダウンロードしたい(コマンドが難しい人向け)
  1. 1. 下の青いボタンを押して canvas-component-upload.zip をダウンロード
  2. 2. ZIPファイルをダブルクリックで解凍 → canvas-component-upload フォルダができる
  3. 3. そのフォルダを C:\Users\あなたの名前\.claude\skills\(Win)または ~/.claude/skills/(Mac)へ移動
  4. 4. Claude Code を再起動
⬇ .zip でダウンロード(推奨) ⬇ .skill 形式(上級者用) 元のソース ↗

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

🎯 この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 自身は原文を読みます。誤訳がある場合は原文をご確認ください。

Canvas へのアップロード

アップロードする前に、ユーザーが Drupal Canvas CLI をインストールし、対象サイト用に設定済みであることを確認してください。

ゲートの設定

アップロードコマンドを実行する前に:

  1. プロジェクトのルートに .env ファイルが存在することを確認します。
  2. .env が存在する場合、以下の値が設定されていることを確認します。
    • CANVAS_SITE_URL
    • CANVAS_CLIENT_ID
    • CANVAS_CLIENT_SECRET
  3. .env が存在しない場合、または必要な値が欠落している場合は、停止し、最初にセットアップを完了するようにユーザーに依頼してください。
  4. セットアップの手順を推測しないでください。公式ドキュメントをユーザーに案内してください。
  5. ユーザーがセットアップの完了を確認した場合のみ、続行してください。

アップロードの実行

コンポーネントの作業が完了し、検証されたら、変更されたコンポーネントを Canvas にアップロードするかどうかをユーザーに確認してください。適切なパッケージマネージャーを使用するようにしてください。たとえば、npm を使用している場合は、次のコマンドを実行します。

npx canvas upload -c component1,component2,component3 -y

component1,component2,component3 を、作成または変更された実際のコンポーネント名に置き換えてください (例: canvas upload -c button,card,hero)。

アップロードの失敗の処理

デフォルトの動作: エラーが明らかに接続/セットアップの失敗でない限り、常に失敗したアップロードを再試行してください。

Canvas アプリの接続がすでに機能していることを示すエラー（たとえば、依存関係/順序に関連するコンポーネントエラー）の場合は、アップロードを再試行してください。接続/セットアップの失敗は再試行しないでください。

接続/セットアップの失敗: 停止し、再試行しないでください

認証、認可、またはネットワーク/接続エラーでアップロードが失敗した場合は、停止し、最初にセットアップを完了または検証するようにユーザーに依頼してください。これには、無効なクレデンシャル、許可されていない/禁止された応答、DNS の問題、接続拒否、ホストに到達できない、Canvas に到達する前のリクエストタイムアウト、または TLS/SSL ハンドシェイク/証明書の失敗などのエラーが含まれます。

公式のセットアップドキュメントをユーザーに案内してください。

.env の値 (CANVAS_SITE_URL、CANVAS_CLIENT_ID、CANVAS_CLIENT_SECRET) と OAuth/CLI の設定を確認して更新するように依頼し、セットアップの更新が完了したことを確認した後でのみ、アップロードを再試行してください。

依存関係に関連する失敗

あるコンポーネントが別のコンポーネントに依存している複数の新しいコンポーネントをアップロードする場合（たとえば、hero が heading をインポートする場合）、コンポーネントが存在しないことを示すメッセージでアップロードが失敗する可能性があります。これは、別のコンポーネントを含むコンポーネントが、その依存関係の前にアップロードされる場合に発生します。

これは予期される動作です。 単にアップロードコマンドを再試行してください。後続の試行では、前の実行で正常にアップロードされた依存関係はすでに存在するため、依存コンポーネントを正常にアップロードできます。

シナリオの例:

  1. 最初のアップロード試行: heading がまだ存在しないため hero が失敗しますが、heading は正常にアップロードされます。
  2. 2 回目のアップロード試行: heading が存在するため、hero は正常にアップロードされます。

複数回再試行してもアップロードが引き続き失敗する場合は、すべての依存コンポーネントがアップロードコマンドに含まれていることを確認してください。

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

Upload to Canvas

Before uploading, confirm the user has Drupal Canvas CLI installed and configured for their target site.

Setup gate

Before running any upload command:

  1. Check that a .env file exists in the project root.
  2. If .env exists, verify these values are set:
    • CANVAS_SITE_URL
    • CANVAS_CLIENT_ID
    • CANVAS_CLIENT_SECRET
  3. If .env is missing, or any required value is missing, stop and ask the user to complete setup first.
  4. Do not guess setup steps. Point the user to the official docs:
  5. Continue only after the user confirms setup is complete.

Run upload

When component work is complete and validated, ask the user if they would like to upload the modified components to Canvas. Make sure to use the right package manager. For example, if using npm, run the following command:

npx canvas upload -c component1,component2,component3 -y

Replace component1,component2,component3 with the actual component names that were created or modified (e.g., canvas upload -c button,card,hero).

Handling upload failures

Default behavior: always retry failed uploads unless the error is clearly a connection/setup failure.

Retry uploads when the failure indicates the Canvas app connection is already working (for example, dependency/order-related component errors). Do not retry connection/setup failures.

Connection/setup failures: Stop, do not retry

If upload fails with authentication, authorization, or network/connection errors, stop and ask the user to complete or verify setup first. This includes errors like invalid credentials, unauthorized/forbidden responses, DNS issues, connection refused, host unreachable, request timeout before reaching Canvas, or TLS/SSL handshake/certificate failures.

Point the user to the official setup docs:

Ask them to verify and update .env values (CANVAS_SITE_URL, CANVAS_CLIENT_ID, CANVAS_CLIENT_SECRET) and OAuth/CLI setup, then retry the upload only after they confirm setup updates are complete.

Dependency-related failures

When uploading multiple new components where one component depends on another (e.g., hero imports heading), the upload may fail with a message indicating that a component doesn't exist. This happens when a component that includes another gets uploaded before its dependency.

This is expected behavior. Simply retry the upload command. On subsequent attempts, the dependencies that were successfully uploaded in the previous run will already exist, allowing the dependent components to upload successfully.

Example scenario:

  1. First upload attempt: hero fails because heading doesn't exist yet, but heading uploads successfully.
  2. Second upload attempt: hero now succeeds because heading exists.

If uploads continue to fail after multiple retries, check that all dependency components are included in the upload command.