主にバックエンドのエンジニアとしてクックパッドマートの開発に携わっている塩出（ @solt9029 ）です。 美味しい食材をユーザにお届けするサービスであるクックパッドマートでは、日々街の販売店や地域の生産者が商品の登録を行っています。 商品を登録する際、販売者は消費期限をはじめとする様々な品質保証の情報を正確に入力する必要があります。 しかし、商品の種類や状態に応じて記載するべき品質保証の情報は異なるため、全項目が羅列されるフォームでは正確な入力が困難であり、販売者および商品の審査を行う社内の運用メンバに対して大きな負担をかけていました。 そこで、 JSON Schema を利用して複雑なフォームの出し分けを自動で制御し、またバックエンド側でのバリデーションも行うことが出来る仕組みを導入しました。 その結果、商品の種類や状態を選択するだけで、適切な品質保証の情報が自動的に入力され、必要な

技術部の外村（@hokaccha）です。今回はクックパッドのウェブサイトのフロントエンドを Next.js などを使って作り直している話を書きます。 この記事で紹介する新システムは、スマートフォン向けのレシピページで確認することができます。もし興味があるかたはレシピページをスマートフォンのユーザーエージェントで開いて DevTools などで確認してみてください。 Next.js と GraphQL で動いているのがわかると思います。 ご存じの方も多いかもしれませんが、クックパッドのウェブサイトはモノリシックな Rails で作られていて、10年以上 Rails で開発を続けてきました。10 年以上同じシステムで開発を重ねれば当然レガシーな部分が大量に生まれてきますが、特にフロントエンドはその影響が顕著でした。 どこから使われているかわからない CSS が大量にある、JS のコードは昔なが

コーポレートエンジニアリング担当 VP の @kani_b です。 新型コロナウイルス感染症の拡大リスクを鑑みて、従業員や関係者の皆さまの安全確保を目的に、クックパッドでは 2/18 (火) から、国内拠点の全従業員（正社員、契約社員、パート・アルバイト、派遣社員、通常在席の業務委託）を対象に在宅勤務の原則化を実施しています。現在は5月末まで継続する予定としています。 クックパッド、新型コロナウイルス感染症の拡大に伴う在宅勤務（Work from Home）を5月末まで継続のお知らせ | クックパッド株式会社 また、クックパッドでは、今の状況にあわせた、料理に関する様々な取り組みを進めています。そうした取り組みを集めたページをオープンしていますので、こちらもぜひご覧ください。 私たちは、料理でつながろう | クックパッド株式会社 さて、在宅勤務が開始された 2 月に、在宅勤務に対する取り組

こんにちは、開発ディレクターの五味です。クックパッドにレシピを投稿してくれるユーザーのための機能やサービスを開発する「投稿開発部」に在籍しております。 投稿開発部は、2018年1月に前身となる部からメンバーを一新して発足した部署です。自分たちで1から戦略を作るため、強い実感を持ってユーザーを理解することを信条に、資料を読んだり前任者に聞いたりするだけではなく、実際にユーザーとたくさん話し、たくさんレシピを投稿し、ユーザーのことをたくさん考えてきました。 この記事では、その中でぶつかった課題を解決するために取り入れた書籍や、それをうまく業務に取り入れるために行っている工夫を紹介します。 サービス開発にはさまざまな壁が現れる ユーザーと事業目標に真摯に向き合うほど、サービス開発にはたくさんの壁が現れます。私たちも例外ではなく、部の発足以降、以下のような壁に激突してきました。 「ユーザー課題の見

VP of Technology の星 (@kani_b) です。技術基盤や研究開発領域などを担当しつつ、社内の色々なことを技術の力でいい感じにする仕事をしています。セキュリティや AWS の話が好きです。 さて、みなさんは、ご自身が勤務する会社の就業規則を読んだことはあるでしょうか。 エンジニアに限らず、会社の全スタッフが仕事をする上で関わってくるのが、就業規則や情報セキュリティドキュメントなど、会社のルールや規程を記す文書です。 特にセキュリティやインフラに携わるエンジニアは、その改訂も含め携わったことがある方もいるのではと思います。 よくある文書管理 こうした文書は、以下のように管理されていることが多いようです。 ベースドキュメントは Word 保存時は PDF で保存 版管理は Word の編集履歴 + PDF に保存する際のファイル名 編集は担当部門, 担当者のみが行う かつての

