KANNA Android の技術的課題と取り組み

by Yosuke Watanabe

Slide 1

Slide 1 text

Androidアプリ開発開発組織が向き合う課題と戦略 Findy Job LT 2025.04.23 渡邊陽介株式会社アルダグラム

Slide 2

Slide 2 text

• 渡邊陽介 • 株式会社アルダグラム (2022年9月〜) • Android / iOS (直近7年はほぼ Android) 自己紹介

Slide 3

Slide 3 text

• 株式会社アルダグラム • 設立: 2019年5月 • 現場 DX サービス「KANNA」 • 建設業、不動産業、製造業など、あらゆる現場の生産性向上を実現 • グローバルに展開 • 東南アジアを中心に世界70カ国以上会社紹介

Slide 4

Slide 4 text

• KANNA Android アプリの技術スタック • 開発体制の紹介 • 開発した機能の紹介 • 課題 • 今後の展望 • おまけアジェンダ

Slide 5

Slide 5 text

• React Native で作られている • 一部機能をネイティブで実装 • Android なら Kotlin + Compose、iOS なら Swift + SwiftUI • 現在は KMP + CMP で Android / iOS の両方を一つのコードで開発 • 採用した理由は後述 • ※ KMP = Kotlin Multiplatform、CMP = Compose Multiplatform • GraphQL • チャットなどの一部機能で Firestore を使用 KANNA Android アプリの技術スタック

Slide 6

Slide 6 text

• Android 公式ドキュメントの Guide to app architecture を参考 • Repository + (UseCase) + ViewModel + Compose • Gradle はマルチモジュール構成 • Google が公開しているサンプルプロジェクト now in android を参考 • テストはできる限り書くようにチームとして意識 • JUnit 4 / Robolectric • 特殊な構成にしないことで、新規メンバーも把握しやすいように KANNA Android アプリのアーキテクチャ

Slide 7

Slide 7 text

開発体制の紹介

Slide 8

Slide 8 text

• アプリチーム6名 (正社員3名、業務委託3名) • Android: 3名、iOS: 3名 • スクラム開発: 1週間のスプリント • 機能開発時には DesignDoc を書く • 開発する機能によっては、他チームと連携して開発 • API / デザイン開発体制の紹介

Slide 9

Slide 9 text

• 数ある機能の中から以下の機能を今回紹介 • 写真・PDF の編集 • 帳票開発した機能の紹介

Slide 10

Slide 10 text

• 写真・PDF に対して、線やテキストを書き込める • プレビューでは以下の操作が可能 • 書き込んだ内容の移動、回転、拡大縮小、削除、Undo / Redo • テキストの再編集 • 写真自体の拡大・回転 • 「完了」ボタンを押すとファイル保存写真・PDF の編集 - 機能説明 -

Slide 11

Slide 11 text

• Compose ではなく Android View で実装 • 写真の表示: panpf/zoomimage • 写真の拡大表示だけでなく、回転表示もサポート • PDF の表示: TalbotGooday/AndroidPdfViewer • PDF の編集: TomRoush/PdfBox-Android 写真・PDF の編集 - 技術詳細 -

Slide 12

Slide 12 text

• プレビュー表示時は Canvas に対して描画 • 描画された線やテキストの情報はオンメモリで保持しておく • 線の場合は軌跡の点の座標を保持写真・PDF の編集 - 技術詳細 -

Slide 13

Slide 13 text

• この時保持する座標は画面上の座標ではなく、写真・PDF の座標系に変換して保持 • 写真を画面上に表示するための変換行列と同じ行列を、線やテキストにも適用して描画できる • こうすることで写真を拡大や回転しても、書き込んだ内容が写真に対して常に同じ位置に表示される写真・PDF の編集 - 技術詳細 -

Slide 14

Slide 14 text

• 「完了」ボタンを押したら、線やテキストの情報を写真や PDF に書き込んでファイル保存 • 写真の場合は Canvas に全て書き込んだ上で画像ファイルに出力 • PDF は編集用のライブラリを使用 • 日本語を表示するにはフォントのロードが必要 • 詳細はブログ記事にて: bit.ly/3DXkpmA • PDF に書き込む時は y 軸が反転するので注意 • 画面上では左上が原点で y 座標は下向きに正だが、PDF は左下が原点で上向きに正写真・PDF の編集 - 技術詳細 -

Slide 15

Slide 15 text

• Excel で作られている帳票の雛形を取り込むことで、自由に電子帳票を作成できる • 紙で管理していたものをペーパーレス化 • アプリでは帳票の表示・編集が行える • 入力は文字、数値、日付、押印、ドロップダウン選択、画像挿入など様々 • エクセルの一部関数や四則演算もサポート帳票 - 機能説明 -

Slide 16

Slide 16 text

• 帳票は WebView で HTML を表示 • TypeScript を使って DOM の操作を行ったり、ネイティブと連携 • JavaScript を使うのは辛いので… 帳票 - 技術詳細 -

Slide 17

Slide 17 text

• TypeScript → JavaScript へのトランスパイルはカスタムの Gradle プラグインを作成 • android/gradle-recipes の addGeneratedSourceFolder というサンプルを参考 • ビルド時に自動生成されたファイルを assets ディレクトリに格納できる • これでビルド時にトランスパイルが実行され、変換後の JavaScript ファイルを assets ディレクトリに格納できる • ブログ記事: bit.ly/4jmKKJE 帳票 - 技術詳細 -

