XOOPS EC           Distribution PackagePresented By Bluemoon inc.    Session #2 2013-4-6
自己紹介• 有限会社ブルームーン CEO 酒井能克• Twitter @bluemooninc• https://www.facebook.com/bluemooninc• http://www.bluemooninc.jp• N88-Basi...
コンセプト• シンプルに導入しやすく!  os-commerce,zen-cart,ec-cube,magento,uu-  cart等色んなオープンソースの経験より• 磨き込まれたUXの注入  ヤフオク、アマゾン、価格.com等のエッ  セン...
https://www.xoopsec.com
https://github.com/bluemooninc/xoopsec
特徴•   ヤフオク&アマゾンから発想したUX•   アマゾンと同様の簡単クレジット決済•   スマホ/タブレット自動サイズ調整•   メール通知と共にサイト内メッセージも配信•   CSVインポート・エクスポート=全テーブル•   動作環境=...
導入ガイダンス
インストール• html, xoops_trust_path をサーバにアップ
ウィザードの始まり
アクセス権限チェック
データベースの設定
内容を確認
mainfile.php の生成
書込可能フォルダのチェック
設定のチェック
データベースの設定
データベースの存在チェック
データベースの作成とチェック
システムテーブル作成
アプリのインストール
サイトページへログイン
バックヤードへ
ブロックの表示位置調整
デモサイトと同様の画面
カートモジュール基本設定• 管理者メニューより設定(初期設定有  り)
App_userName, App_orderId                      広告枠アプリケーションのサービス提供スタイルを模索しています。現行ではデモサイトで(仮想で)何か買物をすると広告枠を除去出来ます。
クレジット機能のセットアップ
GMO-PGX モジュール
GMO-PG API連携の設定
クレジットカードのテストID取       得https://service.gmo-pg.com/cyllene/entry/trialStart.htm
登録してメールを受信
テスト環境使用の確認
ID/PWをメールで取得
Facebookアプリの登録           サブドメインは入れな               い。
Facebook認証の設定• Facebook developers にて作成したアプリ  ケーションの情報を記載
Facebookログイン
Yahoo! ログイン
http://developer.yahoo.co.jp/yconnect/
OpenID / Oauth2           ここはテスト              用
ショッピングカートにつ    いて
最近チェックした商品•   非ログイン時はセッションで管理•   ログインしてもセッションを引き継ぐ•   常に最新のチェック品が左先頭来る•   左右スライダーでページ切り替え
ブックマークした商品   • 商品詳細の下部の「この     ページをブックマークす     る」にチェックして今すぐ     更新をクリックするとブ     ロック表示される。   • チェックマークを外せば消     える。
カテゴリー• ヤフオクと同じUXで動くカテゴリーブ  ロック• カテゴリーの樹形図は無限(Callback with  closure 使用=PHP V5.3 以降必須)
商品の検索• 商品名タイトルとバーコードで検索可能
商品の編集について• クリックで商品詳細>編集へ
商品の編集• 編集する>バックステージの編集へ
画像を説明文に追加• 商品説明にも画像の追加が可能
サーバ側での画像管理
商品説明の整形例
新規商品の登録(管理画面)
商品一覧
商品一覧で追加を確認•   鉛筆アイコンで再編集•   ×は削除•   その隣は画像ファイル登録•   目のアイコンは表の画面で確認•   販売しない時は、在庫を0にしておきます。
新規登録(フロント画面)
SKUのある商品SKUを追加すると従来の在庫設定はシステム上、未使用となります。
画像カタログに写真を追加
商品画像一覧表で確認
2枚目の画像を追加• 無限に追加可能
2枚の画像を登録完了
YouTube動画の追加
YouTubeのIDをセットするだけ      11桁の文字      列
YouTubeコード入力
表の画面で確認追加した画像の確認            LPO やメルマガ用
イベント通知の設定1
イベント通知設定2     • 注文があった場       合の通知に       チェック     • 商品コメントは       利用者向け     • ブックマーク設       定解除でブロッ       ク表示される
注文があった時     • 管理者のメッ       セージボック       スに注文の       メッセージが       入る。     • ワンクリック       でバックヤー       ドで受注管理       画面へ
カートに入れてレジへ
注文内容の確認• 配送先を入力して、支払い方法を選択>注文  を確定
お届け先を入力
お届け先登録完了
クレジットカードの利用登録• 全ページ右側のクレジットカード下のボ  タンをクリック
登録完了• 既に登録されている場合はワーニング
クレジットカード登録• GMOペイメントのAPIで登録
注文を確定する
ご注文一覧• ご注文有り難うございますのメッセージ  後遷移先
確認メール   • Bmcart     /languages     /ja_utf_8     /ThankYouForOrder.tpl            メッセージでも補                完
足あと(購入履歴)
クレジットの利用履歴
受注管理画面管理者メニューより注文一覧をクリック
配送情報の入力
クレジット課金    決済実行で課金API実    行。日時が入り、決済実    行アイコン(鍵)が消え    る。
商品発送の連絡
発送メール   • Bmcart     /languages     /ja_utf_8     /ShoppingNpw.tpl
CSV入出力• モジュール名テーブル名毎にCSVを入出力• エクセルファイルで編集して一括登録可• テストと本番のデータ入れ替えに最適
B.M.Cart CSV• ダウンロードするとヘッダ付きCSVをエク  セルで編集できる。エクセル編集後のCSV  を読み込ませて更新、追加が可能。
Category• 樹形構造=parent_id• カテゴリーID=category_id
Item (商品)•   `item_id` int(8) unsigned NOT NULL auto_increment, 商品ID•    `category_id` int(8) unsigned NOT NULL, カテゴリID•  ...
Order•   `order_id` int(8) unsigned NOT NULL auto_increment, 注文番号•    `uid` int(8) unsigned NOT NULL, ユーザID•    `first_nam...
OrderItems• `orderItem_id` int(8) unsigned NOT NULL  auto_increment, 注文カウントID• `order_id` int(8) unsigned NOT NULL, 注文ID• ...
XoopsEC独自の構成• 尐々ある
本日リリースした内容まとめ
使ったテーマ
フレームワーク• Achtungbaby(と呼んでます)  –   admin = Mojavi のactionです  –   App = CakePHPのrewriteルール  –   Model = FuelPHPライクなForge  – ...
Dependency Injection• Setter Injection                Object       item                                           item_id(...
cURL,JSON• 広告枠の実験                  XoopsEC.com                                     認証無ければ                                 ...
Upcoming SlideShare
Loading in …5
×

Xoopsec

1,034 views

Published on

  • Be the first to comment

  • Be the first to like this

Xoopsec

  1. 1. XOOPS EC Distribution PackagePresented By Bluemoon inc. Session #2 2013-4-6
  2. 2. 自己紹介• 有限会社ブルームーン 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開発に興味あり。
  3. 3. コンセプト• シンプルに導入しやすく! os-commerce,zen-cart,ec-cube,magento,uu- cart等色んなオープンソースの経験より• 磨き込まれたUXの注入 ヤフオク、アマゾン、価格.com等のエッ センスを取り入れてデザインしたUX。• コアは最小限に拡張性は無限に 学習コストを最小にするが拡張性は犠牲 にしない。
  4. 4. https://www.xoopsec.com
  5. 5. https://github.com/bluemooninc/xoopsec
  6. 6. 特徴• ヤフオク&アマゾンから発想したUX• アマゾンと同様の簡単クレジット決済• スマホ/タブレット自動サイズ調整• メール通知と共にサイト内メッセージも配信• CSVインポート・エクスポート=全テーブル• 動作環境=PHP5.3/MySQL5.5以降• GPL V3 オープンソース・無償ダウンロード• XOOPS Cube V2.2最新コア対応• Legacy モジュール上位互換(機能追加あり)• Facebookログイン
  7. 7. 導入ガイダンス
  8. 8. インストール• html, xoops_trust_path をサーバにアップ
  9. 9. ウィザードの始まり
  10. 10. アクセス権限チェック
  11. 11. データベースの設定
  12. 12. 内容を確認
  13. 13. mainfile.php の生成
  14. 14. 書込可能フォルダのチェック
  15. 15. 設定のチェック
  16. 16. データベースの設定
  17. 17. データベースの存在チェック
  18. 18. データベースの作成とチェック
  19. 19. システムテーブル作成
  20. 20. アプリのインストール
  21. 21. サイトページへログイン
  22. 22. バックヤードへ
  23. 23. ブロックの表示位置調整
  24. 24. デモサイトと同様の画面
  25. 25. カートモジュール基本設定• 管理者メニューより設定(初期設定有 り)
  26. 26. App_userName, App_orderId 広告枠アプリケーションのサービス提供スタイルを模索しています。現行ではデモサイトで(仮想で)何か買物をすると広告枠を除去出来ます。
  27. 27. クレジット機能のセットアップ
  28. 28. GMO-PGX モジュール
  29. 29. GMO-PG API連携の設定
  30. 30. クレジットカードのテストID取 得https://service.gmo-pg.com/cyllene/entry/trialStart.htm
  31. 31. 登録してメールを受信
  32. 32. テスト環境使用の確認
  33. 33. ID/PWをメールで取得
  34. 34. Facebookアプリの登録 サブドメインは入れな い。
  35. 35. Facebook認証の設定• Facebook developers にて作成したアプリ ケーションの情報を記載
  36. 36. Facebookログイン
  37. 37. Yahoo! ログイン
  38. 38. http://developer.yahoo.co.jp/yconnect/
  39. 39. OpenID / Oauth2 ここはテスト 用
  40. 40. ショッピングカートにつ いて
  41. 41. 最近チェックした商品• 非ログイン時はセッションで管理• ログインしてもセッションを引き継ぐ• 常に最新のチェック品が左先頭来る• 左右スライダーでページ切り替え
  42. 42. ブックマークした商品 • 商品詳細の下部の「この ページをブックマークす る」にチェックして今すぐ 更新をクリックするとブ ロック表示される。 • チェックマークを外せば消 える。
  43. 43. カテゴリー• ヤフオクと同じUXで動くカテゴリーブ ロック• カテゴリーの樹形図は無限(Callback with closure 使用=PHP V5.3 以降必須)
  44. 44. 商品の検索• 商品名タイトルとバーコードで検索可能
  45. 45. 商品の編集について• クリックで商品詳細>編集へ
  46. 46. 商品の編集• 編集する>バックステージの編集へ
  47. 47. 画像を説明文に追加• 商品説明にも画像の追加が可能
  48. 48. サーバ側での画像管理
  49. 49. 商品説明の整形例
  50. 50. 新規商品の登録(管理画面)
  51. 51. 商品一覧
  52. 52. 商品一覧で追加を確認• 鉛筆アイコンで再編集• ×は削除• その隣は画像ファイル登録• 目のアイコンは表の画面で確認• 販売しない時は、在庫を0にしておきます。
  53. 53. 新規登録(フロント画面)
  54. 54. SKUのある商品SKUを追加すると従来の在庫設定はシステム上、未使用となります。
  55. 55. 画像カタログに写真を追加
  56. 56. 商品画像一覧表で確認
  57. 57. 2枚目の画像を追加• 無限に追加可能
  58. 58. 2枚の画像を登録完了
  59. 59. YouTube動画の追加
  60. 60. YouTubeのIDをセットするだけ 11桁の文字 列
  61. 61. YouTubeコード入力
  62. 62. 表の画面で確認追加した画像の確認 LPO やメルマガ用
  63. 63. イベント通知の設定1
  64. 64. イベント通知設定2 • 注文があった場 合の通知に チェック • 商品コメントは 利用者向け • ブックマーク設 定解除でブロッ ク表示される
  65. 65. 注文があった時 • 管理者のメッ セージボック スに注文の メッセージが 入る。 • ワンクリック でバックヤー ドで受注管理 画面へ
  66. 66. カートに入れてレジへ
  67. 67. 注文内容の確認• 配送先を入力して、支払い方法を選択>注文 を確定
  68. 68. お届け先を入力
  69. 69. お届け先登録完了
  70. 70. クレジットカードの利用登録• 全ページ右側のクレジットカード下のボ タンをクリック
  71. 71. 登録完了• 既に登録されている場合はワーニング
  72. 72. クレジットカード登録• GMOペイメントのAPIで登録
  73. 73. 注文を確定する
  74. 74. ご注文一覧• ご注文有り難うございますのメッセージ 後遷移先
  75. 75. 確認メール • Bmcart /languages /ja_utf_8 /ThankYouForOrder.tpl メッセージでも補 完
  76. 76. 足あと(購入履歴)
  77. 77. クレジットの利用履歴
  78. 78. 受注管理画面管理者メニューより注文一覧をクリック
  79. 79. 配送情報の入力
  80. 80. クレジット課金 決済実行で課金API実 行。日時が入り、決済実 行アイコン(鍵)が消え る。
  81. 81. 商品発送の連絡
  82. 82. 発送メール • Bmcart /languages /ja_utf_8 /ShoppingNpw.tpl
  83. 83. CSV入出力• モジュール名テーブル名毎にCSVを入出力• エクセルファイルで編集して一括登録可• テストと本番のデータ入れ替えに最適
  84. 84. B.M.Cart CSV• ダウンロードするとヘッダ付きCSVをエク セルで編集できる。エクセル編集後のCSV を読み込ませて更新、追加が可能。
  85. 85. Category• 樹形構造=parent_id• カテゴリーID=category_id
  86. 86. 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, 公開終了日(将来対応予定)
  87. 87. 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, 配送事項送信日時
  88. 88. 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,数量
  89. 89. XoopsEC独自の構成• 尐々ある
  90. 90. 本日リリースした内容まとめ
  91. 91. 使ったテーマ
  92. 92. フレームワーク• Achtungbaby(と呼んでます) – admin = Mojavi のactionです – App = CakePHPのrewriteルール – Model = FuelPHPライクなForge – Dependency Injection ( BearPHP )• それぞれの好きなとこだけ集 めて作りました。• 注意)app/webrootの.htaccess はサクラ共有サーバで RedirectBase 設定が必要
  93. 93. Dependency Injection• Setter Injection Object item item_id(商品ID)注入 Sku_id(色/サイズ)注入 itemSku Object 購買数を注入 Cart Object setterInjection関 数にobject宛てる >関心のある データだけが注 入される fetchConcern関数で関心 Table が満たされたチェック
  94. 94. cURL,JSON• 広告枠の実験 XoopsEC.com 認証無ければ コンテンツ App_UserId JSON 注入 App_OrderId コン JSON テン 認証 ツ Your Site

×