础奥厂と搁别补肠迟で始める厂丑辞辫颈蹿测アプリ开発
?
1 like?3,883 views
クラスメソッド株式会社、Shopify Japan株式会社共催イベント登壇資料 https://dev.classmethod.jp/news/201217-shopify-webinar/
础奥厂と搁别补肠迟で始める厂丑辞辫颈蹿测アプリ开発
- 1. AWS と React で始める Shopify アプリ開発 #Shopifyjpmeetup 2020/12/17 DX企画 倉澤 孝明 NRI digital, Ltd.
- 2. 1Copyright （C） NRI digital, Ltd. All rights reserved. 自己紹介 倉澤 孝明 NRI digital, Ltd. Agile Engineer ? アジャイル開発?デザイン思考を得意とするエンジニア。 ? 通信キャリア、保険、広告代理店、不動産、鉄道など 幅広い業界のシステム企画?設計?開発に従事。 ? 近年はデジタルマーケティング, EC, IoT を中心にクライアントの デジタル事業の立ち上げを支援。
- 3. 2Copyright （C） NRI digital, Ltd. All rights reserved. 本日お話すること ?マルチチャネルコマースプラットフォーム Shopify の特徴 ?Shopify アプリとは ?AWS 上で React を使って Shopify アプリを開発する方法
- 4. 3Copyright （C） NRI digital, Ltd. All rights reserved. 野村総合研究所（NRI）について
- 5. 4Copyright （C） NRI digital, Ltd. All rights reserved. NRIデジタルについて 2016年8月に設立された NRIグループの戦略子会社 NRIグループ内外から組織の壁を超えて 集結した多様なプロフェッショナルが ”ワンチーム”で、お客様と共に デジタルによるビジネス変革を推進 多様なプロフェッショナルが集結 新たなテクノロジー領域への挑戦 価値共創型のビジネス創出
- 6. 5Copyright （C） NRI digital, Ltd. All rights reserved. デジタルビジネスに必要なケイパビリティとNRIデジタルの強み 課題設定 解決策の実行 アルゴリズム? モデル構築 仮説設定 データ収集 Data Engineering Data Science Business ビジネスコンサルタント 解決策の導出 システムエンジニア データエンジニア データサイエンティスト
- 7. 6Copyright （C） NRI digital, Ltd. All rights reserved. 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年
- 8. 7Copyright （C） NRI digital, Ltd. All rights reserved. NRIデジタルは2019年より Shopify パートナーとして活動 中小事業者から大手企業まで D2C システム導入?開発?運用を支援 出所）https://www.shopify.jp/partners
- 9. 8Copyright （C） NRI digital, Ltd. All rights reserved. Shopify に関する情報発信 NRI デジタル Tech Blog https://www.nri-digital.jp/tech/ Shopify の概要だけでなく、DX、D2Cというビジネ スのトレンドから、Shopifyを活用したサービス開発 の方式まで様々な情報を発信しています。
- 10. 9Copyright （C） NRI digital, Ltd. All rights reserved. IT技術情報共有サービスサイト Qiita Shopify ランキング１位を獲得 出所） https://qiita.com/tags/shopify（2020年12月時点）
- 11. 10Copyright （C） NRI digital, Ltd. All rights reserved. マルチチャネルコマースプラットフォーム Shopify の特徴
- 12. 11Copyright （C） NRI digital, Ltd. All rights reserved. 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/
- 13. 12Copyright （C） NRI digital, Ltd. All rights reserved. ECに必要な機能をSaaSで提供、堅牢性と柔軟性のあるプラットフォーム Shopifyの特長 EC 基本機能を SaaS 提供 マルチチャネル販売 デザインテンプレートの充実 拡張性が高いプラットフォーム 堅牢で安心安全なインフラ基盤 ? フロント機能：商品ページ、カート、クレジットカード決済、マイページ ? 管理機能：商品管理、注文管理、顧客管理 ? Shopify Webショップ、スマホアプリへの組み込み ? Instagramショップ、自社メディアへのカートボタン掲載、POS ? デザインテーマが豊富に準備されている ? フロントと管理機能が分離しており、デザイナーとの分業が可能 ? ほぼ全機能が API 提供されており、拡張開発が容易。 ? 拡張アプリで、会計?在庫?物流の業務ロジックを開発することも可能。 ? PCIDSS / ISO27001 対応しておりセキュア。各種決済機能を提供。 ? 急激なトラフィック増も SaaS のため利用者はインフラ性能を考慮不要。
- 14. 13Copyright （C） NRI digital, Ltd. All rights reserved. マルチチャネルでの販売、効率的なバックオフィス業務が可能 Shopifyの特長 出所）Shopify 提供資料より NRIデジタル作成
- 15. 14Copyright （C） NRI digital, Ltd. All rights reserved. 豊富なデザインテンテーマで、デザイン性の高い EC を実現 Shopifyの特長 Beauty Home&Furniture Food&Health Fashion 出所）Shopify テーマストアより NRIデジタル作成 https://themes.shopify.com/
- 16. 15Copyright （C） NRI digital, Ltd. All rights reserved. 必要な機能を必要な分アドオンし、独自の EC にアップデートが可能 Shopifyの特長 定期購入 ページデザイン 顧客管理 イベント管理 イベント枠予約?セミナー枠販売まで 商品販売だけでない体験管理 顧客分析やパーソナライズメールの管理までデザインデータやhtml/cssの専門性なくとも ページデザインを可能に 通貨言語 配送 決済バリエーション 拡張アプリ ロジスティクス 用途や重要度に合わせて管理 柔軟なバリエーション 出所）Shopify アプリストアより NRIデジタル作成 https://apps.shopify.com
- 17. 16Copyright （C） NRI digital, Ltd. All rights reserved. ECビジネスを小さく始めて、大きく育てる 最初からEC基本機能は揃っており、カスタマイズ開発も柔軟に可能 Shopifyの特長 カスタマイズ 提供スピード マルチチャネル ランニング コスト Shopify ○ ◎ ◎ ○ スクラッチ ◎ △ ○ △ パッケージ ○ △ △ △ オープンソース ○ △ △ ○ ネットショップ △ ◎ ○ ○
- 18. 17Copyright （C） NRI digital, Ltd. All rights reserved. NRIデジタルの SaaS インテグレーション 複数の SaaS を組み合わせ D2C ビジネスを小さく始めて大きく育てる デジタルマーケティング コマースプラットフォーム アナリティクス CRM?会員管理?CMS
- 19. 18Copyright （C） NRI digital, Ltd. All rights reserved. Shopify アプリとは
- 20. 19Copyright （C） NRI digital, Ltd. All rights reserved. 本日の内容はNRIデジタルテックブログで解説しています Shopify アプリとは https://github.com/t-kurasawa/shopify_dev_templatehttps://www.nri-digital.jp/tech/20200526-2059/
- 21. 20Copyright （C） NRI digital, Ltd. All rights reserved. 最終的なアーキテクチャスタック Shopify アプリとは 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
- 22. 21Copyright （C） NRI digital, Ltd. All rights reserved. Shopify はアプリとテーマでカスタマイズ開発を行う Shopify アプリとは アプリ （機能） テーマ （デザイン）
- 23. 22Copyright （C） NRI digital, Ltd. All rights reserved. アプリをインストールすると、管理画面内にアプリの画面が表示される Shopify アプリとは
- 24. 23Copyright （C） NRI digital, Ltd. All rights reserved. API で商品?注文?顧客のデータを連携して、 ショップオリジナルのEC機能を追加するための拡張手段 Shopify アプリとは Shopify外のWebサーバーで アプリが動く アプリは何で開発しても良い
- 25. 24Copyright （C） NRI digital, Ltd. All rights reserved. 公式が提供している “Shopify App CLI” を利用すると Heroku 上に Node.js / Rails を使って Shopify アプリを提供可能 Shopify アプリとは 出所）https://www.nri-digital.jp/tech/20200525-2042/
- 26. 25Copyright （C） NRI digital, Ltd. All rights reserved. API で構成されるマイクロサービスアーキテクチャ Shopify アプリとは 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 ユーザー バックオフィス
- 27. 26Copyright （C） NRI digital, Ltd. All rights reserved. Shopify の画面構成とデータ構造を MVC モデルに当てはめると Shopify アプリとは テーマ リキッドView Controller Model ショップ画面 管理画面 アプリ Javascript 自社 API データ Store Front API Shopify データ モデル 自社 API データ Store Front API リキッド Javascript アプリ HTML/CSS アプリ Javascript 自社 API データ Admin API 管理画面アプリ HTML/CSS
- 28. 27Copyright （C） NRI digital, Ltd. All rights reserved. AWS 上で React を使って Shopify アプリを開発する方法
- 29. 28Copyright （C） NRI digital, Ltd. All rights reserved. 本日ご説明する Shopify アプリのフロントエンドとバックエンドの構成 Shopify アプリ開発 フロントエンド （react-amplified） React を Amplify Hosting を使い S3 + Cloudfront 構成でデプロイします バックエンド （api-serverless） Node.js を Serverless Framework を使い API Gateway – Lambda – DynamoDB 構成でデプロイします
- 30. 29Copyright （C） NRI digital, Ltd. All rights reserved. フロントエンド：React アプリを Amplify でホスティングする Shopify アプリ開発 ?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/
- 31. 30Copyright （C） NRI digital, Ltd. All rights reserved. バックエンド：Serverless Framework でバックエンド API を構築 Shopify アプリ開発 ?Node.js でバックエンド API を開発 ?Serverless Framework でデプロイ ? yarn install ? serverless deploy ?テンプレートソースコードは以下を参照 ? shopify_dev_template/app/api-serverless/ 出所）https://dev.classmethod.jp/articles/serverless-first-serverlessframework/
- 32. 31Copyright （C） NRI digital, Ltd. All rights reserved. Shopify アプリ（管理画面）の構成 Shopify アプリ開発 管理画面 アプリ Javascript 自社 API データ Admin API 管理画面アプリ HTML/CSS フロントエンド （react-amplified） React を Amplify Hosting を使い S3 + Cloudfront 構成でデプロイします バックエンド （api-serverless） Node.js を Serverless Framework を使い API Gateway – Lambda – DynamoDB 構成でデプロイします
- 33. 32Copyright （C） NRI digital, Ltd. All rights reserved. Shopify アプリ（管理画面）の構成 Shopify アプリ開発 管理画面 アプリ Javascript 自社 API データ Admin API 管理画面アプリ HTML/CSS
- 34. 33Copyright （C） NRI digital, Ltd. All rights reserved. Shopify アプリ（管理画面）の構成 Shopify アプリ開発 管理画面 アプリ Javascript 自社 API データ Admin API 管理画面アプリ HTML/CSS フロントエンド （react-amplified） React を Amplify Hosting を使い S3 + Cloudfront 構成でデプロイします。 バックエンド （api-serverless） Node.js を Serverless Framework を使い API Gateway – Lambda – DynamoDB 構成でデプロイします 通常の Web 開発と同じ
- 35. 34Copyright （C） NRI digital, Ltd. All rights reserved. アプリをインストールし、アクセストークンを元に Shopify API を呼び出す Shopify アプリ開発 管理画面 アプリ Javascript 自社 API データ Admin API 管理画面アプリ HTML/CSS アプリを入れるショップ 開発するアプリ Shopify API Authorization Code Grant のフローに準拠
- 36. 35Copyright （C） NRI digital, Ltd. All rights reserved. Shopify アプリをインストールし、アクセストークンを元に Shopify API を呼び出す Shopify アプリ開発 管理画面 アプリ Javascript 自社 API データ Admin API 管理画面アプリ HTML/CSS フロントエンド（react-amplified） バックエンド（api-serverless） ① /auth ② /oauth/authorize ③ /callback ④ /oauth ⑥ /products Admin API ⑤ /oauth/access_token
- 37. 36Copyright （C） NRI digital, Ltd. All rights reserved. Step 1: Get client credentials Shopify アプリ開発 ?アプリ管理＞アプリを作成する ?公開アプリ?カスタムアプリを選択 ?アプリURLとリダイレクトURLを登録 ? アプリURL（/auth） ? ショップがアプリをインストールするためのリンク Shopify の認証を行う ? ホワイトリストに登録されたリダイレクトURL（/callback） ? Shopify の認証が行われた後に、利用する API の権限等を 確認し、権限を付与した後にリダイレクトされる URL ?権限や API バージョンを設定 ?アプリで利用する API キーとシークレットキーを取得 ※シークレットキーは公開してはいけません
- 38. 37Copyright （C） NRI digital, Ltd. All rights reserved. Step 2: Ask for permission Shopify アプリ開発 ①ショップへアプリをインストールするための リンク（/auth）をクリック ②権限の確認と付与を行う Shopify 画面にて アプリをインストールするボタンをクリック （/oauth/authorize） アプリインストールリンク（/auth） アプリ画面へ（/callback）
- 39. 38Copyright （C） NRI digital, Ltd. All rights reserved. ① /auth：ショップへアプリをインストールするためのリンクの処理 Shopify アプリ開発 ?スコープやリダイレクトURL等を設定し Shopify の /oauth/authorize へリクエストを送信
- 40. 39Copyright （C） NRI digital, Ltd. All rights reserved. ② /oauth/authorize：権限の確認とアプリのインストール Shopify アプリ開発 ?Shopify の管理画面にてアプリのインストールを行う
- 41. 40Copyright （C） NRI digital, Ltd. All rights reserved. Shopify アプリをインストールし、アクセストークンを元に Shopify API を呼び出す Shopify アプリ開発 管理画面 アプリ Javascript 自社 API データ Admin API 管理画面アプリ HTML/CSS フロントエンド（react-amplified） バックエンド（api-serverless） ① /auth ② /oauth/authorize ③ /callback ④ /oauth ⑥ /products Admin API ⑤ /oauth/access_token
- 42. 41Copyright （C） NRI digital, Ltd. All rights reserved. Step 3: Confirm installation Shopify アプリ開発 ?③ /callback ? フロントエンド処理 ?④ /oauth ? バックエンド処理 ?⑤ /oauth/access_token ? アクセストークンを取得 アプリ画面へ（/callback）
- 43. 42Copyright （C） NRI digital, Ltd. All rights reserved. Step 3: Confirm installation Shopify アプリ開発 ?③ /callback ? リダイレクト画面にはURLパラメータとして code, hmac, shop, timestamp が送られてきます ? バックエンドの /oauth へ値を渡します
- 44. 43Copyright （C） NRI digital, Ltd. All rights reserved. Step 3: Confirm installation Shopify アプリ開発 ?④ /oauth ? hmac の検証を行い、不正なリクエストで無いことを 確認します ? 取得した認証コードとAPI キーとシークレットキーを Shopify の /oauth/access_token へ渡します ?⑤ /oauth/access_token ? 正しく処理されるとアクセストークンが返却されます { “access_token“: “sample_access_token“, “scope“: “write_orders,read_customers“ }
- 45. 44Copyright （C） NRI digital, Ltd. All rights reserved. Shopify アプリをインストールし、アクセストークンを元に Shopify API を呼び出す Shopify アプリ開発 管理画面 アプリ Javascript 自社 API データ Admin API 管理画面アプリ HTML/CSS フロントエンド（react-amplified） バックエンド（api-serverless） ① /auth ② /oauth/authorize ③ /callback ④ /oauth ⑥ /products Admin API ⑤ /oauth/access_token
- 46. 45Copyright （C） NRI digital, Ltd. All rights reserved. Step 4: Making authenticated requests Shopify アプリ開発 ?取得したアクセストークンを利用して Shopify Admin API とデータ通信を行います
- 47. 46Copyright （C） NRI digital, Ltd. All rights reserved. ⑥ /products：Shopify の商品APIを呼び出す Shopify アプリ開発 ?アクセストークンを何らかの方法で永続化し、 商品APIを呼び出す際に利用します ?npm install shopify-api-node
- 48. 47Copyright （C） NRI digital, Ltd. All rights reserved. Shopify アプリを AWS 上で動かす Shopify アプリ開発 管理画面 アプリ Javascript 自社 API データ Admin API 管理画面アプリ HTML/CSS
- 49. 48Copyright （C） NRI digital, Ltd. All rights reserved. Shopify アプリを AWS 上で動かす Shopify アプリ開発 管理画面 アプリ Javascript 自社 API データ Admin API 管理画面アプリ HTML/CSS
- 50. 49Copyright （C） NRI digital, Ltd. All rights reserved. Shopify アプリを AWS 上で動かす Shopify アプリ開発 管理画面 アプリ Javascript 自社 API データ Admin API 管理画面アプリ HTML/CSS フロントエンド （react-amplified） React を Amplify Hosting を使い S3 + Cloudfront 構成でデプロイします。 バックエンド （api-serverless） Node.js を Serverless Framework を使い API Gateway – Lambda – DynamoDB 構成でデプロイします
- 51. 50Copyright （C） NRI digital, Ltd. All rights reserved. 最終的なアーキテクチャスタック Shopify アプリ開発 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
- 52. 51Copyright （C） NRI digital, Ltd. All rights reserved. 本日お話したこと ?マルチチャネルコマースプラットフォーム Shopify の特徴 ?Shopify アプリとは ?AWS 上で React を使って Shopify アプリを開発する方法