-   topic   - トピックス

[baserCMS][EC-CUBE]baserCubeを仮想環境で試してみる

2015年08月09日

いつも株式会社ヒニアラタのホームページをご覧いただき、誠にありがとうございます。

先日、株式会社キャッチアップさんから発表された、baserCMS用プラグイン「baserCube」を試してみましたので、ご紹介したいと思います。

market.png

なお、今回は多くの皆さんが手軽に試せるよう、環境はbaserCMSの公式リポジトリに含まれているVagrantfileを使って仮想環境を構築しました。EC-CUBEもその中にインストールしています(詳細は後述しています)。

参考サイト一覧:
EC-CUBE公式サイト
EC-CUBE3公式リポジトリ(GitHub)
株式会社ロックオン(EC-CUBEは株式会社ロックオンの登録商標です)
baserCube公式マーケット
baserCMS公式リポジトリ(GitHub)

baserCMSのインストール

ソースコードの取得

今回はVagrantで仮想環境を構築するため、GitHubの公式リポジトリGitHubの公式リポジトリからzipをダウンロードしてきます。(Gitを日常的に使っている方なら、リポジトリをローカル環境にクローンする方法でも構いません)

down_btn.png

down_tag.png

リポジトリにあるソースコードは、タグを使うことで欲しいバージョンが手に入ります。 今回は最新の3.0.7をダウンロードしました。

Vagrantを利用するには予めVirtualBoxVagrantのインストールが必要ですので、ここから先は環境が整っている事を前提にご説明します。

vagrant up

ダウンロードしてきたzipファイルを解凍し、適当な場所へ設置します(途中に日本語のフォルダ名などがあると、上手くいかない事があるかも知れません)。設置ができたら、フォルダ内に含まれるファイル「Vagrantfile.default」の名前から「.default」を消して「Vagrantfile」にリネームします。

その後、ターミナル(いわゆる“黒い画面”)を開いて、先ほど解凍したフォルダまで移動してください。以下のコマンドを打つと、自動的に環境の構築が始まります。

vagrant up

vagrant_up.png

これによって、OSはもちろん、PHP、MySQL、PostgreSQL、phpMyAdminなどbaserCMSを動かすのに必要なものがインストールされた仮想環境が出来上がります(通信環境によりますが、およそ15分程度かかります)。

ブラウザを立ちあげて、以下のアドレスを打ち込んでください。

  http://192.168.33.10/

install_baser.png

上図のようなインストール画面が表示されます。あとは画面の指示にしたがって進めていきます。なお、この仮想環境ではデータベースのユーザーとパスワードは「root」になっています。インストールの途中に聞かれますので、そのように入力してください。

なお細かいことは、以下の場所に説明がありますので参考にしてください。

  (解凍して出てきたbaserCMSのフォルダ)/vagrant_cookebooks/readme.txt

なおこれらの作業によって、Vagrantで構築された仮想環境とローカルに設置したbaserCMSのフォルダが共有関係になります。 ローカルのファイルを操作すれば、仮想環境も自動で変わります。(仮想)サーバーだからといって、FTPなどを使う必要はありません。 これ以後の作業も同様です。ローカルのbaserCMSフォルダに設置されたEC-CUBE等はそのまま仮想環境にも反映されています。

EC-CUBEのインストール

baserCMSのインストールが終わったら、EC-CUBEをインストールしてみます。今回使用したバージョンは3.0.2です。 EC-CUBEの公式サイトからダウンロードできます。

down_eccube.png

ダウンロードしたファイルを解凍してください。今回は出てきたフォルダを「eccube-3.0.2」という名前にしておきました。 このフォルダを、以下のようになるように設置します。

  (baserCMSの設置フォルダ)/app/webroot/eccube-3.0.2/

設置が完了したら、次にデータベースを作ります。今回はMySQLでインストールすることにします。baserCMSをvagrantで構築した場合、自動でphpMyAdminがインストールされます。以下のURLをブラウザで開いてみてください。

  http://192.168.33.10/phpMyAdmin/index.php

myadmin.png

今回はデータベースの追加で「eccube」という名前のデータベースを用意しました。データベースの名前は何でも結構ですが、後ほどEC-CUBEのインストール時に聞かれますので、メモをしておいてください。

そこまで終わったら、EC-CUBEのインストール画面を開きます。下のURLにアクセスしてみてください。

  http://192.168.33.10/eccube-3.0.2/html/install.php

