【開催レポ】Cookpad Tech Kitchen #16 コメルコテックバナシ〜新規事業開発のリアル〜

こんにちは。広報部のとくなり餃子大好き（ id:tokunarigyozadaisuki ）です。

2018年7月19日に、Cookpad Tech Kitchen #16 コメルコテックバナシ〜新規事業開発のリアル〜を開催いたしました。クックパッドでは、Cookpad Tech Kitchenを通して、技術やサービス開発に関する知見を定期的に発信しています。

ホワイトボードと発表練習中の星川

第16回は2018年6月26日にリリースいたしました、料理が楽しくなるマルシェアプリ「Komerco-コメルコ-」の開発裏話をテーマとし、Firebase, Algolia など利用している技術の話はもちろん、新規事業のサービス開発について、デザインの観点からもお話をさせていただきました。 本ブログを通してご来場いただけなかったみなさまにも、当日の様子をお届けしたいと思います！

料理が楽しくなるマルシェアプリ「Komerco-コメルコ-」

「モノとの出会いで、料理はもっと楽しくなる」

「Komerco-コメルコ-」は、料理道具、うつわ、カトラリー、リネン雑貨などの“料理が楽しくなるモノ”が買えるマルシェアプリです。自身の手で創るモノで「料理を楽しんで欲しい」と願うクリエイターさんが出品した作品を、スマートフォンアプリから直接購入することができます。また、作品のこだわりやストーリーを紹介する「コメルコバナシ」などの記事コンテンツも提供しております。 みなさんもぜひアプリをダウンロードして、とっておきのモノを見つけてみてくださいね！

Komerco - コメルコ - by クックパッド

• Cookpad Inc.
• ショッピング
• 無料
• 

発表プログラム

「Komerco-コメルコ-を支える技術」

はじめに、2017年に中途入社したiOSエンジニアの星川より「Komerco-コメルコ-を支える技術」というタイトルで、「Komerco-コメルコ-」で利用している技術についてお話しいたしました。

「Firestore と Cloud Storage を用いたアプリでの画像の扱い方」

2017年に新卒でクックパッドへ入社した三浦からは、「Komerco-コメルコ-」でのユーザーから投稿される画像の圧縮やリサイズに関して、サンプルアプリを用いながら画像の投稿、取得フローについてご紹介しました。

「Effective Firestore Security」

2017年に中途入社したiOSエンジニアの岸本からは、Firebase Cloud Firestoreの "セキュリティ" に焦点を当てて、問題となるケースの紹介、セキュリティを意識したモデル設計、セキュリティルールの実践的な書き方をお話させていただきました。

「ゼロからはじめるサービスのデザイン」

2017年から新卒でクックパッドへ入社し、現在「Komerco-コメルコ-」のリードデザイナーとしてブランディングからサービスの体験、Web・アプリのUIなどデザイン全般と開発を担う藤井からは立ち上げからリリースまで、サービス全体のデザインを見るにあたって取り組んだことや、仕組みづくり、デザインの観点からサービス開発のリアルをお話いたしました。

付箋形式でお答えするQ&Aディスカッション

Cookpad Tech Kitchenでは参加者のみなさまからの質問を付箋で集めています。 ほんの一部ではありますが、当日は下記のような質問に回答いたしました。

たくさんのご質問ありがとうございました！

Q: Firestoreのデメリットは？
A: スキーマが無い。エクスポート出来ない（分析の為にスクリプトで対応している）

Q: Cloud Functionsでの失敗をどの様にハンドリングしている？
A: 不整合のあるデータを集めてきて一括でパッチするスクリプトがある

Q: rulesを書きはじめるタイミングは？
A: 最初は緩かった。リリースする数ヶ月前ぐらいからでもよいのでは。とはいえ最初から書けるなら書いた方が良い

Q: rulesを書けなかったのはどういう時？
A: 制限がある。リスト、マップの中の値が何かをチェック出来なかった。他のコレクション・ドキュメントを参照したり出来なかった。お金に関する部分はCloud Functionsに寄せている

Q: UIから直接モデル（Firestore）を操作していましたが、テストはどうしていますか？
A: 外部のモデルフレームワークに則っているからそっちで任せている。モデルに実装を寄せると自由度が落ちる

シェフの手作り料理

Cookpad Tech Kitchen ではイベントに参加してくださったみなさまにおもてなしの気持ちを込めて、シェフ手作りのごはんをご用意しております！食べながら飲みながらカジュアルに発表を聞いていただけるように工夫しています。今回お越しいただけなかった方も、ぜひ次のイベントはご参加くださいね。