会員事業部の三吉（@sankichi92）です。 クックパッドでは、GitHub Enterprise の Pull Request を使ったコードレビューを広く実施しています。 この記事では、私がコードレビューすることに対する苦手意識をなくすために意識したことを紹介します。 クックパッドでは、テックリードや新卒、インターン、バイトといった肩書きに関係なく、誰もがレビュワー・レビュイーになります。 チームやプロダクトによって開発ルールは少しずつ異なりますが、私の所属する会員事業部では、PR を出したときに GHE やチャットで部内のエンジニアにメンションして、その時にレビューできる人がレビューするという形を取っています。 私は、昨年2017年に新卒入社したのですが、それまでは個人開発や研究用のコードしか書いたことがなく、短期インターンシップを除くチーム開発の経験がありませんでした。 配属当

こんにちは。モバイル基盤部の@giginetです。平成最後のエントリを担当させていただきます。 iOSアプリの開発では、Xcodeが生成するプロジェクトファイルである、*.xcodeprojをリポジトリで共有するのが一般的です。 しかし、この運用は大規模なプロジェクトになるほど、数多くの課題が発生します。 クックパッドiOSアプリは巨大なプロジェクトであり、通常の*.xcodeprojによる管理には限界が生じていました。 そこで、昨年秋にXcodeGenというユーティリティを導入し、プロジェクト管理を改善したので、その知見をお伝えします。 従来のプロジェクト管理の問題点 ファイル追加の度にコンフリクトが発生する *.xcodeprojファイルはプロジェクトに含まれるソースファイルの管理を行っています。 開発者がプロジェクトにファイルを追加すると、このプロジェクトファイルが更新されることにな

こんにちは。クックパッドマート連載3日目を担当します、買物事業部エンジニアの今井（@imashin_）です。 去年の10月ごろから、生鮮食品ECサービスクックパッドマートの販売者向けサービスの開発を行っています。クックパッドマートを利用するのは、商品を買うユーザだけではありません。商品を販売する方々にも簡単に利用できるよう開発を進めています。 今回は、どのようにして商品を販売者からユーザまで届けられるように開発しているかを紹介します。 クックパッドマートではどうやって商品をユーザに届けているのか まず、今どのように商品を届けているのか、商品の注文から受け取りまでの流れを紹介します。 発注 02:00 注文締め切りと同時に配送計画を作成する 02:15 販売者に対してFAXまたはLINE WORKSにてPDFを送付し、商品の注文内容を伝える 販売者は、四六時中クックパッドマートだけを利用して

研究開発部のサウラブ(bira)です。 本稿ではユーザがレシピの作成にかける労力を減らすために取り入れた、機械学習を利用した機能の一つについて 解説します。この機能を利用すると、ユーザがレシピのタイトルを入力することで、利用されるであろう材料が予測できます。 要約 レシピのタイトルから材料を予測できるモデルを作りました。 投稿開発部と協力してレシピエディタに材料提案機能を追加しました。 App Storeで入手可能な最新のCookpadアプリ（v19.6.0.0）でこの機能を使用できます。 前 今 モデルはどうなっているか 1.　Embed 学習(Training): Word EmbeddingとSentence　Embeddingを学習してS3にアップロードします。（次のセクションで説明） 前処理(Preprocessing): 特殊文字を削除します。 多くのCookpadユーザーはテ

インフラストラクチャー部の青木峰郎です。 最近はDWH運用の傍ら、所属とまったく関係のないサービス開発のためのデザインスプリントをしつつ、 Java 10でgRPCサーバーを書きつつ、 リアクティブプログラミングを使った非同期オーケストレーション層を勢いだけで導入したりしています。 ですが今日はそれとはあまり関係なく、クックパッドの中核サービスであるレシピサービスの アーキテクチャ改善プロジェクト、「お台場プロジェクト」の戦略について話します。 これまで、お台場プロジェクトで行った施策について対外的に発表したことはあっても、 全体戦略について話したことはありませんでした。 その一番の理由は、正直に言って、プロジェクトオーナーであるわたしにもプロジェクト全体の姿が見えていなかったからです。 しかし現在プロジェクト開始から1年半が経過してようやく全貌が見えてきたので、すべてをお話ししようと思い

