Kotlinで手軽に入力フォームを作成する10のステップ

はじめに
●Kotlinとは
- ○Kotlinの特徴とメリット
- ○Kotlinでの開発環境のセットアップ
●入力フォームの基本
- ○フォームの主要な要素
- ○バリデーションの基礎
●Kotlinでの入力フォーム作成ステップ
●応用例
●注意点と対処法
●カスタマイズ方法
- ○デザインのカスタマイズ
- ○機能の拡張
まとめ

はじめに

この記事を読めば、Kotlinを使用して効率的に入力フォームを作成する技術を身につけることができます。

日常の業務や趣味のプロジェクトなど、さまざまな場面で入力フォームの作成は必要とされます。

特にKotlinは、シンプルで読みやすいコードが特徴的であり、効率的な開発を実現します。

今回は、Kotlinの基本から入力フォームの作成までを、具体的なステップとサンプルコードを交えて解説していきます。

●Kotlinとは

Kotlinは、2011年にJetBrainsによって開発されたプログラミング言語です。

Javaの代替として設計され、Androidの公式言語としても採用されています。

そのため、モバイルアプリの開発をはじめとして、幅広い用途で利用されています。

○Kotlinの特徴とメリット

Kotlinは次のような特徴を持っています。

Javaとの相互運用性が高い：KotlinはJavaと100%互換性があるため、既存のJavaコードと組み合わせて利用することができます。
Null安全：Kotlinは、nullを持つ可能性のある変数とそうでない変数を明確に区別します。これにより、Nullポインタ例外を効果的に防ぐことができます。
拡張関数：既存のクラスに新しい機能を追加することができます。これにより、ライブラリの機能を柔軟にカスタマイズすることができます。
ラムダ式と高階関数：コードの可読性を向上させるための機能が多く取り入れられています。

これらの特徴により、Kotlinは開発の効率化や品質の向上に貢献しています。

○Kotlinでの開発環境のセットアップ

Kotlinを使った開発を始めるためには、まず適切な開発環境をセットアップする必要があります。

ここでは、Kotlinの開発環境をセットアップする基本的な手順です。

JDK(Java Development Kit)のインストール：KotlinはJavaとの互換性が高いため、Javaの開発環境が必要です。
IntelliJ IDEAのインストール：JetBrainsが開発したIDEで、Kotlinの開発に最適化されています。
IntelliJ IDEA内でKotlinプラグインのインストール：メニューから「Plugins」を選択し、Kotlinプラグインを検索してインストールします。
新しいKotlinプロジェクトの作成：IntelliJ IDEAの起動画面で「New Project」を選択し、Kotlinを選んでプロジェクトを開始します。

●入力フォームの基本

Webやアプリケーションにおいて、入力フォームはユーザーとのコミュニケーションの手段として欠かせない要素の一つです。

ユーザーがデータを入力する手段として、また、そのデータをサーバー側に送信する際のインターフェースとしても利用されます。

ここでは、入力フォームの基本について詳しく解説します。

○フォームの主要な要素

入力フォームにはいくつかの主要な要素があります。

これらの要素を組み合わせることで、多岐にわたる用途のフォームを作成することが可能となります。

テキストボックス：文字列を入力するためのボックス。名前やメールアドレスなどのテキスト情報を入力する際に使用します。
ラジオボタン：複数の選択肢から1つだけを選択するためのボタン。
チェックボックス：複数の選択肢の中から複数を選択するためのボックス。
ドロップダウンリスト：選択肢を一覧表示し、その中から1つまたは複数を選択するためのリスト。
ボタン：フォームの送信やリセットなどのアクションをトリガーする要素。

○バリデーションの基礎

バリデーションとは、ユーザーが入力したデータが正しいかどうかをチェックするプロセスのことを指します。

例えば、メールアドレスの形式が正しいか、必須項目が全て入力されているかなどのチェックを行います。

必須項目のチェック：入力が必須の項目が埋められているかを確認します。
データの形式のチェック：メールアドレスや電話番号など、特定の形式での入力が求められる項目に対して、その形式に合っているかを確認します。
文字数の制限：テキストボックスなどで、入力可能な文字数に制限がある場合、その制限内での入力が行われているかを確認します。

