「Famm」とプロダクト開発(AWS活用事例)

by koheiiwamura

Slide 1

Slide 1 text

子育て家族を支えるプラットフォーム「Famm」 &プロダクト開発 Timers-inc

Slide 2

Slide 2 text

自己紹介名前：岩村康平(あだ名：いわむ) 所属：Timers-inc 職種：サーバーサイドエンジニア趣味：B-monster(暗闇ボクササイズ ) 好きなAWSサービス：Route53 Twitter：@k_iwamu

Slide 3

Slide 3 text

Agenda ● Timers ● Famm(事業) ● Fammアプリ ● 出張撮影サービス ● 出張撮影サービスにおけるAWS活用事例

Slide 4

Slide 4 text

Agenda ● Timers ● Famm(事業) ● Fammアプリ ● 出張撮影サービス ● 出張撮影サービスにおけるAWS活用事例

Slide 5

Slide 5 text

About Timers ● 設立：2012年5月11日(7年目) ● 従業員：約40名 ● 所在地：恵比寿 ● URL：https://timers-inc.com ● 主な事業：Famm

Slide 6

Slide 6 text

About Timers Vision: 古き良きを新しく

Slide 7

Slide 7 text

「古き良きを新しく」 ● トレンドの流行り廃りを追従する事業は行わない ● いつの時代も変わらない、人類の普遍的・本質的な価値観に焦点を当てた事業を展開する

Slide 8

Slide 8 text

「古き良きを新しく」 ● トレンドの流行り廃りを追従する事業は行わない => 長く続く事業 ● いつの時代も変わらない、人類の普遍的・本質的な価値観に焦点を当てた事業を展開する => 国や文化を超えたグローバルな展開

Slide 9

Slide 9 text

「古き良きを新しく」人類の普遍的な価値観:「家族」に基づいた事業を行う

Slide 10

Slide 10 text

Agenda ● Timers ● Famm ● Fammアプリ ● 出張撮影サービス ● 出張撮影サービスにおけるAWS活用事例

Slide 11

Slide 11 text

About Famm 「家族の絆を深める」というビジョンのもと子育て家族の生活を支えるアプリ & 関連事業のブランド

Slide 12

Slide 12 text

Fammの事業グループ出張撮影サービスママ専用スクール Fammアプリ無料撮影会オリジナル商品

Slide 13

Slide 13 text

Fammの事業グループ出張撮影サービスママ専用スクール Fammアプリ無料撮影会オリジナル商品アプリを中心としながら複数の事業を展開し子育て家族の生活を豊かにしていくプラットフォーム

Slide 14

Slide 14 text

各家族のライフステージに応じたサービスを継続して提供する Fammのこれから Famm共通ID基盤金融サービス育児商品教育人材サービス写真イベントキャリアユーザーID メールアドレス Account Marketingに使えるデータ Data One to One コミュニケーション Marketing

Slide 15

Slide 15 text

Agenda ● About Timers ● Famm ● Fammアプリ ● 出張撮影サービス ● 出張撮影サービスにおけるAWS活用事例

Slide 16

Slide 16 text

Fammの事業グループ出張撮影サービスママ専用スクール Fammアプリ無料撮影会オリジナル商品

Slide 17

Slide 17 text

● 子供の写真・動画を無制限でアップロード、家族や親戚間で簡単に共有できる、子育て家族用の写真・動画共有アプリ ● 写真を使ってオリジナル商品を作り注文することができる(カレンダー、アルバム、バースデーボード etc…) オリジナル商品注文 Fammアプリ写真アップロード

Slide 18

Slide 18 text

Fammアプリの機能例アルバム機能カレンダー機能 DVD機能

Slide 19

Slide 19 text

Fammアプリ両親義両親写真をアップ毎月カレンダー送付ありがとう! 嬉しい!

Slide 20

Slide 20 text

Fammアプリの実績 ● 子育てママを中心に会員数120万人を突破 ● 写真の総アップロード枚数は1億枚以上 ● 売上はアプリでの購買を中心に成長中。前年比200%達成

