DroidKaigi 2024 体験記

DroidKaigi 2024 に現地参加してきたので、記憶があるうちにざっくりと記録を残す記事です。

ようこそ

1 日目: Workshop Day

Kotlin Multiplatform (KMP) と Compose Multiplatform (CMP; 今回スライド内でこう略されていた) のワークショップ。以前、社内合宿でどちらも使ったことがあるので、素振りはできている状態で臨みました。Jetbrains の Developer Advocate の方から直伝される機会は貴重ですから、逃すわけにはいけませんね。

まず、事前に 3 つ、課題のため用意されたサンプルアプリがありました:

1. 入力したキーワードを保存して永続化させる storage-exercise
2. 鳥の画像をネットワークから取得して一覧する bird-app
3. 行動が TODO リストみたいに一覧にあって、それぞれをカウントアップ/ダウンできる habit-tracker

それぞれは実装が足りてなくて機能が実現できてないので、 実装を各々で手を動かして完成させましょう〜というワーク。

iOS のビルドはなかったわけですが、それは macOS が必要だからで、参加者はどの OS を使うかは不明なのでこうなっているのでした。実際僕の隣にいたかたは Linux (NixOS) を使われていたので、クロスプラットフォームならでは事情という感じでユニーク。

(1) では expect / actual を使って、プラットフォーム固有の実装を共通のインターフェースにバインドするテクを学ぶのがポイント。たとえば Web では Local Storage の実装を使って、デスクトップはファイルの読み書き、Android では DataStore の実装を使うとかができる。KMP が強力かつ柔軟な機構を持ち合わせているのが体験できる。

expect で定義したものは actual で実装を結びつけることができる

(2) はネットワークアクセスを行う実用的な取り組み。Ktor なら KMP でもいい感じに動いてくれて特に憂いない感じで便利ですね。以前やったときは、Ktor の Engine をプラットフォームにあわせて設定したりする必要があった記憶があるけど、この課題では特に設定は不必要ですすんだのでした。

(2) bird-app

(3) は Compose Multiplatform の課題。Android エンジニアならもうご存知ですよね、という感じで普通に Compose のコードを書けばデスクトップも Web も UI が構築できるのがすごい。見た目も差異がないわけです。

もっと言うと、CMP の実装は Android では Android 実装へのただのエイリアスになっててイコールみたいな話題とか、デスクトップ・Web も Skiko/Skia で Canvas にレンダーしているという面白い話があります (Flutter も同じ仕組みという話を聞いた覚えが)。

canvas 要素しかない。テキストフィールドにホバーすると cursor: text が設定される

したがって、Web は内容に応じた DOM が構築されているわけではないから、Web の世界観的には結構アクロバットな印象を受けますね。アクセシビリティとか Web 技術との親和性がどうなっているのかは不明です (tab キーで移動はできています。でも本文検索とかはできないので、ブラウザ側の機能は期待できなさそう)。

KMP には統合のレベル感みたいなのがあって、一部のロジックを共有するものから、CMP で UI まで共有できる幅広さがあるのがユニークですね。そうするとビジネスロジックだけは KMP にしてみませんか、という機運が見えてくる感じがして希望が持てる感じがします。

一部 〜 100% 共有まで幅がある

実際のところはいろいろな課題があるわけですが……ネイティブモバイルアプリ開発者の大事にしたいところを考慮しようとしていることが KMP を他のクロスプラットフォーム技術と大きな違いを持たせている部分だと感じました (デスクトップや Web 開発者的には……どうなのでしょう)。

セッション

興味深いセッションしかなくて時間が重なっていてリアルタイムで観れなかったものもあって残念ですが、 リアルタイムで拝聴したものをダイジェストでご紹介するコーナーです。

PDF Viewer作成の今までとこれから ~ Android 15で進化したPdfRenderer ~

対象者に電子書籍・漫画アプリを開発者とあったので拝聴。

speakerdeck.com

前半は自前で PDF を Bitmap にレンダーし、それを横に表示してビューワーを作る話を順を追って説明。複数ページのレンダーのために Mutex を取って排他制御が必要なのがなるほど〜と思ったり、ジェスチャーによる拡大も実装されていて見事なビューワーができる流れが解説されていました。

なかでも、パフォーマンスの改善手法が印象的で、画面に求められる大きさにレンダーすることや、キャッシュを活用することでメモリ使用量を抑えるテクニックは効果的に感じました。

全体を通して自前実装〜andoidx.pdf まで実装が紹介されていて、それぞれのメリット・デメリットも話されているので、PDF ビューワーについて門外漢の自分としてはまとまった情報が得られてなるほど〜となりました。

Google Sign-inの移行から始めるCredential Manager活用

Google Sign-in と認証情報の取り扱いに興味があったので拝聴。

speakerdeck.com

まずをもって、Google Sign-in の実装をしたことのない自分は、Jetpack の Credential Manager があって、OS バージョン差を考慮してくれているなど、知らなかった情報が得られました。

Credential Manager 自体は認証情報を保存するわけではなくて、別のパスワードマネージャーが管理するなど、情報の流れが理解できたのも大きいですね。

