技術部の青木峰郎です。 去年までは主にデータ分析システムの構築を担当していましたが、 最近はなぜかレシピサービスのサービス開発をやっています。 今日は、そのサービス開発をする過程で導入したBFF（Backends for Frontends）であるOrchaについて、 導入の動機と実装の詳細をお話しします。 Orcha導入にいたる経緯 まずはOrcha導入までの経緯、動機からお話ししましょう。 最初のきっかけは、わたしが去年から参加しているブックマークのようなサービスの開発プロジェクトでした。 このプロジェクトの実装のために新しいmicroserviceを追加することになったのですが、 そのときにいくつかの要望（制約）がありました。 1つめは、撤退するとなったときに、すぐに、きれいに撤退できること。 2つめが、スマホアプリからのAPI呼び出し回数はできるだけ増やしたくない、という要望です。

こんにちは。Komercoの高橋です。 Komercoがリリースされてからもうすぐ3年が経とうとしています。 クックパッドの新規事業「Komerco」ではバックエンドのほぼ全てをFirebaseで運用してします。 新規事業のためエンジニアの数はまだ少ないものの、Firebaseのおかげでエンジニアはサービス開発に専念できている状況で、昨年はWeb版のリリースや送料無料イベントもあり、ユーザ数がさらに増加してきています。 これまで多くの機能を開発してきましたが、その中でFirebaseをより有効に使えるよう試行錯誤してきました。 これからFirebaseを使おうか考えている人にも、今現在Firebaseを使っている人にも参考になるよう、Komercoで得た知見を書いていこうと思います。 前後編となっており、前半はFirestoreの設計についてお話しようと思います。 当たり前の機能だけどFi

概要プレスルーム著作権お問い合わせクリエイター向け広告掲載開発者向け利用規約プライバシーポリシーとセキュリティYouTube の仕組み新機能を試してみる© 2024 Google LLC

技術部の外村（@hokaccha）です。 レシピサービスのフロントエンドを Next.js と GraphQL のシステムに置き換えている話 - クックパッド開発者ブログ という記事を書きましたが、この中で詳しく説明しなかった GraphQL のスキーマやクエリから TypeScript の型定義を自動生成する仕組みについて紹介します。 なお、今回紹介したコードは以下で試せます。 https://github.com/hokaccha/graphql-codegen-example-for-techlife GraphQL Code Generator を使った型生成 GraphQL のスキーマから TypeScript の型を生成するためのライブラリはいくつかあります。 Apollo GraphQL Code Generator などが有名どころです。今回はシンプルさや拡張性を考えて G

こんにちは。クックパッド事業本部 買物サービス開発部の藤坂（@yujif_）です。 2020年10月にクックパッド iOS アプリで「買い物機能」をリリースしました。今回はこの新機能の開発にあたって考えたことや取り組みについてご紹介します。 買い物機能とは レシピから買い物へ 買い物からレシピへ 実は SwiftUI で作られている 技術選定の背景 1. 本番で早く検証し、サービス開発の効率を上げたい 実生活の中で使って発見を増やす UI の「作って壊し」をやりやすく 2. SwiftUI のリスクを抑えつつ導入できる見込みがあった クックパッド iOS アプリでは 2メジャーバージョンをサポート 機能・画面単位で切り分けやすいアーキテクチャ 【方針】View 層のみで SwiftUI を部分的に導入する 実装 既存のVIPER アーキテクチャへの SwiftUI の組み込み UIView

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

お菓子作りの味方「ホットケーキミックス」 お菓子作りをするときの強い味方「ホットケーキミックス」。ホットケーキだけではなく、クッキーやパウンドケーキなど様々なお菓子を作り出せることはもうご存知のことと思います。計量が不要で、粉を振るう必要がないのが嬉しいですよね。今回は可愛らしいスイーツを作ってみましょう。 四角形なのがとってもキュート 今回紹介するのは、ホットケーキミックスを使った「スクエア型スイーツ」。コロンと可愛らしく、ひとくちサイズで食べやすいところが魅力です。四角形に切り分けることを想定しながら、どんなトッピングにするのか考えるのもとっても楽しそう。それではさっそくレシピをチェック♪ バナナケーキ

こんにちは、モバイル基盤部の加藤です。普段はモバイルアプリの基盤技術の整備や品質管理の業務に携わっています。 今回はクックパッドAndroidアプリ(以後クックパッドアプリ)の2020年時点でのアーキテクチャの紹介をしたいと思います。 アーキテクチャ導入以前のクックパッドアプリ 2017年以前クックパッドアプリにはアーキテクチャと呼べるようなものが存在していませんでした。大まかに API 通信や DB 操作等のデータ取得箇所を分離し、複雑なロジックを持つ場合は Manager, Util 等の強いオブジェクトが生成されていましたが、それ以外は Activity / Fragment に処理を直接記述することがほとんどでした。 そういった状況の中で今後もアプリを継続的に開発可能にすることを目的にアーキテクチャの導入が始まりました。クックパッドアプリでは iOS/Android 両プラットフォ