Slide 21

Slide 21 text

Agenda ● Timers ● Famm ● Fammアプリ ● 出張撮影サービス ● 出張撮影サービスにおけるAWS活用事例

Slide 22

Slide 22 text

Fammの事業グループ出張撮影サービスママ専用スクール Fammアプリ無料撮影会オリジナル商品

Slide 23

Slide 23 text

出張撮影サービス ● ¥19800~撮影可能 ● 全国各地のプロカメラマンが登録 ● お宮参り、七五三など、ジャンルが豊富 ● カットは75枚以上子どもの成長とともに訪れる行事にプロのカメラマンが出張して撮影

Slide 24

Slide 24 text

出張撮影サービスのフロー検索ユーザープロフィール設定カメラマンチャット撮影マッチング予約

Slide 25

Slide 25 text

出張撮影サービスのUI/UX向上 ● ユーザー行動の調査・SEO ● ユーザー目線でのQA

Slide 26

Slide 26 text

ユーザー動向の調査・SEO ● Google Tag Manager を利用 ○ ユーザーの操作や離脱率などを調査 ● LPを複数設置し、導線を増やす ○ SEOに強いfammのドメインを利用し、 fammドメイン配下に設置 ○ どのようなアプローチがユーザーに響くのか検証を重ねる snap.famm.us LP famm.us/yyyy LP famm.us/zzzz LP famm.us/xxxx GTM

Slide 27

Slide 27 text

ユーザー目線でのQA 【常時】【今後】【リリース前】【定期】プライベートでも子育てしている方が多いQAチームにレビュー依頼一度社内限定でリリースし、フィードバックをもらう社員のママ友を招いて、実際にユーザーインタビュー Fammアプリのユーザーを出張撮影サービスに誘導

Slide 28

Slide 28 text

Agenda ● About Timers ● Famm ● Fammアプリ ● 出張撮影サービス ● 出張撮影サービスにおけるAWS活用事例 ○ 0-1段階のサービスでの活用例中心

Slide 29

Slide 29 text

出張撮影サービスの開発 AWSのサービスをフル活用し、開発スピードや運用も意識作業内容＼期間 4月 5月 6月 7月 8月 9月~ 技術選定・環境構築開発 QA・修正機能追加・保守運用

Slide 30

Slide 30 text

全体構成

Slide 31

Slide 31 text

AWS 活用事例 ● ECS x Fargate の採用 ● Fargate のコスト削減 ● ECS Task Scheduling でバッチを稼働 ● Cognitoによる認証管理と注意点 ● CloudFront + lambda@edgeでサムネイル変換

Slide 32

Slide 32 text

Slide 33

Slide 33 text

アプリケーションのインフラにECS・Fargateを採用長期的な事業を見込んでいたため、開発初期からプロダクト運用面などを考慮 ECS x Fargateの採用メリット ● コンテナの導入で開発からデプロイまで一貫した環境で行える ● Fargateによってホストサーバーの管理・運用の工数を削減 => よりアプリケーションの開発に集中

Slide 34

Slide 34 text

AWS 活用事例 ● ECS x Fargate の採用 ● Fargate のコスト削減 ○ savings plansの導入 ○ 開発、QA環境の夜間・休日停止バッチ ● ECS Task Scheduling でバッチを稼働 ● Cognitoによる認証管理と注意点 ● CloudFront + lambda@edgeでサムネイル変換

Slide 35

Slide 35 text

Slide 36

Slide 36 text

Savings Plansとは Fargate・EC2の利用料金を最大72%割引で受けられる新しい料金プラン特徴 ● 1年間または3年間にわたって一定の使用量 (金額)にコミットするだけで、割引が適用 ● 従来のリザーブドインスタンス (RI)よりも管理や運用の負荷が軽減 ● Cost Explorerで推奨コミット金額が提示されるので、導入も簡単

Slide 37

Slide 37 text

