Topics トピックス

[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との連携ということで、とても面白いプラグインだと思います。

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

タグ: 新製品 | baserCMS | PHP | CakePHP | ホームページ制作

お問い合わせCONTACT

弊社への各種ご相談は下記よりどうぞ

よくある質問

ここでは「ホームページを制作するのにどのくらいの期間が必要?」「島根県以外の遠方からでも依頼できる?」などお客様から寄せられる質問に回答しています。
下記の一覧からご覧になりたい質問内容をクリックしてください。

制作について

どのくらいの制作期間が必要ですか?

2ヶ月半〜3ヶ月程度を目処にお考え下さい。実際の作業自体はそれほどかかりませんが、お客様側でご準備いただくものや、新たに用意するもの(写真など)を考慮すると、結果的にそのくらいの期間がかかってしまうのが実情です。

法人ではなく個人事業主なのですが、制作を依頼できますか?

もちろん可能です。ただし、基本的には法人のお客様を想定したサービスとなっておりますので、気になる点などがございましたら、一度お問い合わせ頂ければと思います。

文章の校正はしてもらえますか?

本格的な校正または文章ライティングは、プロのライターに依頼することで可能です(有料)。なお、お客様からお預かりした原稿の誤字脱字等は、可能な限り確認・修正させていただいておりますが、お客様から弊社に完成原稿として提供いただくものにつきましては、なるべくお客様側にて一度チェックしていただきますよう、お願いいたします。

知り合いのデザイナーにデザインをお願いしたいのですが・・・。

事前にご相談いただければ、社外のデザイナーにデザインをお願いすることも可能です。ただし、その方に対して弊社からWeb構築に関する技術・仕様などの指導は出来ませんので、予めWebデザインが可能かどうかをデザイナーにご確認ください。

他社で作った既にあるホームページを修正したいのですが出来ますか?

他社様が制作したホームページでも修正を承っております。ご相談ください。

スマートフォン対応のホームページを作成してもらえますか?

もちろん可能です。現在主流のレスポンシブデザインという制作手法で構築できます。これはユーザーが利用している端末の画面幅に応じてレイアウトを自動で変更するもので、パソコン用のサイトとスマートフォン用のサイトを別で作る必要がないのが特徴です。

現在ホームページを持っていますが、リニューアルをお願いできますか?

もちろん可能です。リニューアルの仕方にもいろいろとあります。CMS(管理システム)やデザインの入れ替え、URLの変更など目的やご要望に応じた手法をご案内しています。

ホームページと一緒にブログも作りたいのですが、可能ですか?

多くのお客様がホームページの制作と同時にブログ機能(お知らせ、新着情報、トピックスなど呼び方は様々)を利用しています。

ホームページに掲載する内容は、一緒に考えてもらえますか?

はい。打ち合わせの際にスタッフへご相談ください。必要であればプロのライターさんに依頼することも出来ます。(有料)。

制作を依頼した場合、何を用意すれば良いですか?

打ち合わせの中で必要なものを確認して進めていきます。一般的には、会社パンフレットなどお客様の事業内容がわかる資料、ロゴマークなどのデータ、ホームページに載せたい写真・画像、

遠方(島根県以外)からホームページ制作の依頼はしてもらえますか?

リモート会議などで対応可能です。弊社では東京・大阪をはじめ、全国のお客様からのご依頼を承っております。ご相談ください。

WordPressを使ったサイト構築は可能ですか?

対応可能です。また、WordPress以外でも対応できますので、その目的・条件にあったCMSをご提案しております。

デザインのみ、コーディングのみなど、制作の一部の依頼は可能ですか?

対応可能です。弊社ではデザイン会社様、広告代理店様、システム開発会社様、ウェブ制作会社様などからの下請け案件も承っております。ご相談くださいませ。

制作会社、広告代理店からの依頼は可能ですか?

はい、対応可能です。ご相談ください。

写真撮影も行ってもらえますか?

対応可能です。弊社の関連会社もしくはパートナー企業が対応いたします。ご相談ください。

動画を使ったホームページを作成したいのですがお願いできますか?

対応可能です。動画は弊社の得意分野の一つです。撮影・編集は弊社の関連会社で映像制作専門の株式会社モットが対応いたします。

ホームページの更新を簡単にできる方法はありますか?

はい、CMS(コンテンツ・マネジメント・システム)の導入をお勧めします。CMSはホームページの管理システムのことで、IDとパスワードを使って管理画面にログインし、ホームページのデータを更新・変更します。

依頼してから完成まではどのような流れですか?

通常、以下のような流れで進んでいきます。

1.コンテンツの確定
ホームページの内容を決めていきます。どんなページがどこにあるか、というのを確定します。

2.デザインの確定
ホームページのデザインを決めていきます。色や雰囲気など最初にご相談させていただき、叩き台となるデザイン案をご用意します。

3.テストサイト構築
確認用のテストサイトをご用意します。

4.公開(納品)
テストサイトで問題なければ、本番環境へホームページを構築し公開します。

ドメイン、URLアドレスについて

現在持っているドメインを引き継ぐことは可能ですか?

可能です。場合によってはドメインの管理者権限を移す手続きが必要になることがあります。ご相談ください。

新しいドメインを取りたいのですが、取得の手配してもらえますか?

もちろん対応可能です。ドメインは「早いものがち」なので、必ずしもご希望のドメインが取得できるとは限りませんが、

サーバーについて

レンタルサーバーは用意してもらえますか?

もちろん対応可能です。弊社は「CPIサーバー(KDDIウェブコミュニケーションズ社)」「Zenlogic(ソフトバンクグループ

見積・費用・契約について

ホームページ制作に費用はどのくらいかかりますか?

ホームページはオーダーメイドになりますので、お客様のご要望の内容によって金額が変わります。

見積りを依頼するには、どのようにして問い合わせすれば良いですか?

弊社ホームページの「お問い合わせ」か、お電話にてご連絡ください。

分割払いはできますか?

原則一括払いでお願いをしておりますが、提携するクレジット会社を利用して分割することができます。ご相談くださいませ。

契約後のキャンセルはできますか?

契約後のキャンセルにつきましては、既に発生した作業の内容に応じて、キャンセル料を頂くことがあります。ご了承ください。

見積りに料金はかかりますか?

お見積りは無料です。お気軽にお問い合わせください。

制作後・メンテナンスについて

納品後のサポートはできますか?

はい可能です。更新頻度の高いサイトをお持ちのお客様や、Webサービスを運用しているお客様には、保守契約をおすすめ致しますが、保守契約の無いお客様や、他社でホームページを制作して運用中のお客様であっても、都度見積もりで対応させて頂いています。

運用は自分で行いたいのですが可能ですか?

はい、可能です。特に更新頻度が高い部分など、予めわかっていれば更新しやすいように管理機能をカスタマイズすることも出来ます。ご相談ください。

他社が作ったホームページを更新だけしてもらうことはできますか?

はい、可能です。ご相談ください。

アクセス解析・広告運用

アクセス解析はお願いできますか?

はい、可能です。レポート作成からコンサルタントによる毎月の報告会まで対応しています(有料)。ご相談くださいませ。

インターネット広告の運用代行をしてもらえますか?

はい、可能です。出稿先、予算、ターゲットなどをご相談し、最適なプランをご提案します。ご相談くださいませ。