BLOG | サマンサ http://samancha.com samancha Wed, 23 Sep 2020 07:24:16 +0000 ja hourly 1 https://wordpress.org/?v=5.5.14 145252393 create-nuxt-app v3.2.0を使ってNuxt+Typescriptのプロジェクトを構築 http://samancha.com/archives/2258 http://samancha.com/archives/2258#respond Fri, 04 Sep 2020 04:53:17 +0000 http://samancha.com/?p=2258 mac環境で、Nuxt+Typescriptのプロジェクトを構築し、最終的にはAIアプリを開発しようと思います。 フロント側:Nuxt.js。サーバー側:python。   環境 OS/ミドルウェア バージョン […]

The post create-nuxt-app v3.2.0を使ってNuxt+Typescriptのプロジェクトを構築 first appeared on サマンサ.

]]>
mac環境で、Nuxt+Typescriptのプロジェクトを構築し、最終的にはAIアプリを開発しようと思います。
フロント側:Nuxt.js。サーバー側:python。

 

環境

OS/ミドルウェア バージョン
macOS Mojave 10.14
npm 6.14.8
yarn 1.22.5
Node.js v14.9.0
Nuxt.js v2.14.4
create-nuxt-app 3.2.0

 

1. Node.jsのローカル動作環境のインストール

Nuxt.jsを動作させるためにはNode.jsの動作環境が必要です。
なので、Node.jsのインストールをしていない場合は行ってください。

下記のURLを参考に構築します。手順通りにやればうまくいきます。

参考URL → [Mac, Homebrew] Node.jsのバージョン管理ツール、nodebrew導入手順

 

2. yarnのインストール

[yarnのインストール]

$ npm install --global yarn

 

3. Nuxt.jsのインストール

下記のURLを参考に構築します。手順通りにやればうまくいきます。

参考URL → create-nuxt-app v3.2.0を使ってNuxt+Typescriptのプロジェクトを構築する

 

4. 初期表示画面

 

補足

ディレクトリの設定

src/client ディレクトリにnode_modulesは移動しない。移動するとエラーが起きる。

nuxt.config.js に以下を追記します。

export default {
  srcDir: 'src/client'
}

tsconfig.json に以下を追記します。

{
  "compilerOptions": {
    省略
    "paths": {
      "~/*": [
        "./src/client/*"
      ],
      "@/*": [
        "./src/client/*"
      ]
    },
  },
}

importの使用例

ファイル:src/client/store/index.ts

// src/client/utils/store-accessor.ts をインポート
import { initialiseStores } from '@/utils/store-accessor'

参考URL → TypeScript の paths はパスを解決してくれないので注意すべし!

バーション確認方法

// Node.jsのパッケージ(Package )を管理する(Manager)ツール
npm -v
yarn -v
// Node.js
node -v
// Nuxt.js
npx nuxt -v
// create-nuxt-app
create-nuxt-app -v

参考URL → Nuxt.jsをインストールしVue.jsアプリケーション開発環境を構築する入門編

テーマの変更方法

ファイル:nuxt.config.js

vuetify: {
    customVariables: ['~/assets/variables.scss'],
    theme: {
      /*変更*/
      dark: false,
      themes: {
        dark: {
          primary: colors.blue.darken2,
          accent: colors.grey.darken3,
          secondary: colors.amber.darken3,
          info: colors.teal.lighten1,
          warning: colors.amber.base,
          error: colors.deepOrange.accent4,
          success: colors.green.accent3
        },
        /*以下追加*/
        light: {
          primary: colors.red.darken2,
          accent: colors.grey.darken3,
          secondary: colors.amber.darken3,
          info: colors.teal.lighten1,
          warning: colors.amber.base,
          error: colors.deepOrange.accent4,
          success: colors.green.accent3
        }
      }
    }
  },

参考URL → [Nuxt.js]Vuetifyのテーマを用いる

 

5. Typescriptの設定

TypeScriptをwebpackで処理するためには「ts-loader」を利用します。

※「Module not found: Error:Can’t resoleve ‘ts-loader’」のエラーが出たのでインストールした。

[ts-loaderのインストール]

$ yarn add -D ts-loader

Nuxt.jsでclass構文でコンポーネントを作る際に便利なパッケージです。

[nuxt-property-decoratorのインストール]

$ yarn add -D nuxt-property-decorator

yarn addのオプションについての参考URL → yarnのコマンドチートシート

 

また、次のタイプ宣言を追加して、Vueファイルのタイプを提供する必要があります。

[vue-shim.d.tsファイルの作成]

プロジェクト名/vue-shim.d.ts

declare module "*.vue" {
  import Vue from 'vue'
  export default Vue
}

参考URL → セットアップ

 

Typescriptの使用方法

class構文でコンポーネントの呼び出し

src/client/pages/index.vue

<template>
  <v-layout column>
    <!-- FormCard.vueを読み込み-->
    <form-card>
  </v-layout>
</template>

<script lang="ts">
import {Vue, Component} from 'nuxt-property-decorator'

@Component({
  components: {
    FormCard: () => import('@/components/Form/FormCard.vue')
  }
})

export default class Index extends Vue {
}
</script>

 

6. vuex-module-decoratorsの使用

Vuexのコーディングについて、クラス表記での記述を可能とするものです。

参考URL → Nuxt.js + TypeScript + Vuex で簡単な Todo リストを作るチュートリアル

 

7. axiosの使用

create-nuxt-appで「Nuxt.js modules: Axios」を選択したのに、使用できなかったので?「@nuxtjs/axios」をインストール

[axiosのインストール]

$ yarn add -D @nuxtjs/axios

[nuxt.config.jsの設定]

export default {
  省略
  /*
  ** Nuxt.js modules
  */
  modules: [
    '@nuxtjs/axios',
  ],
}

[tsconfig.jsonの設定]

{
  "compilerOptions": {
    省略
    "types": [
      "@types/node",
      "@nuxt/types",
      "@nuxtjs/axios"
    ]
  },
}

参考URL → Axiosモジュール

 

8.amcharts4の使用

今回は「TypeScript / ES6」を使用

[nuxt.config.jsの設定]

以下の設定をしないとimport出来なくてエラーが起きる。エラー内容「Unexpected token ‘export’」

export default {
  省略
  /*
  ** Build configuration
  ** See https://nuxtjs.org/api/configuration-build/
  */
  build: {
    transpile : ['@amcharts/amcharts4']
  },
}

参考URL → nuxtでは機能しません

[以下のURLから放射状ヒストグラムの設定]

参考URL → 放射状ヒストグラム

[TypeScriptの型エラーを修正]

let categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
↓
let categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis<am4charts.AxisRendererCircular>());

let valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
↓
let valueAxis = chart.yAxes.push(new am4charts.ValueAxis<am4charts.AxisRendererRadial>());

 

ソースの公開

ブランチ「client」に最新のソースをpushしている。

ソースのURL → gitソース一覧

 

The post create-nuxt-app v3.2.0を使ってNuxt+Typescriptのプロジェクトを構築 first appeared on サマンサ.

]]>
http://samancha.com/archives/2258/feed 0 2258
ConoHaのCentOS7でinstabotの使用方法 http://samancha.com/archives/2241 http://samancha.com/archives/2241#respond Fri, 28 Feb 2020 23:51:40 +0000 http://samancha.com/?p=2241 インスタグラムのフォロワーを増やすために使用してみる。 毎日いいねを自動でしてどのくらいフォロワーが増えるのか、経過を観察。 環境 OS/ミドルウェア バージョン CentOS 7.2.1511 Apache 2.4.6 […]

The post ConoHaのCentOS7でinstabotの使用方法 first appeared on サマンサ.

]]>
インスタグラムのフォロワーを増やすために使用してみる。 毎日いいねを自動でしてどのくらいフォロワーが増えるのか、経過を観察。

環境

OS/ミドルウェア バージョン
CentOS 7.2.1511
Apache 2.4.6
Python 2.7.5

 

Homebrew をインストール

下記の手順通りに作業を行う

Homebrew をインストール手順

 

Python3のインストール

ConoHaのCentOS7のデフォルトでは「Python 2.7.5」がインストールされています。今回はPython3を使用したいので、Python3のインストールを行います。

[Python3のインストール]

$ brew install python3

[Python3のバージョン確認]

$ python3 -V
Python 3.7.6

[Python3のインストールされた場所]

$ which python3
/home/linuxbrew/.linuxbrew/bin/python3

 

The post ConoHaのCentOS7でinstabotの使用方法 first appeared on サマンサ.

]]>
http://samancha.com/archives/2241/feed 0 2241
MySQLでタイムゾーンを設定するmac編 http://samancha.com/archives/2218 http://samancha.com/archives/2218#respond Mon, 09 Sep 2019 13:07:40 +0000 http://samancha.com/?p=2218 今回はMySQLのインストール〜MySQLでタイムゾーンを設定するまで、記載したいと思います。 何気に手こずったので…macでの手順となります。   環境 OS/ミドルウェア バージョン macOS Sierr […]

The post MySQLでタイムゾーンを設定するmac編 first appeared on サマンサ.

]]>
今回はMySQLのインストール〜MySQLでタイムゾーンを設定するまで、記載したいと思います。

何気に手こずったので…macでの手順となります。

 

環境

OS/ミドルウェア バージョン
macOS Sierra 10.12.6

 

MySQLのインストール

Homebrew でインストールします。Homebrew自体が入ってなければ、Homebrewの公式ページどおり、次のようにインストール

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

※ 執筆時とコマンド内容が変わってるかもしれないので、公式ページを確認ください。

インストール済みの人は、飛ばしてください。

[MySQLのインストール]

$ brew install mysql

[MySQLのバージョン確認]

$ mysql --version
mysql  Ver 8.0.17 for osx10.12 on x86_64 (Homebrew)

[MySQLのインストールされた場所]

$ which mysql
/usr/local/bin/mysql

[MySQLの起動]

$ mysql.server start 
Starting MySQL
.. SUCCESS!

[MySQLの接続]

$ mysql -u root
Welcome to the MySQL monitor.  Commands end with ; or \g.
Your MySQL connection id is 8
Server version: 8.0.17 Homebrew

Copyright (c) 2000, 2019, Oracle and/or its affiliates. All rights reserved.

Oracle is a registered trademark of Oracle Corporation and/or its
affiliates. Other names may be trademarks of their respective
owners.

Type 'help;' or '\h' for help. Type '\c' to clear the current input statement.

mysql>

接続できたようです。いったん、mysql> プロンプトで exit を入力し接続を切ります。

 

MySQL のセキュリティ設定

rootユーザのパスワードなどを変更するため、次のコマンドで以下の変更を行っていきます。

# mysql_secure_installationを実行
$ mysql_secure_installation

Securing the MySQL server deployment.

Connecting to MySQL using a blank password.

VALIDATE PASSWORD COMPONENT can be used to test passwords
and improve security. It checks the strength of password
and allows the users to set only those passwords which are
secure enough. Would you like to setup VALIDATE PASSWORD component?

# VALIDATE PASSWORDというコンポーネントをインストールするか。
# ゆるいパスワード(abc/passwdなど)を登録したい場合はn
Press y|Y for Yes, any other key for No: y

There are three levels of password validation policy:

LOW    Length >= 8
MEDIUM Length >= 8, numeric, mixed case, and special characters
STRONG Length >= 8, numeric, mixed case, special characters and dictionary                  file

# ログインパスワードの強度指定。
Please enter 0 = LOW, 1 = MEDIUM and 2 = STRONG: 0
Please set the password for root here.

# パスワード入力
New password: 

# 確認のためもう一度入力します
Re-enter new password: 

Estimated strength of the password: 100 
# 入力したパスワードで先に進みたければy
Do you wish to continue with the password provided?(Press y|Y for Yes, any other key for No) : y
By default, a MySQL installation has an anonymous user,
allowing anyone to log into MySQL without having to have
a user account created for them. This is intended only for
testing, and to make the installation go a bit smoother.
You should remove them before moving into a production
environment.

