仕様補足

- 新規の画像はCDNのドメインを参照することで新規に取得できるようになる

- 前回CDNに通してから1年以内の画像はCDNのキャッシュを返す

- 返せるのは画像、動画、等々(このあたりの詳細は不明。不明だが、既存のサイトでは「画像、動画の2つだけ」)

- localではCDNを参照しない

- 属性名はurlだけど、ルート相対パスでも問題ない


関連コード

replaceImgSrcToCdnSrc()

- imgタグで、CDNに通す処理

- args ... void

- return ... void

- 依存 ... [data-cdn-src-url]

- 処理 ... /wp-content/.* でマッチしたやつの手前にCDN_URLをくっつけて、setAttribute srcにでセット。CDN_URLはis_prodで分岐


replaceImgCdnBgToBackgroundStyle()

- 背景画像をCDNに通す処理

- args ... void

- return ... void

- 依存 ... [data-cdn-bg-url]

- 処理 ... /wp-content/.* でマッチしたやつの手前にCDN_URLをくっつけて、style.backgroundImageに `url(${bg})` でセット。CDN_URLはis_prodで分岐


テスト補足

- 空文字、null、その他(正規表現記号含む)特殊文字はmatchしないので平気そう

- 属性がそもそもない場合は処理が走らないので問題なし

- https://cdn-img.donuts.ne.jp/wp-content/uploads/2016/08/20090604-fig.jpg がS3を経由していることは事前に確認済

- newsのサムネイルは「get_the_post_thumbnail_url」でuriを取得。ルート相対が返ってくるみたいです。


▼ imgタグ


imgタグ -- static配下 - CDN(新規画像)

- local .../wp-content/themes/donuts-corporate-theme/static/img/img_dummy_400x75_07.png
- shifter-wordpress ... /wp-content/themes/donuts-corporate-theme/static/img/img_dummy_400x75_07.png
- shifter-built ... https://cdn-img.donuts.ne.jp/wp-content/themes/donuts-corporate-theme/static/img/img_dummy_400x75_07.png

DONUTS GAMES 採用特設ページ

▼ 正しい表示

DONUTS GAMES 採用特設ページ

imgタグ -- static配下 - CDN(既存画像)

- local ... /wp-content/themes/donuts-corporate-theme/static/img/banner-games-recruit.png
- shifter-wordpress ... /wp-content/themes/donuts-corporate-theme/static/img/banner-games-recruit.png
- shifter-built ... https://cdn-img.donuts.ne.jp/wp-content/themes/donuts-corporate-theme/static/img/banner-games-recruit.png

DONUTS GAMES 採用特設ページ

▼ 正しい表示

DONUTS GAMES 採用特設ページ

imgタグ -- static配下 - shifter

- 一律 ... /wp-content/themes/donuts-corporate-theme/static/img/banner-games-recruit.png


DONUTS GAMES 採用特設ページ

▼ 正しい表示

DONUTS GAMES 採用特設ページ

imgタグ -- uploads配下 - CDN(新規画像)

- local ... /wp-content/uploads/2023/06/img_dummy_400x290_06.png
- shifter-wordpress ... /wp-content/uploads/2023/06/img_dummy_400x290_06.png
- shifter-built ... https://cdn-img.donuts.ne.jp/wp-content/uploads/2023/06/img_dummy_400x290_06.png

DONUTS GAMES 採用特設ページ

▼ 正しい表示

DONUTS GAMES 採用特設ページ

imgタグ -- uploads配下 - CDN(既存画像)

- local ... /wp-content/uploads/2016/08/20090604-fig.jpg
- shifter-wordpress ... /wp-content/uploads/2016/08/20090604-fig.jpg
- shifter-built ... https://cdn-img.donuts.ne.jp/wp-content/uploads/2016/08/20090604-fig.jpg

DONUTS GAMES 採用特設ページ

▼ 正しい表示

DONUTS GAMES 採用特設ページ

imgタグ -- uploads配下 - shifter

