WordPressのブロックエディタにて、JetPack機能でマークダウン設定をオンに。MarkDownブロックを活用してマークダウン記法で記事を書いておりました。
私は普段Roam Research というアウトライナーを利用しており、Roam Researchにマークダウン記述した内容を、WordPressへ入稿します。
Roam Researchに保存した画像は FirebaseStorage に保管され、Firebase の URL をマークダウン記法で記述することで WordPress でも活用可能、のはずでした…。
しかし今回はマークダウンで記述したもののうち、「画像」のみが表示されないという不具合に遭遇。調査のうえ解決しました。
解決方法の結論としては、
JetPack の設定 > パフォーマンスおよびスピード > 画像の読み込みをスピードアップ をオフに
とすることで解決しています。
目次
WordPressにて、マークダウン記法で記述した画像が記事公開後に表示されない
通常、画像のマークダウン記法は下記のとおり。(！とカッコを全角にしてありますが、実際は半角入力)
！[alt]（imageurl）
しかし、上記画像のマークダウン記法で記述しても、記事公開後は画像が壊れた形となり表示されません。alt 属性のみ表示される形に。 また特定の画像だけでなく、マークダウン記法で記述した画像についてはすべて表示されない、という現象でした。
ブロックエディタ上の MarkDown プレビューでは表示されるのですが、WordPress の投稿プレビューや、公開後の投稿記事では表示されません。
また、画像以外のマークダウン記法は通常どおりに反映されるという状況でした。
表示されない画像のURLはどのようになっているのか。開発者ツールで詳細チェック
ブラウザの developer tool で該当の画像を確認したところ、拡張子のあとの属性表記の部分が変わっているのを発見。
通常、RoamResearch から Firebase にアップロードされたファイルは、保存先として https://〜.png?alt=media&token=xxxxxxx-xxxx-xxxx-xxxx-xxxxxxx といった属性が付記されます。
しかし、WordPress で上記 URL を画像マークダウン記法で表記した場合、公開画面ではなぜか https://〜png?ssl=1 という属性へと変わってしまっているようでした。
JetPack のパフォーマンス設定"画像の読み込みをスピードアップ"をオフで解決
恐らくキャッシュ処理含め、画像に関するプラグインが影響していると推測。 結論としては、JetPack の画像スピードアップ設定が影響していました。
WordPress 管理画面 > Jetpack > 設定 > パフォーマンスおよびスピード > "画像の読み込みをスピードアップ" の項目をオフに
上の画像は英語表記になっています。
上記のように、"画像の読み込みをスピードアップ" の項目をオフにし設定を保存。 マークダウン記法で記述した画像が無事に表示されるようになりました。
Jetpack の"画像の読み込みをスピードアップ"は何をしているのか？
今回、なぜ CloudFlareStorage からマークダウン形式で画像を取得・表示させることができなかったのでしょうか。 Jetpack の"画像の読み込みをスピードアップ" 項目が何をしているのか、少し調べてみました。
Jetpack のパフォーマンスおよびスピードは、CDN 経由での配信設定
WordPress 管理画面上、Jetpack の"パフォーマンスおよびスピード"タブの、サイトアクセラレーター項目の説明には次のように記載があります。
Jetpack で画像を最適化し、WordPress.com のサーバーによるグローバルネットワークから画像と静的ファイル(CSS や JavaScript など)を配信するようにすることで、ページの読み込みを高速化できます。
つまり、Jetpack が用意する CDN(Content Delivery Network)を利用することで、画像やその他ファイルの読み込み速度を上げることができる、ということ。
参考: Hosting Resources Offsite Can Make Your Load Times Lightning Fast | Jetpack
この高速化の設定項目は、以前は"Photon"という名称だったようです。
Jetpack CDN がもたらすWordPress高速化の効果
Using Jetpack to Improve Site Load Times Nexcess では、(Jetpack が用いる)CDN を利用することで下記のメリットがあると記載しています。(著者訳)
- ブラウザでより多くのファイルを同時にダウンロードできるようにする
- 異なるデータセンター間での帯域幅の分散
- 世界中の異なるデータセンターにアセットを共有することで、ユーザーは常に最も近いデータセンターからファイルをダウンロードすることが可能
CloudFlareStorage も CDN。オリジンサーバー上に画像データがなく Jetpack の CDN にキャッシュできなかった
そもそも、Cloudflare も CDN 配信を利用した、クラウドストレージサービスの一種です。
CDN はオリジンサーバー(私の場合はレンタルサーバー)のデータをキャッシュして配信する仕組みになっています。 しかし、今回は画像が CloudFlareStorage 上にあり、オリジンサーバー上には保存されていません。そのため、Jetpack の CDN が画像を取得することが出来なかったのだと推測されます。
そのため、Jetpack CDNをまだ利用していないプロックエディタ画面ではマークダウン記法でも画像表示を確認できるのに、公開後はJetpack CDNを利用して配信されるため「画像が表示されない」という事態になってしまっていたのですね。
Leave a Reply