オリジナルロゴ寿司ケーキとシェフ特製の料理

乾杯の様子

おわりに

クックパッドではKomerco事業部はもちろん、その他新規事業、レシピサービス事業などに携わる新しい仲間を募集しています。ご興味がある方はぜひご応募ください！お待ちしています。

www.wantedly.com

http:// https://info.cookpad.com/careers

次回のCookpad Tech Kitchen のテーマは「北欧で最新のインタラクションデザインを学んできた話」。8月22日 (水)に開催予定です！ クックパッドでは他にも様々なイベントを企画しておりますため、今後のイベント情報についてご興味がある方は、ぜひConnpassのメンバー登録をポチっとお願いいたします！みなさまにお会いできることを楽しみにしております。

cookpad.connpass.com

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によれば

Chaos Engineering is the discipline of experimenting on a distributed system in order to build confidence in the system’s capability to withstand turbulent conditions in production.

と定義されています。
意訳すると「本番環境の分散システムが過酷な状況でも耐えれるとの確信を得るために、実験するという取り組み」とかでしょうか?

分散システムはマイクロサービスと置きかえるとイメージしやすいと思います。複数のマイクロサービスが相互に呼び出し、協調して動くシステムでは一つのサービスがクラッシュしただけでシステム全体が壊れるような事になっていてはいけません。そうなると、ユーザーに届けられる価値が減ってしまいビジネス的にも問題です。
もちろんそうならないように作るべきですが、それでも予想不可能な事は起こります。それを知るためにコントロールされた障害を投入し、知見を広げたり、確信を得たりするのです。

そのための実験は下記のステップで進めます。

1. 正常な振る舞いをしているかどうかを測定可能な値として定義する。
2. この正常な状態が通常時と障害エミュレート時の両方で継続することを仮定する。
3. サーバクラッシュ、ディスク異常、ネットワークエラーなどの現実世界で起こりえる障害をエミュレートする。
4. 1で定義した値を通常時と障害エミュレート時で比較し検証していく。

詳しくは上記論文やリンク先を見ていただくとして、凄くザックリと纏めてしまうと、
システムにコントロールされた障害をエミューレートし、それでも壊れない事を検証していく
と、思ってもらえれば良いかと思います。
元々、昔から似たような事をやっているサービスはありましたが Netflix がそこに Chaos Engineering と名前と付け原則などをわかりやすく纏めた感じですね。

必要になった背景

クックパッドでは 2014 年ころからマイクロサービスに取り組んで来ました。

• クックパッドとマイクロサービス - クックパッド開発者ブログ

そして個々の Web アプリケーションはコンテナ技術で仮想化し、コンテナオーケストレーションツールとして ECS を使い運用しています。

• クックパッドにおける最近のMicroservices事例 - クックパッド開発者ブログ
• Web アプリケーションを把握するためのコンソール - クックパッド開発者ブログ

また、サービス間の通信に関してもサービスメッシュの導入などを行なっています。

• Service Mesh and Cookpad - クックパッド開発者ブログ

その結果、今ではチーム数も増加し、開発規模も大きくなっています。結果として( 管理画面を提供するサービスなどを除いても) 大小 80 個近くのサービスがそれぞれお互いに緩くではありますが連携し動いています(僕も数を調べてビックリしました)。

さすがにこれだけのサービスが連携して動いているとどこかで発生した障害がどこまで影響するのか把握するのは容易ではありません。
A というモバイルアプリが叩いている B という API の裏で通信している C が必要としているデータ取得のための D のレスポンス時間が遅くなって、結果として A の応答が悪くなったのだが、原因が D だとは思っていなかった……的な事も発生します。

何故やるのか

上記ブログのマイクロサービス導入背景にもありますが、昔のようにひとつの巨大なアプリケーションを運用するようなスタイルではプロダクト開発の規模の拡大やスピードに限界があり、マイクロサービスアーキテクチャを採用するようになりました。分散システムとして Web サービスを実装する事により単一の複雑なアプリケーションからは開放されましたが個々のサービス間の連携は複雑になりました。

Chaos Engineering の導入によってサービスの耐障害性に自信を持てるようにします。日常的に障害をエミュレートする事によってサービスの耐障害性が高いことを開発者に要求します。
ソフトウェアテストなどの文脈では良く言われますが、不具合は発見が遅れれば遅れるほど、その不具合を修正するコストはかさむことになります。
可用性の高いシステムを作るために、不具合を早く発見し改善していくために Chaos Engineering を導入していきます。