Savings Plans 時間当たりの利用料金合計期間 (一定利用) 元々の料金

Slide 38

Slide 38 text

Savings Plans 時間当たりの利用料金合計期間 Savings Plans のコミット部分 (割引の金額でコミット ) コミット金額コミット年数支払い方法による

Slide 39

Slide 39 text

Savings Plans 時間当たりの利用料金合計期間 Savings Plans のコミット部分 (割引の金額でコミット ) コミット金額 (Savings Plansでコスト削減される範囲 ) 最大72%

Slide 40

Slide 40 text

Savings Plans と RIの違い項目＼プラン Savings Plans RI 詳細プラン Compute EC2 Instance コンバーティブルスタンダード割引率最大66% 最大72% 最大66% 最大72% 金銭的なコミットメント ◯ ◯ × × どのインスタンスファミリーにも自動適応 ◯ × × × どのインスタンスサイズにも自動適用 ◯ ◯ △ △ どのテナンシーやOSでも割引を自動適用 ◯ ◯ × × Fargate使用量に自動適用 ◯ × × × 全てのリージョンに自動適用 ◯ × × ×

Slide 41

Slide 41 text

コミット金額の推奨 AWSコンソールで推奨金額が提示(Cost Explorer => Savings Plans)

Slide 42

Slide 42 text

Slide 43

Slide 43 text

開発、QA環境の夜間・休日停止バッチ lambdaからAWS APIを通じて、Serviceの必要タスク数を調整

Slide 44

Slide 44 text

Slide 45

Slide 45 text

定期的なバッチはECS Task Schedulingを用いて実装 ECS Task Schedulingでバッチを稼働メリット ● すでにECSクラスタが組まれている場合、導入がとても簡単 ● 実行時間やライブラリ、言語に制限がない ● タスク実行数も決められるので、並列分散処理などにも対応できる

Slide 46

Slide 46 text

Slide 47

Slide 47 text

Cognito導入 ● ユーザー認証機能としてAWS Cognitoを導入 ○ 自前で作るより圧倒的に工数削減・信頼感 ● AWS_SDKをNuxt.jsのプロジェクトにインストール

Slide 48

Slide 48 text

● Cognitoはセッション管理のため三種類のTokenを生成 Cognito x AWS_SDK Token名用途 Id_Token 認証に用いる(期限1時間) Access_token 属性変更(期限1時間) Refresh_token Tokenの更新 ● AWS_SDKは、Tokenをブラウザのローカルストレージに保存

Slide 49

Slide 49 text

Nuxt.js(SSR) SEOを考慮し、Nuxt.js SSRモードを利用。サーバーでHTMLを構築。サーバーからブラウザのローカルストレージを閲覧することができないため、認証が行えない。

Slide 50

Slide 50 text

Cookieに保存して対応 CookieにTokenを保存し、リクエスト時にサーバー側に送信。 Cookieの上限4kbを超えてしまい、 Tokenを保存することができない。 (Refresh_tokenがとても長い)

Slide 51

Slide 51 text

最終構成 ● Cookie: Id_tokenのみ保存 ● DB: Refresh_tokenを保存 ➔ Id_tokenの期限が切れていた場合はDBのRefresh_tokenで更新してセッションを維持する。

Slide 52

Slide 52 text

Slide 53

Slide 53 text

CloudFront + Lambda@edgeで画像リサイズ実態 ● カメラマンプロフィールページで数十枚のポートフォリオ写真を表示 ● JPEGで画素数の高い画像がほとんど課題 ● 画像の表示がとても遅く、 UXが非常に悪い解決策 ● CloudFront + lambda@edgeで画像リサイズ

Slide 54

Slide 54 text

CloudFront + lambda@edge CloudFrontとサーバー間の通信の間に入りLambda関数を利用できる機能

Slide 55

Slide 55 text

CloudFront + lambda@edge CloudFrontとサーバー間の通信の間に入りLambda関数を利用できる機能ユーザー認証ヘッダーをカスタムアクセス先変更リサイズ