# 匿名ユーザを削除しますか?
Remove anonymous users? (Press y|Y for Yes, any other key for No) : y
Success.


Normally, root should only be allowed to connect from
'localhost'. This ensures that someone cannot guess at
the root password from the network.

# リモートログインを許可しない設定にしますか?
Disallow root login remotely? (Press y|Y for Yes, any other key for No) : y
Success.

By default, MySQL comes with a database named 'test' that
anyone can access. This is also intended only for testing,
and should be removed before moving into a production
environment.

# テスト用データベースを削除してもいいですか?
Remove test database and access to it? (Press y|Y for Yes, any other key for No) : y
 - Dropping test database...
Success.

 - Removing privileges on test database...
Success.

Reloading the privilege tables will ensure that all changes
made so far will take effect immediately.

# 権限関連の設定テーブルをリロードしますか?
Reload privilege tables now? (Press y|Y for Yes, any other key for No) : y
Success.

All done!

 

MySQLにログインできるか確認

$ mysql -u root -p
Enter password: 設定したパスワード
Welcome to the MySQL monitor.  Commands end with ; or \g.
Your MySQL connection id is 11
Server version: 8.0.17 Homebrew

Copyright (c) 2000, 2019, Oracle and/or its affiliates. All rights reserved.

Oracle is a registered trademark of Oracle Corporation and/or its
affiliates. Other names may be trademarks of their respective
owners.

Type 'help;' or '\h' for help. Type '\c' to clear the current input statement.

mysql>

 

MySQLでタイムゾーンを設定する

初期設定のままだと、time_zoneは「SYSTEM」になっているので、「Asia/Tokyo」に変更します。

[タイムゾーンの確認]

mysql> SHOW VARIABLES LIKE '%time_zone%';
+------------------+--------+
| Variable_name    | Value  |
+------------------+--------+
| system_time_zone | JST    |
| time_zone        | SYSTEM |
+------------------+--------+
2 rows in set (0.04 sec)

[タイムゾーンデータの確認]

mysql> select * from mysql.time_zone;
Empty set (0.06 sec)

タイムゾーンデータがない場合は、タイムゾーンデータのインポートを行います。

[タイムゾーンデータのインポート]

$ mysql_tzinfo_to_sql /usr/share/zoneinfo/ | mysql -u root mysql -p
Enter password: パスワードの入力

[タイムゾーンデータの確認]

mysql> select * from mysql.time_zone;
+--------------+------------------+
| Time_zone_id | Use_leap_seconds |
+--------------+------------------+
|            1 | N                |
|            2 | N                |
|            3 | N                |
|            4 | N                |
|            5 | N                |
省略
|          590 | N                |
|          591 | N                |
|          592 | N                |
|          593 | N                |
|          594 | N                |
|          595 | N                |
+--------------+------------------+
595 rows in set (0.00 sec)

[my.cnfを変更]

/usr/local/etc/my.cnf

[mysqld]
default-time-zone = 'Asia/Tokyo'

[MySQLを再起動]

$ mysql.server stop
Shutting down MySQL
.... SUCCESS!

$ mysql.server start
Starting MySQL
.. SUCCESS!

[タイムゾーンの確認]

mysql> SHOW VARIABLES LIKE '%time_zone%';
+------------------+------------+
| Variable_name    | Value      |
+------------------+------------+
| system_time_zone | JST        |
| time_zone        | Asia/Tokyo |
+------------------+------------+
2 rows in set (0.01 sec)

 
 

The post MySQLでタイムゾーンを設定するmac編 first appeared on サマンサ.

]]>
http://samancha.com/archives/2218/feed 0 2218
仮想環境: venvでPython&Djangoの構築mac編 http://samancha.com/archives/2208 http://samancha.com/archives/2208#respond Thu, 06 Dec 2018 13:46:30 +0000 http://samancha.com/?p=2208 今回は話題のPython&Djangoで色んなことをチャレンジしてみます。 とりあえずやったことを記載していこうと思います。   環境 OS/ミドルウェア バージョン macOS Sierra 10.1 […]

The post 仮想環境: venvでPython&Djangoの構築mac編 first appeared on サマンサ.

]]>
今回は話題のPython&Djangoで色んなことをチャレンジしてみます。

とりあえずやったことを記載していこうと思います。

 

環境

OS/ミドルウェア バージョン
macOS Sierra 10.12.6
pip 10.0.1
Python 3.7.1
Django 2.1.4

 

Python3のインストール

macのデフォルトでは「Python 2.7.10」がインストールされています。今回はPython3を使用したいので、Python3のインストールを行います。

[Python3のインストール]

$ brew install python3

[Python3のバージョン確認]

$ python3 -V
Python 3.7.1

[Python3のインストールされた場所]

$ which python3
/usr/local/bin/python3

 

venv: Python 仮想環境管理

下記のURLを参考に構築します。手順通りにやればうまくいきます。

参考URL → venv: Python 仮想環境管理

 

Djangoインストール

参考URL → クイックインストールガイド

venvの中にインストールします。

[開発環境に移動]

$ source [newenvname]/bin/activate

自分の場合は → $ source venv/bin/activate

[移動された状態]

(venv) MacBook-Pro:automation ユーザ名$ Python3 -V
Python 3.7.1

[Djangoインストール]

$ pip install Django

[Djangoバージョン確認]

$ pip freeze
Django==2.1.4
pytz==2018.7

[プロジェクトを作成する]

$ django-admin startproject mysite

現在のディレクトリに mysite ディレクトリが作成されます。

[ディレクトリの確認]

$ ls -al
total 0
drwxr-xr-x   5 ユーザ名  staff  170 12  6 22:02 .
drwxr-xr-x   3 ユーザ名  staff  102 12  5 21:35 ..
drwxr-xr-x  14 ユーザ名  staff  476 12  6 21:59 .git
drwxr-xr-x   4 ユーザ名  staff  136 12  6 22:02 mysite
drwxr-xr-x   7 ユーザ名  staff  238 12  5 21:44 venv

 
 

The post 仮想環境: venvでPython&Djangoの構築mac編 first appeared on サマンサ.

]]>
http://samancha.com/archives/2208/feed 0 2208
オンラインショップはじめませんか? http://samancha.com/archives/2199 http://samancha.com/archives/2199#respond Sat, 07 Jul 2018 09:57:12 +0000 http://samancha.com/?p=2199 近年オンラインショップで買い物をする人が増えています。 私もamazonを頻繁に利用しています。今では欠かせない程です(笑) 皆さんもオンラインショップをはじめませんか? 私が支援致します。ご連絡下さい。   […]

The post オンラインショップはじめませんか? first appeared on サマンサ.

]]>
近年オンラインショップで買い物をする人が増えています。

私もamazonを頻繁に利用しています。今では欠かせない程です(笑)

皆さんもオンラインショップをはじめませんか?

私が支援致します。ご連絡下さい。

 

デモサイト

下記にサンプルとしてオンラインショップを設置しています。実際に見て、触って貰って構いません。

オンラインショップ

 

受注金額

 

1.A社

 

受注金額の目安

5万円 〜  1000万円
月商1000万程度
初期費用:3000000円〜
月額保守:100000円〜(1年のご契約)
 

2.B社

 

受注金額の目安

・タイプA
初期費用:2,800,000円〜
利用価格:年額280,000円〜
・タイプB
初期費用:300,000円〜
利用価格:月額160,000円〜
 

3.C社

 

受注金額の目安

初期費用:500,000円〜
利用価格:月額100,000円〜
 

運用費

 

1.サーバー

 

1.AWS

1年間は無料で使用できる
参考URL:AWS

EC2(オンデマンド)

type:t2.nano
料金:毎月 $ 5.57 → 約614円
追加料金:使用した分だけプラス

料金表

参考URL:料金表

2.KAGOYA

参考URL:https://www.kagoya.jp/cloud/vps/

Open VZ(SSDモデル)

type:3コア
料金:毎月 864円

料金表

参考URL:https://www.kagoya.jp/cloud/vps/price/#price2

 

2.決済代行費用

 

Amazon Payプラグイン(3.0系)

無料でダウンロード

初期費用

0円

月額

5000円

決済代行費用

料率が知りたいなら連絡

 

3.ドメイン

 

お名前.com

会社名.com
※あれば不要

年額

1150円

 

3.運用代行&支援サポート

 

月額

初回はお試しで料金は頂きません。ですが、売上が上がり次第ご相談で費用は決定したいと思います。

 

運用業務

 

1.商品について

 

商品の情報を提示してもらう

画像
商品名
商品の説明分

 

2.商品の発送

 

商品が購入されたらメールが届きます

メールの内容を確認

商品の梱包

商品をダンボールなどに入れます

宅配便(集荷)

配送の伝票をwebで記載するか
配送の伝票を紙で記載するか

 

開発費用

オンラインショップの開発はデモサイトで宜しければ料金は頂きません0円です。

 

オンラインショップ開設

月7000円くらいで始められます。

 

まとめ

興味があった方はご連絡下さい。とりあえずお試しだけでも承ります。
ご連絡お待ちしております。
 
 

The post オンラインショップはじめませんか? first appeared on サマンサ.

]]>
http://samancha.com/archives/2199/feed 0 2199
旧字体漢字の文字化けを防ぐ http://samancha.com/archives/2143 http://samancha.com/archives/2143#respond Sat, 02 Jun 2018 07:16:29 +0000 http://samancha.com/?p=2143 csvファイルを読み込ませる処理で、文字コードを変更する処理がよくあります。 そのときに、「Shift-JIS」から「UTF-8」に変換をすると思いますが、そのときに文字列をうまく変換できない時があります。 きちんと文字 […]

The post 旧字体漢字の文字化けを防ぐ first appeared on サマンサ.

]]>
csvファイルを読み込ませる処理で、文字コードを変更する処理がよくあります。

そのときに、「Shift-JIS」から「UTF-8」に変換をすると思いますが、そのときに文字列をうまく変換できない時があります。

きちんと文字列が読めるようにしたいと思います。

 

環境

OS/ミドルウェア バージョン
CentOS 7.2.1511
Apache 2.4.6
PHP 7.0.22
MySQL 5.7.17

 

mb_convert_encodingを使用

mb_convert_encoding( $buff, 'UTF-8', 'SJIS-win');

ポイントはSJIS-winを使用するところです。

詳しくはコチラ → はしご高などの旧字体漢字の文字化けを防ぐ

 

The post 旧字体漢字の文字化けを防ぐ first appeared on サマンサ.

]]>
http://samancha.com/archives/2143/feed 0 2143
phpでstr_replaceを使用してみた http://samancha.com/archives/2140 http://samancha.com/archives/2140#respond Sat, 02 Jun 2018 06:50:02 +0000 http://samancha.com/?p=2140 csvでデータを読み込んだら文字列で「””テスト””」みたいな感じで文字列がおかしなことになっていた。 普通はないと思いますが、対処する方法を記載します。   環 […]

The post phpでstr_replaceを使用してみた first appeared on サマンサ.

]]>
csvでデータを読み込んだら文字列で「””テスト””」みたいな感じで文字列がおかしなことになっていた。

普通はないと思いますが、対処する方法を記載します。

 

環境

OS/ミドルウェア バージョン
CentOS 7.2.1511
Apache 2.4.6
PHP 7.0.22
MySQL 5.7.17

 

str_replaceを使用

 

問題の文字列

string(11) ""テスト""

$valの中身は上記の文字列が入っているとします。

 

$valの中身を作成するなら以下を参考

$val = '"'."テスト".'"';

 

str_replaceを使用

$temp = str_replace('"','',$val);
var_dump($temp);

 

$tempの中身

string(9) "テスト"

 

まとめ

csvファイルをそのまま開いて編集すると文字列がおかしなことになります。

恐らく、今回起こった現象はそのせいだと思う。

