Android版クックパッドアプリで採用している技術の現状確認 2018年版

目次

はじめに

技術部の門田( @_litmon_ )です。

Android版クックパッドアプリで採用している技術の現状確認 2015年版 から3年、Androidアプリ開発を取り巻く環境も大きく変わってきました。 本エントリでは、以前のエントリからこれまでにAndroid版クックパッドアプリにあった技術選択の推移や、現在の状況を記していきます。

技術選択に関する基本的な方針などは変わっていないので、前回のエントリ( Android版クックパッドアプリで採用している技術の現状確認 2015年版 )を参照ください。

技術選択の各論

開発環境

現在のクックパッドアプリの開発環境は以下のようになっています。

  • Android Gradle Plugin 3.2.0
  • Gradle 4.10
  • targetSdkVersion 28
  • compileSdkVersion 28
  • minSdkVersion 21
  • support library version 28.0.0 (AndroidX未対応)
  • 使用言語: Java, Kotlin 1.2.60

ここ一年で大きく変化したことといえば、やはり targetSdkVersion と minSdkVersion 、そしてKotlinの採用でしょう。 それぞれに関して1つずつ振り返っていきたいと思います。

targetSdkVersion

targetSdkVersionに関しては、Googleが昨年12月頃にtargetSdkVersion 26以下のアプリは今後リリースもしくはアップデートできなくなるという発表をしたことで、無理矢理にでも上げざるを得ない状況が各アプリにあったと思います。 クックパッドアプリも例に漏れず、今年の頭はまだtargetSdkVersion 23だったアプリが、今年の9月にようやく26を満たすことが出来るようになりました。

targetSdkVersionをこれだけ長い時間かけて上げていったのには理由がありました。

まず1つが、targetSdkVersion 24で入ったIntent, Bundleに含められるデータサイズ制限です。 クックパッドアプリは大量のデータをActivityのIntentに載せて画面遷移を行っていたり、savedInstanceStateに保持していたため、targetSdkVersionを24に上げた状態でAPI 24以上の端末でアプリを使用すると、画面遷移を行った瞬間にクラッシュするという事態が発生していました。 ここを直すために色々と手を尽くして、最終的に以下の対応をすることで大きな問題を起こすことなくアップデートすることが出来ました。(実際にはいくつか作業ミスもありバグ報告も来ていたが、すぐに収束した)

  • Activity遷移の際のデータ保持は可能な限り小さくなるよう、大きな箇所を洗い出して修正
  • savedInstanceStateのデータ保持はAndroid Architecture Component ViewModelを使うように変更

そしてもう1つが、targetSdkVersion 26で入ったバックグラウンド制限です。 クックパッドアプリでは、料理きろくという機能の中でJobSchedulerを使ってバックグラウンド処理を行っており、その他には特にバックグラウンド制限に引っかかるようなものはない、と作業当初は思っていたのですが、実はGoogle Cloud Messagingの実装が古く、BroadcastReceiver内でServiceを起動しており、見事にバックグラウンド制限に引っかかっていました。 また、Google Cloud Messagingも2019年4月までにはFirebase Cloud Messagingに置き換える必要があったため、これを機にFirebase Cloud Messagingへの移行を行いました。

ここでもまた、アプリ上で使っているFirebaseプロジェクトが現在GCMで使っているプロジェクトと一致していない、という問題もあったのですが、GCMは2019年4月以降プッシュ通知を送れない状況であることと、そのプロジェクトはGCM以外の用途では使っていなかったこと、またプッシュ通知を送信する基盤実装への修正も容易であったことを踏まえて、廃止されるまでは両方のプロジェクトにプッシュ通知を送信する、という対応で事なきを得ました。

さらに、ローカルプッシュ通知の実装も、AlarmManagerからBroadcastReceiverを経由してServiceを起動する流れになっており、こちらもバックグラウンド制限に引っかかっていました。こちらはJobSchedulerを使った実装に変更することで対応を行い、これらの作業によって無事にtargetSdkVersion 26に上げることが出来ました。

targetSdkVersion 27, 28に関しては、上で挙げたような大きな障害はなく、すんなりと上がって今は最新の環境で開発が行えている状況です。

minSdkVersion

minSdkVersionに関しては、以前ブログでも紹介があった通り、現在は21となっています。詳細は以下の記事を参照ください。 Androidアプリ の minSdkVersion を21にした話

これによって、開発環境のアップデートに対する作業がぐっとやりやすくなりました。 正直、この1年でここまでのアップデートを行えたのはこの取り組みがあったおかげだと思っています。

