Sansan iOS アプリの内側

こんにちは。 Sansan iOS アプリエンジニアの中川です。

Sansan iOS アプリは B to B アプリの性質上、 App Store のプレビューやログイン、新規登録くらいしか未登録ユーザーが触れられる領域がなく、ビジネスマンならともかく、エンジニアがそのアプリがどのような技術を使って、エンドユーザーへどんな体験を提供しているのかを知るのは難しいです。

そこで、今回はそんなエンジニア向けに Sansan iOS アプリを紹介してみます！

Sansan iOS アプリはとても多くの画面や機能から構成されていて、すべてを一度に紹介するのは大変なため、今回はタブ単位の紹介に留めます。

名刺一覧画面

ログイン後、最初に表示される画面です。「法人向け名刺管理サービス」のアプリなので、もちろん、ホーム画面は名刺一覧画面です。ここで表示される名刺はログインユーザーの名刺で、ナビゲーションバー下に固定されているソートバーから名刺交換日、氏名、会社名でそれぞれ昇順、降順を切り替えることができます。

f:id:ynakagawa33:20200317022023p:plain — 名刺一覧画面

こだわりのソート切り替えモーダル

今や、 iOS 13 でモーダル遷移をしようとすると、シートで表示され、シンプルなタスクをこなしたあとにすぐに遷移元の画面に戻ることができるようになりました。しかし、この機能が実装されたときは 2018 年の 6 月頃で iOS 11.4 が最新で、同年の 9 月の Apple のイベントにて iOS 12 や iPhone XS / XR / XS Max のビッグスクリーンの機種が登場したので、担当したエンジニアの UI のトレンドに対する嗅覚と自前で UI Components を作り上げた View Programming の練度の高さは未だに尊敬しています。

f:id:ynakagawa33:20200317024150g:plain — 自前実装されたソート切り替えモーダルの動き

フィード一覧画面

Sansan に取り込んだ名刺を元に名刺交換した人や企業に関するニュースが流れる画面です。表示されるニュースは 人事異動・連絡先変更 、 社内のニュース 、 企業のニュース の 3 種類でそれぞれ、以下の情報を知ることができます。

種類	情報
人事異動・連絡先変更	人事異動： Sansan のデータ統括部門 DSOC が共同通信社、ダイヤモンド社などから提供された情報を独自にまとめた情報、直接 DSOC から提供される情報、 Eight のプロフィールからの情報連絡先変更：同僚が登録した自分が過去に名刺交換をしたことがある人物の更新情報
社内のニュース	同僚が自分が過去に名刺交換をしたことがある人物や企業と名刺交換した情報
企業のニュース	名刺の社名に一致した企業の Web 上に公開された情報

ここから同僚に対して、気になったニュースをメッセージ機能を使って共有できたり、 社内のニュース や 人事異動・連絡先変更 であれば、フィード詳細画面から Sansan に蓄積された人物情報や企業情報の詳細へ移動でき、過去の経歴、接触 (電話、メール、面会) 履歴、メモ、同僚との接点情報を得られたり、情報の提供元となった同僚の詳細へ移動して、電話、メール、メッセージといった手段で迅速にコミュニケーションを取ることができます。

f:id:ynakagawa33:20200317031407g:plain — フィード一覧画面

同僚一覧画面

企業に所属する同僚の一覧が確認できる画面です。この画面から同僚を絞り込んで、電話をかけたり、メールを送ったりできるため、連絡帳としての側面を持ち合わせています。

Call Directory Extension を活用した発信者名表示機能

同僚や名刺に記載された電話番号から着信があった場合に Sansan に登録された情報を表示します。詳しい仕組みや運用改善に関する Tips は同チームの栗山の記事で解説されているので、興味ある方はぜひ、見てみてください。

buildersbox.corp-sansan.com

コンタクト一覧画面

自身と社外の人との接触 (電話、メール、面会) のことを Sansan ではコンタクトと表現し、ここでコンタクトの履歴の一覧を確認することができます。また、コンタクトを新規作成することができます。新規作成ボタン横の「訪問」・「来訪」の各種ボタンからはそれぞれのユースケースにおいて、最適なフローで入力の煩わしさをできるだけ、減らしています。

f:id:ynakagawa33:20200317040250g:plain — 訪問ボタンからの登録フロー。
最終的にほとんどの情報が埋まっているため、保存ボタンを押すだけで良い。

細部へのこだわり

コンタクト一覧画面ではボタンを押したというフィードバックをユーザに返してあげるためにマイクロインタラクションを取り入れています。

f:id:ynakagawa33:20200317043557g:plain — 0.2 倍速再生で見る訪問ボタン

コードは以下の通りで UIViewPropertyAnimator で UIButton に設定された UIImageView のアルファ値をアニメーションさせてます。

import UIKit

final class HighlightEffetctButton: UIButton {
    private var animator = UIViewPropertyAnimator()

    init() {
        super.init(frame: .zero)

        sharedInit()
    }

    override init(frame: CGRect) {
        super.init(frame: frame)

        sharedInit()
    }

    required init?(coder: NSCoder) {
        super.init(coder: coder)

        sharedInit()
    }

    @objc
    private func touchDown() {
        animator.stopAnimation(true)

        imageView?.alpha = 0.3
    }

    @objc
    private func touchUp() {
        animator = UIViewPropertyAnimator(duration: 0.8, curve: .easeOut) {
            self.imageView?.alpha = 1
        }

        animator.startAnimation()
    }

    private func sharedInit() {
        addTarget(self, action: #selector(touchDown), for: [.touchDown, .touchDragEnter])
        addTarget(self,
                  action: #selector(touchUp),
                  for: [.touchUpInside, .touchDragExit, .touchCancel])
    }
}

また、 Pull to refresh の体験についても、改善を入れました。 v5.4.0 より前の体験は以下のフィード一覧画面を見てもらうと分かるように一番下に引く前にイベントが走っていたり、ユーザーが指を離していないのにも関わらず、更新処理が走って、画面がカクつくため、アンコントローラブルな印象を与えていました。

f:id:ynakagawa33:20200317053151g:plain — v5.3.7 のフィード一覧画面の Pull to refresh (0.5 倍速)

v5.4.0 で実装されたコンタクト一覧画面では上記の問題の改善に含め、 iOS 標準のメールアプリに近い Pull to refresh を実現しています。

f:id:ynakagawa33:20200317054852g:plain — v5.4.0 のコンタクト一覧画面の Pull to refresh (0.5 倍速)

最後に

今回の記事は Sansan に触れたことがない iOS アプリエンジニアに対して、 Sansan iOS アプリの内部やエンジニアのこだわりを発信できたらと思い、まとめてみました。まだ、紹介できていない画面や機能もたくさんあるので、反響によっては続編を考えます。ぜひ、感想や知りたいことを記事へのコメントでも Twitter のリプライでも良いので教えて下さい！

twitter.com

buildersbox.corp-sansan.com