「出会い」の体験を向上させるために、私たちが向き合っていること

■イベント
iOSDC Japan 2023
https://iosdc.jp/2023/

■登壇概要
タイトル：「出会い」の体験を向上させるために、私たちが向き合っていること
登壇者：技術本部 Mobile Application Group　谷口尚

■iOSエンジニア 採用情報
https://media.sansan-engineering.com/ios-engineer

Transcript

1. iOSDC Japan 2023
   「出会い」の体験を向上させるために、
   私たちが向き合っていること
   Sansan株式会社
   技術本部 Mobile Application Group
   ⾕⼝尚
   1
   

   View Slide

2. 写真が入ります
   ⾕⼝ 尚
   Sansan株式会社
   技術本部 Mobile Application Group
   iOS アプリエンジニア。
   2020年7⽉Sansan株式会社に中途⼊社し、
   Eight iOSとSansan iOSの開発に関わっています。
   2
   

   View Slide

3. アジェンダ
   - Sansan株式会社の紹介
   > Sansanが提供しているプロダクト
   - 営業DXサービス「Sansan」とSansan iOSの開発事例
   > 企業情報のグラフ描画をSwift UIで実装
   - キャリアプロフィール「Eight」とEight iOSの開発事例
   > Core Bluetoothを活⽤した名刺交換
   - iOSアプリの名刺撮影機能とその技術
   - Sansanメンバーのセッションとスポンサーブースの紹介
   © Sansan, Inc.
   3
   

   View Slide

4. Sansan株式会社について
   4
   

   View Slide

5. 出会いから
   イノベーションを⽣み出す
   © Sansan, Inc.
   

   View Slide

6. 働き⽅を変えるDXサービス
   6
   

   View Slide

7. 働き⽅を変えるDXサービス
   提供サービス ｜ 概要
   7
   Sansanは、名刺というアナログ情報をデジタル化してデータとして
   活⽤できるようにすることで、
   企業の課題解決を⽀援してきました。
   これからは、名刺管理という分野に限らず、
   営業、経理、契約、キャリアといった
   より幅広い領域でサービスを展開していくことで、
   DXを推進し、働き⽅を変えていきます。
   Sansanの働き⽅を変えるDXサービスが、
   企業とビジネスパーソンの課題解決を後押しします。
   

   View Slide

8. 働き⽅を変えるDXサービス
   提供サービス ｜ 概要
   8
   ⼈や企業との出会いをビジネスチャンスにつなげる「働き⽅を変えるDXサービス」を提供
   ビジネスフローにおけるさまざまな分野でサービスを展開
   請求 キャリア
   管理
   キャリアDX
   営業
   営業DX
   契約
   契約DX 経理DX
   個⼈向けDX
   法⼈向けDX
   必要な情報を
   すぐに⾒つけられる
   情報の管理がしやすく
   すぐに共有できる
   情報を分析・活⽤しやすく
   データに基づいた判断ができる
   SansanのDXサービスの活⽤で変わる働き⽅
   

   View Slide

9. 営業DXサービス「Sansan」
   9
   

   View Slide

10. 営業DXサービス「Sansan」
    提供サービス ｜ Sansan
    10
    営業を強くするデータベース
    名刺管理を超えた営業DXサービスです。
    100万件以上の企業情報があらかじめ搭載され、
    名刺やメールといった接点の情報を集約して、
    あらゆる顧客情報の営業活⽤を実現します。
    

    View Slide

11. 11
    Sansanの特⻑
    サービス ｜ Sansan
    名刺
    メールの
    やりとり
    ウェブフォームの
    ⼊⼒内容
    商談のメモ
    セミナーの
    参加者情報
    名刺以外の接点情報も全社で共有 さまざまな企業情報を標準搭載
    100万件を超える企業情報
    20万件の
    役職者情報
    拠点情報
    企業の
    リスク情報
    ⼈事異動情報
    名刺をはじめとした顧客との接点情報や企業情報など、
    あらゆる顧客に関する情報を⼀元管理して全社で共有できるようになります。
    

    View Slide

