Xoopsec

94
XOOPS EC Distribution Package Presented By Bluemoon inc. Session #2 2013-4-6

Transcript of Xoopsec

Page 1: Xoopsec

XOOPS ECDistribution Package

Presented By Bluemoon inc.Session #2 2013-4-6

Page 2: Xoopsec

自己紹介

• 有限会社ブルームーン CEO 酒井能克

• Twitter @bluemooninc

• https://www.facebook.com/bluemooninc

• http://www.bluemooninc.jp

• N88-Basic,MASM,Quick-C,MS-C,VB,桐,dBaseIII,MS-Access 2.0 –2013,PHP, JavaScript 等25年間職業プログラマ

• 最近は iPhone/Andriod開発に興味あり。

Page 3: Xoopsec

コンセプト

• シンプルに導入しやすく!os-commerce,zen-cart,ec-cube,magento,uu-cart等色んなオープンソースの経験より

• 磨き込まれたUXの注入ヤフオク、アマゾン、価格.com等のエッセンスを取り入れてデザインしたUX。

• コアは最小限に拡張性は無限に学習コストを最小にするが拡張性は犠牲にしない。

Page 4: Xoopsec

https://www.xoopsec.com

Page 5: Xoopsec

https://github.com/bluemooninc/xoopsec

Page 6: Xoopsec

特徴

• ヤフオク&アマゾンから発想したUX• アマゾンと同様の簡単クレジット決済• スマホ/タブレット自動サイズ調整• メール通知と共にサイト内メッセージも配信• CSVインポート・エクスポート=全テーブル• 動作環境=PHP5.3/MySQL5.5以降• GPL V3 オープンソース・無償ダウンロード• XOOPS Cube V2.2最新コア対応• Legacy モジュール上位互換(機能追加あり)• Facebookログイン

Page 7: Xoopsec

導入ガイダンス

Page 8: Xoopsec

インストール

• html, xoops_trust_path をサーバにアップ

Page 9: Xoopsec

ウィザードの始まり

Page 10: Xoopsec

アクセス権限チェック

Page 11: Xoopsec

データベースの設定

Page 12: Xoopsec

内容を確認

Page 13: Xoopsec

mainfile.php の生成

Page 14: Xoopsec

書込可能フォルダのチェック

Page 15: Xoopsec

設定のチェック

Page 16: Xoopsec

データベースの設定

Page 17: Xoopsec

データベースの存在チェック

Page 18: Xoopsec

データベースの作成とチェック

Page 19: Xoopsec

システムテーブル作成

Page 20: Xoopsec

アプリのインストール

Page 21: Xoopsec

サイトページへログイン

Page 22: Xoopsec

バックヤードへ

Page 23: Xoopsec

ブロックの表示位置調整

Page 24: Xoopsec

デモサイトと同様の画面

Page 25: Xoopsec

カートモジュール基本設定

• 管理者メニューより設定(初期設定有り)

Page 26: Xoopsec

App_userName, App_orderId

アプリケーションのサービス提供スタイルを模索しています。現行ではデモサイトで(仮想で)何か買物をすると広告枠を除去出来ます。

広告枠

Page 27: Xoopsec

クレジット機能のセットアップ

Page 28: Xoopsec

GMO-PGX モジュール

Page 29: Xoopsec

GMO-PG API連携の設定

Page 30: Xoopsec

クレジットカードのテストID取得

https://service.gmo-pg.com/cyllene/entry/trialStart.htm

Page 31: Xoopsec

登録してメールを受信

Page 32: Xoopsec

テスト環境使用の確認

Page 33: Xoopsec

ID/PWをメールで取得

Page 34: Xoopsec

Facebookアプリの登録

サブドメインは入れない。

Page 35: Xoopsec

Facebook認証の設定

• Facebook developers にて作成したアプリケーションの情報を記載

Page 36: Xoopsec

Facebookログイン

Page 37: Xoopsec

Yahoo! ログイン

Page 38: Xoopsec

http://developer.yahoo.co.jp/yconnect/

Page 39: Xoopsec

OpenID / Oauth2

ここはテスト用

Page 40: Xoopsec

