potatotips #58での登壇資料になります。 https://potatotips.connpass.com/event/115158/ ファイナンス系のアプリをはじめとしたアプリ内でお金のやりとりが発生するものや、ヘルスケアアプリ等でもあまり他人に見られたくないセンシティブな情報を持つようなアプリにおいてはよく見かける機能の1つですが、AppDelegate.swift部分のライフサイクルを利用する点やユーザーの使いやすさを実現するために画面に関する処理にも工夫ができる点なので、パスコードによる画面ロック機能を実装する上でのポイントになりそうな部分をまとめました。 【詳細解説記事】 https://qiita.com/fumiyasac@github/items/6124f9b272f5ee6ebb40 【サンプルコード】 https://github.com/fumiyasac/TouchIDExample

1. Hint of“Passcode Lock”Screen and Logic
(with LocalAuthentication).
Fumiya Sakai (Just1factory)
2019/01/28 potatotips #58 @ FiNC Technologies Inc.

2. 自己紹介
・Fumiya Sakai
・Mobile App Engineer
アカウント:
・Twitter: https://twitter.com/fumiyasac
・Facebook: https://www.facebook.com/fumiya.sakai.37
・Github: https://github.com/fumiyasac
・Qiita: https://qiita.com/fumiyasac@github
発表者:
・Born on September 21, 1984
これまでの歩み:
Web Designer
2008 ~ 2010
Web Engineer
2012 ~ 2016
App Engineer
2017 ~ Present

3. ほんの少しだけ告知と宣伝
「少しの工夫とアイデアでできる表現集」として、これまでサンプル開発や実務の
中で培ったノウハウ等から、UI実装いくつかのまとまったサンプル実装を例にUI構
築をする上で重要な実装ポイントやアイデアを紹介していく形式にしてみました。
収録サンプル:
https://github.com/fumiyasac/ios_ui_recipe_showcase
現在Boothにて販売中です【書籍版・DL版】 ¥1,000
同人誌「iOSアプリ開発 UI実装であると嬉しいレシピブック」を書きました。
https://just1factory.booth.pm/items/1021745
概要:
https://just1factory.booth.pm/items/1150511

4. 今回取り組む事になったきっかけ
実務でこの機能を採用する機会があったので面白い題材だと感じた。
センシティブな情報を取り扱うアプリでの要望の1つに画面ロック機能がある:
要望が生まれるアプリの事例:
細部のUI実装をはじめ入力時の表現にもこだわりを持たせられる部分
UI/UX的にもユーザーの入力を伴うのでInteractionやAnimationの工夫ができる:
Ex1. 金融（ファイナンス関連）のアプリの場合:
→ 金銭に取引履歴や残高等の情報は他人に見られたくない情報であることが多い
Ex2. ヘルスケア（体調関連）等の個人的な情報を取り扱うアプリの場合:
→ 身長体重を含む健康等の情報に関しても同様に他人には見られたくないケースはある

5. 今回の発表でのサンプルコード
実際に動かせるコードもご用意しました & 解説コメントも残しました。
https://github.com/fumiyasac/TouchIDExample

6. サンプルで作成した画面構成
実際のアプリで組み込んだ事例に関しては懇親会等でお伝えできれば！

7. パスコードロック画面に関する設計概要
入力完了時の処理を実行
PasscodeViewController PasscodePresenter PasscodeModel
ユーザーの入力に関する処理
※ 本来はパスコードロック削除に関する処理があれば尚良い。
状態に応じた処理 パスコード情報を返却
InputPasscodeType （ 画面の用途に応じた分類 ）
case inputForCreate // パスコードの新規作成
case retryForCreate // パスコードの新規作成時の確認
case inputForUpdate // パスコードの変更
case retryForUpdate // パスコードの変更時の確認
case displayPasscodeLock // パスコードロック画面の表示時
protocol PasscodePresenterDelegate: NSObjectProtocol {
func goNext()
func dismissPasscodeLock()
func savePasscode()
func showError()
}
※ 似た様な処理でも詳細が異なる点に気をつけると良い。
PasscodePresenterDelegate （ 期待する振る舞い ）

8. パスコードロック画面のViewControllerに関する設計
① パスコードの入力が4桁になった場合にはPresenter側に完了したことを伝える
InputPasscodeType
（ 画面の用途に応じた分類 ）
case inputForCreate // パスコードの新規作成
case retryForCreate // パスコードの新規作成時の確認
case inputForUpdate // パスコードの変更
case retryForUpdate // パスコードの変更時の確認
case displayPasscodeLock // パスコードロック画面の表示時
protocol PasscodePresenterDelegate: NSObjectProtocol {
func goNext()
func dismissPasscodeLock()
func savePasscode()
func showError()
}
② 引数で渡されたEnum値に応じたPresenter側のDelegate処理を実行
PasscodePresenterDelegate
（ VC側で期待する振る舞い ）
presenter.inputCompleted(userInputPasscode, inputPasscodeType: inputPasscodeType)
InputPasscodeKeyboard
Delegate
ユーザー入力値を反映
※ VC側のextensionに場合に応じた処理を記載。

