レシピサービスのフロントエンドを Next.js と GraphQL のシステムに置き換えている話 - クックパッド開発者ブログ
技術部の外村（@hokaccha）です。今回はクックパッドのウェブサイトのフロントエンドを Next.js などを使って作り直している話を書きます。 この記事で紹介する新システムは、スマートフォン向けのレシピページで確認することができます。もし興味があるかたはレシピページをスマートフォンのユーザーエージェントで開いて DevTools などで確認してみてください。 Next.js と GraphQL で動いているのがわかると思います。 ご存じの方も多いかもしれませんが、クックパッドのウェブサイトはモノリシックな Rails で作られていて、10年以上 Rails で開発を続けてきました。10 年以上同じシステムで開発を重ねれば当然レガシーな部分が大量に生まれてきますが、特にフロントエンドはその影響が顕著でした。 どこから使われているかわからない CSS が大量にある、JS のコードは昔なが
モダンBFFを活用した既存APIサーバーの再構築 - クックパッド開発者ブログ
技術部の青木峰郎です。 去年までは主にデータ分析システムの構築を担当していましたが、 最近はなぜかレシピサービスのサービス開発をやっています。 今日は、そのサービス開発をする過程で導入したBFF（Backends for Frontends）であるOrchaについて、 導入の動機と実装の詳細をお話しします。 Orcha導入にいたる経緯 まずはOrcha導入までの経緯、動機からお話ししましょう。 最初のきっかけは、わたしが去年から参加しているブックマークのようなサービスの開発プロジェクトでした。 このプロジェクトの実装のために新しいmicroserviceを追加することになったのですが、 そのときにいくつかの要望（制約）がありました。 1つめは、撤退するとなったときに、すぐに、きれいに撤退できること。 2つめが、スマホアプリからのAPI呼び出し回数はできるだけ増やしたくない、という要望です。
クックパッドアプリはみんなが寝ている間にサブミットされる - クックパッド開発者ブログ
こんにちは、技術部モバイル基盤グループの茂呂(@slightair)です。 先日のiOSDCは大盛況でしたね。とても楽しく、実りあるカンファレンスでした。この記事で僕は ididblog! ということにしようと思っています 😋 クックパッドからは @giginet と僕の二人が登壇しました。発表を聞きに来ていただいた方はありがとうございました。 @giginet の 詳解Fastfile という発表中でさらっと話された、”毎週自動的にリリースされる”という言葉が気になった方はいるのではないでしょうか。実はこのリリースフローについての話もプロポーザルに出していたのです(もっともっと細かくリリースをしてユーザーに最速で価値を届けるためのリリースフロー)。 この記事ではこのリリースフローについての話をしたいと思います。 クックパッドアプリの開発体制 クックパッドアプリの開発体制は人数の変動はあ
Chaos Engineering やっていく宣言 - クックパッド開発者ブログ
技術部のヨシオリです。 Netflix が Chaos Engineering の論文を公開して 2 年ほど経ちました。 クックパッドは最近、 Chaos Engineering を導入する事を決めました。 この記事ではその背景を紹介したいと思います。 そもそも Chaos Engineering とは Netflix では Failure Injection Testing として、営業時間中に意図的に障害を起す事をやっていました。Chaos Monkey というインスタンスとサービスを落すものから Chaos Gorilla、Kong という availability zone や region 単位で障害を発生させるものなどです。 その経験から Chaos Engineering というものが提唱されました。 Principles of Chaos Engineeringによれば C
React Nativeで作った新アプリについて(5日間連載) - クックパッド開発者ブログ
こんにちは投稿開発部の丸山@h13i32maruです。 今日から5日間、本ブログに投稿開発部メンバーで連載記事を書かせていただきます！ いきなり「投稿開発部で連載記事」と言われても何のことかわからないと思うので、まず投稿開発部について簡単に紹介させてもらいます。 投稿開発部は「クックパッドに投稿されるコンテンツ全般」について責任をもっている部署なのですが、中でもレシピ事業の根幹であるレシピ投稿者向けのサービス改善に力を入れています。レシピ投稿者向けのサービス改善は「どうすれば継続的に投稿したくなるのか？」「どうすれば投稿をはじめてみたくなるのか？」の2点に答えを出すことを目標に日々サービス開発に励んでいます。 そこで、本連載では投稿開発部が今年メインで取り組んでいる「クックパッド MYキッチン」という新しいアプリについて5人のメンバーで紹介させていただきます。 1日目(vol1)では「クッ
Web アプリケーションを把握するためのコンソール - クックパッド開発者ブログ
技術部開発基盤グループの鈴木 (id:eagletmt) です。 クックパッドではほとんどの Web アプリケーションが Amazon ECS 上で動く状態となり、またマイクロサービス化や新規サービスのリリースにより Web アプリケーションの数も増えていきました。 個々のアプリケーションでは Docker イメージを Jenkins でビルドして Amazon ECR にプッシュし、Rundeck から hako を用いて ECS にデプロイし、またその Web アプリケーションからは Amazon RDS、Amazon ElastiCache 等のマネージドサービスを活用しています。 このように多くの Web アプリケーションが存在し、また各アプリが別のアプリや AWS の様々なマネージドサービスを利用している状況では、どのアプリが何を使っているのかを把握することが困難になっていきます
Safariで入力したアカウント情報をiOSアプリで使う - クックパッド開発者ブログ
こんにちは。ユーザーファースト室の中村(@_nkmrh)です。 先日リリースしたクックパッドアプリ v7.6.0 には iCloud の Keychain に保存されているクックパッドアカウントを、アプリから利用する機能を追加しています。具体的には次のような機能です。 1. Mac の Safari から cookpad にログインします 2. アカウント情報を iCloud Keychain に保存します 3. iPhoneのcookpadアプリを立ち上げ、ログインボタンをタップすると、Safari でログインしたアカウントが選択できるようになっています このように、Mac 又は iPhone の Safari からクックパッドを利用していた人が、アプリにログインする際、面倒な入力をせずにログイン出来るようになりました。ぜひ試してみて下さい。 ※この機能を使用するには、事前に下記の設定が
ハッシュ値の使い方について - クックパッド開発者ブログ
モバイル基盤グループのヴァンサン(@vincentisambart)です。 先日以下のツイートを拝見しました。 Swift's stdlib moves to randomly seeded hashing: https://t.co/2T5oRYtD8B— ericasadun (@ericasadun) 2018年3月10日 この変更はSwift 4.1にはまだ入りませんが、4.2か5.0に入るはずです。コードレビューでこの変更が問題を起こそうなコードを指摘したことあるので、ハッシュ値のおさらいをする良いタイミングではないでしょうか。 Swiftのことを考えて書いていますが、多くのプログラミング言語にも当てはまります。ハッシュ値はSwiftではhashValueというプロパティが返しますが、多くの言語では単にhashというメソッド・関数が返します。 ハッシュマップ ハッシュ値はハッシュ
Google Play アプリ内定期購入を実装する - クックパッド開発者ブログ
技術部モバイル基盤グループの宇津(@uzzu)です。 今年3月、クックパッドのAndroidアプリはこれまでサポートしていたクレジットカード、キャリア決済に加えて、Google Playアプリ内定期購入によるプレミアムサービス登録機能を追加しました。 Google Playのアプリ内定期購入機能は個人的に気に入っているので早速乗り換えました。 良い機会なので、この記事ではIn-app Billing version 3(以下IABv3)以降のアプリ内課金の実装を振り返りつつ、Google Play Billing Libraryの紹介も交えながら開発TIPSを紹介します。 TIPS1. Google Play Billing Libraryの採用 IABv3以降のアプリ内課金を実施するためには(ざっくりですが)以下のフローを実装する必要がありました。 ServiceConnection を
たのしくなるコードレビュー - クックパッド開発者ブログ
こんにちは！サービス開発部でAndroidアプリの開発をしているこまたつ（@k0matatsu）です。 みなさんコードレビューしていますか？ 最近ではとりいれているチームも多いと思いますが、良い効果をもたらしてくれる一方で、負荷の高い作業でもあります。 また、コードレビュー自体に馴染みの薄かった人はなにをどうしたらいいのか難しいですよね。 同僚から得たアドバイスと自分なりのノウハウをあわせて、コードレビューの指針を考えていたので公開してみようと思います。 前提として、クックパッドではGitHub Enterpriseとプルリクエストを使った開発プロセスを採用しています。 また、コードレビューの前には自動テストと静的解析ツールによる単純なフォーマット、コードスタイル、頻出バグのチェックは行われているものとします。 静的解析による機械的なチェックはコードレビューよりも低コストで有効な方法ですの
Webpackerを使ったRailsでのJavaScript開発 - クックパッド開発者ブログ
こんにちは。マーケティングプロダクト開発部の長田です。 この記事では、私が現在進めているプロジェクトで、Webpackerを使ったJavaScriptのモジュール管理を導入したので、それについて紹介したいと思います。 Webpackerとは Webpackerとは、Webpackを用いてRails上でJavaScript開発をするために必要な一連の流れを提供してくれる、Rails organizationで開発されているgemです。 これまで、Rails上でJavaScriptのパッケージをどのように管理するか、また、モジュール依存をどのように解決するかについて、多くの選択肢があり、それらをどう組み合わせて使うのかについて悩まされてきました。 このブログでも過去に何度か記事が投稿されており、その中でも複数の選択肢が上げられています。 webpackを使った Rails上でのReact開発
分析SQLのコーディングスタイル - クックパッド開発者ブログ
SQL、書いてますか？ こと大規模データ処理の分野においてはSQLはもはや標準インターフェイスであり、 分析やらバッチやらに関わっている皆様は日々大量のSQLクエリーを生産していることと思います。 そこでちょっと気になるのが、 SQLのコーディングスタイルってどうするのが一般的なんだっけ……？ という点です。 イマドキはSQLなんてO/R mapperに吐かせることが多いからなのか、 それともコードを広い範囲で共有することがそもそもないからか、 SQLのコーディングスタイルについて見聞きすることは他のプログラミング言語に比べるとだいぶ少なく、 いまいち決定版と言えるスタイルがないなと感じています。 そんなわけで本日は、SQLのコーディングスタイルについての意識を活発化させるべく、 クックパッドでわたし（青木）が使っているコーディングスタイルから特徴的な点を紹介したいと思います。 特に、分析
クックパッドのジョブ管理システム kuroko2 の紹介 - クックパッド開発者ブログ
こんにちは。技術部 開発基盤グループの大石です。 今回はクックパッドで利用されているRuby製のジョブ管理ツールkuroko2について紹介したいと思います。 kuroko2 とは クックパッドでは2011年頃より、kurokoというジョブ管理ツールがありました。 そして現在、kurokoの後継のジョブ管理ツールとしてkuroko2が2014年にkurokoの開発者でもある当時の技術部長 takai によって開発され現在に至っています。 商用のジョブ管理ツールは昔からありますし、ここ最近はAirflowやAzkabanなどのOSSのツールが存在しており、わざわざ自社でジョブ管理ツールを作る必要は無いのかもしれません。 しかし、kurokoが開発された当時はそこまでの完成度のOSSのジョブ管理ツールは存在していなかったということと、過去のバッチ資産も問題なく動作させることでき、機能追加など自分
非SPAなサービスにReactを導入する - クックパッド開発者ブログ
投稿開発部の外村（@hokaccha）です。今回はReactについてのお話です。 ReactとSPA 最近JavaScriptやそれを取り巻くフレームワークなどの話題では、サーバ側はAPIのみを提供し、View(HTML)は全てJavaScriptで描画するような、いわゆるシングルページアプリケーション（以下SPA）についてよく語られます。 一方で、SPAを構築するにはコストがかかることも事実で、特にフロントエンドエンジニアが多くない環境では、従来通りサーバーサイドでViewを書きつつ動的な部分だけJavaScriptで処理するというアーキテクチャのほうが現実的な場合も往々にしてあります。 今回はこのような、サーバー側でHTMLを生成し、一部の動的な部分だけをReactで書くためのTipsを紹介します。 なお、基本的にサーバーサイドはRails前提ですが、RailsにおけるReactの開発
デザイナー横断組織の変遷 - クックパッド開発者ブログ
こんにちは。デザイナーの池田（id:tikeda）です。6月末までユーザーファースト推進室というデザイナーを中心としたユーザー体験について横断的に責任をもっている室の室長を勤めていました。7月からこのユーザーファースト推進室をなくし役割を各部室に分散させる体制変更を行いました。 ユーザーファースト推進室については、過去のインタビューやブログのエントリーをご覧ください。 はじめに サービス開発では、デザイナー・エンジニアといった職種毎に部を構成し各プロジェクトに派遣するようなスタイル（A）、ディレクター・デザイナー・エンジニアといった役割の異なる職種で部を構成するスタイル（B）、またこの2つを組み合わせたハイブリットのような組織が存在しており、弊社だけでなく開発の現場ではよりよい開発が行われるよう試行錯誤が行われていると感じています。 クックパッドではここ数年、アプリケーションエンジニアは各
ECS を利用したオフラインジョブの実行環境 - クックパッド開発者ブログ
技術部の鈴木 (id:eagletmt) です。 クックパッドでは以前からアプリケーションの実行環境として Docker を利用していましたが、最近は徐々に Amazon EC2 Container Service (ECS) を利用し始めています。 去年の時点での Web アプリケーションのデプロイ手法 *1 や、最近 ECS を利用してどう Web アプリケーションをデプロイしているか *2 については紹介したことがあるので、今回は定期的なバッチ処理やジョブキューを介して非同期に実行されるようなオフラインの処理について、どのような環境を構築しているか紹介したいと思います。 Docker を使う前 Docker を利用し始めるより前から社内では kuroko2 *3 というジョブ管理システムが稼動しており、複数のアプリケーションから利用されていました。 kuroko2 は定期的にジョブを
Ruby on Rails アプリケーションにおけるモンキーパッチの当て方 - クックパッド開発者ブログ
技術部の牧本です。 今日はモンキーパッチの話をします。 モンキーパッチとは何か そもそもモンキーパッチ (monkey patch) とは何でしょうか? 端的に言えば、言語の組み込みクラスやライブラリ、その他外部ライブラリの挙動を、動的に拡張する仕組みをモンキーパッチと呼びます。 *1 例えば、Ruby のモンキーパッチのすごく単純な例として以下のようなものがあります。 module NilClassExtension def empty? true end end NilClass.prepend(NilClassExtension) インスタンスが空であるかどうかを判定するメソッドとしての #empty? は String や Array など様々なクラスに存在しますが、 nil を唯一のインスタンスとする NilClass には本来は存在しません。 このモンキーパッチを導入することで
OpenSTFでAndroidのCIを2倍早くする - クックパッド開発者ブログ
はじめまして！技術部モバイル基盤グループの加藤(@k0matatsu)です。 業務の一部でCIお兄さんとしてJenkins氏のメンテナンスなどを行っています。 今日はをにする話をしたいと思います。 CI待ち時間1/2で PR/レビューのサイクルの速さ2倍(当社比)です。 ※ ビルド所要時間のボトルネックは環境やジョブ内容によって異なるため効果には個人差があります。 当社のAndroid CI環境 さて、開発効率を2倍にする前に、まずは当社のCI環境がどうなっているか説明が必要ですね。 当社のAndroid向けCI環境は幾つかの試行錯誤を経て、現在はAmazon Web Service（AWS）を使って構成されています。 下図のように、Amazon EC2(EC2)インスタンス上に構成管理ツール:itamaeを使って作成されたJenkinsのmaster/slave構成を擁し、その中でAnd
ディレクターがSQLを使えてよかった話 - クックパッド開発者ブログ
こんにちは。ディレクターの川原田です。 クックパッドでお気に入りレシピを保存する「MYフォルダ」のサービス開発や、保存・記録に関する新規サービスの検討・開発を担当しています。 ディレクターの仕事は様々ありますが、今回は私が身につけたことで仕事領域が広がった！と感じているSQLについてお話ししたいと思います。 いきなりですが、SQLが使えてよかった点をまとめると以下です。 よかったこと 数値抽出から分析まで自己完結 エンジニアとのコミュニケーションがスムーズに 仕事が増えていそうで実は効率アップ 周囲の知的好奇心を刺激 それぞれ具体例を交えてお話します。 数値抽出から分析まで自己完結 事例１：ログ構造を理解でき後の仕事がスムーズに 昨年、アプリのサービス開発を担当した際、エンジニアの設定したログが、実際に送信されるかどうかを事前チェックをしました*1。 アプリのリリースはタイミングが決められ
システム障害で消耗してるあなたに：失敗から学ぶための取り組み「Failure teaches Success」 - クックパッド開発者ブログ
こんにちは！広告エンジニアのレオです。最近、システム障害を起こしていますか？クックパッドも例外ではないです。毎月、何かしらのシステムに何かしらの障害が起きてしまいます。その際、早く気づき、速やかに対応することによって被害を最小限に留めるように努めます。そして、システムやデータを正常な状態に復旧させます。 正常な状態に戻した段階では対応はまだ完了していません。問題の本当の原因は何なのか、またその再発をどうやって防止するかを考えて手を打つまでは、障害の対応が完了したといえません。予防しない限り、また同じ過ちを繰り返すことになってしまいます。 失敗は成功のもと 根本原因分析、そして再発防止は大事な作業ですが、とても難しい作業です。クックパッドでは、これらを少しでもやりやすくするために、ルールと仕組みをまとめています。この仕組みを「Failure teaches Success」（略してFtS）と
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
