AWSとReactで始めるShopifyアプリ開発

AWS と React で始める
Shopify アプリ開発
#Shopifyjpmeetup
2020/12/17
DX企画
倉澤孝明
NRI digital, Ltd.

1Copyright （C） NRI digital, Ltd. All rights reserved.
自己紹介
倉澤孝明
NRI digital, Ltd. Agile Engineer
 アジャイル開発・デザイン思考を得意とするエンジニア。
 通信キャリア、保険、広告代理店、不動産、鉄道など
幅広い業界のシステム企画・設計・開発に従事。
 近年はデジタルマーケティング, EC, IoT を中心にクライアントの
デジタル事業の立ち上げを支援。

本日お話すること
マルチチャネルコマースプラットフォーム Shopify の特徴
Shopify アプリとは
AWS 上で React を使って Shopify アプリを開発する方法

野村総合研究所（NRI）について

NRIデジタルについて
2016年8月に設立された
NRIグループの戦略子会社
NRIグループ内外から組織の壁を超えて
集結した多様なプロフェッショナルが
”ワンチーム”で、お客様と共に
デジタルによるビジネス変革を推進
多様なプロフェッショナルが集結
新たなテクノロジー領域への挑戦
価値共創型のビジネス創出

デジタルビジネスに必要なケイパビリティとNRIデジタルの強み
課題設定解決策の実行
アルゴリズム・
モデル構築
仮説設定
データ収集
Data Engineering Data Science
Business
ビジネスコンサルタント
解決策の導出
システムエンジニア
データエンジニア
データサイエンティスト

NRI は2008年から AWS に取組み、2013年より継続してプレミアパート
ナーに選出されています
AWS Premier コンサルティングパートナー
 2013年AWSパートナー最上位のプレミアコンサルティングパートナーに、
日本で初めて認定
 2020年度8年連続のプレミアコンサルティングパートナーに認定
（日本で２社のみ）
国内最多のプログラム・コンピテンシー取得
 Managed Service Provider：高度/高品質運用を24/365で提供
 Oracle：データベースを初めとするOracle製品群の導入をサポート
 SAP：基幹向けSAPを初めとしたSAP製品のAWS上での実装をサポート
 移行：既存のオンプレミス環境から、AWSへのスムーズな移行を実現。
 セキュリティ：AWSをセキュアに利用するためのソリューション
 金融サービス：金融機関への豊富な導入実績から、国内発認定
Amazon EC2
(仮想サーバサービス)
が米国で開始
AWSの実機評価
R&Dの取り組みを
開始
NRI最初のAWS活用
システムが本番稼動
（米国リージョン）
「AWSソリューション・プロバイダー(SI)」
に認定(当時は20社程度)
AWS東京リージョン
（東京データセンタ）
開設
「AWS Direct Connect
ソリューション・プロバイ
ダー」に認定
(SIerはNRIのみ)
AWS活用を支援する専任ユニット
（AWSビジネスユニット）を設置
「AWSプレミアコンサルティン
グパートナー (SI)」に認定
（国内では2社）
「AWSプレミアコンサルティ
ングパートナー」に8年連続
認定
2006年08月
2008年04月
2010年11月
2011年02月
2011年03月 2012年01月
2013年05月
2019年12月
2012年

NRIデジタルは2019年より Shopify パートナーとして活動
中小事業者から大手企業まで D2C システム導入・開発・運用を支援
出所）https://www.shopify.jp/partners

Shopify に関する情報発信
NRI デジタル Tech Blog
https://www.nri-digital.jp/tech/
Shopify の概要だけでなく、DX、D2Cというビジネ
スのトレンドから、Shopifyを活用したサービス開発
の方式まで様々な情報を発信しています。

IT技術情報共有サービスサイト Qiita Shopify ランキング１位を獲得
出所） https://qiita.com/tags/shopify（2020年12月時点）

マルチチャネルコマースプラットフォーム Shopify の特徴