こんにちは、 CTO 室の山田です。 私は新卒入社から現在までずっと Amazon Alexa や LINE Clova などのいわゆるスマートスピーカーやスマートディスプレイ向けのアプリケーション開発に携わっています。 特に Amazon Alexa に関しては、日本だけでなく、スペイン、メキシコ、アメリカ、ブラジルの計 5 カ国にてサービスを展開しています。 現在は上記のプラットフォームへアプリケーションを公開する形でサービスを提供していますが、私たちが掲げている目標は「Voice User Interface の特性を活かし毎日の料理をもっと楽しみにする」ことであり、必ずしも特定のデバイスやプラットフォームに特化をして開発をするわけではありません。 例えば iOS/Android などのモバイルデバイス上での方が今より良いサービスを提供できるかもしれませんし、私たちでハードウェアを開

Komerco事業部エンジニアの岸本(@_sgr_ksmt)です。 昨年Cloud Firestoreのrulesのテストを全てローカルエミュレータを使うように書き換えた話を書いてからだいぶ間が空いてしまいましたが投稿します。 今回はFirebase In-App Messagingを利用する際にカスタムUIを適応して運用している話をしたいと思います。 In-App Messaging Firebase In-App Messaging(以下FIAMと呼びます)は、指定した条件で絞り込んだアクティブユーザーに対して、 メッセージやボタンのアクションを設定し、アプリ内で表示するためのFirebaseの一つの機能です。 表示形式としてはいわゆる「ポップアップ」「画面上部のバナー」といった形式で表示することが可能です。 ユーザーに出すための条件にアプリのターゲット、バージョン、オーディエンス、ユ

モバイル基盤部のこやまカニ大好き(id:nein37)です。 モバイル基盤部では、CI環境の改善やアプリのリリースサイクル自動化といった開発・リリースフローの効率化に加え、アプリのビルド速度改善や開発のしやすさを改善する様々な取り組みを行っています。 今回はその中から、クックパッドアプリ(Android)に対して行った開発効率化の取り組みの一部を紹介したいと思います。 あわせて読みたい : Android版クックパッドアプリで採用している技術の現状確認 2018年版 日々のメンテナンス系 不要になったソースコードやリソースの削除 Lint設定の最適化/Lint警告の除去 画像リソースのWebP化/WebPおじさん化 minSdkVersion 21 後の変更 Ripple 対応 android:elevation の指定で影をつける *-v21 系代替リソースの整理 ツール導入など And

メディアプロダクト開発部の安部(@STAR_ZERO)です。 Android cookpadLiveで採用してる技術について紹介したいと思います。 cookpadLiveとは cookpadLive は、料理上手な有名人や料理家がクッキングLiveを生配信しています。一緒に、Live配信でリアルタイムに料理が楽しめるアプリです。 ダウンロード: Android アプリ iOS アプリ ぜひ、ダウンロードしてLive配信を見てください！ 基本環境 基本となる環境です Kotlin minSdkVersion 21 targetSdkVersion 28 AndroidX 特別な箇所はないですが、最新に追随するように努めています。 比較的新しいアプリなので、最初からすべてKotlinで記述されています。 targetSdkVersionについてはそろそろ29に対応する予定です。29にすることで

こんにちは、クックパッドでUXエンジニアをしている重田です。 Cookpad DESIGN MAGAZINEの一記事として、最近行った「おいしいたべかた学習ドリル - たべドリ -」のリニューアルプロセスを紹介します。 新規事業における難題たべドリはクックパッドの新規事業です。新規事業では往々にして正解がわからない、解き方もわからないような難題に取り組みます。 たべドリは「自分の感覚で料理ができることの楽しさを一人でも多くの人に伝えたい」という想いでデザイン・開発しているサービスです。ただ、それを実現するための切り口は多様なため、正解がわからず苦労していました。 ・料理教室のようにスキルを身につけるといいのでは ・食材の活かし方を学ぶといいのでは ・献立の組み立て方を学ぶといいのでは ・料理を小さく分解して捉えられるといいのではリニューアル前は、シンプルな調理でも十分おいしい旬の食材を中心

こんにちは。新規サービス開発部の中村です。 最近Komercoで販売されている鉄のフライパンが欲しいです。クリエイターさんたちの作品は見ているだけで本当に楽しいですね。 そんなKomercoはバックエンドにFirebaseを活用していますが、実は弊社からKomercoの他にもFirebaseを活用したサービス「Cookin'」をリリースしています。 本稿ではCookin'のFirebaseを活用した事例についてご紹介します。 Cookin'とは Cookin'は料理動画撮影アプリです。手順ごとに３秒間取るだけで１本の料理動画が投稿できるサービスとして、2017年12月にiOSアプリとしてリリースしています。 このサービスの特徴は、簡単に料理動画が作成できるほかに、投稿から斬新なアイデアを得られたり、コメント欄から料理のコツやポイントを気軽に質問できるところです。 料理をしながら動画撮影する

