Remix+CloudflareでWebサイトを作る 10（Cloudflare Images・Image Resizing・Polish・Mirage・Cloudflare Turnstile）
saneatsu【2024-02-26】全7回のCloudflare Imageの記事を見ていく
前のScrapsでリンクを張っている記事を読みながら学ぶ。
その1：Cloudflare Imagesの基礎
CloudflareではCDNやその他サービスもそうですが、下り通信は課金対象とはならないのが特徴です。これにより画像配信を多用するサイトは大きなコスト削減が期待できます。
淡々とHowを書くだけではなくこういう情報も書いてくれるのありがたい。
Windows環境で実行されるcurlはcurlという名の別プログラムです。（私も常にWindowsで作業しているので恐れることはありません！）
優しい。
crulで試してみる
その2：Imagesの画像編集オプション
Variantsというものがあり、画像表示時のルールを設定することができる。
画像に作成したルール名（=Variants名）を含めることで適用される。
ルールの種類には画像のトリミングや、ぼかしの追加などがある。
Cloudflare ImageにはImages（その2）、Image Resizing（その3〜5）、Polish（その6）、Mirage（その7）というサービスがあるが、VariantsはImagesの機能。
URLパラメーターによって画像のリサイズを行うのはImge Resizingに該当するとのこと。
Cloudflare Imagesでは画像をキャッシュして配信していない。
レスポンスヘッダーに含まれている、ブラウザのTTLはデフォルトで2日間。
最短は1時間、最長は1年。
saneatsu
追記：このサイトのまとめとてもわかりやすかった
saneatsuその3：Image Resizing
エッジ プラットフォームで画像を変換するサービスです。画像のサイズ変更、品質の調整、WebP または AVIF 形式への変換を行うことができ帯域を削減し結果としてサイトの読み込みを高速化させます。すべての派生画像をエッジで自動的にキャッシュするため、元の画像を 1 つだけ保存することとなるため、ストレージ料金の削減も可能です。
こういうのを外部サービスを連携させるではなくCloudflare内で完結できるの嬉しい。
といってもどうやらBusiness以上（200ドル/月）...。
そもそもこのサービスにはあると嬉しいけど、Cloudflare ImagesのVariantsでScale downするだけで充分な気もする。
WebPやAVIFについて
ChatGPTに聞いてみた。
Image ResizingとVariantsとの違いは？
以下のような文言が。
ImagesはVariantというあらかじめサイズ変更やぼかしなど画像変換方式を指定して使うのに対して、Image Resizingはより動的にクライアント環境に合わせて自動で画像が最適化され配信される
resizeがあらかじめサイズ変更が設定済のバリアントと呼ばれるもので変換は動的に行われますが、原則固定です。一方Image Resizingはwidth,height,qualityの値を変更することでより動的に変換を指定することが可能です。
また、次の記事 で書いていたが、ストレージにはオリジナル画像のみが保存され、リサイズされた画像は自動でキャッシュされるため、画像は1つ用意しておけば良くなりストレージが節約できる。
ほうほう。
商品一覧の画像サムネのサイズ、商品詳細ページで出すサイズとかが固定で決まってたらVariantで良いってこと？
端末ごとになんか計算して動的にリサイズしたい場合とかがImage Resizing？
Image ResizingはWebPとかに変換したりできるからより適切な配信ができそうな感じがする（浅い）。
ダッシュボードでどれくらい帯域が節約されたか見れるの嬉しい。
導入事例
Image Resizingを調べると以下の記事も出てきた。
JPEG形式の1024x576を、WebP形式の400x255にすることで容量が130→8.7kBに下がったとのこと。
SSIM
画像の品質を評価できる指標らしい。これ知らんので聞いてみる。
Lighthouse
Lighthouse（ライトハウス）とは？Google公式のSEOチェックツールを解説 | microCMSブログ
Googleが無料で提供しているWebサイトを分析・診断するための、Google Chrome拡張機能のこと。
5つの基準でチェックする。
-
- Performance
- ページ読み込み速度や画像表示速度、ユーザーの操作に対する反応の速さなどのWebサイトのパフォーマンス
-
- Accessibility
- Webサイトへアクセスする全てのユーザー、視覚に障がいを抱える人や検索エンジンのクローラーなど、どんな人に対しても同等に使用できる見やすい文字の色やコントラストになっているか
- ボタンに名称が設定されているか
-
- Best Practices
- 信頼できる安全なサイトか、ブラウザのセキュリティやパフォーマンスを低下させる要素の評価
- HTTPSを使用しているか
- 画像のアスペクト比が適切あるか
- ブラウザのエラーコードがあるかなどの、
-
- SEO
- Webページが検索エンジンのランキング結果に最適化されているかの評価
- 正常なHTTPステータスコードであるか
- メタディスクリプション（meta description）があるか
- robots.txtは有効か
-
- Progressive Web App
- スマートフォン上でアプリのように動作させるモバイル向けのWebサイトで、ページの読み込み高速化できているか、PWAに最適化されているか
PSI
Lgithhouseの類似サービスとしてPSI（Page Speed Insights）という指標もあるがこれが見るのは表示速度が主。
速度の観点では測定方法が違うらしい（はじめてのLighthouse。どんな指標があるのか調べてみた。 #Google - Qiita）
- Lighthouse
- クライアント(=例: jenkinsサーバ)がアクセスした実績ベース
- PSI
- 世界中のChromeユーザがアクセスした実績ベース
saneatsuその4：Image Resizingのセキュリティの問題に対応する方法
Image Resizing最高だなと思っていたが問題もあるらしい。
クエリパラメータで動的に変えられるのでユーザーが勝手に画像を変えたりもできてしまう。
そういう問題の対処法もあらかじめCloudflareが用意してくれているよ、というお話。
その5：Image Resizingのリサイズ以外の使い方いろいろ
従来このような画像の作成はあらかじめバッチ処理に実行しておき、オリジナル画像に加えて処理後画像もストレージに保存する必要があるため、手間とコストのかかる作業でした
へぇ。やり方とか考えたことなかった。
そういえば昔Tinder（かなんかのマッチングアプリ）のWeb版では、デベロッパーツールでCSSをいじると課金してなくてもぼかしを外して見ることができる的なのがあったけど、こういうのを防げるな〜。
（ところでこのおじさん誰だろう...？）
saneatsuその6：Polish
Polishは画像のピクセルサイズ変更ではなく、画像の圧縮を行います。
Image Resizingではqualityパラメータにより画像の品質を下げることで画像サイズを縮小し転送量を減らす機能が提供されていますが、Polishは対して画像の圧縮を行います。非可逆圧縮が行われるケースがあることに注意してください
- メリット
- Image Resizingと違って画像の品質を落とさない
- 注意点
- Image Resizingとの併用は不可。やるならImagesと併用する
- WebPをサポートしていない
Polishにせよ、その他サービスにせよ動的に変換された画像はキャッシュされるため、そのキャッシュをテスト時は削除する（CDN用語でパージと言います。ロボットが装甲をパージする、と語源は同じです）必要があります
こういう補足ありがたいです🙏
その7：Mirage
MirageはJavascriptを活用し、画像読み込みリクエストを行ったクライアント環境を把握することで、レスポンスで出力する画像を動的にリサイズします。その際ImagesやImage Resizingと異なり変更後のサイズ指定は不要です
Pro（20ドル/月）以上で利用可能。
Cloudflare Imageでもう大抵のことできちゃうんじゃないかくらい機能てんこ盛りでした。
saneatsu【2024-02-26】ついでに色々調べてみる
Direct creator upload
アップロード用のURLを発行し、そのURLに対してファイルをアップロードすることができるという仕組み
- APIキーやトークンがクライアントに露出しない
- メディアファイルがサーバーを仲介しないので帯域幅の節約になる。
Accept direct creator uploads · Cloudflare Image Optimization docs
期限+署名付きURLの発行
期限と署名付きURLの発行がCloudflare Imagesではできるっぽい。
使うことはなさそうなので一旦あるんだ〜くらいで公式ドキュメントを眺めておく。
Serve private images · Cloudflare Image Optimization docs
Cloudflareは送信料金が無料というのが特徴です。 エグレス料金というものですね。 つまり、どれだけのサイズをダウンロードしても、料金がかからないということです。
へぇ。そんな言葉があるのか。
エグレスは直訳だと「出口」「脱出」で、通信回線の方向性を表す概念のことっぽい。つまり外側に向かう通信のことを指すらしい。
saneatsu【2024-02-26】クラスメソッドの記事いろいろあるなぁ
クラスメソッドの# Cloudflareのタグがついている記事一覧色々見てみる。
サービス概要なども話しているのか〜と眺めていたらPolishとMirageの例が載っていた。
まさに今学んだことだ。
すごい。
saneatsu【2024-02-26】Cloudflare Turnstile
@kameoncloud さんの記事をなんとなく漁っていたらあった記事
Cloudflare Turnstileとは
GoogleのCAPTCHAの代わりになるものだそうで、確かに何回か見たことがある。
要は「人類はCAPTCHAに時間取られすぎだからより良いBot対策システム作ったったぜ」ということですか。
無料なのすごいな〜。
ロゴが表示されるくらいなら嬉しい。
設定が終わるとClient側とServer側のドキュメントのリンクへと導いてくれる。
優先度高くないけど後で実装しよう。
その他
そういや前にCAPTCHAを突破するスクリプトを書いてみようとしていたことがある。
で、既にそういうものはあるんじゃないかと思って調べたものの中で面白いなぁと思ったサービス（違法かもしれない）があった。
確か「そのサービスにお金を払うことで、CAPTCHAが表示された場合にサービスに登録している世界中の人たちに『このCAPTCHAを突破してください』的なメッセージが送信されて一番早く突破した人に数円が入る」というものだったと記憶している。