Kitchen」が開催されました。クックパッドマートの開発秘話」。ネットスーパー「クックパッドマート」の開発の裏側について、事業責任者、エンジニア、デザイナーたちが語り尽くします。「クックパッドマートのアプリ開発について」に登場したのは、中山陽介氏。クックパッドマートのアプリ開発の裏側と、デザイン面での知見を語ります。中山陽介クックパッド株式会社クックパッドではデザインスプリントにのっとっている中山陽介氏(以下、中山):お待たせいたしました。私はiOSアプリを開発している中山と申します。本日はクックパッドマートのアプリ開発についてお話をさせていただきたいと思います。アプリをリリースするまでの道のりについてじっくりお話を聞いていただければと思います。その前に自己紹介をさせてください。僕はiOSとAndroidのアプリエンジニアです。個人アプリの開発者でもあり、今累計110万ダウンロードほどの規模のアプリを運用しています。価格比較アプリと賞味期限管理アプリとか、なんか少し地味なアプリをつくっているんですが、そのなかでもsubscriptionの課金のアプリをつくるのが好きです。技術はFireBaseとKotlinとSwiftが好きです。家族は嫁さんと2児の、息子と娘がおります。これからクックパッドマートアプリの説明をさせていただきます。「クックパッドマートのiOSアプリ開発の進め方」。デザインスプリントというのは、デザイン上の課題を解決するために5日間という期間を設けて、本当にすごいスピードでプロトタイピングをつくって、検証してユーザーテストを行う方法なんですが、そういうものを始めに4月に行いました。その後、その期間の間に先ほど長野からお話があったように、WebサイトでECサイトをつくって、社内テストで運用を開始しました。その後に社内でiOSアプリをリリースしました。社内で運用を開始したのが7~9月ぐらいの2ヶ月で、一般公開する前に社内でテストを行いました。一般ユーザー向けには9月20日にリリースしました。アプリなのか?「なぜアプリでなければならないのか?」。これはもうパーソナライゼーションです。基づいてサービスを提供したい」と。お腹が空いたタイミングに通知したいとか、注文はサクサクパフォーマンスが重要です。毎日アプリ使ってもらいたいので、ヌルヌルお買い物してほしいということで、アプリの開発がスタートしました。序盤はこういう感じで、デザイナーが機能込みでSketchで、先ほど米田からあったように画面をつくります。実現できるかわからないですが、盛り盛りの状態で画面を実装して、議論をして、壊してみる。社内配信をして、プロトタイプツールを使って使いやすさをためす。ユーザーテストを行う。最後にデザインして、もう一度配信、みたいなことをループしてました。大切なことは、もう本当にこまめに仲間へ自慢しに行く頻度ですかね。みたいなワイワイやるような感じで。お互いがその調子で褒め称えると。デザインと仕様は何度も変更しました。喜んで!クックパッドマートアプリのデザインの歴史はすごいもので、一番最初はこんなにシンプルなかたちで、この時点で実装を始めていました。先ほど出たNetflixが出てきて、影、テーブルビューどうするんだろうとか、いろいろあると思うんですけれども。上とかも増えてきて、iOS開発でナビゲーションコントローラーの上に要素を置くというのは本当に大変で......みなさんわかると思うんですけれども。完璧なデザインは後から作り直しにくい「デザイン変更は柔軟に」。スケジュールの問題でデザインの表現が狭まるのは本当によくない。これはデザイナーの方も言っているし、僕もそう思っています。実装して一番大切なことは触れることです。細かいcommitでつくりながら、高い頻度でチームへアプリを配信して、レビューして、そしてフィードバックをもらってまた実装してから気付くこともあると。実装して課題が生まれて、運がよければセレンディピティ的な、目的のものとはまた違うものが発見できたりとか、いいこともあります。デザインFix後に実装すると制約が本当に生まれやすい。完璧なデザインでやってくると、あとで制約が多いので、つくり直しがきかないみたいなことがあると思います。「一度すべての画面を遷移付き実装してみては?」というのは、実際にやったんですが、iOSアプリをつくっている方はすごいよくわかると思うんですけれども。このままさすがに実装を進めるのはまずいんですが、最初に画面の実装で、どの画面があるかというのをまず俯瞰して見ることがすごく大事だなと思いました。すべての画面をまずStoryboard上にいったんつくってしまって、実装を本格的に始めたら、よくある1Storyboardから1ViewControllerへ。コンフリクトが発生したりとかするので、こういったかたちになります。そのサイクルをできるだけ早く回したい。開発速度を上げるために具体的にやったことで、もう何度でも壊せるようなつくり、できるだけデザインはパーツ化、xibとかでやります。差し替えが容易な状態で、パーツも俯瞰できるように。debugはもうbuildを極力せずに、LLDBを使って、コマンドでどんどんdebugしていける。ファイル数は序盤はもうすごく少ない状態が僕はいいなと思っていて、ファイル数は本当に少なくします。APIを分業していた部分があるので、そのへんはダミーのJSONを自分で用意してしまって、まずいったんデザインを完成させてしまう。疎結合はディレクトリごと削除してもなんとか動くみたいな、それぐらいしっかり分けて書く。コピペで作れる状態を持っておく、強くてニューゲームそして極力、これはなんかおかしい話なんですが、コードは書かないみたいな。SwiftGenみたいなSwiftジェネレーターで、定数とかは全部ジェネレートでやってしまって、よく使ったのがSnippetです。「強くてニューゲーム」、これがすごく大事で、常にプロジェクト開始前から道具をそろえておくということが僕は大事だなと思いました。開発しているとXcodeのTemplate化みたいなものを自前でどんどん持っておく、ある程度つくられた状態からスタートしていくというのが僕のおすすめです。CocoaPodsやCarthageなど、必ず入れるものというのは、なんとなくみんな入れていると思うんですけれども、確実に入れるだろうというスタメンみたいなものをつくっておくといい感じです。過去の開発でも、コードレビューが通ったものは貪欲にどんどんスニペットに追加していく。ほとんどコピペでつくれるような状況というのを僕らは持っています。クックパッドマートのアプリ自体も、すごくスタンダードなつくりであることがアプリ開発をやっている方だとわかると思います。下にタブがこういうふうに3つあって、上にナビゲーションがあって、スライドがあって、この前にチュートリアルとログイン画面があるという、この状態を本当にまっさらな状態で持っておくと、あとはテーブルビュー、コレクションビューを組んでいくという感じの状況がつくれるので、かなり高速につくれます。プロジェクトが終わるたびに強くなります。一個一個xib化しているとファイル数がどんどん増えてしまうので、1ファイルで俯瞰して見られるようにしました。パーツの比較と変更・管理がこの状態はすごく楽になりました。普段遣いしなければ、求められている機能もわからないここからは少し熱が熱いところになるんですけれども、自分がアプリ開発する上でもっとも大切にしていることは、これに勝るものはありません。「自分が開発しているアプリを普段使いする」こと。これが僕は一番大切だと思っています。半分ぐらいいらっしゃいますね。みなさんさすが使っていらっしゃる。普段使いしないと、便利なのか不便なのか、ほしい機能すらわからない。開発者の多くが、僕が出会ったという個人的な偏見ではあるんですけれども、コードを組むことが楽しいだけという方もけっこういらっしゃって。アプリというのを本当につくっていかなきゃいけないという前提がないケースもけっこう多いので、僕はこれをすごく大事にしています。僕が本当によく使うアプリを今日は集めてみました。