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

最新の投稿

JavaScriptの配列ショートハンド (AtCoder用)

JavaScriptでワーシャルフロイド法を実装
AtCoder ABC012 D問題 D - バスと避けられない運命 解説 実装 AtCoder ABC012 の D問題でワーシャルフロイド法が利用できる問題が出てきたので、 JavaScriptで実装しました。 AtCoder ABC012 D問題 D…

GitHub Actions で Gatsby をビルドし Amazon S3 にデプロイする
GitHub Actions について あらかじめ準備しておくもの AWS IAM ユーザを環境変数にセットする workflowの記述 ビルド バッジを利用する 終わりに 参考にしたところ Gatsbyで作った静的サイトを、GitHub Actions…

cloudinaryによる画像ファイルの管理 はじめてみる
目的 cloudinary について 他のサービスとの比較 料金プラン アカウントの登録 利用してみる ダッシュボード 画像の編集 APIベースでのアクセス 感想 参考 画像の管理や配信、さらには加工といった事ができるsaas型のcloud…

JavaScriptによる2分探索(バイナリサーチ) のサンプルコード
2分探索について ソース 参考 JavaScriptで2分探索(バイナリサーチ)を実装してみました。…

Vue.jsで作成された、ちょっと面白くて役立ちそうなサービス
UIコンポーネント VueSocial CKEditor 5 Vue.Draggable Vuetable 2 vuejs-datepicker Kalendar Vue Apexcharts Vue.js Google Charts vue-cart WebIDE…

GitHubのリポジトリをGitLabに同期する GitLabのミラーリング機能
GitLabのミラーリングについて GitHubのリポジトリをGitLabに反映する その他 参考 GitLabのミラーリング機能によりGitHubなどの外部のリポジトリとのミラーリングを行うことができます。 これを使ってGitHub…

WordPressやめます Gatsbyに移行しました
これまでのWordPress運用 なぜWordPressを捨てるのか? なぜGatsbyを利用するのか? gatsbyについて WordPressから記事の救出 移行対象記事の抽出 記事の置換 Gatsbyテーマの作成 Gatsby…

WordPressのDBから記事データを抽出する
WordPressのDB関連図 公開記事一覧の取得 タグ・カテゴリの取得 サムネイルの取得 おまけ: PHPスクリプト化しました 参考にしたところ WordPressにため込んだデータMarkdown化しGatsby…

ハイフンとかマイナスとかダッシュとか

Tags

Dates

© 2020   404 motivation not found