本記事はHTMLやJavaScriptにあまり詳しくない店舗運用者様などを想定した解説記事です。

 EC-CUBE 4のトップページを編集してみたいけど、どのように触っていいのかわからないというような場合にどのように編集すればよいかを書いていきます。

 

レイアウト、メインコンテンツ、ブロック

 

 EC-CUBE 4のページは「レイアウト」が決められており、そのレイアウトで「そのページ固有のメインコンテンツ」と「複数のページで利用できるブロック」を設定しています。

 まずは、変更したい場所がページのメインコンテンツなのか、ブロックなのか確認する必要があります。

 

レイアウト

 

 レイアウトは初期状態のEC-CUBE 4ではメインページと、その他ページが異なるレイアウトになっています。

 

 管理サイトの「コンテンツ管理」→「レイアウト管理」でそれぞれのレイアウトを確認することができます。

 

 

 「トップページ用レイアウト」クリックすると、

トップページのレイアウト画像

トップページのレイアウト

 

 上の画像のようにトップページのレイアウト情報を表示することができます。

 トップページは#headerの部分に「ヘッダー(商品検索・ログインナビ・カート)」「ロゴ」「カテゴリナビ(PC)」という3つの項目が表示されています。この1つ1つがブロックです。

 それ以外にも#contents_topや#main_topという表記があり、今回は解説しませんが、未登録のブロックをドロップすることで、別のブロックを表示することもできます。

 

メインコンテンツ

 

 #main_topの下に「Main」という表示があります。

 これが各ページ固有の内容を表示する部分です。 

 

 例えば、トップページなら、画像を3つスライドショー形式で表示している部分が固有の内容です。

 

 メインコンテンツの内容は「コンテンツ管理」の「ページ管理」から確認及び編集することができます。

 

 

 上画像の「TOPページ」をクリックすることでトップページのメインコンテンツを編集できます。

 

 「ファイル名」に表示されている「app/template/default/index.twig」が、「コード」欄に表示されているHTML(およびCSS、JavaScript)が実際に記述されているファイル名です。

 このページで内容を編集するか、ファイルを編集することで表示を変更することができますが、今回は管理サイトで作業を行うことを想定して、このページの内容を変更することとします。

 

スライドショーの画像を変更したい

 

 例として、スライドショーの画像を変更してみます。

 先ほど表示したページ管理のトップページの「コード」欄のスライドショー画像を指定している部分は以下です。

 

{% block main %}
    <div class="ec-sliderRole">
        <div class="main_visual">
            <div class="item slick-slide"><img src="{{ asset('assets/img/top/img_hero_pc01.jpg') }}"></div>
            <div class="item slick-slide"><img src="{{ asset('assets/img/top/img_hero_pc02.jpg') }}"></div>
            <div class="item slick-slide"><img src="{{ asset('assets/img/top/img_hero_pc03.jpg') }}"></div>
        </div>
    </div>
{% endblock %}

 

 コードの中に「img_hero_pc01.jpg」という画像ファイル名があります。これがスライドショーの一番目に表示する画像ファイルの指定です。この辺は、ある程度HTMLなどの知識が無いと特定が難しい部分ですが、見つけることは可能だと思います。

 ただ単純なHTMLではなく、Twigの機能を使った指定になっています。

 

asset(‘assets/img/top/img_hero_pc01.jpg’)

 

 このファイルはEC-CUBE 4をインストールしたディレクトリの下の以下の場所にあります。

 

html/template/default/assets/img/top/

 

 フォルダの中身を確認するとこのようにimg_hero_pc01.jpgなどがありますね。

 似たような名前のimg_hero_sp01.jpgなどがありますが、これはスマートフォン表示の際の画像です。今回はスマートフォンについては言及しませんが、スマートフォン対応しているサイトでは同様にこの画像も変更する必要があります。

 

 「スライドショー表示されている画像3つを変更したい」という場合、2つの方法が取れます。

 

・HTMLを触らずに画像を差し替える