フォームのバリデーションは、ユーザーからの入力を適切に受け取り、エラーを防ぐために非常に重要です。

特に、不正なデータがサーバー側に送信されることを防ぐためにも、しっかりとしたバリデーションの実装は欠かせません。

●Kotlinでの入力フォーム作成ステップ

Kotlinは、Javaの代替として誕生したプログラミング言語で、シンプルさと生産性の向上を目指して設計されました。

Androidの開発だけでなく、サーバーサイドやデスクトップ、Webフロントエンドの開発にも利用されています。

今回は、Kotlinを用いて入力フォームの作成ステップについて詳しく解説します。

○サンプルコード1：テキストボックスの作成

Kotlinでのテキストボックス作成は非常にシンプルです。

下記のサンプルコードは、基本的なテキストボックスを作成するものです。

// テキストボックスの作成
val textBox = EditText(this)
textBox.hint = "テキストを入力してください"

このコードでは、EditTextクラスを使ってテキストボックスを作成しています。

hintプロパティには、テキストボックス内に表示するプレースホルダーのテキストを設定します。

実行すると、ユーザーがテキストを入力できるテキストボックスが表示され、”テキストを入力してください”というヒントが表示されます。

○サンプルコード2：ラジオボタンとチェックボックス

ラジオボタンとチェックボックスもKotlinで簡単に実装できます。

ここではラジオボタンとチェックボックスを作成するサンプルコードを紹介します。

// ラジオボタンの作成
val radioButton1 = RadioButton(this)
radioButton1.text = "選択肢1"

val radioButton2 = RadioButton(this)
radioButton2.text = "選択肢2"

// チェックボックスの作成
val checkBox = CheckBox(this)
checkBox.text = "同意する"

このコードでは、RadioButtonクラスとCheckBoxクラスを使用して、ラジオボタンとチェックボックスをそれぞれ作成しています。

textプロパティに表示するテキストを設定します。

実行すると、”選択肢1″と”選択肢2″の2つのラジオボタンと、”同意する”というテキストが表示されるチェックボックスが表示されます。

○サンプルコード3：ドロップダウンメニュー

ドロップダウンメニューは、複数の選択肢から一つを選択するためのUI要素です。

Kotlinでのドロップダウンメニューの実装は、Spinnerクラスを用いることで行えます。

ここでは、基本的なドロップダウンメニューを作成するためのサンプルコードです。

// ドロップダウンメニューの作成
val items = arrayOf("選択肢1", "選択肢2", "選択肢3")
val adapter = ArrayAdapter<String>(this, android.R.layout.simple_spinner_item, items)
adapter.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item)

val spinner = Spinner(this)
spinner.adapter = adapter

このコードでは、まず選択肢を表すitems配列を作成しています。

次に、この配列を元にArrayAdapterを初期化し、Spinnerにセットしています。

このとき、setDropDownViewResourceメソッドを用いて、ドロップダウンの表示スタイルを設定しています。

実行すると、”選択肢1″、”選択肢2″、”選択肢3″という3つの選択肢を持つドロップダウンメニューが表示されます。

ユーザーがメニューの中から選択肢をタップすると、その選択肢が選ばれます。

○サンプルコード4：ボタンの配置

ボタンは、ユーザーがアクションを実行するための要素です。

Kotlinでボタンを作成する際には、Buttonクラスを使用します。

ここでは、シンプルなボタンを配置するサンプルコードを紹介します。

// ボタンの作成
val button = Button(this)
button.text = "送信"
button.setOnClickListener {
    // ここにボタンがクリックされたときの処理を記述
    Toast.makeText(this, "ボタンがクリックされました", Toast.LENGTH_SHORT).show()
}

このコードでは、Buttonクラスのインスタンスを作成し、ボタンに表示するテキストとして”送信”を設定しています。

また、setOnClickListenerメソッドを用いて、ボタンがクリックされたときの処理を実装しています。

実行すると、”送信”というテキストが表示されるボタンが配置されます。

このボタンをクリックすると、”ボタンがクリックされました”というメッセージが表示されるToastがポップアップします。

○サンプルコード5：リアルタイムバリデーション