Kotlinの導入

Kotlinの導入に関しては、2017年のGoogle I/Oで公式にサポートすると発表した直後から導入したいというのは話していたのですが、クックパッドアプリに関しては導入するのにだいぶ時間がかかってしまいました。

その頃のクックパッドアプリの最大の問題として「どこになにを書けばいいかが分からない」というものがあり、長い間続いているプロジェクトでアーキテクチャなどもうまく導入できておらず、無法地帯なコードベースがあったため、この状態のままKotlinを導入しても問題が増えるだけだと感じていました。 そのため、どこからKotlinを導入するか、どういう風に進めるかを基盤チームで議論した結果、VIPERアーキテクチャを導入し各画面の実装をアーキテクチャに対応させながらKotlinを導入していくことが決まりました。

その間も、他のプロジェクトや社内で使うライブラリにはKotlinを使うことに特に制限はしていなかったため、Kotlin 100%のプロジェクトも中には存在します。 また、導入の際にはStyleGuideを定めたり、社内でKotlin勉強会を開いたりして知見を共有し合ったりしていました。

方針が決まってからしばらく別の施策によって手が止まっていたのですが、クックパッドアプリでも今年の3月頃から導入を開始していて、今ではプロジェクトの約20%のコードがKotlinに置き換わっています。

f:id:litmon:20181115172928p:plain f:id:litmon:20181115172946p:plain

Swiftに比べてまだまだ手を付けられていない状況ですが、手を付けられるところから少しずつKotlinコードへの変換とアーキテクチャの適用を行っています。

HTTP Client

以前の記事時点では、Cookpad APIとの通信にはVolleyを使用していました。 ですが、以前の記事でも述べていたとおり、Volley内部で使用されているApache HTTP ClientがDeprecatedになっていたため、昨年メインとなるCookpad APIとの通信層に使用するコアライブラリをOkHttp3に置き換えました。

Retrofitなどのラッパーライブラリを使うかは検討しましたが、Cookpad APIはGarageで作られているため、Garageのリクエスト方式に沿ったものがあったほうが良いだろうという判断をして、社内ライブラリとしてgarage-client-androidを作成して使っています。

以降の展望としては、API側の変化を伴うものになっていくのではないかなと予想しています。 現在の問題点として、Kotlin, SwiftなどのNull安全な型制約を持った言語とRESTFullなAPIは相性が悪く、返ってくる値が Nullable であるかどうかが分かりにくく、開発効率も下がるしバグが発生しやすいというものがあります。 また、モバイルアプリでは、一画面で複数のリソースが必要になることが多く、RESTFullなAPIだと複数のAPI通信を行う必要がある場合が発生し、扱いが難しいところがあります。

これを解決するために、社内の一部新規サービスではGraphQLを使用したAPI通信を始めていたり、gRPCやSwaggerなどの型制約を解決できるような仕組みを使えないか検討し始めていたりします。

Dependency Injection

以前の記事時点ではRoboGuiceを使用していました。 ですが、RoboGuiceは2016年8月の時点でサポートが終了し、別のDIライブラリへの移行を余儀なくされる形となっていました。 前回の記事でも言及していたとおり、社内ではDIライブラリを使うべきかどうかという議論がずっと繰り返されており、Kotlinを導入した際に同時に導入したVIPERアーキテクチャではDIライブラリを使用しない形で進めていこうという話もしていました。

しかし、現段階で使っている箇所に関しては簡単に剥がすことも出来ないため、2018年4月からは実装も薄くてRoboGuiceからの移行が比較的簡単だったToothpickというDIライブラリを導入しています。 導入しようとしていた4月時点ではまだproguardへの対応が行われている最中だったため、少し時期尚早だったかなと思っていたのですが、いまのところ大きな問題もなく運用出来ています。

ちなみに、クックパッドで最近リリースされたcookpadTVアプリに関しては、DIライブラリにはDagger2を使用しています。このあたりの技術選定は基本的に各サービスごとのエンジニアに任せるようにしています。

cookpadTV -クッキングLIVEアプリ-

Image Loader

画像読み込みには、以前はPicassoを使用していましたが、こちらも長らく開発が滞っていたため、昨年Glideに移行しました。 導入段階ではFacebook製のfrescoも検討していましたが、こちらは画像読み込みの際のインターフェースがPicassoと大きく離れていたり、画像のサイズを予め知っておく必要があったりと、移行作業に難ありだったため見送りました。