・HTMLを変更して、表示したい画像を指定する

 

 HTMLを触らない方法は、HTMLの知識の無い方でも変更可能というのがメリットです。ファイル名が実際表示する画像の内容に合わない、画像の差し替えより凝ったことができない、などのデメリットもありますが、HTMLを編集してページの表示を崩してしまう恐れはありません(画像サイズによって表示が伸びたりすることはあるので、画像サイズは他画像とそろえる必要はあります)。

 この場合は、img_hero_pc01.jpg、img_hero_pc02.jpg、img_hero_pc03.jpgを表示したい画像と差し替えればOKです。

 

 HTMLを変更する場合は、「コンテンツ管理」の「ページ管理」でTOPページをクリックし、「コード」欄を書き換えます(注意:かならず編集前のコードをコピーないし、ファイルをバックアップして元に戻せるようにしておいてください!)。

 例えば、ex.jpgという画像を表示したい場合は、ほかの画像と同様の「html/template/default/assets/img/top/」以下にex.jpgを配置し、コードの該当箇所を以下のように書き換えます。

 

{% block main %}
    <div class="ec-sliderRole">
        <div class="main_visual">
            <div class="item slick-slide"><img src="{{ asset('assets/img/top/ex.jpg') }}"></div>
            <div class="item slick-slide"><img src="{{ asset('assets/img/top/img_hero_pc02.jpg') }}"></div>
            <div class="item slick-slide"><img src="{{ asset('assets/img/top/img_hero_pc03.jpg') }}"></div>
        </div>
    </div>
{% endblock %}

 

 最後に右下の「登録」ボタンをクリックして変更を反映させます。

 

 これらの作業は、HTMLやプログラミングの知識が無いと危険な作業ですので、バックアップを取って元に戻せるようにしてください。最後に書きますが、ご自身で修正が難しい場合は、デザインテンプレートや開発会社に依頼する方がより安全で、凝ったサイトを作成することができます(お金はかかりますが)。

 

ブロック

 

 メインコンテンツに編集したい内容が見当たらない・・・という場合はブロックとして配置されていることを疑ってください。

 例えば、トップページの以下の表示は「新入荷商品特集」というブロックです。

 

 

 どうやって、見当をつけるかというと、先述のレイアウト管理からトップページのレイアウトを確認するとある程度推測することができます。

 

 Mainの下に「新入荷商品特集」や「トピック」という項目がありますね。

 

「新入荷商品特集」の内容

 

 ブロックのコードは「コンテンツ管理」→「ブロック管理」から確認できます。

 一覧から「新入荷商品特集」をクリックすると、コードが確認できます。

 

<div class="ec-role">
    <div class="ec-eyecatchRole">
        <div class="ec-eyecatchRole__image">
            <img src="{{ asset('assets/img/top/img_about.jpg') }}" alt="" role="presentation"/>
        </div>
        <div class="ec-eyecatchRole__intro">
            <p class="ec-eyecatchRole__introEnTitle">{{ 'front.block.eyecatch.title__en'|trans }}</p>
            <p class="ec-eyecatchRole__introTitle">{{ 'front.block.eyecatch.title__ja'|trans }}</p>
            <p class="ec-eyecatchRole__introDescriptiron">{{ 'front.block.eyecatch.descriptiron'|trans|nl2br }}</p>
            <a class="ec-blockBtn--top" href="{{ url('product_list') }}?category_id=4">{{ 'front.block.eyecatch.view_list'|trans }}</a>
        </div>
    </div>
</div>

 

 このコードに「ジェラートとは・・・」のようにページで表示されている文言があれば、特定は容易なのですが、EC-CUBE 4は多言語対応しており、それぞれの言語に合わせた表示を別の場所で行っています。

 多言語対応が不要な場合は、{{ ‘front.block.eyecatch.title__en’|trans }}などの代わりに日本語の文字を入れてもいいのですが、仕掛けを説明すると表示する文字はsrc/Eccube/Resource/locale/messages.ja.yamlというファイルに記述されています。

 今回の部分を抜粋すると、

 

front.block.eyecatch.descriptiron: |
  ジェラートとはイタリアン・アイスクリームのことで、一般的なアイスクリームに比べて、乳脂肪分が低くいのが特徴です。
  当店では厳選した旬の果物のおいしさをそのままジェラートに仕上げました。風味が濃厚でありながら、甘さ控えめでヘルシーなキューブジェラートをご堪能ください。
  さらにジェラートの製法を活かした、アイスキャンディ・アイスサンドも販売しております。

 

 こんな感じです。コードの「front.block.eyecatch.descriptiron」の部分がこれに置き換わることが推測できると思います。

 新入荷商品特集の文言を変更する方法は2通り考えられます。

 

