👁

[スペマiOS]ログイン/新規登録リニューアル

nmurata

2023/02/15に公開

こんにちは、2月で入社1年が経ちましたスペースマーケットでモバイルエンジニアをしている村田です。

今回スペースマーケットゲストiOSアプリのログイン/新規登録画面のデザインリニューアルに伴い、SwiftUIで画面を作り直しました。SwiftUI初心者の感想記事になるので優しい気持ちで読んでいただけると幸いです。

何故今回SwiftUIで作ったのか

スペースマーケットiOSアプリは前任者がホーム画面と検索画面のみSiwftUIで作成しており、それ以外はUIKitで作られていました。今後デファクトになるだろうし、自分もキャッチアップして新規/既存どちらもSiwftUIで作っていこうと張り切っていたのですが、昨年半年程度iOSエンジニアが自分1人だけになってしまう事態になり手が出しにくい状態になってしまいました。
今はメンバーも揃い、自分自身サービスに対するドメイン知識と既存コードの網羅ができた状態で余裕が生まれています。また、以下のデザインを見ていただければ分かりやすいですが、ログイン/新規登録画面は横幅いっぱいのコンテンツが縦に並んでいる単調な画面です。入門としては丁度良くあまり懸念がなかった為、SwiftUIで作り直すことを選択しました。

※ 今回対応したものはリリース済なのでログイン/新規登録よろしくお願いします！（Androidもそのうちリリースされます⚡️）

iOS	Android

新旧デザイン

デザインリニューアルといってもそこまで大きな改変はなく、主に以下3点です。

ログイン/新規登録共にSNSとメールアドレスの上下を入れ替える
それぞれの画面への導線追加（ログイン⇄新規登録）
セキュアなパスワード入力

ログイン Before	ログイン After	新規登録 Before	新規登録 After

パスワード入力UI作成

抜粋してパスワード入力のUI作成について記載します。
👁アイコンをタップすることで伏字と平文を切り替えることが可能な入力欄を作成します。

新規登録パスワード	新規登録パスワード	表示/非表示デザイン

SecureField

入力値を●で伏字表示にするフィールドとして、SecureFieldが用意されています。

struct SampleView: View {
    @State private var passwordTextField = ""
    @State private var passwordSecureField = ""

    var body: some View {
        TextField("パスワード入力（TextField）", text: $passwordTextField)
        SecureField("パスワード入力（SecureField）", text: $passwordSecureField)
    }
}

表示切り替え

SecureField自体は平文を表示することができないようで、TextFieldと組み合わせて実装する必要がありそうでした。用意したフラグを👁アイコンタップ時に更新し、伏字(SecureField)/平文(TextField)の表示を切り替えるようにしました。

struct SampleView: View {
    @State private var text = ""
    @State private var isSecure = true

    var body: some View {
        HStack {
            if isSecure {
                TextField("パスワード入力", text: $text)
                    .frame(height: 48)
            } else {
                TextField("パスワード入力", text: $text)
                    .frame(height: 48)
            }

            Button(action: {
                isSecure.toggle()
            }) {
                Image(systemName: isSecure ? "eye.fill" : "eye.slash.fill")
            }
        }
        .background(Color.grayF)
        .padding(20)
    }
}

キーボード制御

表示/非表示切り替え時に、キーボードが閉じてしまう問題があり（入力していたフィールドが非表示になるので当たり前ですが..）、こちらの問題を解消するため表示された側のフィールドにフォーカスを当てるよう対応しました。
@FocusState propertywrapper と focused(_:) modifier を利用し、アイコンタップ時にfocusStateを更新することでfocusedに設定したTextFieldへフォーカスが当たるよう実装しました。

１度非表示になってしまう為動きがにゅんにゅんしてしまいカッコ悪いですが、キーボードが常に表示されるになりました。

Before	After

struct SampleView: View {
    private enum TextFieldType: Hashable {
        case secure
        case normal
    }

    @State private var text = ""
    @State private var isSecure = true
    @FocusState private var focusState: TextFieldType?

    var body: some View {
        HStack {
            if isSecure {
                TextField("パスワード入力", text: $text)
                    .frame(height: 48)
                    .focused($focusState, equals: .secure)
            } else {
                TextField("パスワード入力", text: $text)
                    .frame(height: 48)
                    .focused($focusState, equals: .normal)
            }

            Button(action: {
                isSecure.toggle()
                focusState = isSecure ? .secure : .normal
            }) {
                Image(systemName: isSecure ? "eye.fill" : "eye.slash.fill")
            }
        }
        .background(Color.grayF)
        .padding(20)
    }
}

感想

今回SwiftUIで2画面作成してみましたが、慣れればUIKitで開発するよりも速いなと感じました（面倒なoutlet接続が不要なことが凄く嬉しい..!) ログイン画面を先に作ったのですが、新規登録画面はほぼほぼコピペで楽に実装することができました。
また、「やっぱりSNSとメールアドレスの上下元に戻しましょう」となった場合、UIKitとは異なり制約を気にせずViewの移動ができるため、作りにもよると思いますが変更にも柔軟に対応できるのかなと思いました。

「今後は絶対にSwiftUIで作ろう！」と決め切らず、チームで話し合いつつ柔軟にSwiftUI化に臨んでいければと思っています。

最後に

スペースマーケットでは一緒に働く仲間を絶賛募集中です！
詳しくは以下をご確認の上ご応募ください。

GitHubで編集を提案

スペースマーケット Engineer BlogPublication

スペースを簡単に貸し借りできるサービス「スペースマーケット」のエンジニアによる公式ブログです。弊社採用技術スタックはこちら -> whatweuse.dev/company/spacemarket