Slide 56

Slide 56 text

CloudFront + lambda@edge でリサイズ 1. CloudFrontのドメイン + S3へのPath + サイズ指定のurl-parameterを指定してリクエスト 2. S3の指定のバケットからリクエストの Pathに応じてオブジェクト取得 3. lambda@edgeが起動して、url-parameterに応じて画像をリサイズする 4. CloudFrontでリサイズ後の画像を cacheする parameterに応じて S3の画像をリサイズ

Slide 57

Slide 57 text

CloudFrontで画像のサムネイル変換 ● カメラマンのポートフォリオ画像をリサイズして cacheすることで、写真の表示を早くすることに成功 ● 複数のユーザーが同じカメラマンページを閲覧するので、ヒット率が高く効果的 ● url-parameter(サイズ設定)が異なるとcache ヒットさせない設定もあり、様々なサイズの画像にリサイズしてcacheできる

Slide 58

Slide 58 text

Slide 59

Slide 59 text

全体構成

Slide 60

Slide 60 text

(最後に)Timersで働きたいエンジニア大募集してます

Slide 61

Slide 61 text

技術 ● 言語： Golang, PHP, Node.js, Javascript(Vue.js) ● インフラ： AWS, GCP, Firebase ● 開発フロー：スクラム開発, Github ﬂow ● DevOps/CI： Docker, CircleCI, Fabric ● データ分析：Fluentd, Embulk, Google BigQuery ● 監視：Librato, CloudWatch, Mackerel サーバーレスやマネージドサービスを積極的に導入する文化 ● モバイルアプリのサーバーサイド APIの設計＆開発 ● AWS,GCPを利用したクラウドインフラの構築＆運用 ● DevOps業務（IaC、CI/CD環境の強化） ● ログ分析基盤（データストリーミング）の設計＆開発 ● 大規模写真印刷システムの設計＆開発【業務詳細】【主な技術】

Slide 62

Slide 62 text

自由な働き方 ● 裁量労働制 ○ 自分の仕事に対して時間を費やすのではなく結果を出す ● コアタイムフレックス(10:30~16:30) ○ 私用や勉強会なども気軽に入れられる ● リモートワーク ○ リモートワークでも働きやすいような環境を会社として改善

Slide 63

Slide 63 text

エンジニアとしての成長の支援 ● 技術書籍購入補助 ○ 興味がある本なら気軽に申請して購入できる ● Tech-lunch ○ 昼休みに英語のテクノロジーに関する動画を見ながらランチをする ● 海外カンファレンスの参加推奨 ○ AWS re:Invent への参加

Slide 64

Slide 64 text

AWS re:Invent 2019

Slide 65

Slide 65 text

その他福利厚生 ● ランチ代補助 ○ 社員2人以上のランチで1000円補助 ● キッズ/パートナー誕生日祝い ○ 花束送付、特別休暇 ● 妊活費用補助 ● 恋愛サポート補助 ○ 合コン/街コン費用補助 ● 失恋休暇 ○ 失恋したら特別休暇

Slide 66

Slide 66 text

その他福利厚生 ● ランチ代補助 ○ 社員2人以上のランチで1000円補助 ● キッズ/パートナー誕生日祝い ○ 花束送付、特別休暇 ● 妊活費用補助 ● 恋愛サポート補助 ○ 合コン/街コン費用補助 ● 失恋休暇 ○ 失恋したら特別休暇少しでも興味ある方はご連絡ください！

Slide 67

Slide 67 text

まとめ

Slide 68

Slide 68 text

まとめ ● Timers ● Famm ● Fammアプリ ● 出張撮影サービス ● 出張撮影サービスにおけるAWS活用事例

Slide 69

Slide 69 text

appendix ● Timersコーポレートサイト ○ https://timers-inc.com ● Fammアプリ ○ https://famm.us ● 出張撮影サービス ○ https://snap.famm.us ● Timers Tech Blog ○ https://techblog.timers-inc.com