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

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

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

Sansan株式会社について 4

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

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

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

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

営業DXサービス「Sansan」 9

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

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

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

Sansan iOSの開発事例 13

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

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

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

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

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

© 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

© 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

© 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

© 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

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

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

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

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

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

Eight iOSの開発事例 28

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

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

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

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

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

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

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

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

名刺撮影機能の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

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

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

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

No content