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

1. 少しずつキャッチアップしていくAndroidアプリ開発
の補足と振り返り
potatotips #72 @ オンライン
2020/12/22
Fumiya Sakai

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. iOSのUI実装本を執筆しています！
少しの工夫で実現できるTIPS集 ライブラリ表現の活用集
書籍に掲載したサンプルのバージョンアップや続編等に現在着手中です。

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. 新たに技術書典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. 今年の5月末よりAndroidアプリ開発もするように
7月下旬 / 11月初旬にもAndroidアプリ開発に関するトピックを話しています
最初は基礎を徹底的に固める 簡単〜標準？位のタスクを実施
https://note.com/fumiyasac/n/nec1c3c80f12d
僕が業務で初めてAndroidアプリ開発に着手
して2ヶ月程経過した中での振り返り
https://www.slideshare.net/fumiyasakai37/android-239074927
少しずつキャッチアップしていく
Androidアプリ開発
いざ実践だ〜

7. 最初は不安のほうが大きいけど少しずつ理解を深める
いきなりコードを読む衝動を少し押さえてインプットをメインにする
最初は基礎を徹底的に固める 簡単〜標準？位のタスクを実施Kotlin/AndroidStudioに触れる
早い段階で実施したこと：
基本事項をノートに自分でまとめて
いきながら実務で頻出な部分を重点
的に＆自分なりにしつこく書き記す
感じで書き記していく。
（これは自分が慣れた方法）
・基本のさらに基本を知る
両方一緒に
早い段階で実施したこと：
読みながら仕様と基礎を理解する
操作方法 / デバッグ手法 / 実機
・Kotlinの書き方を知る
Swiftの文法をヒントに読み進める
早い段階で実施したこと：
従来通りSwiftのUIサンプルを作る
が、それに合わせるバックエンド側
部分をServer Side Kotlinで簡単な
物を試してみる。
（Backend側も知れるのでお得）
・アプリにおける基本理解
ライフサイクルやAndroid機能等
・UI実装部分における理解
iOSアプリとの共通点＆相違点
・実務で使われるものの理解
RxJava / Dagger / Apollo …
・複雑な構造を組み立てる
RecyclerView / ViewHolder …

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. 実装した画面と機能におけるケーススタディ(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. 実装した画面と機能におけるケーススタディ(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. 実装した画面と機能におけるケーススタディ(2)
バックエンドAPIと連動したキーワード検索画面の実装を紐解いてみる
TOPからキーワードで検索を考えていく場合の画面構成はシンプルに見えるけど結構悩ましげな部分もある
Section: 1
Section: 2
Section: 0
Input Keywords≡
検索履歴:
| ●●●●●●←
×キーワード
×キーワード
×キーワード
×キーワード
×キーワード
TOP画面 検索実行画面
検索結果:
●●●●●●←
検索結果画面

12. 実装した画面と機能におけるケーススタディ(2)
実装に落とし込むためにまずは様々なアプリを観察して疑問点を洗い出す
この画面の様な機能を実装した際にまず気をつけた部分を紹介します。
TOP/検索/結果という形で3つの独立した画面に分けるので、TOPに配置するものは飾り＆遷移アニメーションで調整
Q. TOP画面のActionBarに配置する検索バーはどの様にするか？
onCreateOptionsMenuとBottomNavigationを利用して切り替え処理を実行する
Q. TOP画面のActionBar上に配置する検索バー表示はBottomNavigation＆ViewPagerでの切り替えといかに両立させるか？
Intentを利用して2つ前の画面に戻す処理で実現できそう
Q. 検索結果画面表示から「戻るボタン」で一気にTOP画面へ戻るには？
SharedPreference & RecyclerViewを利用する（単純にKeywordを保存するだけの機構で最初の段階であれば）
Q. 履歴表示部分はどんな形で実装するか？
機能そのものに加えて、デザイン調整や慣れたアプリに近い操作感を実現する点もポイントだったように思います。

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. その他始めた当初理解するまでに苦戦した部分
実務の中でハマってしまった部分の事例を簡単にピックアップしてみます
これからももっと色々と出てきそうではありますが現時点で思いつくもの
エラーメッセージだけでは最初なかなか原因の特定に時間がかかってしまうことが多かったように思います。
1. Daggerを利用したDepency Injectionの部分 / MultiModule構成で作られたProjectの把握
僕自身iOSでも結構苦手意識が強い部分の1つです。
2. Backgroundで処理するような機能
iOSのUINavigationController/UINavigationBarの感じかなと思っていて最初は痛い目を見ました…。
3. onCreateOptionsMenuを利用した実装
これまでの自分が慣れていた書き方と違った部分でもあったのでやっぱり最初は苦戦していました…。
4. Retrofit & OkHttpを利用したリクエスト・レスポンスの取得処理
iOS/Androidの両方を考えていく際にはこの部分が関わる実装や機能開発時は今も注意するようにしています。

15. まとめ
iOS/Android開発を並行してまだ8ヶ月ですがとても濃密で勉強になっています
1. 最初は基本事項の整理と理解から進めて今もなお継続中：
特にUI実装を考えていく時は「iOSの時はこうしていたな〜」という部分をヒントに進めることも多かった。
とはいえまだまだ知らない故にハマる時もあったりするので今後も引き続き色々と試していきたいです。
2. これまで以上にアーキテクチャや処理構成に関する部分に意識が向く様になった：
業務で触れているコードがiOS/Androidでのアーキテクチャの概略や処理のコンテキストが揃っていた。
これまで以上にDDDに関する知識や設計を意識するきっかけにもなり、またその恩恵を大きく受けているとも感じています。
他にも何か今回の様なトピックがある程度まとまったタイミングで共有できればと思います。
3. iOS/Androidでの共通点や相違点そして似て非なる部分を知る事：
同じないしは似ているような印象を持つ機能やデザインであっても実現方法やUIデザイン実装は全く異なる。
時にはデザイナーの方とも相談しながら業務の中で色々試しながら試行錯誤する経験が本当に良かった。

16. Thank you for listening !
技術書典10では既刊アップデート対応 & 変更点をまとめたブログは共有する予定でいます！
ちなみに書籍のコードについてはUpdate済 & 今年中には簡単なおまけコンテンツも予定
ただし執筆者が12月中旬に負傷（歯痛）のため進捗ががが…
ちょっと宣伝