📦 その他 コミュニティ
cloudinary
Cloudinaryは、画像の最適化や変換、レスポンシブ対応、メディアのアップロード、CDNからの配信など、画像や動画を効率的に管理・活用するのを支援するSkill。
📜 元の英語説明(参考)
Manage images and videos with Cloudinary. Use when a user asks to optimize images, add image transformations, implement responsive images, upload media, or serve optimized assets from a CDN.
🇯🇵 日本人クリエイター向け解説
一言でいうと
Cloudinaryは、画像の最適化や変換、レスポンシブ対応、メディアのアップロード、CDNからの配信など、画像や動画を効率的に管理・活用するのを支援するSkill。
※ jpskill.com 編集部が日本のビジネス現場向けに補足した解説です。Skill本体の挙動とは独立した参考情報です。
⚡ おすすめ: コマンド1行でインストール(60秒)
下記のコマンドをコピーしてターミナル(Mac/Linux)または PowerShell(Windows)に貼り付けてください。 ダウンロード → 解凍 → 配置まで全自動。
🍎 Mac / 🐧 Linux
mkdir -p ~/.claude/skills && cd ~/.claude/skills && curl -L -o cloudinary.zip https://jpskill.com/download/14760.zip && unzip -o cloudinary.zip && rm cloudinary.zip
🪟 Windows (PowerShell)
$d = "$env:USERPROFILE\.claude\skills"; ni -Force -ItemType Directory $d | Out-Null; iwr https://jpskill.com/download/14760.zip -OutFile "$d\cloudinary.zip"; Expand-Archive "$d\cloudinary.zip" -DestinationPath $d -Force; ri "$d\cloudinary.zip"完了後、Claude Code を再起動 → 普通に「動画プロンプト作って」のように話しかけるだけで自動発動します。
💾 手動でダウンロードしたい(コマンドが難しい人向け)
- 1. 下の青いボタンを押して
cloudinary.zipをダウンロード - 2. ZIPファイルをダブルクリックで解凍 →
cloudinaryフォルダができる - 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 自身は原文を読みます。誤訳がある場合は原文をご確認ください。
Cloudinary
概要
Cloudinary はメディア管理プラットフォームです。画像のアップロード、変換、最適化、配信を CDN 経由で行います。URL パラメータによるオンザフライの変換（リサイズ、クロップ、フォーマット変換、AI ベースのクロップ）が可能です。
手順
ステップ 1: アップロード
// lib/cloudinary.ts — アップロードと変換
import { v2 as cloudinary } from 'cloudinary'
cloudinary.config({
cloud_name: process.env.CLOUDINARY_CLOUD_NAME,
api_key: process.env.CLOUDINARY_API_KEY,
api_secret: process.env.CLOUDINARY_API_SECRET,
})
// 画像をアップロード
const result = await cloudinary.uploader.upload(filePath, {
folder: 'products',
transformation: [
{ width: 1200, height: 1200, crop: 'limit' }, // 最大寸法
{ quality: 'auto', fetch_format: 'auto' }, // 自動最適化
],
})
// result.secure_url → https://res.cloudinary.com/myapp/image/upload/v1234/products/abc.jpgステップ 2: URL 変換
// 再アップロードせずに最適化された URL を生成
function getImageUrl(publicId: string, options: { width: number; height: number }) {
return cloudinary.url(publicId, {
width: options.width,
height: options.height,
crop: 'fill',
gravity: 'auto', // AI ベースのスマートクロップ
quality: 'auto', // 自動品質
fetch_format: 'auto', // ブラウザに基づいて WebP/AVIF
dpr: 'auto', // デバイスピクセル比
})
}
// レスポンシブな srcset
function getSrcSet(publicId: string) {
return [320, 640, 960, 1280, 1920]
.map(w => `${getImageUrl(publicId, { width: w, height: Math.round(w * 0.75) })} ${w}w`)
.join(', ')
}ステップ 3: Next.js 統合
// next.config.js
module.exports = {
images: {
loader: 'cloudinary',
path: 'https://res.cloudinary.com/myapp/image/upload/',
},
}
// または next-cloudinary を使用
import { CldImage } from 'next-cloudinary'
<CldImage
src="products/sneakers"
width={800}
height={600}
crop="fill"
gravity="auto"
alt="Product image"
sizes="(max-width: 768px) 100vw, 50vw"
/>ガイドライン
- 常に
quality: 'auto'とfetch_format: 'auto'を使用してください。Cloudinary が最適なフォーマット/品質を選択します。 gravity: 'auto'は AI を使用して被写体を検出し、インテリジェントにクロップします。- ユーザー生成コンテンツには署名付きアップロードを使用してください。不正利用を防ぎます。
- アプリ全体で一貫した変換を行うために、アップロードプリセットを設定してください。
- 無料枠: 25 クレジット/月 (~25K 変換または 25GB ストレージ)。
📜 原文 SKILL.md(Claudeが読む英語/中国語)を展開
Cloudinary
Overview
Cloudinary is a media management platform — upload, transform, optimize, and deliver images/videos via CDN. On-the-fly transformations (resize, crop, format conversion, AI-based cropping) via URL parameters.
Instructions
Step 1: Upload
// lib/cloudinary.ts — Upload and transform
import { v2 as cloudinary } from 'cloudinary'
cloudinary.config({
cloud_name: process.env.CLOUDINARY_CLOUD_NAME,
api_key: process.env.CLOUDINARY_API_KEY,
api_secret: process.env.CLOUDINARY_API_SECRET,
})
// Upload image
const result = await cloudinary.uploader.upload(filePath, {
folder: 'products',
transformation: [
{ width: 1200, height: 1200, crop: 'limit' }, // max dimensions
{ quality: 'auto', fetch_format: 'auto' }, // auto-optimize
],
})
// result.secure_url → https://res.cloudinary.com/myapp/image/upload/v1234/products/abc.jpgStep 2: URL Transformations
// Generate optimized URLs without re-uploading
function getImageUrl(publicId: string, options: { width: number; height: number }) {
return cloudinary.url(publicId, {
width: options.width,
height: options.height,
crop: 'fill',
gravity: 'auto', // AI-based smart crop
quality: 'auto', // auto quality
fetch_format: 'auto', // WebP/AVIF based on browser
dpr: 'auto', // device pixel ratio
})
}
// Responsive srcset
function getSrcSet(publicId: string) {
return [320, 640, 960, 1280, 1920]
.map(w => `${getImageUrl(publicId, { width: w, height: Math.round(w * 0.75) })} ${w}w`)
.join(', ')
}Step 3: Next.js Integration
// next.config.js
module.exports = {
images: {
loader: 'cloudinary',
path: 'https://res.cloudinary.com/myapp/image/upload/',
},
}
// Or use next-cloudinary
import { CldImage } from 'next-cloudinary'
<CldImage
src="products/sneakers"
width={800}
height={600}
crop="fill"
gravity="auto"
alt="Product image"
sizes="(max-width: 768px) 100vw, 50vw"
/>Guidelines
- Always use
quality: 'auto'andfetch_format: 'auto'— Cloudinary picks the best format/quality. gravity: 'auto'uses AI to detect the subject and crop intelligently.- Use signed uploads for user-generated content — prevents abuse.
- Set upload presets for consistent transformations across your app.
- Free tier: 25 credits/month (~25K transformations or 25GB storage).