ショッピングカートについて

Page 41: Xoopsec

最近チェックした商品

• 非ログイン時はセッションで管理

• ログインしてもセッションを引き継ぐ

• 常に最新のチェック品が左先頭来る

• 左右スライダーでページ切り替え

Page 42: Xoopsec

ブックマークした商品

• 商品詳細の下部の「このページをブックマークする」にチェックして今すぐ更新をクリックするとブロック表示される。

• チェックマークを外せば消える。

Page 43: Xoopsec

カテゴリー

• ヤフオクと同じUXで動くカテゴリーブロック

• カテゴリーの樹形図は無限(Callback with closure 使用=PHP V5.3 以降必須)

Page 44: Xoopsec

商品の検索

• 商品名タイトルとバーコードで検索可能

Page 45: Xoopsec

商品の編集について

• クリックで商品詳細>編集へ

Page 46: Xoopsec

商品の編集

• 編集する>バックステージの編集へ

Page 47: Xoopsec

画像を説明文に追加• 商品説明にも画像の追加が可能

Page 48: Xoopsec

サーバ側での画像管理

Page 49: Xoopsec

商品説明の整形例

Page 50: Xoopsec

新規商品の登録(管理画面)

Page 51: Xoopsec

商品一覧

Page 52: Xoopsec

商品一覧で追加を確認

• 鉛筆アイコンで再編集• ×は削除• その隣は画像ファイル登録• 目のアイコンは表の画面で確認• 販売しない時は、在庫を0にしておきます。

Page 53: Xoopsec

新規登録(フロント画面)

Page 54: Xoopsec

SKUのある商品

SKUを追加すると従来の在庫設定はシステム上、未使用となります。

Page 55: Xoopsec

画像カタログに写真を追加

Page 56: Xoopsec

商品画像一覧表で確認

Page 57: Xoopsec

2枚目の画像を追加

• 無限に追加可能

Page 58: Xoopsec

2枚の画像を登録完了

Page 59: Xoopsec

YouTube動画の追加

Page 60: Xoopsec

YouTubeのIDをセットするだけ11桁の文字列

Page 61: Xoopsec

YouTubeコード入力

Page 62: Xoopsec

表の画面で確認

LPO やメルマガ用

追加した画像の確認

Page 63: Xoopsec

イベント通知の設定1

Page 64: Xoopsec

イベント通知設定2

• 注文があった場合の通知にチェック

• 商品コメントは利用者向け

• ブックマーク設定解除でブロック表示される

Page 65: Xoopsec

注文があった時

• 管理者のメッセージボックスに注文のメッセージが入る。

• ワンクリックでバックヤードで受注管理画面へ

Page 66: Xoopsec

カートに入れてレジへ

Page 67: Xoopsec

注文内容の確認• 配送先を入力して、支払い方法を選択>注文を確定

Page 68: Xoopsec

お届け先を入力

Page 69: Xoopsec

お届け先登録完了

Page 70: Xoopsec

クレジットカードの利用登録

• 全ページ右側のクレジットカード下のボタンをクリック

Page 71: Xoopsec

登録完了

• 既に登録されている場合はワーニング

Page 72: Xoopsec

クレジットカード登録

• GMOペイメントのAPIで登録

Page 73: Xoopsec

注文を確定する

Page 74: Xoopsec

ご注文一覧

• ご注文有り難うございますのメッセージ後遷移先

Page 75: Xoopsec

確認メール

• Bmcart/languages/ja_utf_8/ThankYouForOrder.tpl

メッセージでも補完

Page 76: Xoopsec

足あと(購入履歴)

Page 77: Xoopsec

クレジットの利用履歴

Page 78: Xoopsec

受注管理画面

管理者メニューより注文一覧をクリック

Page 79: Xoopsec

配送情報の入力

Page 80: Xoopsec

クレジット課金

決済実行で課金API実行。日時が入り、決済実行アイコン(鍵)が消える。

Page 81: Xoopsec

商品発送の連絡

Page 82: Xoopsec

発送メール

• Bmcart/languages/ja_utf_8/ShoppingNpw.tpl

Page 83: Xoopsec

CSV入出力