PicassoからGlideへの移行に関しては、インターフェースも非常に似通っているためほとんど技術的な問題は起きませんでしたが、リリース後「画像が読み込めない」というお問い合わせが多数寄せられ、とても頭を悩ませたことは記憶に新しいです。(結果的に、通信レイヤーで使用していたOkHttp3のバグだったことが判明し、OkHttp3のアップデートを行うことで解決しました)

Debugging

デバッグツールには、StethoHyperion-Androidを導入しています。

Sthethoは、通信層のコアライブラリをOkHttp3に置き換えたことにより、プロキシを介さずにアプリの通信履歴を見ることが出来て、非常に重宝しています。

また、Hyperionは、SharedPreferencesに保存されているデータの中身を見たり、View構造を探索したりと、非常に多機能で優秀な上に、拡張してデバッグ用のメニューを追加することも出来ます。 今までは、クックパッドアプリのサイドメニュー下にデバッグ版のみ表示されるツールメニューを用意していたのですが、Hyperion導入後はHyperionのメニューとしてデバッグメニューをまとめることが出来るようになり、デバッグ用の機能を管理するのがとても楽になりました。

Android Emulator on Jenkins

Jenkins CI上でのAndroidエミュレータの扱いに関してもここ数年で大きく動きがありました。 弊社のCI環境は、Amazon EC2インスタンス上に構築されたJenkinsを使用しており、以前はその上にARMエミュレータを起動してCI上でのInstrumentation Testの実行に使用していました。 しかし、やはり起動時間や実行時間がネックとなり、それらの改善を行うためにこれまで様々な取り組みをしてきました。各取り組みに関してはそれぞれブログがまとまっているので、そちらを御覧ください。

現在では、AndroidエミュレータはGenymotion Cloud(旧Genymotion On Demand)を使用していますが、上記記事内でも言及している通りGenymotion CloudではGoogle Playの機能を使うことが出来ません。 これに対して、クックパッドアプリでは新たにいくつかの方法を検討中です。例えば、Firebase TestLabを使ったInstrumentation Testの実行や、上記記事でも挙げたようなグローバルチームでいち早く導入されているAWS Bare Metalインスタンスを使用したAndroidエミュレータの構築、またはFirebase, AWSなどのデバイスファームの使用などが挙げられます。

CI環境に関してもその時々で要求されるものは移り変わっていくので、色々な選択肢を試しながら技術選択を行っています。

コードレビューbot

社内では、GitHub Enterprise上でのPullRequest駆動での開発が盛んですが、その中でもコードレビューを行う際にLintやfindbugsなどの静的解析ツールによる指摘を自動化しています。

以前は、社内で開発していたdokumiというツールを使っていたのですが、 dangerというオープンソースのツールに乗り換えました。 dokumiの設定はdokumi本体に含める必要があり、各プロジェクトの設定がツールに含まれる形になってしまい、ツールとプロジェクトの関係が密になりすぎるという問題がありました。

その点、dangerは各プロジェクトごとにRubyで設定ファイルを記述することで動作するし、プラグインを作成するのも容易だったため、複数のプロジェクトに簡単に導入できるという点が乗り換えたポイントでした。また個人的に、dokumiと違ってdangerのコメントは上書きされていくので、PullRequest上に指摘コメントが積み重なっていき読みづらくなることが減るところが気に入っています。

danger導入時に関する話は以下のブログ記事で詳細に書かれているため、よろしければ読んでみてください。 Android開発のコードレビューbotを乗り換えた話

リリースエンジニアリング

以前から、リリースに伴う作業を手作業ではなく機械によって自動化するために、fastlane/supplyを使ってリリース関連の作業を自動化しています。

弊社のCI環境はJenkinsなので、Jenkinsのgoogle-play-android-publisher-pluginを使用する選択や、Gradleプラグインのgradle-play-publisherなどを使用する選択も取れたのですが、その中でもfastlaneを使用している理由は以下の点が大きいかなと思っています。

  • fastlaneはiOSアプリでも積極的に使用されていて、内製のプラグインも開発されているなど、iOSとの仕組み共通化のためにも使える
  • Gradleプラグインとして採用するとビルドに影響が出てしまうので、ビルドとリリースフローは分離したい
  • Ruby製のツールなので、社内の開発リソースと一致しやすい(※個人的な意見です)
  • Groovy書きたくない(※あくまでも個人的な意見です)