EC機能を提供する SaaS 、ノーコードで EC サイトの立ち上げが可能
グローバルではD2Cのデファクトスタンダード
Shopifyとは
 2004年にカナダで創業。NYSE上場。世界175か国、100万店舗で利用。
 Shopifyは、多くのユニコーンにより採用D2Cブランドにとっての「デファクトのツール」。
 2017年に日本へ進出し、導入企業やパートナー企業が増加。今後さらなる展開が期待されるプラットフォーム。
出所）NewsPicks「進撃のShopify｜王者アマゾンを脅かす、最強のショッピファイ」
https://newspicks.com/news/4597242/
出所）Shopify HP
https://www.shopify.jp/

ECに必要な機能をSaaSで提供、堅牢性と柔軟性のあるプラットフォーム
Shopifyの特長
EC 基本機能を SaaS 提供
マルチチャネル販売
デザインテンプレートの充実
拡張性が高いプラットフォーム
堅牢で安心安全なインフラ基盤
• フロント機能：商品ページ、カート、クレジットカード決済、マイページ
• 管理機能：商品管理、注文管理、顧客管理
• Shopify Webショップ、スマホアプリへの組み込み
• Instagramショップ、自社メディアへのカートボタン掲載、POS
• デザインテーマが豊富に準備されている
• フロントと管理機能が分離しており、デザイナーとの分業が可能
• ほぼ全機能が API 提供されており、拡張開発が容易。
• 拡張アプリで、会計・在庫・物流の業務ロジックを開発することも可能。
• PCIDSS / ISO27001 対応しておりセキュア。各種決済機能を提供。
• 急激なトラフィック増も SaaS のため利用者はインフラ性能を考慮不要。

マルチチャネルでの販売、効率的なバックオフィス業務が可能
Shopifyの特長
出所）Shopify 提供資料より NRIデジタル作成

豊富なデザインテンテーマで、デザイン性の高い EC を実現
Shopifyの特長
Beauty
Home&Furniture Food&Health
Fashion
出所）Shopify テーマストアより NRIデジタル作成 https://themes.shopify.com/

必要な機能を必要な分アドオンし、独自の EC にアップデートが可能
Shopifyの特長
定期購入
ページデザイン顧客管理
イベント管理
イベント枠予約〜セミナー枠販売まで
商品販売だけでない体験管理
顧客分析やパーソナライズメールの管理までデザインデータやhtml/cssの専門性なくとも
ページデザインを可能に
通貨言語配送
決済バリエーション拡張アプリ
ロジスティクス
用途や重要度に合わせて管理
柔軟なバリエーション
出所）Shopify アプリストアより NRIデジタル作成 https://apps.shopify.com

ECビジネスを小さく始めて、大きく育てる
最初からEC基本機能は揃っており、カスタマイズ開発も柔軟に可能
Shopifyの特長
カスタマイズ提供スピードマルチチャネルランニング
コスト
Shopify ○ ◎ ◎ ○
スクラッチ ◎ △ ○ △
パッケージ ○ △ △ △
オープンソース ○ △ △ ○
ネットショップ △ ◎ ○ ○

NRIデジタルの SaaS インテグレーション
複数の SaaS を組み合わせ D2C ビジネスを小さく始めて大きく育てる
デジタルマーケティングコマースプラットフォーム
アナリティクス
CRM・会員管理・CMS

Shopify アプリとは

本日の内容はNRIデジタルテックブログで解説しています
https://github.com/t-kurasawa/shopify_dev_templatehttps://www.nri-digital.jp/tech/20200526-2059/

最終的なアーキテクチャスタック
AWS Cloud
Management PC
管理者
Shopify
Shopify
テーマ
ショップ画面
Shopify
アプリ
Shopify
API
API Gateway
Request Front Web
Request REST API
Route 53
Resolve DNS
オンラインEC処理
Request REST API
Request Front Web
オンラインEC DB
Shopify
管理画面
Shopify DB
商品/注文/顧客
invoke
access data
access data access data
Request Front Web
Web MobileWeb PC
ユーザー
Amazon Cognito
Request Auth Token
Shopify
アプリ
Amazon Cognito
API Gateway
invoke Request REST API
Request Auth Token
Route 53
Resolve DNS