csvファイルを変更したい場合はテキストエディタで変更すればおかしな文字列にならない。

ファイルを右クリックし、このアプリケーションで開くの中に自分がインストールしてあるテキストエディタを選択し開けばOKです。

 

The post phpでstr_replaceを使用してみた first appeared on サマンサ.

]]>
http://samancha.com/archives/2140/feed 0 2140
EC-CUBE3をやってみた http://samancha.com/archives/2065 http://samancha.com/archives/2065#respond Sat, 28 Apr 2018 03:08:43 +0000 http://samancha.com/?p=2065 今回はECサイトでオンラインショップを作成したいと思います。簡単にオンラインショップが出来ると言うことでチャレンジ。 とりあえずやったことを記載していこうと思います。   環境 OS/ミドルウェア バージョン […]

The post EC-CUBE3をやってみた first appeared on サマンサ.

]]>
今回はECサイトでオンラインショップを作成したいと思います。簡単にオンラインショップが出来ると言うことでチャレンジ。

とりあえずやったことを記載していこうと思います。

 

環境

OS/ミドルウェア バージョン
CentOS 7.2.1511
Apache 2.4.6
PHP 7.0.22
MySQL 5.7.17
EC-CUBE 3.0.15

 

ページ内リンク

索引
EC-CUBE用のDB作成
EC-CUBEのインストール
初期設定
ロゴのデフォルト文字変更
ロゴの店名変更
親カテゴリー追加
子カテゴリー追加
子カテゴリー並び順変更
カテゴリの一括登録
商品の一括登録
新着商品部分の作成
新着情報部分の作成
ギャラリー部分の作成
フッター部分の変更
ログイン部分の作成
カゴの中部分の作成
ロゴ部分の作成
商品検索部分の作成

 

EC-CUBE用のDB作成

サーバにEC-CUBE用のデータベースを作成します。サーバによってデータベースの作成方法は異なります。
作成したデータベース名、データベースにアクセスするためのユーザ名とパスワードが後の作業で必要になりますのでメモしておきます。

 

EC-CUBEのインストール

EC-CUBE 開発ドキュメントの手順通りにします。私の場合は、「Webインストーラーを利用したインストール方法」でやりました。

EC-CUBE 開発ドキュメントはコチラ → インストール方法

 

EC-CUBEのインストーラーが実行される

EC-CUBEのインストーラーが実行されたら参考 コチラ → ネットショップ構築システムEC-CUBE Version3をインストールする

※権限チェックが行われたら、NGになります。なので、所有者とグループの変更。

$ sudo chown -R apache:操作を行なうユーザ名 ec-cube

後は手順通りにやればOKです。無事にインストール出来たらログインして管理画面とサイトをみてみましょう。

 

初期設定

サイトを参考 → EC-CUBE3を導入したらやっておきたい初期設定まとめ

 

ショップマスター

 

地図設定

まずは、「緯度」「経度」を調べます。URLにアクセス → Googleマップで緯度・経度を求める

検索フォームに入力し、[検索]をクリック。「緯度」「経度」が表示されます。コピーします。

管理画面に移動し、設定 → 基本情報設定 → ショップマスター

地図設定の「緯度」「経度」にペーストします。

 

Google Maps APIキー取得方法

サイトを参考 → 【2018年度版】Google Maps の APIキー を簡単に取得する

サイトの手順に沿って実行していきます。

 

APIキーの使い方

サイトを参考 → EC-CUBE「当サイトについて」などで、GoogleMapが表示されない。(管理画面では緯度・経度が登録されている)

私の場合は、「2 EC-CUBE3系」の設定です。

 

地図が表示されるか確認

サイトを表示します。フッターにある「当サイトについて」をクリック。

当サイトについての覧に地図が表示されました。

ロゴのデフォルト文字変更

 

ファイルの修正

管理画面 > コンテンツ管理 > ブロック管理 > ロゴ

[編集]をクリック

[変更前]

<div class="header_logo_area">
                <p class="copy">くらしを楽しむライフスタイルグッズ</p>
                <h1 class="header_logo"><a href="{{ url('homepage') }}">{{ BaseInfo.shop_name }}</a></h1>
            </div>

[変更後]

<div class="header_logo_area">
                <p class="copy">食事を楽しむライフスタイルプレゼント</p>
                <h1 class="header_logo"><a href="{{ url('homepage') }}">{{ BaseInfo.shop_name }}</a></h1>
            </div>

 

キャッシュのクリア

管理画面 > コンテンツ管理 > キャッシュ管理

[キャッシュ削除]をクリック

 

変更後の確認

「shift」を押しながらリロードして、確認。

[変更前]

[変更後]

 

ロゴの店名変更

 

店名の変更

管理画面 > 設定 > 基本情報設定 > ショップマスター

店名に入力し、[登録]をクリック

 

変更後の確認

リロードして、確認。

[変更前]

[変更後]

 

親カテゴリー追加

 

カテゴリの追加

管理画面 > 商品管理 > カテゴリ登録

カテゴリを追加したい物をフォームに入力し、[カテゴリ作成]をクリック

カテゴリが追加されます。

 

変更後の確認

リロードして、確認。

[変更前]

[変更後]

 

子カテゴリー追加

 

カテゴリの追加

管理画面 > 商品管理 > カテゴリ登録

カテゴリをクリック。今回は生キャラメル

カテゴリを追加したい物をフォームに入力し、[カテゴリ作成]をクリック

カテゴリが追加されます。

 

変更後の確認

リロードして、確認。

[変更前]

[変更後]

 

子カテゴリー並び順変更

 

カテゴリの並び順変更

管理画面 > 商品管理 > カテゴリ登録

並び順を変更したいカテゴリにマウスを持っていきます。
カーソルの形が十字架みたいに変更されるので、左クリックしたまま移動したいとこに持っていきます。
そうすると移動が出来ます。

 

変更後の確認

リロードして、確認。

[変更前]

[変更後]

 

カテゴリの一括登録

参考URL → カテゴリCSV登録

 

商品の一括登録

参考URL → 商品CSV登録

 

新着商品部分の作成

 

新規ブロックを追加する

参考URL:ECCUBE3サイドブロックに独自メニューを設置する方法

管理画面 >コンテンツ管理 >ブロック管理

最下部の【新規入力】より新規ブロックを追加します。

[ブロック名]

新着商品(オリジナル)

[ファイル名]

new_product_original

[ブロックデータ]

<div id="contents_top">
    <div id="item_list">
    <h2 class="title">Featured</h2>
	<div class="row">
        <div class="col-sm-4 col-xs-12">
            <div class="pickup_item">
                <a href="#">
                    <div class="featured_item_photo"><img src="{{ app.config.front_urlpath }}/img/top/img03.jpg"></div>
                    <dl>
                        <dt class="item_name text-warning">お気に入りのエスプレッソタイム</dt>
                        <dd class="item_comment">コーヒータイムを上質な時間にしてくれる、口当たりのよさとデザイン性を兼ね備えたエスプレッソカップを集めました・・・</dd>
                        <dd class="more_link text-warning">read more</dd>
                    </dl>
                </a>
            </div>
        </div>
        <div class="col-sm-4 col-xs-12">
            <div class="pickup_item">
                <a href="#">
                    <div class="featured_item_photo"><img src="{{ app.config.front_urlpath }}/img/top/img04.jpg"></div>
                    <dl>
                        <dt class="item_name text-warning">アウトドアにおすすめのアイテム</dt>
                        <dd class="item_comment">カジュアルすぎない感じがちょうどよい、大人のためのアウトドアマガジンから、バイヤーおすすめのアイテムをセレクト・・・</dd>
                        <dd class="more_link text-warning">read more</dd>
                    </dl>
                </a>
            </div>
        </div>
        <div class="col-sm-4 col-xs-12">
            <div class="pickup_item">
                <a href="#">
                    <div class="featured_item_photo"><img src="{{ app.config.front_urlpath }}/img/top/img05.jpg"></div>
                    <dl>
                        <dt class="item_name text-warning">フランス製のデッドストック</dt>
                        <dd class="item_comment">60~70年代のフランス製のデッドストックの器を集めました。絶妙な色合いと、独特の優しい風合いをお楽しみいただけ・・・</dd>
                        <dd class="more_link text-warning">read more</dd>
                    </dl>
                </a>
            </div>
        </div>
    </div>
</div>

<div id="item_list">
<h2 class="title">New Arrival</h2>
	<ul class="row no-padding">
		<li class="col-sm-3 col-xs-6">
			<div class="pickup_item">
				<a href="/products/detail/4">
					<div class="item_photo"><img src="{{ app.config.image_save_urlpath }}/pic04.jpg"></div>
					<dl>
					<dt class="item_name">マカロン</dt>
					<dd class="item_price">¥ 7,560</dd>
					</dl>
				</a>
			</div>
		</li><li class="col-sm-3 col-xs-6">
			<div class="pickup_item">
				<a href="/products/detail/16">
					<div class="item_photo"><img src="{{ app.config.image_save_urlpath }}/pic05.jpg"></div>
					<dl>
					<dt class="item_name">マカロン</dt>
					<dd class="item_price">¥ 1,620</dd>
					</dl>
				</a>
			</div>
		</li><li class="col-sm-3 col-xs-6">
			<div class="pickup_item">
				<a href="/products/detail/15">
					<div class="item_photo"><img src="{{ app.config.image_save_urlpath }}/pic06.jpg"></div>
					<dl>
					<dt class="item_name">フィナンシェ</dt>
					<dd class="item_price">¥ 1,728</dd>
					</dl>
				</a>
			</div>
		</li><li class="col-sm-3 col-xs-6">
			<div class="pickup_item">
				<a href="/products/detail/14">
					<div class="item_photo"><img src="{{ app.config.image_save_urlpath }}/pic07.jpg"></div>
					<dl>
					<dt class="item_name">チョコレート</dt>
					<dd class="item_price">¥ 1,728</dd>
					</dl>
				</a>
			</div>
		</li>
	</ul>
	<ul class="row no-padding">
		<li class="col-sm-3 col-xs-6">
			<div class="pickup_item">
				<a href="/products/detail/13">
					<div class="item_photo"><img src="{{ app.config.image_save_urlpath }}/pic08.jpg"></div>
					<dl>
					<dt class="item_name">ロールケーキ</dt>
					<dd class="item_price">¥ 1,728</dd>
					</dl>
				</a>
			</div>
		</li><li class="col-sm-3 col-xs-6">
			<div class="pickup_item">
				<a href="/products/detail/12">
					<div class="item_photo"><img src="{{ app.config.image_save_urlpath }}/pic09.jpg"></div>
					<dl>
					<dt class="item_name">チョコレート</dt>
					<dd class="item_price">¥ 1,836</dd>
					</dl>
				</a>
			</div>
		</li><li class="col-sm-3 col-xs-6">
			<div class="pickup_item">
				<a href="/products/detail/11">
					<div class="item_photo"><img src="{{ app.config.image_save_urlpath }}/pic10.jpg"></div>
					<dl>
					<dt class="item_name">マカロン</dt>
					<dd class="item_price">¥ 1,836</dd>
					</dl>
				</a>
			</div>
		</li><li class="col-sm-3 col-xs-6">
			<div class="pickup_item">
				<a href="/products/detail/10">
					<div class="item_photo"><img src="{{ app.config.image_save_urlpath }}/pic11.jpg"></div>
					<dl>
					<dt class="item_name">マカロンマカロンマカロンマカロンマカロン</dt>
					<dd class="item_price">¥ 1,836</dd>
					</dl>
				</a>
			</div>
		</li>
	</ul>  
	<div class="btn_circleArrow">
		<a href="./products/list">商品一覧</a>
	</div>
    </div><!-- /item_list -->
</div><!-- /contents_top -->

ブロック名、ファイル名、ブロックデータを入力し[登録ボタン]をクリック。

新着商品(オリジナル)が追加されました。

 

データベースのロジックフラッグを変更する