モバイル基盤グループのヴァンサン(@vincentisambart)です。 iOSの設定画面の右側は一定の幅を超えないように作られています。 iPadでは: 新iPad Pro 12.9"では: iPadでTwitterのタイムラインのセルの中身も一定の幅を超えません。 このように、自分のアプリで広い画面でもコンテンツが広がりすぎないようにするためにはどうすればよいのでしょうか。AutoLayoutでいくつかの制約を使ってできるのですが、もっと簡単な方法はないのでしょうか。 iOS 9以上では、端末の種類を気にせず、複雑なAutoLayout制約を使わず、殆どのビューですぐ使える仕組みがあります。Appleのドキュメントで「readable content」や「readable width」と呼ばれているものです。以下日本語で「読みやすい幅」と呼ぶことにします。 注意点：下記の説明はAut

新規サービス開発部の出口 (@dex1t) です。普段はデザインからアプリ開発まで、新規サービス立ち上げに必要なことを浅く広くやっています。 さて、R&Dインターンや技術インターンに続きまして、9月10日~14日にかけてデザイナーとサービス開発エンジニア向けのプロダクトインターンシップを開催しました。私は本インターンの全体設計と講師を担当しました。この記事ではその内容を簡単にご紹介します。 このインターンはざっくりいうと、デザイナー・エンジニアでペアを組み、ゼロから"使える"サービスを作るという内容です。なかなかハードですね 😉 今年は「一人暮らししている人の料理が楽しみになるサービス」というテーマで、5日間のサービス開発を実践していただきました！ Day 1-2. 基礎編 ✍🏻 1日目から2日目午前は、「サービス開発を実践するための道具を提供する」という建て付けで、講義やミニワークを

ユーザーエンゲージメント部の諸橋 id:moro です。 わたしはずっと、ユーザー登録やログイン周りという、サービス的には基盤的なところ、技術スタック的にはアプリケーション寄りのところに取り組んできました。関連する話を何度かこの開発者ブログにも書いています。 ユーザー基盤を作り直しながらRailsでのサービス層に向き合う 巨大なWEBアプリケーションに巨大な変更を取り入れるためにやったこと この記事で触れている「電話番号による登録」について、チームメンバーが別の側面を紹介してくれています。 今日はそのあたりの開発を通じて考えた、Railsアプリケーションでのフォームオブジェクトやサービス層といったものが何であるか、という問いに対する、現在の自分のスタンスを紹介します。 サービス層、サービスオブジェクト、フォームオブジェクト もともと Railsは Web 画面から DB 構造までをあえて密

こんにちは、投稿開発部の @morishin127 です。React Native 新アプリシリーズ連載2日目ということで、この記事では React Native アプリの開発基盤の構築について書こうと思います。「クックパッド MYキッチン」というアプリは React Native 製で、iOS/Android 両プラットフォームでリリースされています。元々は一人の手で JavaScript (ES2017+) によって書かれていたアプリケーションでしたが、リリースまでの間に開発メンバーも増え、TypeScript の導入や CI の整備、また高速な検証のためにログ収集の仕組み作りや CodePush の導入などを行いました。それぞれ具体的にどのようなことをしたかを説明します。 セットアップスクリプト npm-scripts を用いて npm run ios:setup / npm run

技術部でフルタイム Ruby コミッタをしている笹田です。最近ひさびさに Ruby のライブラリに pull request をしました（show valid break point lines #393）。 12/25 のクリスマスに、Ruby 2.5 が無事にリリースされました（Ruby 2.5.0 リリース）。関係各位の努力に感謝します。いろいろなバグ修正、いろいろな新機能、いろいろな性能改善があります（詳細は、上記リリースノート、もしくは Ruby のソースコードにある NEWS ファイルをご参照ください）ので、試して頂けると良いと思います。そういえば、私がクックパッドに入社して初めての Ruby リリースでした。 前回の techlife ブログ（ Ruby の NODE を GC から卒業させた ）で遠藤さんが クックパッドからの主な貢献としては、「trace 命令の削除による