Ask the speaker でカスタム実装は Credential Provider を実装することで実現できるようなお話を伺えたのですが、自分の知識不足でそこは確認できておりません……。

WebADBを使用したAndroid専用端末化への自動キッティング手法

ADB を QA 等でうまく使えないかと常日頃思っていたので興味深いと思い拝聴。

2024.droidkaigi.jp

タクシー備え付け端末のセットアップがモチベーションになっている、ブラウザ経由でのアプリのセットアップの話。非エンジニアに adb を導入してもらって、ぽちぽちセットアップするのは大変だけど、ブラウザで端末を繋いだらオートメーションで設定がされようになって、特殊なセットアップが不要で自動化されて最高そうだった。

ある要素のタップを座標指定なのは大変そうだな〜と聴きながら感じていたのだけど、AccessibilityService を実装することでユーザー補助情報から対象の要素を見つけてタップもできるということでなるほど、という感じでした。

デザインからアプリ実装まで一貫したデザインシステムを構築するベストプラクティス

デザインシステムの運用について興味があったので拝聴。

speakerdeck.com

とにかくよい話でした！ 伝えきれないので内容を見てほしい。良かったので即社内 Slack に共有したくらい。

ツール面でもStyle Dictionary というツールでデザイントークンを実装に連携する話が興味深かったですね:

amzn.github.io

非エンジニア、Web エンジニアにとっても興味深い話が詰まっているので、内容の趣旨から言ってもチームで読んでより相乗効果がある話だな〜と感じています。

GraphQLの魅力を引き出すAndroidクライアント実装

apollo-kotlin で GraphQL という話題で自分のチームと同じスタックなので興味深く思い拝聴。

speakerdeck.com

Fragment Colocation のルール決めはなるほど、と思うポイントで、Fragment は UI コンポーネントと 1:1 対応することを決めています。というのも、共通で使う Fragment  を用意するとオーバーフェッチの原因になるということで、我々のチームでは共通で使う中間状態の Fragment もあるので、参考にできるお話だな〜と感じていました。

また、Appendix の GraphQL のクエリ安全性のために Signed Query を使っているところや、ViewModel を使わない手法の模索も興味深く読ませていただきました。スライド末尾にあってセッションではお話はされてなかったので、ぜひ参考にしたい内容です。

blog.studysapuri.jp

タッチイベントの仕組みを理解してジェスチャーを使いこなそう

Zoomable の作者の usuiat さんの発表。使わせていただいてるので興味深く思い拝聴。

speakerdeck.com

ジェスチャーまわりとっつきがたい概念があって説明がほしいな〜と思っていたところ、とてもわかりやすく順を追って説明してくださってるので、ジェスチャーまわりを知りたい人にまず聴いていただきたい貴重なお話だな〜と思いました。

あと、Zoomable を開発するにあたったモチベーションも聞いてみたい話だったのですが、自作のフォトビューワーに端を発しているということで、へぇ〜と思った次第。

Ask the speaker でとても突然、自分のチームのアプリで Zoomable 使わせていただいてる旨お礼申し上げたら喜んでくださりましたが、こちらこそありがとうございますという思いです……。

Compose UIを使ったクリエイティブで複雑なユーザーインターフェース

最後にとてもユニークな発表。ゲーム内の UI を Compose でいかに実現するかというテーマで、実際に 0 から作り上げていくのが順を追って説明されています、

speakerdeck.com

すごい雑に言うとゲームだと Canvas とかで素朴に描画するとか、あるいは 3D のメッシュを変形して UI として見せるみたいな感じが想像されそうなのですが、そうではなくて Compose のまっとうなテクを使って実現しているのがポイントです。

したがって、カスタムレイアウトや Shape, アニメーションを駆使してダイナミックな見た目を再現することになります。同時に Compose の表現力が強力であることが改めて理解できました。

Figma から Shape をエクスポートできる Shape Composer というプラグインが紹介されていて、これは便利そう！ と思ったので、使ってみたいと思います:

t.co

セッション内でも語られていたように実用的なアプリが実用的 (だが退屈) な見た目である良さと同時に、エンタメに寄せ切った複雑なユーザーインターフェースも魅力的だなと発見できる面白いお話だったなと感じました。

僕はスキューモフィックな UI も好きなので、前半に昔の UI が出てきたときに懐かしさと特有の良さを再認識しました……。

最後に

久々に現地参加したのですが、とても良い体験でした！ いろんな方とお話させてもらったのも楽しかったですし、セッションの内容も刺激をうけるものでした。

毎年 contributor が紹介されるのが楽しい

また来年も参加したいな〜と思わせる 3 日間をありがとうございました！

宣伝

僕は株式会社はてなで Android エンジニアをやっていますが、スマートフォンアプリ開発エンジニアの仲間を大募集しています！

👇 カジュアル面談からやっていますので、少しでも興味がございましたらぜひお話だけでも聞きにきてください！

hatenacorp.jp

👇 マンガアプリの開発をやっています！

hatena.co.jp

👇 まつわるイベントもあります！

hatena.connpass.com