はてなブックマーク

こんにちは、レシピ事業部プロダクト開発グループの渡邉（@taso0096）です。 クックパッドは最近、One Experienceというプロジェクトによって日本版とグローバル版のシステムが統合されました。 どちらのシステムもRailsで実装されているという点は同じですが、統合先となったグローバル版ではHotwireが使われていました*1。そのため、One Experience関連の開発ではHotwireが積極的に活用されています。本記事ではそんなHotwireの多くの機能が使われたデスクトップ版のサイドバーについてご紹介します。 デスクトップ版で表示されるサイドバー ちょっと複雑なサイドバー One Experienceに伴い、グローバル版にもともと存在したUIのまま移行するのではなく、いくつか画面構成の変更を入れる事になりました。特にデスクトップ版においては、自分のコンテンツにより素早く

こんにちは。レシピ事業部でAndroidアプリ開発をしているこやまカニ大好きです。 好きなイジンカードは行基と近松門左衛門、最近気になるカードは松尾芭蕉です。 このブログの日本とグローバルのクックパッドを統合しましたという記事で、日本とグローバルのクックパッドサービスの統合が行われたこと、プロジェクトの名称が One Experience であったことについて説明がありました。 もちろん One Experience プロジェクトについては Web だけでなくモバイルアプリについても行われており、現在日本向けにリリースされているクックパッドアプリは、クックパッドがサービスを展開しているすべての地域での表示に対応した One Experience版のアプリになっています。 この記事では、モバイルアプリの One Experience について、どのような作業が行われたのか大まかに概要を説明し

こんにちは。SRE の小川 (@coord_e) です。先日の投稿にあった通り、クックパッドはレシピサービスをグローバル版に統合しました。サービスの統合に伴って、開発や運用のインフラもグローバルチームで利用されているものを使うことになりました。 運用インフラの中でも特に大きな違いとして、日本とグローバル版ではコンテナオーケストレーションの仕組みが異なっています。日本では Amazon Elastic Container Service (ECS) を使ってコンテナを実行していますが、グローバル版では Amazon Elastic Kubernetes Service (EKS) の上でコンテナを実行しています。 また開発面ではデプロイフローに大きな違いがあります。日本では、アプリケーションの新しいリビジョンのデプロイは ChatOps によって行なっていました。main ブランチに PR

はじめに こんにちは。クックパッド SRE の @mozamimy です。先日この開発者ブログで One Experience プロジェクトについての紹介がありました。 このプロジェクトにおいて、わたしは日本版からグローバル版への移行の際の全般的なパフォーマンス周りについて取り組んでいました。 パフォーマンスと一言でいっても、その中にはネットワークやアプリケーションレイヤでのレイテンシ、MySQL などのミドルウェアでのレイテンシなど、様々な要因が関わってきます。それらの改善において、何よりも重要なのはまず観測することです。移行において取り組んだ様々な作業のうち、ここでは CloudWatch RUM や Calibre といったツールを用いた Web ブラウザからのアクセスのパフォーマンス観測に焦点を当てて紹介します。 プラットフォーム移行によるパフォーマンスの劣化をできる限り避けたい

SRE の鈴木 (id:eagletmt) です。先日、この開発者ブログで赤松から One Experience プロジェクトについての紹介がありました。 自分もこの One Experiene プロジェクトに携わっており、このプロジェクトが始まったちょうど1年くらい前にはイギリスにあるオフィスに行き、グローバル版のシステムを開発・運用しているメンバーと直接顔を合わせたりもしていました。自分は One Experience プロジェクトにおいて主にデータ移行について担当していました。データ移行に必要な作業はいくつかありますが、この記事ではその中から日本版のシステムのデータベースで発生したデータの変更をどのようにしてグローバル版のシステムのデータベースに継続的に反映したかの部分について紹介します。 One Experience でのデータ移行 赤松の記事にも書かれていたように、日本版とグロー

