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
450
「なんでも」をしよう / 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
980
Rails Developers Meetup
ukstudio
6
3.5k
Other Decks in Technology
See All in Technology
20250903_1つのAWSアカウントに複数システムがある環境におけるアクセス制御をABACで実現.pdf
yhana
3
540
新アイテムをどう使っていくか?みんなであーだこーだ言ってみよう / 20250911-rpi-jam-tokyo
akkiesoft
0
140
5分でカオスエンジニアリングを分かった気になろう
pandayumi
0
200
【初心者向け】ローカルLLMの色々な動かし方まとめ
aratako
7
3.4k
Agile PBL at New Grads Trainings
kawaguti
PRO
1
390
AI駆動開発に向けた新しいエンジニアマインドセット
kazue
0
340
S3アクセス制御の設計ポイント
tommy0124
2
190
テストを軸にした生き残り術
kworkdev
PRO
0
190
品質視点から考える組織デザイン/Organizational Design from Quality
mii3king
0
190
AWSで推進するデータマネジメント
kawanago
1
1.3k
会社紹介資料 / Sansan Company Profile
sansan33
PRO
6
380k
Flutterでキャッチしないエラーはどこに行く
taiju59
0
220
Featured
See All Featured
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.1k
The Cult of Friendly URLs
andyhume
79
6.6k
The World Runs on Bad Software
bkeepers
PRO
70
11k
The Invisible Side of Design
smashingmag
301
51k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.4k
Building Better People: How to give real-time feedback that sticks.
wjessup
368
19k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.5k
Agile that works and the tools we love
rasmusluckow
330
21k
Balancing Empowerment & Direction
lara
3
620
How to train your dragon (web standard)
notwaldorf
96
6.2k
Reflections from 52 weeks, 52 projects
jeffersonlam
352
21k
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でレンダリングしたい時の参考にどうぞ (あるのか?)
◦ 負荷試験はやったほうがいいぞ!