12. Sansanを使うメリット
    サービス ｜ Sansan
    あらゆる顧客情報を活⽤することで、顧客をより深く理解した営業活動ができるようになり、
    営業成果を最⼤化していくことができます。
    顧客の最新の状態が
    分かる
    提案の質や⾏動量を
    ⾼められる
    さまざまなチャネルから
    アプローチできる
    外部システムと連携させて
    データを活⽤できる
    

    View Slide

13. Sansan iOSの開発事例
    13
    

    View Slide

14. © Sansan, Inc.
    Sansan iOSアプリの開発⼿法
    開発事例 ｜ Sansan iOS
    14
    - リリースするまでの道のり
    > 新機能の企画からリリースまで
    > リリース後のクラッシュチェック
    やKPI検証など
    APIの
    IFレビュー
    キックオフ
    PdMレビュー
    QA
    詳細設計
    計画&基本設計
    リリース
    

    View Slide

15. © Sansan, Inc.
    企業情報をモバイルアプリで閲覧
    開発事例 ｜ Sansan iOS
    - Sansanが提供する企業情報をモバ
    イルアプリで閲覧
    - 「業績」・「事業構成」の
    グラフ描画をSwiftUIで実現
    15
    

    View Slide

16. © Sansan, Inc.
    SwiftUIを⽤いたグラフ描画
    開発事例 ｜ Sansan iOS
    - Swift Charts
    > iOS 16から利⽤可能
    https://developer.apple.com/documentation/charts
    16
    

    View Slide

17. © Sansan, Inc.
    SwiftUIを⽤いたグラフ描画
    開発事例 ｜ Sansan iOS
    - Sansan iOSのサポートOSはiOS 14~
    > Swift Chartsのフレームワークは利
    ⽤できない
    - SwiftUIで、棒グラフと円グラフを実
    装することに
    > UIKitで実装された画⾯のなかに組
    み込む形で表⽰
    - Micro View Controller
    - MewのInjectable / Interactable
    > UIHostingController
    17
    

    View Slide

18. © Sansan, Inc.
    Pathを⽤いた円グラフの描画
    開発事例 ｜ Sansan iOS
    - Path を利⽤
    > https://developer.apple.com/docu
    mentation/swiftui/path
    - この View のにある円グラフの
    実装例を紹介します
    18
    

    View Slide

19. © Sansan, Inc.
    Pathを⽤いた円グラフの描画
    開発事例 ｜ Sansan iOS
    struct PieChartView: View {
    struct PieSlice: Identifiable { ...略... }
    struct PieSliceShape: Shape { ...略... }
    let pieSlices: [PieSlice]
    var body: some View {
    ZStack {
    ForEach(pieSlices) { slice in
    PieSliceShape(startAngle: slice.startAngle,
    endAngle: slice.endAngle)
    .fill(slice.fillColor)
    } }
    }
    }
    - 円グラフのViewの全体像
    > 各ブロックごとにコードを⾒てい
    きます
    19
    

    View Slide

20. © Sansan, Inc.
    Pathを⽤いた円グラフの描画
    開発事例 ｜ Sansan iOS
    - 円グラフを構成する
    要素のstructを定義
    > ratio: 割合
    > startAngle, engAngle
    - Angle: ⾓度を扱う
    - https://developer.apple.com/doc
    umentation/swiftui/angle
    struct PieSlice: Identifiable {
    let ratio: Double
    let fillColor: Color
    let startAngle: Angle
    let endAngle: Angle
    let id: UUID = .init()
    }
    20
    

    View Slide

21. © Sansan, Inc.
    Pathを⽤いた円グラフの描画
    開発事例 ｜ Sansan iOS
    struct PieSliceShape: Shape {
    let startAngle: Angle
    let endAngle: Angle
    func path(in rect: CGRect) -> Path {
    // let center = ..., let radius = ...
    var path = Path()
    path.move(to: center)
    path.addArc(center: center, radius: radius,
    startAngle: startAngle, endAngle: endAngle, clockwise: false)
    path.closeSubpath()
    return path
    }
    }
    - つづいて、Shape 型である
    PieSliceShape を定義
    > center: 中⼼点
    > radius: 半径
    21
    

    View Slide