ブロックを新規追加しただけでは実際にはまだ表示はされません。表示させるためには追加したブロックのロジックフラッグをデータベースで直接編集する必要があります。

テーブル名「dtb_block」「new_product_original」の「deletable_flg」を「1」から「0」へ変更します。

 

スタイルの変更

style.cssのファイルに下記を追記して下さい。

対象ファイル:/html/template/default/css/style.css

[ファイルの中身]

/* --------------------------------
	新着商品
-------------------------------- */
#topicpath li:after {
    content: " > ";
    margin: 0 5px;
}

ol#list_header_menu {
    background-color: #f5f5f5;
    padding: 10px;
    border-bottom: none;
}

ol#list_header_menu li {
    letter-spacing: 0.07em;
}

ol#list_header_menu li a {
    color: #333;
}

ol#list_header_menu li a:hover {
    text-decoration: underline;
}

.item_comment {
    color: #333;
    font-size: 90%;
}

#item_list {
    margin-bottom: 60px;
    text-align: center;
}

#item_list .item_name {
    text-align: center;
}

#item_list .item_price {
    text-align: center;
    color: #333;
    font-size: 120%;
    font-style: italic;
}

#item_list .item_photo {
    margin: 0 auto;
    height: 200px;
    width: 200px;
    overflow: hidden;
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    border-radius: 100px;

}

#item_list .item_photo img {
    min-width: 150%;
    width: auto;
    height: auto;
    min-height: 100%;
    margin-left: -25%;
    margin-top: 0;
}

#item_list dl {
    margin-top: 30px;
    margin-bottom: 30px;
}

@media only screen and (max-width:980px){
    #item_list .item_photo {
	height: 180px;
	width: 180px;
    }
}

@media only screen and (max-width:800px){
    #item_list .item_photo {
	height: 150px;
	width: 150px;
    }
}

@media only screen and (max-width:768px){
    #item_list .item_photo {
	height: 150px;
	width: 150px;
    }
    
    #item_list .item_photo img {
	width: 230px;
	max-width: 200%;
    }
}

/* title ---------------------------------------------- */
.text-center {
    text-align: center;
}

.title{
    margin-bottom: 40px;
    font-size: 32px;
    font-weight: 700;
    font-family: 'Montserrat', sans-serif;
    text-align: center;
    color: #333;
}

.title {
    padding-bottom: .5em;
    border-bottom: 1px solid #333;
}

/* Button ---------------------------------------------- */   
#item_list ul li {
    margin-bottom: 30px;
}

.btn_circleArrow {
    text-align: center;
}

.btn_circleArrow a {
    position: relative;
    display: inline-block;
    margin: 0 auto;
    padding: 5px 40px;
    color: #fff;
    background-color: #E98E8E;
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    border-radius: 100px;
    border: solid 1px #E98E8E;
    font-size: 16px;
    font-size: 1.6rem;
    letter-spacing: 0.15em;
    text-align: center;
}

 

レイアウトの編集

管理画面 > コンテンツ管理 > ページ管理

ページ一覧にあるTOPページの「…」をクリック

ページ一覧にあるTOPページの「レイアウト編集」をクリック

新着商品と新着商品(オリジナル)を入れ替えます。

プレビューで確認し、OKならば[登録]をクリック。

 

キャッシュのクリア

管理画面 > コンテンツ管理 > キャッシュ管理

[キャッシュ削除]をクリック

 

変更後の確認

「shift」を押しながらリロードして、確認。

[変更前]

[変更後]

 

新着情報部分の作成

 

新規ブロックを追加する

参考URL:ECCUBE3サイドブロックに独自メニューを設置する方法

管理画面 >コンテンツ管理 >ブロック管理

最下部の【新規入力】より新規ブロックを追加します。

[ブロック名]

新着情報(オリジナル)

[ファイル名]

news_original

[ブロックデータ]

{#
This file is part of EC-CUBE

Copyright(c) 2000-2015 LOCKON CO.,LTD. All Rights Reserved.

http://www.lockon.co.jp/

This program is free software; you can redistribute it and/or
modify it under the terms of the GNU General Public License
as published by the Free Software Foundation; either version 2
of the License, or (at your option) any later version.

This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
GNU General Public License for more details.

You should have received a copy of the GNU General Public License
along with this program; if not, write to the Free Software
Foundation, Inc., 59 Temple Place - Suite 330, Boston, MA  02111-1307, USA.
#}
<script type="text/javascript">
$(function(){
    $(".newslist").each(function(){
        var listLenght = $(this).find("dl").length;
        if(listLenght>5){
            $(this).find("dl:gt(4)").each(function(){$(this).hide();});
            $(this).append('<a id="news_readmore">» もっと見る</a>');
            var dispNum = 5;
            $(this).find("#news_readmore").click(function(){
                dispNum +=5;
                $(this).parent().find("dl:lt("+dispNum+")").show(400);
                if (dispNum>=listLenght) {
                    $(this).hide();
                }
            })
        }
    });
});
</script>
<div class="col-sm-6 col-xs-12">
    <div class="col-sm-12 col-xs-12 news_contents">
        <div id="news_area_original">
            <h2 class="title">News & Topics</h2>
            <div class="accordion">
                <div class="newslist">

                    {% for News in NewsList %}
                    <dl>
                        <dt>
                            <span class="date">{{ News.date|date("Y/m/d") }}</span>
                            <span class="news_title">
                                {{ News.title }}
                            </span>
                            {% if News.comment or News.url %}
                            <span class="angle-circle"><svg class="cb cb-angle-down"><use xlink:href="#cb-angle-down" /></svg></span>
                            {% endif %}
                        </dt>
                        {% if News.comment or News.url %}
                        <dd>{{ News.comment|raw|nl2br}}
                            {% if News.url %}<br>
                            <a href="{{ News.url }}" {% if News.link_method == '1' %}target="_blank"{% endif %}>
                            詳しくはこちら
                            </a>{% endif %}
                        </dd>
                        {% endif %}
                    </dl>
                    {% endfor %}

                </div>
            </div>
        </div>
    </div>
</div>

ブロック名、ファイル名、ブロックデータを入力し[登録ボタン]をクリック。

後で写真を追加

新着商品(オリジナル)が追加されました。

後で写真を追加

 

データベースのロジックフラッグを変更する

ブロックを新規追加しただけでは実際にはまだ表示はされません。表示させるためには追加したブロックのロジックフラッグをデータベースで直接編集する必要があります。

テーブル名「dtb_block」「news_original」の「logic_flg」を「0」から「1」「deletable_flg」を「1」から「0」へ変更します。

後で写真を追加

 

ECCUBE3構成ファイルよりコントローラーを登録

続いて追加した「メインメニューブロック」のコントローラーを登録します。

対象ファイル:/src/Eccube/ControllerProvider/FrontControllerProvider.php

FrontControllerProvider.phpに「//block」が定義されている箇所があるので以下の一文をブロック定義部の最下部に追加します。

// block
$c->match('/block/category', '\Eccube\Controller\Block\CategoryController::index')->bind('block_category');
$c->match('/block/cart', '\Eccube\Controller\Block\CartController::index')->bind('block_cart');
$c->match('/block/search_product', '\Eccube\Controller\Block\SearchProductController::index')->bind('block_search_product');
$c->match('/block/news', '\Eccube\Controller\Block\NewsController::index')->bind('block_news');
$c->match('/block/login', '\Eccube\Controller\Block\LoginController::index')->bind('block_login');
// 追加
$c->match('/block/news_original', '\Eccube\Controller\Block\NewsOriginalController::index')->bind('block_news_original');

 

ECCUBE3構成ファイルよりコントローラーを作成

コントローラーの登録ができたら続いてコントローラの作成を行います。今回は既存の新着情報メニューをコピーして新しいメニューを作るので以下のファイルをそのままコピーして「NewsOriginalController.php」リネームします。

/src/Eccube/Controller/Block/NewsController.php

リネームしたファイルの内容をリネームしたものに変更。

<?php
/*
 * This file is part of EC-CUBE
 *
 * Copyright(c) 2000-2015 LOCKON CO.,LTD. All Rights Reserved.
 *
 * http://www.lockon.co.jp/
 *
 * This program is free software; you can redistribute it and/or
 * modify it under the terms of the GNU General Public License
 * as published by the Free Software Foundation; either version 2
 * of the License, or (at your option) any later version.
 *
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU General Public License for more details.
 *
 * You should have received a copy of the GNU General Public License
 * along with this program; if not, write to the Free Software
 * Foundation, Inc., 59 Temple Place - Suite 330, Boston, MA  02111-1307, USA.
 */


namespace Eccube\Controller\Block;

use Eccube\Application;

class NewsController
{
    public function index(Application $app)
    {
        $NewsList = $app['orm.em']->getRepository('\Eccube\Entity\News')
            ->findBy(
                array(),
                array('rank' => 'DESC')
            );

        return $app->render('Block/news.twig', array(
            'NewsList' => $NewsList,
        ));
    }
}

↓に変更

<?php
/*
 * This file is part of EC-CUBE
 *
 * Copyright(c) 2000-2015 LOCKON CO.,LTD. All Rights Reserved.
 *
 * http://www.lockon.co.jp/
 *
 * This program is free software; you can redistribute it and/or
 * modify it under the terms of the GNU General Public License
 * as published by the Free Software Foundation; either version 2
 * of the License, or (at your option) any later version.
 *
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU General Public License for more details.
 *
 * You should have received a copy of the GNU General Public License
 * along with this program; if not, write to the Free Software
 * Foundation, Inc., 59 Temple Place - Suite 330, Boston, MA  02111-1307, USA.
 */


namespace Eccube\Controller\Block;

use Eccube\Application;

class NewsOriginalController
{
    public function index(Application $app)
    {
        $NewsList = $app['orm.em']->getRepository('\Eccube\Entity\News')
            ->findBy(
                array(),
                array('rank' => 'DESC')
            );

        return $app->render('Block/news_original.twig', array(
            'NewsList' => $NewsList,
        ));
    }
}

 

スタイルの変更

style.cssのファイルに下記を追記して下さい。

対象ファイル:/html/template/default/css/style.css

[ファイルの中身]

/* --------------------------------
	新着情報
-------------------------------- */

.news_contents {
    padding: 0 16px 0 0;
}
        
#news_area_original {
    margin-bottom: 60px;
    background: transparent;
}

#news_area_original h2.title {
    margin-bottom: 0;
}

 

レイアウトの編集

管理画面 > コンテンツ管理 > ページ管理

ページ一覧にあるTOPページの「…」をクリック

ページ一覧にあるTOPページの「レイアウト編集」をクリック

新着情報と新着情報(オリジナル)を入れ替えます。

後で写真を追加

プレビューで確認し、OKならば[登録]をクリック。

後で写真を追加

 

キャッシュのクリア

管理画面 > コンテンツ管理 > キャッシュ管理

[キャッシュ削除]をクリック

 

変更後の確認

「shift」を押しながらリロードして、確認。

[変更前]

[変更後]

後で写真を追加

 

ギャラリー部分の作成

 

新規ブロックを追加する

参考URL:ECCUBE3サイドブロックに独自メニューを設置する方法

管理画面 >コンテンツ管理 >ブロック管理

最下部の【新規入力】より新規ブロックを追加します。

[ブロック名]

ギャラリー(オリジナル)

[ファイル名]

garally_original

[ブロックデータ]

