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

Slide 1

Slide 1 text

Slide 2

Slide 2 text

© 2025 ANDPAD All Rights Reserved. Conﬁdential Conﬁdential 2 ● ANDPAD・ANDPADの写真書き込み機能について ○ ANDPADとは ○ エンハンス前と抱えていた課題 ○ 課題解決のためのエンハンス後 ● 写真書き込み機能の実装について ○ アーキテクチャ ○ プロトコルによる抽象化 ○ 継承によるロジックの共通化 ● 写真書き込み機能の現在とエンハンスの振り返り目次

Slide 3

Slide 3 text

Slide 4

Slide 4 text

© 2025 ANDPAD All Rights Reserved. Conﬁdential Conﬁdential 4 写真書き込み機能について写真上にフリーハンドの線や図形、テキストを追加することができる写真書き込み機能の目的主に、建設現場での情報共有の正確性と効率向上のために活用される。現場写真に直接、施工箇所、是正事項などの詳細情報を書き込むことで、口頭や文章だけでは伝わりにくい情報を視覚的に伝達することが目的。

Slide 5

Slide 5 text

Slide 6

Slide 6 text

© 2025 ANDPAD All Rights Reserved. Conﬁdential Conﬁdential 6 現場が抱える課題と要望 1. 正確な情報伝達の難しさフリーハンドの手書きのみでは、線がブレて指示が不明瞭になりがち。 👉 施工箇所を正確に、誤解なく伝えたい 2. 書き込み作業の「手間」と「時間」細かい指示や修正が必要な場合、書き直しに時間がかかり、現場監督や営業の方の貴重な時間を浪費している。 👉 作業効率を上げ、ストレスなく書き込みたい 3. 情報の密度・柔軟性の欠如詳細な指示（複雑な施工箇所など）を書き込む際の表現力に限界がある。 👉現場状況に応じて、詳細かつ柔軟に情報を残したい

Slide 7

Slide 7 text

© 2025 ANDPAD All Rights Reserved. Conﬁdential Conﬁdential 7 エンハンス後の写真書き込み機能追加で実装した機能 ● 図形挿入(直線、矢印、四角、楕円) ● 配置後のサイズ・色・線の太さの変更 ● Undo・Redo 💡 図形挿入によって、より正確で柔軟な表現が可能に 💡 リサイズ機能や色・太さ変更、Undo/Redo によって、編集の手間を大きく削減

Slide 8

Slide 8 text

Slide 9

Slide 9 text

© 2025 ANDPAD All Rights Reserved. Conﬁdential Conﬁdential 9 アーキテクチャ・DrawingLayerProtocolによる抽象化 class PhotoEditingViewModel { // 写真上に追加されたオブジェクトなど @Published var drawingLayers: [any DrawingLayerProtocol] = [] } protocol DrawingLayerProtocol { // オブジェクトが描画されるレイヤー var renderingLayer: CALayer { get } // renderingLayerを編集して、オブジェクト描画する func draw() // オブジェクトの種類や色、座標など描画するために必要な情報 } MVVMを採用。ViewModelは写真上に配置されたオブジェクトの情報を、抽象化された状態で保持。 CALayer上で実装されたオブジェクトをViewControllerでimageViewのSubLayerに追加。

Slide 10

Slide 10 text

Slide 11

Slide 11 text

© 2025 ANDPAD All Rights Reserved. Conﬁdential Conﬁdential 11 継承による、リサイズ処理の共通化直線と矢印は見た目が異なるが、「リサイズ」や「移動」の処理は共通なので、基底クラスを実装して処理を共通化。共通化できない点はそれぞれのサブクラスで実装。 class ResizableLineDrawingLayer: DrawingLayerProtocol { func updateLength() { // 長さを更新 } func move() { // オブジェクトの移動 } // 他、サイズ変更のポインターを描画する処理など func draw() { assert(false, "Implement in sub-class!") } }

Slide 12

Slide 12 text

© 2025 ANDPAD All Rights Reserved. Conﬁdential Conﬁdential class ResizableFrameDrawingLayer: DrawingLayerProtocol { func updateShape() { // 形を更新 } func move() { // オブジェクトの移動 } // 他、サイズ変更のポインターを描画する処理など func draw() { assert(false, "Implement in sub-class!") } } 12 四角形、楕円も同様に共通化

Slide 13

Slide 13 text

Slide 14

Slide 14 text

© 2025 ANDPAD All Rights Reserved. Conﬁdential Conﬁdential 14 写真書き込み機能の現在、エンハンスの振り返り現在はアップデートが行われ、三角形の挿入、図形の角度調整が行えるようになっている。 DrawingLayerProtocolに準拠して実装を行うことで簡単に新しい図形の追加ができた。設計工夫でスムーズに追加の顧客対応を行うための基盤を実装することができた。

Slide 15

Slide 15 text

Slide 16

Slide 16 text

Slide 17

Slide 17 text

© 2025 ANDPAD All Rights Reserved. Conﬁdential Conﬁdential 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