Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Cookpad Tech Kitchen #24
Search
AKAMATSU Yuki
August 21, 2020
Technology
0
740
Cookpad Tech Kitchen #24
https://cookpad.connpass.com/event/183385/
AKAMATSU Yuki
August 21, 2020
Tweet
Share
More Decks by AKAMATSU Yuki
See All by AKAMATSU Yuki
今年できたチームの生産性を向上させたプラクティスの紹介 / Kaigi on Rails 2022
ukstudio
4
4.9k
Cookpad Summer Internship 2019 Day 1 Git
ukstudio
0
10k
Cookpad Summer Internship 2019 Day 1 Ruby TypeScript
ukstudio
0
9.9k
sdevtalks.org開発報告 / reporting that sdevtalks.org was launched
ukstudio
0
360
GraphQL on Rails
ukstudio
1
430
「なんでも」をしよう / 2018-12-19 s-dev talks LT
ukstudio
2
550
Rails Developers Meetup 2018 Extreme
ukstudio
0
3.3k
機能追加時における 仮説検証/s-dev-talks-01
ukstudio
0
970
Rails Developers Meetup
ukstudio
6
3.5k
Other Decks in Technology
See All in Technology
2025新卒研修・HTML/CSS #弁護士ドットコム
bengo4com
3
13k
Google Cloud で学ぶデータエンジニアリング入門 2025年版 #GoogleCloudNext / 20250805
kazaneya
PRO
11
2.8k
【新卒研修資料】数理最適化 / Mathematical Optimization
brainpadpr
25
11k
AI関数が早くなったので試してみよう
kumakura
0
120
Bet "Bet AI" - Accelerating Our AI Journey #BetAIDay
layerx
PRO
4
1.5k
風が吹けばWHOISが使えなくなる~なぜWHOIS・RDAPはサーバー証明書のメール認証に使えなくなったのか~
orangemorishita
15
5.5k
大規模イベントに向けた ABEMA アーキテクチャの遍歴 ~ Platform Strategy 詳細解説 ~
nagapad
0
190
AI コードレビューが面倒すぎるのでテスト駆動開発で解決しようとして読んだら、根本的に俺の勘違いだった
mutsumix
0
160
Findy Freelance 利用シーン別AI活用例
ness
0
300
AI によるドキュメント処理を加速するためのOCR 結果の永続化と再利用戦略
tomoaki25
0
390
マルチプロダクト×マルチテナントを支えるモジュラモノリスを中心としたアソビューのアーキテクチャ
disc99
0
290
VLMサービスを用いた請求書データ化検証 / SaaSxML_Session_1
sansan_randd
0
220
Featured
See All Featured
Building Adaptive Systems
keathley
43
2.7k
The Cost Of JavaScript in 2023
addyosmani
51
8.7k
Fireside Chat
paigeccino
38
3.6k
Producing Creativity
orderedlist
PRO
346
40k
Bash Introduction
62gerente
614
210k
Being A Developer After 40
akosma
90
590k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
110
19k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.4k
Typedesign – Prime Four
hannesfritz
42
2.7k
Designing for Performance
lara
610
69k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
283
13k
Adopting Sorbet at Scale
ufuk
77
9.5k
Transcript
クックパッドiOSアプリのトップ 画面を リニューアルした話 レシピ事業開発部 赤松 祐希
自己紹介 • 赤松 祐希 @ukstudio • レシピ事業開発部 サービスエンジニア リンググループ •
Webアプリケーションエンジニア ◦ Ruby on Railsが主戦場 • 最近ゲーミングPCを買って VALORANTというFPSをはじめました
iOSアプリのリニューアル
2月末にiOSアプリをリニューアル • クックパッドではかなり大きいプロジェクト • 2019年の春〜夏からプロジェクト始動 ◦ 3段階に分けて順次リリース ◦ 3段階目のリリースが2020年2月末 •
チーム規模は大体20〜30人ぐらい ◦ (Slackのグループメンション調べ)
3タブ構成に • アイデアタブ ◦ 料理の楽しさをクックパッドから発信 する記事型コンテンツ • さがすタブ ◦ レシピ検索
◦ ハッシュタグ検索 ◦ etc • きろくタブ ◦ レシピ投稿 ◦ クリップ、レパートリー、料理きろく ◦ etc
つくれぽリニューアル • レシピ作者への感謝を送るものか ら、検索ユーザーへレシピをおす すめするものへ 出典: 13年続いた「つくれぽ」をリニューアルした話 https://note.com/misaaa09/n/nff84d4193447
毎日の料理を楽しみにする • 人気順で時短・簡単な美味しいレシピを見つけることができるようになっ てきた • でもクックパッドにあるレシピの中には他にももっと毎日の料理を楽しくし てくれるようなものがたくさんある • そういった人気順では見つかりにくいレシピとの出会いや、楽しみをどう 繋げるかというところから、体験を捉え直して設計しなおしたのが今回の
リニューアル
アイデアタブの実装
全体図 idea-backendと実際に呼んでないけど説明の都合上そう呼ぶ
全体図 • ios-cookpad <-> Orcha <-> idea-backend 間はREST APIで通信 ◦
最近は内部的にgRPCを使うことが多いがここでは使っていない ◦ 最初はOrchaを通さずにやり取りしていたため ▪ 今ならgRPCを採用したと思う • Orchaでは広告の差し込みとかが行なわれてる ◦ 今日は話しません • スタッフがMarkdownを入稿し、それをJSONに変換したものを idea-backendは返している • Pantryと呼ばれるAPIから記事に表示するつくれぽやレシピの情報を取得
記事画面はネイティブ実装 • Markdownを入稿する関係上、HTMLを 表示できた方が都合がいいため WebViewも検討はした ◦ WebViewもハマりどころが多いた め、辞めた方がいいとアプリエンジニ ア交えて判断 •
そのため、MarkdownからHTMLではなく JSONを出力する仕組みを作る必要があ る ◦ 右が実際のAPIレスポンスの例
各コンポーネントのJSONの構造を決める • H1やH2のような見出しひとつとってもどういう構造のJSON にするか決める必要がある ◦ アプリエンジニアとひたすら詰める • インライン要素(太字とか)が結構厄介 ◦ リリーススケジュールも有り今回は仕様からドロップ
MarkdownをJSONに変換 • idea-backendはRailsアプリケーション(ただ しv4…)なのでMarkdownのパースにRuby製 のライブラリが使える • 今回はKramdown( https://github.com/gettalong/kramdown )を採用 •
Kramdownには中間形式をHTML以外にも アウトプットする仕組みがあるのでそれを用 いてHashに変換
レシピやつくれぽを表示したいという要件 • 当然そんな仕組みや記法はMarkdownにはない • スタッフが「ここにレシピカードを表示する」というの をMarkdown上で指定できるなにかを考える必要が ある
独自記法の実装 • 右記のような独自記法を実装す る • レシピの例で言えばIDと表示形式 を指定 ◦ 他にも様々なコンテンツ用の 記法があるが、基本的な仕組
みは同じ
Kramdownのdefine_parser • Kramdownのdefine_parserを使うと「ある 正規表現にマッチした行は〜として扱う」的 なことができる • {xxxx:xxxx〜 を独自タグとして扱う ◦ convertメソッド内でマッチした文字列
に応じて適切な構造のHashに変換 ◦ レシピIDからレシピ情報をPantryから 取得といったこともこのメソッドで
idea-backend、負荷試験で無事死亡 • 今回大きいリニューアルということもあり、リリース100%公開前にSREの協 力のもと負荷試験が行なわれた • その際にidea-backendが指定の負荷に耐えきれず死亡
Read-write splitting • idea-backendは新規アプリではなく、元々あったクックパッドニュースのアプ リケーションに手を入れている • DBはAuroraを使っており、ReaderとWriterも用意されてあったがアプリケー ションからはなぜか全部Writerを見ていた… • 幸いアイデアタブからは読み込みのクエリしか呼ばれず、書き込みが必要
な入稿画面は別アプリとしてデプロイされている ◦ 接続先のDBは環境変数で指定されているので、それぞれをReaderと Writerに指定することで解決 ◦ 本来はRails6の複数DB機能などをちゃんと使う方がいいと思います
キャッシュの導入 • 実は正確にはR/W splitting導入してたけど負荷試験に耐えられなかった • リリースも近かったため、(渋々)キャッシュを導入 • クックパッドによる記事コンテンツのため更新頻度は高くないのでキャッシュ のメリットは大きい •
キャッシュ自体はオーソドックスにRails.cache(memcached)で対応 ◦ DBのアクセス、PantryへのAPIリクエスト、Markdownのパースなどま るっと省略できるようになった • 無事負荷試験をクリア
まとめ • iOSアプリのリニューアルの概要について話しました ◦ まだまだ完成ではないので引き続き頑張っていきます! • アイデアタブの実装について話しました ◦ MarkdownをiOSでレンダリングしたい時の参考にどうぞ (あるのか?)
◦ 負荷試験はやったほうがいいぞ!