{#
This file is part of EC-CUBE

Copyright(c) 2000-2015 LOCKON CO.,LTD. All Rights Reserved.

http://www.lockon.co.jp/

This program is free software; you can redistribute it and/or
modify it under the terms of the GNU General Public License
as published by the Free Software Foundation; either version 2
of the License, or (at your option) any later version.

This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
GNU General Public License for more details.

You should have received a copy of the GNU General Public License
along with this program; if not, write to the Free Software
Foundation, Inc., 59 Temple Place - Suite 330, Boston, MA  02111-1307, USA.
#}
<div class="item_gallery_original col-sm-6 col-xs-12">
    <h2 class="title">Gallery</h2>
    <ul class="row">
        <li class="col-sm-3 col-xs-4"><a href="/products/detail/4" class="item_photo"><img src="{{ app.config.front_urlpath }}/img/top/img10.jpg"></a></li>
        <li class="col-sm-3 col-xs-4"><a href="/products/detail/5" class="item_photo"><img src="{{ app.config.front_urlpath }}/img/top/img11.jpg"></a></li>
        <li class="col-sm-3 col-xs-4"><a href="/products/detail/6" class="item_photo"><img src="{{ app.config.front_urlpath }}/img/top/img12.jpg"></a></li>
        <li class="col-sm-3 col-xs-4"><a href="/products/detail/7" class="item_photo"><img src="{{ app.config.front_urlpath }}/img/top/img13.jpg"></a></li>
        <li class="col-sm-3 col-xs-4"><a href="/products/detail/8" class="item_photo"><img src="{{ app.config.front_urlpath }}/img/top/img14.jpg"></a></li>
        <li class="col-sm-3 col-xs-4"><a href="/products/detail/9" class="item_photo"><img src="{{ app.config.front_urlpath }}/img/top/img15.jpg"></a></li>
        <li class="col-sm-3 col-xs-4"><a href="/products/detail/10" class="item_photo"><img src="{{ app.config.front_urlpath }}/img/top/img16.jpg"></a></li>
        <li class="col-sm-3 col-xs-4"><a href="/products/detail/11" class="item_photo"><img src="{{ app.config.front_urlpath }}/img/top/img17.jpg"></a></li>
        <li class="col-sm-3 col-xs-4"><a href="/products/detail/12" class="item_photo"><img src="{{ app.config.front_urlpath }}/img/top/img18.jpg"></a></li>
        <li class="col-sm-3 col-xs-4"><a href="/products/detail/13" class="item_photo"><img src="{{ app.config.front_urlpath }}/img/top/img19.jpg"></a></li>
        <li class="col-sm-3 col-xs-4"><a href="/products/detail/14" class="item_photo"><img src="{{ app.config.front_urlpath }}/img/top/img20.jpg"></a></li>
        <li class="col-sm-3 col-xs-4"><a href="/products/detail/15" class="item_photo"><img src="{{ app.config.front_urlpath }}/img/top/img21.jpg"></a></li>
    </ul>
    <!-- フリーエリア -->
    <div class="txt_bnr">
        {%- if BaseInfo.delivery_free_amount -%}
            <strong>{{ BaseInfo.delivery_free_amount|number_format }}円以上の購入で配送料無料</strong><br>一部地域は除く
        {%- else -%}
            <strong>0円以上の購入で配送料無料</strong><br>一部地域は除く
        {%- endif -%}
    </div>
    <div class="text-right sns_link">
        <!-- Facebook -->
        <a href="" target="_blank"><i class="fa fa-facebook-square" aria-hidden="true"></i></a> 
        <!-- Twitter -->
        <a href="" target="_blank"><i class="fa fa-twitter-square" aria-hidden="true"></i></a> 
        <!-- Instagram -->
        <a href="" target="_blank"><i class="fa fa-instagram" aria-hidden="true"></i></a> 
    </div>
</div>

ブロック名、ファイル名、ブロックデータを入力し[登録ボタン]をクリック。

後で写真を追加

新着商品(オリジナル)が追加されました。

後で写真を追加

 

データベースのロジックフラッグを変更する

ブロックを新規追加しただけでは実際にはまだ表示はされません。表示させるためには追加したブロックのロジックフラッグをデータベースで直接編集する必要があります。

テーブル名「dtb_block」「new_product_original」の「deletable_flg」を「1」から「0」へ変更します。

後で写真を追加

 

スタイルの変更

style.cssのファイルに下記を追記して下さい。

対象ファイル:/html/template/default/css/style.css

[ファイルの中身]

/* --------------------------------
	ギャラリー
-------------------------------- */

.item_gallery_original {
    clear: none;
}

.front_page #contents .row {
    padding-bottom: 24px;
}

.row {
    margin-left: -16px;
    margin-right: -16px;
}

.text-right {
    text-align: right;
}

.text-right.sns_link a {
    font-size: 36px;
    margin-left: 10px;
    color: rgb(233, 142, 142);
}

 

FontAwesomeを導入

対象ファイル:/src/Eccube/Resource/template/default/default_frame.twig

45〜50行目付近

[ファイルの中身]

<link rel="icon" href="{{ app.config.front_urlpath }}/img/common/favicon.ico">
<link rel="stylesheet" href="{{ app.config.front_urlpath }}/css/style.css?v={{ constant('Eccube\\Common\\Constant::VERSION') }}">
<link rel="stylesheet" href="{{ app.config.front_urlpath }}/css/slick.css?v={{ constant('Eccube\\Common\\Constant::VERSION') }}">
<link rel="stylesheet" href="{{ app.config.front_urlpath }}/css/default.css?v={{ constant('Eccube\\Common\\Constant::VERSION') }}">
// 追加
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">

 

レイアウトの編集

管理画面 > コンテンツ管理 > ページ管理

ページ一覧にあるTOPページの「…」をクリック

ページ一覧にあるTOPページの「レイアウト編集」をクリック

ギャラリーとギャラリー(オリジナル)を入れ替えます。

後で写真を追加

プレビューで確認し、OKならば[登録]をクリック。

後で写真を追加

 

キャッシュのクリア

管理画面 > コンテンツ管理 > キャッシュ管理

[キャッシュ削除]をクリック

 

変更後の確認

「shift」を押しながらリロードして、確認。

[変更前]

後で写真を追加

[変更後]

後で写真を追加

 

 

ロゴの作成

下記URLからオリジナルのロゴを作成。

ロゴ及び画像ジェネレーター

私の場合は作成したロゴを、下記に格納

ディレクトリ:/html/template/default/img/top/

ファイル名:logo.png

 

新規ブロックを追加する

参考URL:ECCUBE3サイドブロックに独自メニューを設置する方法

管理画面 >コンテンツ管理 >ブロック管理

最下部の【新規入力】より新規ブロックを追加します。

[ブロック名]

フッター(オリジナル)

[ファイル名]

footer_original

[ブロックデータ]

{#
This file is part of EC-CUBE

Copyright(c) 2000-2015 LOCKON CO.,LTD. All Rights Reserved.

http://www.lockon.co.jp/

This program is free software; you can redistribute it and/or
modify it under the terms of the GNU General Public License
as published by the Free Software Foundation; either version 2
of the License, or (at your option) any later version.

This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
GNU General Public License for more details.

You should have received a copy of the GNU General Public License
along with this program; if not, write to the Free Software
Foundation, Inc., 59 Temple Place - Suite 330, Boston, MA  02111-1307, USA.
#}
<div class="container-fluid inner">
    <ul>
        <li><a href="{{ url('help_about') }}">当サイトについて</a></li>
        <li><a href="{{ url('help_privacy') }}">プライバシーポリシー</a></li>
        <li><a href="{{ url('help_tradelaw') }}">特定商取引法に基づく表記</a></li>
        <li><a href="{{ url('contact') }}">お問い合わせ</a></li>
    </ul>
    <div class="footer_logo_area">
        <p class="logo"><a href="{{ url('homepage') }}"><img src="{{ app.config.front_urlpath }}/img/top/logo.png"></a></p>
        <p class="copyright">
            <small>copyright (c) {{ BaseInfo.shop_name }} all rights reserved.</small>
        </p>
    </div>
</div>

ブロック名、ファイル名、ブロックデータを入力し[登録ボタン]をクリック。

後で写真を追加

フッター(オリジナル)が追加されました。

後で写真を追加

 

データベースのロジックフラッグを変更する

ブロックを新規追加しただけでは実際にはまだ表示はされません。表示させるためには追加したブロックのロジックフラッグをデータベースで直接編集する必要があります。

テーブル名「dtb_block」「footer_original」の「deletable_flg」を「1」から「0」へ変更します。

後で写真を追加

 

スタイルの変更

style.cssのファイルに下記を追記して下さい。

対象ファイル:/html/template/default/css/style.css

[ファイルの中身]

/* --------------------------------
	フッター
-------------------------------- */
#footer {
    background: #333;
}

#footer a {
    color: #fff;
}

#footer ul li a {
    color: #fff;
}

p.copyright {
    color: #fff;
}

 

キャッシュのクリア

管理画面 > コンテンツ管理 > キャッシュ管理

[キャッシュ削除]をクリック

変更後の確認

「shift」を押しながらリロードして、確認。

[変更前]

後で写真を追加

[変更後]

後で写真を追加

 

ログイン部分の作成

 

新規ブロックを追加する

参考URL:ECCUBE3サイドブロックに独自メニューを設置する方法

管理画面 >コンテンツ管理 >ブロック管理

最下部の【新規入力】より新規ブロックを追加します。

[ブロック名]

ログイン(オリジナル)

[ファイル名]

login_original

[ブロックデータ]

