こんにちは。技術部クックパッドサービス基盤グループのkaorun343です。我々のチームでは レシピサービスのフロントエンドを Next.js と GraphQL のシステムに置き換えている話 にて紹介したとおり、レシピサービスを Next.js ベースの新システムへと移行しています。今回はこの新システムの CSS の話 です。 背景 クックパッドのレシピサービスを Next.js と TypeScript で置き換えはじめた当初、CSS については Next.js に標準で組み込まれているCSS in JS ライブラリである styled-jsx を使っていました。プロジェクトが大きくなりはじめたタイミングで 「CSS の技術選定を考えなおしてもいいかもしれない」とチームの中で話し合い、改めて技術選定をしました。 技術選定 結論として、本システムでは CSS in JS ライブラリのem
技術部の外村(@hokaccha)です。今回はクックパッドのウェブサイトのフロントエンドを Next.js などを使って作り直している話を書きます。 この記事で紹介する新システムは、スマートフォン向けのレシピページで確認することができます。もし興味があるかたはレシピページをスマートフォンのユーザーエージェントで開いて DevTools などで確認してみてください。 Next.js と GraphQL で動いているのがわかると思います。 ご存じの方も多いかもしれませんが、クックパッドのウェブサイトはモノリシックな Rails で作られていて、10年以上 Rails で開発を続けてきました。10 年以上同じシステムで開発を重ねれば当然レガシーな部分が大量に生まれてきますが、特にフロントエンドはその影響が顕著でした。 どこから使われているかわからない CSS が大量にある、JS のコードは昔なが
こんにちは、モバイル基盤部の @giginet です。 去る3月28日、Cookpad Spring 1day Internship 2019の一環として、Swiftコンパイラコースを開講しました。 最近のSwiftコンパイラ 近年、iOSエンジニアの間ではOpen Source Swiftがホットトピックとなっています。 ここ1年ほど、わいわいswiftcというSwift言語処理系に関する勉強会が盛り上がっていますし、 先日のtry!Swiftでは、参加者がSwift自体にcontributionするOpen Source Swiftワークショップが開かれました。 Swiftコンパイラに用いられているLLVMという技術は今、多くの言語処理系で利用されています。これを学ぶことで、さまざまな言語処理系に応用することができます。 このインターンは、Swiftコンパイラを例に、LLVMに触れ、コ
研究開発部のスマートキッチングループ プロトタイプエンジニアの山本です。専門分野はロボティクスです。 スマートキッチングループでは、 レシピを様々な機器とつなぐスマートキッチンサービス「OiCy」の開発を進めています。今年の5月、OiCyの開発を発表した際に、コンセプトモデルレシピ連動調味料サーバー「OiCy Taste」を公開しました。クックパッドからハードウェアが発表されたことに驚いた方も少なくないかと思います。かく言う私もその一人で、「OiCy Taste」を見てクックパッドのスマートキッチンの取り組みに興味を持ち、この夏からハード系エンジニアとしてプロジェクトに加わることになりました。よろしくお願いします。 このエントリでは、このレシピ連動調味料サーバー「OiCy Taste」の設計情報を公開します。 最初に 皆さんは料理をしますか?料理を楽しんでいますか? 料理とエンジニアリング
こんにちは、サービス開発部の荒引 (@a_bicky) です。 突然ですが、RDBMS の既存のテーブルを見てみたら「何でこんなにインデックスだらけなの?」みたいな経験はありませんか?不要なインデックスは容量を圧迫したり、挿入が遅くなったりと良いことがありません。 そんなわけで、今回はレコードを検索するために必要なインデックスの基礎知識と、よく見かける不適切なインデックスについて解説します。クックパッドでは Rails のデータベースとして主に MySQL 5.6、MySQL のストレージエンジンとして主に InnoDB を使っているので、MySQL 5.6 の InnoDB について解説します。 InnoDB のインデックスに関する基礎知識 インデックスの構造 (B+ 木) InnoDB では B+ 木が使われています。B+ 木は次のような特徴を持った木構造です。 次数を b とすると、
こんにちは。サービス開発部の丸山@h13i32maruです。 今日はGitHub/GHE(GitHub Enterprise)で快適なIssue生活をおくるために作ったJasperというツールと、それを実際にどうやって使っているかを紹介させていただきます。 ストレス GitHub/GHEを日々の業務の中心として使っていると、すごくたくさんのIssueやPull Request(以下PR)が流れてきます。 これらのIssueを処理する方法としては主に「メール」と「通知ページ(github.com/notifications)」の2つだと思います。 僕もこれらの方法を使っていたのですが、以下の点ですごく困っていました。 多すぎてメンションされたものやコメントしたものを見逃してしまう あとで見ようと思って、忘れる ブラウザのタブを大量に開いた状態になる 知らないところのIssueで議論が進んでい
こんにちは!クックパッド編集室メディア開発グループ長の @yoshiori です。 たまにネットやイベントなどで「たかがレシピサイトになんでこんな技術力が必要なのか」と言われることがあるので今日はそれに真正面から答えてみようと思います。 例えばどういうところで技術使ってるか 他の人の話はこのブログの他のエントリを見てもらえればわかると思うので、僕の所属しているクックパッド編集室での取り組みの中から今回は料理動画を例に説明します。 Adaptive bitrate streaming での配信 クックパッドで配信している動画は基本的に「料理動画を支える技術」でも触れられている配信プラットフォームを利用しています。 ここでは裏で動画を「低画質」「普通」「高画質」の 3 パターンでエンコードして、回線状況に応じて最適な画質の動画を HTTP Live Streaming (HLS) で配信してい
海外事業向けのiOSアプリケーション開発を担当している西山(@yuseinishiyama)です。クックパッドは現在、海外複数カ国に向けてサービスを展開しています。 主にObjective-Cで記述されたアプリケーションを全面的にSwiftに書き換える機会があったので、その際に得た知見や書き換えるに至った動機を共有します。 書き換えに至るまでの経緯 この項では、書き換えに至るまでの経緯について説明します。 Objective-C期 アプリケーションの開発は2014年7月頃にスタートしました。Swiftの発表直後でしたが、時期尚早ということもあり、Objective-Cで実装することになりました。 Objective-C、Swift混在期 2014年10月頃から、Swiftへの段階的な移行のために、新規のコードをSwiftで書くようになりました。Swiftの記述力や、ヘッダと実装を行き来しな
自己紹介 会員事業部*1 森田です。昨年はプレミアムサービス(以下PS)*2の訴求改善を担当しました。その中で抜きん出て効果の高かった施策を紹介します。具体的な数値を書くことは出来ないものの、この施策一つで前期に私がおこなった他の施策効果の合計を上回ります。 施策内容 紹介する施策は検索結果に関係するものです。今までは検索結果の下に控えめに表示していた人気順検索*3以外のPSコンテンツの訴求を、検索結果の間に追加しました。 殿堂入りレシピ*4 (人気順検索以外のPSコンテンツ)の訴求 予期せぬ効果 実はこの施策は会員事業部によるものではなく、別部署による検索ページへの大きなデザイン変更施策*5の一部として行われました。そのため検索結果の間でPSコンテンツを紹介することも私が考えたわけではなく、効果も深く考えていませんでした。当時私が気にしていた事は、今までも存在していた人気順検索の訴求効果
こんにちは、ユーザファースト推進部デザイングループの元山です。 デザイナーの皆さんはWebやアプリなどをデザインする上でフォントを作った事があるでしょうか? ずいぶんと前から「これからはWebフォントの時代だ」なんて言われながらも、現実は中々使うのが難しいなぁと感じている方は多いかもしれません。 今回はクックパッドで実際に作ったオリジナルフォントを使ったWebやアプリのデザインについて事例を交えながら紹介してみたいと思います。 クックパッドでの事例 印象と機能を向上させるデザインのためのフォント ブラウザやアプリの標準のフォントではない特殊なフォントを使う理由として真っ先にあげられるのは、やはり文字の雰囲気や見た目でデザイン的な印象や見え方を向上することができる点だと思います。最近ではAppleのWebサイトもオリジナルのWebFontを使ったデザインに変わりましたね。 クックパッドでは特
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く