読者です 読者をやめる 読者になる 読者になる

Anonymous Function

tmaesaka の lifelog | カルチャー、ときどきテクノロジー

ブログの画像を Fastly で配信するようにした

少し前からサムネイルを除く全ての画像を Fastly で cache しつつ配信しています。

felicity-fastly

以前から自社のプロダクトを食べなくてはと考えていました。加えて、最近は Historical Stats の仕事をしているので、手軽で身近な検証データが欲しいと思っていました。以上の理由から、本ブログの画像を Fastly で配信しようと決断しました。

Origin は Google Cloud Storage

画像の大本の保存場所である Origin には Google Cloud Storage (GCS) を選びました。セットアップは Fastly の公式ドキュメントを参考にしました。ひとつ追加で行ったことがあって、それは Fastly の Synthetic response という、CDN 上でカスタムなレスポンスを生成して、任意の条件で Origin からのレスポンスを差し替えるという技術の利用です。理由は GCS の 403 レスポンス (XML) が格好悪いから。

Synthetic response を使った Origin からのエラー処理の設定は簡単で、自分で定義した条件と組み合わせて使います。今回は Origin から 403 が返ってきたら、用意してある synthetic response に差し替えて user agent に返すという設定を行いました。

CSS と JavaScript でモバイルを少し工夫

どうせなら、モバイルウェブ版のヘッダー画像も Fastly から配信したいと考えました。問題は、Hatena Blog はヘッダー画像を URL で指定できないことです。救いとしてカスタムな CSS を書くことができるので、下記の簡単な style をヘッダーに当てました。

.header-image {
    background-image: url("http://url/to/cover-image.jpg");
}

指定の画像がレンダリングされることを確認したので、次は Hatena Blog 上で設定していたヘッダー画像を削除して終わり... ではありませんでした。画像を削除することで、ヘッダーの node が含まれない dom が出力されるようになりました。仕方がないので、適当な画像を設定し、その画像の URL を含む style attribute を該当 node から JavaScript で消しました。

document.getElementsByClassName('header-image')[0].removeAttribute("style");

良いデータが収集できてる

サムネイルは引き続き Hatena Blog の自動生成に任せていますが、それ以外の画像は Fastly から配信するようにしました。結果、リアルタイムや Historical Stats の良い検証データを得ることができ、もともとの目的を果たせました。とても満足です。