前人未踏の領域へ アプリ開発編

Android, iOSアプリ開発に関する調査メモ置き場。ほとんどAndroid。はてなダイアリーから移行したため古い記事にはアプリ以外も含まれます。

PicassoでWebP画像を表示する

課題

PicassoでWebP画像を表示したいが、WebPを表示するにはAcceptヘッダーにimage/webpが必要となる。どうすればよいか。

対応

OkHttpClientを作成し、Picasso.Builderを使ってdownloaderにセットする
addHeaderの内容はChromeのデフォルト値に合わせてみた。
q値(q=0.9) を付けることで image/webp が優先されるようにしている
ただし実際に効いているかは未検証。

    fun initPicasso(context: Context) {
        val client = OkHttpClient.Builder()
            //NetworkInterceptorを使うとファイルキャッシュが効かなくなる
            .addInterceptor {
                val rb = it.request().newBuilder()
                rb.addHeader("Accept", "image/webp,image/*,*/*;q=0.8")
                it.proceed(rb.build())
            }
        client.cache(createImageCache(context))
        if (BuildConfig.DEBUG) {
            client.addNetworkInterceptor(ApiUtils.stethoInterceptor)
        }
        val builder = Picasso.Builder(context)
            .downloader(OkHttp3Downloader(client.build()))

        if (BuildConfig.DEBUG) {
            builder.loggingEnabled(true)
                .indicatorsEnabled(true)
        }
        Picasso.setSingletonInstance(builder.build())
    }


    /**
     * 画像キャッシュディレクトリ作成
     */
    private fun createImageCache(context: Context): Cache {
        val maxSize: Long = 1024 * 1024 * 200 //200MB
        val dir = context.applicationContext.cacheDir
        val cache = File(dir, "picasso-cache")
        if (!cache.exists()) {
            cache.mkdirs()
        }
        return Cache(cache, maxSize)
    }

参考

developer.mozilla.org

developer.mozilla.org