熊本のウェブ制作会社のエンジニアのググる生活

地方のウェブ制作会社（元：佐賀・今：熊本）で働く、エンジニア。
HTML、CSS、JavaScript、PHP、Smary、Twig、EC-CUBE、WordPress、Movable Type 等でお仕事してます。
ググって解決した話や、自分で考えて分かったことなどを、自分用にメモとして残すブログです。

※URLがあったら元記事を参照推奨です！
※ほとんどの事は検証はしていますが、あくまでも参考程度にお願い致します！
※記載が不正確であったことにより生じたいかなる損害に関しても、当ブログは責任を負いかねます。自己責任でよろしくおねがいいたします。

バージョン 2.13.4

http://blog.livedoor.jp/mokuhen/archives/51608775.html
に続いてECCUBEの管理画面ネタ


ページ詳細設定とレイアウト設定の画面のテーブルにて、
名称｜レイアウト｜ページ編集｜削除　と
項目がありますが、その中に確認という項目を追加しました。



<h2>編集可能ページ一覧</h2>
<div class="btn addnew">
    <a class="btn-normal" href="?device_type_id=<!--{$device_type_id|u}-->"><span>ページを新規入力</span></a>
</div>
<table class="list">
    <col width="60%" />
    <col width="10%" />
    <col width="10%" />
    <col width="10%" />
    <col width="10%" />
    <tr>
        <th>名称</th>
        <th>レイアウト</th>
        <th>ページ詳細</th>
        <th>確認</th>
        <th>削除</th>
    </tr>
    <!--{foreach key=key item=item from=$arrPageList}-->
        <tr style="<!--{if $item.page_id == $page_id}-->background-color: <!--{$smarty.const.SELECT_RGB}-->;<!--{/if}-->">
            <td>
                <!--{$item.page_name}-->
            </td>
            <td class="center">
                <a href="./<!--{$smarty.const.DIR_INDEX_PATH}-->?page_id=<!--{$item.page_id}-->&device_type_id=<!--{$item.device_type_id}-->" >編集</a>
            </td>
            <td class="center">
                <!--{if $item.filename|strlen >= 1}-->
                    <a href="?page_id=<!--{$item.page_id}-->&device_type_id=<!--{$item.device_type_id}-->">編集</a>
                <!--{/if}-->
            </td>
            <td class="center">
                <a href="<!--{$smarty.const.ROOT_URLPATH}--><!--{$item.filename}-->.php" target="_blank">確認</a>
            </td>
            <td class="center">
                <!--{if $item.edit_flg == 1}-->
                    <a href="javascript:;" onclick="fnTargetSelf(); eccube.fnFormModeSubmit('form_edit','delete','page_id','<!--{$item.page_id|escape:'javascript'|h}-->'); return false;">削除</a>
                <!--{/if}-->
            </td>
        </tr>
    <!--{/foreach}-->
</table>


/data/Smarty/templates/admin/design/index.tpl
/data/Smarty/templates/admin/design/main_edit.tpl

ページ詳細設定とレイアウト設定では微妙にコードが違いますが、
赤色のところを適用するとOKです。
レイアウト設定には <col> が無かったです。




続いてレイアウト設定画面のブロックUI。



ここからブロック編集画面へのリンクを貼れればいいなーと思ったのですが、
楽ちんで出来たので紹介。


<!-- ★☆★ HEADタグ内テーブル ☆★☆ -->
<td colspan="3" id="<!--{$arrTarget[$smarty.const.TARGET_ID_HEAD]}-->" class="ui-sortable">
    <!--{assign var="firstflg" value=false}-->
    <!--{foreach key=key item=item from=$arrBlocs name="bloc_loop"}-->
        <!--{if $item.target_id == $arrTarget[$smarty.const.TARGET_ID_HEAD]}-->
            <div class="sort<!--{if !$firstflg}--> first<!--{/if}-->">
                <input type="hidden" class="name" name="name_<!--{$smarty.foreach.bloc_loop.iteration}-->" value="<!--{$item.name}-->" />
                <input type="hidden" class="id" name="id_<!--{$smarty.foreach.bloc_loop.iteration}-->" value="<!--{$item.bloc_id}-->" />
                <input type="hidden" class="target-id" name="target_id_<!--{$smarty.foreach.bloc_loop.iteration}-->" value="<!--{$item.target_id}-->" />
                <input type="hidden" class="top" name="top_<!--{$smarty.foreach.bloc_loop.iteration}-->" value="<!--{$item.bloc_row}-->" />
                <!--{$item.name}-->
                <label class="anywherecheck">(<input type="checkbox" class="anywhere" name="anywhere_<!--{$smarty.foreach.bloc_loop.iteration}-->" value="1" <!--{if $item.anywhere == 1}-->checked="checked"<!--{/if}--> />全ページ)</label>
                <a href="bloc.php?bloc_id=<!--{$item.bloc_id|h}-->&device_type_id=<!--{$device_type_id|h}-->" >編集</a>
            </div>
            <!--{assign var="firstflg" value=true}-->
        <!--{/if}-->
    <!--{/foreach}-->