ユーザがフォームに入力を行う際、その入力内容が正しいかどうかをリアルタイムで確認し、ユーザにフィードバックを与えるのがリアルタイムバリデーションの役割です。

Kotlinでこれを実現するには、TextWatcherインターフェースを利用します。

ここでは、テキストボックスに入力される電話番号が正しいフォーマットかどうかをリアルタイムで確認するサンプルコードを紹介します。

// テキストボックスの作成
val phoneNumberEditText = EditText(this)
// リアルタイムでのバリデーションのためのリスナーを設定
phoneNumberEditText.addTextChangedListener(object : TextWatcher {
    override fun beforeTextChanged(s: CharSequence, start: Int, count: Int, after: Int) {}

    override fun onTextChanged(s: CharSequence, start: Int, before: Int, count: Int) {}

    override fun afterTextChanged(s: Editable) {
        if (!s.toString().matches("^[0-9]{2,4}-[0-9]{2,4}-[0-9]{3,4}$".toRegex())) {
            phoneNumberEditText.error = "電話番号の形式が正しくありません"
        } else {
            phoneNumberEditText.error = null
        }
    }
})

このコードでは、まずテキストボックスを作成しています。

次に、addTextChangedListenerメソッドを使って、テキストが変更されるたびにチェックするリスナーを追加しています。

話番号が正しい形式であるかを確認するための正規表現を用いてバリデーションを行い、正しくない場合はエラーメッセージを表示しています。

このコードを実行すると、ユーザがテキストボックスに電話番号を入力する際、正しくない形式で入力された場合には”電話番号の形式が正しくありません”というエラーメッセージが表示されます。

一方で、正しい形式で入力された場合はエラーメッセージは表示されません。

○サンプルコード6：エラーメッセージの表示

入力内容が正しくない場合、エラーメッセージを表示してユーザに正しい入力を促すことは非常に重要です。

エラーメッセージは、ユーザビリティを向上させ、ユーザの入力ミスを減少させる役割があります。

ここでは、エラーメッセージを表示する基本的なサンプルコードを紹介します。

val emailEditText = EditText(this)
emailEditText.addTextChangedListener(object : TextWatcher {
    override fun beforeTextChanged(s: CharSequence, start: Int, count: Int, after: Int) {}

    override fun onTextChanged(s: CharSequence, start: Int, before: Int, count: Int) {}

    override fun afterTextChanged(s: Editable) {
        if (!s.toString().contains("@")) {
            emailEditText.error = "正しいメールアドレスを入力してください"
        } else {
            emailEditText.error = null
        }
    }
})

このコードは、メールアドレスの入力を受け取るテキストボックスを作成しています。

入力された内容に”@”が含まれていない場合、”正しいメールアドレスを入力してください”というエラーメッセージを表示します。

このコードを実行すると、ユーザが”@”を含まない内容を入力した場合、エラーメッセージが表示されます。

一方、”@”を含む正しいメールアドレスの形式で入力された場合は、エラーメッセージは表示されません。

○サンプルコード7：フォームのスタイリング

フォームの見た目は、ユーザの使用感やサイト全体の印象に大きく影響します。

そのため、入力フォームのデザインやレイアウトは、ユーザビリティを考慮しつつ、美しく整えることが求められます。

KotlinでAndroidアプリを開発する場合、スタイリングは主にXMLファイルで行います。

ここでは、基本的なフォームのスタイリングのサンプルコードを紹介します。

<!-- res/layout/form_layout.xml -->
<EditText
    android:id="@+id/usernameEditText"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:hint="ユーザ名"
    android:padding="10dp"
    android:background="@drawable/edittext_bg"
    android:textColor="#333"
    android:textSize="16sp" />

<Button
    android:id="@+id/submitBtn"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="送信"
    android:background="@color/button_color"
    android:textColor="#FFF" />

このコードでは、ユーザ名を入力するEditTextと送信ボタンを作成しています。

EditTextにはパディング、背景、テキストカラー、テキストサイズなどのスタイル属性が指定されています。

また、Buttonにも背景色やテキストカラーが指定されています。

このXMLファイルを実行すると、上記のスタイル属性に基づいてデザインされた入力フォームが表示されます。

ユーザは、この入力フォームを通じてデータを入力し、送信ボタンを押すことで情報を送信することができます。

