LIFULL Creators Blog

LIFULL Creators Blogとは、株式会社LIFULLの社員が記事を共有するブログです。自分の役立つ経験や知識を広めることで世界をもっとFULLにしていきます。

DroidKaigi 2022に現地参加しました

はじめに

Android アプリエンジニアの石井・七尾です。 今回、DroidKaig2022というカンファレンスに参加してきました。 この記事では 2 日間で行われたセッションの中から特に印象に残ったセッションに関してご紹介させていだきます。

DroidKaigi 2022 について

DroidKaigi はエンジニアが主役の Android カンファレンスです。 Android 技術情報の共有とコミュニケーションを目的に、2022 年 10 月 5 日(水) 〜 7 日(金)の 3 日間開催します。

DroidKaigi2022 ではオンラインとオフライン両方での参加が可能になっています。オフライン会場ではスポンサー企業のブースなどがあり、セッション以外でも楽しめるところが盛りだくさんとなっています。

twitter.com twitter.com

印象に残ったセッション

漫画アプリのメモリ改善とメモリ解析方法

speakerdeck.com

OutOfMemoryExceptionというのは積み重なって発生するため、原因解明が非常に難しいです。LINE マンガでは MemoryProfiler や leakcanary などのツールを利用した解析や監視、MemoryUtils等の独自クラスを作成し実装側からの都度監視することで原因の解明をしていきました。 また Android7 以下では bitmap の保持に native heap ではなく JVM heap を使う特性があることや、bitmap をメモリ上で持つ場合にARGB_8888方式であればheight x width x 4byte必要になるため圧縮アルゴリズムが適用されている jpg, png 形式のファイルサイズがそのままメモリ上に乗るわけではないなど、メモリ周りで自分の知らないことがあり勉強になりました。 (石井)

社内でのモバイルアクセシビリティ推進

speakerdeck.com

アクセシビリティがなぜ大切なのか、どのように開発に組み込んでいけるか、という 2 点にフォーカスした内容でした。 特に印象に残っているのが「健常者であっても一時的にアクセシビリティを要する場合がある」という点です。例えば、指を怪我した場合はボタンがうまく押せない状況になりますが、アクセシビリティを考慮した設計ならば問題になりません。また、目を開けられない状況下でも音声読み上げの機能などは十分に活用できます。 LIFULL では「利他主義」の観点からアクセシビリティが度外視されることはなく、真剣に取り組んでいると思います。このセッションを通して自分も LIFULL のエンジニアとして、もっとアクセシビリティを推進して行こうと思いました。 (石井)

Jetpack Compose で Material Design 3

speakerdeck.com

Material Design 3 の説明、tonal palette, Design Token などの新しく登場した概念についての解説、Material Design 2 からの移行手順と移行する際の考慮点がわかりやすくまとまった内容でした。特に tonal palette に関してはその解説だけでなくMaterial Theme Builderを用いて実装時の色を決めていく手順まで解説されていました。実際のプロダクトに導入をしようとしたときにも役立つものになっていました。 また、Material Design 3 への移行についてもアプリ全てを一度に移行する必要はなく、大規模なアプリはコンポーネントごとに分けて移行していくのがおすすめだと述べていて、その手順がサンプルコードをベースに解説されていたので、実際のプロダクトに導入をしようとしたときにも役立つものでした。 全体を通して Material Design 3 の導入を推進したくなるような内容になっていました。 (七尾)

Compose for Desktop で始める Android 開発効率化ツールの作成

speakerdeck.com

Compose for Desktop という Jetpack Compose の記述方法そのままに Desktop アプリを作ることができる UI フレームワークを用いた開発効率化の紹介とその実装解説についての内容でした。開発効率化については Compose for Desktop を用いてアプリを作成し、それによって Android エンジニアが日々の開発で抱える繰り返し作業の効率化についてでした。Compose for Desktop を選択した理由については、Jetpack Compose とほぼ同様の記述方法で Desktop アプリを開発することができるため、技術の学び直しがなく属人化も防ぐことができるためだと述べていました。 日々の開発の中で効率化のために簡単なコマンドラインツールを用いることはありましたが、UI まで作り込むような開発効率化ツールを作ることまではしたことがありませんでした。登壇者の方が Compose for Desktop はドキュメントが少なく、問題が発生しても GitHub の Issue を見て解決することがほとんどだと述べていましたが、セッションで実際のサンプルコードを用いた丁寧な実装解説がされていたので、今後開発効率化ツールの作成にチャレンジしてみようと思いました。 (七尾)

