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
20210621-mftd-GoogleIORecap-Namazu
Search
Namazu
June 21, 2021
Technology
0
310
20210621-mftd-GoogleIORecap-Namazu
Namazu
June 21, 2021
Tweet
Share
Other Decks in Technology
See All in Technology
衛星画像超解像化によって実現する2D, 3D空間情報の即時生成と“AI as a Service”/ Real-time generation spatial data enabled_by satellite image super-resolution
lehupa
0
120
定期的な価値提供だけじゃない、スクラムが導くチームの共創化 / 20251004 Naoki Takahashi
shift_evolve
PRO
4
360
関係性が駆動するアジャイル──GPTに人格を与えたら、対話を通してふりかえりを習慣化できた話
mhlyc
0
140
【Kaigi on Rails 事後勉強会LT】MeはどうしてGirlsに? 私とRubyを繋いだRail(s)
joyfrommasara
0
220
セキュアな認可付きリモートMCPサーバーをAWSマネージドサービスでつくろう! / Let's build an OAuth protected remote MCP server based on AWS managed services
kaminashi
3
260
AI ReadyなData PlatformとしてのAutonomous Databaseアップデート
oracle4engineer
PRO
0
230
Shirankedo NOCで見えてきたeduroam/OpenRoaming運用ノウハウと課題 - BAKUCHIKU BANBAN #2
marokiki
0
170
Adapty_東京AI祭ハッカソン2025ピッチスライド
shinoyamada
0
220
Adminaで実現するISMS/SOC2運用の効率化 〜 アカウント管理編 〜
shonansurvivors
4
430
"プロポーザルってなんか怖そう"という境界を超えてみた@TSUDOI by giftee Tech #1
shilo113
0
170
後進育成のしくじり〜任せるスキルとリーダーシップの両立〜
matsu0228
7
3.2k
カンファレンスに託児サポートがあるということ / Having Childcare Support at Conferences
nobu09
1
500
Featured
See All Featured
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Building Adaptive Systems
keathley
43
2.8k
Large-scale JavaScript Application Architecture
addyosmani
514
110k
The Power of CSS Pseudo Elements
geoffreycrofte
79
6k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.5k
[RailsConf 2023] Rails as a piece of cake
palkan
57
5.9k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
32
2.3k
For a Future-Friendly Web
brad_frost
180
9.9k
Raft: Consensus for Rubyists
vanstee
139
7.1k
Automating Front-end Workflow
addyosmani
1371
200k
The Cost Of JavaScript in 2023
addyosmani
53
9k
Transcript
© 2021 eureka, Inc. All Rights Reserved. 初めての Jetpack Compose
【3社合同】Money Forward Tech Drive - #IO21 Recap 2021.6.21 Namazu @eureka
© 2021 eureka, Inc. All Rights Reserved. 自己紹介 • Namazu
• 2021年新卒Androidエンジニア • BlondeNamazu • @blonde_namazu
© 2021 eureka, Inc. All Rights Reserved.
4 © 2021 eureka, Inc. All Rights Reserved. CONFIDENTIAL INFORMATION:
Not for Public Distribution - Do Not Copy All Hands Meeting コミュニティチャット © 2021 eureka, Inc. All Rights Reserved. 新機能
5 © 2021 eureka, Inc. All Rights Reserved. CONFIDENTIAL INFORMATION:
Not for Public Distribution - Do Not Copy All Hands Meeting • Jetpack Composeとは? • Jetpack Compose移行のメリット • Jetpack Compose移行のコスト • まとめ 目次 © 2021 eureka, Inc. All Rights Reserved.
6 © 2021 eureka, Inc. All Rights Reserved. CONFIDENTIAL INFORMATION:
Not for Public Distribution - Do Not Copy All Hands Meeting Jetpack Composeとは? © 2021 eureka, Inc. All Rights Reserved.
© 2021 eureka, Inc. All Rights Reserved. Jetpack Composeとは? •
Googleが提供する宣言的UIツールキット • 既存のxmlベースのViewシステムの代替となる • 2021年7月に1.0 (stable) 配信予定! • 既に導入している企業も多数
© 2021 eureka, Inc. All Rights Reserved. Jetpack Composeとは? •
Jetpack Composeの例
© 2021 eureka, Inc. All Rights Reserved. Jetpack Composeとは? •
Jetpack Composeの例
10 © 2021 eureka, Inc. All Rights Reserved. CONFIDENTIAL INFORMATION:
Not for Public Distribution - Do Not Copy All Hands Meeting Jetpack Compose移行のメリット © 2021 eureka, Inc. All Rights Reserved.
© 2021 eureka, Inc. All Rights Reserved. Jetpack Compose移行のメリット 宣言的UI
SSOT デザインツール Compose Preview Sample Data Interactive Preview Live literals その他 Theming Fast Rendering Animation Preview
© 2021 eureka, Inc. All Rights Reserved. Jetpack Compose移行のメリット:宣言的UI 宣言的UI
SSOT デザインツール Compose Preview Sample Data Interactive Preview Live literals その他 Theming Fast Rendering Animation Preview
© 2021 eureka, Inc. All Rights Reserved. • 宣言的UIとは何か? ◦
“Single source of truth”に従う ◦ 与えられた状態に対してのみ依存し、一意に振る舞いが定まるUI ◦ 既存のxmlベースのViewシステムのような、状態に対応したUIの生成方法を記 述する手法とは異なる Jetpack Compose移行のメリット:宣言的UI
© 2021 eureka, Inc. All Rights Reserved. • 各Viewが状態を持ち、コードでそれぞれ更新していく仕組みは複雑 Jetpack
Compose移行のメリット:宣言的UI
© 2021 eureka, Inc. All Rights Reserved. • 宣言的UIではUIは与えられた状態に対して不変なViewを生成する Jetpack
Compose移行のメリット:宣言的UI
© 2021 eureka, Inc. All Rights Reserved. • Jetpack Composeの利点:表示ロジックのカプセル化
◦ Compose関数の中身に外部から アクセスすることは出来ない ◦ 意図しないUIのバグを未然に防ぐ Jetpack Compose移行のメリット:宣言的UI
© 2021 eureka, Inc. All Rights Reserved. Jetpack Compose移行のメリット:デザインツール 宣言的UI
SSOT デザインツール Compose Preview Sample Data Interactive Preview Live literals その他 Theming Fast Rendering Animation Preview
© 2021 eureka, Inc. All Rights Reserved. Compose Preview •
UIパーツ単位でプレビュー出来る • @Preview を付けるだけ! • 同時に様々なパターンをプレビューす ることが可能 ex) Light Theme / Dark Theme スクリーン全体 / UI単体 Jetpack Compose移行のメリット:デザインツール
© 2021 eureka, Inc. All Rights Reserved. Compose Preview •
UIパーツ単位でプレビュー出来る • @Preview を付けるだけ! • 同時に様々なパターンをプレビューす ることが可能 ex) Light Theme / Dark Theme スクリーン全体 / UI単体 Jetpack Compose移行のメリット:デザインツール
© 2021 eureka, Inc. All Rights Reserved. Jetpack Compose移行のメリット:デザインツール Sample
Data • UIに与える状態について様々なパター ンを同時に検証可能 ex) リストのデータ数 0/少/多 文字列長 0/短/長
© 2021 eureka, Inc. All Rights Reserved. Sample Data Jetpack
Compose移行のメリット:デザインツール • UIに与える状態について様々なパター ンを同時に検証可能 ex) リストのデータ数 0/少/多 文字列長 0/短/長
© 2021 eureka, Inc. All Rights Reserved. Interactive Preview Jetpack
Compose移行のメリット:デザインツール • プレビュー画面でユーザー操作に対応 するUIの挙動を確認可能
© 2021 eureka, Inc. All Rights Reserved. Live literals Jetpack
Compose移行のメリット:デザインツール • リテラルの変更を即座にプレビューに 反映 ex) テキスト、数値、色、etc…
© 2021 eureka, Inc. All Rights Reserved. Jetpack Compose移行のメリット:その他 宣言的UI
SSOT デザインツール Compose Preview Sample Data Interactive Preview Live literals その他 Theming Fast Rendering Animation Preview
© 2021 eureka, Inc. All Rights Reserved. • Material Designに基づくアプリ独自のテーマ
• ネストされたUIの描画パフォーマンスの向上 • アニメーションサポートの強化 Jetpack Compose移行のメリット:その他
26 © 2021 eureka, Inc. All Rights Reserved. CONFIDENTIAL INFORMATION:
Not for Public Distribution - Do Not Copy All Hands Meeting Jetpack Compose移行のコスト © 2021 eureka, Inc. All Rights Reserved.
© 2021 eureka, Inc. All Rights Reserved. Jetpack Compose移行のコスト xmlベースのViewシステムと共存可能なので、徐々に移行できる!
© 2021 eureka, Inc. All Rights Reserved. Jetpack Compose移行のコスト Compose
in XML, XML in Composeのどちらも可能!
29 © 2021 eureka, Inc. All Rights Reserved. CONFIDENTIAL INFORMATION:
Not for Public Distribution - Do Not Copy All Hands Meeting まとめ © 2021 eureka, Inc. All Rights Reserved.
© 2021 eureka, Inc. All Rights Reserved. まとめ • Jetpack
Composeとは宣言的UIツールキットである • Jetpack Compose移行のメリットは多数! ◦ 宣言的UIの実現 ◦ デザインツールのサポートが強力 ◦ テーマの一貫性が保てる • Jetpack ComposeはxmlベースのViewシステムと 共存可能なので、徐々に移行可能!
© 2021 eureka, Inc. All Rights Reserved. 関連セッション
32 © 2021 eureka, Inc. All Rights Reserved. CONFIDENTIAL INFORMATION:
Not for Public Distribution - Do Not Copy All Hands Meeting 関連セッション © 2021 eureka, Inc. All Rights Reserved.
© 2021 eureka, Inc. All Rights Reserved. 関連セッション What’s new
in Jetpack Compose • Jetpack Composeの概要を16分で説明 • まずはこれを見るのがオススメ
© 2021 eureka, Inc. All Rights Reserved. 関連セッション • Jetpack
Composeの基本的な使い方を 教えてくれるWorkShop • 50分あるが、非常に分かりやすい Jetpack Basics
© 2021 eureka, Inc. All Rights Reserved. 関連セッション • 既存のJetpackライブラリとComposeの
組み合わせ方を説明 • Composeのベストプラクティスにも触れて いるので、実用に役立ちそう Using Jetpack Libraries in Compose
© 2021 eureka, Inc. All Rights Reserved. 関連セッション • セッション後半でJetpack
Composeのデ ザインツールについて説明 • 前半の内容はComposeに関係ないが、 アニメーションに関してのアップデートも面 白かったので余裕があれば是非 What’s new in design tools
© 2021 eureka, Inc. All Rights Reserved. 関連セッション • Jetpack
Compose中でマテリアルデザイ ンを用いる方法の説明 • デザイナーの参考にもなりそう Build beautiful Material Design apps with Jetpack Compose