○サンプルコード8：ユーザビリティの向上

入力フォームのユーザビリティを向上させるためには、ユーザが直感的に操作できるようなデザインやレイアウトを心がけることが重要です。

また、エラーメッセージの表示位置やタッチの反応など、細かい部分の工夫も求められます。

ここでは、ユーザビリティを考慮して作成されたフォームのサンプルコードを紹介します。

<!-- res/layout/user_friendly_form.xml -->
<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:padding="16dp">

    <EditText
        android:id="@+id/emailEditText"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="メールアドレス"
        android:inputType="textEmailAddress"
        android:importantForAccessibility="yes"
        android:contentDescription="メールアドレス入力欄" />

    <EditText
        android:id="@+id/passwordEditText"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="パスワード"
        android:inputType="textPassword"
        android:importantForAccessibility="yes"
        android:contentDescription="パスワード入力欄" />

    <Button
        android:id="@+id/loginBtn"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="ログイン"
        android:importantForAccessibility="yes"
        android:contentDescription="ログインボタン" />
</LinearLayout>

このコードでは、メールアドレスとパスワードを入力するためのフォームを作成しています。

重要なのは、android:importantForAccessibility="yes"やandroid:contentDescriptionといった属性です。

これらは、画面読み上げツールなどのアクセシビリティ機能をサポートするためのもので、全てのユーザにとって使いやすいアプリを作成する上で欠かせない要素です。

このXMLファイルを実行すると、ユーザビリティを考慮した入力フォームが表示されます。

特に視覚や操作に制約のあるユーザでも、このフォームを通じて情報を簡単に入力することができます。

○サンプルコード9：フォームデータの送信

ユーザから入力されたデータをサーバーなどのバックエンドに送信する際の処理は非常に重要です。

安全にデータを転送し、正確に処理を行う必要があります。

Kotlinを使用したAndroidアプリケーションでは、通常、Retrofit、OkHttp、Volleyなどのライブラリを使用してデータの送信を行います。

ここでは、Retrofitを使用して入力フォームからのデータをサーバーにPOSTリクエストとして送信するサンプルコードを紹介します。

// データクラスを定義
data class FormData(val username: String, val email: String)

// Retrofitのインターフェースを定義
interface ApiService {
    @POST("submitData")
    fun submitData(@Body formData: FormData): Call<Void>
}

// 実際のデータ送信処理
fun sendData(username: String, email: String) {
    val retrofit = Retrofit.Builder()
        .baseUrl("https://your-api-endpoint.com/")
        .addConverterFactory(GsonConverterFactory.create())
        .build()

    val service = retrofit.create(ApiService::class.java)
    val call = service.submitData(FormData(username, email))
    call.enqueue(object : Callback<Void> {
        override fun onResponse(call: Call<Void>, response: Response<Void>) {
            if (response.isSuccessful) {
                // 成功時の処理
                println("データ送信に成功しました。")
            } else {
                // エラー時の処理
                println("データ送信に失敗しました。")
            }
        }

        override fun onFailure(call: Call<Void>, t: Throwable) {
            // 通信失敗時の処理
            println("通信エラーが発生しました。")
        }
    })
}

このコードでは、Retrofitライブラリを使ってデータ送信を行っています。

まず、送信するデータの形式をFormDataというデータクラスで定義します。

次に、ApiServiceというインターフェースを定義し、その中でPOSTリクエストのエンドポイントとデータの形式を指定します。

そして、sendData関数では実際のデータ送信処理を行っています。

このコードを実行すると、指定されたエンドポイントにデータがPOSTリクエストとして送信されます。

サーバーからの応答に応じて、成功時やエラー時の処理が行われます。

○サンプルコード10：セキュリティ対策

フォームデータの送信に関しては、セキュリティ上のリスクが伴うため、適切な対策を取ることが不可欠です。

特に、パスワードや個人情報などの機密情報を扱う場合、データの暗号化やSSL/TLSを使用した安全な通信を行うことが必要です。

ここでは、OkHttpライブラリを使用してSSL/TLSを利用した安全な通信を行うサンプルコードを紹介します。

