blurhashでユーザ体験をちょっとよくする

初めに

blurhashとは

https://gyazo.com/08aee46bc5708864d91252b6f8a35cbd

blurhashとは，上の画像のように元の画像から短いhashを生成し，ぼかし画像を生成するライブラリです．

画像が多いweb/mobile画面に最初訪れたとき，画像が全てuploadが完了せず，その間真っ白なことがよくあるかと思います．

blurhashを利用することで，画像が読み込まれるまでぼかしの画像を表示することでユーザ体験をよくすることができます．

https://gyazo.com/9b22777a31ab0adc83240131a87907ad

こうみると，blurhashありなしだと印象が変わりますね．

golangでの実装

今回は，サーバサイド(golang)での実装に焦点を当て話していきます．

まずユースケースとして，http通信で画像アップロードのAPIを想定しています．

res.Bodyにある画像データをbufにcopyします．

code:golang

buf := &bytes.Buffer{}

_, err := io.Copy(buf, res.Body)

if err != nil {

return err

}

blurhash,err := NewBlurhash(buf)

そして，blurhash生成の実装です，

code:golang

func NewBlurhash(r io.Reader) (string, error) {

const x, y = 4, 3 // blur component

var buf bytes.Buffer

tee := io.TeeReader(r, &buf)

img, _, err := image.Decode(tee)

if err != nil {

return "", err

}

return blurhash.Encode(x, y, img)

}

x, yのコンポーネントは，1~9まで指定でき数字が大きいほど，ぼかしが細かくなりますがhashの長さも大きくなります．

4,3が最適のようです．

終わりに

今回は，blurhashのライブラリについて紹介しました．

そこまで，工数のかからない実装でよりよいUXが提供できるのでぜひ使ってみてください🙌

参考文献