はじめてのAndroidアプリ

## はじめに
この記事は、Kotlinもアプリ開発も学びたての筆者が、[Kotlinの基礎知識](https://t.co/BOSCBUoSyQ)を学びながら、Androidアプリを作るまでの過程をまとめる記事の第1弾になります。

## 対象読者
* Androidエンジニアを目指している方（自分は目指してます！）
* 素人の奮闘記を読みたい方

## Android Studioのダウンロード
Android Studioは、Googleが提供しているAndroidアプリ開発用のIDEです。

### Windows版
システム要件は以下の通りとなっています。
* x86_64 CPU アーキテクチャ、第 2 世代の Intel Core 以降、または Windows Hypervisor をサポートする AMD CPU
* 8 GB 以上の RAM
* 8 GB 以上の空きディスク容量
* 1,280 × 800 以上の画面解像度
[ダウンロード用ページ](https://developer.android.com/studio?hl=ja#get-android-studio)から`Android Studioをダウンロードする`をクリックし、ダウンロードし、インストールまで済ませてしまいましょう。

### Mac版
システム要件は以下の通りとなっています。
* MacOS® 10.14（Mojave）以降
* ARM ベースのチップ、または Hypervisor.Framework をサポートする第 2 世代 Intel Core 以降
* 8 GB 以上の RAM
* 8 GB 以上の空きディスク容量
* 1,280 × 800 以上の画面解像度
[ダウンロード用ページ](https://developer.android.com/studio?hl=ja#get-android-studio)から`Android Studioをダウンロードする`をクリックし、ダウンロードし、インストールまで済ませてしまいましょう。

## はじめてのAndroidアプリ
いよいよ初めてのAndroidアプリを作ってみましょう。
Android Studioを起動し、`New Project`をクリックします。
![スクリーンショット 2024-05-27 152309.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/630401/a25a2c4f-a5f6-204b-0b6f-c55f86d2bde3.png)

次の画面では`Empty Activity`をクリックします。
![スクリーンショット 2024-05-27 153106.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/630401/ec0e1be4-bc37-f7af-a50f-86fb3ff41a64.png)

次の画面でNameに`hellomyapp`と入力します。
この名前がAndroidアプリのプロジェクト名になり、同名のディレクトリ配下にソースが保存されるようになります。
また、`Minimum SDK`は、このアプリがサポートする最低限のAndroidバージョンを選択します。
今回は`API 24`を選択しておきます。

### 初回実行
新規プロジェクトを構築後は、自動的にビルドが走ります。
終わったら実行ボタンをクリックして、初期構築状態のアプリを起動してみましょう。
すると、以下のようにエミュレータにテキストが表示されます。

![スクリーンショット 2024-05-30 055416.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/630401/f73e760c-0276-ce06-0413-6e129d2e8f92.png)
ここから、初めてのアプリ作成をしていきます。

## Jetpack Compose
`Jetpack Compose`は、AndroidアプリのUIを作る機能であり、`@Composable`アノテーションが付いている関数を使用して、アプリのUIを構築します。
例えば以下のように書くことで、画面にテキストが書かれます。

```Kotlin:compose.kt
// String型のnameを受け取って画面にレンダリングする
@Composable
fun Greeting(name: String) {
    Text(text = "Hello $name!")
}
```

## Previewアノテーション
初期構築後の`MainActivity.kt`を参照すると、`GreetingPreview`という関数があります。
```Kotlin:MainActivity.kt
@Preview(showBackground = true)
@Composable
fun GreetingPreview() {
    HellomyappTheme {
        Greeting("Android")
    }
```
この関数には`@Preview`というアノテーションが付いていて、Android Studioをデザインペインを使って手軽にUIをプレビューすることができます。
![スクリーンショット 2024-06-01 151916.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/630401/f92d1700-e3d6-e68b-10ac-1582961690eb.png)

それであれば、`Greeting`自体に`@Preview`を付ければ良いのではと思いますが、UIを担う関数とプレビューを担う関数で役割が明確化されているほうが、コードの見通しが良くなります。

そのために`GreetingPreview`関数をプレビュー用として用意しておきます。

## 表示されるテキストを変えてみる
初期構築のみだと少し物足りないので、表示されているテキストを変えてみます。
そのために、以下の2つの関数を加えてみます。

```Kotlin:MainActivity.kt
@Composable
fun GreetingText(message: String, using: String, modifier: Modifier = Modifier) {
    Column(
        verticalArrangement = Arrangement.Center,
        modifier = modifier.padding(8.dp)
    ) {
        Text(
            text = message,
            fontSize = 32.sp,
            textAlign = TextAlign.Center
        )
        Text(
            text = using,
            fontSize = 28.sp,
            modifier = Modifier.align(alignment = Alignment.End)
        )
    }
}

@Preview(showBackground = true)
@Composable
fun GreetingTextPreview() {
    HellomyappTheme {
        GreetingText(message = "android app development", using = "using Kotlin")
    }
}
```
プレビュー
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/630401/c8cb1ae2-a804-3fc1-fc57-4ef8752beaa2.png)

### GreetingText関数
まず、それぞれのテキストのフォントサイズを`sp`を使って変えています。
`sp`を使用することで、ユーザーがデバイス設定でフォントサイズを変更しても、適切なサイズで表示されるように調整されます。

1行目のテキストに対しては、`textAlign`パラメータに`TextAlign.Center`を設定することで、中央揃えにしています。

2行目のテキストに対しては、UIの外観などを変更するための`modifier`パラメータに`Modifier.align(alignment = Alignment.End)`を設定しています。
こうすることで、2行目の`Text`コンポーネントの親コンテナである`Column`に対して、右揃えするようになります。

そして、`Column`で2つの`Text`を縦に並べています。
更に`verticalArrangement`というパラメータに`Arrangement.Center`を設定することで、縦の中央に配置しています。

エミュレータでの表示
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/630401/fe896b00-1e28-0ada-ea0d-4a1ebb942d0d.png)


## 次回予定
今回は初回ということもあり、表示されているテキストを単純に変えただけでした。
第2弾の記事では、[このアプリ](https://github.com/google-developer-training/basic-android-kotlin-compose-training-dice-roller)を作りながら学んでいこうと思います。