val okHttpClient = OkHttpClient.Builder()
    .sslSocketFactory(sslSocketFactory, trustManager) // SSLの設定
    .hostnameVerifier(hostnameVerifier) // ホスト名の検証
    .build()

val retrofit = Retrofit.Builder()
    .baseUrl("https://secure-api-endpoint.com/")
    .client(okHttpClient)
    .addConverterFactory(GsonConverterFactory.create())
    .build()

// ... 以前のコードに続けて記述 ...

このコードでは、OkHttpライブラリを利用してSSL/TLSを設定しています。

sslSocketFactoryとtrustManagerはSSLの設定、hostnameVerifierはホスト名の検証を行うためのものです。

これにより、安全な通信が可能となります。

データの送信時には、常にセキュリティを最優先に考えることが重要です。

適切な対策を講じることで、ユーザの情報を守るとともに、アプリケーションの信頼性を高めることができます。

●応用例

入力フォームは多岐にわたる用途で使用されます。

基本的なテキストボックスやボタンの配置だけでなく、より高度なフォームの設計や実装が求められる場面も少なくありません。

ここでは、Kotlinを使用した入力フォームの応用例をいくつか紹介します。

○動的なフォームの作成

一般的に、フォームは静的な構造を持っていますが、時にはユーザの入力に応じてフォームの構造自体を変更する必要が出てきます。

例えば、特定の選択肢を選ぶと追加の入力フィールドが表示されるような動的な挙動を持つフォームです。

下記のサンプルコードは、ユーザがチェックボックスを選択すると関連するテキストボックスが表示されるKotlinでの実装例を表しています。

// MainActivity.kt
val checkBox = findViewById<CheckBox>(R.id.sampleCheckBox)
val relatedTextBox = findViewById<EditText>(R.id.relatedTextBox)

checkBox.setOnCheckedChangeListener { _, isChecked ->
    if (isChecked) {
        relatedTextBox.visibility = View.VISIBLE
    } else {
        relatedTextBox.visibility = View.GONE
    }
}

このコードでは、チェックボックスが選択された際のリスナーを設定して、その選択状態に応じて関連するテキストボックスの表示・非表示を切り替えています。

○マルチステップフォーム

複雑な情報を入力する場合、すべてのフィールドを一つのページに表示すると、ユーザにとって圧倒的になる可能性があります。

このような場合、マルチステップフォームを使用して、入力をいくつかのステップに分割すると良いでしょう。

下記のサンプルコードは、ViewPagerを使用してマルチステップの入力フォームを実現するKotlinの例を表しています。

// Setup ViewPager with multiple form fragments
val viewPager = findViewById<ViewPager2>(R.id.formViewPager)
val adapter = FormPagerAdapter(this, listOf(Step1Fragment(), Step2Fragment(), Step3Fragment()))
viewPager.adapter = adapter

このコードでは、3つの異なるステップを持つフォームをViewPager2に設定して、スワイプ操作で各ステップ間を移動できるようにしています。

○APIとの連携

多くの場合、入力フォームは外部のAPIと連携して動作します。

ユーザからの入力を受け取った後、そのデータをAPIに送信し、返された結果をアプリケーションで処理することが一般的です。

下記のサンプルコードは、Retrofitを使用してAPIにデータをPOSTし、結果を受け取るKotlinの例を表しています。

// APIインターフェースの定義
interface SampleApi {
    @POST("submit")
    fun submitData(@Body data: FormData): Call<ApiResponse>
}

// データの送信と結果の取得
val api = Retrofit.Builder()
    .baseUrl("https://api.example.com/")
    .addConverterFactory(GsonConverterFactory.create())
    .build()
    .create(SampleApi::class.java)

val response = api.submitData(formData).execute()

if (response.isSuccessful) {
    val apiResponse = response.body()
    // 結果の処理
}

このコードでは、ユーザの入力をFormDataというデータクラスに格納し、それをAPIに送信しています。

そして、APIからの応答をApiResponseというデータクラスで受け取り、適切な処理を行っています。

●注意点と対処法

入力フォームの設計や実装に際しては、ユーザの利便性やセキュリティなど、多くの要因を考慮する必要があります。

適切な対策を取らないと、ユーザの重要な情報が漏洩するリスクや、不正な操作を受けるリスクが増大します。