・src/Eccube/Resource/locale/messages.ja.yamlの該当箇所を書き換える

・多言語対応などが必要ないなら、messages.ja.yamlを使わない

 

 messages.ja.yamlを使わない場合を紹介します。「新入荷商品特集」コードの該当部分を以下のように変更します。

 

<div class="ec-role">
    <div class="ec-eyecatchRole">
        <div class="ec-eyecatchRole__image">
            <img src="{{ asset('assets/img/top/img_about.jpg') }}" alt="" role="presentation"/>
        </div>
        <div class="ec-eyecatchRole__intro">
            <p class="ec-eyecatchRole__introEnTitle">ここには英語のタイトルが表示されていました</p>
            <p class="ec-eyecatchRole__introTitle">日本語のタイトル</p>
            <p class="ec-eyecatchRole__introDescriptiron">説明文を表示します</p>
            <a class="ec-blockBtn--top" href="{{ url('product_list') }}?category_id=4">{{ 'front.block.eyecatch.view_list'|trans }}</a>
        </div>
    </div>
</div>

 

 このように変更すると下の画像のように表示が変わります。右側の画像が文字数の減少に合わせて大きくなっているので、HTMLやCSSで要微調整ですが、文字が変わっているのがわかると思います。

 

まとめ

 

 このように、EC-CUBE 4の表示の変更はレイアウト、メインコンテンツ、ブロックの仕組みを知ったうえで該当箇所を探す必要があったり、多言語対応の影響で変更するファイルが分かりづらくなっている側面があります。

 Twigの仕組みもHTMLやCSSを勉強しただけでは少し難しいかもしれません。

 

 「これは自分では難しい!」と感じた場合はデザインを変更するテンプレートをオーナーズストアで購入するか、開発会社にカスタマイズを依頼するのも検討してみてください。


 2019年3月23日に開催されました.NETラボ 勉強会 2019年3月のセッションスライドを公開します。

 Azure Reposでソース管理しつつ、Azure Boardsでタスク管理、Azure PipelinesでCI・CD、Azure Test Plansで手動テストを実施。それぞれが密に連携できる・・・と活用すると相乗効果で便利になるツールなので、ぜひお試しください。

 

 .NETラボ4月の勉強会も申し込み開始していますので、そちらもぜひ!

 .NETラボ 勉強会 2019年4月

 

AzureDevOpsの機能解説 from Makoto Nishimura

 前回、DevOpsのお話でAzure DevOpsにちらっと触れたのですが、今回は各機能をしっかり紹介しようと思います。

 今回はプログラミング教育やHyper-Vネットワーク、SQL Serverなどの話があっておすすめです!

 

 申し込みは以下のCompassサイトから。

 

 .NETラボ 勉強会 2019年3月


 Xdebug有効な設定でプラグインをインストールしようとするとタイトルのようにエラーが発生。
 
Maximum function nesting level of ‘1000’ reached, aborting
 
 サイト上ではエラー情報が無かったので、var/log以下のファイルで確認。
 
 php.iniのxdebugの項目の以下の数値を変更して。Webサーバーを再起動。
 
 xdebug.max_nesting_level=10000
 
 前回はmemory_limitで引っかかった。インストールなどの処理時間がかかるケースではmax_execution_timeを増やした方がいいし、アップロードするファイルによってはupload_max_filesizeを増やしておきたい。
 

 LinkedInラーニングで「Microsoft Azure 入門」というコースを公開いたしました。

 Azure(というかクラウドサービス)ってやれることが多すぎてピンとこないよねという方(まさに自分)に向けて、一本数分の動画ですが、「こういうこともできるよ、こんな機能もあるよ」と全体が見渡せるように作成したコースです。

 

 あなたの知らない機能がそこにはあると思います!

 


 タイトルの通り、DBがMySQLの状態でダミーデータを作成するeccube:fixtures:generateコマンドを実行すると文字数オーバーだったり、数値がマイナスだったりで失敗する。

 

