EC-CUBE3のインストールとルートURLの変更｜福岡のホームページ制作会社・メディア総研株式会社　マグネッツ事業部

ムラタでございます。
今回は7月にリリースされたEC-CUBE3から

の3本をお届けします。

ちなみに構築環境は

XAMPP…Ver 1.8.2
EC-CUBE…Ver 3.03
DB…MySQL
PHP…Ver 5.4.16

になります。

インストール

それではまずEC-CUBE3をダウンロードしましょう。

ダウンロードはこちらからメンバーにログインした後に可能です。
今回はこの記事を書いてる時点での最新版「Ver3.03」を使います。

解凍した中身は下記のファイル群になります。

任意の場所に解凍したら「html」にアクセスします。
すると自動的にインストール画面に移るので、6つのステップを指示に従いながら進めていきましょう。

①ようこそ

1つ目のステップではインストールにあたってシステム要件を満たしているかどうかのチェックが行われます。

もし[必須]となっている要件があれば解消しておきましょう。
今回はPHPライブラリのfileinfoが有効になっていなかったようなのでまずこれを有効にしていきます。

php.iniファイルの中から「;extension=php_fileinfo.dll」を探して、冒頭の「；」を削除することで有効化されます。

編集が終わったら必ずApacheを再起動して適用させましょう。

これで[必須]が消えました。
[推奨]はとりあえず今回は置いてそのまま次へ進みます。

②権限チェック

次は権限のチェックです。
特に問題は無いようなので次に進みます。

③サイトの設定

ここではお店の名前やメールアドレス、管理者のログイン情報、管理画面のディレクトリ名などを決定します。

④データベースの設定

次にデータベースの情報を入力していきます。
事前に用意していたDBの情報を入力しましょう。

正常に接続できればDBの初期化が始まるので次に進みます。

同じDB内にすでに旧バージョンのEC-CUBEをインストールしていて初期化したくない時はこの作業はスキップして次に進みましょう。

⑤インストール完了

以上でインストールは完了です。
③で設定したログイン情報でログインしてみましょう。

URLの変更

これで「html/」にアクセスするとデフォルトテンプレートでサイトが展開されているわけですが、やはり気になってしまうのはURLにどうしても「html」が入ってしまうことだと思います。

仮にサイトのURLが「http://testshop.com/html/」だとしたら「html」を外して「http://testshop.com/」にしたいですよね。

現在のバージョン（3.03）ではサイトURLをWPのように管理画面から変更するといったことはできないようですので、色々ファイルを編集したり移動させたりで変えるしかないようです。

ファイルの移動

まず手始めに「html」ディレクトリ内にある「index.php」と「.htaccess」、それと「robots.txt」ファイルを一つ上の階層に移動させます。

htaccessファイルはすでに上の階層にもありますが、上書きします。
※デバックモードを使用する場合は「index_dev.php」も一緒に移動します。

ファイルの修正

先ほど上の階層に移動させた「index.php」を編集します。

冒頭のコメントが終わったところに「require __DIR__.’/../autoload.php’;」という記述があると思うので、そこを「require __DIR__.’/autoload.php’;」に変更します。

「index_dev.php」も移動させた場合は、
「require_once __DIR__.’/../vendor/autoload.php’;」
「$config_dev_file = __DIR__.’/../app/config/eccube/config_dev.yml’;」
「‘profiler.cache_dir’ => __DIR__.’/../app/cache/profiler’,」
この3つを同じく「/../」→「/」としておきます。

次に「app/config/eccube/path.yml」というファイルを編集します。
「root_urlpath」という項目があるので、そこから最後の「html」を取ります。
例）「root_urlpath: /htdocs/html/」→「root_urlpath: /htdocs」

以上でURLから「html」を除いた状態でアクセスできるようになったと思います。

おまけ

これで今回のEC-CUBE3のインストールとURL変更についてはお終いですが、最後にもうひとつおまけで管理画面にちょっとしたカスタマイズをしてみましょう。

管理画面サイドメニューに項目を追加

管理画面左にあるメニュー群の末尾に任意の項目を追加してみましょう。

今回追加する項目は「マニュアル」とします。

管理画面を構成するのテンプレートファイルは「src/Eccube/Resource/template/admin」にあり、この中でサイドメニュー部分の記述があるのは「default_frame.twig」になります。

79行目付近に該当の記述があり、「ホーム」以外の子要素を持つメニューについては「nav.twig」をインクルードしてなにかゴニョゴニョして出力しているようです。自分にはさっぱりですが…。

