imagekit-integrations

ImageKit の統合

ImageKit は、SDK（フロントエンド、バックエンド、モバイル）、ノーコードプラグイン（CMS、eコマース）、外部ストレージコネクター、ビデオプレーヤー、埋め込み可能なウィジェット、AI／自動化ツール、URL を直接生成するヘルパーを提供しています。このスキルでは、それらすべてと各機能の概要を紹介します。

このスキルを使用する場面

• アプリに ImageKit を統合するにあたり、自分のスタックに対応する SDK、プラグイン、プレーヤー、ウィジェット を知りたい場合。
• 導入を決める前に、特定の統合で 何ができるか を手早く把握したい場合。
• 「ImageKit を X と統合するにはどうすればよいか」という質問を、適切な場所に案内したい場合。

このスキルの使い方

1. 以下のセクションに目を通します。統合の種類（SDK、プラグイン、ストレージ、プレーヤー、ウィジェット、自動化、URL 生成）ごとにまとめています。自分のスタックや用途に合った項目を見つけ、概要を読んで適合することを確認してください。
2. 実装の詳細については、imagekit_guides と imagekit_sdk のソースを指定して mcp_imagekit_devtools_search_docs を検索します。たとえば、「Node.js で署名付き URL を生成する」や「React でレスポンシブな srcset を設定する」と検索します。関連するスニペットのみが返されるため、ページ全体を読み込むよりもはるかに低コストで高速です。
3. ドキュメントページ全体を最初から最後まで確認する必要がある場合に限り、完全なページを取得します（URL の末尾に .md を追加するとプレーンテキストになります）。それ以外の場合は、search_docs を使用してください。

SDK

フロントエンド

最適化された URL を生成し、ブラウザーからアップロードするウェブアプリ向けです。以下をカバーします。

• 形式と品質を自動調整した最適化済み画像・動画の読み込み
• サイズ変更、トリミング、連続変換（1 回のリクエストで複数の操作）
• テキスト、画像、動画、字幕のオーバーレイ
• レスポンシブ画像（srcset／sizes）、遅延読み込み、低品質プレースホルダー（LQIP）
• タグ付けとメタデータに対応したクライアント側アップロード

すべてのフロントエンド SDK は JavaScript SDK をラップしています。完全に制御する必要がある場合は、直接こちらを使用してください。

技術	ガイド
JavaScript	Vanilla／ブラウザー
React	React コンポーネントとフック
Next.js	App および Pages ルーター
Vue.js	Vue コンポーネント
Angular	Angular コンポーネント
Astro	Astro コンポーネント
React Native	モバイルウェブ／ネイティブ

バックエンド

URL の構築、安全な配信、メディアライブラリの管理を行うサーバー向けです。以下をカバーします。

• 変換を指定した URL の構築
• 非公開メディアを安全かつ期間限定で配信するための署名付き URL
• クライアントが安全にアップロードできるよう、認証パラメーター（token、expire、signature）を生成
• ファイルのアップロード、タグ付け、メタデータ操作
• メディア管理 API（一覧表示、検索、移動、削除、バージョンなど）を使いやすくするラッパー

技術	ガイド
Node.js	JS／TS ランタイム
Python	Python SDK
Java	Java SDK
PHP	PHP SDK
Ruby	Ruby（Rails、CarrierWave に対応）
.NET	.NET SDK
Go	Go SDK

モバイル

iOS および Android 向けのネイティブ SDK です。以下に対応しています。

• 適応ビットレート（ABR）動画ストリーミングを含む、最適化された画像・動画の URL 構築
• メディアの読み込み — Android SDK は Glide、Picasso、Coil、Fresco と統合できます
• レスポンシブな画像読み込み
• アップロードポリシー（ネットワークタイプ、再試行の動作など）を使用したアップロード
• ファイルサイズと寸法を調整するアップロード前の前処理

iOS SDK は現在、機能面で Android に遅れています。

技術	ガイド
Android	Glide/Picasso/Coil/Fresco
iOS	Swift SDK

ノーコードプラグインとストレージ

CMS と E コマース

既存のプラットフォームからメディアを ImageKit 経由で配信するネイティブプラグインです。統合コードを書かなくても、自動最適化、レスポンシブ配信、CDN キャッシュを利用できます。

プラットフォーム	ガイド
WordPress	WP プラグイン
Shopify	Shopify アプリ
Magento	Magento 拡張機能
Strapi	Strapi プロバイダー
Contentful	Contentful アプリ
Sanity	Sanity プラグイン
Netlify	Netlify 統合

外部ストレージ（オリジン）

既存のストレージを ImageKit のオリジンとして接続すると、すでに保存されているファイルを再アップロードや移行なしで最適化して配信できます。ユーザーの稼働中のアカウントでオリジンや URL エンドポイントを作成・更新するには、Admin MCP ツール（create_origin、create_url_endpoint、…）を使用してください。mcp-preflight を参照してください。セットアップガイドについては、search_docs に問い合わせてください。

プロバイダー	ガイド
AWS S3	S3 バケットオリジン
Google Cloud Storage	GCS バケットオリジン
Azure Blob Storage	Azure コンテナーオリジン
Firebase Storage	Firebase オリジン
DigitalOcean Spaces	Spaces オリジン
Web server / proxy	任意の HTTP オリジン

プレーヤーとウィジェット

動画プレーヤー SDK

Video.js を基盤とし、ImageKit の機能を備えた、すぐに組み込める動画プレーヤーです。以下に対応しています。

• 適応ビットレートストリーミングとシークプレビュー用サムネイル
• AI 生成の字幕とチャプター（50 以上の言語の音声テキスト変換、単語単位のハイライト表示）
• ショッパブル動画 — 再生画面に商品ホットスポットを重ねて表示
• プレイリストとおすすめ
• フローティング／固定プレーヤーとレスポンシブレイアウト

search_docs に 「React に ImageKit 動画プレーヤーを埋め込む」、「動画プレーヤーでチャプターを自動生成する」、「動画にショッパブルな商品ホットスポットを追加する」 などと問い合わせてください。

埋め込み可能なウィジェット

• 埋め込み可能なメディアライブラリウィジェット — ImageKit のメディアライブラリピッカーを自分のアプリに組み込み、ユーザーがアセットを閲覧・選択できるようにします。例：「メディアライブラリウィジェットを埋め込み、選択されたアセットのコールバックを処理する」 と問い合わせてください。
• アップロードウィジェット — Uppy ベースのウィジェットで、ローカルファイル、URL、Dropbox、Google Drive、Instagram などからメディアライブラリに直接アップロードできます。

AI と自動化

• Build with AI — Claude、Cursor、Windsurf、VS Code Copilot、Codex 向けのエージェントスキルと 2 つの MCP サーバー（ドキュメント／変換用の DevTools、メディアライブラリ管理用の API）です。
• n8n — ワークフローの自動化です。

URL の生成

SDK に加えて、ImageKit は配信 URL を直接構築して署名するための URL endpoint functions を提供しています。SDK 全体を導入せず、URL の構築だけが必要な場合に便利です。たとえば、「有効期限付きの配信 URL に署名する」や「オーバーレイ付きの変換 URL を構築する」と問い合わせてください。

---

上記の各種連携、プレーヤー、ウィジェット、URL 関数の実装方法については、mcp_imagekit_devtools_search_docs に問い合わせてください。たとえば、「Node.js で署名付き URL を生成する」、「React でレスポンシブな srcset を設定する」、「自動字幕付きで動画プレーヤーを埋め込む」などです。