インストール画面が開くはずですので、画面の指示に従ってインストールを進めてください。

install_eccube.png

全ての設定項目が完了したら、EC-CUBEのインストールは完了です。次にbaserCMS側へ戻り、プラグイン「baserCube」をインストールしていきます。

プラグイン「baserCube」のインストール

ファイルの設置と設定

続いてプラグイン「baserCube」をインストールしていきます。公式マーケットからダウンロードできます。今回使用したバージョンは1.0.0です。

ダウンロードしたファイルを解凍して出てきたフォルダ「BaserCube」を、baserCMSのプラグインフォルダに設定します。 結果的に以下のようになります。

(baserCMSの設置フォルダ)/app/Plugin/BaserCube/

このbaserCubeをインストールする上で大切なのが、事前に設定ファイルを確認しておくことです。適切な設定がなされていないと、インストール画面でEC-CUBEを認識できないなどといったことが発生します(下図)。

error_bc_baser.png

設定ファイルは以下の場所にあります。

(baserCMSの設置フォルダ)/app/Plugin/BaserCube/Config/setting.php

この設定ファイルの16行目付近を見てください。以下のようにEC-CUBEの設置パスを記述する場所があるはずです。 これを先ほどインストールしたEC-CUBEのパスに変更します(今回は結果的に以下のようになりました)。

  'EcConfigPath' => ROOT . DS . 'app' . DS . 'webroot' . DS . 'eccube-3.0.2',

続いて、そのすぐ下にEC-CUBEの設置場所を今度はURLで設定する箇所があります。こちらも修正しておきます。

  'EcUrl' => 'http://' . $_SERVER['HTTP_HOST'] . DS . 'eccube-3.0.2' . DS . 'html',

※なお、このEcUrlを設定すると、EC-CUBEで登録してある画像をbaserCMS側で取得できない現象に出くわしました。
ここの設定は元のままでインストールすることも可能ですので、必要であればそうしてみてください。 ただし、そうした場合はbaserCMSの管理画面からEC-CUBEの商品ページへリンクする「商品ページURL」が上手く機能しなくなります。今回はここまで見てきた通りの状況(Vagrantで用意した仮想サーバー上で、baserCMS3.0.7、EC-CUBE3.0.2、baserCube1.0.0)で発生していますが、環境による部分があるかも知れません。

管理画面からインストール

上記の諸設定が必要な以外は、通常のプラグインとインストール方法は変わりません。

baserCMSの管理画面から「プラグイン管理」へ進んでください。画面上に「baserCube」が表示されていると思います。インストールアイコンをクリックしてインストールを行ってください。

install_bc_cube.png

baserCubeについて

baserCubeで出来ること

本記事の執筆時点で、baserCubeのバージョンは1.0.0になります(最新の情報は公式サイト等でお確かめください)。このバージョンで出来ることを一言で表すと、「EC-CUBEで登録した商品について、baserCMS側の任意の場所に【カートへ入れる】ボタン(カートボタン)を表示できる」ということになると思います。

特にブログについては、このプラグインをインストールすることで、記事編集画面で「どの商品のカートボタンを表示するか」を選択できるようになります。固定ページやテンプレート上では、専用のヘルパーを使ってカートボタンを出力します。

その他、EC-CUBEで登録した商品情報をbaserCMS上で確認できますが、情報の変更はあくまでもEC-CUBE上で行います。下図はbaserCMSで表示した特に商品情報(上)とEC-CUBEで表示した商品情報の画像(下)です。

products_bc.png

products_ec.png

ヘルパー(タグ)を使ったカートボタンの表示

baserCubeで商品情報を表示すると、一緒にカートボタンの出力用タグが表示されます(下図)

tag_bc.png

このタグをコピーして、任意の場所に貼り付けるとそこにカートボタンが表示されます。タグといっても実態はPHPの関数ですので、baserCMSの標準エディタ(CKEditor)内でする場合は、ソースモードにして貼り付けてください。

tag_editor.png

実際にカートボタンを表示してみます。機能が分かりやすいように、上記のタグ以外は何も記述していません(つまりタグだけで下図のようなカートボタンが表示されます)。

tag_view.png

おわりに

いかがでしたでしょうか? ECサイトの構築で利用されることの多いEC-CUBEとの連携ということで、とても面白いプラグインだと思います。

今後、新しい情報等があれば追記していきたいと思います。