22. © Sansan, Inc.
    Pathを⽤いた円グラフの描画
    開発事例 ｜ Sansan iOS
    - PieSliceShape: Shape をZStackで
    積むことで円グラフを描画
    > pieSlices: PieSlices は円グラフを
    構成するstruct
    var body: some View {
    ZStack {
    ForEach(pieSlices) { slice in
    PieSliceShape(startAngle: slice.startAngle,
    endAngle: slice.endAngle)
    .fill(slice.fillColor)
    }
    }
    }
    22
    

    View Slide

23. キャリアプロフィール「Eight」
    23
    

    View Slide

24. © Sansan, Inc.
    キャリアプロフィール「Eight」
    24
    提供サービス ｜ Eight
    © Sansan, Inc.
    相 ⼿ の 名 刺 、 ⾃ 分 の 名 刺 、 紙 の 名 刺 や オ ン ラ イ ン 名 刺 。
    あ ら ゆ る 名 刺 を E i g h t に ス キ ャ ン す る だ け で 、 こ れ ま で 培 っ て き た ⼈ 脈 や ス キ ル 、
    職 歴 な ど を 中 ⼼ に 、 ⾃ 分 だ け の キ ャ リ ア プ ロ フ ィ ー ル が ⾃ 動 で 作 成 さ れ ま す 。
    キ ャ リ ア プ ロ フ ィ ー ル 「 E i g h t 」 が 、 ビ ジ ネ ス の ラ イ フ タ イ ム に 伴 ⾛ し 、
    昇 進 や 転 職 、 キ ャ リ ア チ ェ ン ジ し た 後 も 変 わ る こ と な く 、 キ ャ リ ア 形 成 に エ ッ ジ を
    ⽴ て る お ⼿ 伝 い を し ま す 。
    

    View Slide

25. © Sansan, Inc.
    Eightの提供価値
    25
    提供サービス ｜ Eight
    プロフィールを
    ⾃動作成
    名刺情報を
    管理・検索
    キャリア情報に
    出会える
    企業から
    スカウトが届く
    近況情報が届く
    名刺管理から転職まで、ビジネスのライフタイムに伴⾛できるキャリアプロフィールアプリに進化。
    

    View Slide

26. © Sansan, Inc.
    Eightのオンライン名刺機能
    26
    提供サービス ｜ Eight
    バーチャル背景への埋め込み
    名刺共有⽤の
    URLやQRコード⽣成
    Bluetoothでも
    オンラインミーティングの普及に対応し、
    QRコード、URL、Bluetooth等で名刺データを交換できます。
    QRコードは、株式会社デンソーウェーブの登録商標です
    

    View Slide

27. © Sansan, Inc.
    Eightをプラットフォームとした事業展開
    27
    提供サービス ｜ Eight
    300万⼈のキャリアプロフィールアプリ「Eight」から派⽣した
    新たな出会いを⽣み出すサービスを展開。
    ビジネスイベント
    個⼈向け有料プラン
    プロフェッショナルリクルーティング
    中⼩企業向け名刺管理サービス
    

    View Slide

28. Eight iOSの開発事例
    28
    

    View Slide

29. Eight iOSアプリの開発⼿法
    © Sansan, Inc.
    開発事例 ｜ Eight iOS
    - Eight iOSアプリの開発⼿法
    > 1週間のスプリント
    - スプリント計画
    - 開発 (設計 / 実装)
    - スプリントレビュー
    > チームで開発をどう進めているか
    > Eight iOSのアーキテクチャ
    - ※ Coordinatorパターンは廃⽌
    - 現⾏はViewAssemblerパターンを採⽤
    > 実装例
    29
    

    View Slide

30. Core Bluetoothを活⽤した名刺交換
    © Sansan, Inc.
    開発事例 ｜ Eight iOS
    - 利⽤⼿順
    > ホームタブで
    「名刺交換する」をタップ
    > オンライン名刺交換
    画⾯を表⽰
    > Eightユーザー同⼠でこの画⾯を
    開いたまま端末を近づける
    - Eightは名刺をお持ちでない場合で
    も利⽤できます
    30
    

    View Slide