こんにちは、レシピ事業部プロダクト開発グループの赤松(@ukstudio)です。 昨年の10月頃からレシピ事業部ではひとつの大きなプロジェクトに取り組んでいました。このプロジェクトは社内ではOne experienceと呼ばれています。本記事ではこのOne experienceについてご紹介します。 One experienceとはなにか クックパッドではレシピサービスを日本を含めた71ヶ国、29言語で展開しています。これまでは日本のサービスと海外のサービスは独立した別のシステムで別のサービスとして展開してきました。日本のレシピサービスは日本の組織が、海外のレシピサービスはイギリスにオフィスを置く海外の組織によって開発・運営を行なっていました。 One experienceはこの独立した2つのサービスを1つに統合し、国内・国外関係なく、全ユーザーに同じ体験を提供することを目的としたプロジェ

こんにちは。レシピ事業部バックエンド基盤グループの石川です。 2014 年、このブログに『開発環境のデータをできるだけ本番に近づける』というタイトルの記事が投稿されました。 クックパッドでは、ユーザーさんが実際に体験している状況と近い状況を再現しながら開発することに価値があると考えています。技術的には、最初からレコードがたくさんあることによってパフォーマンス問題に気付きやすくなるなどの長所がありますし、サービス開発としても、実際のユーザーさんの体験を最速でなぞって素早くフィードバックループを回せるようになるという長所があります。 この慣習は 2014 年の記事から 10 年経った今でも続いています。一方でその実現手法については変化を続けてきました。現在のクックパッドでは状況に応じていくつかの手段を使い分けています。それらの手段については今まであまり公開されていなかったような気がするため、こ

こんにちは。機械学習グループの深澤(@fukkaa1225)です。 先日、Amazon Bedrock が一般利用できるよう(GA)になりました 。本記事ではこちらを用いて RAG(Retrieval-augmented generation) アプリケーションを作成してみた様子と、他 LLM モデルとの比較結果についてご紹介します。 Amazon Bedrock とは aws.amazon.com 公式サイトより文言を引用します。 Amazon Bedrock は、Amazon や主要な AI スタートアップ企業が提供する基盤モデル (FM) を API を通じて利用できるようにする完全マネージド型サービスです。そのため、さまざまな FM から選択して、ユースケースに最も適したモデルを見つけることができます。Amazon Bedrock のサーバーレスエクスペリエンスにより、すぐに FM

こんにちは！レシピ事業部の藤坂(@yujif_) です。 クックパッドiOSアプリの開発者用機能として「ログ確認ツール」を作ってみました。社内で1年以上運用して好評なので、その経緯や学びをまとめてみます。 iOSDC Japan 2022 では「モバイルアプリの行動ログの『仕込み』を快適にする」と題して関連した内容を発表しています。こちらの資料も合わせてご覧ください。 speakerdeck.com アプリ内ログ確認ツールとは 1. ログ履歴 ログの内容確認が楽になる 2. ログ定義辞書 知らないログの意味が分かる ログを業務に活かしやすくなる 3. ログ送信チェックリスト ログが送られていない！？ QA作業でログの実装漏れもわかる 実装担当者以外でも分担できる 実装方法 1. 送信済みログを読み出せるようにする os.Logger で書き込む OSLogStore で読み出す 2. ログ

こんにちは。レシピ事業部の新井（@SpicyCoffee）です。 クックパッドではこれまで、レシピを投稿してから検索結果に反映されるまで最長で 24 時間程度の時間がかかっていました。今回、この時間を 5 分程度、最長でも 10 分程度に短縮することに成功しました。本記事では、プロジェクトオーナーの立場で関わった私が代表してその開発について紹介します。 プロジェクトの目的と数値目標 本プロジェクトでは上記の「レシピを投稿してから検索結果に反映されるまでの時間短縮」が目的とされました。しかし、時間短縮といっても現状 24 時間であるものを "1 時間" にするのか、"1 分" にするのか、"1 秒" にするのかでは話が全然違います。この数値目標は設計を始めとした後の意思決定に大きく影響を与えるため、しっかりとした意図を持った状態で明確に定めておく必要がありました。 そこで、私とプロダクトオー