ここでは、入力フォームを安全に、かつユーザにとって使いやすくするための主要な注意点と、それに対する対処法について解説します。

○セキュリティリスク

最も重要なのは、ユーザデータのセキュリティを確保することです。

特に、パーソナルな情報やパスワードなどのセンシティブなデータを扱う場合、最大限の注意が求められます。

下記のサンプルコードは、Kotlinでパスワードの入力を受け付ける際に、入力内容を暗号化する方法を表しています。

import java.security.MessageDigest

fun String.toSha256(): String {
    val bytes = this.toByteArray()
    val md = MessageDigest.getInstance("SHA-256")
    val digest = md.digest(bytes)
    return digest.joinToString("") { "%02x".format(it) }
}

val password = "userPassword"
val encryptedPassword = password.toSha256()

このコードでは、パスワードをSHA-256というハッシュ関数を使って暗号化しています。

このようにして、元のパスワードが外部に漏れることなく安全にデータベースなどに保存できます。

○ユーザビリティのポイント

フォームの利便性も非常に重要です。

ユーザがストレスなく情報を入力できるフォームは、より多くのユーザから好評を得ることができます。

たとえば、エラーメッセージは明確にし、ユーザが何をすればよいのかを瞬時に理解できるようにすることが求められます。

また、不要な入力フィールドは省略する、入力フィールドの順序を直感的にするなど、ユーザの使いやすさを追求することが大切です。

○テスト手法

フォームの動作確認は、実際の運用前に十分に行う必要があります。

特に、異なるデバイスやブラウザでの動作を確認することで、多くのユーザが問題なくフォームを使用できることを確認しましょう。

下記のサンプルコードは、JUnitを使ったKotlinの単体テストの例を表しています。

import org.junit.Assert.assertEquals
import org.junit.Test

class FormValidationTest {

    @Test
    fun emailValidation_isCorrect() {
        val result = validateEmail("test@example.com")
        assertEquals(true, result)
    }
}

このコードは、メールアドレスのバリデーションが正しく行われているかをテストしています。

テストを実行することで、プログラムが期待通りの動作をするか確認することができます。

●カスタマイズ方法

入力フォームの設計や機能は、その使用目的やターゲットユーザ、デザインテーマに応じて、さまざまなカスタマイズが求められます。

Kotlinを使用して、効果的に入力フォームをカスタマイズするための主要な方法を2つのカテゴリに分けて紹介します。

○デザインのカスタマイズ

入力フォームのデザインは、ユーザの使いやすさや印象に大きな影響を与えます。

特定のブランドイメージやウェブサイトのテーマに合わせて、色やスタイルを調整することが可能です。

下記のサンプルコードは、Kotlinを使用してAndroidのEditTextコンポーネントのデザインをカスタマイズする方法を表しています。

// テキストボックスの背景色やテキストカラーをカスタマイズ
val editText = EditText(this)
editText.setBackgroundColor(Color.parseColor("#E0E0E0")) // 背景色をグレーに設定
editText.setTextColor(Color.parseColor("#333333"))    // テキストカラーをダークグレーに設定

このコードでは、EditTextコンポーネントの背景色とテキストカラーを指定してデザインをカスタマイズしています。

同様の方法で、フォントサイズやボーダースタイルなど、さまざまなデザイン要素を変更することができます。

○機能の拡張

標準的な入力フォームに加えて、特定の機能を追加することで、ユーザ体験を向上させることができます。

例えば、入力内容に基づいてリアルタイムで情報を表示するオートコンプリート機能や、複数の項目を一度に入力するマルチステップフォームなどが考えられます。

下記のサンプルコードは、Kotlinを使用して、オートコンプリート機能を持つテキストボックスを作成する方法を表しています。

val items = listOf("Tokyo", "Osaka", "Kyoto", "Hiroshima")
val adapter = ArrayAdapter(this, android.R.layout.simple_dropdown_item_1line, items)

val autoCompleteTextView = AutoCompleteTextView(this)
autoCompleteTextView.setAdapter(adapter)

このコードでオートコンプリート機能を持つテキストボックスを作成し、都市のリストからユーザが入力を始めると関連する都市名がドロップダウンリストとして表示されます。