31. Core Bluetoothを活⽤した名刺交換
    © Sansan, Inc.
    開発事例 ｜ Eight iOS
    - 技術的トピック
    > RSSIとTxPowerから距離の推定
    - RSSI - 受信機（iOS デバイス）が受信した電波の強度を⽰す
    - TxPower - 送信機が発する電波の強さを⽰す
    > Core Bluetoothにおける距離推定
    - Eight iOSで実装された距離推定ロジック
    - 詳しくは 1⽇⽬ 17:15〜 Track A ルーキーズLT 内の藤⾨のLTにて！
    > 実践CoreBluetoothプログラミング〜BLEの基礎から距離推定までを
    わかりやすく解説！〜
    31
    

    View Slide

32. 名刺撮影機能のCore MLの活⽤
    32
    

    View Slide

33. 名刺のデータ化フロー
    https://buildersbox.corp-sansan.com/entry/2022/11/01/110000
    © Sansan, Inc.
    開発事例 ｜ Core ML
    - GEES
    > 名刺のデータ化システム
    > セキュア、⾼精度、低コスト
    33
    

    View Slide

34. Smart Captured
    https://buildersbox.corp-sansan.com/entry/2022/11/01/110000
    © Sansan, Inc.
    開発事例 ｜ Core ML
    - GEES
    > ⼈⼿を介したフローで、⾮常に⾼精度
    > その代わりに、読み取り直後にデータ化ができない
    - Smart Captured
    > ユーザーはすぐに名刺の認識結果を確認できる
    - GEESとSmart Capturedとの併⽤
    > GEESのデータ化が終わったとき、差分更新することで、
    速度と精度を両⽴させている
    34
    

    View Slide

35. Smart Capturedの処理の流れ
    https://buildersbox.corp-sansan.com/entry/2022/11/01/110000
    © Sansan, Inc.
    開発事例 ｜ Core ML
    - モバイル上で名刺の検出・切り取り
    - 名刺画像をサーバーに転送
    - OCR結果を受け取る
    35
    

    View Slide

36. 名刺撮影機能のCore MLの活⽤
    https://buildersbox.corp-sansan.com/entry/2022/11/01/110000
    © Sansan, Inc.
    開発事例 ｜ Core ML
    - オンデバイスのリアルタイム名刺検出
    > 名刺検出
    - 名刺の矩形を検出
    > 名刺切り出し
    - セグメンテーション
    - Core MLによるパフォーマンス向上
    > モデルをCore MLに変換することで、矩形検出のパフォーマンスを
    300％向上 (TensorFlow 対⽐)
    36
    

    View Slide

37. 名刺撮影機能のCore MLの活⽤
    https://buildersbox.corp-sansan.com/entry/2022/11/25/110000
    © Sansan, Inc.
    開発事例 ｜ Core ML
    - Core MLによるパフォーマンス向上の理由
    > GPU, Neural Engineの活⽤
    > iOSデバイスの性能を最⼤限引き出す
    - Neural Engine
    > ニューラルネットワークの演算を⾼速処理するプロセッサ
    > Core MLで利⽤されるのは2018年のA12 Bionic以降
    37
    

    View Slide

38. Core MLモデルへの変換
    https://buildersbox.corp-sansan.com/entry/2022/11/25/110000
    © Sansan, Inc.
    開発事例 ｜ Core ML
    - Core ML Tools
    > https://github.com/apple/coremltools
    - 詳細な内容は Sansan Tech Blog にて！
    > 【研究開発部の技術】第4回 coremltoolsを⽤いたCore MLモデルへの変換
    38
    

    View Slide

39. まとめ
    © Sansan, Inc.
    開発事例
    - SwiftUI
    > Sansan iOS - モバイルアプリでユーザーに企業情報を提供する
    - Core Bluetooth
    > Eight iOS - Eightユーザー間の名刺交換の体験を改善する
    - Core ML
    > 名刺撮影 - 利便性と速さを両⽴させる
    39
    

    View Slide

40. Sansan 技術本部
    iOSエンジニア採⽤情報
    https://media.sansan-engineering.com/ios-engineer
    

    View Slide

41. View Slide