公開カレンダー予定画像のブラー背景画像の作り方

こんにちは。TimeTreeのAndroidエンジニアの笠松です。

弊社はビジネスネーム制を採用しており、社内ではRingと呼ばれています。

2024年5月1日からTimeTreeに入社しまして、8月1日から本採用となりました。

この記事では担当させていただいた公開カレンダーの予定画像で使用されているブラー背景画像の作り方をご紹介します。

この記事以降も、開発の過程で学んだ技術を定期的に共有していきます。同じ技術的な課題を抱えている読者や、TimeTreeへの入社を検討してくださっている方々の参考になれば幸いです。

なぜブラー背景画像を作ったか

公開カレンダーはイベント情報を手軽に届けられるカレンダー形式のオフィシャルサイトです。

このイベント情報の詳細画面で画像を表示するのですが、画像のアスペクト比が固定のため、画像が見切れてしまうことがありました。見切れなくアスペクト比を維持して画像を表示し、その画像を目立たせるため、背景にはブラー画像を配置する変更を行いました。

本対応により、以下のような表示になります。

ブラー背景画像の作り方

ブラー背景画像の作り方をご紹介します。厄介なことにAndroidのOSバージョン12以上と未満でブラーの掛け方を変える必要があります。これはAndroidのOSバージョン12以上で RenderScript が非推奨になったためです。

Android OSバージョン12以上の場合、Jetpack ComposeのModifierのblurを使用しました。blurのradiusでぼやけ具合を調整できます。

Modifierのblurによる実装イメージ

Image(
    bitmap = bitmap.asImageBitmap(),
    modifier = Modifier
        .fillMaxSize()
        .blur(radius = 24.dp),
    contentScale = ContentScale.FillBounds,
)

Android OSバージョン11以下の場合、blur をかけるためにGlideを使用しました。GlideはAndroid 向けの画像読み込みライブラリです。transform関数でBlurTransformationを指定することでGlideで読み込んだ画像にブラーをかけることができます。BlurTransformationのradiusとsample引数でぼやけ具合を調整できます。

Glideによる実装イメージ

private fun convertBlurBitmap(context: Context, it: Bitmap) = Glide.with(context)
    .load(it)
    .transform(BlurTransformation(radius = 24, sample = 8))
    .submit()
    .get()
    .toBitmap()

TimeTreeでは通常Composable関数で通信を伴う画像表示を行う場合、Android 用の画像読み込みライブラリであるCoil を使用しています。しかし、Coilの2系からblurが使用できないため、このケースではGlideを使用しています。

最後に、本体画像を目立たせるため、以下のようにColorFilterを使って少し画像を暗くします。これはRGBそれぞれを0.7倍する処理です。

ColorFilterを使用した明るさ調整

Image(
		...
    colorFilter = brightnessColorFilter(0.7f)
)

@Composable
private fun brightnessColorFilter(brightnessRatio: Float): ColorFilter {
    val colorMatrix = ColorMatrix().apply {
        setToScale(brightnessRatio, brightnessRatio, brightnessRatio, 1f)
    }
    return ColorFilter.colorMatrix(colorMatrix)
}

TimeTreeの採用情報🌟

お読みいただいて、ありがとうございました。

最後に、少しだけ会社の紹介を書かせていただきます。TimeTreeではメンター制度があります。組織に馴染むために、同じチームとチーム外の方２名がサポートしてくださる制度です。詳しくはこちらをご覧ください。

僕の場合は、Androidチームの方と公開カレンダーチームの方の2名がサポートくださいました。最初は毎日、徐々に数を減らしていく形で1on2をしてくださいました。1on2では雑談や社内やAndroid開発でのわからないことを教えてくださり、とても助かりました。1on2以外でも、困ったときにも助けていただきました。初めての転職で、不安だったのですが、とても手厚いサポートいただき、困ることはありませんでした！

そんなTimeTreeでは、ミッションに向かって一緒に挑戦してくれる仲間を探しています。TimeTreeで働くことに興味がある方はぜひ、以下の採用情報や会社情報をご覧ください！