$30 off During Our Annual Pro Sale. View Details »

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

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

More Decks by Hidetaka Okamoto (Stripe)

Other Decks in Technology

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で管理できる
    ● プラグインがあればノーコード
    ● この手法に慣れた会社や
    製作者はとても多い
    ● 障害時のリスク分散
    ● 部署・役割ごとの権限管理
    ● 自由度の高いシステム開発
    デメリット ● 1つの障害で多くが止まる
    ● 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