クレジットカード未登録で無料プランを使えるCloudinary（クラウディナリー）は、画像・動画を自分のサイトとは別の場所からCDN（コンテンツデリバリネットワーク）配信するサービスだ。
だが、このサービスのヘルプは「プレフィックス」・「オンザフライ」・「リモートがフェッチ」など翻訳されない専門用語が平然と図なし出現するため非常にわかりにくい。
さらに、よくわからない仕様が邪魔をして正常に使うにはある程度知る必要がある。
仕方がないので目的以外の機能をバッサリカットし、私が勝手に決めたルールのもとよくわからないまま専門用語・知識を省きまくり、目的のサービスだけを強奪していく。
使い方はややこしいが様々な方法があり、そのリストが以下。
- 普通＋超面倒：画像と動画を過去記事含めてWebP・WebM配信（非推奨）
- 普通＋面倒：画像は過去記事含めてWebP配信にするが、過去記事の動画は諦めGIFをWebMにせずWebPで妥協し、これからの動画とGIFはWebM配信（推奨：当サイトは後述する不都合により断念）
- 簡単＋面倒：画像だけ配信（JetpackのPhotonのような使い方）
- 簡単：動画だけ配信（しかもプラグインなし）
途中諦めたら、本来予定していなかった上記の使い方を考えてみるといい（後半に再度触れる）。
AMPの縮む現象は限定的な環境だけの可能性が高く、直せる・人によっては問題ないかもしれないので、ヒントを追加しておいた。
Cloudinaryとは
冒頭でも述べたがCDNサービスのこと。
無料プランでも月25クレジット（1クレジット＝1,000変換または1GBストレージまたは1GB帯域幅）となっており、ピンとこないが後で戻す方法があるのでとりあえず使ってみよう。
メディア → ライブラリで項目数が確認でき（画像のみと絞り込みも可能）、メディア数を数えるといいはず。
月25クレジット＝25,000変換を気にするべきで、1度変換したものはCloudinaryのキャッシュが消えないかぎりカウントには入らず、キャッシュ期間はいつまでなのか不明（おそらく30日：期間の変更は有料）。
公式のヘルプには何やら書いてあるが（公式ブログだと永久的とか言ってたような……）、よくわからないのでリンクだけ置いておく。
公式Cloudinaryは配信されたコンテンツをCDNにどのくらいの期間キャッシュしますか？（英語）
多い気がするけど、やっぱり使わないとわからないよー
なお、容量オーバーはどうなるか知らない。
Cloudinary導入後のPageSpeed Insights点数
PageSpeed Insightsで推奨されている次世代フォーマットに変換し、点数を上げていく。
MixhostなのにCloudflareのせいでQUICプロトコルではなくなるけど、点数自体は変わらずだったよ！
Cloudinary導入後の「この記事」は以下のような感じ（パソコンは好成績なので割愛）。
まったく向上しなかった。
KUSANAGI導入ブログとか参考にすると、ほぼすべてが速い。レンタルサーバーより安いかちょい高いくらいだし、将来は乗り換えだね……
アイキャッチだけ次世代フォーマットにできず（できはするが他の画像を巻き込む）、別記事の画像は現在Cloudinaryにアップしていないのでサムネイルで注意される。
さらに一時的に表示される広告？やサーバーの調子、私の技術では意味不明なCSSの遅延読み込みが合わさって、この記事より画像・動画（GIF）が少ないCloudinary未使用投稿記事と同じ点数になった（ばらつきはある）。
該当投稿記事【SSS】将来を考えたパスワード管理ソフト・アプリの選択
なお、当サイトは無料WordPressテーマCocoonを使用しているため元々の点数は高い。
使用するユーザーの試練
- WordPressを使用
- WordPressに画像をアップロードして今まで使用していた
- これからもWordPressに画像をアップロードして使用するWordPressに画像を挿入する際、自動付与されるsrcsetとsizes属性がアップ時に消されても許せる
- AMPでの画像は横が縮んで悲惨になるのは許さない
- この現象はAMPでサイズが指定されていないときの挙動と似ている？（後述）
- テーマ独自ではなく、とあるAMPプラグインにしたら正常
- アイキャッチだけアップするとなぜか非表示になる（大迷惑）
- 画像をCloudinaryにアップした際、ほとんどの管理画面内のアイキャッチ・メディアライブラリ画像がなぜか見えなくなるのを我慢できる
- ビジュアル・テキストエディタはメディアライブラリを画像挿入で開くのでキツイ（Gutenbergは気にならない）
- アップした後同じ画像を使う場合は、ファイル名で検索必須ということ
- 作業が増えても我慢できる（記事公開時毎回一括アップ＆置換プラグイン：手動も可）
- Cloudinaryをやめて画像を戻す際にファイル名が変わるのを許せるか（最低でも-1と付く）
- Cloudinaryをやめて動画を戻すのが1つずつなのを許せるか
CDNだから関係ないのかな？(ﾟ～ﾟo)ｳｩｰﾝ でもレビューの苦情が痛烈ー
srcsetの件は4ヶ月前のレビューや1年11ヶ月前から言われていることなので、仕様変更は期待できなさそうだ。
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をやめた際の逃げ道を覚えておく
- 他の機能はややこしく難しいのでガン無視
このルールを守らないとさらに複雑になり、私も答えられる範囲が減ってくるので注意。
せっかく覇権が取れそうなサービスだけど、WordPressはやる気がないのかも？
以下、「なぜこの方法なのか」など仕様は長いが理由を述べているので、よく読んでいこう。
ミスすると面倒が加速するので、繰り返し同じことを章ごとに述べる。
仕様
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変換が優先（多少なので我慢）
- アップロード時に自動変換設定にできないので置換プラグイン必須
サイズ・効果・画質自動変換はできるんだけど、一番重要なのが未実装。
GIFはアニメーションWebP（動くWebPということ）で良いなら簡単だが、今後を考えてWebMにしたいならこれからのGIFだけ動画にしよう（後ほど分岐点がある）。
実際、PageSpeed Insightsでも「GIFはMP4（MPEG4）かWebMにしてね」と推奨される。
画像の場合はJPEG2000・JPEGXR・WebPを推奨されるが、当サイトはWebPにしか興味がない。
GIFと動画フォーマットの圧縮率比較
過去記事のGIF動画変換が面倒なので、アニメーションWebPと比較をした。
次のぴよたそさんのGIF素材（491KB）をアップロード → 変換した際の圧縮率と挙動は以下のとおり。
- 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
動画化しても、Gutenberg（グーテンベルク）以外は自動再生・ループのHTMLタグを駆使しないと再生時クリック必須だよー
ご覧のとおり最初からMP4だと強いし、GIFは調べる必要もなく激烈に重い。
そして、動画はプラグインでアップできないため、1つずつ手作業で変換・挿入させる必要があり苦行。
しかも、GIFをWebMにしたくてもWordPressからアップすると画像扱いにされる。
当サイトとしては過去のGIF・動画のアップは諦めておき、GIFは上記のようにWebMよりは多少容量はかさむWebPにしてしまうのをオススメする。
「過去のGIFを動画化させてHTMLでループさせる」といったこともしなくて良く、効率的。
さらに、仕様でも述べたが「MP4・WebMを自動変換（f_auto）にするとなぜかChromeでWebPの静止画にされる（バグ？）」ため、動画拡張子に自動変換「f_auto」が使用できない。
さらにさらに、MP4だとWebM変換はガン無視され、全ブラウザMP4にされる。
どうせなら次世代のWebMを使いたいよね！
仕方がないのでWebMではない動画を「アップ時強制WebM変換」し、非対応ブラウザにはf_mp4でMP4配信という手段をおこなっていく。
URLの意味
この記事の設定どおりに進めると以下のようなURLになる（この記事がまさにこの形式）。
そして、Uploadとバージョンの間に「s–○○–」というようなセキュリティ文字列も入るが、消しても問題ないようなのでその方向で進めていく。
自分のドメインにしたい場合は、有料プランから可能なようだが割愛。
対応ブラウザ
Safariは足並みを揃える気がなく、Edge（18～）・Firefox（65～）はようやく対応する（記事作成時は未対応）。
参照よりオープンなソースコラボレーションによりウェブをより良くする（英語）
参考WebP対応状況
Appleは独自規格大好き企業のため、Lightningケーブルのような状況になってもそのままになると思われるが、今後SafariだけWebPに対応しない状況になっていくと、
- Safariの画像読み込みが遅い
- WebP画像が表示されない
というようなストレスが増えていき、WebPを導入すればするほどSafariの首を絞めることができるはずなので、Safariだけ次世代拡張子をガン無視しよう。
WebMはこのような対応状況だ。
参考WebM対応状況
こちらは結構前からFirefoxも対応している。
ちなみに、MP4は対応されまくっているので確認する必要はない。
アカウント作成
無料プランが足りないのかもよくわからないので、貴重な容量が増えるらしい当サイトからの紹介からアカウントを作成しよう。
もらえたとしても、何クレジット増えるのかは知らない（1クレジット＝1,000変換または1GBストレージまたは1GB帯域幅：こちらは3クレジット増えた）。
アクセスしたらトップページのSIGN UP FOR FREE（無料でお申し込み）をクリック。
そうするとアカウント情報入力画面が出現するので入力しよう。
下にある「Assigned cloud name（クラウド名）」は後で変更できるが、面倒なのでこのタイミングで設定だ。
作成されるとダッシュボードにたどり着き、Chrome日本語翻訳が反応しないチュートリアルが始まるが、必要ないのでそのまま閉じよう。
あとは、アカウント作成時に記入したメールアドレス宛のメールを確認しよう。
そうすると同じくダッシュボードが開かれ、届いていなければ迷惑メールフォルダを確認。
これでアカウントは有効化され、次にいろいろ仕込む。
Transformation（f_autoなどの変換）許可
Transformations（変換）→ Create a new transformation…（新しい変換を作成）をクリック。
次にFormat（フォーマット）のプルダウンをKeep formatからAutoに変更してSave（セーブ）、もう一度右上のCreate a new transformation…を選択。
また同じような表示が出現するので番号通りに進める。
今度はFormatではなくMore options（より多くのオプション）の「Fetch Format」をMP4 Videoにしよう！
そうすると作成したf_autoとf_mp4の変換設定が生まれているので、クリックして有効化。
昔からCloudinaryを使用していたり、メディアの方から変換をガチャガチャやってしまうと（サイズ変更・効果など）、とてつもない量の変換が作成されて埋もれている。
そんな場合は上記画像のように検索をかけて探し出し、有効化させよう。
このチェックは後で説明するStrict transformations（厳密な変換）を有効化させると同時に有効になり、チェックされた変換しか表示されないのでURL改変による容量消費を抑えられる。
Settings（設定）
すべての機能を網羅しているわけではないが、当サイトのルールを適用させるために順番通りに設定していく。
右上にある歯車マークがSettingsエリアだ。
Account（アカウント）
現在のプラン確認・プラン変更・アカウントをキャンセル・アカウント作成時に決めた「国」・「会社名orサイト名」・「クラウド名」のアカウント関連設定が可能。
最後のCloudinary cloud name（クラウド名）は、アカウント作成時で述べたとおりURLに組み込まれるため、短いかつ自分のサイトだとわかりやすいブランド名を小文字の半角英数字で入れよう。
上記画像などのURL「yarisugi」部分がクラウド名だ。
Upload（アップロード）
かなり調べた結果わからなかった機能は多数あるが、画像のように設定していこう。
上記画像の補足。
自動バックアップはWordPressもといレンタルサーバー、バックアッププラグインを使用していれば一緒に画像もバックアップされ（設定次第）、用意周到な方はクラウドや自分のパソコンに保存しているので不要のはず。
フォルダ自動生成は、プラグイン及びWeb版Cloudinaryに直接アップすると、フォルダ名がURLに入ってしまう。
なぜかWordPressからアップする方法だと混入しないが、この記事ではわける必要がないので無効化しておこう。
画像・動画で表示切り替えできるし、問題ないと思うー
中間ほどに「Auto upload mapping（自動アップロードマッピング）」という何やら魅力的なものはあるが、WordPressから自動アップロードをしてくれる機能ではないようで無視。
Upload presets（アップロードプリセット）
アップロード設定下の方にあるアップロードプリセットは、アップした際にあらかじめ作成した設定を適用させることができ、ファイル名に付く被り防止文字列や画像効果・サイズ・画質を調整可能だ。
とりあえず2つプリセットを作るのだが、使い方次第で不要となるため以下のルールで選別しよう。
- ファイル名に付く被り防止文字列を消し、動画をWebM変換にしたい→ 2つとも作成（推奨：読み進めるだけ）
- ファイル名に付く被り防止文字列を消さず、動画をWebM変換にしたい → 1つだけ作成
- ファイル名に付く被り防止文字列を消し、動画のWebM変換をしない → 1つだけ作成
- GIFをWebMにせず動画作成時にWebM保存できるのならこのケース
- ファイル名に付く被り防止文字列を消さず、動画のWebM変換もしない → 不要
作成する方はAdd upload presetをクリックし、不要の方は次のSecurityのStrict transformations（厳密な変換）まで読み飛ばそう。
WordPressからアップした際の画像設定を作成
Storage and Access（ストレージとアクセス）のプリセット名を決め、番号どおりに進める。
これで「WordPressから画像をアップした際、ファイル名にランダムな文字列を付けない設定」ができた（まだ適用していない）。
Web版Cloudinaryからアップした際の動画設定を作成
今からWeb版Cloudinary及び、まったく使わないCloudinaryのプラグインからアップした際の設定を作成する。
例のごとく、WebMを使うには元々のファイルをWebMにする必要があるので、このような設定方法だ。
これで「Webからすべてのファイルをアップした際、ファイル名にランダムな文字列を付けず、なおかつアップ時強制WebM変換設定」ができた（まだ適用していない）。
次世代フォーマットを使いたいからWebMにするが、別にMP4でも圧縮率は優秀なのでそのままでも良かったりする。
やめなければ最強。
作成したプリセットを適用
Upload presets（アップロードプリセット）下にあるDefault upload preset（デフォルトアップロードプリセット）と、Media library’s upload preset（メディアライブラリアップロードプリセット）に作成したプリセットを適用させる。
デフォルトにはWordPressからアップする際のプリセットを、メディアライブラリにはWebMに変換する動画用プリセットを選択しよう。
GIFをCloudinaryでWebM変換させず、動画を保存した段階でWebMにしていたのなら、両方共WordPressからアップのプリセット（この画像ならworpe_up21）を選択するといい。
SecurityのStrict transformations（厳密な変換）
これをしないと邪悪な誰かがURLを他のサイズや拡張子などに改変し、貴重な変換回数を消費させにくるかもしれないので、Enabled（有効）にしておこう。
似たような設定でStrict video transformations（厳密なビデオ変換）もあるが、ビデオ変換のことかもしれないのでついでに有効化させよう。
PNGなどからf_autoで表示されない場合は、この記事に書いてある方法が間違っている可能性が高い（キャッシュが削除できず、どうしても調べられなかった）。
その場合は「この記事は調査不足であり、見るに堪えない目の無駄」などとコメント欄に報告していただければ、別のやり方にガラリと変えさせていただく。
現在はわかりやすく、最短を追求した手順を記載しているよ！
Users（ユーザー）
アカウント情報を変更したり、ログイン時に2段階認証をつけることができる。
Setup Authentication（セットアップ認証）へ進んで2段階認証を設定しよう。
APPLYを押すとすぐさま有効化され、これで「次回ログイン時からアカウント情報の他に、6桁のコードを入力する状態」になった。
「有効中」は以下の表示になり、認証の更新や無効化ができるようになる。
ちなみに、WordPressプラグインで2段階認証を導入すれば同じアプリが使用できるので、時間があれば参考にされたし。
プラグイン新規追加
このプラグインは「WordPressに挿入した画像をCloudinaryにアップロードし、CloudinaryのURLに置き換えてCDN配信」してくれる。
一応、公式プラグイン説明に一言も動画（Video）と書かれておらず、動画アップロードは元々する気がないと思われる。
とりあえずプラグイン追加前にWeb版Cloudinaryのダッシュボードへ行き、プラグインと連携させるための「CLOUDINARY_URLから始まり@自分のクラウド名で終わるAPI文字列」をコピーしてこよう。
次にWordPressから「Cloudinary」と検索して新規追加か、Cloudinaryプラグインページからダウンロード。
「有効化」するとダッシュボード（管理画面）左側に「Cloudinary」が出現するのでクリックし、さきほどコピーしたものを貼り付けして「Update Settings」。
これで連携された。
ちなみに、CloudinaryのMedia library（メディアライブラリ）からアップした場合、Web版からの扱い=プリセットが適用されWebM変換になる。
さらに、「WebM非対応ブラウザでMP4表示設定」ができない謎仕様により、完全に使わないので封印しよう。
一括アップロード
例のごとく自動アップロード機能がなく、動画はアップできない。
そのため、アップロードは記事公開前後、毎回手動でしなければならない現実を突きつけられる。
ただ、メディアの「表示オプション」で表示数を999にできるため、昔の画像はラクラクアップロード可能だぞ。
動画と画像両方を巻き込んでアップしても、動画だけ綺麗にエラーで弾かれるはずなので、GIFを含めた画像をアップするのは何も考える必要はないが、画像数次第で何分かかるか不明。
画像アップは記事完成間近だろうし、実際はあまり気にならないはず！
基本は表示オプションで項目数を999 → すべてのメディアを画像 → Upload to Cloudinary → アップしたいものを選択＆全選択 → 適用。
これでアップロード完了表示が出現し、単品アップロードをする際の表示もアップ済みに変わる。
既存の画像すべてをアップしたのなら、やりすぎな999を20に戻しておこう（今後は20で十分）。
ちなみに、「WordPressに挿入した画像をアップするタイミング」は公開後や公開前どちらでもよく、公開前なら置換後の表示も事前に確認できてお得。
間違えてもURLを変えればいいだけだから、恐れなくていいよ！
ブラウザ毎に自動拡張子変更（f_autoの追加）
しょっちゅう使うものではないミスによるリスクがあるのに、置換プラグインを毎回使うことになる（プラグインなしの手動でも可）。
まったく更新されていないが変換結果を確認できる、日本で有名なSearch Regex。
更新されているけども変換結果はPro版のみで、公式で述べられているが日本では無名のBetter Search Replaceを使うかはおまかせ。
「画像をクリックすると拡大」などの挙動をする「メディアファイル」にした際は、画像1つにつきURLが2つなので、どちらも追加必須。
片方だけだと拡大した画像、もしくはそのまま表示されている画像しかWebPにならない。
注意！してはいけない追加方法
URLは途中まで一緒だからと、以下のような置換方法をしてはいけない。
置換プラグインは個別の投稿記事を選べないようで、どうしても全体になってしまう。
この場合はCloudinaryにアップしたすべてのURLにf_autoが追加され、「すでに追加したURLにもf_autoが追加されて、f_auto/f_autoになる」（表示はされる）。
正解は「e/upload/v」と検索 → 「e/upload/f_auto/v」と追加なので、必ずこの面倒な手段を守ろう。
置換プラグインを推奨しておいて、使用想定してないでしょ……
Search Regexでf_autoを追加
Search Regexをインストール → ツール → Search Regexへ進み、
- Source（置換対象）をPost Content（投稿内容：初期設定でなっている）
- Search pattern（検索したい文字列）に「e/upload/v」
- Replace pattern（置換したい文字列）に「e/upload/f_auto/v」
- Replaceで置換結果確認
- Replace & Saveで実行
Better Search Replaceでf_autoを追加
Better Search Replaceをインストール → ツール → Better Search Replaceに進み、
- Search for（検索したい文字列）に「e/upload/v」
- Replace with（置換したい文字列）に「e/upload/f_auto/v」
- Select tables（テーブル選択）で○○○posts（投稿）を探して選択（○部分は無視）
- Run as dry run？（置換結果確認する？）のチェックを外す
- Run Search/Replaceで実行
画像をCloudinaryから戻す
戻す前に注意事項。
WordPressに記入したメタデータ（キャプション・alt属性：代替テキスト）は残るが、Cloudinaryに記入したメタデータは戻した際に消える仕様。
さらに、戻した際にWordPressに同名ファイルがあり？、ファイル名に「-1」が必ず付く。
メタデータ（主にalt属性）は昔からWordPressに記入する癖が付いているかと思うので、引き続きその癖を信頼と愛着で守っていこう。
戻し方は簡単で、一括アップロードをするときと同じメディア → ライブラリ → 左上の「一括操作」プルダウンをMigrate away from Cloudinaryにする → 引き戻ししたいファイルを選ぶか全選択 → 適用でOK。
これで画像系はファイル名に「-1」と付くだけで、Cloudinary利用前に戻る。
動画は置換プラグインを駆使しても、手動しか方法を思いつかなかったので知らない。
動画のアップロード方法
Cloudinaryと共に生きるなら問題ないため、無料プランの容量を事前に調査するといい。
動画ファイルが50個くらいなら自力で戻せそうだし、自分と相談しよう！
流れはWeb版Cloudinaryへ動画にしたいファイル（主にGIF）・動画ファイルをそのままドラッグなどでアップロードするだけ。
このとき、Web版Cloudinaryからアップした際の動画設定を作成のプリセットを適用させていれば、WebMに変換される。
次にURLがほしいので、アップした動画にカーソルを合わせる → クリップマークをクリックしてURLをコピー。
Upload/の後に、「f_mp4/」を追加したURLを投稿記事に挿入する（エディタごとに挙動が違うので後述）。
そうすることで非対応ブラウザではMP4、それ以外はWebM配信動画が作成でき、以下のようにHTMLタグを使えば自動再生・ループ・ミュート・再生ゲージ隠しでGIFごっこも可能（メディアファイルのような拡大は無理？）。
これを1つの動画ごとに毎回しなければならないが、「一気にURLを入れてf_mp4を置換プラグインで追加する」という手段もあるので、参考にされたし。
このように過去動画も1つずつやらなければならないので、通常はこれからの動画だけ推奨。
さきほどの画像に「Edit（編集）からの方法はセキュリティ文字列が入って消すのが面倒」と書いてあるが、本当に面倒（入っていてもOKなはずだがリンク文字数が伸びる）。
それでもいいならやり方だけ書いておく。
Edit（編集）→ 左下にあるMore options…（より多くのオプション：変換を作る際に進んだところ）→ Fetch FormatのNoneをMP4 Videoにする → f_mp4がURLに追加されたのでコピー → おこのみでs–○○–/の部分を削除。
セキュリティ文字列が入っている場合、f_mp4を入れるのはセキュリティ文字列の後なので間違えないように。
動画URLをWordPressに挿入
動画をアップロードして獲得したURLを、
- Gutenberg（グーテンベルク）：一般ブロック → 動画 → URLから挿入
- ビジュアルエディタ：URLをそのまま貼り付け
- テキストエディタ：HTMLタグで囲う
するだけ。
そして、Gutenbergだけ最先端技術を積極的に学んだボーナスとして「自動再生・ループ・ミュート・再生ゲージ隠し」を事前知識なしでGIFごっこ可能。
ということで、新たにVideoタグを学ぶか、Gutenbergを学ぶか選ぶといい。
なお、私はVideoタグがなんなのか知らない。
テーマやプラグイン相性問題は諦めだけど、使えるのに「使いにくい」と3時間程度で判断して即ヤメはダメダメのダメ！WordPressを初めた頃の挑戦する気持ちを思い出して！
Cloudinary側でループ・ミュートにする（非推奨）
どうしてもGutenbergを避けたい方のために追い打ちをかけておく。
Cloudinary側でループとミュートにすることはできるが非推奨（不思議な変換を許可したくないので動画例なし）。
残念ながら動画を無限ループさせることはできず、ループ回数を決めなければならない。
さらに残念なことに、ループ回数分動画時間が伸び、自動再生と再生ゲージ隠しが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にこだわる意味が薄い）。
あれー？記事に挿入したら動いてるんですけど！
動画が作動していようが肝心の「対応ブラウザWebM・非対応MP4」になっていないし、とりあえず無視。
次のように拡張子をMP4 → f_webmにしても、WebM変換しないのでダメ。
ようするに、WebM拡張子の動画をf_mp4変換しないと、WebMとMP4を同時に使用できない。
このバグ？が今後修正され、WebMに変換する必要がなくなった場合は、「WebM変換プリセット」を使用せずに、そのままf_autoを追加すれば良いだけになるかもしれない。
だが、結局1つずつ追加・戻す場合も1つずつと手間が減っていないので、修正されようがどうでもよかったりする。
画像・動画の差し替え
JetpackプラグインのPhotonのように「削除できない」といったことはないが、差し替えても何分か待たされるので注意。
この記事で作成した「Webからアップした場合強制WebM変換のプリセット」は、画像もろともWebM化されてしまう。
仕方がないので一時的にWordPress用のプリセットに切り替えるか（推奨）、「None」に切り替えてから上書きしよう。
Noneだとファイル名に文字列が入るぞ。
あとは、Cloudinaryにそのまま同名ファイルでアップすると上書きするか聞かれ、「Replace（入れ替える）」を押すだけでいいが、反映されるまで2分ほどかかった。
Cloudinaryのキャッシュを一瞬で消す方法はわからないが、思いの外時間がかかる可能性（最大1時間らしい）も考えて差し替えよう。
公式キャッシュの仕様（英語）
そして、差し替えが終わり次第変更したプリセットを元に戻しておこう！
差し替えも関係あるかわからないが、削除したメディアは最大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の2段階認証設定をスキップした方は今してこよう。
コメント