Kotlin で Jetpack Compose, Retrofit を使って API リクエスト、JSON パース して、グリッド表示するコードをファイル別に表示して

Kotlin で Jetpack Compose と Retrofit を使って API リクエスト、JSON パースして、グリッド表示するためには、以下のようにファイルを分けることができます。

 

1. API リクエストを行うための Retrofit インターフェースを定義するファイル


interface ApiService {

    @GET("/photos")
    suspend fun getPhotos(): List<Photo>
}

 

2. API レスポンスを表すデータクラスを定義するファイル


data class Photo(
    val id: Int,
    val title: String,
    val url: String
)

 

3. API レスポンスをパースして、表示するための画面を定義するファイル


@Composable
fun PhotoGrid() {
    val photos by remember { mutableStateOf<List<Photo>>(emptyList()) }

    LaunchedEffect(Unit) {
        val apiService = Retrofit.Builder()
            .baseUrl("https://jsonplaceholder.typicode.com")
            .addConverterFactory(Json {
                ignoreUnknownKeys = true
            }.asConverterFactory("application/json".toMediaType()))
            .build()
            .create(ApiService::class.java)

        photos = apiService.getPhotos()
    }

    LazyVerticalGrid(cells = GridCells.Adaptive(minSize = 128.dp)) {
        items(photos) { photo ->
            Card(
                modifier = Modifier.padding(4.dp),
                shape = RoundedCornerShape(8.dp),
                elevation = 4.dp
            ) {
                Column(
                    Modifier
                        .fillMaxWidth()
                        .height(128.dp)
                        .padding(8.dp)
                ) {
                    Text(
                        text = photo.title,
                        style = MaterialTheme.typography.subtitle1,
                        maxLines = 2,
                        overflow = TextOverflow.Ellipsis
                    )
                    Spacer(modifier = Modifier.weight(1f))
                    CoilImage(
                        data = photo.url,
                        contentScale = ContentScale.Crop,
                        modifier = Modifier.fillMaxSize()
                    )
                }
            }
        }
    }
}

 

4. 上記の画面を表示するための Activity もしくは Fragment を定義するファイル


class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            PhotoGrid()
        }
    }
}

以上のように、ファイルを分けることで、API リクエストやパース、表示を分離し、コードを見やすく、メンテナンスしやすくすることができます。

 

■ 感想

ただ、一行問いかけただけ。

ChatGPT で、ここまで書けるとは。



Excel / Spreadsheet / Numbers の列の文字列を一括でQRコードで表示する方法

Google Chart API を使ったりプラグインやエクステンションを使ったりする方法もありますが、通信を使わずに完全にローカル処理のみで表示します。

パスワードやシークレットキーなどセキュリティ的に最重要な文字列をQRコードで表示したいこともありますよね。

 

🔑 準備

Pure python QR Code generator を使います。


pip install qrcode

👉 lincolnloop/python-qrcode: Python QR Code image generator hatena-bookmark

今回は、サンプルデータとして以下のCSVファイルを作成しました。


title,url
blog,https://android.benigumo.com
facebook,https://www.facebook.com/androidbenigumocom
twitter,https://twitter.com/maochanz

 

🔑 作成する

CSVファイルをExcel系アプリ(Apple Numbers)で開きます。

Excel / Spreadsheet / Numbers の列の文字列を一括でQRコードで表示する方法

QRコードで表示したい列をコピーします。

Excel / Spreadsheet / Numbers の列の文字列を一括でQRコードで表示する方法

以下をターミナルで実行すると連続で表示されます。


for uri in $(pbpaste); do qr "$uri";echo "$uri\n\n"; done


Excel / Spreadsheet / Numbers の列の文字列を一括でQRコードで表示する方法

以上です。

次回は、これをパスワードマネージャーデータの移行に使います。


【便利】Mac パスワードマネージャー を メニューバーのショートカット や コマンドラインから開く方法

「ショートカット」から作成します。

【便利】Mac パスワードマネージャー を開く ショートカット をメニューバーに追加する方法

念のため macOS のバージョンを見ながら、Safari 経由で、[設定]-[パスワード] を開くように構成していきます。少し見づらいですが。

【便利】Mac パスワードマネージャー を開く ショートカット をメニューバーに追加する方法

出来たらクリックしましょう。

メニューにアイコン表示されますのでクリックするとパスワード設定画面です。

【便利】Mac パスワードマネージャー を開く ショートカット をメニューバーに追加する方法

【便利】Mac パスワードマネージャー を開く ショートカット をメニューバーに追加する方法

できましたか!

簡単ですよね!

 

🔑 メニューバーにショートカット

知ったげに書きましたが、以下に作成済みのものが公開されていますので、Safari だけでなく Chrome からでも簡単に GET して利用できます。

【便利】Mac パスワードマネージャー を開く ショートカット をメニューバーに追加する方法

👉 Passwords hatena-bookmark

作者は、Apple の中の方のようです。

👉 Ricky Mondello(@rmondello)さん / Twitter hatena-bookmark

👉 Halboffiziell: Per Kurzbefehl zu Apples Passwort-Manager › ifun.de hatena-bookmark

メニューバーに入ってない人は以下のようにドラッグで。

👉 Mac メニューバーからショートカットを使ってスクリプトを実行する方法 hatena-bookmark

 

🔑 コマンドラインから開く

また、コマンドラインからは、以下で、パスワード画面を開くことができます。Ventura でどうぞ。


❯ open x-apple.systempreferences:com.apple.Passwords-Settings.extension


❯ open x-apple.systempreferences:com.apple.Passwords

👉 How to open every section of macOS Ventura System Settings - macOS Adventures hatena-bookmark


👉 piarasj.github.io/ventura_settings.md at master · piarasj/piarasj.github.io hatena-bookmark

エイリアスにでもしておきますか?

 

🔑 まとめ

Apple パスワードマネージャー は、iCloud キーチェーンを利用して共有しておけば、複数の Mac や iPhone で同期されますし、2段階認証のTOTPジェネレータの機能もあるので、Apple ユーザーなら最も信頼できる使いやすいパスワードマネージャーです。

【便利】Mac パスワードマネージャー を開く ショートカット をメニューバーに追加する方法