Stripe / Next.js / AWSによる Headless WordPress活用法/jp_getshifter_feb-25

Shifter ミートアップ！Shifter Headless ではじめる Headless CMS 入門
https://eventregist.com/e/9c0ZtjzIfRXd

Transcript

1. Stripe / Next.js / AWSによる
   Headless WordPress活用法
   Shifter ミートアップ！Shifter Headless ではじめる Headless CMS 入門
   Hidetaka Okamoto(@hide__dev)
   2022/02/25
   

   View Slide

2. 岡本 秀高 ( @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
   

   View Slide

3. 3
   https://stripe.com/jp
   

   View Slide

4. 4
   決済だけでなく決済周辺の機能もご利用可能
   Stripe のプロダクトスイート
   Payments
   Checkout
   Radar
   Billing
   Connect
   Terminal Issuing
   Payouts
   Capital
   Corporate Card
   Treasury
   オンライン決済
   構築済み決済 UI
   不正使用とリスクの管理
   サブスクリプションの管理
   プラットフォーム向けの決済
   Climate
   Sigma
   Atlas
   収益の一部で CO2 除去に貢献
   カスタムレポート
   Identity
   決済最適化 ビジネスモデル ビジネス運営 送金・資金移動 融資・法人カード発行
   オンライン請求書
   Invoicing
   BaaS
   支出管理
   ビジネスの資金調達
   海外への入金
   カード作成
   Tax
   消費税と VAT の自動計算
   オンライン本人確認
   スタートアップの企業設立
   対面支払い
   （日本未展開）
   

   View Slide

5. 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
   

   View Slide

6. 6
   じゃあ、なにで決済はじめるの？
   Shifterミートアップ
   

   View Slide

7. 有料コンテンツ
   WordPress <> Stripeの例1:
   ※画像は、Stripeの導入事例ではありません
   

   View Slide

8. E-Commerce
   WordPress <> Stripeの例2:
   ※画像は、Stripeの導入事例ではありません
   

   View Slide

9. Marketplace
   WordPress <> Stripeの例3:
   ※画像は、Stripeの導入事例ではありません
   

   View Slide

10. WordPressとStripeの「役割分担」
    10
    WordPress Stripe
    主に取り組むこと ● コンテンツの管理・カスタマイズ
    ● ライター・編集者の管理
    ● 入稿画面の管理・カスタマイズ
    ● サイトの表示管理・カスタマイズ
    ● 価格・商品管理
    ● 顧客情報管理
    ● 安全な決済フローの提供
    任せたくないこと ● 決済に関わる情報の管理
    ● 顧客の個人情報の保持
    ● サイトの表示に関する
    データの管理
    Shifterミートアップ
    

    View Slide

11. WordPressに集約しつつ、決済だけStripe
    11
    Shifterミートアップ
    #JP_GetShifter
    Customer website Writer / Editor
    Frontend Developer
    Store Manager Stripe Backend Developer
    

    View Slide

12. WordPress(とサーバー)に問題が起きた場合は？
    12
    Shifterミートアップ
    #JP_GetShifter
    Customer website Writer / Editor
    Frontend Developer
    Store Manager Stripe Backend Developer
    

    View Slide

13. WordPressが落ちると、全てが停止する
    13
    Shifterミートアップ
    #JP_GetShifter
    Customer website Writer / Editor
    Frontend Developer
    Store Manager Stripe Backend Developer
    

    View Slide

14. 全てがWordPressにある「リスク」
    ● 様々な職種の人が、
    管理画面にアクセスする
    ● 意図しない情報アクセスを
    防ぐための権限設定
    ● 関係者が増えるごとに複雑化
    ● 複雑化による不整合・バグ
    ● WordPressは、
    コンテンツの中身に
    集中させたい
    14
    Shifterミートアップ
    #jamjamjamstack
    

    View Slide

15. 15
    役割分担で、リスクを減らす
    Shifterミートアップ
    

    View Slide

16. WordPressの役割・関係者が多すぎる
    16
    Shifterミートアップ
    #JP_GetShifter
    Customer website Writer / Editor
    Frontend Developer
    Store Manager Stripe Backend Developer
    

    View Slide

17. ので減らす
    17
    Shifterミートアップ
    #JP_GetShifter
    Customer AWS
    (Amplify)
    Writer / Editor
    Frontend Developer
    Store Manager Stripe Backend Developer
    AWS
    (Container)
    WordPress
    Next.js
    

    View Slide

18. より役割が明確に
    18
    役割 関係者
    WordPress ● コンテンツの管理・カスタマイズ
    ● ライター・編集者の管理
    ● ライター
    ● 編集者
    ● 管理者
    AWS ● アプリのインフラ
    ● CDNやバックエンド処理
    ● バックエンド開発者
    ● システム管理者
    Stripe ● 決済に関わる情報の管理
    ● 顧客の個人情報の保持
    ● マーケティング・販売
    ● 商品管理・経理
    Next.js ● サイトの見た目
    ● コンテンツの表示
    ● デザイナー
    ● フロントエンドエンジニア
    Shifterミートアップ
    

    View Slide

19. All in one WordPressと、役割分担システム
    19
    All in one WordPress 役割分担システム
    メリット ● すべてWordPressで管理できる
    ● プラグインがあればノーコード
    ● この手法に慣れた会社や
    製作者はとても多い
    ● 障害時のリスク分散
    ● 部署・役割ごとの権限管理
    ● 自由度の高いシステム開発
    デメリット ● １つの障害で多くが止まる
    ● WP内での複雑な権限管理
    ● カスタマイズに＋αで
    プラグインの仕組み理解が必要
    ● 使うSaaSやアプリが増える
    ● ほぼフルスクラッチ開発
    ● WP界隈では、枯れてない
    Shifterミートアップ
    

    View Slide

20. 20
    Headless WordPressへの道
    Shifterミートアップ
    #JP_GetShifter
    

    View Slide

21. 「WordPressはただのAPI」への意識改革
    ● 「コンテンツの中身」を
    管理する場所がWordPress
    ● テーマやウィジェットは
    基本使わない
    ● WP APIのカスタムで、
    対応は可能
    ● JSとWP両方で
    見た目を管理すると、
    後々運用がつらくなる
    21
    Shifterミートアップ
    #JP_GetShifter
    

    View Slide

22. 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
    

    View Slide

23. 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
    

    View Slide

24. 24
    Stripe <> Next.js + WordPress
    Shifterミートアップ
    

    View Slide

25. NextAuth.js: 認証周りの汎用ライブラリ
    ● 複数の認証プロバイダを
    併用できる
    ● メール / Apple / Google
    Auth0 / etc…
    ● プロバイダごとの方言を
    ライブラリが翻訳してくれる
    ● 実装コードは同じで、
    プロバイダ部分だけ
    案件ごとに差し替えも可能
    https://next-auth.js.org/
    25
    Shifterミートアップ
    #JP_GetShifter
    

    View Slide

26. 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
    

    View Slide

27. use-shopping-cart
    ● 前述のサンプルで一部利用
    ● カート機能のための
    React Hookライブラリ
    ● Checkoutへの遷移もサポート
    ● Hookだけなので、
    JSXは自由にかける
    https://useshoppingcart.com/
    27
    Shifterミートアップ
    #JP_GetShifter
    

    View Slide

28. Headless WordPressでいくかいかないか
    ● 絶対の正解は絶対ない
    ● 分散管理できるため、規模の大きい・関係者の多いPJのほうがよいかも
    ● WordPressではなく、
    Next.js / Gatsbyなどのライブラリとカスタマイズで、見た目を調整する。
    ● StripeやAWS AmplifyなどのSDKをフル活用しやすいので、
    SaaSアプリやマーケットプレイスなど、広告以外のマネタイズを目指す場合にもよい
    ● 初動の早さはNo Headlessが勝ちやすい。
    もし課金を始めるなら、この段階からAmplifyやStripeを使うと、
    Headlessや脱WordPressもやりやすいので、（個人的には）おすすめ。
    28
    Shifterミートアップ
    #JP_GetShifter
    

    View Slide

29. Thanks!
    ● Twitterハッシュタグでシェア
    #JPGetShifter
    ● Twitterアカウント:
    @hide__dev
    @StripeJapan
    ● QiitaでStripeに関する
    開発ブログ更新中
    https://qiita.com/organizations/stripe
    29
    Shifterミートアップ
    

    View Slide