今回は単純に「ホーム」と同じく直接この中に<li>～</li>の要素を記述することで対応させます。（この方法だと「ホーム」の前後もしくは末尾にしか入れることが出来ないですが）

    <!-- ▼ #side ▼ -->
    <aside id="side">
        <ul class="nav nav-sidebar">
            <li>
                <a href="{{ url('admin_homepage') }}">
                    <svg class="cb cb-home"><use xlink:href="#cb-home" /></svg>ホーム<svg class="cb cb-angle-down"><use xlink:href="#cb-angle-down" /></svg>
                </a>
            </li>
            {{ include('nav.twig') }}
            <li>
                <a href="マニュアルのURL">
                    <svg class="cb cb-question"><use xlink:href="#cb-question" /></svg>マニュアル<svg class="cb cb-angle-down"><use xlink:href="#cb-angle-down" /></svg>
                </a>
            </li>
        </ul>
    </aside>
    <!-- ▲ #side ▲ -->

<li>

</a>

</li>

<li>

</a>

</li>

</ul>

</aside>

これで管理画面のサイドメニューの末尾に「マニュアル」が表示されているはずです。

表示されていない人は「app/cache/twig/production/」の中の「admin」をディレクトリごと削除してみてください。

アイコンの変更

今回「マニュアル」ということでメニューのSVGアイコンを「？」としましたが、他にも色々なSVGアイコンが用意されています。

「html/template/adamin/assets/img/svg_list.html」にアクセスしてみると使用できるアイコンの一覧が見ることができるので、使いたいアイコンが見つかったら先ほどの挿入したソースコードの「<svg class=”cb cb-question”>」の「cb-question」を差し替えて下さい。

管理画面ホームに項目追加

最後に管理画面の「ホーム」にも「マニュアル」のリンクを追加してみましょう。

ホームのテンプレートファイルは先ほどと同じ「src/Eccube/Resource/template/admin」にある「index.twig」になります。

ソースコードを見れば分かりますが、1段ずつを「div class=”row”」で囲っており、その中のボックスをそれぞれ「div class=”col-md-xx”」で囲み幅を決めているようです。

このクラスの末尾の「xx」には1～12が設定されていて、各クラスと幅の設定は下記になります。

col-md-1…8.33333%
col-md-2…16.6667%
col-md-3…25%
col-md-4…33.3333%
col-md-5…41.6667%
col-md-6…50%
col-md-7…58.3333%
col-md-8…66.6667%
col-md-9…75%
col-md-10…83.3333%
col-md-11…91.6667%
col-md-12…100%

というわけなので、rowの中のcol-md-xxの幅合計が100%を超えないようにしましょう。

