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

2025年4月23日開催、Findy 様主催の【Androidエンジニア特集】Androidアプリ開発 開発組織が向き合う課題と戦略 という技術イベントの登壇資料です。

Transcript

1. Androidアプリ開発 開発組織が向き合う課題と戦略 Findy Job LT 2025.04.23 渡邊 陽介 株式会社アルダグラム
2. • 渡邊 陽介 • 株式会社アルダグラム (2022年9月〜) • Android / iOS (直近7年はほぼ Android) 自己紹介
3. • 株式会社アルダグラム • 設立: 2019年5月 • 現場 DX サービス「KANNA」 • 建設業、不動産業、製造業など、あらゆる 現場の生産性向上を実現 • グローバルに展開 • 東南アジアを中心に世界70カ国以上 会社紹介
4. • KANNA Android アプリの技術スタック • 開発体制の紹介 • 開発した機能の紹介 • 課題 • 今後の展望 • おまけ アジェンダ
5. • React Native で作られている • 一部機能をネイティブで実装 • Android なら Kotlin + Compose、iOS なら Swift + SwiftUI • 現在は KMP + CMP で Android / iOS の両方を一つのコードで開発 • 採用した理由は後述 • ※ KMP = Kotlin Multiplatform、CMP = Compose Multiplatform • GraphQL • チャットなどの一部機能で Firestore を使用 KANNA Android アプリの技術スタック
6. • Android 公式ドキュメントの Guide to app architecture を参考 • Repository + (UseCase) + ViewModel + Compose • Gradle はマルチモジュール構成 • Google が公開しているサンプルプロジェクト now in android を参考 • テストはできる限り書くようにチームとして意識 • JUnit 4 / Robolectric • 特殊な構成にしないことで、新規メンバーも把握しやすいように KANNA Android アプリのアーキテクチャ
7. 開発体制の紹介
8. • アプリチーム6名 (正社員3名、業務委託3名) • Android: 3名、iOS: 3名 • スクラム開発: 1週間のスプリント • 機能開発時には DesignDoc を書く • 開発する機能によっては、他チームと連携して開発 • API / デザイン 開発体制の紹介
9. • 数ある機能の中から以下の機能を今回紹介 • 写真・PDF の編集 • 帳票 開発した機能の紹介
10. • 写真・PDF に対して、線やテキストを 書き込める • プレビューでは以下の操作が可能 • 書き込んだ内容の移動、回転、拡大縮小、 削除、Undo / Redo • テキストの再編集 • 写真自体の拡大・回転 • 「完了」ボタンを押すとファイル保存 写真・PDF の編集 - 機能説明 -
11. • Compose ではなく Android View で実装 • 写真の表示: panpf/zoomimage • 写真の拡大表示だけでなく、回転表示もサポート • PDF の表示: TalbotGooday/AndroidPdfViewer • PDF の編集: TomRoush/PdfBox-Android 写真・PDF の編集 - 技術詳細 -
12. • プレビュー表示時は Canvas に対して描画 • 描画された線やテキストの情報はオンメモリで 保持しておく • 線の場合は軌跡の点の座標を保持 写真・PDF の編集 - 技術詳細 -
13. • この時保持する座標は画面上の座標ではな く、写真・PDF の座標系に変換して保持 • 写真を画面上に表示するための変換行列と 同じ行列を、線やテキストにも適用して描 画できる • こうすることで写真を拡大や回転しても、 書き込んだ内容が写真に対して常に同じ位 置に表示される 写真・PDF の編集 - 技術詳細 -
14. • 「完了」ボタンを押したら、線やテキストの情報を写真や PDF に 書き込んでファイル保存 • 写真の場合は Canvas に全て書き込んだ上で画像ファイルに出力 • PDF は編集用のライブラリを使用 • 日本語を表示するにはフォントのロードが必要 • 詳細はブログ記事にて: bit.ly/3DXkpmA • PDF に書き込む時は y 軸が反転するので注意 • 画面上では 左上が原点で y 座標は下向きに正だが、PDF は左下が原点で上向きに正 写真・PDF の編集 - 技術詳細 -
15. • Excel で作られている帳票の雛形を取り込む ことで、自由に電子帳票を作成できる • 紙で管理していたものをペーパーレス化 • アプリでは帳票の表示・編集が行える • 入力は文字、数値、日付、押印、ドロップダウン 選択、画像挿入など様々 • エクセルの一部関数や四則演算もサポート 帳票 - 機能説明 -
16. • 帳票は WebView で HTML を表示 • TypeScript を使って DOM の操作を行ったり、 ネイティブと連携 • JavaScript を使うのは辛いので… 帳票 - 技術詳細 -
17. • TypeScript → JavaScript へのトランスパイルはカスタムの Gradle プ ラグインを作成 • android/gradle-recipes の addGeneratedSourceFolder というサンプ ルを参考 • ビルド時に自動生成されたファイルを assets ディレクトリに格納できる • これでビルド時にトランスパイルが実行され、変換後の JavaScript ファイルを assets ディレクトリに格納できる • ブログ記事: bit.ly/4jmKKJE 帳票 - 技術詳細 -
18. • エクセルに元々設定されていた数式や関数は帳票でも使えるよう に再現 • 四則演算 • SUM / IF / AND / AVERAGE / ROUND / ISBLANK / MAX / MIN / COUNT • 関数・数式にセルの値を埋め込んで評価 • 「A1=B1+C1」のような数式があり、B1のセルに5、C1のセルに3が入力 されていた場合、「5+3」を評価して結果をA1のセルに表示 帳票の関数・数式 - 機能説明 -
19. • 関数・数式には依存関係があるので、 依存関係順の評価が必要 • 関数が参照しているセルを有向グラフで 表してトポロジカルソートする • 「A1=B1+C1」「B1=C1+D1」のような 場合、後者を先に評価 帳票の関数・数式 - 技術詳細 -
20. • 関数・数式の評価は math.js を使って JavaScript 側で行なっている • 「2 + 3」のような数式を評価してくれる • SUM などの関数は評価できないので、math.import を使って独自関数を定義 して評価 帳票の関数・数式 - 技術詳細 -
21. • セルの値の置換に構文解析を使用 • 「IF(A1>0, “B1”,C1)」のような関数の場合、B1は文字列なのでセルの値に 置換してはダメ • 正規表現だと判定が難しい • 関数はネストして書くことができるので複雑になる • 構文解析 : 文法規則に従っているかをチェックし、構造を解析する • プログラミング言語でも使われている • 構文解析には Strumenta/antlr-kotlin を使用 帳票の関数・数式 - 技術詳細 -
22. 帳票の関数・数式 - 技術詳細 -
23. • 会社設立当初は Web エンジニアが少人数でモバイルアプリも開発 • React が得意なメンバーが集まっていたため、React Native を採用 • アプリ開発を進めていく中で、高度な機能開発が増えていき、ア プリチームが組成された 課題
24. • アプリチームにはモバイルアプリ開発が得意なメンバーが多く、 React Native に精通していない • ネイティブへの置き換えを検討 • メンテされていないライブラリを使っている関係で、React Native 自体のバージョンや周辺ライブラリのアップデートが容易に行え ない • アプリの動作がネイティブと比較して遅い • 海外では Android ユーザーが多いが、使用端末のスペックが高くない 課題
25. • 新機能開発や既存の一部の画面を Android / iOS でそれぞれネイテ ィブ実装を行なった • React Native ではネイティブと連携したり、ネイティブの画面を表示する 仕組みが提供されている • しかしここでも課題が発生 • Android / iOS それぞれで実装が必要なので工数がかかる • 実装の細かい部分でコミュニケーションコストがかかる • エンジニアのリソース不足 課題
26. • 課題を解決するために KMP / CMP を採用 • 採用した理由 • Android / iOS の開発が UI も含めて1つのコードで行える • 仮に今後 KMP / CMP が廃れていっても、Android 側はそのまま資産として 残る • Google や JetBrains が KMP / CMP をサポート • 実際に2ヶ月ほど KMP / CMP で置き換えできるかを試し、UX を損ねるこ となく置き換えられそうだった 課題
27. • KMP / CMP を使って React Native を脱却していく • 現在15%程度の画面が移行済み • 2年後には React Native を取り除くことを目標 • AI を活用した開発 • 現状でもテストコードや簡易な画面の作成は AI を使っている • 現在色々と検証中 • React Native の画面のコードから Compose の画面のコードを作る、等 今後の展望
28. • 弊社では Android エンジニアの需要が高い • KMP / CMP への移行対応のため • 今後新規機能開発も KMP / CMP を使うため • また今後さらなる海外展開を見据えているため、ますます Android アプリの重要度は高まる • 特に東南アジアは Android ユーザーの比率が高い • Android エンジニアを絶賛募集中 アルダグラムにおける Android アプリの重要性
29. ご清聴ありがとうございました
30. • CMP では SwiftUI の画面を表示できると公式ドキュメントに記載 がある • https://www.jetbrains.com/help/kotlin-multiplatform-dev/compose-swiftui- integration.html • KANNA で SwiftUI で実装したリスト系の画面を CMP で表示させて みたが、スクロールしても反応しなかった おまけ: CMP でハマったこと
31. • Issue はあったが進展はなし • https://youtrack.jetbrains.com/issue/CMP-6828 • 調査してみたところ、Compose 側のジェスチャーと SwiftUI 側の ジェスチャーが競合してしまい、Compose 側のジェスチャーが優 先されていた • ワークアラウンドとして Compose 側のジェスチャーの優先度を 下げる処理を iOS で実装し、スクロールできるようになった • https://gist.github.com/watabee/fa4ce518c309aa1dbabf3e748a42414b おまけ: CMP でハマったこと
32. おまけ: CMP でハマったこと