- 一律 ... /wp-content/uploads/2016/08/20090604-fig.jpg


DONUTS GAMES 採用特設ページ

▼ 正しい表示

DONUTS GAMES 採用特設ページ

▼ 背景画像


背景画像 -- static配下 - CDN(新規画像)

- local .../wp-content/themes/donuts-corporate-theme/static/img/img_dummy_400x75_07.png
- shifter-wordpress ... /wp-content/themes/donuts-corporate-theme/static/img/img_dummy_400x75_07.png
- shifter-built ... https://cdn-img.donuts.ne.jp/wp-content/themes/donuts-corporate-theme/static/img/img_dummy_400x75_07.png

▼ 正しい表示

背景画像 -- static配下 - CDN(既存画像)

- local ... /wp-content/themes/donuts-corporate-theme/static/img/banner-games-recruit.png
- shifter-wordpress ... /wp-content/themes/donuts-corporate-theme/static/img/banner-games-recruit.png
- shifter-built ... https://cdn-img.donuts.ne.jp/wp-content/themes/donuts-corporate-theme/static/img/banner-games-recruit.png

▼ 正しい表示

背景画像 -- static配下 - shifter(新規画像)

※ cssでスタイリングするのでテスト不要

背景画像 -- uploads配下 - CDN(新規画像)

- local ... /wp-content/uploads/2023/06/img_dummy_400x290_06.png
- shifter-wordpress ... /wp-content/uploads/2023/06/img_dummy_400x290_06.png
- shifter-built ... https://cdn-img.donuts.ne.jp/wp-content/uploads/2023/06/img_dummy_400x290_06.png

▼ 正しい表示

背景画像 -- uploads配下 - CDN(既存画像)

- local ... /wp-content/uploads/2016/08/20090604-fig.jpg
- shifter-wordpress ... /wp-content/uploads/2016/08/20090604-fig.jpg
- shifter-built ... https://cdn-img.donuts.ne.jp/wp-content/uploads/2016/08/20090604-fig.jpg

▼ 正しい表示

背景画像 -- uploads配下 - shifter

※ cssでスタイリングするのでテスト不要


▼ その他


その他 -- ルート相対じゃなくて、URLを設定した場合 - uploads

- local ... /wp-content/uploads/2016/08/20090604-fig.jpg
- shifter-wordpress ... /wp-content/uploads/2016/08/20090604-fig.jpg
- shifter-built ... https://cdn-img.donuts.ne.jp/wp-content/uploads/2016/08/20090604-fig.jpg

DONUTS GAMES 採用特設ページ

▼ 正しい表示

DONUTS GAMES 採用特設ページ

その他 -- ルート相対じゃなくて、URLを設定した場合 - テーマ

- local ... /wp-content/themes/donuts-corporate-theme/static/img/thumbnail_temp.jpg
- shifter-wordpress ... /wp-content/themes/donuts-corporate-theme/static/img/thumbnail_temp.jpg
- shifter-built ... https://cdn-img.donuts.ne.jp/wp-content/themes/donuts-corporate-theme/static/img/thumbnail_temp.jpg

DONUTS GAMES 採用特設ページ

▼ 正しい表示

DONUTS GAMES 採用特設ページ

その他 -- 画像が存在しないルート相対パスの場合 - uploads

- local ... /wp-content/uploads/2016/08/img_404.png
- shifter-wordpress ... /wp-content/uploads/2016/08/img_404.png
- shifter-built ... /wp-content/uploads/2016/08/img_404.png

存在しない画像

▼ 正しい表示(表示できない)

存在しない画像

その他 -- 画像が存在しないルート相対パスの場合 - テーマ

- local ... /wp-content/themes/donuts-corporate-theme/static/img/img_404.png
- shifter-wordpress ... /wp-content/themes/donuts-corporate-theme/static/img/img_404.png
- shifter-built ... /wp-content/themes/donuts-corporate-theme/static/img/img_404.png

存在しない画像

▼ 正しい表示(表示できない)

存在しない画像