こんにちは。レシピ事業部のkaorun343です。我々のチームではレシピサービスのフロントエンドを Next.js と GraphQL のシステムに置き換えている話 - クックパッド開発者ブログにて紹介したとおり、レシピサービスを Next.js ベースの新システムへと移行しています。今回は、この新システムのCSS in JSをEmotionからゼロランタイムのvanilla-extractへ変更した話です。 vanilla-extract.style 背景 以前書いた レシピサービスのフロントエンドに CSS in JS を採用した話 - クックパッド開発者ブログでは、CSS in JSライブラリとして Emotion（@emotion/react）を採用した経緯と開発環境整備を紹介しました。採用理由としては以下の通りでした。 セレクタに一意なIDが割り振られるので、スタイルを適用した要

こんにちは、技術部の石川です。 ある日、社内の各種アプリケーションを眺めている中で、とあるクローズしたサービスの管理画面を担っていたウェブアプリが今も動いていると気付きました。簡単にヒアリングしたところ、サービス自体はクローズしたものの、保有していたデータが次のチャレンジに生かせるため管理画面だけ残しているとのことでした。 一方で、その管理画面へのアクセスはそう多くありませんでした。毎日ちょっとだけのリクエストを処理するためだけにデータベースとサーバーが動いており、少し無駄がある状態になっていました。 やや気になったので検討した結果、最終的にこの管理画面アプリを Next.js 製の静的なデータビューワーサイトとしてリニューアルし、社内向けの GitHub Pages として提供されている状態にできました。この記事ではその顛末をご紹介します。 技術選定 いくつか事前調査をした結果、今回の管

技術部の笹田です。今日で退職するので、バタバタと返却などの準備をしています。 本記事では、Rubyの並行並列処理の改善についての私の取り組みについて、おもに RubyKaigi 2022 と 2023 で発表した内容をもとにご紹介します。 並行と並列はよく似た言葉ですが、本記事では次のような意味で使います。 並行処理（concurrent processing）は、「複数の独立した実行単位が、待っていればいつか終わる（もしくは、処理が進む）」という論理的な概念で、古典的にはタイムシェアリングシステムなどが挙げられます。 並列処理（parallel processing）は、「複数の独立した実行単位のうちのいくつかが、あるタイミングで同時に動いている」という物理的な概念で、古典的には複数のCPU上で同時に実行させる、というものです。最近では、1つのCPU上で複数コアが同時に動いている、という

こんにちは、モバイル基盤のヴァンサン(@vincentisambart)です。 半年くらい前に、iOSクックパッドアプリで画像非同期取得を自作することになりました。導入してから何ヶ月も問題なく動いているので、どう動いているのか紹介しようと思います。でもその前に自作することになった経緯を説明しましょう。 自作経緯 長年画像非同期取得に既存のライブラリを使っていましたが、昨年ライブラリの不具合で画像の取得が稀に失敗していたバグがいくつかありました。バグが修正されて、その数ヶ月後にまた似た問題。 この状態が好ましくなかったので、以下の選択肢のどれかにしようと議論しました。 使っているライブラリのメンテナンスにもっと直接参加する コードが古くメンテナンスしやすくなさそうでした。 使っているライブラリのバージョンを固定する 自動的に更新をやめても、バグ修正や最新のOSの対応のために定期的に更新した方

コーポレートエンジニアリング部の id:sora_h です *1。今回は 3 ヵ月ほど前に実施した、Google Workspace テナントのプライマリドメイン変更について、記録を兼ねて説明します。 クックパッドは 2009 年頃 *2 より Google Workspace *3 を利用しています。当社の対外的なメールアドレスは cookpad.com ですが、Google ではプライマリドメインとして cookpad.jp が設定されています。各ユーザーには cookpad.com のアドレスを別名 (エイリアス) として登録されていて、メールアドレスとしては cookpad.com を利用、ただ Google へログインする時だけ cookpad.jp を利用する運用になっていました。想像が出来ると思いますが、これが様々な面で不便・混乱を発生させていました。どうしてこうなった… *