付随して考えている事

人は自分が想像出来るものにしか対処出来ません。バグというのは大体が想定外の入力によって発生します。そこでもっと想像力を働かせろ的な精神論を言っていても良くはなりません。Chaos Engineering のように実際にそういった状況を作る事が大事だと思っています。
例えばクックパッドでは各サービスがどんどん AWS の Spot インスタンスで動くように移行していっています。これはサーバはいつ落ちても良いようにしておかなくてはいけないし、バックグラウンドジョブは落ちたら再実行出来るようにしておかなくてはいけない事を開発者に強制します。
でも、それらは実は Spot インスタンスで動くからやらなければいけないものではありません。耐障害性の高いシステムを作るためにはやらなければいけない事を Spot インスタンスの環境にする事によって強制するようになっただけです。
さきほども書いたように人は自分が想像出来るものにしか対処出来ません。Chad Fowler が Immutable Infrastructure を提唱したけれども、開発者がそれを真に実行出来るようになったのは Docker という環境のおかげというのと同じです。

最後に

現在、クックパッドでは Hako や ECS を使ったコンテナ環境の整備が進み、サービスメッシュの導入によりサービス間の通信を集中管理出来るようになりました。これにより、Envoy proxy を利用してサービス間通信で障害をエミュレートしたり、それらの設定を hako で行えるようになったりと環境は整いました。
まだまだクックパッドのマイクロサービス群の正常な状態( steady-state )をどう定義していくかなどやらなければいけない事は色々あります。
個人的にはこの規模のマイクロサービス群を扱っていく環境は国内ではそんなに多くはなく大変面白い環境だと思ってます。
クックパッドでは一緒に Chaos Engineering を導入していく仲間を募集しています。
このエントリを読んでご興味をお持ちいただけた方は、ぜひともご応募ください。

スマートまな板による料理支援

研究開発部アルバイトの佐藤です。今日はアルバイト期間中に取り組んでいたまな板にレシピを表示する装置について紹介します。

背景

レシピ本をキッチンに持ち込む以外にも、キッチンでスマホ上から検索することによってレシピを見る機会が増えています。しかし、キッチン内でタブレット端末やスマホでレシピを見る問題点として以下が挙げられます。

• デバイスが水や油で汚れず、レシピが見やすい位置に置きたいが、スペースの都合上難しい
• 汚れた手で端末の画面を料理中に触って操作しなくてはならない

また、最近ではAmazon EchoやGoogle HomeなどのスマートスピーカーでCookpadのレシピを検索し、タブレット端末やスマホでレシピを保存することができます。その発展として、レシピの読み上げやEcho Showなどの端末を用いたレシピ表示なども考えられますが、端末と同様に映像などの表示位置が固定されてしまうという問題が挙げられます。また、音声での入力の他にジェスチャなどもとりいれることができればより視覚的な操作も可能ではないかと考えられます。

このような問題に対して取り組んでいるプロジェクトはいくつかあります。例として２つのプロジェクトを紹介します。

こちらのプロジェクトではユーザーの動作やキッチン台の上のものを認識して、端末に現在の動作に合わせた作業内容を表示します。切り方の動画の再生なども端末上で行っていますが、再生するには端末を操作する必要があります。また、この装置では切っている食材を認識するためにまな板自身にセンサなどを取り付ける必要があります。

こちらの論文ではカメラ・プロジェクタ・対話ロボットを連携させた調理支援システムが提案されていますが、対話ロボット１台、カメラ２台、プロジェクタ３台とかなり大掛かりなシステムとなっています。

スマートまな板

そこで図のように天井に装置を設置することによりキッチン用品には非接触のスマートまな板を開発しました。このまな板の特徴はまな板には何も手を加えないことです（つまり、正確にはスマートまな板でなく、レシピプロジェクターです）。具体的には次のことを目標に開発しました。

• プロジェクターでレシピや操作画面をまな板に投影し、視線の移動の少ない情報提供
• 作業台の上に装置を置かないことによる広い作業スペースの提供
• webカメラとRaspberry Piによる画像処理で人の手を検知し、画面に触らない操作

今回の対象者

以下のような問題に困っている料理初心者を対象ユーザとしました。

• にんじん、たまねぎ、じゃがいもの剥き方・切り方がわからない
• だしのとり方がわからない
• ケーキをどのようにデコレーションすれば良いかわからない