Shopify はアプリとテーマでカスタマイズ開発を行う
アプリ
（機能）
テーマ
（デザイン）

アプリをインストールすると、管理画面内にアプリの画面が表示される

API で商品・注文・顧客のデータを連携して、
ショップオリジナルのEC機能を追加するための拡張手段
Shopify外のWebサーバーで
アプリが動く
アプリは何で開発しても良い

公式が提供している “Shopify App CLI” を利用すると
Heroku 上に Node.js / Rails を使って Shopify アプリを提供可能
出所）https://www.nri-digital.jp/tech/20200525-2042/

API で構成されるマイクロサービスアーキテクチャ
Shopify
・商品
・注文
・顧客
EC の基本となるデータの
管理（CRUD）を担う
拡張フィールドを json 形式で
持つことも可能
3rd 認証
API
REST
GraphQL
API
REST
GraphQL
3rd Apps
3rd Apps
基幹
システム
Web
PC/スマホ
アプリ
SDK
Instagram
他社Web
3rd Apps
3rd Apps
Web
PC/スマホ
3rd Apps
ユーザーバックオフィス

Shopify の画面構成とデータ構造を MVC モデルに当てはめると
テーマリキッドView
Controller
Model
ショップ画面管理画面
アプリ
Javascript
自社
API
データ
Store
Front
API
Shopify
データ
モデル
自社
API
データ
Store
Front
API
リキッド
Javascript
アプリ
HTML/CSS
アプリ
Javascript
自社 API
データ
Admin API
管理画面アプリ
HTML/CSS

AWS 上で React を使って Shopify アプリを開発する方法

本日ご説明する Shopify アプリのフロントエンドとバックエンドの構成
フロントエンド
（react-amplified）
React を Amplify Hosting を使い
S3 + Cloudfront 構成でデプロイします
バックエンド
（api-serverless）
Node.js を Serverless Framework を使い
API Gateway – Lambda – DynamoDB 構成でデプロイします

フロントエンド：React アプリを Amplify でホスティングする
React でフロントアプリを開発
 npx create-react-app react-amplified
Amplify で S3+Cloudfront にホスティング
 amplify init
 amplify hosting add
 amplify publish
テンプレートソースコードは以下を参照
 shopify_dev_template/app/react-amplified
出所）https://dev.classmethod.jp/articles/reintroduction-aws-amplify/

バックエンド：Serverless Framework でバックエンド API を構築
Node.js でバックエンド API を開発
Serverless Framework でデプロイ
 yarn install
 serverless deploy
テンプレートソースコードは以下を参照
 shopify_dev_template/app/api-serverless/
出所）https://dev.classmethod.jp/articles/serverless-first-serverlessframework/

Shopify アプリ（管理画面）の構成
管理画面
アプリ
Javascript
自社 API
データ
Admin API
HTML/CSS
S3 + Cloudfront 構成でデプロイします
バックエンド

管理画面
アプリ
Javascript
自社 API
データ
Admin API
HTML/CSS

管理画面
アプリ
Javascript
自社 API
データ
Admin API
HTML/CSS
S3 + Cloudfront 構成でデプロイします。
バックエンド
通常の Web 開発と同じ

アプリをインストールし、アクセストークンを元に Shopify API を呼び出す
管理画面
アプリ
Javascript
自社 API
データ
Admin API
HTML/CSS
アプリを入れるショップ開発するアプリ Shopify API
Authorization Code Grant のフローに準拠

Shopify
管理画面
アプリ
Javascript
自社 API
データ
Admin API
HTML/CSS
フロントエンド（react-amplified）
バックエンド（api-serverless）
① /auth
② /oauth/authorize
③ /callback
④ /oauth
⑥ /products Admin API
⑤ /oauth/access_token

