0Pricing
Android Academy · レッスン

Coilによる画像読み込み

Coilでネットワーク画像を効率的に読み込み、キャッシュします。変換(CircleCrop、RoundedCorners)を適用し、プレースホルダーとエラーを処理します。

「Coilによる画像読み込み」はCoddyKit上の無料Android Academyレッスンです。 これはレッスン2/6です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはAndroid Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Android Academyコースには全6レッスンが含まれています。

なぜ画像ライブラリを使うのか

インターネットから画像を読み込む処理は、意外に複雑です。

  • バックグラウンドスレッドでダウンロードする
  • ディスクとメモリにキャッシュする
  • 効率的にデコードする(OOMクラッシュを回避する)
  • 読み込み中にプレースホルダーを表示する
  • エラー(リンク切れやネットワーク未接続)を処理する

Coilを使えば、これらすべてを1行のコードで処理できます。

Coilとは

Coil(Coroutine Image Loader)は、KotlinとCoroutines向けに作られた最新のAndroid画像読み込みライブラリです。

  • 軽量 — GlideやPicassoより小規模です
  • Kotlinを優先して設計され、コルーチンをサポートします
  • ライフサイクルを認識し、読み込みを自動的にキャンセルします
  • GIF、SVG、動画フレームをサポートします

Coilを追加する

app/build.gradleに依存関係を追加します。

// app/build.gradle
dependencies {
    implementation 'io.coil-kt:coil:2.6.0'
}

// Also make sure internet permission is in AndroidManifest.xml:
// <uses-permission android:name="android.permission.INTERNET" />

基本的な画像読み込み

1行でImageViewに画像を読み込みます。

import coil.load

// In your Activity or Adapter:
binding.ivAvatar.load("https://picsum.photos/200")

// With a placeholder and error image:
binding.ivAvatar.load("https://picsum.photos/200") {
    placeholder(R.drawable.ic_placeholder)
    error(R.drawable.ic_error)
    crossfade(true)  // smooth fade-in animation
}

RecyclerViewで画像を読み込む

CoilはViewHolderが再利用されるときに保留中の読み込みを自動的にキャンセルします。これにより、別の行の画像が誤って表示されるのを防げます。

override fun onBindViewHolder(holder: ViewHolder, position: Int) {
    val post = getItem(position)

    holder.tvTitle.text = post.title

    holder.ivCover.load(post.imageUrl) {
        placeholder(R.drawable.ic_image_placeholder)
        error(R.drawable.ic_broken_image)
        crossfade(300)  // 300ms fade-in
        size(200, 200)  // resize to 200×200 pixels
    }
}

変換

読み込んだ画像に変換を適用します。

  • CircleCropTransformation() — 画像を円形にします(アバターに最適です)
  • RoundedCornersTransformation(radius) — 角を丸くします
  • BlurTransformation(context, radius) — ぼかし効果を適用します

変換の例

円形のユーザーアバターを表示します。

import coil.load
import coil.transform.CircleCropTransformation
import coil.transform.RoundedCornersTransformation

// Circular avatar
binding.ivAvatar.load(user.profileImageUrl) {
    transformations(CircleCropTransformation())
    placeholder(R.drawable.ic_default_avatar)
    error(R.drawable.ic_default_avatar)
}

// Rounded corners on a card image
binding.ivCover.load(post.coverUrl) {
    transformations(RoundedCornersTransformation(16f))
    crossfade(true)
}

キャッシュの動作

Coilは画像を2つのレベルで自動的にキャッシュします。

  • メモリキャッシュ — 最も高速で、アプリが終了すると消去されます
  • ディスクキャッシュ — アプリを起動し直しても保持されます。デフォルトは250 MBです

同じURLを2回読み込む場合、2回目の読み込みはキャッシュから行われるため、ネットワークリクエストは発生しません。

さまざまなソースからの読み込み

CoilはURLだけでなく、さまざまなソースから画像を読み込めます。

// From a URL (most common)
imageView.load("https://example.com/image.jpg")

// From a URI (e.g., gallery image)
imageView.load(uri)

// From a drawable resource
imageView.load(R.drawable.my_image)

// From a File
imageView.load(File("/sdcard/photo.jpg"))

// From a bitmap
imageView.load(bitmap)

理解度チェック

ユーザープロフィール写真を円形で表示するには、どのCoil変換を使用しますか。

まとめ:Coilで画像を読み込む

これで、ネットワーク画像を効率的に表示できるようになりました。

  • Gradleの依存関係を1つ追加してCoilを導入する
  • imageView.load(url) { } — 1行で読み込む
  • プレースホルダー画像とエラー時の代替画像
  • 変換:CircleCrop、RoundedCorners、Blur
  • メモリとディスクのレベルで自動的にキャッシュする
  • URL、URI、File、drawable、bitmapに対応

次は、エラーを適切に処理し、ユーザーに分かりやすいフィードバックを提供します。

よくある質問

「Coilによる画像読み込み」レッスンは無料ですか?

はい。「Coilによる画像読み込み」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し(組み込みコードエディタと24時間対応のAIチューター)、Android Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Android Academyコースには全6レッスンが含まれています。

「Coilによる画像読み込み」で何を学びますか?

Coilでネットワーク画像を効率的に読み込み、キャッシュします。変換(CircleCrop、RoundedCorners)を適用し、プレースホルダーとエラーを処理します。 ブラウザで直接実行するハンズオンコードでAndroid Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Android Academyを始めるのに経験は必要ですか?

事前経験は必要ありません。CoddyKitのAndroid Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン2/6です。

「Coilによる画像読み込み」レッスンにはどのくらい時間がかかりますか?

ほとんどのCoddyKitレッスンは約5~10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このAndroid Academyレッスンでコードを書いて実行できますか?

はい。すべてのAndroid Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

  1. RetrofitとREST API
  2. Coilによる画像読み込み
  3. エラー処理とUX
  4. プッシュ通知
  5. WorkManagerとバックグラウンドタスク
  6. Play Storeへの公開
← Android Academyに戻る