SwiftUIでのキーボードの種類

# はじめに
SwiftUIでキーボードを指定する時の方法を調べたので、記事にしました。
ついでにどんなキーボードの種類があるのかも調べてみました。

## キーボードの種類を変更する

キーボードの種類をSwiftUIで指定する方法はめちゃくちゃ簡単です。
以下 modifierをキーボードを表示するView(`TextField`など)に指定することでキーボードの種類を変更できるようになります。
何の種類のキーボードのするかは、引数の`UIKeyboardType`で指定します。

```
.keyboardType(_ UIKeyboardType:)
```

https://developer.apple.com/documentation/swiftui/view/keyboardtype(_:)

### 実装例

```swift
import SwiftUI

struct DecimalPadKeyboardTextFieldView: View {
    
    @State var text: String = ""
    
    var body: some View {
        TextField("decimalPad", text: $text)
            .keyboardType(.decimalPad)
            .textFieldStyle(.roundedBorder)
    }
}
```

## キーボードの種類一覧

`UIKeyboardType`の種類は以下がある

### `default`

> 現在の入力方法のデフォルトのキーボードを指定します。

https://developer.apple.com/documentation/uikit/uikeyboardtype/default

デフォルトのキーボードで`.keyboardType(_ UIKeyboardType:)`にて指定しなかった場合は、このキーボードの種類が適用されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3359094/af7b95b6-31aa-45f9-9543-b4a006e5d2ad.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3359094/2fd36335-2568-41b4-916b-411872ce6497.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3359094/e7ebca6a-ee7d-4f90-a8b2-70a39bcb3c9a.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3359094/856289f2-af21-43bb-b99d-8230c4721311.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3359094/319ffeeb-485f-4f15-8c5b-2c38167b1194.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3359094/acee2f7a-db92-4cf7-8937-4b342a9ffb34.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3359094/0b9651ad-9718-4081-9039-784ca1ea1889.png)


### `alphabet`

> アルファベット入力用のキーボードを指定します。

https://developer.apple.com/documentation/uikit/uikeyboardtype/alphabet

`alphabet`はドキュメントにもあるとおり、deprecated になっているのでアルファベットを使いたい場合はこの後に説明する`asciiCapable`を使った方が良いです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3359094/b1c49216-53d7-4948-9cbd-c2bdb3494886.png)

### `asciiCapable`

> 標準の ASCII 文字を表示するキーボードを指定します。

https://developer.apple.com/documentation/uikit/uikeyboardtype/asciicapable

`alphabet`の代わりに使うことを推奨されているだけあって、できることは同じようです。
絵文字とかが使えないので、デフォルトとの違いでしょうかね

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3359094/9a4a8566-567b-4e39-9b66-015ad401bd14.png)

### `asciiCapableNumberPad`

> ASCII 数字のみを出力する数字パッドを指定します。

https://developer.apple.com/documentation/uikit/uikeyboardtype/asciicapablenumberpad

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3359094/f3eb000a-3fbd-4fda-80e4-a62cc729ff57.png)

### `decimalPad`

> 数字と小数点付きのキーボードを指定します。

https://developer.apple.com/documentation/uikit/uikeyboardtype/decimalpad

小数点を使うときはこれを使うと良さそうです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3359094/e5a46619-3ee4-4aa1-b3f9-86d2b6fb5fc6.png)

:::note warn
ロケールによっては小数点(.)ではなく、カンマ(,)となることもあるので注意が必要。
例えば、ロケールがドイツになっている場合はカンマ(,)になる
:::

### `emailAddress`

> 電子メール アドレスを入力するためのキーボードを指定します。

https://developer.apple.com/documentation/uikit/uikeyboardtype/emailaddress

アットマーク(@)やドット(.)が強調されて、名前の通りメールアドレスが入力しやすくなっています

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3359094/9030aef8-7fd0-45be-ab34-b1b0c5766c71.png)

### `namePhonePad`

> 人の名前または電話番号を入力するためのキーパッドを指定します。

https://developer.apple.com/documentation/uikit/uikeyboardtype/namephonepad

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3359094/9b24e602-81b0-49cf-b0d2-af523372cc18.png)

数字のキーボードに切り替えると(`123`ボタン押下)以下になる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3359094/f60036af-2301-49ff-b8de-80e57be4f5f1.png)

### `numberPad`

> PIN 入力用の数字キーパッドを指定します。

https://developer.apple.com/documentation/uikit/uikeyboardtype/numberpad

現状`asciiCapableNumberPad`を使った時と違いはありませんが、`numberPad`は PIN 入力用となっているので、PIN でない数字の入力には`asciiCapableNumberPad`を使った方が良いかも(今後のアップデートやローケルの違いで細かい違いが出る可能性もあるので)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3359094/17f128bc-aad5-4a77-913a-485d304db0e6.png)

### `numbersAndPunctuation`

> 数字と句読点のキーボードを指定します。

https://developer.apple.com/documentation/uikit/uikeyboardtype/numbersandpunctuation

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3359094/2f26efc1-d9fe-4aa3-92b7-fdb167c12bf5.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3359094/0353a9ce-83a7-43fd-9f94-c23fb8a9926a.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3359094/93d57655-f86a-4db4-83b2-3ce95a3e060a.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3359094/cde8d190-4262-4b04-9333-075b7c8e7c17.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3359094/0140450f-4e0d-4f9d-af4a-06f63c0baf4b.png)

### `phonePad`

> 電話番号を入力するためのキーパッドを指定します。

https://developer.apple.com/documentation/uikit/uikeyboardtype/phonepad

名前の通り、電話番号を入力しやすいキーボードになっています

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3359094/a2914a18-5e6e-4295-a26d-d231f21fea64.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3359094/0a95f3ac-5655-4afe-99c4-ae153208bd2a.png)

### `twitter`

> Twitter テキスト入力用のキーボードを指定します。アットマーク (" @") とハッシュ (" #") の文字に簡単にアクセスできます。

https://developer.apple.com/documentation/uikit/uikeyboardtype/twitter

Twitter(今は X か)に限らず SNS のサービスだと使いやすそうです
アットマーク (" @") とハッシュ (" #") が入力しやすいこと以外は、`default`のキーボードとそれほど変わりません。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3359094/b8c5a1de-8938-47b1-a047-842842470f36.png)

### `URL`

> URL 入力用のキーボードを指定します。

https://developer.apple.com/documentation/uikit/uikeyboardtype/url

ドット(.)、スラッシュ(/)、.jpが強調されています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3359094/7fb61136-931d-4542-91c8-34a38f4a3e10.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3359094/d5e2b3ee-e0ba-4f8e-b2e6-7840639b0b5a.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3359094/d7b09136-4c77-47ed-bb89-7a847d3d1107.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3359094/531fd20c-4b80-480c-a5a3-9f235bbed453.png)

### `webSearch`

> Web 検索用語と URL 入力用のキーボードを指定します。

https://developer.apple.com/documentation/uikit/uikeyboardtype/websearch

スペースとピリオドが目立つようになっているようですが、それ以外はデフォルトと同じです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3359094/22794e95-56c1-44f8-ad59-3ae249de79f9.png)

# おわり
以上がSwiftUIでのキーボード種類の変更と、変更できるキーボードの種類一覧でした。
改めて調べてみると結構種類ありますし、今まで文字を打つか数字を打つかぐらいでしか選んでなかったなという気づきがありました。
さまざまな用途で最適化されたキーボードがあるので、どういう用途なのかで使い分けした方がユーザビリティやアクセシビリティの向上がさらに望めそうですね。