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
Stripe / Next.js / AWSによる Headless WordPress活用法...
Search
Hidetaka Okamoto (Stripe)
February 25, 2022
Technology
1
310
Stripe / Next.js / AWSによる Headless WordPress活用法/jp_getshifter_feb-25
Shifter ミートアップ!Shifter Headless ではじめる Headless CMS 入門
https://eventregist.com/e/9c0ZtjzIfRXd
Hidetaka Okamoto (Stripe)
February 25, 2022
Tweet
Share
More Decks by Hidetaka Okamoto (Stripe)
See All by Hidetaka Okamoto (Stripe)
Stripeではじめる Revenue Operations / jp_stripes_okinawa_8
stripehideokamoto
0
200
収益を高めるための Stripeダッシュボード活用術 / jp_stripes_online_7
stripehideokamoto
0
240
No-code SaaS and Full Site Editing / wcasia2023
stripehideokamoto
0
220
コア機能開発に集中するための Stripe Checkout活用法 / jp_stripes_deep_dive_202301
stripehideokamoto
0
350
State of Checkout 2022から見た オンライン決済フローの最適化/jp-stripes-miyzaki-202301
stripehideokamoto
0
99
サブスクリプション決済入門 Stripeでの実装方法と、要件定義時のポイント/okta-stripe-202301
stripehideokamoto
0
120
ノーコード・ローコードツールで サブスク運用を効率化する方法 / JP_Stripes_Osaka_202301
stripehideokamoto
0
60
ビジネスユーザを巻込む Stripeダッシュボード活用法 / jp_stripes_deepdive-202212
stripehideokamoto
0
210
AWSでローコードにはじめる サブスクリプション運用の効率化/aws-startup-tech-meetup-fukuoka-2
stripehideokamoto
0
110
Other Decks in Technology
See All in Technology
忙しい人のためのLangGraph概要まとめ
__ymgc__
1
130
DroidKaigi 2024 たすけて!ViewModel
mhidaka
4
470
難しいから面白い!医薬品×在庫管理ドメインの複雑性と向き合い、プロダクトの成長を支えるための取り組み / Initiatives to Support Product Growth
kakehashi
2
170
Mocking in Rust Applications
taiki45
1
330
四国のあのイベントの〇〇システムを45日間で構築した話 / cloudohenro2024_tachibana
biatunky
0
300
自社開発した大規模言語モデルをどうプロダクションに乗せて運用していくか〜インフラ編〜
pfn
PRO
22
6.5k
より快適なエラーログ監視を目指して
leveragestech
3
930
Estrategias de escalabilidade para projetos web
jessilyneh
2
210
四国クラウドお遍路 2024 in 高知 エンディング
yukataoka
0
170
#Zenoh 完全に理解した 〜組込み純情篇〜
takasehideki
1
480
Oracle Exadata Database Service(Dedicated Infrastructure):サービス概要のご紹介
oracle4engineer
PRO
0
9.5k
The XZ Backdoor Story
fr0gger
0
2.8k
Featured
See All Featured
A better future with KSS
kneath
235
17k
[RailsConf 2023] Rails as a piece of cake
palkan
46
4.6k
Principles of Awesome APIs and How to Build Them.
keavy
125
16k
What's new in Ruby 2.0
geeforr
340
31k
Statistics for Hackers
jakevdp
793
220k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
Large-scale JavaScript Application Architecture
addyosmani
508
110k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
131
32k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.2k
Thoughts on Productivity
jonyablonski
66
4.2k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
27
7.4k
Building Your Own Lightsaber
phodgson
101
6k
Transcript
Stripe / Next.js / AWSによる Headless WordPress活用法 Shifter ミートアップ!Shifter Headless
ではじめる Headless CMS 入門 Hidetaka Okamoto(@hide__dev) 2022/02/25
岡本 秀高 ( @hide__dev ) • Stripe Developer Advocate (ex-developer
in Digitalcube) • JavaScript / TypeScript developer • AWS / Next.js / WordPress / etc… • WordCamp Kyoto 2017 / JP_Stripes Connect 2019 / AWS Samurai 2017 / etc… • 🐈(猫フラご容赦) 2 ジャムジャム!!Jamstack_5 #JP_GetShifter
3 https://stripe.com/jp
4 決済だけでなく決済周辺の機能もご利用可能 Stripe のプロダクトスイート Payments Checkout Radar Billing Connect Terminal
Issuing Payouts Capital Corporate Card Treasury オンライン決済 構築済み決済 UI 不正使用とリスクの管理 サブスクリプションの管理 プラットフォーム向けの決済 Climate Sigma Atlas 収益の一部で CO2 除去に貢献 カスタムレポート Identity 決済最適化 ビジネスモデル ビジネス運営 送金・資金移動 融資・法人カード発行 オンライン請求書 Invoicing BaaS 支出管理 ビジネスの資金調達 海外への入金 カード作成 Tax 消費税と VAT の自動計算 オンライン本人確認 スタートアップの企業設立 対面支払い (日本未展開)
Low Code / No Codeで、決済リンクが作れる 5 Shifterミートアップ #JP_GetShifter const session
= await stripe.checkout.sessions.create({ mode: "payment", success_url: `${req.headers.origin}`, cancel_url: `${req.headers.origin}`, line_items:[{ price: req.body.price_id, quantity: 1 }] }) return session.url
6 じゃあ、なにで決済はじめるの? Shifterミートアップ
有料コンテンツ WordPress <> Stripeの例1: ※画像は、Stripeの導入事例ではありません
E-Commerce WordPress <> Stripeの例2: ※画像は、Stripeの導入事例ではありません
Marketplace WordPress <> Stripeの例3: ※画像は、Stripeの導入事例ではありません
WordPressとStripeの「役割分担」 10 WordPress Stripe 主に取り組むこと • コンテンツの管理・カスタマイズ • ライター・編集者の管理 •
入稿画面の管理・カスタマイズ • サイトの表示管理・カスタマイズ • 価格・商品管理 • 顧客情報管理 • 安全な決済フローの提供 任せたくないこと • 決済に関わる情報の管理 • 顧客の個人情報の保持 • サイトの表示に関する データの管理 Shifterミートアップ
WordPressに集約しつつ、決済だけStripe 11 Shifterミートアップ #JP_GetShifter Customer website Writer / Editor Frontend
Developer Store Manager Stripe Backend Developer
WordPress(とサーバー)に問題が起きた場合は? 12 Shifterミートアップ #JP_GetShifter Customer website Writer / Editor Frontend
Developer Store Manager Stripe Backend Developer
WordPressが落ちると、全てが停止する 13 Shifterミートアップ #JP_GetShifter Customer website Writer / Editor Frontend
Developer Store Manager Stripe Backend Developer
全てがWordPressにある「リスク」 • 様々な職種の人が、 管理画面にアクセスする • 意図しない情報アクセスを 防ぐための権限設定 • 関係者が増えるごとに複雑化 •
複雑化による不整合・バグ • WordPressは、 コンテンツの中身に 集中させたい 14 Shifterミートアップ #jamjamjamstack
15 役割分担で、リスクを減らす Shifterミートアップ
WordPressの役割・関係者が多すぎる 16 Shifterミートアップ #JP_GetShifter Customer website Writer / Editor Frontend
Developer Store Manager Stripe Backend Developer
ので減らす 17 Shifterミートアップ #JP_GetShifter Customer AWS (Amplify) Writer / Editor
Frontend Developer Store Manager Stripe Backend Developer AWS (Container) WordPress Next.js
より役割が明確に 18 役割 関係者 WordPress • コンテンツの管理・カスタマイズ • ライター・編集者の管理 •
ライター • 編集者 • 管理者 AWS • アプリのインフラ • CDNやバックエンド処理 • バックエンド開発者 • システム管理者 Stripe • 決済に関わる情報の管理 • 顧客の個人情報の保持 • マーケティング・販売 • 商品管理・経理 Next.js • サイトの見た目 • コンテンツの表示 • デザイナー • フロントエンドエンジニア Shifterミートアップ
All in one WordPressと、役割分担システム 19 All in one WordPress 役割分担システム
メリット • すべてWordPressで管理できる • プラグインがあればノーコード • この手法に慣れた会社や 製作者はとても多い • 障害時のリスク分散 • 部署・役割ごとの権限管理 • 自由度の高いシステム開発 デメリット • 1つの障害で多くが止まる • WP内での複雑な権限管理 • カスタマイズに+αで プラグインの仕組み理解が必要 • 使うSaaSやアプリが増える • ほぼフルスクラッチ開発 • WP界隈では、枯れてない Shifterミートアップ
20 Headless WordPressへの道 Shifterミートアップ #JP_GetShifter
「WordPressはただのAPI」への意識改革 • 「コンテンツの中身」を 管理する場所がWordPress • テーマやウィジェットは 基本使わない • WP APIのカスタムで、
対応は可能 • JSとWP両方で 見た目を管理すると、 後々運用がつらくなる 21 Shifterミートアップ #JP_GetShifter
export async function getStaticPaths() { // Call an external API
endpoint to get posts const res = await fetch('https://.../posts') const posts = await res.json() // Get the paths we want to pre-render based on posts const paths = posts.map((post) => ({ params: { id: post.id }, })) // We'll pre-render only these paths at build time. // { fallback: false } means other routes should 404. return { paths, fallback: false } } URLのルーティングから設計する • JSフレームワークに WPみたいな柔軟なRouterはない • スクリプトまたはファイルで、 サイトのURL構造を決める • 後から変更するなら、 ファイルまたはコードを変更 22 Shifterミートアップ #JP_GetShifter
import { getNextStaticProps } from '@faustjs/next'; import { client }
from 'client'; export default function Home() { const { usePosts } = client; const posts = usePosts({ first: 6, }); … WP_Postから離れて、WP API/WP GraphQLへ • WP APIまたはWP GraphQL • ネットワーク経由で、 記事データを取得 • APIリクエストを、 自分で書く必要があることも • 今からやるなら、 Faust.jsでHookを使うのが無難 https://faustjs.org/docs/next/ref erence/hooks/usePosts 23 Shifterミートアップ #JP_GetShifter
24 Stripe <> Next.js + WordPress Shifterミートアップ
NextAuth.js: 認証周りの汎用ライブラリ • 複数の認証プロバイダを 併用できる • メール / Apple /
Google Auth0 / etc… • プロバイダごとの方言を ライブラリが翻訳してくれる • 実装コードは同じで、 プロバイダ部分だけ 案件ごとに差し替えも可能 https://next-auth.js.org/ 25 Shifterミートアップ #JP_GetShifter
Next.js Example: with-stripe-typescript • Stripe公式サンプルが Next.js側Examplesに移動した • Checkout / Elements両方に
対応 • カート機能のサンプルもあり • Next.jsでStripe使うなら、 まず試しておきたい https://github.com/vercel/next.js/tr ee/canary/examples/with-stripe-ty pescript 26 Shifterミートアップ #JP_GetShifter
use-shopping-cart • 前述のサンプルで一部利用 • カート機能のための React Hookライブラリ • Checkoutへの遷移もサポート •
Hookだけなので、 JSXは自由にかける https://useshoppingcart.com/ 27 Shifterミートアップ #JP_GetShifter
Headless WordPressでいくかいかないか • 絶対の正解は絶対ない • 分散管理できるため、規模の大きい・関係者の多いPJのほうがよいかも • WordPressではなく、 Next.js /
Gatsbyなどのライブラリとカスタマイズで、見た目を調整する。 • StripeやAWS AmplifyなどのSDKをフル活用しやすいので、 SaaSアプリやマーケットプレイスなど、広告以外のマネタイズを目指す場合にもよい • 初動の早さはNo Headlessが勝ちやすい。 もし課金を始めるなら、この段階からAmplifyやStripeを使うと、 Headlessや脱WordPressもやりやすいので、(個人的には)おすすめ。 28 Shifterミートアップ #JP_GetShifter
Thanks! • Twitterハッシュタグでシェア #JPGetShifter • Twitterアカウント: @hide__dev @StripeJapan • QiitaでStripeに関する
開発ブログ更新中 https://qiita.com/organizations/stripe 29 Shifterミートアップ