{#
This file is part of EC-CUBE

Copyright(c) 2000-2015 LOCKON CO.,LTD. All Rights Reserved.

http://www.lockon.co.jp/

This program is free software; you can redistribute it and/or
modify it under the terms of the GNU General Public License
as published by the Free Software Foundation; either version 2
of the License, or (at your option) any later version.

This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
GNU General Public License for more details.

You should have received a copy of the GNU General Public License
along with this program; if not, write to the Free Software
Foundation, Inc., 59 Temple Place - Suite 330, Boston, MA  02111-1307, USA.
#}
{% if is_granted('ROLE_USER') %}
    <div id="member" class="member drawer_block pc">
        <div  class="inner">
            <div class="description">食事を楽しむライフスタイルプレゼント</div>
            <ul class="member_link">
                <li>
                    <a href="{{ url('mypage') }}">
                        <svg class="cb cb-user-circle"><use xlink:href="#cb-user-circle" /></svg>マイページ
                    </a>
                </li>
                {% if BaseInfo.option_favorite_product == 1 %}
                    <li><a href="{{ url('mypage_favorite') }}"><svg class="cb cb-heart-circle"><use xlink:href="#cb-heart-circle"></use></svg>お気に入り</a></li>
                {% endif %}
                <li>
                    <a href="{{ url('logout') }}">
                        <svg class="cb cb-lock-circle"><use xlink:href="#cb-lock-circle" /></svg>ログアウト
                    </a>
                </li>
            </ul>
        </div>
    </div>
{% else %}
    <div id="member" class="member drawer_block pc">
        <div  class="inner">
            <div class="description">食事を楽しむライフスタイルプレゼント</div>
            <ul class="member_link">
                <li>
                    <a href="{{ url('entry') }}">
                        <svg class="cb cb-user-circle"><use xlink:href="#cb-user-circle" /></svg>新規会員登録
                    </a>
                </li>
                {% if BaseInfo.option_favorite_product == 1 %}
                    <li><a href="{{ url('mypage_favorite') }}"><svg class="cb cb-heart-circle"><use xlink:href="#cb-heart-circle"></use></svg>お気に入り</a></li>
                {% endif %}
                <li>
                    <a href="{{ url('mypage_login') }}">
                        <svg class="cb cb-lock-circle"><use xlink:href="#cb-lock-circle" /></svg>ログイン
                    </a>
                </li>
            </ul>
        </div>
    </div>
{% endif %}

ブロック名、ファイル名、ブロックデータを入力し[登録ボタン]をクリック。

後で写真を追加

ログイン(オリジナル)が追加されました。

後で写真を追加

 

データベースのロジックフラッグを変更する

ブロックを新規追加しただけでは実際にはまだ表示はされません。表示させるためには追加したブロックのロジックフラッグをデータベースで直接編集する必要があります。

テーブル名「dtb_block」「login_original」の「logic_flg」を「0」から「1」「deletable_flg」を「1」から「0」へ変更します。

後で写真を追加

 

ECCUBE3構成ファイルよりコントローラーを登録

続いて追加した「メインメニューブロック」のコントローラーを登録します。

対象ファイル:/src/Eccube/ControllerProvider/FrontControllerProvider.php

FrontControllerProvider.phpに「//block」が定義されている箇所があるので以下の一文をブロック定義部の最下部に追加します。

// block
$c->match('/block/category', '\Eccube\Controller\Block\CategoryController::index')->bind('block_category');
$c->match('/block/cart', '\Eccube\Controller\Block\CartController::index')->bind('block_cart');
$c->match('/block/search_product', '\Eccube\Controller\Block\SearchProductController::index')->bind('block_search_product');
$c->match('/block/news', '\Eccube\Controller\Block\NewsController::index')->bind('block_news');
$c->match('/block/login', '\Eccube\Controller\Block\LoginController::index')->bind('block_login');
$c->match('/block/news_original', '\Eccube\Controller\Block\NewsOriginalController::index')->bind('block_news_original');
// 追加
$c->match('/block/login_original', '\Eccube\Controller\Block\LoginOriginalController::index')->bind('block_login_original');

 

ECCUBE3構成ファイルよりコントローラーを作成

コントローラーの登録ができたら続いてコントローラの作成を行います。今回は既存の新着情報メニューをコピーして新しいメニューを作るので以下のファイルをそのままコピーして「LoginOriginalController.php」リネームします。

/src/Eccube/Controller/Block/LoginController.php

リネームしたファイルの内容をリネームしたものに変更。

<?php
/*
 * This file is part of EC-CUBE
 *
 * Copyright(c) 2000-2015 LOCKON CO.,LTD. All Rights Reserved.
 *
 * http://www.lockon.co.jp/
 *
 * This program is free software; you can redistribute it and/or
 * modify it under the terms of the GNU General Public License
 * as published by the Free Software Foundation; either version 2
 * of the License, or (at your option) any later version.
 *
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU General Public License for more details.
 *
 * You should have received a copy of the GNU General Public License
 * along with this program; if not, write to the Free Software
 * Foundation, Inc., 59 Temple Place - Suite 330, Boston, MA  02111-1307, USA.
 */


namespace Eccube\Controller\Block;

use Eccube\Application;
use Symfony\Component\HttpFoundation\Request;

class LoginController
{
    public function index(Application $app, Request $request)
    {
        return $app->render('Block/login.twig');
    }
}

↓に変更

<?php
/*
 * This file is part of EC-CUBE
 *
 * Copyright(c) 2000-2015 LOCKON CO.,LTD. All Rights Reserved.
 *
 * http://www.lockon.co.jp/
 *
 * This program is free software; you can redistribute it and/or
 * modify it under the terms of the GNU General Public License
 * as published by the Free Software Foundation; either version 2
 * of the License, or (at your option) any later version.
 *
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU General Public License for more details.
 *
 * You should have received a copy of the GNU General Public License
 * along with this program; if not, write to the Free Software
 * Foundation, Inc., 59 Temple Place - Suite 330, Boston, MA  02111-1307, USA.
 */


namespace Eccube\Controller\Block;

use Eccube\Application;
use Symfony\Component\HttpFoundation\Request;

class LoginOriginalController
{
    public function index(Application $app, Request $request)
    {
        return $app->render('Block/login_original.twig');
    }
}

 

スタイルの変更

style.cssのファイルに下記を追記して下さい。

対象ファイル:/html/template/default/css/style.css

[ファイルの中身]

/* --------------------------------
	ログイン
-------------------------------- */

#header {
    padding: 0;
}

#header .container-fluid.inner {
    max-width: 100%;
    padding: 0;
}

#header .inner {
    position: relative;
    margin: 0 auto;
}

#header .header_logo_area {
    float: none;
    margin-right: 0;
    padding-top: 45px;
    padding-bottom: 32px;
}

.description {
    color: #fff;
    font-size: 14px;
    float: left;
    height: 54px;
    line-height: 54px;
}

.drawer.sp .description {
    display: none;
}

#member {
    float: none;
    text-align: right;
    width: 100%;
    background-color: #333;
    clear: both;
}

#member a {
    color: #fff;
}

 

レイアウトの編集

管理画面 > コンテンツ管理 > ページ管理

ページ一覧にあるTOPページの「…」をクリック

ページ一覧にあるTOPページの「レイアウト編集」をクリック

ログインとログイン(オリジナル)を入れ替えます。

後で写真を追加

プレビューで確認し、OKならば[登録]をクリック。

後で写真を追加

 

キャッシュのクリア

管理画面 > コンテンツ管理 > キャッシュ管理

[キャッシュ削除]をクリック

 

変更後の確認

「shift」を押しながらリロードして、確認。

[変更前]

後で写真を追加

[変更後]

後で写真を追加

 

カゴの中部分の作成

 

新規ブロックを追加する

参考URL:ECCUBE3サイドブロックに独自メニューを設置する方法

管理画面 >コンテンツ管理 >ブロック管理

最下部の【新規入力】より新規ブロックを追加します。

[ブロック名]

カゴの中(オリジナル)

[ファイル名]

cart_original

[ブロックデータ]

{#
This file is part of EC-CUBE

Copyright(c) 2000-2015 LOCKON CO.,LTD. All Rights Reserved.

http://www.lockon.co.jp/

This program is free software; you can redistribute it and/or
modify it under the terms of the GNU General Public License
as published by the Free Software Foundation; either version 2
of the License, or (at your option) any later version.

This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
GNU General Public License for more details.

You should have received a copy of the GNU General Public License
along with this program; if not, write to the Free Software
Foundation, Inc., 59 Temple Place - Suite 330, Boston, MA  02111-1307, USA.
#}
<div id="cart_area" class="inner">
    <p class="clearfix cart-trigger"><a href="#cart">
            <svg class="cb cb-shopping-cart">
                <use xlink:href="#cb-shopping-cart"/>
            </svg>
            <span class="badge">{{ Cart.total_quantity }}</span>
            <svg class="cb cb-close">
                <use xlink:href="#cb-close"/>
            </svg>
        </a>
        <span class="cart_price pc">合計 <span class="price">{{ Cart.total_price|price }}</span></span></p>
    <div id="cart" class="cart">
        <div class="inner">
            {% for error in app.session.flashbag.get('eccube.front.cart.error')  %}
                <div class="message">
                    <p class="errormsg bg-danger">
                        <svg class="cb cb-warning"><use xlink:href="#cb-warning" /></svg>{{ error|trans|nl2br }}
                    </p>
                </div>
            {% endfor %}
            {% for CartItem in Cart.CartItems %}
                {% set ProductClass = CartItem.Object %}
                {% set Product = ProductClass.Product %}
                <div class="item_box clearfix">
                    <div class="item_photo"><img
                                src="{{ app.config.image_save_urlpath }}/{{ Product.MainListImage|no_image_product }}"
                                alt="{{ Product.name }}"></div>
                    <dl class="item_detail">
                        <dt class="item_name">{{ Product.name }}</dt>
                        <dd class="item_pattern small">
                            {%- if ProductClass.ClassCategory1 -%}
                                {{ ProductClass.ClassCategory1.ClassName }}:{{ ProductClass.ClassCategory1 }}
                                {%- if ProductClass.ClassCategory2 -%}
                                    <br>{{ ProductClass.ClassCategory2.ClassName }}:{{ ProductClass.ClassCategory2 }}
                                {%- endif -%}
                            {%- endif -%}
                        </dd>
                        <dd class="item_price">{{ CartItem.price|price }}<span class="small">税込</span></dd>
                        <dd class="item_quantity form-group form-inline">数量:{{ CartItem.quantity }}</dd>
                    </dl>
                </div><!--/item_box-->
                <p class="cart_price sp">合計 <span class="price">{{ Cart.total_price|price }}</span></p>
            {% endfor %}
            {% if Cart.CartItems|length > 0 %}

                <div class="btn_area">
                    <ul>
                        <li>
                            <a href="{{ url('cart') }}" class="btn btn-primary">カートへ進む</a>
                        </li>
                        <li>
                            <button type="button" class="btn btn-default btn-sm cart-trigger">キャンセル</button>
                        </li>
                    </ul>
                </div>
            {% else %}
                <div class="btn_area">
                    <div class="message">
                        <p class="errormsg bg-danger" style="margin-bottom: 20px;">
                            現在カート内に<br>商品はございません。
                        </p>
                    </div>
                </div>
            {% endif %}
        </div>
    </div>
</div>

ブロック名、ファイル名、ブロックデータを入力し[登録ボタン]をクリック。

後で写真を追加

カゴの中(オリジナル)が追加されました。

後で写真を追加

 

データベースのロジックフラッグを変更する

ブロックを新規追加しただけでは実際にはまだ表示はされません。表示させるためには追加したブロックのロジックフラッグをデータベースで直接編集する必要があります。

テーブル名「dtb_block」「cart_original」の「logic_flg」を「0」から「1」「deletable_flg」を「1」から「0」へ変更します。

後で写真を追加

 

ECCUBE3構成ファイルよりコントローラーを登録

続いて追加した「メインメニューブロック」のコントローラーを登録します。

対象ファイル:/src/Eccube/ControllerProvider/FrontControllerProvider.php

FrontControllerProvider.phpに「//block」が定義されている箇所があるので以下の一文をブロック定義部の最下部に追加します。

// block
        $c->match('/block/category', '\Eccube\Controller\Block\CategoryController::index')->bind('block_category');
        $c->match('/block/cart', '\Eccube\Controller\Block\CartController::index')->bind('block_cart');
        $c->match('/block/search_product', '\Eccube\Controller\Block\SearchProductController::index')->bind('block_search_product');
        $c->match('/block/news', '\Eccube\Controller\Block\NewsController::index')->bind('block_news');
        $c->match('/block/login', '\Eccube\Controller\Block\LoginController::index')->bind('block_login');
        $c->match('/block/news_original', '\Eccube\Controller\Block\NewsOriginalController::index')->bind('block_news_original');
        $c->match('/block/login_original', '\Eccube\Controller\Block\LoginOriginalController::index')->bind('block_login_original');
        $c->match('/block/cart_original', '\Eccube\Controller\Block\CartOriginalController::index')->bind('block_cart_original');

ECCUBE3構成ファイルよりコントローラーを作成

コントローラーの登録ができたら続いてコントローラの作成を行います。今回は既存の新着情報メニューをコピーして新しいメニューを作るので以下のファイルをそのままコピーして「CartOriginalController.php」リネームします。

/src/Eccube/Controller/Block/CartController.php

リネームしたファイルの内容をリネームしたものに変更。

<?php
/*
 * This file is part of EC-CUBE
 *
 * Copyright(c) 2000-2015 LOCKON CO.,LTD. All Rights Reserved.
 *
 * http://www.lockon.co.jp/
 *
 * This program is free software; you can redistribute it and/or
 * modify it under the terms of the GNU General Public License
 * as published by the Free Software Foundation; either version 2
 * of the License, or (at your option) any later version.
 *
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU General Public License for more details.
 *
 * You should have received a copy of the GNU General Public License
 * along with this program; if not, write to the Free Software
 * Foundation, Inc., 59 Temple Place - Suite 330, Boston, MA  02111-1307, USA.
 */


namespace Eccube\Controller\Block;

use Eccube\Application;

class CartController
{
    public function index(Application $app)
    {
        /** @var $Cart \Eccube\Entity\Cart */
        $Cart = $app['eccube.service.cart']->getCartObj();
        return $app->render('Block/cart.twig', array(
            'Cart' => $Cart,
        ));
    }
}

↓に変更

<?php
/*
 * This file is part of EC-CUBE
 *
 * Copyright(c) 2000-2015 LOCKON CO.,LTD. All Rights Reserved.
 *
 * http://www.lockon.co.jp/
 *
 * This program is free software; you can redistribute it and/or
 * modify it under the terms of the GNU General Public License
 * as published by the Free Software Foundation; either version 2
 * of the License, or (at your option) any later version.
 *
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU General Public License for more details.
 *
 * You should have received a copy of the GNU General Public License
 * along with this program; if not, write to the Free Software
 * Foundation, Inc., 59 Temple Place - Suite 330, Boston, MA  02111-1307, USA.
 */


namespace Eccube\Controller\Block;

use Eccube\Application;

class CartOriginalController
{
    public function index(Application $app)
    {
        /** @var $Cart \Eccube\Entity\Cart */
        $Cart = $app['eccube.service.cart']->getCartObj();
        return $app->render('Block/cart_original.twig', array(
            'Cart' => $Cart,
        ));
    }
}

 

スタイルの変更

style.cssのファイルに下記を追記して下さい。

対象ファイル:/html/template/default/css/style.css

[ファイルの中身]

/* --------------------------------
	カゴの中
-------------------------------- */

#header #cart_area {
    position: relative;
    top: 58px;
    right: 0;
    margin: 0 auto;
    width: auto;
}

