Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
カラーミーショップのフリープランを提供開始。と開発の話
kumaki
December 09, 2021
Technology
0
230
カラーミーショップのフリープランを提供開始。と開発の話
https://pepabo.connpass.com/event/231478/
で発表したものです
kumaki
December 09, 2021
Tweet
Share
More Decks by kumaki
See All by kumaki
2021 Web アプリフレームワーク入門_REST API 入門
kumak1
0
850
マーケティング意識したい.pdf
kumak1
0
910
ヘラないバ美肉
kumak1
0
1.1k
できる!GraphQL
kumak1
2
460
Zendesk に見る Web アプリのエッセンス
kumak1
0
1.3k
移設を通して エンジニアが実感したこと
kumak1
2
1.9k
Other Decks in Technology
See All in Technology
toilを解消した話
asumaywy
0
140
jaws-ug-asa-datasync-20220510
hiashisan
0
470
2022年度ロボットフロンティア第1回
ryuichiueda
0
140
New Features in C# 10/11
chack411
0
880
ZOZOTOWNのProduction Readiness Checklistと信頼性向上の取り組み / Improvement the reliability of ZOZOTOWN with Production Readiness Checklist
akitok_
5
1.5k
THETA Xの登場はジオ業界を変えるか?
furuhashilab
0
160
#BabylonJS5 の祭ツイートまとめ Let's take a look at what people create with the latest #BabylonJS5
chomado
0
780
失敗を経験したあなたへ〜建設的なインシデントの振り返りを行うために実践するべきこと〜
nobuakikikuchi
0
110
Research Paper Introduction #98 "NSDI 2022 recap"
cafenero_777
0
200
5分で完全理解するGoのiota
uji
3
2k
OSS ことはじめ
hsbt
3
480
GitHub 엔터프라이즈 어카운트 소개 및 엔터프라이즈 서버 구축 경험
posquit0
1
140
Featured
See All Featured
Stop Working from a Prison Cell
hatefulcrawdad
261
17k
Imperfection Machines: The Place of Print at Facebook
scottboms
253
11k
A designer walks into a library…
pauljervisheath
196
16k
For a Future-Friendly Web
brad_frost
164
7.4k
Web development in the modern age
philhawksworth
197
9.3k
How To Stay Up To Date on Web Technology
chriscoyier
780
250k
Building Better People: How to give real-time feedback that sticks.
wjessup
343
17k
How to train your dragon (web standard)
notwaldorf
57
3.8k
From Idea to $5000 a Month in 5 Months
shpigford
372
44k
Streamline your AJAX requests with AmplifyJS and jQuery
dougneiner
125
8.5k
The Power of CSS Pseudo Elements
geoffreycrofte
46
3.9k
10 Git Anti Patterns You Should be Aware of
lemiorhan
638
52k
Transcript
カラーミーショップの フリープランを提供開始 と開発の話 牧野弘幸 / GMO PEPABO inc. 2021.12.09 Pepabo
Tech Conference #18 1
2 自己紹介 EC事業部 Colorme Customer Experience Team 2014年 中途入社 牧野 弘幸
Makino Hiroyuki 入社してから7年ずっとEC事業部。 外部サービスとの連携まわりの開発を主に担当。 ここ最近はショップオーナー(カラーミー契約者) の運用体 験と売上の向上を目指し奮闘中。 • 趣味 : 3Dアクションゲーム作り・xR・お絵かき • Twitter : @kumak1
3 アジェンダ 1. サービスについて • フリープランとは 2. コードについて • 巨大アプリのコア機能に手をつける
3. リモートでの開発体制について • チームの出力を最大化するには
4 1. セクションタイトル 1. サービスについて
フリープランとは 「ECをはじめてみたい。 けれど売上の予測は立たないので、 ランニングコストは抑えたい。」 をかなえる、 固定費の無いプラン。 5 サービスについて
6 既存プラン(レギュラー) フリープラン どのくらいの売上になるかわからないので まずは無料ではじめて見たい方へ 月10万円以上の売上が見込めるので 決済手数料などのコストを抑えたい方へ サービスについて 管理画面 ショップページ
決済 0円 6.6% + 30円 管理画面 ショップページ 決済 3300円 / 月 3.45% 等
7 既存プラン(レギュラー) フリープラン どのくらいの売上になるかわからないので まずは無料ではじめて見たい方へ 月10万円以上の売上が見込めるので 決済手数料などのコストを抑えたい方へ サービスについて 管理画面 ショップページ
決済 0円 6.6% + 30円 管理画面 ショップページ 決済 3300円 / 月 3.45% 等 フリープランから 既存プランへ変更可能 (事業規模に応じて)
8 サービスについて 「ネットでショップを開く」がゴールではない 売上 = 来訪数 × 客単価 × 購入率
を最大化する ショップオーナー・サードパーティ・決済代行業者・関わる全ての人と成長 “ なめらかな成長を支援する”
9 2. コードについて
コードについて 10 改修前のコード Controller View Model DB
コードについて 11 改修前のコード Controller View Model DB
コードについて 12 改修前のコード Controller View Model DB
コードについて 13 改修前のコード Controller View Model DB
コードについて 14 改修前のコード Controller View Model DB
コードについて 15 改修前のコード Controller View Model DB
コードについて 16 改修前のコード Controller View Model DB 現在プラン
コードについて 17 改修前のコード Controller View Model DB 現在プラン
コードについて 18 改修前のコード Controller View Model DB 現在プラン 利用可能な機能か? 選択フォームの切替
コードについて 19 改修前のコード Controller View Model DB 現在プラン 利用可能な機能か? 選択フォームの切替
コードについて 20 改修前のコード Controller Model DB 現在プラン 利用可能な機能か? 選択フォームの切替 View
コードについて 21 改修前のコード Controller Model DB 現在プラン 利用可能な機能か? 選択フォームの切替 View
コードについて 22 改修前のコード Controller Model DB 現在プラン 利用可能な機能か? 選択フォームの切替 View
Controller Controller Controller Controller Controller Controller Controller Controller Controller Controller Controller Controller Controller Controller Controller Controller Controller Controller Controller Controller Controller Controller Controller
コードについて 23 改修前のコード Controller Model DB プラン情報 利用可能な機能か? 選択フォームの切替 View
Controller Controller 分岐処理が画面の数だけ増えると・・ • 「どのプランがどの機能を使えるか」を確認しにくい • 「機能追加・変更時に漏れがないか」を確認・担保しにくい • テストコードが画面数分必要になる
コードについて 24 • 機能・役割が集約されている • 追加・変更がしやすい • 確認しやすい仕組みを準備する • メンテナンスが容易
• 10年、基本的な構造の改修はされなかった • 変更に耐える構造と覚悟が必要 • 変化を楽しめる • 未来も楽しんで作っていける、 なめらかな成長ができるコードを書こう コードを改修する
Controller コードについて 25 改修後のコード Model DB View Controller Controller Service
各プラン 設定 Repository
Controller コードについて 26 改修後のコード Model DB View Controller Controller Service
各プラン 設定 Repository 現在プラン
Controller コードについて 27 改修後のコード Model DB View Controller Controller Service
Repository 現在プラン
Controller コードについて 28 改修後のコード Model DB View Controller Controller Service
Repository 現在プラン
Controller コードについて 29 改修後のコード Model DB View Controller Controller Service
Repository 利用可能な機能か? 選択フォームの値
Controller コードについて 30 改修後のコード Model DB View Controller Controller Service
Repository 利用可能な機能か? 選択フォームの値 • どのプランでどの機能を使えるか確認しやすい • プラン・機能・画面の追加に強くなった • テストコードの記述が容易
Controller コードについて 31 改修後のコード Model DB View Controller Controller Service
Repository 利用可能な機能か? 選択フォームの値 • どのプランでどの機能を使えるか確認しやすい • プラン・機能・画面の追加に強くなった • テストコードの記述が容易 作業分担が容易に
コードについて 細かな実装方法や知っておくべき概念は、右の本に 書いているので、興味持った方ご一読ください。 所謂レガシーコードからリファクタリングしながら置き換 える手順が詳細に載っています。 https://www.nikkeibp.co.jp/atclpubmkt/book/18/P53540/ 32
フロントの改修 • IE11サポート停止 ◦ ES2015など様々機能が使えるように • Vue.js の導入 ◦ UIのコンポーネント化
◦ 段階的な導入ができる ◦ コンポーネントのテストが容易に • Storybookの導入 ◦ コンポーネントのドキュメント作成が容易に 33 コードについて
フロントの改修 • IE11サポート停止 ◦ ES2015など様々機能が使えるように • Vue.js の導入 ◦ UIのコンポーネント化
◦ 段階的な導入ができる ◦ コンポーネントのテストが容易に • Storybookの導入 ◦ コンポーネントのドキュメント作成が容易に 作業分担が容易に 34 コードについて
35 コードについて アウトプットを観測できる手段(テスト・ドキュメントなど)を増やす 定量的に把握する 上記を繰り返して成果物のレベルを上げる “ 成長するコードをつくる”
3. リモートでの開発体制について 36
37 • リモートワークで気をつけたいこと • 物理出社と比べ、偶発的な接点が少ない • 目標の方向性を合わせる機会が減る • 業務外で遊びづらい交流が減って人となりを知る機会が減る •
期待(予想)する行動と、実際の行動の乖離を避けたい チームの出力を最大化したい リモートでの開発体制について
38 • 雑な交流場所を設ける • Google Meet で入退室自由なルームを常設 • チーム外の人と30分のお茶会(雑談会) •
行動指針を明文化する • CCX Way • ドラッカー風エクササイズ • GitHub Issue Template チームの行動理念をつくる リモートでの開発体制について
リモートでの開発体制について CCX Way • チームの行動指針を明文化 ◦ ユーザーの手間を最小限にしたか? ◦ 利己的なデザインにしていないか? ◦
ユーザーのしたいことを優先する • チーム内では ◦ 機能の仕様策定の礎に • チーム外では ◦ 機能の仕様策定の礎に ▪ 作業依頼をうける際も ◦ どんなチームなのかを説明 39
リモートでの開発体制について ドラッカー風エクササイズ • 自分は何が得意なのか? • どういうふうに仕事するか? • 自分が大切に思う価値は何か? • チームメンバーは自分にどんな成果を期待してい
ると思うか? 質問に全員が答えることで、相互理解の促進と期待 のすりあわせという効果があり、特にプロジェクトの開 始時や新メンバーを迎えるときに効果的であると言わ れています https://tech.pepabo.com/2017/07/07/the-drucker-exercise/ 40
リモートでの開発体制について ドラッカー風エクササイズ ペパボ Edition • 自分は何が得意なのか? • チームメンバーは自分にどんな成果を期待してい ると思うか? • チームメンバーに期待することはなにか?
ペパボ では「期待をすり合わせる」ことを第一として チューニングしている https://tech.pepabo.com/2017/07/07/the-drucker-exercise/ 41
42 ※kumak1の例 リモートでの開発体制について
リモートでの開発体制について GitHub Issue Template • チームにスポット参戦・途中参戦がある ◦ ドメイン知識・技術にも差がある ◦ ストレスなく活躍してもらいたい
• 仕組みで解決 ◦ GitHub Issue Template 43
44 なにが最大の達成目標なのか どんな行動をすればいいのか チーム > 個人 > タスク とブレイクダウンしながら 「いい感じ」を補助する仕組みをつくる
“ 目的と期待を明文化する” リモートでの開発体制について
45 1. セクションタイトル まとめ
まとめ 46 • なめらかな成長を支援する • ビジネスモデルを拡張し、関わる人の幅を広げる • 成長するコードをつくる • 変更を繰り返して成果物のレベルを上げる
• 目的と期待を明文化する • 進むべきベクトルがぶれない
まとめ 47 • なめらかな成長を支援する • ビジネスモデルを拡張し、関わる人の幅を広げる • 成長するコードをつくる • 変更を繰り返して成果物のレベルを上げる
• 目的と期待を明文化する • 進むべきベクトルがぶれない ショップオーナー様 関わる全ての人、 プロダクトと共に、なめらかに成長する
48 Thank You! Thank You! ご静聴ありがとうございました