「もっと正確に、もっと効率的に」ANDPADの写真書き込み機能における、 現場の声を形にしたエンハンス

山根 大生
2025 年 11 月 13 日
【日経×ニフティ×アンドパッド】モバイルアプリでつなぐ現場と暮らし〜情報が“届く”を再設計する〜

Transcript

1. © 2025 ANDPAD All Rights Reserved. Confidential 1 「もっと正確に、もっと効率的に」：ANDPADの写真書き込み機能における、 現場の声を形にしたエンハンス 株式会社アンドパッド　山根大生
2. © 2025 ANDPAD All Rights Reserved. Confidential Confidential 2 • ANDPAD・ANDPADの写真書き込み機能について ◦ ANDPADとは ◦ エンハンス前と抱えていた課題 ◦ 課題解決のためのエンハンス後 • 写真書き込み機能の実装について ◦ アーキテクチャ ◦ プロトコルによる抽象化 ◦ 継承によるロジックの共通化 • 写真書き込み機能の現在とエンハンスの振り返り 目次
3. © 2024 ANDPAD All Rights Reserved. Confidential ANDPADとは 社内 現場 営業 / 監督 / 設計 事務 / 管理職 職人 / 業者 メーカー / 流通 現場の効率化から経営改善まで一元管理できる クラウド型建設プロジェクト管理サービス 案件管理 資料 工程表 写真 報告 チャット 黒板 図面 受発注 •　•　• 
 

4. © 2025 ANDPAD All Rights Reserved. Confidential Confidential 4 写真書き込み機能について 写真上にフリーハンドの線や図形、テキストを追 加することができる 写真書き込み機能の目的 主に、建設現場での情報共有の正確性と効率向上 のために活用される。 現場写真に直接、施工箇所、是正事項などの詳細 情報を書き込むことで、口頭や文章だけでは伝わ りにくい情報を視覚的に伝達することが目的。
5. © 2025 ANDPAD All Rights Reserved. Confidential Confidential 5 ANDPADの写真書き込み機能について(エンハンス前) 提供されていた機能 • フリーハンドの書き込み • 消しゴム • テキスト挿入
6. © 2025 ANDPAD All Rights Reserved. Confidential Confidential 6 現場が抱える課題と要望 1. 正確な情報伝達の難しさ フリーハンドの手書きのみでは、線がブレて指示が不明瞭になりがち。 👉 施工箇所を正確に、誤解なく伝えたい 2. 書き込み作業の「手間」と「時間」 細かい指示や修正が必要な場合、書き直しに時間がかかり、現場監督や営業の方の貴重な時 間を浪費している。 👉 作業効率を上げ、ストレスなく書き込みたい 3. 情報の密度・柔軟性の欠如 詳細な指示（複雑な施工箇所など）を書き込む際の表現力に限界がある。 👉現場状況に応じて、詳細かつ柔軟に情報を残したい
7. © 2025 ANDPAD All Rights Reserved. Confidential Confidential 7 エンハンス後の写真書き込み機能 追加で実装した機能 • 図形挿入(直線、矢印、四角、楕円) • 配置後のサイズ・色・線の太さの変更 • Undo・Redo 💡 図形挿入によって、より正確で柔軟な表現が 可能に 💡 リサイズ機能や色・太さ変更、Undo/Redo によって、編集の手間を大きく削減
8. © 2025 ANDPAD All Rights Reserved. Confidential 8 写真書き込み機能の実装について
9. © 2025 ANDPAD All Rights Reserved. Confidential Confidential 9 アーキテクチャ・DrawingLayerProtocolによる抽象化 class PhotoEditingViewModel { // 写真上に追加されたオブジェクトなど @Published var drawingLayers: [any DrawingLayerProtocol] = [] } protocol DrawingLayerProtocol { // オブジェクトが描画されるレイヤー var renderingLayer: CALayer { get } // renderingLayerを編集して、オブジェクト描画する func draw() // オブジェクトの種類や色、座標など描画するために必要な情報 } MVVMを採用。ViewModelは写真上に配置されたオブジェクトの情報を、抽象化された状態で保持。 CALayer上で実装されたオブジェクトをViewControllerでimageViewのSubLayerに追加。
10. © 2025 ANDPAD All Rights Reserved. Confidential Confidential 10 各レイヤーの準拠・継承の関連図 準拠 継承
11. © 2025 ANDPAD All Rights Reserved. Confidential Confidential 11 継承による、リサイズ処理の共通化 直線と矢印は見た目が異なるが、「リサイズ」や「移動」の処理は共通なので、基底クラスを実装し て処理を共通化。 共通化できない点はそれぞれのサブクラスで実装。 class ResizableLineDrawingLayer: DrawingLayerProtocol { func updateLength() { // 長さを更新 } func move() { // オブジェクトの移動 } // 他、サイズ変更のポインターを描画する処理など func draw() { assert(false, "Implement in sub-class!") } }
12. © 2025 ANDPAD All Rights Reserved. Confidential Confidential class ResizableFrameDrawingLayer: DrawingLayerProtocol { func updateShape() { // 形を更新 } func move() { // オブジェクトの移動 } // 他、サイズ変更のポインターを描画する処理など func draw() { assert(false, "Implement in sub-class!") } } 12 四角形、楕円も同様に共通化
13. © 2025 ANDPAD All Rights Reserved. Confidential 13 写真書き込み機能の現在、振り返り
14. © 2025 ANDPAD All Rights Reserved. Confidential Confidential 14 写真書き込み機能の現在、エンハンスの振り返り 現在はアップデートが行われ、三角形の挿入、図形の 角度調整が行えるようになっている。 DrawingLayerProtocolに準拠して実装を行うことで 簡単に新しい図形の追加ができた。 設計工夫でスムーズに追加の顧客対応を行うための基 盤を実装することができた。
15. © 2025 ANDPAD All Rights Reserved. Confidential Confidential 15 まとめ • 顧客要望をもとに写真書き込み機能エンハンスを行った • 実装では、抽象化・継承を活用して、処理の共通化を行った • 設計の工夫によって、追加の要望にスムーズに対応できるようになった 設計の重要性を身をもって再認識することができました🙌
16. © 2025 ANDPAD All Rights Reserved. Confidential 16 宣伝
17. © 2025 ANDPAD All Rights Reserved. Confidential Confidential 17 今年もiOSDCのアーカイブが公開されました🙌 アンドパッドから2名のエンジニアが登壇しました ネイティブ製ガントチャートUIを作って学ぶ UICollectionViewLayoutの威力 https://youtu.be/8_9GmPn7URA?si=Xd2eAoX_KWNtQSjI iOS→Flutter→iOS帰還：消えないFlutterの 傷跡 https://youtu.be/gplNWVPV14o?si=rGsLqIBIG6Gz-i30 スポンサーセッション LT
18. © 2025 ANDPAD All Rights Reserved. Confidential 18 ありがとうございました