今回は2段目「ショップ状況」の右に追加してみました。

        <div class="row">
            <div class="col-md-6">
                <div class="box" id="sale_info">
                    <div class="box-header">
                        <h3 class="box-title">売り上げ状況</h3>
                    </div><!-- /.box-header -->
                    <div class="box-body no-padding no-border">
                        <div class="sale_box clearfix">
                            <div class="monthly_sale">
                                <div class="item_number">
                                    {{ salesThisMonth is empty ? '¥ 0' : salesThisMonth.order_amount|price }} / {{ salesThisMonth is empty ? 0 : salesThisMonth.order_count|number_format }} <span>件</span>
                                    <div class="small">今月の売上高 / 売上件数</div>
                                </div>
                            </div>
                            <div class="yesterday_sale">
                                <div class="item_number">
                                    {{ salesYesterday is empty ? '¥ 0' : salesYesterday.order_amount|price }} / {{ salesYesterday is empty ? 0 : salesYesterday.order_count|number_format }} <span>件</span>
                                    <div class="small">昨日の売上高 / 売上件数</div>
                                </div>
                            </div>
                            <div class="today_sale">
                                <div class="item_number">
                                    {{ salesToday is empty ? '¥ 0' : salesToday.order_amount|price }} / {{ salesToday is empty ? 0 : salesToday.order_count|number_format }}  <span>件</span>
                                    <div class="small">今日の売上高 / 売上件数</div>
                                </div>
                            </div>
                        </div>
                    </div><!-- /.box-body -->
                </div><!-- /.box -->
            </div><!-- /.col -->
            <div class="col-md-4">
                <div class="box" id="shop_info">
                    <div class="box-header">
                        <h3 class="box-title">ショップ状況</h3>
                    </div><!-- /.box-header -->
                    <div class="box-body no-padding no-border">
                        <form id="form2" name="form2" action="{{ url('admin_product_page', { page_no : 1, status : 3}) }}" method="post">
                            {{ form_widget(searchProductForm._token) }}
                        </form>
                        <form id="form3" name="form3" action="{{ url('admin_customer') }}" method="post">
                            {{ form_widget(searchCustomerForm._token) }}
                            <input type="hidden" id="admin_search_customer_status_1" name="admin_search_customer[customer_status]" value="2">
                        </form>
                        <div class="link_list">
                            <div class="tableish">
                                <a href="#" class="item_box tr" onclick="document.form2.submit();">
                                    <div class="icon td"><svg class="cb cb-tag-slash"><use xlink:href="#cb-tag-slash" /></svg></div>
                                    <div class="item_number td">{{ countNonStockProducts|number_format }}<div class="small">在庫切れ商品</div></div>
                                    <div class="icon_link td">
                                        <svg class="cb cb-angle-right"> <use xlink:href="#cb-angle-right" /></svg>
                                    </div>
                                </a><!-- /.item_box -->
                                <a href="#" class="item_box tr" onclick="document.form3.submit();">
                                    <div class="icon td"><svg class="cb cb-users"><use xlink:href="#cb-users" /></svg></div>
                                    <div class="item_number text-left td">{{ countCustomers|number_format }}<div class="small">会員数</div></div>
                                    <div class="icon_link td">
                                        <svg class="cb cb-angle-right"> <use xlink:href="#cb-angle-right" /></svg>
                                    </div>
                                </a><!-- /.item_box -->
                            </div>
                        </div>
                    </div><!-- /.box-body -->
                </div><!-- /.box -->
            </div><!-- /.col -->
            <div class="col-md-2">
                <div class="box" id="shop_manual">
                    <div class="box-header">
                        <h3 class="box-title">マニュアル</h3>
                    </div><!-- /.box-header -->
                    <div class="box-body no-padding no-border">
                        <a href="#" style="padding:10px; border-top: 1px solid #d1d8d9; display:block;">操作にご不明な点がございましたら、こちらのマニュアルをご覧ください。</a>
                    </div><!-- /.box-body -->
                </div><!-- /.box -->
            </div><!-- /.col -->
        </div>

<h3 class="box-title">売り上げ状況</h3>

</div>

{{ salesThisMonth is empty ? '¥ 0' : salesThisMonth.order_amount|price }} / {{ salesThisMonth is empty ? 0 : salesThisMonth.order_count|number_format }} <span>件</span>

<div class="small">今月の売上高 / 売上件数</div>

</div>

{{ salesYesterday is empty ? '¥ 0' : salesYesterday.order_amount|price }} / {{ salesYesterday is empty ? 0 : salesYesterday.order_count|number_format }} <span>件</span>

<div class="small">昨日の売上高 / 売上件数</div>

</div>

{{ salesToday is empty ? '¥ 0' : salesToday.order_amount|price }} / {{ salesToday is empty ? 0 : salesToday.order_count|number_format }} <span>件</span>

<div class="small">今日の売上高 / 売上件数</div>

</div>

</div>

</div>

</div>

<h3 class="box-title">ショップ状況</h3>

</div>

</form>

</form>

<div class="item_number td">{{ countNonStockProducts|number_format }}<div class="small">在庫切れ商品</div></div>

</div>

</a>

<div class="item_number text-left td">{{ countCustomers|number_format }}<div class="small">会員数</div></div>

</div>

</a>

</div>

</div>

</div>

</div>

<h3 class="box-title">マニュアル</h3>

</div>

<a href="#" style="padding:10px; border-top: 1px solid #d1d8d9; display:block;">操作にご不明な点がございましたら、こちらのマニュアルをご覧ください。</a>

</div>

</div>

</div>

</div>

上記の内容で保存した後に「app/cache/twig/production」の「admin」ディレクトリを削除してホームを見てみましょう。

こんな感じになりました。

最後に

いかがだったでしょうか？

EC-CUBE3が公開になってまだ日も浅くまだまだ使いづらい段階ではありますが、EC-CUBE2ではなかった便利な機能が今後どんどん増えていくと思いますので大いに期待したいですね。

BLOG
EC-CUBE3のインストールとルートURLの変更

EC-CUBE3のインストールとルートURLの変更

目次