こんにちは。マーケティングプロダクト開発部の長田です。 この記事では、私が現在進めているプロジェクトで、Webpackerを使ったJavaScriptのモジュール管理を導入したので、それについて紹介したいと思います。 Webpackerとは Webpackerとは、Webpackを用いてRails上でJavaScript開発をするために必要な一連の流れを提供してくれる、Rails organizationで開発されているgemです。 これまで、Rails上でJavaScriptのパッケージをどのように管理するか、また、モジュール依存をどのように解決するかについて、多くの選択肢があり、それらをどう組み合わせて使うのかについて悩まされてきました。 このブログでも過去に何度か記事が投稿されており、その中でも複数の選択肢が上げられています。 webpackを使った Rails上でのReact開発

こんにちは、投稿開発部のデザイナー、木村です。主に、iOS/Androidのクックパッド App、また昨年から「お料理アルバム」というAppのデザインを担当しております。 今回は、お料理アルバムのデザインリニューアルを例に、既存サービスが持ってた課題をどのように解決していったかについて、デザインの観点を交えてお話したいと思います。 リニューアルの経緯 お料理アルバムは、毎日の料理写真をプライベートに記録する iPhone/Android Appです。多くのユーザーから「こんなアプリを待っていました！」「自動で写真をキレイに並べてくれて助かっています！」といった声を頂き、投稿された写真数は400万枚を超えるサービスに成長しました。 そんなお料理アルバムもリリースから1年半ほど経過し、さらにより多くのユーザーに喜んでいただくために、デザインのリニューアルを計画しました。 ゴールはユーザーの「ム

こんにちは、株式会社トクバイ出向中のデザイナー 吉井です。 まだあまりご存知ない方も多いと思いますが、株式会社トクバイは2013年にクックパッドの新規事業としてスタートした「クックパッド特売情報」を分社化し、今年7月に設立されました。 それに伴いサービス名も「トクバイ」と改め、この夏Android / iOSの両アプリをリリース致しました。 ※9月5日現在、iOSアプリはAppStoreのおすすめにフィーチャーされています！ トクバイは日々の特売品やチラシ、タイムセール情報など、リアルタイムで自分の近くのお店の買物情報を閲覧できるサービスです。 私はクックパッド特売情報の頃からデザイナーとして一連のサービス開発に携わっていますが、今日はその「トクバイ」も含め新規アプリをデザインする際、私が心がけている大きなポイントを5つご紹介します。 ユーザーをしっかりと理解する まず基本中の基本ですが、

技術部の牧本です。 今日はモンキーパッチの話をします。 モンキーパッチとは何か そもそもモンキーパッチ (monkey patch) とは何でしょうか? 端的に言えば、言語の組み込みクラスやライブラリ、その他外部ライブラリの挙動を、動的に拡張する仕組みをモンキーパッチと呼びます。 *1 例えば、Ruby のモンキーパッチのすごく単純な例として以下のようなものがあります。 module NilClassExtension def empty? true end end NilClass.prepend(NilClassExtension) インスタンスが空であるかどうかを判定するメソッドとしての #empty? は String や Array など様々なクラスに存在しますが、 nil を唯一のインスタンスとする NilClass には本来は存在しません。 このモンキーパッチを導入することで

こんにちは、株式会社ビットジャーニーに出向中の出口 (@dex1t) です。ビットジャーニーでは、社内情報共有ツール Kibela*1のサービス設計やプロダクトマネジメントに責任を持ちつつ、エンジニアとして開発全般に携わっています。 今回は、新サービスの立ち上げ時にどのような考えで重要指標*2を設計し、それを実際の開発のなかでどう使っていくかという話をします。 なぜ検証をするのか そもそもなぜ新サービス立ち上げ時に、重要指標や検証といった考えが必要になるのでしょうか。それを考えるにあたって、クックパッド的なサービス開発の流れを改めて整理してみます。 企画と検証は表裏一体 サービス開発といえば、企画・開発・検証をぐるぐる回すというのが一般的だと思います。指標は検証段階で活用する道具です。企画で考えたことを確かめるのが検証段階であり、企画と検証は表裏一体です。 したがって、指標の設計をするにあ

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

はじめに こんにちは、投稿開発部エンジニアの芳賀です。 既存のRailsプロジェクトの中でReact.jsを利用する機会があったので、その時にやったことについてまとめてみます。 私自身は普段RailsのサーバサイドとCoffeeScriptが中心で、最近のJavaScript開発環境についてあまりキャッチアップできていなかったのですが、それらの状況を把握しつつ試行錯誤で開発していった経験から、できるだけ「React採用してみたいけどJavaScript界隈よくわからない目線」で書いてみようと思います。 RailsでReact.jsを使ういくつかの方法 2016年時点で、RailsでReact.jsを使う方法はいくつかあって、どれを採用するかで悩みました。 vendor/assets/javascripts にreact.jsを置いて利用する react-rails gem を利用する br