SQLSTATE[22001]: String data, right truncated: 1406 Data too long for column ‘file_name’

 

 該当カラムがvarchara(255)のパターン。

 dtb_productのnameと、dtb_product_imageのfile_nameで発生する。カラムの文字数を増やせば処理は進む。

 

SQLSTATE[22003]: Numeric value out of range: 1264 Out of range value for column ‘payment_total’

 

 dtb_orderのtotalやpayment_totalにマイナスの値を指定しているパターン。正数のみを表すunsignedを取ってあげればよいけど、あくまで処理を最後まで進めるための処置。

 コマンドの方を修正した方が正しいとは思う。

 

 これで最後まで行くかなぁと思ったら、

 

Error: Allowed memory size of 134217728 bytes exhausted (tried to allocate 2097160 bytes)

 

 ・・・PHPのメモリーサイズは多めにね。

 最後まで行かなかったけど諸々やり直す気力が出ないのと、ダミーデーターはそれなりの数入ったので調査終了して、メモを残す。

 

 


 3月7日に開催されましたEC-CUBE東京ユーザグループ初心者向け勉強会3月のスライド資料を公開します。

 ・・・とはいえ、参加者の方がエンジニアというより店舗運用者やデザイナーの方が多かったので、プログラマー向けの内容だったスライドは早めに切り上げて質問会に変更したのですが。

 

 東京のユーザーグループは偶数月が開発者向けで、奇数月が初心者向けということで、スライドは全てお見せできませんでしたが、様々な店舗運用者の方の意見が聞けて新鮮な勉強会でした!

 

EC-CUBE 4 入門 from Makoto Nishimura

 ある程度納得が行ったので書き残しておく。

 

 EC-CUBE 4はWindows環境だと遅い。

 これはEC-CUBE 4というよりSymfonyの問題なのだが、Windows Subsystem for Linuxでも遅い。

 

 私はVisual Studio(Codeでもfor MacでもなくWindowsのVisual Studio)が好きなので、MacをメインPCにする気はない。

 

 ということで、Windows PC上でEC-CUBE 4を快適に触れる環境を考えてみた。

 IEDはVisual Studioは向いていないのでVisual Studio Codeを利用し、Xdebugでデバッグが行える環境を目指す。

 

動作は仮想マシン上

 

 LAMP環境はDockerに構築する。

 ハイパーバイザー型でも問題ないと思う。

 

SSHで接続して編集する

 

 DockerはSSHを立てないのが良いみたいだけど、Volumes設定でEC-CUBE 4のソースを共有するとWindows上にファイルを置いてしまい遅くなるので、ここは開発環境と割り切ってSSH接続を行う。

 Visual Studio CodeにはSSH FSというSSH接続ができる拡張機能があるが、PHP Debug拡張機能でXdebugを利用しようとするとpathMappingsがうまく動かないのでSSH FSは諦める。

 このページにssh:\\で書き出すと動くようなことが書いてあるが、試してみるとC:\\VSCodeDir\ssh:\\というパスになってしまう。現在は上手く動かないのかもしれない。書き方も[]で挟む時点でエラーになるし書式も変わっているのかも?

 SSH FSを利用できればより綺麗なのだが、諦めてwin-sshfsでマウントすることにする。

 あくまでSSHの接続先をWindowsのドライブのように見せるだけなので、Windows上にファイルは作成されない。ゆえに動作が早い。

 

 これならVisual Studio Codeで開くこともできるし、Xdebugでブレークポイントも張ることができる。

 pathMappingsもWindows上のファイルを指定する書き方でOK。

 

            "pathMappings": 
            {
                // win-sshfsで/var/www/htmlをGドライブにマウントした場合
                "/var/www/html/": "G:\\"
            },

 

 結構まどろっこしいのは認めます。

 みなさんはどうやって開発していますか?(そもそもWindowsで開発してない可能性・・・)

 

追記:2019年3月時点では、win-sshfs(正確にはWinSshFS Foreveryoneという名前らしい)の最新1.6.13でもファイル検索など無理をするとVS Code、win-sshfsもろともフリーズすることがあるので、デバッガーを利用しないなら、VS Codeの拡張機能でSSH FSの方がパフォーマンスは良い。