Upload
ngohuong
View
224
Download
0
Embed Size (px)
Citation preview
Drupal Commerce & Amazon Pay module ハンズオン
Drupal をやさしく学ぶ勉強会 2018 年 11 月
改訂版 2019 年 1 月 28 日
開催日 2018 年 11 月 28 日(水) 19:00-21:30
1
目 次
I. はじめに .................................................................................... 2
Drupal 7&8のコア
Drupal 8 のステータス
トピックス
便利なツールやシステム
デジタルマーケティング資料
次回の勉強会
なんでも質問コーナー
II. Dries さんのブログより ............................................................... 5
III. 今月のモジュール ........................................................................ 6
IV. Drupal Commerce Demo & Amazon Pay ハンズオン ................... 6
V. Drupal Commerce Demo .......................................................... 7
VI. Drupal 8 Commerce 関連情報 .................................................... 9
VII. Drupal Commerce Amazon Pay モジュールのインストー
ル ............................................................................................. 9
Amazon セーラーセントラルの設定
Amazon Pay SDK(PHP)のインストール
Drupal Commerce の Amazon Pay モジュールのインストール
commerce_amazon_lpa 8.x-2.0-beta1 の修正
Commerce 2.x の基本設定
Amazon Pay モジュールの設定
実際の購入フロー
VIII. Drupal 8 Commerce 対応、日本の決済モジュールについて ............ 24
IX. ディスカッション ...................................................................... 25
X. クレジット、謝辞、ライセンス ..................................................... 26
クレジット
謝辞
ライセンス
2
はじめに
Drupal 7&8のコア
11 月 28 日(水) https://www.drupal.org/project/drupal
Drupal 8 のステータス
11 月 28 日(水) https://www.drupal.org/drupal-8.0/get-involved
7 月 31 日(火) Drupal 8 について、 https://www.drupal.org/drupal-8.0/get-involved
3
5 月 30 日
トピックス
Drupal Global Training Day & First time Sprinters 2018 年 12 月 8 日(土)
Global Sprint と Training を一緒に開催することになりました。自分で作成したモジュールやデザインテ
ンプレートなどを Drupal.org サイトにアップロード登録する手順なども学びます。
4
https://cmslabo.doorkeeper.jp/events/81798
ぜひ。ご参加ください。
便利なツールやシステム
さまざま Drupal のコアや拡張モジュール、テーマ、ディストリビューションなどを無料で 24 時間、
AWS クラウドで体験できます。ただし、現在はメンテナンス中止になりました。
http://simplytest.me/
デジタルマーケティング資料
⚫ 中国で急成長するエンタメ感あふれる共同購入サービス 拼多多(ピンドウドウ)
https://www.pinduoduo.com/index.html
EC 市場のダークホースと呼ばれる「拼多多」とは何者なのか?
http://chaitopi.com/index.php/2018/04/25/whats_pinduoduo/
⚫ 買い手もストーリーの当事者
香川県高松市のオリーブ農園オキオリーブです。 世界最高品質の 100%国産エクストラバージンオリ
ーブオイルを作っています。 美しい農園では、カフェ、イベント、スペースレンタル、宿泊もしてい
ます。
https://www.okiolive.com/
5
次回の勉強会
12 月 12 日(水)コンテンツタイプ、Views、ブロック・ユーザー管理の基礎ハンズオン(九州)
12 月 17 日(月)久松町区民館で、内容は未定
なんでも質問コーナー
Drupal や CMS、クラウドなど、ご質問をお受けいたします。
Dries さんのブログより
⚫ Why Drupal's Layout Builder is so powerful and unique
https://dri.es/why-drupal-layout-builder-is-so-unique-and-powerful
6
今月のモジュール
今月はお休みです
Drupal Commerce Demo & Amazon Pay ハンズオン
7
Drupal 8 Commerce の新しい REST インタフェースによる Quickstart 的なデモ版のインストールをハン
ズオンしながら概要を学びます。
REST インタフェースによるショッピングカート
Drupal Commerce をこれから使う方、復習したい方向け、初めて入門コースになります。Drupal 8 向け
の Amazon Pay モジュールのテスト操作しながら、わからないことややりたいこと、疑問点など、ハンズ
オンと Q&A で学まびます。
Drupal Commerce Demo
インストール手順は、以下のページにて
https://github.com/drupalcommerce/demo-project
Composer をインストール
Composer で Commerce 用のデモプロジェクト作成
8
composer create-project drupalcommerce/demo-project demo-commerce --stability dev --no-interaction
インストール後、composer run preview を実行しますが、2018 年 11 月 28 日に作業した際にはエラ
ーが起こりインストールできませんでした。
そこで、Github のソースプログラム(https://github.com/drupalcommerce/demo-
project/archive/master.zip)をダウンロード、解凍して composer run preview を実行しました。
Drupal のデータベースは SQLite に保存されます。
インストール後の画面
ログインは、ユーザーアカウントを新規作成してログインします。この Demo 環境はテスト用で
Administrator アカウントは、セキュリティ上、作成や参照することができません。
Headless Drupal Commerce として使えるように、まずはショッピングカート API から始める
Drupal Commerce Demo の概要とダウンロード
9
RESTful インタフェースでショッピングカート機能
Decoupled shopping cart - Cart API モジュールの概要
ショッピングカートの表示
Commerce Cart Flyout モジュールの概要
Drupal 8 Commerce 関連情報
• Drupal Commerce モジュール
• Commerce Kickstart
• Commerce の各種ドキュメント
• Developer Guide
• GitHub repository
• 動画 : The road to a headless Drupal Commerce future
• 動画 : Decoupling Drupal Commerce Out of the Box
• 動画 : Using Drupal Commerce for rich eCommerce experiences
• Drupal Commerce Amazon Pay モジュール
Drupal Commerce Amazon Pay モジュールのインストール
Amazon セーラーセントラルの設定
10
Amazon のセーラーセントラルに企業登録します。その際に、使用するドメイン名などを設定します。
https://sellercentral.amazon.co.jp
審査終了後に、クライアント ID を取得し、Amazon Marketplace Web Service (MWS)にて API を利用するた
めにアクセスキーを作成します。
Amazon Pay SDK(PHP)のインストール
11
始めに、サーバー側に、Amazon Pay SDK(PHP)を Composer でインストールします。Amazon Pay
SDK(PHP)は GitHub で公開されています。
https://github.com/amzn/amazon-pay-sdk-php?ld=APJPAPADemositeonAPA
Drupal8の Drupal_root で Compoer を使って SDK インストールします。
composer require amzn/amazon-pay-sdk-php
12
composer でインストールインストールされたディレクトリ vendor/amzn/ amazon-pay-sdk-php 以
下を、Drupal 8 の Libraries モジュールの配下 Modules/contrib/libraries/amazon-pay-sdk-php に
コピーします。
Drupal Commerce の Amazon Pay モジュールのインストール
モジュールの情報:Drupal Commerce Amazon Pay モジュール
Commerce モジュールがインストールされた環境に、Amazon Pay モジュールを追加します。
composer require 'drupal/commerce_amazon_lpa:^2.0'
commerce_amazon_lpa 8.x-2.0-beta1 での注意事項:
このバージョンでは、Amazon Pay で Amazon にログインして自動的に支払い処理するフローをサポー
トしております。非同期の支払い処理は開発中です。
13
commerce_amazon_lpa 8.x-2.0-beta1 の修正
日本の Amazon Pay サイトとの連携のために、デフォルトの langcode、などを修整します。
1) Form の Settings.php
DRUPAL_ROOT\modules\contrib\commerce_amazon_lpa\src\Form\Settings.php
207 行目から
if (empty(array_intersect($supported_billing, ['DE', 'GB', 'US', 'JP']))) { <- 追加
$form['merchant_information'][$uuid]['#description'] = $this->t('Sorry, this store does
not support available billing regions.');
continue;
}
$store_country_code = $store->getAddress()->getCountryCode();
$defaults = [
'merchant_id' => '',
'mws_access_key' => '',
'mws_secret_key' => '',
'lwa_client_id' => '',
'region' => $store_country_code == 'GB' ? 'UK' : $store_country_code,
// @todo port default language code mapping.
/* 'langcode' => 'en-US', */ - コメントにして
'langcode' => 'jp-JP', <- 追加
];
247 行目から
$form['merchant_information'][$uuid]['region'] = [
'#type' => 'radios',
'#title' => $this->t('Region'),
'#options' => [
14
'DE' => $this->t('Germany'),
'UK' => $this->t('United Kingdom'),
'US' => $this->t('United States'),
'JP' => $this->t('Japan'), <- 追加
],
258 行目から
$form['merchant_information'][$uuid]['langcode'] = [
'#type' => 'radios',
'#title' => $this->t('Language'),
'#options' => [
'en-US' => $this->t('US English'),
'en-GB' => $this->t('UK English'),
'de-DE' => $this->t('German'),
'fr-FR' => $this->t('French'),
'it-IT' => $this->t('Italian'),
'es-ES' => $this->t('Spanish (Spain)'),
'jp-JP' => $this->t('Japanese'), <- 追加
],
2) Src の AmazonPay.php の編集
Drupal_ROOT\modules\contrib\commerce_amazon_lpa\src\AmazonPay.php
55 行目 platform ID の意味を調査中ですが、とりあえず「出品者トークン」を設定しました。
protected $platformIds = [
'UK' => 'A33DP3YE7OHVLV',
'DE' => 'A1ZBM19RFMXA83',
'US' => 'A294FY3QW7KJ8X',
'JP' => 'A2XXXJ8VDXXXXX', <- 追加
15
];
3) Commerce_amazon_lpa.module で日本の AmazonPay サイトのWidgets.js URL を追加
Amazon Pay を Web サイトに設定するための、Amazon Pay の SDK の設定は、以下のページでご確認
ください。
https://pay.amazon.com/jp/developer/documentation/lpwa/201951870#201951870
16
DRUPAL_ROOT\modules\contrib\commerce_amazon_lpa\commerce_amazon_lpa.module を編
集します。
63 行目から
$widget_js_urls = [
'US' => [
'test' => 'https://static-na.payments-amazon.com/OffAmazonPayments/us/sandbox/js/Widgets.js',
'live' => 'https://static-na.payments-amazon.com/OffAmazonPayments/us/js/Widgets.js',
],
'UK' => [
'test' => 'https://static-eu.payments-amazon.com/OffAmazonPayments/uk/sandbox/lpa/js/Widgets.js',
'live' => 'https://static-eu.payments-amazon.com/OffAmazonPayments/uk/lpa/js/Widgets.js',
],
'DE' => [
'test' => 'https://static-eu.payments-amazon.com/OffAmazonPayments/de/sandbox/lpa/js/Widgets.js',
'live' => 'https://static-eu.payments-amazon.com/OffAmazonPayments/de/lpa/js/Widgets.js',
],
'JP' => [ <- 追加
'test' => 'https://static-fe.payments-amazon.com/OffAmazonPayments/jp/sandbox/lpa/js/Widgets.js',
'live' => 'https://static-fe.payments-amazon.com/OffAmazonPayments/jp/lpa/js/Widgets.js',
],
];
Commerce 2.x の基本設定
Drupal Commerce 2.x の使い方は https://docs.drupalcommerce.org/commerce2/getting-started
にて参考にしてください。 Amazon Pay のテストのために、簡単な製品と支払い処理を設定します。
17
User guide の手順にもとづき、ストアの設定、通貨の設定、商品の設定、受注、税金、支払い、などを設
定します。
Amazon Pay モジュールの設定
モジュールの画面
管理画面 -> Commerce -> Amazon Pay configuration
マーチャント ID、MWS Access Key、MWS Secret Key、LWA Client ID を入力します。
18
その他は、デフォルト設定です。
実際の購入フロー
ショッピングカートの購入手続き画面で、Amazon Pay へのログインボタンが表示さます。
19
Amazon pay のバナーをクリックし、Amazon アカウントへ連携します。
20
Amazon アカウントとパスワードを入力します。もしくは、Amazon アカウントを新規作成も可能です。
ログインすると注文内容を確認します。
アドレス帳が表示されるのは、Drupal Commerce の「Commerce Shipping モジュール」をインスト
ールした場合です。
Commerce Shipping:https://www.drupal.org/project/commerce_shipping
21
もし、配送先住所を追加する場合は、「+新規追加」をクリックします。
22
次に進む「レビューを続ける」をクリックし、購入確認画面になります。
「支払いと購入完了」をクリックします。Amazon と連携し、注文(39 番)が確定しました。
管理画面 -> Commerce -> 注文 で今の購入手続きのプロセスが確認できます。
23
Amazon 側でも注文を確認できます。
「Amazon リファレンス ID」をクリックすると、注文の詳細が確認できます。
24
※Drupal8の管理画面やショップの公開画面で表示される英語テキストやメッセージなどは、管理画面の
「ユーザーインタフェースの翻訳」で可能です。
管理画面 -> 環境設定 -> 地域と言語 -> ユーザーインタフェースの翻訳
Drupal 8 Commerce 対応、日本の決済モジュールについて
Drupal 7 版の Drupal Commerce 対応の日本国内決済モジュールを開発した渡邉隆弘さんによる、
Drupal 8 版の Drupal Commerce 対応の決済モジュール開発ステータスと Drupal Commerce につい
て、お話いただきます。
デモ
⚫ GMO
⚫ Paidy
⚫ Softbank Payment Service
25
ディスカッション
Drupal、WordPress、オープンソースコミュニティ、CMS などの質疑応答
26
クレジット、謝辞、ライセンス
クレジット
このマニュアル作者は、Gennai3株式会社の程田和義です。
お問合せ 電子メール [email protected] 電話 044-220-1588
謝辞
本マニュアル作成は、主に以下のサイトを参考にしました。心より感謝いたします。
出典: Drupal.org simplytest.me
ライセンス
Drupal は Dries Buytaert による登録商標です。その他本マニュアルで使われている製
品および名称については、それぞれの所有者の商標または登録商標です。