こんにちは、買物情報事業部の三浦です。 私たちのチームでは１つのプロダクトの開発が佳境を迎えています。 私は普段エンジニアとしてチームに所属していますが、今回はプロダクトオーナーとして開発に携わっています。そこで単に実装者としてだけでなく、初期のコンセプト立てやユーザーインタビューなどのプロセスを経て学べたことをご紹介します。 価値を見つけるところからスタート 普段のチームでの開発はディレクターが開発を伴わない価値検証を行った上で仕様を考えます。それを基に立てられたissueをエンジニアは引き継いで実装を進めています。issueに記載された施策の背景やユーザーストーリーから、ユーザーの利用シーンをイメージして開発します。 今回はその価値となるものを探す作業からディレクターと共に行いました。まずはユーザーインタビューを実施し、計10名以上の方からお話を聞きました。 課題をよりリアルに感じた

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

こんにちは。クックパッド特売情報ディレクターの田中です。 本日は、開発チームと営業チームのつなぎ役として働くディレクターとして、コミュニケーションにおいて意識していることをご紹介したいと思います。 特売情報のビジネスモデル 私が担当しているクックパッド特売情報はいわゆるB2B2Cというビジネスモデルになっています。 こちらの図の様にクライアント(小売店)の方からお金をいただく代わりに情報掲載の場とエンドユーザーの方々の関心をデータ化してお返しし、いただいた情報を私達が見やすい形に整えたり、更に付加価値を付けた上でエンドユーザーにご提供しているという形になっています。 B2B2Cサービスにおけるディレクターの役割 クックパッドで「ディレクター」と呼ばれるスタッフの役割は、以前検索・編成部の五十嵐さんがまとめて下さいました。 これらの役割をベースとして、特売情報のディレクターはクライアントユー

ヘルスケア事業部の濱田です。花粉がつらい時期ですが、みなさん楽しく開発してますか？ おいしい健康では、JavaScript（以下 JS）で非同期にサーバ側のリソース操作を行う際に、js-data というライブラリを使っています。Rails ユーザにとってはとっつきやすい便利なライブラリですが、日本語での情報がほとんど見当たらなかったため、簡単にご紹介したいと思います。 js-data とは JS 製のデータ管理用ライブラリです。RESTful API などを通じて取得できるデータ（リソース）を抽象化して、CRUD 操作を統一したインターフェースで行えるようにしてくれます。 リソースごとにオブジェクト（モデル）を定義したり、find でデータを取ってくるなど、ActiveRecord などの O/R マッパのような使い勝手が特徴。設計等には Ember data の影響を受けています。 以下

こんにちは。技術部の国分 (@k0kubun) です。 3/28にクラウドワークスさんで行なわれたRails Upgrade Casual Talksで、Railsアップグレードの際にクックパッドが行なっている工夫について紹介しました。 影響範囲の予測が難しいRailsのアップグレードを安全に行なうための動作確認のやり方について参考になればということで、本記事でも改めて紹介いたします。 CookpadのRailsアップグレードの流れ Rails 4.1から4.2にアップグレードした際の例を紹介します。 CIにRails 4.2用ジョブを用意 まずはRails 4.2にアップグレードするためのrails42ブランチでテストを通します。リリースするまでこのブランチはmasterからrebaseし続けるので、リリースまでテストを通る状態を保つため、CIにrails42ブランチ用のジョブを用意しま

技術部の松尾(@Kazu_cocoa)です。 最近、 @moroや私を中心に、テストから開発を駆動するという方向で、とある活動を始めました。その活動の中では、 @t_wadaさん を 技術顧問 として巻き込んで活動を進めています。そんな取り組みを少しここにまとめます。 取り組みの前段階 先日、私はテストエンジニアというロールに焦点を当ててテストという言葉に対する2種類の話をいたしました。TDDのようにテストによって開発を駆動していく側面の話と、人の認知・感じ方に寄った仕様自体含めてテストしていく側面の話です。 クックパッドエンジニアトークナイト 〜クックパッドテストエンジニアのあり方〜 を開催しました！ クックパッドエンジニアトークナイト 〜クックパッドテストエンジニアvol.2 Testing編〜 を開催しました！ その際、会の傍でt_wadaさんらと私たちが開発するWebアプリケーショ

ユーザーファースト推進室 デザイナーの橋本（＠hashcc）です。 クックパッドでは、安定した品質のモバイルアプリケーションをユーザーさんに届けるために、デザインリリースマネージャ という試みを2015年秋頃から始めました。 今回はこの試みについて発端や成果などをお話しします。 「あれ、なんでこんなデザインになってるの・・？」 クックパッドには日々多くのコード変更が加わっています。そうした中でも品質を安定させる（クラッシュや機能破壊を起こさない）ために、テストエンジニアなどが取り組んでいます。 関連： クックパッドモバイルアプリの開発体制とリリースフロー 安定したリリースを継続するためのテストとテストレベルの話 デザイナーも「デザイン変更が伴う修正は必ずデザイナーがチェックする」というルールを作り、デザイン品質の安定化に努めていました。 にも関わらず、リリース直前/直後になって「あれ、なん