Step 1: Get client credentials
アプリ管理＞アプリを作成する
公開アプリ・カスタムアプリを選択
アプリURLとリダイレクトURLを登録
 アプリURL（/auth）
• ショップがアプリをインストールするためのリンク
Shopify の認証を行う
 ホワイトリストに登録されたリダイレクトURL（/callback）
• Shopify の認証が行われた後に、利用する API の権限等を
確認し、権限を付与した後にリダイレクトされる URL
権限や API バージョンを設定
アプリで利用する API キーとシークレットキーを取得
※シークレットキーは公開してはいけません

Step 2: Ask for permission
①ショップへアプリをインストールするための
リンク（/auth）をクリック
②権限の確認と付与を行う Shopify 画面にて
アプリをインストールするボタンをクリック
（/oauth/authorize）
アプリインストールリンク（/auth）
アプリ画面へ（/callback）

① /auth：ショップへアプリをインストールするためのリンクの処理
スコープやリダイレクトURL等を設定し Shopify の /oauth/authorize へリクエストを送信

② /oauth/authorize：権限の確認とアプリのインストール
Shopify の管理画面にてアプリのインストールを行う

Shopify
管理画面
アプリ
Javascript
自社 API
データ
Admin API
HTML/CSS
① /auth
③ /callback
④ /oauth

Step 3: Confirm installation
③ /callback
 フロントエンド処理
④ /oauth
 バックエンド処理
⑤ /oauth/access_token
 アクセストークンを取得
アプリ画面へ（/callback）

③ /callback
 リダイレクト画面にはURLパラメータとして
code, hmac, shop, timestamp が送られてきます
 バックエンドの /oauth へ値を渡します

④ /oauth
 hmac の検証を行い、不正なリクエストで無いことを
確認します
 取得した認証コードとAPI キーとシークレットキーを
Shopify の /oauth/access_token へ渡します
⑤ /oauth/access_token
 正しく処理されるとアクセストークンが返却されます
{ “access_token“: “sample_access_token“,
“scope“: “write_orders,read_customers“ }

Shopify
管理画面
アプリ
Javascript
自社 API
データ
Admin API
HTML/CSS
① /auth
③ /callback
④ /oauth

Step 4: Making authenticated requests
取得したアクセストークンを利用して Shopify Admin API とデータ通信を行います

⑥ /products：Shopify の商品APIを呼び出す
アクセストークンを何らかの方法で永続化し、
商品APIを呼び出す際に利用します
npm install shopify-api-node

Shopify アプリを AWS 上で動かす
管理画面
アプリ
Javascript
自社 API
データ
Admin API
HTML/CSS

管理画面
アプリ
Javascript
自社 API
データ
Admin API
HTML/CSS

管理画面
アプリ
Javascript
自社 API
データ
Admin API
HTML/CSS
S3 + Cloudfront 構成でデプロイします。
バックエンド

最終的なアーキテクチャスタック
AWS Cloud
Management PC
管理者
Shopify
Shopify
テーマ
ショップ画面
Shopify
アプリ
Shopify
API
API Gateway
Request Front Web
Request REST API
Route 53
Resolve DNS
オンラインEC処理
Request REST API
Request Front Web
オンラインEC DB
Shopify
管理画面
Shopify DB
商品/注文/顧客
invoke
access data
access data access data
Request Front Web
Web MobileWeb PC
ユーザー
Amazon Cognito
Request Auth Token
Shopify
アプリ
Amazon Cognito
API Gateway
invoke Request REST API
Request Auth Token
Route 53
Resolve DNS

本日お話したこと
マルチチャネルコマースプラットフォーム Shopify の特徴
Shopify アプリとは
AWS 上で React を使って Shopify アプリを開発する方法

AWSとReactで始めるShopifyアプリ開発

AWSとReactで始めるShopifyアプリ開発

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to AWSとReactで始めるShopifyアプリ開発

Similar to AWSとReactで始めるShopifyアプリ開発 (20)

AWSとReactで始めるShopifyアプリ開発