Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
KANNA Android の技術的課題と取り組み
Search
Yosuke Watanabe
April 23, 2025
Programming
1
570
KANNA Android の技術的課題と取り組み
2025年4月23日開催、Findy 様主催の【Androidエンジニア特集】Androidアプリ開発 開発組織が向き合う課題と戦略 という技術イベントの登壇資料です。
Yosuke Watanabe
April 23, 2025
Tweet
Share
Other Decks in Programming
See All in Programming
マイコンでもRustのtestがしたい/KernelVM Kansai 11
tnishinaga
1
920
ウォンテッドリーの「ココロオドル」モバイル開発 / Wantedly's "kokoro odoru" mobile development
kubode
2
640
知識0からカンファレンスやってみたらこうなった!
syossan27
5
280
Designing Your Organization's Test Pyramid ( #scrumniigata )
teyamagu
PRO
5
1.6k
20250426 GDGoC 合同新歓 - GDGoC のススメ
getty708
0
120
Beyond_the_Prompt__Evaluating__Testing__and_Securing_LLM_Applications.pdf
meteatamel
0
120
「理解」を重視したAI活用開発
fast_doctor
0
310
note の Elasticsearch 更新系を支える技術
tchov
9
3.6k
読書シェア会 vol.4 『ダイナミックリチーミング 第2版』
kotaro666
0
120
バイラテラルアップサンプリング
fadis
3
600
AIコーディングの理想と現実
tomohisa
38
40k
VibeCoding時代のエンジニアリング
daisuketakeda
0
240
Featured
See All Featured
The Pragmatic Product Professional
lauravandoore
33
6.6k
[RailsConf 2023] Rails as a piece of cake
palkan
54
5.5k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.3k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
12k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.6k
Building Applications with DynamoDB
mza
94
6.4k
What's in a price? How to price your products and services
michaelherold
245
12k
Building Adaptive Systems
keathley
41
2.5k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.5k
How GitHub (no longer) Works
holman
314
140k
Unsuck your backbone
ammeep
671
58k
A Tale of Four Properties
chriscoyier
159
23k
Transcript
Androidアプリ開発 開発組織が向き合う課題と戦略 Findy Job LT 2025.04.23 渡邊 陽介 株式会社アルダグラム
• 渡邊 陽介 • 株式会社アルダグラム (2022年9月〜) • Android / iOS
(直近7年はほぼ Android) 自己紹介
• 株式会社アルダグラム • 設立: 2019年5月 • 現場 DX サービス「KANNA」 •
建設業、不動産業、製造業など、あらゆる 現場の生産性向上を実現 • グローバルに展開 • 東南アジアを中心に世界70カ国以上 会社紹介
• KANNA Android アプリの技術スタック • 開発体制の紹介 • 開発した機能の紹介 • 課題
• 今後の展望 • おまけ アジェンダ
• React Native で作られている • 一部機能をネイティブで実装 • Android なら Kotlin
+ Compose、iOS なら Swift + SwiftUI • 現在は KMP + CMP で Android / iOS の両方を一つのコードで開発 • 採用した理由は後述 • ※ KMP = Kotlin Multiplatform、CMP = Compose Multiplatform • GraphQL • チャットなどの一部機能で Firestore を使用 KANNA Android アプリの技術スタック
• Android 公式ドキュメントの Guide to app architecture を参考 • Repository
+ (UseCase) + ViewModel + Compose • Gradle はマルチモジュール構成 • Google が公開しているサンプルプロジェクト now in android を参考 • テストはできる限り書くようにチームとして意識 • JUnit 4 / Robolectric • 特殊な構成にしないことで、新規メンバーも把握しやすいように KANNA Android アプリのアーキテクチャ
開発体制の紹介
• アプリチーム6名 (正社員3名、業務委託3名) • Android: 3名、iOS: 3名 • スクラム開発: 1週間のスプリント
• 機能開発時には DesignDoc を書く • 開発する機能によっては、他チームと連携して開発 • API / デザイン 開発体制の紹介
• 数ある機能の中から以下の機能を今回紹介 • 写真・PDF の編集 • 帳票 開発した機能の紹介
• 写真・PDF に対して、線やテキストを 書き込める • プレビューでは以下の操作が可能 • 書き込んだ内容の移動、回転、拡大縮小、 削除、Undo /
Redo • テキストの再編集 • 写真自体の拡大・回転 • 「完了」ボタンを押すとファイル保存 写真・PDF の編集 - 機能説明 -
• Compose ではなく Android View で実装 • 写真の表示: panpf/zoomimage •
写真の拡大表示だけでなく、回転表示もサポート • PDF の表示: TalbotGooday/AndroidPdfViewer • PDF の編集: TomRoush/PdfBox-Android 写真・PDF の編集 - 技術詳細 -
• プレビュー表示時は Canvas に対して描画 • 描画された線やテキストの情報はオンメモリで 保持しておく • 線の場合は軌跡の点の座標を保持 写真・PDF
の編集 - 技術詳細 -
• この時保持する座標は画面上の座標ではな く、写真・PDF の座標系に変換して保持 • 写真を画面上に表示するための変換行列と 同じ行列を、線やテキストにも適用して描 画できる • こうすることで写真を拡大や回転しても、
書き込んだ内容が写真に対して常に同じ位 置に表示される 写真・PDF の編集 - 技術詳細 -
• 「完了」ボタンを押したら、線やテキストの情報を写真や PDF に 書き込んでファイル保存 • 写真の場合は Canvas に全て書き込んだ上で画像ファイルに出力 •
PDF は編集用のライブラリを使用 • 日本語を表示するにはフォントのロードが必要 • 詳細はブログ記事にて: bit.ly/3DXkpmA • PDF に書き込む時は y 軸が反転するので注意 • 画面上では 左上が原点で y 座標は下向きに正だが、PDF は左下が原点で上向きに正 写真・PDF の編集 - 技術詳細 -
• Excel で作られている帳票の雛形を取り込む ことで、自由に電子帳票を作成できる • 紙で管理していたものをペーパーレス化 • アプリでは帳票の表示・編集が行える • 入力は文字、数値、日付、押印、ドロップダウン
選択、画像挿入など様々 • エクセルの一部関数や四則演算もサポート 帳票 - 機能説明 -
• 帳票は WebView で HTML を表示 • TypeScript を使って DOM
の操作を行ったり、 ネイティブと連携 • JavaScript を使うのは辛いので… 帳票 - 技術詳細 -
• TypeScript → JavaScript へのトランスパイルはカスタムの Gradle プ ラグインを作成 • android/gradle-recipes
の addGeneratedSourceFolder というサンプ ルを参考 • ビルド時に自動生成されたファイルを assets ディレクトリに格納できる • これでビルド時にトランスパイルが実行され、変換後の JavaScript ファイルを assets ディレクトリに格納できる • ブログ記事: bit.ly/4jmKKJE 帳票 - 技術詳細 -
• エクセルに元々設定されていた数式や関数は帳票でも使えるよう に再現 • 四則演算 • SUM / IF /
AND / AVERAGE / ROUND / ISBLANK / MAX / MIN / COUNT • 関数・数式にセルの値を埋め込んで評価 • 「A1=B1+C1」のような数式があり、B1のセルに5、C1のセルに3が入力 されていた場合、「5+3」を評価して結果をA1のセルに表示 帳票の関数・数式 - 機能説明 -
• 関数・数式には依存関係があるので、 依存関係順の評価が必要 • 関数が参照しているセルを有向グラフで 表してトポロジカルソートする • 「A1=B1+C1」「B1=C1+D1」のような 場合、後者を先に評価 帳票の関数・数式
- 技術詳細 -
• 関数・数式の評価は math.js を使って JavaScript 側で行なっている • 「2 + 3」のような数式を評価してくれる
• SUM などの関数は評価できないので、math.import を使って独自関数を定義 して評価 帳票の関数・数式 - 技術詳細 -
• セルの値の置換に構文解析を使用 • 「IF(A1>0, “B1”,C1)」のような関数の場合、B1は文字列なのでセルの値に 置換してはダメ • 正規表現だと判定が難しい • 関数はネストして書くことができるので複雑になる
• 構文解析 : 文法規則に従っているかをチェックし、構造を解析する • プログラミング言語でも使われている • 構文解析には Strumenta/antlr-kotlin を使用 帳票の関数・数式 - 技術詳細 -
帳票の関数・数式 - 技術詳細 -
• 会社設立当初は Web エンジニアが少人数でモバイルアプリも開発 • React が得意なメンバーが集まっていたため、React Native を採用 •
アプリ開発を進めていく中で、高度な機能開発が増えていき、ア プリチームが組成された 課題
• アプリチームにはモバイルアプリ開発が得意なメンバーが多く、 React Native に精通していない • ネイティブへの置き換えを検討 • メンテされていないライブラリを使っている関係で、React Native
自体のバージョンや周辺ライブラリのアップデートが容易に行え ない • アプリの動作がネイティブと比較して遅い • 海外では Android ユーザーが多いが、使用端末のスペックが高くない 課題
• 新機能開発や既存の一部の画面を Android / iOS でそれぞれネイテ ィブ実装を行なった • React Native
ではネイティブと連携したり、ネイティブの画面を表示する 仕組みが提供されている • しかしここでも課題が発生 • Android / iOS それぞれで実装が必要なので工数がかかる • 実装の細かい部分でコミュニケーションコストがかかる • エンジニアのリソース不足 課題
• 課題を解決するために KMP / CMP を採用 • 採用した理由 • Android
/ iOS の開発が UI も含めて1つのコードで行える • 仮に今後 KMP / CMP が廃れていっても、Android 側はそのまま資産として 残る • Google や JetBrains が KMP / CMP をサポート • 実際に2ヶ月ほど KMP / CMP で置き換えできるかを試し、UX を損ねるこ となく置き換えられそうだった 課題
• KMP / CMP を使って React Native を脱却していく • 現在15%程度の画面が移行済み
• 2年後には React Native を取り除くことを目標 • AI を活用した開発 • 現状でもテストコードや簡易な画面の作成は AI を使っている • 現在色々と検証中 • React Native の画面のコードから Compose の画面のコードを作る、等 今後の展望
• 弊社では Android エンジニアの需要が高い • KMP / CMP への移行対応のため •
今後新規機能開発も KMP / CMP を使うため • また今後さらなる海外展開を見据えているため、ますます Android アプリの重要度は高まる • 特に東南アジアは Android ユーザーの比率が高い • Android エンジニアを絶賛募集中 アルダグラムにおける Android アプリの重要性
ご清聴ありがとうございました
• CMP では SwiftUI の画面を表示できると公式ドキュメントに記載 がある • https://www.jetbrains.com/help/kotlin-multiplatform-dev/compose-swiftui- integration.html •
KANNA で SwiftUI で実装したリスト系の画面を CMP で表示させて みたが、スクロールしても反応しなかった おまけ: CMP でハマったこと
• Issue はあったが進展はなし • https://youtrack.jetbrains.com/issue/CMP-6828 • 調査してみたところ、Compose 側のジェスチャーと SwiftUI 側の
ジェスチャーが競合してしまい、Compose 側のジェスチャーが優 先されていた • ワークアラウンドとして Compose 側のジェスチャーの優先度を 下げる処理を iOS で実装し、スクロールできるようになった • https://gist.github.com/watabee/fa4ce518c309aa1dbabf3e748a42414b おまけ: CMP でハマったこと
おまけ: CMP でハマったこと