Skip to main content

PWA Kit と管理ランタイムについて知る

学習の目的

この単元を完了すると、次のことができるようになります。

  • ヘッドレスコマースによってマーチャントが買い物客に後れを取らない俊敏性を得られることを説明する。
  • Salesforce B2C Commerce API を使用してプログレッシブ Web アプリケーション (PWA) キットと管理ランタイムをどのように統合するかを説明する。
  • 管理ランタイムの 3 つの利点を挙げる。
  • B2C Commerce ヘッドレスアプリケーションに関して、Commerce PWA Kit と管理ランタイムがどのようにマーチャントの役に立つかを特定する。

ヘッドレスを使用する理由

ヘッドレスコマースを使用すると、マーチャントは買い物客に後れを取らない俊敏性を得られます。カスタムエクスペリエンスを作成し、あらゆるデバイスまたはアプリケーションにコマースを提供できます。具体的にはどういうものなのでしょうか? ヘッドレスコマースは、フロントエンドのエクスペリエンスレイヤー (ヘッド) がバックエンドのコマースエンジンと分離され、API がその橋渡しをするというものです。この分離によって、フロントエンドとバックエンドの開発チームは、お互いに影響を与えずにそれぞれのアプリケーションに集中できます。

プログレッシブ Web アプリケーション (PWA) キットと管理ランタイムによって B2C Commerce の買い物客向けのヘッドレスソリューションが提供されます。その利点は次のとおりです。  

  • 早く価値を実現できる: ゼロから始める代わりに PWA Kit のプロジェクトテンプレートと Salesforce Commerce API を使用することでより早く立ち上げられます。
  • 柔軟性が高まる: PWA Kit の事前作成済み React コンポーネントをカスタマイズできるのに加えて、ランタイム管理から解放されることでイノベーションとユーザーエクスペリエンスに集中できます。コーディングは JavaScript または TypeScript で行います。
  • 信頼と規模が保証される: パブリッククラウドでの管理ランタイムのアップタイム実績は 99.99% であり、世界中でお客様の成功が実証されているため、信頼と規模を実現できます。

B2C Commerce では、E コマースの目標を達成する各種ツールの柔軟なプラットフォームが提供されます。PWA Kit と管理ランタイムは B2C Commerce API 上に構築されており、フロントエンドのスピード、柔軟性、拡張性を実現するヘッドレスアプローチが可能になります。

B2C Commerce API 上に 管理ランタイム上にあり、さらにその上に PWA Kit があることを示す図。

PWA Kit と管理ランタイムは、すでにお客様から信頼されている B2C Commerce と同じ安定性と信頼性を備えていますが、フロントエンド側で機能します。

プログレッシブ Web アプリケーションキット

メモ

デモ設定で PWA を試用するには、「クイックスタート」の手順に従ってください。

PWA Kit は React を使用してストアフロントを作成するためのフレームワークで、次の機能を含みます。

  • プロジェクトテンプレート。ホームページからチェックアウトまでコア E コマースフローを実装するカスタマイズ可能なストアフロントを含みます。
  • 表示システム。サーバー側とクライアント側の両方で機能し、ハイドレーション (サーバーからクライアントに表示を転送するプロセス) を処理します。
  • ルーティングシステム。Commerce API からのデータをコンポーネントに挿入できるようにします。
  • ユーティリティ関数とスクリプト。定型的な開発作業を自動化します。
  • B2C Commerce APIOpen Commerce API (OCAPI) とのインテグレーション。
  • 基本的なプログレッシブ Web アプリケーション機能のサポート。

プログレッシブ Web アプリケーション

プログレッシブ Web アプリケーションとは、モバイルネイティブなアプリケーションに関連付けられることが多い次のような機能をユーザーエクスペリエンスに備えた Web サイトです。

  • 高速なページの読み込み
  • スムーズな表示と移行
  • オフラインサポート
  • ホーム画面のインストール

プログレッシブと呼ばれる理由は、ユーザーのデバイスやブラウザーで何がサポートされるかに基づいて、機能が一度に 1 つずつ (プログレッシブ、つまり段階的に) 追加されるためです。

PWA は、標準に準拠したブラウザーを使用する任意のデスクトップまたはモバイルデバイスで機能します。

PWA、従来の反応型サイト、ネイティブアプリケーションとそのユースケースの比較を次に示します。


反応型

PWA

ネイティブ

説明

さまざまな画面サイズに合わせて動的に拡大・縮小される Web サイト

反応型でネイティブアプリケーションのようなパフォーマンスと機能を提供する Web サイト

特定のモバイルプラットフォーム (iOS、Android) のソフトウェア開発キットで作成され、オペレーティングシステムによって公開されている機能にアクセスできるアプリケーション

適している状況

従来の Web サイトでニーズが満たされる場合

より高速で魅力あるアプリケーションのようなエクスペリエンスが求められる場合

最もロイヤルティが高い顧客ベースのエンゲージメントを促進することが求められる場合

管理ランタイム

バックエンドから分離されているフロントエンドのアプリケーションでは、ストアフロント運営で E コマースプラットフォームに依存することはできません。そこで管理ランタイムが役立ちます。管理ランタイムを使用すると、フロントエンドアプリケーションのリリース、ホスト、監視を行うインフラストラクチャが提供されます。

  • 市場投入までの時間を短縮する: 高スケールでサーバーレスのパブリッククラウドソリューションを使用して、ヘッドレスストアフロントを運用します。
  • 信頼と拡張性を強化する: アップタイム 99.99% の実績があるソリューションで企業に信頼性を保証し、運用の負荷とストレスを軽減します。
  • 柔軟性を高める: 自由に革新できるカスタマーエクスペリエンスを所有し、バックエンドシステムと連動せずにそのエクスペリエンスを進化させます。

API 接続

B2C Commerce API は高速で、開発者の効率が強化されています。B2C Commerce では重要なコマースサービス (価格設定、プロモーション、検索、Einstein など) が提供され、PWA Kit と管理ランタイムでは Web エクスペリエンスの表示と業務インフラストラクチャが提供されます。

まとめ

このモジュールでは、マーチャントがお客様に後れを取らないようにヘッドレスコマースがどのように役立つかを学習しました。また、PWA Kit と管理ランタイムがフロントエンドとバックエンドの両方で役立ち、高速で柔軟なストアフロント開発がサポートされることを学習しました。

リソース

無料で学習を続けましょう!
続けるにはアカウントにサインアップしてください。
サインアップすると次のような機能が利用できるようになります。
  • 各自のキャリア目標に合わせてパーソナライズされたおすすめが表示される
  • ハンズオン Challenge やテストでスキルを練習できる
  • 進捗状況を追跡して上司と共有できる
  • メンターやキャリアチャンスと繋がることができる