FFmpegを使いWebPへ画像変換。シェルスクリプトを使えば全ディレクトリを一括処理も可能!

SafariもWebPに対応すると思われる(βですが)ので、大量に画像を使っているサイトの高速化を図るため、WebPを使用しようと考えました。

 

画像の一括処理が大変

画像が大量にあるためどうしても一括で変換したかった。そしてpng、jpg、gif、表記ゆれのjpegなども相まって複数の拡張子にも対応しないといけないため、どのようにやるかいろいろ調べた結果、以下のような方法で行いました。当方Windowsです。

  • 変換にはFFmpegを使う
  • シェルスクリプトで拡張子で処理を分ける
  • 今回はgifはgifアニメも含んでしまうためWebP処理はせず、それ以外の拡張子に対して変換を行う事を想定

コード

早速コードを書いていきます。以下のコードを「webp.sh」で保存します。

#!/bin/bash

cd ★処理したいディレクトリまでのパス★
for file in \find . -maxdepth 5 -type f; do
faname_ext="${file##.}" #拡張子を取得
if [ "$faname_ext" != 'gif' ] ; then #gif以外を処理
fname=${file%.
} #拡張子を除くファイル名。パスを含む。
newfile=$fname".webp" # 新しい画像形式
ffmpeg -y -i $file $newfile
fi
done

★処理したいディレクトリまでのパス★には、自分の環境にあったパスを記載してください。例えばこんな感じの書き方です。

cd /c/Users/username/Desktop/data

使い方

bashの使えるCUIツールを使います。私は Git for Windowsのgitbashを使いました。流れとしては、以下の通りです。

  1. webp.shファイルのある場所へ移動する
  2. webp.shファイルに対してパーミンション755を付与
  3. webp.sh実行

それを踏まえたbashの流れは以下です。

$ cd Desktop/
$ chmod 755 webp.sh
$ ./webp.sh

応用

これを応用すれば、例えばmp4はwebmに、それ以外の拡張子はwebpみたいなこともできます。

#!/bin/bash

cd ★処理したいディレクトリまでのパス★
for file in \find . -maxdepth 5 -type f; do
faname_ext="${file##.}" # 拡張子を取得
if [ "$faname_ext" = 'mp4' ] ; then #mp4だったら
fname=${file%.
}
newfile=$fname".webp" # webmに変換
ffmpeg -y -i $file $newfile
else #それ以外は
fname=${file%.*}
newfile=$fname".webp" # webpに変換
ffmpeg -y -i $file $newfile
fi
done

最後に

念の為、バックアップを取ってから行うことをおすすめします。

created by Rinker
¥2,673 (2022/09/29 18:54:43時点 Amazon調べ-詳細)

今回のホームページリニューアルで行った事

ホームページのリニューアルで今回行った事をメモしておきたいと思います。

すべての記事をMarkdownに変更

何度かリニューアルを行う中で、懸案事項だった、htmlとMarkdownの混合状態。今回はそれらをすべてMarkdownに変更しました。

いろいろ探してみたのですが、残念ながら全自動というわけには行かず、泣く泣く手動で作業を行いました。

その作業で作業の短縮につながったプラグインが「WP Githuber MD – WordPress Markdown Editor – WordPress プラグイン | WordPress.org 日本語

こちらのプラグインは、Markdownエディタでありながら、html→Markdownにコンバートしてくれる機能がついているのです。なので、大まかにMarkdownに変換し、細かい部分を手動で修正していきました。

上記プラグインで大変なのは、moreタグの存在。変換時に消えてしまうので、その都度自分で設置していました。

ただ、それを差し引いても普通に手作業より楽にできますよ。

WP Githuber MDを使う事により、メンテナンスが終了しているJP Markdownは削除しました。

Amazon、楽天のアフィリエイトを一括管理できるように

Amazon、楽天のアフィリエイトも設置していたのですが、ツールが変わってアフィリエイトとしての意味をなしていない記事がたくさん存在していまっていました。それらを今回「商品リンク管理プラグインRinker(リンカー)」を使って管理する事にしました。

商品を登録すると、専用のショートコードを生成してくれるので、それをコピペするだけ。

便利なのは、どの記事に設置したのかを別途一覧で確認できる事。削除も簡単に判断できるのがいいですね。

時代に合わせた製品に入れ替える時も、商品側のマスターを変えればいいので、楽です。

商品に1つずつつけると大変なので、カテゴリやタグごとに商品を決めてしまうのがてっとり早いのかな、と感じました。

このあたりの一括管理はまだ完全にできていないので、追々やっていきたいなと思います。

SEOプラグインの変更

SEOプラグインといれば「All in One SEO Pack – WordPress プラグイン | WordPress.org 日本語」が鉄板でしょう。

ただ今回はよりシンプルなプラグインがよいといろいろ探した結果、「SEO SIMPLE PACK – WordPress plugin | WordPress.org」にしました。

こちらがいいのは、日本の実情に合わせたものになっていること、もちろんすべて日本語、使わないような無駄な機能がないことが決め手でした。

無駄なテーブル、カスタムフィールドの削除

いろいろなプラグインを使っていた弊害で、データベースに不要なテーブルやカスタムフィールドが溜まっていましたので、それらを削除しました。

今回やらなかった事

画像のWebP化は今回行いませんでした。Markdownを使っているからか、うまくプラグインが動かなかったからです。

その代わり、画像サイズを500pxと軽量化することで、サイト全体が軽くなっていると思います。その結果「PageSpeed Insights」で96、99点となかなかの高評価になりました。

さいごに

当サイトで現在使っているプラグインなども追って紹介したいと思います。
Note風味で軽量のサイトができて満足しております。

ホームページをリニューアルしました

長らく、「Cocoon | WordPress無料テーマ」というWordPressのテーマを使っていましたがリニューアルしました。

note風のデザインを踏襲

note ――つくる、つながる、とどける。」という、記事を販売することもできるサイトをご存知でしょうか?

今回のテーマはそのノート風を意識してデザインしました。

デザインといってもベースとなるCSSは、「new.css」を使用しています。

今まではWordPressのテーマの中に実装されている機能をフル活用していましたが、結果的に重くなっていると感じたため、軽量化を優先して自作しました。でも普段仕事でWordPressを使っているので難しい作業ではないですけどね。

個別ページに関しては、noteのように1段組のレイアウトにしています。文章の読みやすさを意識しているデザインです。

1段組にしたことで、その他の記事の見つけやすさを考慮して、各記事の下にランダムで10記事表示するようにしました。

広告で稼げることも重要なのでw、シンプルに記事の上下に広告を入れています。

実際に試してみてわかったことがあります。1段組であれば上下の広告も非常にシンプルに見えるなあと感じました。

たくさんあるカテゴリーをどのように表示するか迷いましたが、シンプルに、いや雑かもしれませんがページの上下に横並びで表示することにしました。

リンクはちょっと押しづらいですがどういった内容が記載されているか分かりやすくていいのではないかと思います。

最後に

各コンテンツはMarkdownで記入していますが、一部の古い記事はまだHTMLのままです。

俺も追々修正していきたいなぁと思いつつ、当面はこのままでしょう。その点についてはのんびりお待ちくださいw