Hero img
cloudinaryで画像、動画アセット管理

cloudinaryを使ってウェブ用の画像、動画の管理や配信を行う

低解像度のwebページ用の画像が欲しかったので、このcloudinaryを使うようにしました


目次

  • cloudinary
  • なぜCloudinaryを使おうと思ったのか?
  • 料金体系
  • 無料枠
  • SDKリスト
  • Cloudinaryの使い方
  • ファイルのアップロード
  • フォルダー
  • 参照URL先
  • まとめ

cloudinary

cloudinaryはクラウドベースの画像および動画の管理および配信プラットフォームです。
Cloudinaryを使用すると、画像や動画のアップロードをすれば、変換、最適化が自動で行われ希望の解像度の画像、動画を配信することができます。CDNで最適な配信もできるようになっています。 その他、Cloudinaryの類似のサービスにはImgixというものがあります。 とりあえ無料で使えるので使って見てもいいと思います。公式

なぜCloudinaryを使おうと思ったのか?

Cloudinaryを利用することで、欲しいサイズの画像や、動画が手に入ります。
画像、動画のデータ使用量を抑えることができたり、CDNのため、データ転送も高速です。
画像処理は結構CPU持っていかれるので、頼れるのであれば外部サービスに頼りたいという思いを叶えてくれるのがこのCloudinaryでした。
このCloudinaryに画像をアップすると画像を変換してくれます。仮に4096pxの画像をアップすると、自動で変換され、320pxなど欲しいサイズで、受け取ることができます。
公式の開発サイトで紹介されているので見て頂ければ分かりやすいと思います。
cloudinary-developsite

あとはqiitaで物凄く分かりやすく解説しているのでどうすれば指定の解像度の画像が取得できるのかが分かります。

料金体系

公式ページに有料プランと無料プランの内容があります。 が、私の場合今は十分使えています。そのため、アップロードを多々する以外は、個人使用の場合はあまり気にしなくてもいいのかな?と思います。

無料枠

無料枠では毎月25クレジットを使用できます。

bandwidth1G
Transformations1000
Storage1G

25クレジットを3つの項目で消費していきます。 例えばbandwidthが10G,Storageが10Gであれば、その月の消費量は20クレジットになります。
また、この月と言うのは30日?間の事です。そのため、月初め1日に全てがリセットされるというわけではありません。

SDKリスト

私はwebページ用に使用していますが、android,ios,flutter,.NET,etcのSDKも提供しているため、色々なところでCloudinaryを使用する事ができます。
もちろん画像のURL+パラメーターを付けてそのまま画像データを取得することも可能です。
SDKを使うメリットとすれば、画像のアップロードもSDK対応しているため、それぞれのプラットフォームで画像のアップロードをすることも可能です。 SDK一覧をご確認ください。

Cloudinaryの使い方

使い方と言ってもURLにパラメーターを付けるだけなので難しい事はなく、公式のサンプルもデモページもあり非常に分かりやすくなっています。パラメーターが多く存在しているがファイルサイズのパラメーターだけで事足ります。

その他、詳しく知りたい方は公式を参考ください。
サンプルもがありますので確認ができます。

おすすめ

コンソール画面で画像を見ながら直感的にパラメーターを取得することができます。

コンソール画面で画像を右クリックし、Advanced Editingモードを開くと、画像の編集画面を見ながら、さらにパラメーター付の画像のURLも右下に表示されます。
そのため、パラメーター関連を覚えなくても、使用することができます。

cloudinary-library-page cloudinary-edit-page cloudinary-param

ファイルのアップロード

Cloudinaryにアップロードする方法はapiを使うこともできますが、先ほどのコンソール画面でファイルをドラックアンドドロップでアップロードをすることができます。 cloudinary-fileupload その他にはgoogle driveやdrop boxを連携してファイルのアップロードをすることも可能です。

フォルダー

Cloudinaryにもフォルダー分けができます。
何も指定せずにアップロードをするときはhomeにファイルがアップロードされます。
後でフォルダー移動でもできますので、後で移動させても問題ありません。 cloudinary-move-to-folder 一点注意として、フォルダー移動させるとURLも変わるため、ご注意ください。

参照URL先

公式ページ

qiita解説ページ  

公式の開発サイト

公式サンプルページ  

gitサンプル

next.js用npmパッケージ

SDK一覧

料金解説

まとめ

Cloudinaryを使用して、サイズが最適化された画像、動画を使用する事ができます。
もちろんウェブ用とか、android apk用だとか自前でサイズ変換しても良いけど、結構大変なのでこういうサービスに頼って行くのも十分ありだと思います。

関連記事

コメント

コメントを書く

質問や、間違いがありましたら、お気軽にどうぞ

※お名前とコメントの内容を入力してください。
※全てこのブログ上に公表されます。
※許可なく管理者によって修正・削除する場合がございます。 詳しくはプライバシーポリシーを参照ください