今回実装した機能

上記の様な料理初心者に対して、にんじん、たまねぎ、じゃがいも、だしが材料にすべて入っている肉じゃがの調理とケーキのデコレーションを支援するような機能を実装しました。 料理初心者への支援としてまな板に映像の投影を行い、次のようなものを視覚的に提供しました。

• にんじん、たまねぎ、じゃがいもの剥き方・切り方の手順動画：文字だけでは中々習得の難しい包丁の具体的な使い方を、まな板の左上に動画を流すことで視覚的に伝える
• 材料と調味料のチェックボックス：何が準備できていて次に何を準備すべきか判断しやすいようにする
• 手順表示：一文ずつ手順を表示していく。また、時間が手順に書いてあった場合はタイマーを起動する
• デコレーションケーキの下書き：デコレーションケーキの下書きを投影し、デコレーションの位置ガイドとして使えるようにする

実装方法

webカメラ・小型プロジェクター・Raspberry Piを用いて実装を行いました。 開発言語はPython3、使用ライブラリはtkinter、opencv2です。 詳細は以下のようになっています。

使用物名	型名など
webカメラ	Logicool HD720p
小型プロジェクター	iOCHOW iO4 ミニ プロジェクター
Raspberry Pi	Raspberry Pi 3, raspbian gnu/linux 9
Python3	Python 3.5.3
tkinter	version 8.6
opencv2	version 3.4.1

手の認識

簡易的なデモ機の実装としてカラートラッキングを用いました。具体的には手の肌色をトラッキングすることで手の位置を捉えて、画面操作ができるように実装しました。

デモ

デモ中の写真をいくつか紹介します。

• スタート画面
• メニュー選択
• 材料一覧表示
• 手順表示

気づき

実装したスマートまな板では視線の移動の少ない情報提供、広い作業スペースの提供、画面に触らない操作を実現することができました。 実際に実装してみて気づいたことは以下です。

• 視線の移動の少ない情報提供：
  • 切り方動画をまな板の左上に表示することによって、動画を確認しながら作業することができた
  • 作業によってはまな板に投影するよりもキッチンの壁に投影したほうが良い場合もある（まな板に投影したほうが良い場合は食材を切るときの動画での切り方確認で、キッチンの壁に投影したほうが良い場合はレシピ表示とタイマー）
• 広い作業スペースの提供：
  • スマホやタブレット端末を作業台の上に置く必要がないため、広い作業スペースを確保できた
• 画面に触らない操作：
  • 今までレシピを確認するために画面操作する度に手を拭いたり洗ったりしていたことがなくなった

デモ

実際にスマートまな板を数人に体験していただきました。体験後、頂いた意見をいくつか紹介します。

• 材料チェックリストがまな板の上で操作できるのは便利
• まな板の上で切り方動画を見られるのは面白い
• 実用化するんだったら、スマートスピーカーと組み合わせて提供する情報や選択肢によって音声か映像か使い分けたほうがよさそう

また、いくつかの改善点や追加機能がみつかりました。

• ユーザーの動作によって投影位置を変える機能（ユーザーの作業している場所を検知して、作業の邪魔にならないようなスペースへ画面を移動・縮小させる）
• まな板の上に置かれた材料を認識したレシピ検索
• まな板の上に置かれた材料の重さを概算し、レシピで指定されている重さによって切り方を投影する機能
• 自動でデコレーションの下書きを拡大縮小したり移動したりしてケーキに下書きを合わせてくれる機能

現在の実装では以下の問題が発生しています。

• 肌色の位置を手の位置と認識しているため、色の似ている木のまな板などを誤認識
• 指先や指を認識していないため手首などを誤認識するなど認識精度が低い そのため、手の認識専用デバイスを利用しない場合はニューラルネットワークを用いて手を手としてラベル付したり、手の形を認識するなどの実装に変更することが考えられます。 また、Leap Motionなどの外部デバイスを用いて手の認識を行うということも考えられます。

まとめ

キッチンでレシピを確認するときに、視線の移動の少ない情報提供、広い作業スペースの提供、画面に触らない操作を実現できるスマートまな板の開発に取り組みました。

実際に実装することによって、提案の有用性や改善点を見つけることができました。

今後の展開としてはスマートまな板を用いたアプリの開発などが考えられます。具体的には切り方動画をまな板で再生できることや材料・手順のまな板への投影を用いて、子供・初心者向け料理学習アプリなどを実装することにより、より料理初心者への支援ができると考えられます。