• モジュール名テーブル名毎にCSVを入出力

• エクセルファイルで編集して一括登録可

• テストと本番のデータ入れ替えに最適

Page 84: Xoopsec

B.M.Cart CSV

• ダウンロードするとヘッダ付きCSVをエクセルで編集できる。エクセル編集後のCSVを読み込ませて更新、追加が可能。

Page 85: Xoopsec

Category

• 樹形構造=parent_id

• カテゴリーID=category_id

Page 86: Xoopsec

Item (商品)

• `item_id` int(8) unsigned NOT NULL auto_increment, 商品ID• `category_id` int(8) unsigned NOT NULL, カテゴリID• `uid` int(8) unsigned NOT NULL, 登録者ユーザID• `item_name` varchar(255) NOT NULL, 商品名称• `item_desc` text, 商品説明• `price` decimal(13,2), 商品価格• `shipping_fee` decimal(13,2), 送料• `stock_qty` int(1) unsigned NOT NULL, 在庫数量• `last_update` int(10) unsigned NOT NULL, 最終更新日• `publish_date` int(10) unsigned NOT NULL, 公開日(将来対応予定)• `expire_date` int(10) unsigned NOT NULL, 公開終了日(将来対応予定)

Page 87: Xoopsec

Order

• `order_id` int(8) unsigned NOT NULL auto_increment, 注文番号• `uid` int(8) unsigned NOT NULL, ユーザID• `first_name` varchar(80) NOT NULL, 名• `last_name` varchar(80) NOT NULL, 氏• `zip_code` varchar(10) NOT NULL, 郵便番号• `state` varchar(32) NOT NULL, 都道府県• `address` varchar(80) NOT NULL, 市区町村• `address2` varchar(80) NOT NULL, 番地、建物等• `phone` varchar(12) NOT NULL, 電話番号• `payment_type` tinyint(1) unsigned NOT NULL, 支払い(1:銀行振込、2:カード• `card_order_id` varchar(14), カード側へのオーダーID• `sub_total` decimal(13,2), 商品系• `tax` decimal(13,2),消費税• `shipping_fee` decimal(13,2),送料• `amount` decimal(13,2), 合計• `order_date` int(10) unsigned, 注文日時• `paid_date` int(10) unsigned, 支払日• `shipping_date` int(10) unsigned, 配送日• `shipping_carrier` varchar(32), 配送会社名称• `shipping_number` varchar(24), 配送伝票番号• `shipping_memo` text, 配送に関するメモ• `notify_date` int(10) unsigned, 配送事項送信日時

Page 88: Xoopsec

OrderItems

• `orderItem_id` int(8) unsigned NOT NULL auto_increment, 注文カウントID

• `order_id` int(8) unsigned NOT NULL, 注文ID• `item_id` int(8) unsigned NOT NULL, 商品ID• `price` decimal(13,2),商品価格• `shipping_fee` decimal(13,2),送料• `qty` int(1) unsigned NOT NULL,数量

Page 89: Xoopsec

• 尐々ある

XoopsEC独自の構成

Page 90: Xoopsec

本日リリースした内容まとめ

Page 91: Xoopsec

使ったテーマ

Page 92: Xoopsec

フレームワーク

• Achtungbaby(と呼んでます)– admin = Mojavi のactionです

– App = CakePHPのrewriteルール

– Model = FuelPHPライクなForge

– Dependency Injection ( BearPHP )

• それぞれの好きなとこだけ集めて作りました。

• 注意)app/webrootの.htaccessはサクラ共有サーバでRedirectBase 設定が必要

Page 93: Xoopsec

Dependency Injection

• Setter Injection

Cart

item

itemSku

item_id(商品ID)注入Sku_id(色/サイズ)注入

購買数を注入

Object

Object

Object

TablefetchConcern関数で関心が満たされたチェック

setterInjection関数にobject宛てる

>関心のあるデータだけが注入される

Page 94: Xoopsec

cURL,JSON

• 広告枠の実験

XoopsEC.com

Your Site

App_UserIdApp_OrderId

JSON認証

JSON

コンテンツ

認証無ければコンテンツ

注入