最近では、fastlane/supplyを利用してアプリの自動リリースを行い、リリースフローの機械化・自動化も進めています。こちらに関しては、iOSでの取り組みが先行しているため、以下のブログ記事を参照ください。

クックパッドアプリはみんなが寝ている間にサブミットされる

また、来たる2019年2月のDroidKaigi 2019にて、「Google Play Consoleのリリーストラックを有効活用してリリースフローの最適化を行った話」というセッションが採択されたため、そこで詳細に話す予定です。ご興味のある方は足を運んでいただけると幸いです。

おわりに

いかがでしたでしょうか。思いつく限りの最近のクックパッドアプリの開発事情について書き記してみました。

近年のクックパッドアプリは、目新しいものを導入したというよりは今まで使っていたものがどんどんと使えなくなっていったためアップデートしていったという話が主になっていることがわかります。 とはいえ、新しい技術を試していないわけではなく、使えるものは積極的に取り入れていくし、色々な技術を試すための環境は充分に用意されています。

また、今回はクックパッドアプリの開発事情について書きましたが、最近は新規サービスもどんどんと生まれてきており、複数のアプリに対する仕組みの共通化なども積極的に行っています。

これからもいろんな技術を駆使してユーザーさんにすばやく価値を届けられるように改善を続けていくので、一緒に高まっていきたい人はぜひぜひお声がけください!

【開催レポ】Cookpad Tech Kitchen #19 R&Dにおけるサービス開発者の仕事

こんにちは。広報部のとくなり餃子大好き( id:tokunarigyozadaisuki )です。

2018年11月1日に、Cookpad Tech Kitchen #19 R&Dにおけるサービス開発者の仕事を開催いたしました。クックパッドでは、Cookpad Tech Kitchenを通して、技術やサービス開発に関する知見を定期的に発信しています。

f:id:tokunarigyozadaisuki:20181118162207j:plain
部長の原島が司会を務めました

第19回は弊社の研究開発部から5名が登壇致しました。研究開発部ではサービス開発に積極的に取り組んでおり、今回は機械学習、スマートスピーカーの開発、他社を巻き込んだプラットフォームの開発などについてお話しました。 本ブログを通して当日の様子をご来場いただけなかったみなさまにもお届けしたいと思います。

発表プログラム

「スマートスピーカー向けサービス開発者のお仕事」

はじめにお話いたしましたのは、2016年新卒としてクックパッドに入社し、研究開発部 スマートキッチングループでスマートスピーカー向けのサービス開発を行う山田です。

f:id:tokunarigyozadaisuki:20181118161809j:plain

Alexaスキル「クックパッド」は「アレクサ、クックパッドで大根のレシピを教えて」のように話しかけるだけで、「ぶり大根、おでん、大根ステーキ」のような食べ方からレシピを提案するスキルです。山田からは「アレクサごっこ」と呼んでいる一人がアレクサ役、もうひとりが利用者となり、会話をしながら開発を進めていったプロトタイピングなどをご紹介しました。

「クックパッドのスマートキッチン開発」

同じく、スマートキッチングループに所属する伊尾木からは、クックパッドが考えるスマートキッチンについてや、キッチン家電向けにクックパッドのレシピを提供するスマートキッチンサービス『OiCy』に関してお話をさせていただきました。

f:id:tokunarigyozadaisuki:20181118161633j:plain

OiCyは、クックパッドに投稿されたレシピを機器が読み取り可能な形式(MRR: Machine Readable Recipe)に変換して機器に提供するサービスです。クックパッドはレシピとキッチン家電が連携することで、料理をする人の悩みや負担が軽減され、毎日の料理が楽しくなる、そんなスマートキッチンを目指して日々開発をしております。

MRR化についてはこちらでも紹介しておりますので、ご覧ください。

「クックパッドにおけるCloud AutoML事例」

3番目の発表は、ソフトウェアエンジニアで機械学習グループに所属する林田です。 f:id:tokunarigyozadaisuki:20181118162222j:plain

料理が楽しくなるマルシェアプリ『Komerco-コメルコ-』という新規事業でAutoML使った事例の紹介させていただいた後、「これからのサービス開発における機械学習」と題して、機械学習エンジニアがいなくてもサービス開発の道具として機械学習をうまく使っていこう、という旨のお話をさせていただきました。

「機械学習を用いた見栄えのいい料理画像抽出をサービスに活かすための取り組み」

次に発表させていただきました、機械学習グループに所属する三條は、2018年新卒としてクックパッドに入社した一年目の社員!