#cart_area p {
    border-top: none;
    border-left: none;
    border-right: none;
    border-bottom: solid 2px #d9d9d9;
}

.badge {
    background-color: #E98E8E;
}

 

レイアウトの編集

管理画面 > コンテンツ管理 > ページ管理

ページ一覧にあるTOPページの「…」をクリック

ページ一覧にあるTOPページの「レイアウト編集」をクリック

カゴの中とカゴの中(オリジナル)を入れ替えます。

後で写真を追加

プレビューで確認し、OKならば[登録]をクリック。

後で写真を追加

 

キャッシュのクリア

管理画面 > コンテンツ管理 > キャッシュ管理

[キャッシュ削除]をクリック

 

変更後の確認

「shift」を押しながらリロードして、確認。

[変更前]

後で写真を追加

[変更後]

後で写真を追加

 

 

ロゴの作成

下記URLからオリジナルのロゴを作成。

ロゴ及び画像ジェネレーター

私の場合は作成したロゴを、下記に格納

ディレクトリ:/html/template/default/img/top/

ファイル名:logo.png

 

新規ブロックを追加する

参考URL:ECCUBE3サイドブロックに独自メニューを設置する方法

管理画面 >コンテンツ管理 >ブロック管理

最下部の【新規入力】より新規ブロックを追加します。

[ブロック名]

ロゴ(オリジナル)

[ファイル名]

logo_original

[ブロックデータ]

{#
This file is part of EC-CUBE

Copyright(c) 2000-2015 LOCKON CO.,LTD. All Rights Reserved.

http://www.lockon.co.jp/

This program is free software; you can redistribute it and/or
modify it under the terms of the GNU General Public License
as published by the Free Software Foundation; either version 2
of the License, or (at your option) any later version.

This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
GNU General Public License for more details.

You should have received a copy of the GNU General Public License
along with this program; if not, write to the Free Software
Foundation, Inc., 59 Temple Place - Suite 330, Boston, MA  02111-1307, USA.
#}
             <div class="header_logo_area">
                <h1 class="header_logo text-center"><a href="{{ url('homepage') }}"><img src="{{ app.config.front_urlpath }}/img/top/logo.png"></a></h1>
            </div>

ブロック名、ファイル名、ブロックデータを入力し[登録ボタン]をクリック。

後で写真を追加

新着商品(オリジナル)が追加されました。

後で写真を追加

 

データベースのロジックフラッグを変更する

ブロックを新規追加しただけでは実際にはまだ表示はされません。表示させるためには追加したブロックのロジックフラッグをデータベースで直接編集する必要があります。

テーブル名「dtb_block」「new_product_original」の「deletable_flg」を「1」から「0」へ変更します。

後で写真を追加

 

スタイルの変更

style.cssのファイルに下記を追記して下さい。

対象ファイル:/html/template/default/css/style.css

[ファイルの中身]

/* --------------------------------
	ロゴ
-------------------------------- */

.text-center {
    text-align: center;
}

 

レイアウトの編集

管理画面 > コンテンツ管理 > ページ管理

ページ一覧にあるTOPページの「…」をクリック

ページ一覧にあるTOPページの「レイアウト編集」をクリック

カゴの中とカゴの中(オリジナル)を入れ替えます。

後で写真を追加

プレビューで確認し、OKならば[登録]をクリック。

後で写真を追加

 

キャッシュのクリア

管理画面 > コンテンツ管理 > キャッシュ管理

[キャッシュ削除]をクリック

 

変更後の確認

「shift」を押しながらリロードして、確認。

[変更前]

後で写真を追加

[変更後]

後で写真を追加

 

カテゴリ部分の作成

 

新規ブロックを追加する

参考URL:ECCUBE3サイドブロックに独自メニューを設置する方法

管理画面 >コンテンツ管理 >ブロック管理

最下部の【新規入力】より新規ブロックを追加します。

[ブロック名]

カテゴリ(オリジナル)

[ファイル名]

category_original

[ブロックデータ]

{#
This file is part of EC-CUBE

Copyright(c) 2000-2015 LOCKON CO.,LTD. All Rights Reserved.

http://www.lockon.co.jp/

This program is free software; you can redistribute it and/or
modify it under the terms of the GNU General Public License
as published by the Free Software Foundation; either version 2
of the License, or (at your option) any later version.

This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
GNU General Public License for more details.

You should have received a copy of the GNU General Public License
along with this program; if not, write to the Free Software
Foundation, Inc., 59 Temple Place - Suite 330, Boston, MA  02111-1307, USA.
#}
{% macro tree(Category) %}
    <li>
        <a href="{{ url('product_list') }}?category_id={{ Category.id }}">
            {{ Category.name }}
        </a>
        {% if Category.children|length > 0 %}
            <ul>
            {% for ChildCategory in Category.children %}
                    {{ _self.tree(ChildCategory) }}
            {% endfor %}
            </ul>
        {% endif %}
    </li>
{% endmacro %}

<nav id="category" class="drawer_block pc inner">
    <ul class="category-nav">
    {% for Category in Categories %}
        {{ _self.tree(Category) }}
    {% endfor %}
    </ul> <!-- category-nav -->
</nav>

ブロック名、ファイル名、ブロックデータを入力し[登録ボタン]をクリック。

後で写真を追加

新着商品(オリジナル)が追加されました。

後で写真を追加

 

データベースのロジックフラッグを変更する

ブロックを新規追加しただけでは実際にはまだ表示はされません。表示させるためには追加したブロックのロジックフラッグをデータベースで直接編集する必要があります。

テーブル名「dtb_block」「news_original」の「logic_flg」を「0」から「1」「deletable_flg」を「1」から「0」へ変更します。

後で写真を追加

 

ECCUBE3構成ファイルよりコントローラーを登録

続いて追加した「メインメニューブロック」のコントローラーを登録します。

対象ファイル:/src/Eccube/ControllerProvider/FrontControllerProvider.php

FrontControllerProvider.phpに「//block」が定義されている箇所があるので以下の一文をブロック定義部の最下部に追加します。

// block
        $c->match('/block/category', '\Eccube\Controller\Block\CategoryController::index')->bind('block_category');
        $c->match('/block/cart', '\Eccube\Controller\Block\CartController::index')->bind('block_cart');
        $c->match('/block/search_product', '\Eccube\Controller\Block\SearchProductController::index')->bind('block_search_product');
        $c->match('/block/news', '\Eccube\Controller\Block\NewsController::index')->bind('block_news');
        $c->match('/block/login', '\Eccube\Controller\Block\LoginController::index')->bind('block_login');
        $c->match('/block/news_original', '\Eccube\Controller\Block\NewsOriginalController::index')->bind('block_news_original');
        $c->match('/block/login_original', '\Eccube\Controller\Block\LoginOriginalController::index')->bind('block_login_original');
        $c->match('/block/cart_original', '\Eccube\Controller\Block\CartOriginalController::index')->bind('block_cart_original');
        $c->match('/block/category_original', '\Eccube\Controller\Block\CategoryOriginalController::index')->bind('block_category_original');

 

ECCUBE3構成ファイルよりコントローラーを作成

コントローラーの登録ができたら続いてコントローラの作成を行います。今回は既存の新着情報メニューをコピーして新しいメニューを作るので以下のファイルをそのままコピーして「CategoryOriginalController.php」リネームします。

/src/Eccube/Controller/Block/CategoryController.php

リネームしたファイルの内容をリネームしたものに変更。

<?php
/*
 * This file is part of EC-CUBE
 *
 * Copyright(c) 2000-2015 LOCKON CO.,LTD. All Rights Reserved.
 *
 * http://www.lockon.co.jp/
 *
 * This program is free software; you can redistribute it and/or
 * modify it under the terms of the GNU General Public License
 * as published by the Free Software Foundation; either version 2
 * of the License, or (at your option) any later version.
 *
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU General Public License for more details.
 *
 * You should have received a copy of the GNU General Public License
 * along with this program; if not, write to the Free Software
 * Foundation, Inc., 59 Temple Place - Suite 330, Boston, MA  02111-1307, USA.
 */


namespace Eccube\Controller\Block;

use Eccube\Application;

class CategoryController
{
    public function index(Application $app)
    {
        $Categories = $app['eccube.repository.category']->getList();

        return $app->render('Block/category.twig', array(
            'Categories' => $Categories
        ));
    }
}

↓に変更

<?php
/*
 * This file is part of EC-CUBE
 *
 * Copyright(c) 2000-2015 LOCKON CO.,LTD. All Rights Reserved.
 *
 * http://www.lockon.co.jp/
 *
 * This program is free software; you can redistribute it and/or
 * modify it under the terms of the GNU General Public License
 * as published by the Free Software Foundation; either version 2
 * of the License, or (at your option) any later version.
 *
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU General Public License for more details.
 *
 * You should have received a copy of the GNU General Public License
 * along with this program; if not, write to the Free Software
 * Foundation, Inc., 59 Temple Place - Suite 330, Boston, MA  02111-1307, USA.
 */


namespace Eccube\Controller\Block;

use Eccube\Application;

class CategoryOriginalController
{
    public function index(Application $app)
    {
        $Categories = $app['eccube.repository.category']->getList();

        return $app->render('Block/category_original.twig', array(
            'Categories' => $Categories
        ));
    }
}

 

スタイルの変更

style.cssのファイルに下記を追記して下さい。

対象ファイル:/html/template/default/css/style.css

[ファイルの中身]

/* --------------------------------
	カテゴリ
-------------------------------- */

#header #category {
    padding: 0;
}

#header .category-nav {
    border-top: none;
    border-bottom: none;
    float: left;
    text-align: left;
}

@media only screen and (max-width:1170px){
    #header .category-nav li a {
	margin: 0 20px 0 0;
    }
}

#header .category-nav li a {
    display: block;
    border-bottom: solid 3px #ccc;
    margin: 0 40px 0 0;
    font-size: 18px;
    padding: 0;
}

#header .category-nav li a:hover {
    background-color: transparent;
    border-color: #333;
}

#header .category-nav li ul li a {
    margin: 0;
    font-size: 90%;
    border-bottom: solid 1px #ccc;
}

 

レイアウトの編集

管理画面 > コンテンツ管理 > ページ管理

ページ一覧にあるTOPページの「…」をクリック

ページ一覧にあるTOPページの「レイアウト編集」をクリック

カゴの中とカゴの中(オリジナル)を入れ替えます。

後で写真を追加

プレビューで確認し、OKならば[登録]をクリック。

後で写真を追加

 

キャッシュのクリア

管理画面 > コンテンツ管理 > キャッシュ管理

[キャッシュ削除]をクリック

 

変更後の確認

「shift」を押しながらリロードして、確認。

[変更前]

後で写真を追加

[変更後]

後で写真を追加
 

商品検索部分の作成

 

新規ブロックを追加する

