Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

少しずつキャッチアップしていくAndroidアプリ開発の補足と振り返り

1,140 views

Published on

potatotips #72での登壇資料になります。
https://potatotips.connpass.com/event/194575/

以前に登壇した「少しずつキャッチアップしていくAndroidアプリ開発」という別の発表の中で紹介しきれなかった事項と少しだけお仕事で取り組んだ事例とその振り返りについてまとめたものになります。

Published in: Technology
  • Login to see the comments

  • Be the first to like this

少しずつキャッチアップしていくAndroidアプリ開発の補足と振り返り

  1. 1. 少しずつキャッチアップしていくAndroidアプリ開発 の補足と振り返り potatotips #72 @ オンライン 2020/12/22 Fumiya Sakai
  2. 2. 自己紹介 ・Fumiya Sakai ・Freelance App Engineer アカウント: ・Twitter: https://twitter.com/fumiyasac ・Facebook: https://www.facebook.com/fumiya.sakai.37 ・Github: https://github.com/fumiyasac ・Qiita: https://qiita.com/fumiyasac@github 発表者: ・Born on September 21, 1984 これまでの歩み: Web Designer 2008 ~ 2010 Web Engineer 2012 ~ 2016 App Engineer 2017 ~ Now
  3. 3. iOSのUI実装本を執筆しています! 少しの工夫で実現できるTIPS集 ライブラリ表現の活用集 書籍に掲載したサンプルのバージョンアップや続編等に現在着手中です。
  4. 4. 過去に技術書典8で電子版だけ頒布した書籍紹介 Vol.1及びVol.2に頒布したものの中で書籍に載せきれなかったものを紹介 第1章: メディアアプリ型のUI 第2章: 構造が複雑な写真表示UI 記事一覧を無限スクロールする様な形のアプリ UIを一覧/詳細表示を簡素化した実装を紹介。 現在はBoothにて販売中です! https://booth.pm/ja/items/1835468 ¥1,000 - iOSアプリ開発「UI実装であると嬉しいレシピブック まかない編」 サンプルコード: https://github.com/fumiyasac/meals_ios_ui_recipe_showcase 第3章: Combine + UICollectionViewCompositionalLayout タイル状のフォトギャラリーや一覧表示型のア プリUIでライブラリを活用した実装を紹介。 実務でも利用&考察したもの 特に第1章と第2章の内容に関し ては、実際に相談されたり、実 装アイデアとして活用する機会 があったものになります。 全てUIKitを利用
  5. 5. 新たに技術書典9で電子版だけ頒布した書籍紹介 表現や動きが特徴的でユーザーにもほんの少し遊び心を与える様なUI実装を紹介 現在はBoothにて販売中です! https://booth.pm/ja/items/2360379 ¥1,000 - iOSアプリ開発「UI実装であると嬉しいレシピブック おもしろ編」 サンプルコード: https://github.com/fumiyasac/meals_2nd_ios_ui_recipe_showcase 実務導入前の検証段階 若干一癖がありそう、ぱっと見 だと実装の方針が立ちにくい感 じに見受けられそうなUI実装や 構造に関して考察しました。 UIKit & SwiftUIを利用 第1章: 面白い表現のフォトギャラリーUI 第2章: 画面ロック機能を利用したUI UICollectionViewを活用したユニークなレイア ウト表現と画面遷移カスタマイズ実装を紹介。 第3章: SwiftUI + OSS Libraryの活用 SceneDelegateの機能や端末認証を利用した画 面ロック機能を盛り込んだ実装を紹介。
  6. 6. 今年の5月末よりAndroidアプリ開発もするように 7月下旬 / 11月初旬にもAndroidアプリ開発に関するトピックを話しています 最初は基礎を徹底的に固める 簡単〜標準?位のタスクを実施 https://note.com/fumiyasac/n/nec1c3c80f12d 僕が業務で初めてAndroidアプリ開発に着手 して2ヶ月程経過した中での振り返り https://www.slideshare.net/fumiyasakai37/android-239074927 少しずつキャッチアップしていく Androidアプリ開発 いざ実践だ〜
  7. 7. 最初は不安のほうが大きいけど少しずつ理解を深める いきなりコードを読む衝動を少し押さえてインプットをメインにする 最初は基礎を徹底的に固める 簡単〜標準?位のタスクを実施Kotlin/AndroidStudioに触れる 早い段階で実施したこと: 基本事項をノートに自分でまとめて いきながら実務で頻出な部分を重点 的に&自分なりにしつこく書き記す 感じで書き記していく。 (これは自分が慣れた方法) ・基本のさらに基本を知る 両方一緒に 早い段階で実施したこと: 読みながら仕様と基礎を理解する 操作方法 / デバッグ手法 / 実機 ・Kotlinの書き方を知る Swiftの文法をヒントに読み進める 早い段階で実施したこと: 従来通りSwiftのUIサンプルを作る が、それに合わせるバックエンド側 部分をServer Side Kotlinで簡単な 物を試してみる。 (Backend側も知れるのでお得) ・アプリにおける基本理解 ライフサイクルやAndroid機能等 ・UI実装部分における理解 iOSアプリとの共通点&相違点 ・実務で使われるものの理解 RxJava / Dagger / Apollo … ・複雑な構造を組み立てる RecyclerView / ViewHolder …
  8. 8. 実装した画面と機能におけるケーススタディ(1) アプリトップ画面でもよく見かけるような様々な表示要素が組み合わさった例 Section: 0 Section: 1 Section: 2 Horizontal Scroll Horizontal Scroll Grid Layout Pattern 表示に必要なデータはRxJavaの処理を利用してできるだけまとめてサーバーからデータ取得 基本構造はRecyclerViewを入れ子にする方針で実施する iOSだとUICollectionViewCompositionalLayoutで実装するけど…果たしてAndroidはどうする? 基本方針 各セクション毎に適用するレイアウトについてはLayoutManagerを利用する iOSでの実装と照らし合わせて明確に異なるまたは似ているポイントの整理 レイアウトを実現する上で必要な知識(全く異なる部分): RecyclerView / ViewHolder (ライブラリ: Groupie) / BindingModel ※ DataBinding 表示データの取得に関する部分(参考にできる余地がありそうな部分): RxJavaを利用した非同期通信を束ねる処理 / GraphQL (ライブラリ: Apollo)
  9. 9. 実装した画面と機能におけるケーススタディ(1) 要素毎に分解していきながら構造を理解すると見えやすかった Section: 0 Section: 1 Section: 2 Horizontal Scroll Horizontal Scroll Grid Layout Pattern RecyclerView & ViewHolder & DataBindingの基本実装を少しだけ応用する形 全体的な処理についてはRecyclerViewで構築する Section: さらに配置したViewHolder内部にRecyclerViewを配置する Sectionタイトル表示用 ViewHolder Gridパーツ1個分表示用 ViewHolder 横スクロール要素表示用 ViewHolder 用途に応じた形でRecyclerView を活用する点とLayoutManagerを 活用した複雑なレイアウト構築 ViewHolderに渡す表示データを組 み立てるBindingModelの形に注意 Point2: Point1:
  10. 10. 実装した画面と機能におけるケーススタディ(1) 画面に表示するデータを取得する処理に関する形のイメージ Section: 0 Section: 1 Section: 2 Horizontal Scroll Horizontal Scroll Grid Layout Pattern RxJavaを利用した複数のAPIリクエストを上手に束ねてうまく返却する際のヒント UseCase PresenterRepositoryInfraStructure GraphQL Request 各種画面への表示表示データ取得 表示用に加工 Single.zip( exampleRepository1.find(), exampleRepository2.find(), exampleRepository3.find(), Function3<List<Article1>, List<Article2>, List<Article3>, ExampleDto> { article1, article2, article3 -> // Presenterで利用するExampleDtoへの変換処理 } ) ※ Dto … Data Transfer Objectの略 iOS側でRxSwiftを利用していれば処理方針は類推可能 Point: 最終的に返却したい型 各種データの型が異なるRepository層での処理 ※Single<T> 3つの異なる非同期通信を束ねる部分 ※RxJavaでの処理
  11. 11. 実装した画面と機能におけるケーススタディ(2) バックエンドAPIと連動したキーワード検索画面の実装を紐解いてみる TOPからキーワードで検索を考えていく場合の画面構成はシンプルに見えるけど結構悩ましげな部分もある Section: 1 Section: 2 Section: 0 Input Keywords≡ 検索履歴: | ●●●●●●← ×キーワード ×キーワード ×キーワード ×キーワード ×キーワード TOP画面 検索実行画面 検索結果: ●●●●●●← 検索結果画面
  12. 12. 実装した画面と機能におけるケーススタディ(2) 実装に落とし込むためにまずは様々なアプリを観察して疑問点を洗い出す この画面の様な機能を実装した際にまず気をつけた部分を紹介します。 TOP/検索/結果という形で3つの独立した画面に分けるので、TOPに配置するものは飾り&遷移アニメーションで調整 Q. TOP画面のActionBarに配置する検索バーはどの様にするか? onCreateOptionsMenuとBottomNavigationを利用して切り替え処理を実行する Q. TOP画面のActionBar上に配置する検索バー表示はBottomNavigation&ViewPagerでの切り替えといかに両立させるか? Intentを利用して2つ前の画面に戻す処理で実現できそう Q. 検索結果画面表示から「戻るボタン」で一気にTOP画面へ戻るには? SharedPreference & RecyclerViewを利用する(単純にKeywordを保存するだけの機構で最初の段階であれば) Q. 履歴表示部分はどんな形で実装するか? 機能そのものに加えて、デザイン調整や慣れたアプリに近い操作感を実現する点もポイントだったように思います。
  13. 13. 実装した画面と機能におけるケーススタディ(2) SearchBarとその周辺に関する実装での補足 実装を進めていく上では下記にピックアップした記事等を参考にしました YouTubeのAndroidアプリと同じ検索ビューを作ってみる https://qiita.com/konifar/items/be37337cd10aa0ba4e1e Android x Toolbar x SearchView|常に検索バーを表示していたい https://www.memory-lovers.blog/entry/2018/09/04/164634 Android SearchView in ActionBar - Androidx and Kotlin https://prasanthvel.medium.com/android-searchview-in-actionbar-androidx-and-kotlin-3467ca8e6a14 AndroidでSearchViewをcustomizeする https://qiita.com/aryzae/items/802e48d2c0efef0c3161 SearchViewのカスタマイズ https://takerpg.hatenablog.jp/entry/20171128/1511839118
  14. 14. その他始めた当初理解するまでに苦戦した部分 実務の中でハマってしまった部分の事例を簡単にピックアップしてみます これからももっと色々と出てきそうではありますが現時点で思いつくもの エラーメッセージだけでは最初なかなか原因の特定に時間がかかってしまうことが多かったように思います。 1. Daggerを利用したDepency Injectionの部分 / MultiModule構成で作られたProjectの把握 僕自身iOSでも結構苦手意識が強い部分の1つです。 2. Backgroundで処理するような機能 iOSのUINavigationController/UINavigationBarの感じかなと思っていて最初は痛い目を見ました…。 3. onCreateOptionsMenuを利用した実装 これまでの自分が慣れていた書き方と違った部分でもあったのでやっぱり最初は苦戦していました…。 4. Retrofit & OkHttpを利用したリクエスト・レスポンスの取得処理 iOS/Androidの両方を考えていく際にはこの部分が関わる実装や機能開発時は今も注意するようにしています。
  15. 15. まとめ iOS/Android開発を並行してまだ8ヶ月ですがとても濃密で勉強になっています 1. 最初は基本事項の整理と理解から進めて今もなお継続中: 特にUI実装を考えていく時は「iOSの時はこうしていたな〜」という部分をヒントに進めることも多かった。 とはいえまだまだ知らない故にハマる時もあったりするので今後も引き続き色々と試していきたいです。 2. これまで以上にアーキテクチャや処理構成に関する部分に意識が向く様になった: 業務で触れているコードがiOS/Androidでのアーキテクチャの概略や処理のコンテキストが揃っていた。 これまで以上にDDDに関する知識や設計を意識するきっかけにもなり、またその恩恵を大きく受けているとも感じています。 他にも何か今回の様なトピックがある程度まとまったタイミングで共有できればと思います。 3. iOS/Androidでの共通点や相違点そして似て非なる部分を知る事: 同じないしは似ているような印象を持つ機能やデザインであっても実現方法やUIデザイン実装は全く異なる。 時にはデザイナーの方とも相談しながら業務の中で色々試しながら試行錯誤する経験が本当に良かった。
  16. 16. Thank you for listening ! 技術書典10では既刊アップデート対応 & 変更点をまとめたブログは共有する予定でいます! ちなみに書籍のコードについてはUpdate済 & 今年中には簡単なおまけコンテンツも予定 ただし執筆者が12月中旬に負傷(歯痛)のため進捗ががが… ちょっと宣伝

×