やりたいこと
ドット絵アニメーションgifをWordPress記事に埋め込みたい。
オリジナルサイズだと拡大したときにボケてしまうので、ある程度高解像度（辺あたり600px以上）へ等倍してアップロードしたい。
＜2021/07/16追記＞
なんとgifじゃなくAPNGにすればよいことが判明。本記事末尾に追記しました。
いろいろためした
普通にアップロードしようとしたけどダメだったので、いろいろ試したよ。
失敗①普通にアップロード→だめ
怒られちゃった。
どうやらファイルサイズが大きすぎるようでした。仕方ないなあ。
失敗②アップロード上限増やす→だめ
アプリケーションでアップロード条件を制限しているようなので、上限を変更。
参考：
https://kinsta.com/jp/blog/wordpress-maximum-upload-file-size/#modify-server-settings
なんで？？？？？
失敗③メディアライブラリから→だめ
上記は投稿ページの画像ブロックからアップロードしようとしたのですが、試しにメディアライブラリからアップロードしてみようとしました。
かなり根本的な課題だったみたい。
同メッセージにエンカウントしたバトルの攻略法をいろいろGoogleさんに聞いてみましたが、
- ファイルサイズを小さくしよう！→今のサイズが良いので。。。
- ブラウザを再起動してみよう！→変わらない。。。
- サーバの負荷が高いのかもね！→特に問題なし。。。
- スペック増強してみよう！→このまえ頑張ってサーバさんつよくしたばっかりなので。。
こまった。。。。。。。
失敗④直接ファイル転送→おしい
WordPressアプリケーション（HTTP）がだめならファイル転送プロトコルで直接ぶちこんでやるわい、ってことで以下手順
- SCPでWordPressの参照できるディレクトリにアップロード
- プラグイン「Media from FTP」でアップロードしたファイルをメディアライブラリに認識
- いっしょにサムネイルとかモバイル用サイズもつくってくれる
- 記事の画像ブロックに挿入！！
記事内に無事表示できた！！！！とおもいきや思わぬ落とし穴。。
記事内のgifはたのしく動くのに、サムネイルとして表示されるgifはうごかない。。。（きみgifじゃないの。。。）
これでできた！！！！
↑のファイル転送＋Media from FTPで記事内の大きいgifは正常に登録できることがわかりました。
問題はサムネイル用なので、もうこっちは普通に小さい解像度のものをメディアライブラリへ直接アップロードしてサムネイル登録したれ、ってことで実践。
ようやくサムネイル＋記事内両方とも動くようにできました。
たぶんこれが原因？
Media from FTPさんがメディアライブラリ登録するときに作成してくれるサムネイル用ファイル、あやしいね。
以下は私のメディアライブラリ用ディレクトリの中身。いろんな解像度のファイルをつくってくれてるみたい。
-rw-r--r-- XXX XXX 12997 X月 X 15:06 shinjuku-subway3-150x150.gif -rw-r--r-- XXX XXX 28688 X月 X 15:06 shinjuku-subway3-300x206.gif -rw-r--r-- XXX XXX 66639 X月 X 15:06 shinjuku-subway3-508x348.gif -rw-r--r-- XXX XXX 135631 X月 X 15:06 shinjuku-subway3-768x526.gif -rw-r--r-- XXX XXX 6105 X月 X 15:06 shinjuku-subway3-88x88.gif -rw-r--r-- XXX XXX 193939 X月 X 15:06 shinjuku-subway3-973x667.gif
これをローカルのエディタで見てみると、あらびっくりフレーム1枚。gif拡張子といいながら中身はただのpngになってました。どうやらgifは対応してない様子。
もしかしてたまにWebで見る「gifはメディアライブラリに直接アップすると動かない。投稿ページでアップしようね。」の記述もこの関係かしら。
解決策、かしこくないよね。。。
結局、私の解決策は以下。
- 記事用の大解像度gif
- SCPでWordPressの参照できるディレクトリにアップロード
- プラグイン「Media from FTP」でアップロードしたファイルをメディアライブラリに認識
- 記事の画像ブロックに挿入！！
- サムネイル用gif
- 記事用とは別にメディアライブラリからアップロード＆挿入！！
ドット絵ひとつ記事にするのにけっこうな手間。。もっとうまいやりかたないかな。。。
代替策（2021/07/16追記）
gifではなくAPNG（アニメーションPNG）ならずっと低ファイルサイズで生成できることがわかりました。技術の進歩ばんざい。
ドット絵アニメをAPNGで生成し、そのままWordpress記事の画像ブロックにアップロードすれば良いです。アイキャッチ画像もこのファイルを指定すれば問題なく動く。
ひとつ面倒なのは、Twitter用にやっぱりgifをつくらなきゃいけないこと。TwitterくんさえAPNG対応してくれれば収まるのに。。。
代替策に関する追記②（2021/09/14）
上記の通りAPNGをアップロードしてもうまく動かない事象が。試行錯誤してみたところ、成功例との差分は画像サイズでした。成功例は長辺が1024px。失敗例のファイルを同サイズにしたところ、無事動くようにアップロードできました。
原因は現状不明ですが、今後は画像サイズにも注意しながら運用していこうと思います。。。
コメントを残す