参考URL:ECCUBE3サイドブロックに独自メニューを設置する方法

管理画面 >コンテンツ管理 >ブロック管理

最下部の【新規入力】より新規ブロックを追加します。

[ブロック名]

商品検索(オリジナル)

[ファイル名]

search_product_original

[ブロックデータ]

{#
This file is part of EC-CUBE

Copyright(c) 2000-2015 LOCKON CO.,LTD. All Rights Reserved.

http://www.lockon.co.jp/

This program is free software; you can redistribute it and/or
modify it under the terms of the GNU General Public License
as published by the Free Software Foundation; either version 2
of the License, or (at your option) any later version.

This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
GNU General Public License for more details.

You should have received a copy of the GNU General Public License
along with this program; if not, write to the Free Software
Foundation, Inc., 59 Temple Place - Suite 330, Boston, MA  02111-1307, USA.
#}
<div class="drawer_block pc header_bottom_area inner">
    <div id="search" class="search clearfix">
        <form method="get" id="searchform" action="{{ path('product_list') }}">
            <div class="search_inner">
                {{ form_widget(form.category_id) }}
                <div class="input_search clearfix">
                    {{ form_widget(form.name, {'attr': { 'placeholder' : "キーワードを入力" }} ) }}
                    <button type="submit" class="bt_search"><svg class="cb cb-search"><use xlink:href="#cb-search" /></svg></button>
                </div>
            </div>
            <div class="extra-form">
                {% for f in form.getIterator %}
                    {% if f.vars.name matches '[^plg*]' %}
                        {{ form_label(f) }}
                        {{ form_widget(f) }}
                        {{ form_errors(f) }}
                    {% endif %}
                {% endfor %}
            </div>
        </form>
    </div>
</div>

ブロック名、ファイル名、ブロックデータを入力し[登録ボタン]をクリック。

後で写真を追加

新着商品(オリジナル)が追加されました。

後で写真を追加

 

データベースのロジックフラッグを変更する

ブロックを新規追加しただけでは実際にはまだ表示はされません。表示させるためには追加したブロックのロジックフラッグをデータベースで直接編集する必要があります。

テーブル名「dtb_block」「news_original」の「logic_flg」を「0」から「1」「deletable_flg」を「1」から「0」へ変更します。

後で写真を追加

 

ECCUBE3構成ファイルよりコントローラーを登録

続いて追加した「メインメニューブロック」のコントローラーを登録します。

対象ファイル:/src/Eccube/ControllerProvider/FrontControllerProvider.php

FrontControllerProvider.phpに「//block」が定義されている箇所があるので以下の一文をブロック定義部の最下部に追加します。

// block
        $c->match('/block/category', '\Eccube\Controller\Block\CategoryController::index')->bind('block_category');
        $c->match('/block/cart', '\Eccube\Controller\Block\CartController::index')->bind('block_cart');
        $c->match('/block/search_product', '\Eccube\Controller\Block\SearchProductController::index')->bind('block_search_product');
        $c->match('/block/news', '\Eccube\Controller\Block\NewsController::index')->bind('block_news');
        $c->match('/block/login', '\Eccube\Controller\Block\LoginController::index')->bind('block_login');
        $c->match('/block/news_original', '\Eccube\Controller\Block\NewsOriginalController::index')->bind('block_news_original');
        $c->match('/block/login_original', '\Eccube\Controller\Block\LoginOriginalController::index')->bind('block_login_original');
        $c->match('/block/cart_original', '\Eccube\Controller\Block\CartOriginalController::index')->bind('block_cart_original');
        $c->match('/block/category_original', '\Eccube\Controller\Block\CategoryOriginalController::index')->bind('block_category_original');
        // 追加
        $c->match('/block/search_product_original', '\Eccube\Controller\Block\SearchProductOriginalController::index')->bind('block_search_product_original');

 

ECCUBE3構成ファイルよりコントローラーを作成

コントローラーの登録ができたら続いてコントローラの作成を行います。今回は既存の新着情報メニューをコピーして新しいメニューを作るので以下のファイルをそのままコピーして「search_productOriginalController.php」リネームします。

/src/Eccube/Controller/Block/search_productController.php

リネームしたファイルの内容をリネームしたものに変更。

<?php
/*
 * This file is part of EC-CUBE
 *
 * Copyright(c) 2000-2015 LOCKON CO.,LTD. All Rights Reserved.
 *
 * http://www.lockon.co.jp/
 *
 * This program is free software; you can redistribute it and/or
 * modify it under the terms of the GNU General Public License
 * as published by the Free Software Foundation; either version 2
 * of the License, or (at your option) any later version.
 *
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU General Public License for more details.
 *
 * You should have received a copy of the GNU General Public License
 * along with this program; if not, write to the Free Software
 * Foundation, Inc., 59 Temple Place - Suite 330, Boston, MA  02111-1307, USA.
 */


namespace Eccube\Controller\Block;

use Eccube\Application;
use Eccube\Event\EccubeEvents;
use Eccube\Event\EventArgs;
use Symfony\Component\HttpFoundation\Request;

class SearchProductController
{
    public function index(Application $app, Request $request)
    {
        /** @var $form \Symfony\Component\Form\Form */
        $builder = $app['form.factory']
            ->createNamedBuilder('', 'search_product_block')
            ->setMethod('GET');

        $event = new EventArgs(
            array(
                'builder' => $builder,
            ),
            $request
        );
        $app['eccube.event.dispatcher']->dispatch(EccubeEvents::FRONT_BLOCK_SEARCH_PRODUCT_INDEX_INITIALIZE, $event);

        /** @var $request \Symfony\Component\HttpFoundation\Request */
        $request = $app['request_stack']->getMasterRequest();

        $form = $builder->getForm();
        $form->handleRequest($request);

        return $app->render('Block/search_product.twig', array(
            'form' => $form->createView(),
        ));
    }
}

↓に変更

<?php
/*
 * This file is part of EC-CUBE
 *
 * Copyright(c) 2000-2015 LOCKON CO.,LTD. All Rights Reserved.
 *
 * http://www.lockon.co.jp/
 *
 * This program is free software; you can redistribute it and/or
 * modify it under the terms of the GNU General Public License
 * as published by the Free Software Foundation; either version 2
 * of the License, or (at your option) any later version.
 *
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU General Public License for more details.
 *
 * You should have received a copy of the GNU General Public License
 * along with this program; if not, write to the Free Software
 * Foundation, Inc., 59 Temple Place - Suite 330, Boston, MA  02111-1307, USA.
 */


namespace Eccube\Controller\Block;

use Eccube\Application;
use Eccube\Event\EccubeEvents;
use Eccube\Event\EventArgs;
use Symfony\Component\HttpFoundation\Request;

class SearchProductOriginalController
{
    public function index(Application $app, Request $request)
    {
        /** @var $form \Symfony\Component\Form\Form */
        $builder = $app['form.factory']
            ->createNamedBuilder('', 'search_product_block')
            ->setMethod('GET');

        $event = new EventArgs(
            array(
                'builder' => $builder,
            ),
            $request
        );
        $app['eccube.event.dispatcher']->dispatch(EccubeEvents::FRONT_BLOCK_SEARCH_PRODUCT_INDEX_INITIALIZE, $event);

        /** @var $request \Symfony\Component\HttpFoundation\Request */
        $request = $app['request_stack']->getMasterRequest();

        $form = $builder->getForm();
        $form->handleRequest($request);

        return $app->render('Block/search_product_original.twig', array(
            'form' => $form->createView(),
        ));
    }
}

 

スタイルの変更

style.cssのファイルに下記を追記して下さい。

対象ファイル:/html/template/default/css/style.css

[ファイルの中身]

/* --------------------------------
	商品検索
-------------------------------- */

#header .header_bottom_area {
    clear: none;
    padding-top: 0;
}
#header .inner {
    position: relative;
    margin: 0 auto;
}

#search {
    display: inline-block;
    float: right;
    margin-right: 0;
    padding: 0;
    width: 375px;
    background: none;
}

#header #searchform select, #header #searchform input {
    float: left;
    font-size: 14px;
    color: #c2c2c2;
}

#search select {
    max-width: 150px;
}

.search select {
    height: 50px;
    border: 1px solid #dfdfdf;
    border-radius: 0!important;
}

#header .search .input_search {
    width: 220px;
}

@media only screen and (max-width:800px){
    #header .category-nav li a {
        margin: 0 10px 0 0;
    }
}

@media only screen and (min-width: 768px) {
    #search select {
        max-width: 180px;
    }
}

@media only screen and (max-width:768px){
    select#category_id {
        idth: auto;
    }
    .header_logo_area .header_logo {
        padding-bottom: 20px;
    }
    h1.header_logo img {
        max-width: 120px;
    }
    #header #cart_area {
        position: absolute;
        width: 100%;
        top: 0;
    }
    #cart_area p.cart-trigger {
        border-bottom: none;
    }
    #search {
        float: none;
        margin: 0 15px;
        padding: 0;
        width: auto;
    }
}

 

レイアウトの編集

管理画面 > コンテンツ管理 > ページ管理

ページ一覧にあるTOPページの「…」をクリック

ページ一覧にあるTOPページの「レイアウト編集」をクリック

カゴの中とカゴの中(オリジナル)を入れ替えます。

後で写真を追加

プレビューで確認し、OKならば[登録]をクリック。

後で写真を追加

 

キャッシュのクリア

管理画面 > コンテンツ管理 > キャッシュ管理

[キャッシュ削除]をクリック

 

変更後の確認

「shift」を押しながらリロードして、確認。

[変更前]

後で写真を追加

[変更後]

後で写真を追加
 
 

 

The post EC-CUBE3をやってみた first appeared on サマンサ.

]]>
http://samancha.com/archives/2065/feed 0 2065
ゲーム・オブ・スローンズ http://samancha.com/archives/2048 http://samancha.com/archives/2048#respond Sun, 15 Apr 2018 05:59:53 +0000 http://samancha.com/?p=2048 最近ハマっている海外シーズン物。今回はゲーム・オブ・スローンズを見ています。 シーズン7くらいあるから、見るのが大変だけど…何とか見たいと思います。   ゲーム・オブ・スローンズ紹介 落とし子とか独特の表現が聞 […]

The post ゲーム・オブ・スローンズ first appeared on サマンサ.

]]>
最近ハマっている海外シーズン物。今回はゲーム・オブ・スローンズを見ています。

シーズン7くらいあるから、見るのが大変だけど…何とか見たいと思います。

 

ゲーム・オブ・スローンズ紹介

落とし子とか独特の表現が聞き慣れなくて何だ?って思う時がある(笑)

王が誰なのかよくわからない時がある。閣下とか呼ばれてるし…

 

 

The post ゲーム・オブ・スローンズ first appeared on サマンサ.

]]>
http://samancha.com/archives/2048/feed 0 2048
ハウスダストの脅威 http://samancha.com/archives/2041 http://samancha.com/archives/2041#respond Sun, 15 Apr 2018 04:27:00 +0000 http://samancha.com/?p=2041 ハウスダストになった エアコンのカビが原因で発症しから、半年が経ちました。地獄の始まりです。 キレイな場所だと落ち着いていますが、汚いところだと胸が苦しくなります。 最近では、電車、オフィス、キッチン、風呂場など…様々な […]

The post ハウスダストの脅威 first appeared on サマンサ.

]]>
ハウスダストになった

エアコンのカビが原因で発症しから、半年が経ちました。地獄の始まりです。

キレイな場所だと落ち着いていますが、汚いところだと胸が苦しくなります。

最近では、電車、オフィス、キッチン、風呂場など…様々なところで苦しいです。

一体どうやって暮らせと言うのか?病院に行っても薬飲んで様子見…

人生でワースト3に入る生き地獄。治るのだろうか?

 

The post ハウスダストの脅威 first appeared on サマンサ.

]]>
http://samancha.com/archives/2041/feed 0 2041