こんにちは。ユーザーファースト推進室、デザイナーの坂本です。 私は、クックパッドのレシピを主に生活習慣病の方に向けて管理栄養士が健康的にアレンジした「おいしい健康」というサービスのデザインを担当しています。 「おいしい健康」は2月22日に、アカウント（会員）機能やレシピのリコメンド機能、献立の保存機能などの新機能をリリースしました。このリリースに関わったメンバーは、ディレクター1名、エンジニア3名（＋アルバイトの方2名）、デザイナー1名です。 私はデザイナーとして、UI設計からビジュアルデザインまで関わったのですが、パターンの考慮漏れや使い勝手の悪さなどで、手戻りを増やしてしまいました。 リリースした今、改めて振り返ってみると、もう少しうまくやれば手戻りを少なくし、品質アップの時間をもっと確保できたのでは？と思いました。一体何が悪かったのか？　どうすれば良かったのか？　もし神様が願いを叶え

会員事業部の小椋(@littlestarling)です。 会員事業部では会員向けサービス全般、中でもプレミアムサービスの価値向上を継続すべく、日々サービス開発を行っています。 クックパッドのプレミアムサービスの柱のひとつは人気順検索機能です。 今年、私はその人気順検索でカバーしきれない課題を見つけ、その課題を解決する新たな価値を生み出すことをミッションとして与えられました。 当社ではサービス開発はディレクターとエンジニアのチームによって進められています。 ディレクターの方に既に明確なビジョンがある場合はその壁当て相手として質問を繰り返して煮詰める作業に徹することが出来ますが、今回はお互いゼロからのスタートとなったため、一緒に"What"と"Why"を探っていくことになりました。 本稿では、このようにエンジニアがディレクターと企画を一緒に考えていったことについて書きたいと思います。 検討のた

買物情報事業部の根岸です。寒いですか。僕は今名前がわからない簡易暖房みたいなものの前にいるのであったかいです。今日は、僕がサービス開発エンジニアとして行っているサービス改善プロセスの一部についてお話させて下さい。 サービスの価値を高めるための改善は、より少ない人数で、より速く行うことが重要になります。これは、意思決定を最小限必要な人数以上で行うとコミュニケーションコストが高くなること、また、意思決定は一定の確率で失敗するものなので、イテレーションの速度を早くすると結果的に全体の価値を高めることなどが理由です。 それでは、最小の改善とは、最速の改善とは一体どのようなものなのでしょうか。 最小の改善が行われる単位 最小の改善が行われる単位は、サービスの開発を行っている個人です。個人が、改善の対象となっているサービスの課題を発見して解決へと導くことが最小の改善になります。 リリースしたサービスで

クックパッド検索・編成部の五十嵐啓人です。本業はレシピなどの料理検索を中心とした、主に「さがすユーザー」のサービス責任と、ユーザー数の拡大に責任を負っています。本日は部門を超えて取り組んでいる、ディレクションの役割を持つスタッフの活躍を広げるための取り組みについて紹介します。 ディレクションの役割を取り巻く当社の状況 日本のインターネットサービス界隈で「プロダクトマネージャ」の話題が盛り上がりを見せつつありますが、当社でもプロダクト開発を牽引・補佐する役割を担当しているスタッフを（名前の議論はありますが）慣習的に「ディレクター」と分類しています。 当社では、以前からエンジニアリングで活躍するスタッフについては、エンジニアマニフェストやエンジニア専用の評価制度作りなどに注力し、組織として期待するエンジニア像の言語化による職種の価値向上、およびキャリア支援を充実させてきました。しかし、エンジニ

ちくしょう、プロジェクトまるごと書き直したい 自分で作り始めたプロジェクトであっても、途中から相乗りしたプロジェクトであっても、誰もが一度は体験する気持ちではないでしょうか。 私が携わっている「おいしい健康」も例外ではありません。 プロジェクトを全て書き直したいと思う一方で、全てのコードを書き換えようとするアプローチは、これまで作ってきた見た目や機能、ビジネスロジックを再現しきれずに潰えてしまう。という話しも良く聞きます。 実は全て書き直したいのではなく、その大きな目的としては以下のようなモノがあるのではないでしょうか。 シンプルな作りに変えたい 不要なコードが重なり、動作が遅くなっているところを解消したい 新しいライブラリ、新しい技術を取り込めるようにしたい 今回は、このような目的を達成しつつ、プロジェクトの書き換えを行った私達の話をしたいと思います。 cookpad本体からのプロジェク