cloudinaryによる画像ファイルの管理 はじめてみる

2020-05-25
cloudinarysaascloud
    

目次

概要

画像の管理や配信、さらには加工といった事ができるsaas型のcloudサービスであるcloudinaryの紹介です。

目的

ブログ用の画像の管理に向いているか調べるために調査しました。

cloudinary について

cloudinaryは、Webサイトやアプリの画像や動画をアップロード、保存、管理、操作、配信ができるサービス(もしくはこのサービスを提供する企業)です。

Wikipedia(英) によると、「6,000社以上の550,000以上のWebおよびモバイルアプリケーション開発者によって使用されています」と書かれています。

他のサービスとの比較

cloudinaryの競合サービスとしてimgiximagekitといったものがありますが Cloudinary vs imgix vs ImageKit vs Optimole: Which Is Best for Image Optimization? ではcloudinaryが最高評価となっています。

ちなみに、Qiitaではimgixの試験利用を行っているようです。 Qiita Jobsにimgixを導入し、画像サイズを大幅に改善しました

料金プラン

cloudinaryでは利用できるリソースの量を"クレジット"という単位で提供しています。

無料プランでは25クレジット利用できます。

1クレジットでは

  • 1000回の転送
  • 1GBのストレージ
  • 1GBのネットワーク帯域もしくは500件の動画処理

となっています。

さらに課金コースだと、$99/月の場合225クレジット、$249/月の場合600クレジットとなります。

  • 1 credit = 1000 transformations or 1GB managed storage or 1GB net viewing bandwidth or 500 video processing seconds)

Plans that scale with your growth

アカウントの登録

パスワードは大文字+小文字+記号が含まれている必要がありました。

サインアップが完了すると簡単なアンケートが出てくるので適当に入力します。

無事アカウント作成が完了するとサービスが利用できるようになります。

利用してみる

ダッシュボード

2020 05 25 23 52 14

ダッシュボードの画像です。

ディレクトリ作成やファイルの操作・移動といった操作はドラッグ&ドロップで直感的にできます。

画像の編集

2020 05 25 23 55 51

画像の修正や簡単な加工はブラウザから操作できます。

編集した画像は、上に表示されているURLをコピペするだけで利用できます。

APIベースでのアクセス

各プログラム言語から利用するためのAPIが提供されています。これを用いて画像サイズの最適化や遅延ロード用の画像の生成といった事ができます。

さらに詳い内容はここで紹介されています。

Cloudinaryを使いこなすための10のポイント

感想

非常に操作しやすいUIだったのが良かったです。

無課金で利用する場合画像ファイルに対し月25000万以上アクセスのあるブログやサイトで利用するのは厳しいのかなと思いました。 ただし、無課金でもクレジットの追加は可能みたいです。

参考

Cloudinaryを使って画像の変換をやってみる

Developers.IO 2019 Tokyo 登壇資料:「Cloudinaryの画像変換・配信で Webサイトを高速化」を発表してきました #cmdevio

Cloudinaryという画像変換サービスについて勉強してきた

    
s-yoshiki
s-yoshiki
githubtwitterqiita
Web作ってますが、インタラクティブなプログラミングも好きです。
JavaScript / Vue / node.js / PHP / AWS / OpenCV

最新の投稿

PHP-FPM(php7.4) Apache2.4 on Ubutnu20.04 Webサーバ構築
環境 パッケージの更新 Apache と PHP のインストール Apache のサービスを開始する PHPファイルを作成 参考にしたサイト Ubuntu20.04 に PHP7.4 + Apache2.4 をインストールしてWeb…

PHP-FPM(php7.4) Apache2.4 でWebサーバ構築 on CentOS8
環境 php7.4 のインストール apacheのインストール php-fpmの設定を変更する php-fpm の起動 apacheの起動 確認 おまけ: エラーと解決方法 "System has not been booted with systemd as…

CentOS8 に PHP7.4 インストール
環境 普通にインストールしようとするとphp7.2がインストールされる modularityについて php7.4 インストール CentOS8 に modularity を利用して PHP7.4をインストールした際のメモです。 環境 CentOS8.…

UNIXドメインソケット通信 vs INETドメインソケット通信 php-fpmで動作させる場合の違いについて
結論 ソケット通信について ソケットについて ソケット通信の種類 UNIXドメインソケット通信を行う場合のメリット 参考にしたサイト php-fpm の設定方法で調べた際にIPとポートで設定するパターンとUNIX…

Amplify CLI のインストール
Amplify CLI のインストール Amplify CLI の設定 バックエンド環境作成 Amplify CLI のインストールから設定まで Amplify CLI をインストール 設定 Amplify アプリを初期化 Amplify CLI…

AWS Amplify に Next.js (SSG) で作ったアプリをデプロイする
はじめに 操作 Next.js (React) アプリの作成、Gitへのプッシュ AWS Amplifyでプロジェクト作成 参考にしたサイト この記事では、React / Next.js アプリケーションを作成し、AWS Amplify…

Typescriptに入門した
初期作業 とりあえずHello World 初期作業 typescript環境を作っていきます。 とりあえずHello World まず、次のサンプルコードを作成します。 typescriptファイルをビルドします。

Vue/Nuxt.js 触ってた人が Next.js に入門する
はじめに 実施環境 学習ガイド Create a Next.js App Navigate Between Pages ページの作成 リンク Assets, Metadata, and CSS Assets メタデータ CSS…

PHP-Parser で PHP5からPHP7で動くコードに自動修正するツールが作る夢をみた
ツールが備える機能条件 PHP-Parser について PHP-Parser の簡単なサンプル ASTオブジェクトの置換・変更 PHP5からPHP7への変更内容を実装する ex1 includeパスを変更する ex2 例外クラスを Exception…

PHP5からPHP7への移行ツールを作るための解析・自動修正ツールを調べる
PHP5からPHP7への下位互換のない機能 使えそうなツールの洗い出し PHPStan phan php7cc php7mar php-to-7-aid Rector php-ast PHP-Parser まとめ 追記 (2021/01/0…

Tags

Dates

© 2021   404 motivation not found