ダッシュボード

Cloudinary

Cloudinaryは、画像・動画の管理・変換・最適化ができるクラウドサービスです。画像の自動最適化やリサイズのオプションが豊富です。

必要な設定値

Cloudinary設定画面

pitcmsでCloudinaryを使用するには、以下の値が必要です。

項目必須説明例
Cloud Name○CloudinaryのCloud Namemy-cloud
API Key○CloudinaryのAPI Key123456789012345
API Secret○CloudinaryのAPI Secretxxxxxxxx
Folderアップロード先のルートフォルダ名my-project

以下、各値の取得方法を説明します。

Cloud Name / API Key / API Secretの取得

アカウントがない場合

  1. Cloudinaryにアクセス
  2. 「Sign Up For Free」をクリック
  3. アカウントを作成

認証情報の確認

  1. Cloudinaryダッシュボードにログイン
  2. 「Dashboard」ページに以下の情報が表示されています:
    • Cloud Name
    • API Key
    • API Secret
API Secretは機密情報です。公開しないでください。

Folderについて（省略可）

Folderを指定すると、アップロードされた画像はそのフォルダ配下に保存されます。

Folder設定保存先パス
my-projectmy-project/pitcms/{プロジェクトID}/{ファイル名}
省略pitcms/{プロジェクトID}/{ファイル名}

pitcmsでの設定

pitcmsダッシュボードから、設定 => 画像とすすみ、Cloudinaryタブを選択し、取得した値を入力して保存します。

画像の最適化

Cloudinaryでは、画像URLにパラメータを追加することで様々な変換が可能です。pitcmsを使用しているプロジェクト上で、URLにパラメータを追加することで、例えば以下のような操作ができます。

画像のリサイズ 

https://res.cloudinary.com/{cloud_name}/image/upload/w_300,h_200,c_fill/v1234567890/image.jpg
  • w_300: 幅300px
  • h_200: 高さ200px
  • c_fill: アスペクト比を維持してクロップ

自動フォーマット・品質最適化 

https://res.cloudinary.com/{cloud_name}/image/upload/f_auto,q_auto/v1234567890/image.jpg
  • f_auto: ブラウザに最適なフォーマット（WebP、AVIFなど）に自動変換
  • q_auto: 品質を自動最適化

詳しくはCloudinaryのドキュメントをご覧ください。

Docs