f:id:tokunarigyozadaisuki:20181118162226j:plain

機械学習をサービスで活用するためにどう評価したかと、実験時とサービス時のモデル評価のギャップの解消について、実例を用いながらご紹介しました。

「クックパッドにおけるチャットボット開発 / Chatbot Development at Cookpad」

最後は、2017年にクックパッドに中途入社、機械学習グループに所属し、自然言語処理を用いてサービス開発に従事している Huy Van phu quangです。

f:id:tokunarigyozadaisuki:20181118161951j:plain

検索キーワードを考えるのを面倒に感じるユーザーや、新しいレシピに出会うことができないといった課題をどう発見していったか、チャットボットでサポートするためにどのような開発手法を取っているか(こちらでも「botごっこ」は大活躍!)サービスの再設計までのなどについてお話致しました。

付箋形式でお答えするQ&Aディスカッション

Cookpad Tech Kitchenでは参加者のみなさまからの質問を付箋で集めております。第20回では、各発表後の質疑応答の時間も含め、みなさまにたくさんのご質問をいただきました。ありがとうございました! 

シェフの手作り料理

イベントに参加してくださったみなさまにおもてなしの気持ちを込めて、シェフ手作りのごはんをご用意し、食べながら飲みながらカジュアルに発表を聞いていただけるように工夫しています。

f:id:tokunarigyozadaisuki:20181118162138j:plainf:id:tokunarigyozadaisuki:20181118162158j:plain

おわりに

クックパッドに研究開発部ができて2年が経ち、今回ご紹介したことの他にも様々な取り組みがありました。クックパッドにおける研究開発部の役割は「社内外の最新の研究成果にもとづくサービスの企画と開発」で、具体的には「食や料理、レシピに関する研究成果」です。これらのシーズとユーザーのニーズを紐付け、他部署と一緒にサービス開発に日々取り組んでいるところです。今後も様々な取り組みに挑戦すべく、一緒に取り組んでいただける方を募集しておりますので、ご興味がある方は採用ページを是非ご覧ください。ご応募をお待ちしています。

https://info.cookpad.com/careers

次回のCookpad Tech Kitchenは、11月28日(水)、クックパッドのマイクロサービスプラットフォームの現状 です! イベント情報についてはConnpassページについて随時更新予定です。イベント更新情報にご興味がある方は、ぜひメンバー登録をポチっとお願いします!

cookpad.connpass.com

デザインとエンジニアリングをつなげる取り組み

こんにちは、Komerco事業部デザイナーの藤井(@kenshir0f)です。
主にKomercoのサービスデザイン全般とView周りの開発を担当しております。

今回はKomercoの開発チームで実践している「デザインとエンジニアリングをつなげる取り組み」についてお話します。

なぜデザイナーが実装に入るのか

Komercoではユーザーさんへスピーディーに価値を届けるための取り組みを積極的に採用しています。
素早くリリースすることによって、早い段階でフィードバックをもらうことができるほか、
手戻りなどの失敗リスクを最小限に抑えることもできます。

デザイナーがデザインして、エンジニアが実装する、という流れの中で、
実機でのデザイン確認や細かい調整などで想定以上に工数がかかることがあるため、
見た目に関する部分はデザイナーが実装に入ることで、デザイン確認や調整の時間を巻き取とっています。

実践している取り組み

では実際に行っているデザインとエンジニアリングをつなげる取り組みをいくつかご紹介します。

KomercoFont

Komerco内で使われているアイコンフォントです。
iOSリリース時はアイコン画像をpngファイルで (@1x), @2x, @3x を用意していました。
新しいアイコンが出来上がったらPull Requestで画像を追加するフローでしたが、アイコン画像の管理コストが高いことや、画像容量も大きくなってきたためバージョン管理によるフォント形式に移行しました。

なおアイコンはGithubPagesに静的ページを用意することで、現在どのアイコンが利用可能か見えるようにしています。

f:id:kenshir0f:20181107144230g:plain

アイコンフォントを用意したので次は実際に使えるよう準備します。
Komercoでは管理画面をReactで開発しているため、IconのReactComponentを用意することでエンジニアがサクッと使えるようにしています。

// エビのアイコン
<Icon name={ 'shrimp' } />

同様にiOSではこのような感じに使います。
ここはチームのエンジニアがKomercoFont導入の話をした時にシュッと作ってくれました。すごい。

// UILabel
label.kf.icon = .crab

// UIButton
button.kf.setIcon(.heart)

