WordPressのCloudinary画像が変!まともに使えるかは要検証

Cloudinary WordPress

クレジットカード未登録で無料プランを使えるCloudinary(クラウディナリー)は、画像・動画を自分のサイトとは別の場所からCDN(コンテンツデリバリネットワーク)配信するサービスだ。

WebP(ウェッピー:画像系)やWebM(ウェブエム:動画系)配信が可能なので(非対応ブラウザは元・別拡張子)、負荷を分散させつつ新しくなったPageSpeed Insights(ページスピードインサイト)の点数を向上させることができる?(失敗

だが、このサービスのヘルプは「プレフィックス」・「オンザフライ」・「リモートがフェッチ」など翻訳されない専門用語が平然と図なし出現するため非常にわかりにくい。

さらに、よくわからない仕様が邪魔をして正常に使うにはある程度知る必要がある。

この記事では過去動画を完璧には助けられず、Cloudinaryをやめた際の動画の扱いが非常に面倒となっているため、事前に厄介レベルを確認すること。なお、当サイトは厄介レベルに引っかかり、この記事以外使用していない。

仕方がないので目的以外の機能をバッサリカットし、私が勝手に決めたルールのもとよくわからないまま専門用語・知識を省きまくり、目的のサービスだけを強奪していく

使い方はややこしいが様々な方法があり、そのリストが以下。

  • 普通+超面倒:画像と動画を過去記事含めてWebP・WebM配信(非推奨)
  • 普通+面倒:画像は過去記事含めてWebP配信にするが、過去記事の動画は諦めGIFをWebMにせずWebPで妥協し、これからの動画とGIFはWebM配信(推奨:当サイトは後述する不都合により断念)
  • 簡単+面倒:画像だけ配信(JetpackのPhotonのような使い方)
  • 簡単:動画だけ配信(しかもプラグインなし)

【悲報】公開時に様々な問題が発覚。アイキャッチはアップすると非表示にされ、AMPでの画像は横に縮む?ようだ。点数も上がらず、動画だけ配信くらいしかまともに使えないかもしれない。

途中諦めたら、本来予定していなかった上記の使い方を考えてみるといい(後半に再度触れる)。

AMPの縮む現象は限定的な環境だけの可能性が高く、直せる・人によっては問題ないかもしれないので、ヒントを追加しておいた。

スポンサーリンク

Cloudinaryとは

冒頭でも述べたがCDNサービスのこと。

無料プランでも月25クレジット(1クレジット=1,000変換または1GBストレージまたは1GB帯域幅)となっており、ピンとこないが後で戻す方法があるのでとりあえず使ってみよう。

\後で紹介するけど/

公式サイトをチラ見

料金プラン
WordPressの画像はメイン以外に別サイズがたくさん生まれる仕様となっており、Cloudinaryにアップするのはメイン画像のみなので容量はそういった計算になるかも?

メディア → ライブラリで項目数が確認でき(画像のみと絞り込みも可能)、メディア数を数えるといいはず。

メディア数
上記画像の時点で投稿記事数は85件、当サイトは設定手順紹介で画像を多様しているが、1,436画像となっている。ちなみに、この記事だけで47画像。

月25クレジット=25,000変換を気にするべきで、1度変換したものはCloudinaryのキャッシュが消えないかぎりカウントには入らず、キャッシュ期間はいつまでなのか不明(おそらく30日:期間の変更は有料)。

公式のヘルプには何やら書いてあるが(公式ブログだと永久的とか言ってたような……)、よくわからないのでリンクだけ置いておく。

公式Cloudinaryは配信されたコンテンツをCDNにどのくらいの期間キャッシュしますか?(英語)

ぷっぷ
ぷっぷ

多い気がするけど、やっぱり使わないとわからないよー

なお、容量オーバーはどうなるか知らない。

Cloudinary導入後のPageSpeed Insights点数

PageSpeed Insightsで推奨されている次世代フォーマットに変換し、点数を上げていく。

当サイトは諸事情でCloudflare(クラウドフレア)も併用している。今のところ何の問題もなく、テスト環境はCloudflareなしで使用しているため同じように使えるはずだ。
ぷっぷ
ぷっぷ

MixhostなのにCloudflareのせいでQUICプロトコルではなくなるけど、点数自体は変わらずだったよ!

Cloudinary導入後の「この記事」は以下のような感じ(パソコンは好成績なので割愛)。

まさかの41点
この記事1ヶ月かかったのに……

まったく向上しなかった。

この記事を作成したことで気づいたのだが、点数はスピードとほとんど関係がない。当サイトと同じ間違いを繰り返さないためにも、スピードを追求するなら体感速度重視KUSANAGI環境を調べるといい。

ぷっぷ
ぷっぷ

KUSANAGI導入ブログとか参考にすると、ほぼすべてが速い。レンタルサーバーより安いかちょい高いくらいだし、将来は乗り換えだね……

アイキャッチだけ次世代フォーマットにできず(できはするが他の画像を巻き込む)、別記事の画像は現在Cloudinaryにアップしていないのでサムネイルで注意される。

メディア以外の改善要求が多い

さらに一時的に表示される広告?やサーバーの調子、私の技術では意味不明なCSSの遅延読み込みが合わさって、この記事より画像・動画(GIF)が少ないCloudinary未使用投稿記事と同じ点数になった(ばらつきはある)。

該当投稿記事【SSS】将来を考えたパスワード管理ソフト・アプリの選択

41点

なお、当サイトは無料WordPressテーマCocoonを使用しているため元々の点数は高い。

スポンサーリンク

使用するユーザーの試練

  • WordPressを使用
  • WordPressに画像をアップロードして今まで使用していた
  • これからもWordPressに画像をアップロードして使用するWordPressに画像を挿入する際、自動付与されるsrcsetとsizes属性がアップ時に消されても許せる
  • AMPでの画像は横が縮んで悲惨になるのは許さない
    • この現象はAMPでサイズが指定されていないときの挙動と似ている?(後述)
    • テーマ独自ではなく、とあるAMPプラグインにしたら正常
  • アイキャッチだけアップするとなぜか非表示になる(大迷惑)
  • 画像をCloudinaryにアップした際、ほとんどの管理画面内のアイキャッチ・メディアライブラリ画像がなぜか見えなくなるのを我慢できる
    • ビジュアル・テキストエディタはメディアライブラリを画像挿入で開くのでキツイ(Gutenbergは気にならない)
    • アップした後同じ画像を使う場合は、ファイル名で検索必須ということ
  • 作業が増えても我慢できる(記事公開時毎回一括アップ&置換プラグイン:手動も可)
  • Cloudinaryをやめて画像を戻す際にファイル名が変わるのを許せるか(最低でも-1と付く)
  • Cloudinaryをやめて動画を戻すのが1つずつなのを許せるか
srcsetとsizes属性が何なのかよくわからないが、「スマホで表示する際に大きい画像はいらないので小さい画像だけ読み込むよ!」というようなHTMLらしく、戻せば戻るがCloudinaryにアップした際に消える。
ぷっぷ
ぷっぷ

CDNだから関係ないのかな?(゚~゚o)ウゥーン でもレビューの苦情が痛烈ー

srcsetの件は8ヶ月前のレビューや2年3ヶ月前から言われていることなので、仕様変更は期待できなさそうだ。

AMPの縮まる現象は、当サイトが使用している「Cocoon」のAMP設定と相性が悪いらしく、無理やり300pxの正方形にされる。

この現象はAMP化される際にサイズが消されている?ためにおこるようで、CloudinaryのURL置換が何かしら相性の悪い事象を発生させている模様。

改善できる技術力のある方は、上記のヒントを参考にして挑戦するといい。

ぷっぷ
ぷっぷ

運がよければ他テーマ独自のAMP設定で正常に使えるかも?

当サイト独自ルールまとめ

当サイトはCloudinaryの専門的な使い方の回避と謎仕様を円滑にするため、以下のルールと流れで進んでいく。

何を言っているのかわからないだろうが、先に流れを見ておいた方がわかりやすいと判断したので説明。
  • アカウント作成
  • アップ時被り防止文字列がファイル名後半に付くのを消すか消さないか設定
  • Web版Cloudinaryから直接アップした場合強制WebM変換設定の作成
  • プラグイン新規追加
  • WordPressアップ済み画像をCloudinaryにアップし、置換プラグインでf_auto追加 →自動WebP
    • GIFを動画化しないならGIFも同じ方法でアップして自動アニメーションWebP(推奨)
    • GIFを動画化せず、動画も使用しないなら動画行程丸ごとスキップ
  • WordPressアップ済み動画は完全放置し、Web版Cloudinaryに直接アップ
    • 保管している動画か使用している動画をダウンロードし、それを直接アップする必要がある
    • GIFを動画化するなら動画と同じようにアップ
  • すべての動画をWebMにしたいなら、過去記事含めて1つずつ手動で入れ直す
    • 非現実的なので、過去記事の動画は無視して新しい動画のみを1つずつWebM推奨
  • URL改変による容量消費を抑えるため、決められた改変以外禁止にする
  • プラグインはWordPressに挿入した画像をCloudinaryにアップする目的のみ使用
  • Cloudinaryをやめた際の逃げ道を覚えておく
  • 他の機能はややこしく難しいのでガン無視

このルールを守らないとさらに複雑になり、私も答えられる範囲が減ってくるので注意。

公開するたびに置換プラグインで画像すべてに自動変換コマンド「f_auto」を追加し(手動なら画像毎)、動画はWeb版CloudinaryにアップしてそのURLを挿入する作業が付属。
ぷっぷ
ぷっぷ

せっかく覇権が取れそうなサービスだけど、WordPressはやる気がないのかも?

以下、「なぜこの方法なのか」など仕様は長いが理由を述べているので、よく読んでいこう。

ミスすると面倒が加速するので、繰り返し同じことを章ごとに述べる。

動画と次世代フォーマットをガン無視して、Jetpackの「Photon」のように使うことは可能だが効果は不明。ちゃんと画像は消せるぞ!
「テストしたほうが早い!」・「導入する気まんまん」ならアカウント作成まで読み飛ばそう。
スポンサーリンク

仕様

WebP対応ブラウザならWebP変換、非対応なら元の拡張子配信にしてくれ、動画はWordPressからアップできずいちいちCloudinaryにアップしてURLを挿入する必要があり、ここまでして初めてWebPとWebMの両立が可能。

面倒だができないわけではないため、PHPなどをイジらず専門知識無用で可能なのが最大のメリットだ。

しかも画像圧縮プラグインのように、レンタルサーバーにWebPを別途作成するといったこともない。

ぷっぷ
ぷっぷ

なのに日本で流行ってないのは面倒だからかなー?この記事の使い方は邪道だと思うけどね!

とりあえずまとめると、以下のような挙動をする。

  • GIFは画像扱いになり、変換するとアニメーションWebPにされる(動画化は別の方法)
  • 動画をWordPressからアップできない(Web上から可能)
  • MP4やWebMを自動変換(f_auto)にするとなぜかChromeでWebPの静止画にされる(バグ?:回避可能)
    • Chrome系のBraveでも確認したが同じ症状
    • FirefoxはWebM対応なのにMP4のまま
  • 結果的に元データの方が軽くてもWebP・WebM変換が優先(多少なので我慢)
  • アップロード時に自動変換設定にできないので置換プラグイン必須
公式ブログでも置換ソフトを推奨され、その下の方のコメントにも「そんな機能は求めてないよ、私達が必要なのは簡単自動変換だよ」的なツッコミをされているが、1年7ヶ月前の時点で努力するとは述べている。
ぷっぷ
ぷっぷ

サイズ・効果・画質自動変換はできるんだけど、一番重要なのが未実装。

GIFはアニメーションWebP(動くWebPということ)で良いなら簡単だが、今後を考えてWebMにしたいならこれからのGIFだけ動画にしよう(後ほど分岐点がある)。

実際、PageSpeed Insightsでも「GIFはMP4(MPEG4)かWebMにしてね」と推奨される。

GIFの代わりにMP4かWebMを推奨

画像の場合はJPEG2000・JPEGXR・WebPを推奨されるが、当サイトはWebPにしか興味がない。

PNGやJPEGの代わりにWebPを推奨

GIFと動画フォーマットの圧縮率比較

過去記事のGIF動画変換が面倒なので、アニメーションWebPと比較をした。

次のぴよたそさんのGIF素材(491KB)をアップロード → 変換した際の圧縮率と挙動は以下のとおり。

実際の拡張子確認はメディアにカーソルを合わせて右クリック → 名前を付けて画像(動画)を保存(保存はしなくて良い)。「f_auto」や「f_mp4」の場合はURLが元の拡張子のままなので、確認するまで変換後の拡張子はわからない。
f_autoでWebP(83.7KB)かGIF
f_mp4でWebM(40.5KB)かMP4 高速ナデナデ
悲報:長いなら気にならないが、短かすぎる動画(上記は1秒もない)だと高速ループになり、健康的な色化・AMPだとサイズが変わる模様。AMPのサイズは並べるから変であっておそらく気にならない。
  • GIF(491KB)からf_autoによるアニメーションWebP=83.7KB
    • URL改変で無理やりMP4=68.5KB(透過消滅:他と比べると容量多め)
    • URL改変で無理やりWebM=59.3KB(他と比べると容量多め)
  • アップ時強制MP4(49.1KB)変換からf_autoによるWebP=例の仕様で静止画
    • GIF=337KB(ループされない)
    • WebM=45.8KB
  • アップ時強制WebM(67.2KB)変換からf_autoによるWebP=例の仕様でダメ
    • GIF=428KB(ループされない)
    • MP4=40.5KB
    • f_mp4によるWebM=40.5KB(なぜか圧縮ラッキー)
    • f_mp4によるMP4=40.5KB
URL改変で無理やり拡張子変換は他と比べると容量が増えるので、GIFからWebMは遠回りすることになる。
ぷっぷ
ぷっぷ

動画化しても、Gutenberg(グーテンベルク)以外は自動再生・ループのHTMLタグを駆使しないと再生時クリック必須だよー

ご覧のとおり最初からMP4だと強いし、GIFは調べる必要もなく激烈に重い。

そして、動画はプラグインでアップできないため、1つずつ手作業で変換・挿入させる必要があり苦行。

しかも、GIFをWebMにしたくてもWordPressからアップすると画像扱いにされる。

当サイトとしては過去のGIF・動画のアップは諦めておき、GIFは上記のようにWebMよりは多少容量はかさむWebPにしてしまうのをオススメする。

「過去のGIFを動画化させてHTMLでループさせる」といったこともしなくて良く、効率的。

WebMは今後の記事で挿入するGIFや動画にしか適用させないということ。過去の動画はほぼ間違いなくMP4だと思うので、それほど困らないはず。

さらに、仕様でも述べたが「MP4・WebMを自動変換(f_auto)にするとなぜかChromeでWebPの静止画にされる(バグ?)」ため、動画拡張子に自動変換「f_auto」が使用できない。

さらにさらに、MP4だとWebM変換はガン無視され、全ブラウザMP4にされる。

ぷっぷ
ぷっぷ

どうせなら次世代のWebMを使いたいよね!

仕方がないのでWebMではない動画を「アップ時強制WebM変換」し、非対応ブラウザにはf_mp4でMP4配信という手段をおこなっていく。

読み進めるたび面倒さが際立ってくるので必ず確認しよう。一応GIF脱却をしているので、PageSpeed Insightsからは何も言われない。

URLの意味

この記事の設定どおりに進めると以下のようなURLになる(この記事がまさにこの形式)。

画像https://res.cloudinary.com/自分のクラウド名/image/upload/f_auto/vから始まるバージョン/ファイル名.png
動画https://res.cloudinary.com/自分のクラウド名/video/upload/f_mp4/vから始まるバージョン/ファイル名.webm
ようするに、「Cloudinaryから動画か画像形式ファイルを配信する際にf_系で自動変換させる」といったことをしている。

そして、Uploadとバージョンの間に「s–○○–」というようなセキュリティ文字列も入るが、消しても問題ないようなのでその方向で進めていく。

自分のドメインにしたい場合は、有料プランから可能なようだが割愛。

対応ブラウザ

Safariは足並みを揃える気がなく、Edge(18~)・Firefox(65~)はようやく対応する(記事作成時は未対応)。

【朗報】MicrosoftEdgeがChrome系に仲間入りする模様!

参照よりオープンなソースコラボレーションによりウェブをより良くする(英語)

緑が対応で数字がバージョン

参考WebP対応状況

Appleは独自規格大好き企業のため、Lightningケーブルのような状況になってもそのままになると思われるが、今後SafariだけWebPに対応しない状況になっていくと、

  • Safariの画像読み込みが遅い
  • WebP画像が表示されない

というようなストレスが増えていき、WebPを導入すればするほどSafariの首を絞めることができるはずなので、Safariだけ次世代拡張子をガン無視しよう。

WebMはこのような対応状況だ。

リンク先で緑なら、対応済みかこれから対応

参考WebM対応状況

こちらは結構前からFirefoxも対応している。

ちなみに、MP4は対応されまくっているので確認する必要はない。

スポンサーリンク

アカウント作成

無料プランが足りないのかもよくわからないので、貴重な容量が増えるらしい当サイトからの紹介からアカウントを作成しよう。

もらえたとしても、何クレジット増えるのかは知らない(1クレジット=1,000変換または1GBストレージまたは1GB帯域幅:こちらは3クレジット増えた)。

\しょうがないなぁ/

公式サイト

アクセスしたらトップページのSIGN UP FOR FREE(無料でお申し込み)をクリック。

SIGN UP FOR FREEへ進む

そうするとアカウント情報入力画面が出現するので入力しよう。

下にある「Assigned cloud name(クラウド名)」は後で変更できるが、面倒なのでこのタイミングで設定だ。

CDN配信にした際にこの名前がURLに組み込まれるので、短いかつ自分のサイトだとわかるような名前にしよう(当サイトならyarisugi)。パーマリンクと同じく日本語だと「%57%57%」のようになるので、小文字の半角英数字推奨。
アカウント情報を入力する

作成されるとダッシュボードにたどり着き、Chrome日本語翻訳が反応しないチュートリアルが始まるが、必要ないのでそのまま閉じよう。

チュートリアルは右上で閉じる

あとは、アカウント作成時に記入したメールアドレス宛のメールを確認しよう。

そうすると同じくダッシュボードが開かれ、届いていなければ迷惑メールフォルダを確認。

これでアカウントは有効化され、次にいろいろ仕込む。

スポンサーリンク

Transformation(f_autoなどの変換)許可

先に許可しておかないと後のセキュリティ設定で「想定していない変換」となり、いたずらに容量は減らなくなるが、肝心のf_autoとf_mp4に変換してくれなくなるのでやろう。

Transformations(変換)→ Create a new transformation…(新しい変換を作成)をクリック。

Create a new transformationへ進む

次にFormat(フォーマット)のプルダウンをKeep formatからAutoに変更してSave(セーブ)、もう一度右上のCreate a new transformation…を選択。

f_autoの変換設定を作成する
すでにf_autoなどの変換を味わった方は作成できない。その場合は作成する必要がないのでとりあえず読み進めよう。

また同じような表示が出現するので番号通りに進める。

今度はFormatではなくMore options(より多くのオプション)の「Fetch Format」をMP4 Videoにしよう!

f_mp4の変換設定を作成する
必ずFetch Formatをmp4にする

そうすると作成したf_autoとf_mp4の変換設定が生まれているので、クリックして有効化。

作成した変換設定をクリック

昔からCloudinaryを使用していたり、メディアの方から変換をガチャガチャやってしまうと(サイズ変更・効果など)、とてつもない量の変換が作成されて埋もれている。

そんな場合は上記画像のように検索をかけて探し出し、有効化させよう。

このチェックは後で説明するStrict transformations(厳密な変換)を有効化させると同時に有効になり、チェックされた変換しか表示されないのでURL改変による容量消費を抑えられる

今後、新しく生まれた変換が増えてはチェックが入っていたり入っていなかったりするが無視。
スポンサーリンク

Settings(設定)

すべての機能を網羅しているわけではないが、当サイトのルールを適用させるために順番通りに設定していく。

右上にある歯車マークがSettingsエリアだ。

設定をしていく

Account(アカウント)

現在のプラン確認・プラン変更・アカウントをキャンセル・アカウント作成時に決めた「国」・「会社名orサイト名」・「クラウド名」のアカウント関連設定が可能。

アカウント設定

最後のCloudinary cloud name(クラウド名)は、アカウント作成時で述べたとおりURLに組み込まれるため、短いかつ自分のサイトだとわかりやすいブランド名を小文字の半角英数字で入れよう。

上記画像などのURL「yarisugi」部分がクラウド名だ。

ちょっとCloudinaryの容量を消費すると、この名前は固定され今後変更するチャンスは訪れない。ちゃんとしたものを考えよう!

Upload(アップロード)

かなり調べた結果わからなかった機能は多数あるが、画像のように設定していこう。

Auto-create foldersをDisabled、Invalidate versioned URLsをEnabled

上記画像の補足。

自動バックアップはWordPressもといレンタルサーバー、バックアッププラグインを使用していれば一緒に画像もバックアップされ(設定次第)、用意周到な方はクラウドや自分のパソコンに保存しているので不要のはず。

Dropboxに本名を入れないセキュリティを意識したアカウント作成
ファイル移動、同期の基本的なことと、2段階認証・緊急時のための連携解除方法を紹介する。
GoogleDriveのバックアップと同期をダウンロードして使う
アプリ名が「バックアップと同期」になったGoogle Driveの復元・完全な削除などの使い方を、画像を使って紹介する。

フォルダ自動生成は、プラグイン及びWeb版Cloudinaryに直接アップすると、フォルダ名がURLに入ってしまう。

なぜかWordPressからアップする方法だと混入しないが、この記事ではわける必要がないので無効化しておこう。

ぷっぷ
ぷっぷ

画像・動画で表示切り替えできるし、問題ないと思うー

中間ほどに「Auto upload mapping(自動アップロードマッピング)」という何やら魅力的なものはあるが、WordPressから自動アップロードをしてくれる機能ではないようで無視。

Upload presets(アップロードプリセット)

アップロード設定下の方にあるアップロードプリセットは、アップした際にあらかじめ作成した設定を適用させることができ、ファイル名に付く被り防止文字列や画像効果・サイズ・画質を調整可能だ。

自動変換「f_auto」と「f_mp4」を選択できないのは本当に残念。ちなみに、被り防止文字列とは5文字ほどの英数字のこと。

とりあえず2つプリセットを作るのだが、使い方次第で不要となるため以下のルールで選別しよう。

  • ファイル名に付く被り防止文字列を消し、動画をWebM変換にしたい→ 2つとも作成(推奨:読み進めるだけ)
  • ファイル名に付く被り防止文字列を消さず、動画をWebM変換にしたい → 1つだけ作成
  • ファイル名に付く被り防止文字列を消し、動画のWebM変換をしない → 1つだけ作成
    • GIFをWebMにせず動画作成時にWebM保存できるのならこのケース
  • ファイル名に付く被り防止文字列を消さず、動画のWebM変換もしない → 不要

作成する方はAdd upload presetをクリックし、不要の方は次のSecurityのStrict transformations(厳密な変換)まで読み飛ばそう。

アップロードプリセットを追加する
WordPressからアップした際の画像設定を作成
「ファイル名の最後に付く被り防止文字列が付いても良い」と思う方は作成する必要がないので、次の動画設定まで読み飛ばそう。

Storage and Access(ストレージとアクセス)のプリセット名を決め、番号どおりに進める。

Use filenameをon、Unique filenameをoff

これで「WordPressから画像をアップした際、ファイル名にランダムな文字列を付けない設定」ができた(まだ適用していない)。

Web版Cloudinaryからアップした際の動画設定を作成
WebM・MP4、もしくは動画そのものをCloudinaryにアップしない方は、作成したプリセットを適用まで読み飛ばそう。
警告:動画はWordPressから挿入しないため引き戻しができず、過去動画も1つずつ変換しなければならない。結局のところ、これから先の記事でGIFを動画化や動画をCDN配信したい人以外にはこのプリセットをオススメできない

今からWeb版Cloudinary及び、まったく使わないCloudinaryのプラグインからアップした際の設定を作成する。

例のごとく、WebMを使うには元々のファイルをWebMにする必要があるので、このような設定方法だ。

Use filenameをon、Unique filenameをoff
Formatをwebmかmp4にしてSave

これで「Webからすべてのファイルをアップした際、ファイル名にランダムな文字列を付けず、なおかつアップ時強制WebM変換設定」ができた(まだ適用していない)。

次世代フォーマットを使いたいからWebMにするが、別にMP4でも圧縮率は優秀なのでそのままでも良かったりする。

だが、Cloudinaryをやめた際に結局WebM・MP4どちらも1つずつ自サイトURLに戻さなければならない。

やめなければ最強。

作成したプリセットを適用

Upload presets(アップロードプリセット)下にあるDefault upload preset(デフォルトアップロードプリセット)と、Media library’s upload preset(メディアライブラリアップロードプリセット)に作成したプリセットを適用させる。

デフォルトにはWordPressからアップする際のプリセットを、メディアライブラリにはWebMに変換する動画用プリセットを選択しよう。

どちらかのプリセットを作成していないのなら、そっちはNone(なし)のままでOK。
作成したアップロードプリセットを適用
Webからアップした場合は「画像でもWebMにされる」点に注意。この記事の進め方だとWebからアップは動画系にしか使わないため、問題ないはずだ。

GIFをCloudinaryでWebM変換させず、動画を保存した段階でWebMにしていたのなら、両方共WordPressからアップのプリセット(この画像ならworpe_up21)を選択するといい。

SecurityのStrict transformations(厳密な変換)

これをしないと邪悪な誰かがURLを他のサイズや拡張子などに改変し、貴重な変換回数を消費させにくるかもしれないので、Enabled(有効)にしておこう。

似たような設定でStrict video transformations(厳密なビデオ変換)もあるが、ビデオ変換のことかもしれないのでついでに有効化させよう。

Strict transformationsをEnabledにする
何か画像が表示されなくなったらDisabled(無効)に戻すこと。とりあえずは戻るだろうが、原因はTransformation(f_autoなどの変換)許可で述べた変換方法未作成だと思われる。

PNGなどからf_autoで表示されない場合は、この記事に書いてある方法が間違っている可能性が高い(キャッシュが削除できず、どうしても調べられなかった)。

その場合は「この記事は調査不足であり、見るに堪えない目の無駄」などとコメント欄に報告していただければ、別のやり方にガラリと変えさせていただく。

ぷっぷ
ぷっぷ

現在はわかりやすく、最短を追求した手順を記載しているよ!

Users(ユーザー)

2段階認証設定をするが、テスト段階では鬱陶しいため今はプラグイン新規追加まで読み飛ばしても良い。

アカウント情報を変更したり、ログイン時に2段階認証をつけることができる。

Setup Authentication(セットアップ認証)へ進んで2段階認証を設定しよう。

Googleの2段階認証アプリは非常に使いづらいので、インストールしていなければ【S】将来を考えたおすすめ2段階認証アプリ2選の記事を参照。
Setup Authenticationへ進む
QRを読み取り→6桁のコードを入力→パスワードを入力

APPLYを押すとすぐさま有効化され、これで「次回ログイン時からアカウント情報の他に、6桁のコードを入力する状態」になった。

「有効中」は以下の表示になり、認証の更新や無効化ができるようになる。

Updateで認証更新、Deactivateで無効化

ちなみに、WordPressプラグインで2段階認証を導入すれば同じアプリが使用できるので、時間があれば参考にされたし。

スポンサーリンク

プラグイン新規追加

このプラグインは「WordPressに挿入した画像をCloudinaryにアップロードし、CloudinaryのURLに置き換えてCDN配信」してくれる。

画像の引き戻しにも使えるが動画のみの利用方法だと不要なので、動画のアップロード方法まで読み飛ばそう。

一応、公式プラグイン説明に一言も動画(Video)と書かれておらず、動画アップロードは元々する気がないと思われる。

とりあえずプラグイン追加前にWeb版Cloudinaryのダッシュボードへ行き、プラグインと連携させるための「CLOUDINARY_URLから始まり@自分のクラウド名で終わるAPI文字列」をコピーしてこよう。

Environment variableの文字列をコピー
これがAPIなのかも私は知らない

次にWordPressから「Cloudinary」と検索して新規追加か、Cloudinaryプラグインページからダウンロード。

作成者がCloudinary Ltd.の方をインストール

「有効化」するとダッシュボード(管理画面)左側に「Cloudinary」が出現するのでクリックし、さきほどコピーしたものを貼り付けして「Update Settings」。

ダッシュボードのCloudinaryをクリック
CLOUDINARY_URLに貼り付けしてUpdate Settings

これで連携された。

ちなみに、CloudinaryのMedia library(メディアライブラリ)からアップした場合、Web版からの扱い=プリセットが適用されWebM変換になる。

さらに、「WebM非対応ブラウザでMP4表示設定」ができない謎仕様により、完全に使わないので封印しよう。

メディアライブラリ
例外あり:動画をMP4としか使わないのなら、Web版Cloudinaryにログインする必要がなくなり、プラグインから動画をアップする手段を使用可能。
スポンサーリンク

一括アップロード

必ずテストサイトか1つの投稿記事で実験しよう。現在テスト中のためこの記事の画像・動画しか適用させていない。

例のごとく自動アップロード機能がなく、動画はアップできない。

そのため、アップロードは記事公開前後、毎回手動でしなければならない現実を突きつけられる。

ただ、メディアの「表示オプション」で表示数を999にできるため、昔の画像はラクラクアップロード可能だぞ。

残念ながらこの記事を公開したときにアイキャッチが表示されていないことに気がついた。アイキャッチだけアップすると無かったことにされるので、アイキャッチは仕方なく避けよう。
分岐点:GIFをアニメーションWebP(画像)にするか、WebMやMP4の動画にするかを決めよう。過去記事のGIFは数が多いなら動画化を諦めるべきなので、表示数を999 → すべてのメディア → 画像 → 絞り込み検索が早い。

動画と画像両方を巻き込んでアップしても、動画だけ綺麗にエラーで弾かれるはずなので、GIFを含めた画像をアップするのは何も考える必要はないが、画像数次第で何分かかるか不明。

この記事の47画像同時アップは2分ほど待たされた。アップすると管理画面関係のアイキャッチ・メディアライブラリ画像のほとんどは表示されなくなるが、Gutenberg勢だと気にならないのでガン無視。
ぷっぷ
ぷっぷ

画像アップは記事完成間近だろうし、実際はあまり気にならないはず!

アップロード方法まとめ
表示オプションで項目数を999にする
アップ済み表示

基本は表示オプションで項目数を999 → すべてのメディアを画像 → Upload to Cloudinary → アップしたいものを選択&全選択 → 適用。

これでアップロード完了表示が出現し、単品アップロードをする際の表示もアップ済みに変わる。

既存の画像すべてをアップしたのなら、やりすぎな999を20に戻しておこう(今後は20で十分)。

完了と画像は表示され、動画は混ざっていても空のファイル扱いにされる

ちなみに、「WordPressに挿入した画像をアップするタイミング」は公開後や公開前どちらでもよく、公開前なら置換後の表示も事前に確認できてお得。

ただし、記事公開・更新時に画像を別タブでアップ元のタブで表示していた記事を下書き保存・プレビュー・更新・公開すると、CloudinaryURLから自分のサイトの画像URLに上書きしてしまっているので注意。 
ぷっぷ
ぷっぷ

間違えてもURLを変えればいいだけだから、恐れなくていいよ!

ブラウザ毎に自動拡張子変更(f_autoの追加)

しょっちゅう使うものではないミスによるリスクがあるのに、置換プラグインを毎回使うことになる(プラグインなしの手動でも可)。

まったく更新されていないが変換結果を確認できる、日本で有名なSearch Regex

更新されているけども変換結果はPro版のみで、公式で述べられているが日本では無名のBetter Search Replaceを使うかはおまかせ。

どちらも「f_auto」追加方法を述べているので参考にしよう。

「画像をクリックすると拡大」などの挙動をする「メディアファイル」にした際は、画像1つにつきURLが2つなので、どちらも追加必須。

片方だけだと拡大した画像、もしくはそのまま表示されている画像しかWebPにならない。

当サイトはあらゆる責任を取らない非常に都合の良い免責事項をたずさえているため、「ここに書いてある置換方法が間違っていた」などの場合は泣き寝入りしよう。

注意!してはいけない追加方法

URLは途中まで一緒だからと、以下のような置換方法をしてはいけない。

「https://res.cloudinary.com/自クラウド名/image/upload/」を「https://res.cloudinary.com/自クラウド名/image/upload/f_auto/」に置換。

置換プラグインは個別の投稿記事を選べないようで、どうしても全体になってしまう。

この場合はCloudinaryにアップしたすべてのURLにf_autoが追加され、「すでに追加したURLにもf_autoが追加されて、f_auto/f_autoになる」(表示はされる)。

正解は「e/upload/v」と検索 → 「e/upload/f_auto/v」と追加なので、必ずこの面倒な手段を守ろう。

ぷっぷ
ぷっぷ

置換プラグインを推奨しておいて、使用想定してないでしょ……

e/は「image」最後のeで、vはバージョン一番最初のv。動画はvideoなので動画に追加されないための処置だ。動画にf_autoは静止画にされるぞ!

Search Regexでf_autoを追加

手動でいいなら画像をCloudinaryから戻すまで、Search Regexを使わないならBetter Search Replaceまで読み飛ばそう。
データベースそのものを置換するので、よく確認するかバックアップ推奨。戻す方法はバックアップか同じように置換するしかない。

Search Regexをインストール → ツール → Search Regexへ進み、

  1. Source(置換対象)をPost Content(投稿内容:初期設定でなっている)
  2. Search pattern(検索したい文字列)に「e/upload/v」
  3. Replace pattern(置換したい文字列)に「e/upload/f_auto/v」
  4. Replaceで置換結果確認
  5. Replace & Saveで実行
Search Regexでの置換方法
Source(置換対象)の「Post meta value」の方はたくさん表示されるが、投稿記事ではなくメディア内URL置換のため、使わないと覚えておこう。
Search Regexで置換したのなら、画像をCloudinaryから戻すまで読み飛ばそう。
データベースそのものを置換するので、よく確認するかバックアップ推奨。戻す方法はバックアップか同じように置換するしかない。

Better Search Replaceをインストール → ツール → Better Search Replaceに進み、

  1. Search for(検索したい文字列)に「e/upload/v」
  2. Replace with(置換したい文字列)に「e/upload/f_auto/v」
  3. Select tables(テーブル選択)で○○○posts(投稿)を探して選択(○部分は無視)
  4. Run as dry run?(置換結果確認する?)のチェックを外す
  5. Run Search/Replaceで実行
Better Search Replaceでの置換方法
Select tables(テーブル選択)の「postmeta」の方はたくさん表示されるが、投稿記事ではなくメディア内URL置換のため、使わないと覚えておこう。
スポンサーリンク

画像をCloudinaryから戻す

戻す前に注意事項。

WordPressに記入したメタデータ(キャプション・alt属性:代替テキスト)は残るが、Cloudinaryに記入したメタデータは戻した際に消える仕様。

さらに、戻した際にWordPressに同名ファイルがあり?、ファイル名に「-1」が必ず付く。

元々ファイル名の後にランダムな文字列を付ける設定なら、このとき同名ファイルではないので-1は付かない。が、ランダムな文字列も消えない。

メタデータ(主にalt属性)は昔からWordPressに記入する癖が付いているかと思うので、引き続きその癖を信頼と愛着で守っていこう。

戻し方は簡単で、一括アップロードをするときと同じメディア → ライブラリ → 左上の「一括操作」プルダウンをMigrate away from Cloudinaryにする → 引き戻ししたいファイルを選ぶか全選択 → 適用でOK。

引き戻しのやり方

これで画像系はファイル名に「-1」と付くだけで、Cloudinary利用前に戻る。

良かろうポイント:f_autoのおかげで拡張子が元のままであり、「GIFがWebPで引き戻される」といったことがなく安心。

動画は置換プラグインを駆使しても、手動しか方法を思いつかなかったので知らない。

スポンサーリンク

動画のアップロード方法

例のごとく動画は引き戻せず、「CloudinaryのURLを元の自サイトURLに1つずつ戻す手間」があることを忘れてはならない。

Cloudinaryと共に生きるなら問題ないため、無料プランの容量を事前に調査するといい。

ぷっぷ
ぷっぷ

動画ファイルが50個くらいなら自力で戻せそうだし、自分と相談しよう!

流れはWeb版Cloudinaryへ動画にしたいファイル(主にGIF)・動画ファイルをそのままドラッグなどでアップロードするだけ。

Media Libraryにドラッグ&ドロップ

このとき、Web版Cloudinaryからアップした際の動画設定を作成のプリセットを適用させていれば、WebMに変換される。

次にURLがほしいので、アップした動画にカーソルを合わせる → クリップマークをクリックしてURLをコピー。

カーソルを合わせてURLをコピー
「https://res.cloudinary.com/yarisugi/video/upload/f_mp4/v1545357630/cloudinary-test-video.webm 」のように、Upload/v154……の間にf_mp4/を仕込む。

Upload/の後に、「f_mp4/」を追加したURLを投稿記事に挿入する(エディタごとに挙動が違うので後述)。

そうすることで非対応ブラウザではMP4、それ以外はWebM配信動画が作成でき、以下のようにHTMLタグを使えば自動再生・ループ・ミュート・再生ゲージ隠しでGIFごっこも可能(メディアファイルのような拡大は無理?)。

パーフェクトGIFごっこ
カーソルを合わせるとゲージ出現。ゲージ隠しをしなければ拡大できなくはない

これを1つの動画ごとに毎回しなければならないが、「一気にURLを入れてf_mp4を置換プラグインで追加する」という手段もあるので、参考にされたし。

その場合は「o/upload/f_mp4/v」という感じに置換しよう。最初の「o」はvideoのoであり、入れないと画像にf_mp4を追加して大惨事になるぞ! 追加方法はブラウザ毎に自動拡張子変更(f_autoの追加)を動画に置き換えよう。

このように過去動画も1つずつやらなければならないので、通常はこれからの動画だけ推奨。


さきほどの画像に「Edit(編集)からの方法はセキュリティ文字列が入って消すのが面倒」と書いてあるが、本当に面倒(入っていてもOKなはずだがリンク文字数が伸びる)。

Editの場所
セキュリティ文字列とは一言も書いてなかった

それでもいいならやり方だけ書いておく。

Edit(編集)→ 左下にあるMore options…(より多くのオプション:変換を作る際に進んだところ)→ Fetch FormatのNoneをMP4 Videoにする → f_mp4がURLに追加されたのでコピー → おこのみでs–○○–/の部分を削除。

セキュリティ文字列が入っている場合、f_mp4を入れるのはセキュリティ文字列の後なので間違えないように。

この文字列はどうセキュアなのかわからず、WordPressからアップするかぎり自動的になくなる。「画像に入っていないのに動画は入れる」のはよくわからないので、当サイトとしては削除推奨。

動画URLをWordPressに挿入

動画をアップロードして獲得したURLを、

  • Gutenberg(グーテンベルク):一般ブロック → 動画 → URLから挿入
  • ビジュアルエディタ:URLをそのまま貼り付け
  • テキストエディタ:HTMLタグで囲う

するだけ。

そして、Gutenbergだけ最先端技術を積極的に学んだボーナスとして「自動再生・ループ・ミュート・再生ゲージ隠し」を事前知識なしでGIFごっこ可能。

右側の動画設定
ポスター画像は再生前待機中の画像みたい

ということで、新たにVideoタグを学ぶか、Gutenbergを学ぶか選ぶといい。

なお、私はVideoタグがなんなのか知らない。

Gutenbergを導入していない方向けに、全記事ベルク化を終えた私からアドバイスすると、一日二日触っただけでわかるわけがない。また、現状使いこなしているため、1記事程度しか触っていない方の意見は無視推奨。
ぷっぷ
ぷっぷ

テーマやプラグイン相性問題は諦めだけど、使えるのに「使いにくい」と3時間程度で判断して即ヤメはダメダメのダメ!WordPressを初めた頃の挑戦する気持ちを思い出して!

Cloudinary側でループ・ミュートにする(非推奨)

どうしてもGutenbergを避けたい方のために追い打ちをかけておく。

Cloudinary側でループとミュートにすることはできるが非推奨(不思議な変換を許可したくないので動画例なし)。

f_mp4追加時、次のように入れる「https://res.cloudinary.com/クラウド名/video/upload/f_mp4,e_loop:3/e_volume:mute/バージョン/ファイル名.webm」
「e_loop:回数」で回数分のループ(上記だと3回)を、「e_volume:mute」が無音にしている(,はカンマ)。

残念ながら動画を無限ループさせることはできず、ループ回数を決めなければならない。

さらに残念なことに、ループ回数分動画時間が伸び、自動再生と再生ゲージ隠しがCloudinaryのみではできないため、完璧なGIFごっこをする場合は中途半端である。

ようするに、繰り返しというループではなく同じ映像を繋ぎ合わせて伸ばしているだけ。

プリセットでアップ時にループを適用させることは可能だが(ミュート不可)、そんなことをしてしまうと元動画がループ回数分容量を食い、元動画がCloudinaryにしかない場合にダウンロードすると長いループ動画をつかまされる(バックアップがあればOK)。

やはり、HTMLを学ぶかGutenbergを学ぶかという選択肢からは逃れられない。

f_autoとf_webmじゃダメ?

仕様で述べたとおり、動画にf_autoを使うとなぜかChromeでWebPの静止画にされてしまうため、WebMに変換してからf_mp4を使用している。

WebMにf_autoならWebM配信可能だが、非対応ブラウザでMP4化されないので却下(そもそもWebMに変換している時点でf_autoにこだわる意味が薄い)。

この章のURLをコピペして、様々なブラウザで動作確認をしてみよう!「https://excesssecurity.com/cloudinary/#toc28」
f_autoとf_webmじゃダメ?のQRコード
気が利くこの章のQRコード
元拡張子がMP4 → f_autoでChrome系静止画
元拡張子がWebM → f_autoでWebM非対応ブラウザ非表示
ぷっぷ
ぷっぷ

あれー?記事に挿入したら動いてるんですけど!

投稿記事に挿入すると再生されるらしく、キャッシュがない状態で動画URLを別タブで開く → 名前を付けて動画を保存をすると、やはりChrome系でWebPにされる。

動画が作動していようが肝心の「対応ブラウザWebM・非対応MP4」になっていないし、とりあえず無視。

次のように拡張子をMP4 → f_webmにしても、WebM変換しないのでダメ。

元拡張子がMP4 → f_webmなのに対応ブラウザでMP4のまま
元拡張子がWebM → f_mp4の当サイト推奨万能方法の自動再生などHTMLなし版

ようするに、WebM拡張子の動画をf_mp4変換しないと、WebMとMP4を同時に使用できない。

このバグ?が今後修正され、WebMに変換する必要がなくなった場合は、「WebM変換プリセット」を使用せずに、そのままf_autoを追加すれば良いだけになるかもしれない。

だが、結局1つずつ追加・戻す場合も1つずつと手間が減っていないので、修正されようがどうでもよかったりする。

主な調査ブラウザ:Chrome・Firefox・Edge
スポンサーリンク

画像・動画の差し替え

SettingsのUploadにある、Invalidate versioned URLsがEnabled(有効)になっていないと差し替え不可。この記事で設定していない方だけ有効にしてこよう。

JetpackプラグインのPhotonのように「削除できない」といったことはないが、差し替えても何分か待たされるので注意。

この記事で作成した「Webからアップした場合強制WebM変換のプリセット」は、画像もろともWebM化されてしまう。

仕方がないので一時的にWordPress用のプリセットに切り替えるか(推奨)、「None」に切り替えてから上書きしよう。

Noneだとファイル名に文字列が入るぞ。

Media library's upload presetをWordPressのものに切り替え
変換はあとで戻そう

あとは、Cloudinaryにそのまま同名ファイルでアップすると上書きするか聞かれ、「Replace(入れ替える)」を押すだけでいいが、反映されるまで2分ほどかかった

記事のキャッシュを消す必要があり、反映確認は定期的にキャッシュを消そう。
上書きするならReplaceする

Cloudinaryのキャッシュを一瞬で消す方法はわからないが、思いの外時間がかかる可能性(最大1時間らしい)も考えて差し替えよう。

公式キャッシュの仕様(英語)

そして、差し替えが終わり次第変更したプリセットを元に戻しておこう!

Enable Media Replaceプラグインを使い、Cloudinaryアップ済み画像にWordPressの画像を差し替えてしまうとおかしなことになるので、使うなら引き戻してから。

差し替えも関係あるかわからないが、削除したメディアは最大30日間キャッシュとして閲覧可能。

スポンサーリンク

特別な使い方の補足

冒頭で述べていた

  • 普通+超面倒:画像と動画を過去記事含めてWebP・WebM配信(非推奨)
  • 普通+面倒:画像は過去記事含めてWebP配信にするが、過去記事の動画は諦めGIFをWebMにせずWebPで妥協し、これからの動画とGIFはWebM配信(推奨)
  • 簡単+面倒:画像だけ配信(JetpackのPhotonのような使い方)
  • 簡単:動画だけ配信(しかもプラグインなし)

の補足を簡単にしていき、最初の2件は「この記事そのもの」なので下2つだけ説明する。

画像だけ配信の補足

  • プラグイン必須
  • 動画プリセット不要
  • GIF全部WebPで妥協

動画関係の面倒事とおさらばできるため、非常に選択肢として優秀な疑似Photon状態。

といっても、「f_autoの追加」という面倒事は回避できていない。

動画はCDN配信ではないが、MP4でPageSpeed Insightsに何も言われず、やはり都合が良い。

f_autoでWebPが使えるのも相当優秀だが、置換プラグインのリスクに大半を持っていかれ、むしろマイナスが大打撃。

おまけ・プラグインなしで画像配信

これは動画にも言えることだが、WordPressを介していないので引き戻しが使えず、致命的な使いにくさが邪魔をする(WordPressにアップした履歴がない)。

動画はホイホイ使うものではないので、最悪手動で戻せたり1つずつ挿入するが、画像だと非現実的な数になりまったくオススメできない。

ぷっぷ
ぷっぷ

いい置換方法があればいいけど、どうやって自分のサイトの画像URLにするのかわかんなーい (゚~゚o)

最低でもCloudinaryの有料版を使える強者のみが許される手法かと思うので、諦めよう。

動画だけ配信の補足

  • プラグイン不要
  • 画像プリセット不要

WordPressからアップできないのならプラグインを入れる必要がなく、すべてWeb版で完結できる。

そう、Webから動画URLを持ってきて、WordPressに挿入するだけなのだ。

長すぎる動画は容量を気にするべきだが、当サイトのように軽い手順説明程度なら「ずっと使えるんじゃないか」と思うほど動画を使わない。

動画を使うかぎり引き戻しは面倒だが、量が少ない人はCloudinary配信にしてしまうのはアリだ。

この記事をうまいこと参考にして、自分に合うなら試してみるといい。

スポンサーリンク

調査済みの現象

今後Cloudinaryが完全体になったり、実験して挫折しそうな人のために調査済みのものを残す。

ガチャガチャしなくても、ここを見ればだいたいの調べた現象かわかるだろう。相当数専門知識がいらない部分だけを調べたので、その辺は答えられる。
  • フォルダわけ → URLにフォルダ名が入るため中止(そもそも検索可能)
  • Transformations(変換)の裏ワザ → 作成したいFormat選択後Qualityプルダウンをイジると既存の変換を強制保存できる
  • プリセットのIncoming Transformation (着信変換)にあるBase transformation(ベース変換)にf_autoかf_mp4を選択しても意味なし
    • Eager Transformations(熱心な変換)も同じ
  • プリセットのInvalidateはキャッシュと関係ある的なヘルプを見たが、APIの話らしくON → 差し替えてもすぐにメディアが変わることはなかった
スポンサーリンク

このサービスに対する願望

  • srcsetとsizes属性をどうにかして消さないでほしい
  • WordPressに挿入したら、公開時でいいから自動でCloudinary配信にしてほしい
    • そのタイミングでf_autoを入れてほしい(置換プラグインは使いたくない)
  • GIFを動画判定にもできるようにしてほしい
  • 動画もアップできるようにしたい
  • MP4・WebMをf_autoにするとWebPになるバグ?をなんとかしてほしい

上記をまとめると、「WordPressに挿入したメディアは自動でCloudinaryに配信されURLも切り替わり、f_autoで動画もろとも自動変換配信」。

まとめ・samplesフォルダ削除

あまりにも高度・専門的なものは例のごとく省いているためまったくわからない。

それ以外の簡単だと思われるものはコメント欄でお気軽に質問していただき、わからなければ詰み、わかれば共有してCloudinaryをうまく使いこなしていこう。

完全に使用していないため、お答えできることは覚えている範囲でしか答えられなくなった。

これで最後だが、Cloudinaryに元々アップされているsamplesフォルダは削除可能であり(花は不可)、容量の多いサンプルメディアをガチャるとレポートでそのうち容量が多いと言われるので消去推奨。

Cloudinaryサンプル画像
この画像のみ不死身

Cloudinaryの2段階認証設定をスキップした方は今してこよう。

コメント

タイトルとURLをコピーしました