</td>
<!-- ★☆★ Headタグ内テーブル ☆★☆ -->


/data/Smarty/templates/admin/design/index.tpl

似たような記述が13箇所ありますが、赤色のところを1個1個適用するとOKでした！

下記の様な場合、
親要素にclearfixのbefore、afterがあったらmac環境だとカラム落ちが発生しました…。
単純にfloatやinline-blockからflexへの移行の際に消し忘れたのですが、
はまってしまったのでメモ！


赤色の所がいらない。

<!DOCTYPE html>
<head>
  <title>test</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    ul {
      clear: both;
      display: -webkit-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-flex-wrap: wrap;
      flex-wrap: wrap;
      list-style: none;
    }
    ul:before,
    ul:after {
      content: "";
      display: table;
    }
    ul:after {
      clear: both;
    }
    li {
      background-color: #f0f0f0;
      display: -webkit-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      width: 50%;
    }
    li span {
      display: block;
    }
    li:nth-child(1) span {
      background-color: red;
    }
    li:nth-child(2) span {
      background-color: blue;
    }
    li:nth-child(3) span {
      background-color: green;
    }
  </style>
</head>
<body>
  <ul>
    <li><span>DOCTYPE<br>DOCTYPE<br>DOCTYPE</span></li>
    <li><span>html</span></li>
    <li><span>PUBLIC<br>PUBLIC</span></li>
  </ul>
</body>
</html>

stackoverflow にも何件もスレッドがありましたが、
中々良さそうな答えに巡り合えずに断念しそうになりましたが、
下記のスレッドで解決出来ました！

http://stackoverflow.com/questions/29149904/display-flex-in-chrome-with-100-height-of-child-elements

子要素にも display: flex; が必要とのこと。

<!DOCTYPE html>
<head>
  <title>test</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    ul {
      display: -webkit-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-flex-wrap: wrap;
      flex-wrap: wrap;
      list-style: none;
    }
    li {
      background-color: #f0f0f0;
      display: -webkit-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      width: 50%;
    }
    li span {
      display: block;
    }
    li:nth-child(1) span {
      background-color: red;
    }
    li:nth-child(2) span {
      background-color: blue;
    }
    li:nth-child(3) span {
      background-color: green;
    }
  </style>
</head>
<body>
  <ul>
    <li><span>DOCTYPE<br>DOCTYPE<br>DOCTYPE</span></li>
    <li><span>html</span></li>
    <li><span>PUBLIC<br>PUBLIC</span></li>
  </ul>
</body>
</html>
タグ ：
フレキシブルレイアウト

※バージョン 1 ですm(_ _)m

簡単なオプション指定で、
カルーセルにもスライダーにもなれる
高機能で使いやすい Owl Carousel ですが、
Owl を指定した子要素のすべてに発火するようになっているので、
少し変えてみました。

noscript に反応してほしくなかっただけですが、
普段使う要素だけに絞った方が良い気がしたので、
下記の様に変更しました。

$elem.children()

↓↓↓↓↓

$elem.children('a, p, li, img, div')

エディタの置き換えで一発ＯＫでした。


ミニファイに変換は恐らく下記のGoogleお手製を使用されてるみたいで、
（変換後のコードが似ていたので多分そうかなと…）
こちらもsimpleモードなら大丈夫でした。ライセンスコメントをお忘れなく！

http://closure-compiler.appspot.com/home

バージョン 2.13.4

Smartyではなく、
PHPファイル側でごにょごにょしたかったのでやってみました。