これでアイコンフォント(ttf)を更新するだけで各アイコンが簡単に使えるようになります。

Komercomponents

ReactのComponent集です。名前は仮なのでかっこいいやつに差し替えたいですね。。
上で述べたとおり管理画面のViewはReactで開発しているため、事前にデザインが当たっているコンポーネントを用意しておくことでエンジニアの見た目の調整に関する負担を減らし、裏側のロジックに時間をさけるようにしています。

import { Icon, Button } from './../Komercomponents'

// ユーザーアイコン(20px)
<Icon name={ 'user' } size={ 20 } />

// プライマリーのボタン
<Button color={ 'primary' } disabled={ this.state.isLoading } onClick={ this.deleteElement() }>削除</Button>

意図しない挙動を防ぐため、propsはホワイトリスト方式で受け取れるようにしました。
こちらもミニマムで作っていき、必要なステータスを受け渡したくなったら徐々に拡張して行く予定です。
TypeScriptで開発しているため事前に受け取れるpropsを提示したり、許可しない型を警告してくれるため安心してReactComponentを開発することができます。型便利ですね。

f:id:kenshir0f:20181107142320p:plain

またCSSはCSS Moduleを使うことで表示のロジックと見た目の責任を切り分けるだけでなく、新たに入るデザイナーでも簡単に編集できるようにしています。

import * as style from './style.css'

<Icon className={ style.primaryColor } name={ 'komerco' }>

Komercomponentsは当初npmで管理しようと考えていましたが、
開発中にComponent化することが多いためGit Submoduleでインポートするようにしました。
このKomercomponentsは現在非公開ですが、公開しない理由も特に無いため充実してきたらOSSにしようという流れで開発を進めています。

Komercomponents API document

上記KomercomponentsのAPI仕様ページです。
Doczを用い、FirebaseのHostingに静的ページを置くことでwebからComponentsの仕様を把握できるようにしています。

f:id:kenshir0f:20181107145020p:plain

初めはStorybookも検討しましたが、作成・管理するコストがDoczの方が低いと感じたためこちらを採用しました。
propsに仕様のコメントを残すと自動で読み込むため、仕様書の作成コストが低くすばやく開発を進めることができます。

Lottieによるアニメーションの導入

アニメーションにはOSSライブラリのLottieを採用しています。
デザイナーがAfterEffectsからjsonファイルを書き出してそのまま実装まで行えるほか、軽量かつwebでも同じアニメーションを使うことができます。

f:id:kenshir0f:20181107142429g:plain:w400

現在は主に「スキ」のインタラクションで使用していますが、リッチな体験を提供するために今後アニメーションを使うシーンが多くなることを見越して「デザイナーがアニメーションを作成してそのまま本番に載せる仕組み」を用意しました。
KomercoではRxSwiftで書かれた処理が多いのでその部分に関してはエンジニアに相談しつつ、デザイナーが実装してPRでレビューをもらうことでエンジニアの負担を減らしながらデザイン要素を取り入れることができます。

f:id:kenshir0f:20181107142204p:plain

AutoLayoutを使ったデザイン調整

個人的に「デザイナーがやったほうがいいと感じたデザイン調整ランキング1位」はiOSのAutoLayoutでした。

f:id:kenshir0f:20181107143327p:plain:w300

主な理由として、

  • フォント周りにおいて、デザインデータのマージンとXcodeで入力した値は同じでも見た目は微妙に異なる
  • 「数px調整 -> ビルド -> 確認 -> 調整 ...」でビルドによる待ち時間と確認のコミュニケーション回数が多い

などがあります。調整のたびに毎回ビルドするのは大変ですね。。。 AutoLayoutは最初とっつきにくいと感じましたが、エンジニアとペアプロしつつ

  • leading, trailingなどの用語とそれらの位置関係の把握
  • Constraintsによる要素間のつなげ方

などを理解したうえで、簡単なPRを出すところから少しずつ慣れていきました。
それ以降は軽微なデザイン修正はデザイナーがAssignされて調整するようにしています。

おわりに

Komercoにおけるデザインとエンジニアリングをつなげる取り組みについてご紹介しました。今ある技術を使って少ないコストで開発効率を上げる仕組みを積極的に取り入れています。
体験設計やUIデザインだけでなくどうしたらユーザーさんにすばやく価値を届けられるか、その仕組みをデザインするのもデザイナーの腕の見せどころなので引き続き開発にも取り組んでいきたいと思います。

ではでは👋