こんにちは、投稿開発部の森川 (@morishin127) です。クックパッド、お料理アルバム、みんなのお弁当の iOS アプリの開発等に携わっています。 クックパッドでの開発は GitHub Enterprise 上で行われており、書いたコードをプロダクトに取り込む前には基本的に第三者のコードレビューが必須です。コードレビューはプロダクトの品質向上に貢献していますが、往々にして結構な時間と労力がかかるものです。Pull-Request を出してレビューをしてもらい指摘の修正を繰り返していると、場合によってはマージに数日〜1週間ほどかかってしまうこともあります。自分の開発速度を速めるため、また周りのエンジニアの開発速度を下げないためにレビューしやすい Pull-Request を出すことは重要です。この記事ではレビューしやすい Pull-Request のために心がけていることを紹介したい

こんにちは。技術部 開発基盤グループの大石です。 本日は開発基盤グループが社内の各サービスに提供している共通基盤サービスの1つである共通決済基盤を例にサービス間の整合性を維持するための取り組みを紹介したいと思います。(共通決済基盤については以前紹介した クックパッドの課金を支える技術 を参照ください) 決済における整合性を考える サービス間連携は決済に限らず発生するものですが、共通決済基盤の場合、組織外にあるサービスと通信する必要があり、コントロールができない外的要因に影響を受けやすい点と、決済という確実性が求められる処理を含んでいるということの間で整合性について考える必要があります。 まずは、共通決済基盤上で行われるサービス間通信の種類とそれぞれで通信を行っている際にエラーが起きた場合にどのようにハンドリングすれば整合性を維持できるかを考えてみます。 サービス間通信の種類と流れ 共通決済

こんにちは。技術部 開発基盤グループの諸橋です。 クックパッドでは昨今の多くのWeb企業と同じように、GitHub EnterpriseのPull Requestを使ったコードレビューを広範に実施しています。わたしたちのコードレビューでは、ソースコードの字面にとどまらず、サービスの機能として魅力的かどうかや、保守性を含めた設計が適切かといった議論に発展することも良くあります。 きょうはそんななかで話題に上がった「現在時刻」の扱いかたに関する設計の話を書きます。 背景 サービスを開発・運営している我々には、時間帯によって出し分けたり、特定の期間のみに表示したいコンテンツがたくさんあります。 そのたびにデプロイし直すというのはつらいので(特に24:00に出なくなるコンテンツなど)なんとかしたくなりますが、一方で時限式のコンテンツはその時になるまでちゃんと動いているか確証が取れないので怖いです。

こんにちは。会員事業部の丸山です。 エンジニアが開発を開始する時にはタスクの見積もりとスケジュールを作成行って、実装を進めていくと思います。 しかし1ヶ月を超えるような規模の開発をする場合、なかなか予定通りの期日に終わらなかったりすると思います。 そして大抵の場合、増える方向になりますよね。 今回はそういうことにならないために、私が気をつけていること・実践していることをいくつか紹介したいと思います。 見積もりとは まずは「見積もり」とは何なのかを正しく理解したいと思います。 一般的には「見積もり」＝「全タスクとその工数を洗い出す」というものだと思います。 しかしここで以下のことに気をつける必要があります。 見積もりとスケジュールとコミットメントは違う 見積もりとはあるタスクがどれだけの工数(規模)なのかを算出することです。 対して、スケジュールとはあるタスクがどれだけの工期(期間)なのかを

こんにちは。技術部の吉川です。 最近ではMicroservicesという言葉もかなり浸透し、そのテクニックも体系化されつつあります。 一方でMicroservicesについての話は概論や抽象的な話が多く、具体像が見えないという方もいらっしゃるのではないでしょうか。 当ブログでは1年半ほど前にMicroservicesへのとりくみについてご紹介しました。 当時社内ライブラリだったGarageはその後オープンソースとして公開され、また社内のシステムも当時と比べ飛躍的な進化を遂げています。 そういったクックパッドにおける最近のMicroservices事例を先日Microservices Casual Talksで紹介しました。 Microservicesの抽象的な話は一切割愛し、具体的な事例に終始した内容となっています。 Microservicesの基本となる考え方はわかったものの、実践方法で