class LC_Page_Ex に書いていきます。

各ページのタイトルは 各々のファイルの public function init にて定義されているので、
まず親の parent::init(); を呼んできて、上の関数を読み込みます。
読み込んだ中の $this->tpl_title; をとっ捕まえて、現在のClass内に return してあげます。

class LC_Page_Ex extends LC_Page
{
    /**
     * Page を初期化する.
     *
     * @return void
     */
    public function init($mode = false)
    {
        parent::init();

        switch ( $mode ) :
          case 'title' :
            $ec_var = $this->tpl_title;
            break;
          default :
            $ec_var = '';
            break;
        endswitch;

        return $ec_var;
    }
}

$ec_get = new LC_Page_Ex;
$ec_get_title = $ec_get->init('title');

これで、 echo $ec_get_title とするとPHPファイル側でタイトルの取得や出力が可能になりました。

解説もなしにメモ。
随時更新予定…。（2016/06/15 更新）

SEO系は今のところ、自分で書いて頑張っているので入れていません。
コメント系は使用しない想定になっています。

まずは Multi Plugin Installer を使って、下記の一覧をまとめて、
インストールと有効化をする。

■ブログ機能のみのサイト
Admin Post Navigation
Category Order and Taxonomy Terms Order
Edit Author Slug
EWWW Image Optimizer
Force Regenerate Thumbnails
Google XML Sitemaps
Post Thumbnail Editor
Post Types Order
Simple Local Avatars
TinyMCE Advanced
TypePad 絵文字 for TinyMCE
WP Multibyte Patch
Duplicate Post

■ブログ＋実績とかあるサイト
Admin Columns
Admin Post Navigation
Advanced Custom Fields
Category Order and Taxonomy Terms Order
Custom Post Type Permalinks
Edit Author Slug
EWWW Image Optimizer
Force Regenerate Thumbnails
Google XML Sitemaps
Post Thumbnail Editor
Post Types Order
Simple Local Avatars
TinyMCE Advanced
TypePad 絵文字 for TinyMCE
WP Multibyte Patch
Duplicate Post
Enhanced Media Library


各種設定が終わったら、
通常運用では不要な為、下記を停止＆削除する
Multi Plugin Installer
Edit Author Slug




候補
Raw HTML
タグ ：
プラグイン

コピペですが、自分用に投稿

※番号だけではなくデータそのものが初期化されるので、
　運用中には絶対に実行しないでくださいm(_ _)m


バージョン 2.13.4、2.13.5 で確認しています。


商品を初期化

TRUNCATE TABLE dtb_products;
TRUNCATE TABLE dtb_products_class;
TRUNCATE TABLE dtb_product_categories;
TRUNCATE TABLE dtb_product_status;

UPDATE dtb_products_product_id_seq SET sequence=0;
ALTER TABLE dtb_products_product_id_seq AUTO_INCREMENT=1;
UPDATE dtb_products_class_product_class_id_seq SET sequence=0;
ALTER TABLE dtb_products_class_product_class_id_seq AUTO_INCREMENT=1;

http://www.4web8.com/9807.html　より


カテゴリーを初期化

TRUNCATE TABLE dtb_category;
TRUNCATE TABLE dtb_category_count;
TRUNCATE TABLE dtb_category_total_count;

UPDATE dtb_category_category_id_seq SET sequence=0;
ALTER TABLE dtb_category_category_id_seq AUTO_INCREMENT=1;
UPDATE dtb_classcategory_classcategory_id_seq SET sequence=0;
ALTER TABLE dtb_classcategory_classcategory_id_seq AUTO_INCREMENT=1;

カテゴリーは見当たらなかったので、
見よう見まねで書きました。


規格を初期化

TRUNCATE TABLE dtb_class;
TRUNCATE TABLE dtb_classcategory;
TRUNCATE TABLE dtb_products_class;

UPDATE dtb_classcategory_classcategory_id_seq SET sequence=0;
ALTER TABLE dtb_classcategory_classcategory_id_seq AUTO_INCREMENT=1;
UPDATE dtb_class_class_id_seq SET sequence=0;
ALTER TABLE dtb_class_class_id_seq AUTO_INCREMENT=1;
UPDATE dtb_products_class_product_class_id_seq SET sequence=0;
ALTER TABLE dtb_products_class_product_class_id_seq AUTO_INCREMENT=1;