Slide 18

Slide 18 text

• エクセルに元々設定されていた数式や関数は帳票でも使えるように再現 • 四則演算 • SUM / IF / AND / AVERAGE / ROUND / ISBLANK / MAX / MIN / COUNT • 関数・数式にセルの値を埋め込んで評価 • 「A1=B1+C1」のような数式があり、B1のセルに5、C1のセルに3が入力されていた場合、「5+3」を評価して結果をA1のセルに表示帳票の関数・数式 - 機能説明 -

Slide 19

Slide 19 text

• 関数・数式には依存関係があるので、依存関係順の評価が必要 • 関数が参照しているセルを有向グラフで表してトポロジカルソートする • 「A1=B1+C1」「B1=C1+D1」のような場合、後者を先に評価帳票の関数・数式 - 技術詳細 -

Slide 20

Slide 20 text

• 関数・数式の評価は math.js を使って JavaScript 側で行なっている • 「2 + 3」のような数式を評価してくれる • SUM などの関数は評価できないので、math.import を使って独自関数を定義して評価帳票の関数・数式 - 技術詳細 -

Slide 21

Slide 21 text

• セルの値の置換に構文解析を使用 • 「IF(A1>0, “B1”,C1)」のような関数の場合、B1は文字列なのでセルの値に置換してはダメ • 正規表現だと判定が難しい • 関数はネストして書くことができるので複雑になる • 構文解析 : 文法規則に従っているかをチェックし、構造を解析する • プログラミング言語でも使われている • 構文解析には Strumenta/antlr-kotlin を使用帳票の関数・数式 - 技術詳細 -

Slide 22

Slide 22 text

帳票の関数・数式 - 技術詳細 -

Slide 23

Slide 23 text

• 会社設立当初は Web エンジニアが少人数でモバイルアプリも開発 • React が得意なメンバーが集まっていたため、React Native を採用 • アプリ開発を進めていく中で、高度な機能開発が増えていき、アプリチームが組成された課題

Slide 24

Slide 24 text

• アプリチームにはモバイルアプリ開発が得意なメンバーが多く、 React Native に精通していない • ネイティブへの置き換えを検討 • メンテされていないライブラリを使っている関係で、React Native 自体のバージョンや周辺ライブラリのアップデートが容易に行えない • アプリの動作がネイティブと比較して遅い • 海外では Android ユーザーが多いが、使用端末のスペックが高くない課題

Slide 25

Slide 25 text

• 新機能開発や既存の一部の画面を Android / iOS でそれぞれネイティブ実装を行なった • React Native ではネイティブと連携したり、ネイティブの画面を表示する仕組みが提供されている • しかしここでも課題が発生 • Android / iOS それぞれで実装が必要なので工数がかかる • 実装の細かい部分でコミュニケーションコストがかかる • エンジニアのリソース不足課題

Slide 26

Slide 26 text

• 課題を解決するために KMP / CMP を採用 • 採用した理由 • Android / iOS の開発が UI も含めて1つのコードで行える • 仮に今後 KMP / CMP が廃れていっても、Android 側はそのまま資産として残る • Google や JetBrains が KMP / CMP をサポート • 実際に2ヶ月ほど KMP / CMP で置き換えできるかを試し、UX を損ねることなく置き換えられそうだった課題

Slide 27

Slide 27 text

• KMP / CMP を使って React Native を脱却していく • 現在15%程度の画面が移行済み • 2年後には React Native を取り除くことを目標 • AI を活用した開発 • 現状でもテストコードや簡易な画面の作成は AI を使っている • 現在色々と検証中 • React Native の画面のコードから Compose の画面のコードを作る、等今後の展望

Slide 28

Slide 28 text

• 弊社では Android エンジニアの需要が高い • KMP / CMP への移行対応のため • 今後新規機能開発も KMP / CMP を使うため • また今後さらなる海外展開を見据えているため、ますます Android アプリの重要度は高まる • 特に東南アジアは Android ユーザーの比率が高い • Android エンジニアを絶賛募集中アルダグラムにおける Android アプリの重要性

Slide 29

Slide 29 text

ご清聴ありがとうございました

Slide 30

Slide 30 text

• CMP では SwiftUI の画面を表示できると公式ドキュメントに記載がある • https://www.jetbrains.com/help/kotlin-multiplatform-dev/compose-swiftui- integration.html • KANNA で SwiftUI で実装したリスト系の画面を CMP で表示させてみたが、スクロールしても反応しなかったおまけ: CMP でハマったこと

Slide 31

Slide 31 text

• Issue はあったが進展はなし • https://youtrack.jetbrains.com/issue/CMP-6828 • 調査してみたところ、Compose 側のジェスチャーと SwiftUI 側のジェスチャーが競合してしまい、Compose 側のジェスチャーが優先されていた • ワークアラウンドとして Compose 側のジェスチャーの優先度を下げる処理を iOS で実装し、スクロールできるようになった • https://gist.github.com/watabee/fa4ce518c309aa1dbabf3e748a42414b おまけ: CMP でハマったこと

Slide 32

Slide 32 text

おまけ: CMP でハマったこと