9. パスコードロック画面が表示される場合の処理イメージ
バックグラウンドに入ったタイミングの前に表示していた画面の上にパスコードロック画面をかぶせる。
（※アプリ起動時は最初に表示される画面の上にかぶせる）
コンテンツ用TabBar
パスコード画面用VC
現在表示中の画面の上にパスコード解除
用の画面をかぶせる。
コンテンツ用TabBarの上にモーダル表
示のものがあればその上にかぶせる。
コンテンツ用TabBar
パスコード画面用VC
AppDelegateのライフサイクルを利用

10. パスコードロック機能を実現する際の注意点
AppDelegateのライフサイクルで利用する処理との兼ね合いに注意。
TouchIDやFaceIDでの認証時のダイアログ表示時の挙動に注意:
パスコードロック画面を表示する → applicationDidEnterBackground(_ application: UIApplication)
AppDelegateにおけるライフサイクルのメソッド実行タイミングへの理解が必須となる
URLスキームを利用してアプリを起動する部分にも考慮が必要:
ダイアログが表示されるタイミング:
→ applicationWillResignActive(_ application: UIApplication)
ダイアログが閉じるタイミング:
→ applicationDidBecomeActive(_ application: UIApplication)
このサンプルにおいては、
テンキーの左側に別途
生体認証用ボタンを用意

11. パスコードロック機能を実装する際にすると良い配慮
APIサーバー側：
送られたリクエストから
該当ユーザーへメール送信
パスコード解除用の
メール送信リクエスト
アプリ側：
※ 有効期限を短めにする等の配慮
ユーザーが送られたメール
に記載されたURLをタップ
（ 解除用トークン入りURL ）
※ 以前に利用したパスコードを破棄
URLスキーム経由で開いて
パスコード解除リクエスト
例. ユーザーがパスコードを忘れてしまった場合の考慮 → メールに添付されたURL経由でパスコードを解除する。
1. ユーザー登録機能を有する
2. DBへメールアドレスを保持している
1. APIサーバー側と通信する機能を有する
2. URL経由でアプリを開ける設定
送られたパスコード解除
リクエストが正しいか判定
リクエストが正しい場合
パスコードを解除する

12. UI/UXの観点からの工夫できるポイント(1)
テンキー状のボタンに関する設定
このViewにおけるInterfaceBuilder上での設定：
手順1. 0~9のボタンに関しては、Xcodeの右ペインでそれぞれtagの値を数字に合わせて設定しておく。
手順2. 0~9のボタンをInterfaceBuilderを利用して「Outlet Collection」で接続する。
※ ボタン押下時にどのボタンが押されたかは手順1. で設定したタグ値を sender: から取得する

13. UI/UXの観点からの工夫できるポイント(1)
テンキー状のボタンに関する設定
② 押下時のアニメーションに. allowUserInteractionオプションを追加
① UIButtonのアクションを .touchDown時に発火

14. UI/UXの観点からの工夫できるポイント(2)
ユーザーの入力状態表示に関する設定
鍵のアイコンが灰色から黒へ変化（ユーザーが数字を押した場合）はアニメーションを伴う。
※ 削除ボタンでユーザーが消した場合は逆の変化になりアニメーションは伴わない。
ユーザーが入力したパスコードの長さに応じて
鍵のアイコンが黒く表示される

15. UI/UXの観点からの工夫できるポイント(2)
ユーザーの入力状態表示に関する設定
表示部分のアニメーションは、Outlet Collectionの特性を利
用した実装になっている点がポイント
① ユーザーが数字を入力した時 ② ユーザーが数字を削除した時

16. その他表現に関連する補足事項(1) UICollectionView
UICollectionViewFlowLayoutクラスを継承したクラスを利用する。
自作したUICollectionViewFlowLayoutを継承したクラス
を該当のUICollectionViewへ適用する

17. その他表現に関連する補足事項(2) Haptic Feedback
ボタン押下をユーザーに伝えるためのHaptic Feedbackを追加。
短く「コツッ!」としたフィードバックを与える一例:
まずはUIImpactFeedBackGeneratorのインスタンスを作成
然るべきタイミングでimpactOccurred()を実行させる
テンキーでパスコードを入力時 / 登録したパスコードと一致しなかった際にバイブレーションを発生
今回の部分で端末のフィードバックを伴う部分:

18. 今回の発表内容の補足と詳細
本日お話した内容に関しては下記の記事にもまとめております。
https://qiita.com/fumiyasac@github/items/6124f9b272f5ee6ebb40

19. 今回のまとめ
機能の実現だけに留まらないユーザーの配慮を意識した設計が重要
Point1) 画面の有効活用
このサンプル開発を通じて:
単純に機能を実現するための設計に加えて、AppDelegateのライフサイクルを活用した処理との連携部分につい
ても配慮が必要な点は注意するとより良い実装になるかと思います。さらにユーザー入力時の親切さにフォーカ
スに注目したUI/UXに関する実装を加えておく事でよりユーザーへの印象も良くなるのではと感じた。
Point2) UI/UX観点での配慮 Point3) AppDelegateとの連携
アプリのライフサイクルを活用した実装をする場合は、実行されるタイミングの見極めが大切
使い心地を意識したUI実装や触覚フィードバックを活用することで機能をさらに工夫ができる
画面を有効活用するための良い機能ロジックを初めから意識して取り組むと綺麗に仕上がる

20. Thank you for listening !