はじめに
こんにちは、黒瀧です。10月16日にペパボモバイルテックカンファレンスをオンラインにて開催しました。発表内容について登壇者の方々からコメント頂いているので、ぜひ読んでください！
発表
新卒エンジニアが配属3ヶ月でやってきたこと
こんにちは、EC事業部 カラーミーショップグループ サービス基盤チーム所属のtatsumi0000です！ 業務では、iOSアプリを開発しています。今回は業務で開発中のアプリで使っている技術や、どのように開発しているかについて、発表しました。
発表で紹介した技術は以下の通りです。
ReactorKit
ReactorKitは単方向ストリームのアーキテクチャを構築するためのフレームワークです。 Reactive Programmingをまだ学習中の状態で、どのようにReactorKitを使って開発しているかについて発表しました。 スライドには大雑把ですが、ReactorKitを使ったサンプルコードも載せました。
SwiftLint
SwiftLintを使ったコードフォーマッタ導入について発表しました。リポジトリ内でpre-commitフックを共有する方法と、差分のあるSwiftファイルだけフォーマットするシェルスクリプトのコードも載せました。 差分のあるファイルだけフォーマットするシェルスクリプトは他のフォーマッタにも応用できます。実際にclang-formatに応用した例も載せておきます。
jazzy
jazzyは、Swift、Objective-Cのドキュメントを生成するコマンドラインツールです。 発表中、使い方の詳細については述べませんでしたが、個人開発で使っていたので、そちらのリポジトリを載せておきます。 こちらのリポジトリではTravis CIを使ったCD設定まで出来ているので参考にしてください。
学生の方などに、リモート環境の中でペパボの新卒エンジニアがどうやって開発しているか少しでも伝わると幸いです。
バックエンド駆動UI: 画面の流動化
@joshです！minneの最近作り直したホーム画面の例を使って、モバイルのバックエンド駆動UIについて発表しました。
minneのホーム画面の各セクションの並び替えや内容をJSONで定義しており、Firebase Remote Configで気軽にWEBコンソールから変更できるようにしました。これにより、ユーザ属性による最適化やA/Bテストが楽にできるようになり、非エンジニアのデザイナーやディレクターの方でも変更できるようにしました。
発表では、デモを見せて、プロトタイプに使っていたサンプルアプリShopのコードや実装方法について説明しました。例えば、複雑な画面の構成情報をバックエンドから取得してからUICollectionViewCompositionalLayout やUICollectionViewDiffableDatasourceなどの宣言的なAPIを活用して、状態管理や複雑なレイアウトが楽に実装できたことや概ねのデータの流れについて触れました。
バックエンド駆動UIは、最新の宣言的なAPIを使えば、複雑で変更の多い画面でも実装できて、A/Bテストやユーザ属性による最適化が容易になり、高速に行えるといったメリットがあります。リスクや課題についても説明しつつ、どのような画面からやっていくのが良いかについて話しました。サンプルアプリのコードをShopでOSS公開しているので、ご参考になればと思います。
iOS13でもSwiftUIでLazyなGridを実装したい！
SUZURI事業部の黒田です。
iOS14がリリースされてから、SwiftUIの実戦投入はいつ頃からできそうかを検証してきました。特に、UIKitにおけるUICollectionViewはSUZURIで多用していることもあって、重点的に調査を行っています。
今回の発表ではその調査の過程と結果をまとめております。SwiftUIへの移行や新規アプリを作るときの技術選定に役立てば嬉しいです。
SUZURIでは直近での移行はしないという結論に至りましたが、SwiftUIという技術自体はとてもよいもので、実用可能段階に入ったらすぐに移行できるよう引き続き検証していこうと考えています。要件次第ですが、プロトタイプや小さめの個人アプリなどでは現時点でも使えると思うので、これを期にSwiftUIに興味を持ってくれる人が増えればいいなと思っています。SwiftUIはいいぞ！
ペパボのデザインシステムと、モバイルアプリ領域における取り組み
デザイン部デザイン戦略チームの柳生(gyugyu)です。
ペパボでは以前は各サービスで独自にデザインシステムを構築しようとする動きがありましたが、最近ではこれまで作られてきたデザインシステムを全社的に取りまとめる動きが起こっています。この動きにはどのようなエンジニアリング的裏付けがあるのか、またモバイルアプリでも同じような考えを展開するにはどう実装すれば良いのかという発表をしました。
ペパボではこれまでの歴史的経緯からデザイナーがマークアップまでを担当し、フロントエンドのロジックからサーバサイドまでをエンジニアが担当してしました。その歴史的経緯の結果として、モバイル領域やフロントエンド領域で立ち遅れていたという側面があったことは否定できません。しかし、React Native, Flutter, SwiftUIの登場により、ペパボでもエンジニアとデザイナーの職種の垣根を越えた交流が始まっています。
こうした状況の中で、今回の発表では「デザインの構造をエンジニアリングの観点で補強することが可能であり、その裏付けはウェブフロントエンドやモバイルを問わず実現可能である」ということを述べました。
今回の発表はペパボに合う形では実装はこうなるであろうという内容となっていますので、所属している組織ではどう実現できるかという振り返りに使っていただけると幸いです。
SUZURI Androidアプリの例から提案するこれからのモバイルアプリケーションのデザインプロセス
SUZURI事業部シニアデザイナーの福嶋(@putchom)です。
最近Flutterを使ってSUZURIのAndroidアプリをリリースしたのですが、その見た目やインタラクション部分の実装を担当しました。その経験から、今後モバイルアプリケーションのデザイン・開発へのUIデザイナーの携わり方をご提案しました。
要約すると、
- SUZURIのAndroidアプリ開発が人的リソース不足で難航
- ペパボのUX Engineeringのモバイル開発分野が弱い
という問題を解決するべく、Flutterを利用して、デザイナー主導でモバイルアプリのプレゼンテーション層のプロトタイピングやコンポーネント設計を行うべきという主張をさせていただきました。
実際に導入してみてよかった点などは資料に記載していますので参考にしていただけると幸いです。
ペパボとFlutterのこれまでとこれから
SUZURI事業部アプリケーションエンジニアの時田(@tokky)です。
Flutterで半年ほどプロダクト開発を続けてきたので、その中で得た知見や、今後のモバイルアプリの開発にFlutterをどう取り入れていくのかについて発表を行いました。
Flutterはクロスプラットフォームという文脈で注目がされがちですが、宣言的UIプログラミングというパラダイムを採用している点が非常に大きいと考えています。
UIとロジックのコード分離はデザイナーとうまく協業していくために避けては通れない道で、それを実現しやすくしてくれる宣言的UIプログラミングはモバイルアプリ開発において普及していくことが予想されます。実際、SwiftUIやJetpack Composeなどが登場し始めています。
実際にFlutterでモバイルアプリ開発を続けてきた体験をもとに発表を行ったので、Flutterの採用を検討されている方はぜひ参考にしていただければと思います。
まとめ
iOSやAndroidの開発に関する話からデザインシステムやデザインプロセスの話まで盛りだくさんの内容でした。 今後もオンラインイベントやテックブログで発信していきたいと思いますので、どうぞよろしくお願いします！ ご参加いただいた皆さまありがとうございました！