こんにちは。技術部モバイル基盤グループの @giginet です。 fastlaneのCore Contributorを務めており、 社内ではプロのコードサイン解決者 *1 としての職務経験を積んでいます。 今回はクックパッドでのfastlaneを使ったiOSアプリのサブミット自動化と、証明書管理についての事例を紹介したいと思います。 CIによるiOSアプリサブミットの自動化 クックパッドでは、昨年の春頃よりiOSアプリのサブミットをチャットbot経由で行っています。 このように、Slack上でサブミットジョブを実行すると、CIでアプリがビルドされ、審査提出までを完全自動で行ってくれます。 審査提出には、ビルドや処理待ちの時間を含めると多くの工数がかかり、人為的なミスが起こる可能性もありましたが、 完全な自動化により、高頻度のアプリリリースに耐えられるようになりました。 アーキテクチャは以

海外事業向けのiOSアプリケーション開発を担当している西山(@yuseinishiyama)です。クックパッドは現在、海外複数カ国に向けてサービスを展開しています。 海外事業向けのiOSアプリケーションは、英語、スペイン語、インドネシア語、タイ語、ベトナム語、アラビア語をサポートしています。今後、サポートする言語は更に増えていく予定です。 これまで、複数の言語に対応するための国際化(internationalization)と地域化(localization)を行ってきました。ここでは、その中で得た知見を以下の4つのパートに分けて共有したいと思います。 コンテンツとUIの言語の決定 RTL対応 翻訳フロー 翻訳に関するTips ちなみに、当該プロジェクトがサポートしているiOSバージョンはiOS8以上です。そのため、iOS9以降でしかサポートされない機能については触れません。 また、我々の

こんにちは。技術部モバイル基盤グループの三木(@giginet)です。 クックパッドでは、Pureeと呼ばれるiOS/Android/ReactNative向けのログ収集ライブラリを公開しています。 モバイルアプリのログ収集ライブラリ「Puree」をリリースしました - クックパッド開発者ブログ ログ収集ライブラリ Puree の iOS 版をリリースしました - クックパッド開発者ブログ 最近、以前開発されていたPureeをpure Swiftで書き換え、OSSとして公開しました。 この記事では、新しくなったPureeをご紹介します。 概要 クックパッドでは全社的にAmazon Redshiftを中心としたデータ活用基盤を構築しています。 クックパッドのデータ活用基盤 - クックパッド開発者ブログ この仕組みを使い、公開している多くのモバイルアプリからも、1つのログ基盤にさまざまなログを

サービス開発部の外村 (@hokaccha）です。 クックパッドのアプリには「料理きろく」という機能があります。 モバイル端末から料理画像のみを抽出して記録することで食べたものが自動的に記録されていくという機能です。 今回はこの料理きろくで画像判定をおこなっているバックエンドのアーキテクチャについて紹介します。なお、実際に判定をおこなう機械学習のモデルのはなしは以下の記事に書かれているのでそちらを参照してください。 料理きろくにおける料理/非料理判別モデルの詳細 - クックパッド開発者ブログ また、以下のスライドでも料理きろくのバックエンドについて紹介されているのでこちらも参照してみてください。 処理の概要 ざっくりとした画像判定のフローとしては、次のようになります。 クライアントアプリは端末内の画像を判定用に縮小してサーバーにアップロードする サーバーはアップロードされた画像を機械学習を

SQL、書いてますか？ こと大規模データ処理の分野においてはSQLはもはや標準インターフェイスであり、 分析やらバッチやらに関わっている皆様は日々大量のSQLクエリーを生産していることと思います。 そこでちょっと気になるのが、 SQLのコーディングスタイルってどうするのが一般的なんだっけ……？ という点です。 イマドキはSQLなんてO/R mapperに吐かせることが多いからなのか、 それともコードを広い範囲で共有することがそもそもないからか、 SQLのコーディングスタイルについて見聞きすることは他のプログラミング言語に比べるとだいぶ少なく、 いまいち決定版と言えるスタイルがないなと感じています。 そんなわけで本日は、SQLのコーディングスタイルについての意識を活発化させるべく、 クックパッドでわたし（青木）が使っているコーディングスタイルから特徴的な点を紹介したいと思います。 特に、分析

技術部開発基盤グループの @moro です。 クックパッドでは、昨年に引き続き今年も、夏の技術職インターンシップを実施しました。 クックパッドのインターンシップは前後半に分けた構成になっていました。まず前半はWebサービス開発に必要な技術の中から6つの分野に関する講義や実習を行いました。さらに後半は、前半の座学に合格した方を対象に、メンターとなる社員と一緒に実際の開発現場に入り、具体的な問題解決に取り組んでもらいました。 その中で、前半の講義に使った資料を公開します。 1日目 Git (@moro) 昨年に引き続き、講義初日はGit, TDD, Railsを1営業日で一巡りするという、忙しい構成でした。 Git編では、すでにGitを使っているエンジニアも多いだろうと想定して各コマンドの紹介などは最小限に済ませました。代わりに、Gitの内部構造を説明し「コミットを覚えておけばなんとかなる」感