Anatomy of Dynamic Colors

blog.smartbank.co.jp

MaterialDesign3 の一部である Dynamic color 関しての内容でした。アクセシビリティの観点から、カラースキームの生成には輝度が重要になってきます。従来の輝度を表現する色空間では色相の影響で、人間が感じる輝度は変わってしまう問題があります。そこで Google は新しく「色相、彩度、トーン」で構成される HCT 色空間を開発し、Dynamic color はこれに基づいて生成されます。 Dynamic color をアプリに適用することでユーザーに最適な色を動的に提供できますが、動的に変更して欲しくない色もあると思います。それらの意味ある色(Semantic color)は Dynamic color と組み合わせると浮いた色になってしまいます。そこで色相を Dynamic color に少し寄せて調整した Custom color を利用することでバランスの良いデザインを可能にしています。 LIFULL ではブランドカラーとしてオレンジが使われているため、実際に Dynamic color を導入していくことを考えるときに勉強になる内容でした。 (石井)

Deep dive into Jetpack Compose Text

AppCompatTextViewMaterialTextViewなどの場合TextViewに依存しています。対して JetpackCompose の場合TextViewに依存していません。 そのためTextViewで実装されていてるtextIsSelectabletextAllCapsなどの一部 API がなくなっていたり、includeFontPaddingなどの動作が不安定なものがなくなっています。そのため JetpackCompose でこれらを実現する場合にどのような実装になるのか、というところを軸にTextView, JetpackCompose Text, Layout APIでそれぞれ実現したいことに対しての実装比較や、どのように実装されいるかを深ぼって聞ける内容でした。 こちらのセッションは Youtube に LIVE 配信されていて、アーカイブも残っているため興味ある方は是非見てみてください。 (石井)

www.youtube.com

Optimize your app for large screens

droidkaigi.jp

昨今 Google が推進している Tablet, Foldable 等の大画面デバイスをサポートする上で考慮しなければならないこと、サポートするための技術的な選択肢についての内容でした。大画面デバイス対応をするには Phone アプリの体験の仮定(操作はタッチのみ、アプリが 1 画面を全て占有できる等)を考え直す必要があるため、UI も画面サイズに合わせて最適なものを配置することが求められているとのことでした。そのための段階的な対応の基準についてやWindowSizeClassesで取得できる画面サイズの状態を元にした UI の変更方法など、実装の手順まで詳しく述べられていました。 LIFULL HOME'S App に関しては Tablet に対応はしていますが、まだまだ画面サイズごとに UI を変えたり、ユーザの体験そのものが変わるような最適化までは進められていないため、今後の大画面デバイスでの使用感向上を目指す上で非常に参考になる内容でした。

実例から学ぶ Jetpack Compose のパフォーマンス改善

speakerdeck.com

Jetpack Compose を導入した際に発生するパフォーマンスの低下に対する調査方法とその対策方法について解説する内容でした。パフォーマンス低下には不要な Recompose(Compose の再描画)が原因となっていることが多く、それを解決するための対策としてderivedStateOf、Compose の skippable 化、State の監視場所の変更の 3 つを挙げると共に、それぞれの適切な使用タイミングについても述べられていました。 Recompoes の発見と原因の対策についてサンプルコードを用いながらきれいにまとめられていたので、実際に Jetpack Compose を導入した際にも非常に役立つ内容になっていました。今後 Jetpack Compose のパフォーマンス低下の解消でハマった時には見直したいです。 (七尾)

まとめ

初の現地での参加でした。セッション・スポンサーブースを通して最新技術やトレンド技術に触れることができ、よい刺激を受けることができました。 Jetpack Compose は LiveEdit やマルチプレビューなど開発効率がより向上する機能があります、これからもそういった機能はどんどん出てくると思います。Material Design 3, 大画面デバイス対応では、より多くの人へ UI/UX 向上という価値を提供していけます。 これらの Jetpack Compose, Material Design 3, 大画面デバイス対応は、以前から情報のピックアップはチームでできているものの、まだ取り組めていない現状です。今回の DroidKaigi では大画面デバイス対応のアプリを触る機会があったり、セッションやデモを通じて Jetpack Compose と密接に触れ合う中で、より一層導入を推進していきたいなと感じました。

最後になりますが、LIFULL では一緒に働いていただける仲間を募集しています。今回希望してイベント参加をしたように、エンジニアが成長できる機会が盛りだくさんの職場です。カジュアル面談もやっていますので、よろしければこちらもご覧ください。

hrmos.co

hrmos.co