1. はじめに
最近、Wordpressが多機能になりすぎて、Photopress化してるなぁと感じてます。
研究重視の当工房では、Wordpressが重荷になってきたので、伝えることに特化したWiki系のシステムにHPを移行しようと模索しています。
(ちなみにこの記事はVSCode上でAsciiDocを使ってかきあげてます。)
そのあたりの詳しい話はまた今度記事にするとして、今回は選考過程で候補に残った DokuWiki が 画像フォーマット WebP に対応してないなのが残念だなとおもい、自分で対応できないか調査してみました。
ガッツリとシステム内の変更をするので、変更は自己責任で行ってください。
何があっても当方では責任を取れないことをご承知ください。
なお、この記事は、DokuWikiの “Hogfather” バージョンを基準に書いております。
2. お急ぎの方へ
conf/mime.conf に ‘webp image/webp’ を使いしてください。
ソースコード中の jpe?g|gif|png を jpe?g|gif|png|webp に Grep置換(Grep and Replace)してください。
置換の際には正規表現は使わないでください。
PHPは5系なら5.4以降、7系なら7.0以降のGDライブラリを使用。
( 詳しくは PHPのマニュアルを確認してください )
もしくは、WebP対応のImagemagickを使用してください。
3. 画像フォーマット WebP を使う利点
利点としては、画像データサイズがJpegやPngよりも小さくなるという１点だけです。しかし、その効果は多岐にわたり、特に環境保全重視の方にはつかうっきゃ無いでしょという画像フォーマットです。
3.1. HPの表示速度の向上
いまでも、時々見かける表示されるまでに時間がかかるHP。その殆どが、データサイズの大きい画像が使われています。
データサイズが小さいほど、ブラウザとサーバのやり取りは減るので、HPが表示されるまでの時間も短くなり、ストレスなく閲覧してもらえるようになります。
3.2. サーバーの転送量の低減
レンタルサーバーなどでデータ転送量の制限があることがあります。特に共用のサーバーであれば、たくさんのデータが流れてくるとデータの渋滞が起きて他の人のサーバーに影響が出るうえ、パケットを処理するCPUの負荷がどんどん上がります。
データを小さくすることで、この渋滞を緩和させる事ができ、より多くの人に安定してHPをご覧いただけることになります。
3.3. PCやサーバの保存容量の削減
同じ画像でも画像データサイズが小さければ、たくさんの画像数を保存できます。
てぃーだブログだと保存容量は1GBですが、わりとはやく消費してしまい、容量が少ないという話を耳にします。
当工房は、画像の縦横サイズ、劣化度のコントロール、圧縮アルゴリズムの変更をして、他の方よりはたくさんの画像を保存できていますが、そういった手間を省けるのも魅力です。
(なお、てぃーだブログはWebPは扱えません。最適化GIFアニメにも対応してなかったので、固定費の削減にはあまり興味がないのかもしれません)
3.4. パケット消費量の削減で家計に優しい
インターネットデータ送受信はパケットという単位で行われています。
携帯電話の通信料金はこのパケットを基準に決められていますので、パケット使用料とも言われています。
同じ画像でも画像データサイズが小さければ、パケット使用量は減りますので、パケットの追加購入のリスクも低減できます。
3.5. 電気使用量の削減で環境に優しい
パケットの送受信には電力が必要になります。パケット数が少ないほうが電力の消費量が少なくてすみますので、エネルギー消費量も削減でき環境保全に貢献できます。
4. DokuWikiがWebPに非対応な理由
DokuWikiのフォーラムに書かれています。
WebP非対応ブラウザが多い
画像のサムネイルを作るコンバータが非対応
とはいえ、2012年の発言であって今は状況が変わっています。
4.1. WebP非対応ブラウザが多い
当時はサポートするブラウザーが少なかったのは事実ですが、2020年9月17日、ついに Safari 14がリリースされ、市場に出回るほとんどのブラウザで 画像フォーマット WebP が使用できるようになりました。
「 Apple、macOS版「Safari 14」を配布開始 Big Surの機能を先取り 」
これから先１，２年でWebpに対応するサイトは爆増するでしょう。
4.2. 画像のサムネイルを作るコンバータが非対応
Dokuwikiは画像コンバーターにLibGDかImagemagickを使用する用になっています。どちらもWebPにはすでに対応していますので、古いシステム以外では、コンバートがコンバートが出来てしまいす。
最近のフォーラムではこのことで少し混乱が生じているようです。
5. DokuWikiをWebPに対応させる方法
WebPに対応させるには、アップロードした画像のサムネイルを作る工程と、サムネイルを表示させる工程に変更を加える必要があります。
5.1. サーバー側の対応
Dokuwikiのソースコードに含まれる、mime.conf への追加が必要となります。
mime.conf の 保存場所は confディレクトリ直下です。
ico image/vnd.microsoft.icon
の下に
webp image/webp
を追加してください。これでアップロードは可能になります。
次に、サムネイルの作成の部分は先もふれましたが、新しいサーバーのシステムを使っていると、PHPのLibGDやImagemagickがWebPに対応しているためので何もする必要はないようです。
サムネイルが生成されていないという方は、PHPやImagemagickがWebPに対応しているか確認してください。
ImagemagickがWebP対応してるかは下記のコマンドでわかります。
convert -list format | grep WebP(私が使用してるエックスサーバーではImagemagickがWebPに対応していませんので何も表示されません。)
サムネイルがなくても、いいよって方は、PHPもImagemagickのことは気にせずともOKです。
5.2. メディアマネージャーのサムネイルを表示する
なにげに不便なのが、メディアマネージャーのサムネイルが表示されないという減少です。これは、DokuWikiシステムのソースコードの修正が必要となります。作者の皆さん、勝手に弄ってごめんね。
Githubいじれるかたは、コミットしてみてはいかがでしょうか？(他力本願)
いじる場所はそんなに多くありません。５時間ぐらいトレースを続けた結果、３ファイル５箇所の修正で修正でいけそうです。
-
dokuwiki/inc/media.php
-
1103L
-
変更前
if (!preg_match(“/\.(jpe?g|gif|png)$/”, $image) | !file_exists(mediaFN($image, $rev))) return false; -
変更後
if (!preg_match(“/\.(jpe?g|gif|png|webp)$/”, $image) | !file_exists(mediaFN($image, $rev))) return false;
-
-
1310L
-
変更前
$is_img = preg_match(‘/\.(jpe?g|gif|png)$/’, $image); -
変更後
$is_img = preg_match(‘/\.(jpe?g|gif|png|webp)$/’, $image);
-
-
2239L
-
変更前
$http→header_regexp = ‘!\r\nContent-Type: image/(jpe?g|gif|png)!i’; -
変更後
$http→header_regexp = ‘!\r\nContent-Type: image/(jpe?g|gif|png|webp)!i’;
-
-
-
dokuwiki/inc/search.php
-
218L
-
変更前
if(preg_match(“/\.(jpe?g|gif|png)$/”,$file)){ -
変更後
if(preg_match(“/\.(jpe?g|gif|png|webp)$/”,$file)){
-
-
-
dokuwiki/inc/parser/metadata.php
-
726L
-
変更前
if (preg_match(‘/.(jpe?g|gif|png)$/i’, $src)) { -
変更後
if (preg_match(‘/.(jpe?g|gif|png|webp)$/i’, $src)) {
-
-
言葉で言い表すと、DokuWiki としては「拡張子が jpg,jpeg,gif,png でなければ画像とは認めない」という部分に「WebPも画像の仲間にいれてぇぇ」とお願いしたってことです。
関数かメソッド化しててくれたら一箇所で良かったじゃんって話ですが、そうだったらトレースの時間はもっと長くなってたかも。
これで、表示されなかったメディアマネージャーのサムネイルが表示されるようになりました。
6. 今後の課題
ようやく、市場に出回るほとんどブラウザでWebPの表示が可能となったが、とはいえ アップデートをしない人もいるため (著者はiPhone4Sをいまでも愛用してるｗ) 、ブラウザが対応していない場合のことも考慮していかなければいけない。(IEは問答無用で無視)
理想としては、{{wiki:dokuwiki-128.webp wiki:dokuwiki-128.png}} という記述ができることでしょうか？
１つの方法としては<picture>タグを挿入できるプラグインを開発ですね。
ただ、すぐに対応するのであれば、Wordpressの「EWWW Image Optimizer」がやっている WebPのファイル名に工夫をすることで .htaccess を駆使する方法もあります。
例えば
Jpegフォーマットのファイル 29q.jpg に対応する webpフォーマットの画像のファイル名を 29q.jpg.webp としてアップロードします。
そして、 .httaccessに書きを追加
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{HTTP_ACCEPT} image/webp
RewriteCond %{REQUEST_FILENAME} (.*)\.(jpe?g|png)$
RewriteCond %{REQUEST_FILENAME}\.webp -f
RewriteCond %{QUERY_STRING} !type=original
RewriteRule (.+)\.(jpe?g|png)$ %{REQUEST_FILENAME}.webp [T=image/webp,E=accept:1,L]
</IfModule>
<IfModule mod_headers.c>
Header append Vary Accept env=REDIRECT_accept
</IfModule>
AddType image/webp .webp時間出来たら試してみようと思います。(この記事書いてる間に出来たかも…)
って感じです。