Hi, this is Chris Trott (@twocentstudios) from Cookpad Mart's iOS team. In this post I want to share a few tips for how to draw shapes using paths in SwiftUI, starting from the basics. The code in this post targets iOS 16 and Xcode 14, but is low-level enough that it should be relatively forward and backward compatible. Drawing paths manually is not a common task in day-to-day app work. It can be

id:sora_h です。最近は RubyKaigi の Organizer や Wi-Fi NOC をやっていましたが… 何屋なんだろう? 一応 Software Engineer (Site Reliability, Corporate Engineering) を名乗っていますが…。あっ RubyKaigi から戻ってからは学者をやってますね。落ち着いたら本業を思い出していこうと思います。 さて、Cookpad は 2010 年より RubyKaigi に協賛していますが、近年は Wi-Fi Sponsor など*1として携わっています。実体的には、 id:sora_h (筆者) が RubyKaigi 前にほぼフルタイムで Wi-Fi の準備に提供されたり、細々とした機材、一部の回線・ラックスペースの提供を行っています *2。 本稿では RubyKaigi 2023 Wi-Fi ネ

エンジニアの成田（@mirakui）です。最近はクックパッドマートの流通基盤エンジニアとして、商品の流通に関わるソフトウェアやハードウェアに携わっています。 さて、クックパッドは先日長野県の松本で開催された RubyKaigi 2023 にスポンサーとして参加しました。そのスポンサーシップの一環として、参加者に配られるドリンクを冷やすための冷蔵庫を提供しました。 会場に設置した6台の冷蔵庫は、私たちが「マートステーション」と呼ぶ、クックパッドマートにおいてユーザーが購入した商品を受け取るための冷蔵庫です。現在は都内を中心に、駅やコンビニエンスストア、マンションの共用部といった生活動線に設置しています。マートステーションの技術的な詳細は下記の記事をご覧下さい。 techlife.cookpad.com 今回設置したのは、上記の記事中で "JCM-Mk4" と呼んでいる、現行型である第4世代の

こんにちは。技術部機械学習グループの深澤(@fukkaa1225)です。 3月に沖縄で行われた言語処理学会2023に参加してきました。本連載の1つ目ではクックパッドとして「レシピに含まれる不使用な材料等に関する記述の抽出」という発表を山口(@altescy)がしてくれた様子をお伝えしました。自分は共著者兼聴講参加です。 本連載の2つ目となるこの記事では気になったり面白いと感じた論文やセッションを紹介していきます。 印象に残ったセッション1: 形態素・構文解析 形態素解析といえば MeCab ですが、一強というわけではもちろんなく、様々なアプローチが提案されています。今回のセッションでは KWJA・vibrato、そして新たに提案された Jagger という多様な発表を一度に聞くことができたのは非常に貴重な経験でした。 テキスト生成モデルによる日本語形態素解析 https://www.anl

こんにちは、メディアプロダクト開発部のマーケティングサービス開発グループ(通称msdev)の id:asonas です。msdevウィーク最後の記事です。チームメンバーの記事も是非読んでみてください。 クックパッドの toB 向け事業における ChatGPT API の活用事例紹介 - クックパッド開発者ブログ ポリモーフィック関連を活用し、森羅万象の「いいね」を実現する手法 - クックパッド開発者ブログ マーケティングサービス開発グループでは毎週月曜日13時から17時の決まった時間にモブプログラミングを実践しています。 このモブプログラミングの枠は1年以上継続していて、毎週様々な課題の解決や機能の開発をしています。この記事ではモブプログラミングを長く継続するためのコツをお伝えします。 モブプログラミングとは まず、モブプログラミングとは、チームメンバーが同時にコーディングを行う手法です。