INSERT INTO `データベース名`.`dtb_classcategory` (`classcategory_id`, `name`, `class_id`, `rank`, `creator_id`, `create_date`, `update_date`, `del_flg`) VALUES ('0', NULL, '0', '0', '0', CURRENT_TIMESTAMP, '0000-00-00 00:00:00', '0');

一部分が商品とかぶります。
商品とカテゴリーと違うところは、ダミーデータを別途挿入しないと、
すべての商品が売り切れの判断（在庫が見つからない）をされてしまい、
購入ができなくなってしまいます（汗）
データベース名は、環境に合わせて変える必要があります。



※番号だけではなくデータそのものが初期化されるので、
　運用中には絶対に実行しないでくださいm(_ _)m
タグ ：
小技
SQL

バージョンは、2.12.2で見ています。
2.11、2.13も多分同じだと思います。
（追記：2.13.4 でもそのままでいけました。）

追従とマウスホバーをひとつずつご紹介。




テーブルヘッダーを追従させる。

管理画面でよくみるテーブルのヘッダーを、
追従させてみました。






管理画面のテンプレート　/data/Smarty/templates/admin/main_frame.tpl　の admin_file_manager.css　というCSSの下に下記スタイルを追記 

<style type="text/css">
    #navi li ul {
        z-index: 1;
    }
    table.list.js_add_is_active {
        position: relative;
    }
    table.list.js_add_is_active .list_fixed {
        opacity: 0;
        position: fixed; top: 0;
    }
    table.list.js_add_is_active .list_fixed.js_add_is_active {
        opacity: 1;
    }
</style>

同ファイルの　file_manager.js　というJSの下に下記スクリプトを追記 

<script type="text/javascript">
jQuery(function($) {

/* ---------------------------------------
 スクロール追従
--------------------------------------- */
var $list = $('table.list');
$(window).bind('load.list', function() {
    $list.addClass('js_add_is_active').each(function() {
        // scroll 内でも自身を使いたいので便利に格納
        var $this = $(this);

        // ターゲットを設定
        var $list_head       = $this.find('tr:first');
        var $list_head_label = $list_head.children('th');

        // 横幅計算
        $list_head_label.each(function() {
            var width = $(this).width();
            $(this).css({
                'width': width,
            });
        });

        // 位置取得
        var offset = $list_head.offset();
        var left   = offset.left;

        // 複製
        var $list_head_html = $list_head.html();
        $this.append('<tr class="list_fixed">' + $list_head_html + '</tr>');

        // 複製した fixed 取得
        var $fixed = $this.find('tr.list_fixed');

        // fixed に位置情報を付与
        var fixed_left = left - 1; // -1 は border分
        $fixed.css({
            'left': fixed_left + 'px',
        });

        // スクロール追従
        $(window).bind('scroll.list', function() {
            var thisTop = $this.offset().top;
            var scrollTop = $(window).scrollTop();
            if ( scrollTop > thisTop ) {
              $fixed.addClass('js_add_is_active');
            } else {
              $fixed.removeClass('js_add_is_active');
            }
        });
    });
});

});
</script>





テーブルの行にマウスホバーすると、現在の行をハイライトにする。

管理画面のテンプレート　/data/Smarty/templates/admin/main_frame.tpl（さっきと一緒）　の admin_file_manager.css　というCSSの下（さっきと一緒）に下記スタイルを追記 

<style type="text/css">
    table.list tr:not([class]):hover th,
    table.list tr:not([class]):hover td {
        background: rgba(0, 0, 0, .1) !important;
    }
</style>

バージョン 2.12.2

その表示不具合、
プラグインが原因かもしれません...。

私が追加修正したサイトでは、
販売期間設定というプラグインを無効にすると正常に表示されました
タグ ：
EC-CUBE
プラグイン

table-header-groupを使用しているところに、
opacityを0にしてふわっとさせたかったけど、
IEだと上手くtransitionしてくれずにdisplay none/blockの様に一瞬で表示非表示の状態になってしまったので、
table-header-groupを諦めたところ、きちんと変化してくれました。

また table-header-group の中に子要素を作ってそこで変化の指定をする方法でも
上手く行ったのでメモしておきます。
タグ ：
css3

このページのトップヘ