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
680
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.7k
Cookpad Summer Internship 2019 Day 1 Git
ukstudio
0
9.8k
Cookpad Summer Internship 2019 Day 1 Ruby TypeScript
ukstudio
0
9.7k
sdevtalks.org開発報告 / reporting that sdevtalks.org was launched
ukstudio
0
310
GraphQL on Rails
ukstudio
1
400
「なんでも」をしよう / 2018-12-19 s-dev talks LT
ukstudio
2
500
Rails Developers Meetup 2018 Extreme
ukstudio
0
3.1k
機能追加時における 仮説検証/s-dev-talks-01
ukstudio
0
890
Rails Developers Meetup
ukstudio
6
3.3k
Other Decks in Technology
See All in Technology
Shift-from-React-to-Vue
calm1205
3
1.3k
10分でわかるfreee エンジニア向け会社説明資料
freee
18
520k
生成AIと知識グラフの相互利用に基づく文書解析
koujikozaki
1
140
マネジメント視点でのre:Invent参加 ~もしCEOがre:Inventに行ったら~
kojiasai
0
470
小規模に始めるデータメッシュとデータガバナンスの実践
kimujun
3
590
顧客が本当に必要だったもの - パフォーマンス改善編 / Make what is needed
soudai
24
6.8k
生成AIとAWS CDKで実現! 自社ブログレビューの効率化
ymae
2
330
신뢰할 수 있는 AI 검색 엔진을 만들기 위한 Liner의 여정
huffon
0
350
バクラクにおける可観測性向上の取り組み
yuu26
3
420
よくわからんサービスについての問い合わせが来たときの強い味方 Amazon Q について
kazzpapa3
0
220
オーティファイ会社紹介資料 / Autify Company Deck
autifyhq
9
120k
コンテンツを支える 若手ゲームクリエイターの アートディレクションの事例紹介 / cagamefi-game
cyberagentdevelopers
PRO
1
130
Featured
See All Featured
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
4
290
Designing for humans not robots
tammielis
249
25k
GitHub's CSS Performance
jonrohan
1030
460k
How STYLIGHT went responsive
nonsquared
95
5.2k
Speed Design
sergeychernyshev
24
570
Being A Developer After 40
akosma
86
590k
How to Think Like a Performance Engineer
csswizardry
19
1.1k
Typedesign – Prime Four
hannesfritz
39
2.4k
Building an army of robots
kneath
302
42k
Gamification - CAS2011
davidbonilla
80
5k
Visualization
eitanlees
144
15k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
27
4.2k
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でレンダリングしたい時の参考にどうぞ (あるのか?)
◦ 負荷試験はやったほうがいいぞ!