こんにちは、CTO室の緑川です。早いもので来月にはRubyKaigi 2023が開催されます。今年のRubyKaigiは長野県松本市で開催されるので、松本市で楽しめるグルメ記事を用意しました。今回は毛色を変えて、松本市で宿とサウナとジェラートのタビシロを営む小澤様にインタビューをし、オススメして頂いたお店を紹介しています。どのお店も人気店なので確実に訪れたい方は予約必須です。是非RubyKaigi中のお食事のご参考にしてください。 目次 目次 宿とサウナとジェラート tabi-shiro（タビシロ） 信州そば 三城 （さんじろ） 焼肉 味楽苑 （みらくえん） 伊勢町店 谷椿（たにつばき） 焼き鳥 山女や （やまめや） 鳥しん うなぎ 山勢 （やませい） 海鮮 三重鮨（みえずし） 居酒屋まるか 団体OKのお店 みつぶ 野菜巻き串 やきそば たけしや カレー 松本メーヤウ 桐店 深夜 香根 （

こんにちはCTO室の緑川です。 RubyKaigi 2023がいよいよ5月11〜13日に松本市で開催されますね。今年もクックパッドから多くのエンジニアが参加する予定ですので、会場でお話しできる機会がありましたら、どうぞよろしくお願いいたします。 さて、クックパッドはRubyKaigi 2023にWi-Fi & Rubyists on Rails Sponsorとして協賛します。聞きなれないスポンサー名だと思いますので、登壇者情報と合わせてこちらのエントリーでお知らせします。 スポンサーする背景 クックパッドはレシピサービスcookpadや、生鮮食品ECプラットフォームのクックパッドマートの開発にRubyを使用しています。また、Webサービスだけでなく、クックパッドマートで使用しているステーション（冷蔵庫）で稼働するソフトウェアやハードウェア開発にもRubyを使用しており、Rubyはクックパ

こんにちは。クックパッド事業部でiOSアプリの開発をしている新堀(@tk108gabalian)です。 iOS版のクックパッドアプリではスクロール時にコンポーネントが上部に固着する画面があります。 所謂StickyHeaderというやつです。 今回はそのStickyHeaderをSwiftUIで、かつTabViewを使用つつ実現する方法について紹介します。 導入の背景 2022年7月にリリースした「のせる」画面には以下の要件がありました。 画面上部にユーザー情報を表示する。 ユーザー情報の下にタブを表示する。 タブをタップするか、タブより下を横にスワイプすることでタブの切り替えが可能。 画面全体をスクロールできるが、ユーザー情報が隠れるまでスクロールしたら画面上部にタブが固着し、以降はタブより下の部分のみスクロールする。（逆方向にスクロールする場合は再度ユーザー情報が表出する。） また、事

こんにちは、クックパッドの齋藤です。 私はハードウェアPdMとして、生鮮食品のECプラットフォーム、クックパッドマートで事業に関わるハードウェア（マートステーション、プリンタ、温度監視システム等）の企画開発・開発ディレクション・調達・保守等を担当しています。 cookpad-mart.com クックパッドマートはiOSおよびAndroidの専用アプリで利用可能なサービスです。このアプリで商品を購入して、街中のスマート冷蔵庫「マートステーション」で受け取れます。 マートステーションは駅やコンビニエンスストア、マンションの共用部といった人々の生活動線に設置し、共同納品を行っています。そのため自宅に個別配送をする他の生鮮食品ECに比べ、より物流コストを抑えた配送を実現しています *1 。 クックパッドマートは食材の輸配送や保管をはじめとした現実世界を相手に展開しているビジネスです。 そのためマー

こんにちは、クックパッドの齋藤です。 私はハードウェアPdMとして、クックパッドマートで事業に関わるハードウェア（マートステーション、プリンタ、温度監視システム等）の企画開発・開発ディレクション・調達・保守等をやっています。 クックパッドマートとハードウェア クックパッドマートは2018年9月20日にリリースされた生鮮食品のECプラットフォームです。リリースから4年以上経ち、新規事業ならではのスピードを維持しつつサービス拡大のため試行錯誤を日々続けています。 cookpad-mart.com クックパッドマートはiOSとAndroidの専用アプリで利用可能です。このアプリで商品を購入して、近所の受け取り場所（マートステーションと呼んでいます）で受け取れます。有料で自宅配送するオプションもあります。 クックパッドマートでは、食材の輸配送や保管といった現実世界を相手にビジネスを展開しているため