# Qiita API × KotlinでAndroidアプリに記事一覧表示を組み込む

## 目次
1. はじめに
2. 必要な準備
   1. Qiita APIキーの取得
   2. プロジェクトのセットアップ
3. APIリクエストの実装
   1. Retrofitの導入
   2. Qiita APIインターフェースの作成
4. データの取得と表示
   1. ViewModelとLiveDataの活用
   2. RecyclerViewのセットアップ
   3. UIの構成
5. エラーハンドリング
6. まとめ

## 1. はじめに

Qiitaは、プログラマーにとって有益な情報が集まる技術情報の共有コミュニティです。APIを利用することで、Qiita上の情報をアプリケーションに組み込むことが可能です。本記事では、Kotlinを用いてAndroidアプリにQiitaの記事一覧を表示する方法を解説します。使用する技術は、Retrofit、Kotlin Co-routines、LiveData、RecyclerViewです。

## 2. 必要な準備

### 2-1. Qiita APIキーの取得

Qiita APIを利用するためには、Qiitaのアカウントが必要です。アカウント作成後、[QiitaのDevelopersページ](https://qiita.com/settings/applications)にアクセスし、"Personal Access Token"を生成します。

### 2-2. プロジェクトのセットアップ

まず、Android Studioで新しいプロジェクトを作成します。プロジェクトを作成したら、次のライブラリを`build.gradle`に追加し、必要な同期を行います。

![img](/mosaic-code.jpg)

## 3. APIリクエストの実装

### 3-1. Retrofitの導入

Retrofitを使って、HTTPリクエストを行います。次のようにRetrofitインスタンスを作成して、QiitaのベースURLを設定します。

![img](/mosaic-code.jpg)

### 3-2. Qiita APIインターフェースの作成

次に、Qiita APIのインターフェースを作成します。

![img](/mosaic-code.jpg)

## 4. データの取得と表示

### 4-1. ViewModelとLiveDataの活用

APIから取得したデータを管理するために、ViewModelとLiveDataを使用します。

![img](/mosaic-code.jpg)

### 4-2. RecyclerViewのセットアップ

次に、RecyclerViewを使って記事一覧を表示します。

![img](/mosaic-code.jpg)

### 4-3. UIの構成

レイアウトファイルでRecyclerViewを配置し、Adapterをセットします。

![img](/mosaic-code.jpg)

ActivityでViewModelを初期化し、Observerをセットします。

![img](/mosaic-code.jpg)

## 5. エラーハンドリング

APIの呼び出し失敗時への対応も行いましょう。エラーメッセージをユーザーに表示したり、リトライ機能を追加すると良いです。例えば、`Toast`を用いてエラーメッセージを簡単に表示できます。

## 6. まとめ

以上で、Qiita APIを活用しAndroidアプリに記事一覧を表示する方法を解説しました。このプロジェクトを基に、必要な機能を追加していくことで、より充実したアプリ開発に繋げていけます。今後は、詳細画面の作成や検索機能の導入なども試してみてください。 [cv:issue_marketplace_engineer]

# Qiita API × KotlinでAndroidアプリに記事一覧表示を組み込む

## 目次
1. はじめに
2. 必要な準備
   1. Qiita APIキーの取得
   2. プロジェクトのセットアップ
3. APIリクエストの実装
   1. Retrofitの導入
   2. Qiita APIインターフェースの作成
4. データの取得と表示
   1. ViewModelとLiveDataの活用
   2. RecyclerViewのセットアップ
   3. UIの構成
5. エラーハンドリング
6. まとめ

## 1. はじめに

Qiitaは、プログラマーにとって有益な情報が集まる技術情報の共有コミュニティです。APIを利用することで、Qiita上の情報をアプリケーションに組み込むことが可能です。本記事では、Kotlinを用いてAndroidアプリにQiitaの記事一覧を表示する方法を解説します。使用する技術は、Retrofit、Kotlin Co-routines、LiveData、RecyclerViewです。

## 2. 必要な準備

### 2-1. Qiita APIキーの取得

Qiita APIを利用するためには、Qiitaのアカウントが必要です。アカウント作成後、[QiitaのDevelopersページ](https://qiita.com/settings/applications)にアクセスし、"Personal Access Token"を生成します。

### 2-2. プロジェクトのセットアップ

まず、Android Studioで新しいプロジェクトを作成します。プロジェクトを作成したら、次のライブラリを`build.gradle`に追加し、必要な同期を行います。

```kotlin
dependencies {
    implementation "androidx.lifecycle:lifecycle-viewmodel-ktx:2.4.1"
    implementation "androidx.lifecycle:lifecycle-livedata-ktx:2.4.1"
    implementation "androidx.recyclerview:recyclerview:1.2.1"
    implementation "com.squareup.retrofit2:retrofit:2.9.0"
    implementation "com.squareup.retrofit2:converter-gson:2.9.0"
    implementation "org.jetbrains.kotlinx:kotlinx-coroutines-core:1.6.1"
    implementation "org.jetbrains.kotlinx:kotlinx-coroutines-android:1.6.1"
}
```

## 3. APIリクエストの実装

### 3-1. Retrofitの導入

Retrofitを使って、HTTPリクエストを行います。次のようにRetrofitインスタンスを作成して、QiitaのベースURLを設定します。

```kotlin
import retrofit2.Retrofit
import retrofit2.converter.gson.GsonConverterFactory

object ApiClient {
    private const val BASE_URL = "https://qiita.com/api/v2/"

    val retrofit: Retrofit = Retrofit.Builder()
        .baseUrl(BASE_URL)
        .addConverterFactory(GsonConverterFactory.create())
        .build()
}
```

### 3-2. Qiita APIインターフェースの作成

次に、Qiita APIのインターフェースを作成します。

```kotlin
import retrofit2.http.GET
import retrofit2.http.Header
import retrofit2.http.Query
import retrofit2.Call

interface QiitaApiService {
    @GET("items")
    fun fetchArticles(
        @Header("Authorization") token: String,
        @Query("page") page: Int,
        @Query("per_page") perPage: Int
    ): Call<List<Article>>
}
```

## 4. データの取得と表示

### 4-1. ViewModelとLiveDataの活用

APIから取得したデータを管理するために、ViewModelとLiveDataを使用します。

```kotlin
import androidx.lifecycle.LiveData
import androidx.lifecycle.MutableLiveData
import androidx.lifecycle.ViewModel
import retrofit2.Call
import retrofit2.Callback
import retrofit2.Response

class ArticleViewModel : ViewModel() {
    private val _articles = MutableLiveData<List<Article>>()
    val articles: LiveData<List<Article>> get() = _articles

    fun loadArticles() {
        val service = ApiClient.retrofit.create(QiitaApiService::class.java)
        val call = service.fetchArticles("Bearer YOUR_API_TOKEN", 1, 20)
        call.enqueue(object : Callback<List<Article>> {
            override fun onResponse(call: Call<List<Article>>, response: Response<List<Article>>) {
                if (response.isSuccessful) {
                    _articles.value = response.body()
                }
            }

            override fun onFailure(call: Call<List<Article>>, t: Throwable) {
                // エラーハンドリング
            }
        })
    }
}
```

### 4-2. RecyclerViewのセットアップ

次に、RecyclerViewを使って記事一覧を表示します。

```kotlin
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import androidx.recyclerview.widget.RecyclerView
import kotlinx.android.synthetic.main.article_list_item.view.*

class ArticleAdapter(private val articles: List<Article>) : RecyclerView.Adapter<ArticleAdapter.ArticleViewHolder>() {

    class ArticleViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView)

    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ArticleViewHolder {
        val view = LayoutInflater.from(parent.context).inflate(R.layout.article_list_item, parent, false)
        return ArticleViewHolder(view)
    }

    override fun onBindViewHolder(holder: ArticleViewHolder, position: Int) {
        val article = articles[position]
        holder.itemView.title.text = article.title
        holder.itemView.userName.text = article.user.name
    }

    override fun getItemCount(): Int = articles.size
}
```

### 4-3. UIの構成

レイアウトファイルでRecyclerViewを配置し、Adapterをセットします。

```xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/recyclerView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

</RelativeLayout>
```

ActivityでViewModelを初期化し、Observerをセットします。

```kotlin
import android.os.Bundle
import androidx.activity.viewModels
import androidx.appcompat.app.AppCompatActivity
import androidx.lifecycle.Observer
import androidx.recyclerview.widget.LinearLayoutManager
import kotlinx.android.synthetic.main.activity_main.*

class MainActivity : AppCompatActivity() {
    private val viewModel: ArticleViewModel by viewModels()

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        recyclerView.layoutManager = LinearLayoutManager(this)

        viewModel.articles.observe(this, Observer { articles ->
            recyclerView.adapter = ArticleAdapter(articles)
        })

        viewModel.loadArticles()
    }
}
```

## 5. エラーハンドリング

APIの呼び出し失敗時への対応も行いましょう。エラーメッセージをユーザーに表示したり、リトライ機能を追加すると良いです。例えば、`Toast`を用いてエラーメッセージを簡単に表示できます。

## 6. まとめ

以上で、Qiita APIを活用しAndroidアプリに記事一覧を表示する方法を解説しました。このプロジェクトを基に、必要な機能を追加していくことで、より充実したアプリ開発に繋げていけます。今後は、詳細画面の作成や検索機能の導入なども試してみてください。 [![image](https://firebasestorage.googleapis.com/v0/b/issue-pro-42602.appspot.com/o/topics%2F17fa658b-53c7-4ca0-a28b-e588ed1bd371?alt=media&token=2c00afff-85ff-4428-8d15-696ab676dcb0)](https://i-ssue.com/lp/check_salary)

Qiita API × KotlinでAndroidアプリに記事一覧表示を組み込む

目次

続きを読むには単価診断を受けてください（30秒）