[EC-CUBE3] 商品総数を表示したかった。[メモ]

EC-CUBE2時代はテンプレートにサクッとphpを書けば表示できてたものが、EC-CUBE3になってsymfonyベースになったせいで非常にデザイナー泣かせのシステムになってしまいました。

何が辛いって、「変数一つ表示するのにそんなに手間をかけないといけないの?」ってレベルの話で、データベースの値を変更しないとそもそもcontrollerが動かないという正直なところ、symfonyはもう二度と触りたくないと思いました。
全然仕組みがわからないので、かれこれ数十時間を無駄に費やしたと思います。
本も数冊買ったけど全然やくに立たなかった。

愚痴っても仕方ないので、登録されている商品の総商品点数の表示の仕方をメモしておきます。

1. ブロックを作る

全ページのヘッダーに商品数を表示したかったので、全ページに表示するための、ブロックを管理画面から作成します。
(既存のブロックに追加する場合は、ここは飛ばしてok)
スクリーンショット 2018-04-10 19.34.40

2. ページレイアウトにブロックを追加

レイアウト管理で、作成したブロックをページレイアウトに追加します。
スクリーンショット 2018-04-10 19.35.42

3. [重要]DBでdtb_blockのlogic_flgを1にする

これをしないと、上に書いたように、そもそもControllerが動かないという謎の仕様。
管理画面のブロック追加のページに書いといてほしいと思いました。
スクリーンショット 2018-04-10 19.39.22

4. Controllerを作る

/src/Eccube/Controller/Block/に、任意の名前のファイルを作ります。
ProductCountController.phpとかでいいと思います。

中身は、以下。

<?php 
namespace Eccube\Controller\Block;
use Eccube\Application;
class ProductCountController
{
    public function index(Application $app)
    {
        $products = $app['eccube.repository.product']->findAll();
        $num = count($products);
        
        return $app->render('Block/product_count.twig', array(
            'count' => $num,
        ));
    }
}

これはもうどうしようもなくてフォーラムに質問したら教えてくれました。
やはり本読んだりググるより、直接知ってる人に聞くのが一番だと思いました。

5. ControllerProviderに追記をする

/src/Eccube/ControllerProvider/FrontControllerProvider.php
の、
75行目付近にブロック関連のプロバイダーが書いてあるので、そこに追記します。

$c->match('/block/product_count', '\Eccube\Controller\Block\ProductCountController::index')->bind('block_product_count');

6. ブロックに変数を記述

ここで、ようやくビューに変数を書きます。

<dl>
<dt>商品点数</dt>
<dd>{{ count }}</dd>
</dl>

以上です。

EC-CUBE2だったら、/data/Smarty/templates/default/header.tpl に以下を書くだけだったのに、本当めんどくさくなりましたね。

<!--{php}-->
    $objQuery = new SC_Query();
    $table = 'dtb_products';
    $where = 'del_flg = 0 AND status = 1';
    $count = $objQuery->count($table, $where);
        echo $count;
    <!--{/php}-->

[Concrete5 v8]上級権限モードで権限を設定する時につまづく私のための備忘録[メモ]

Concrete5で、上級権限モードにすると承認フローや、アカウント別の管理画面へのアクセス処理など、非常に細かく設定ができます。
が、制作上権限の設定を忘れて、ファイルマネージャーへ管理者アカウント以外でアクセスできなくなってしまったり、新規ページコンポーザーでアクセス拒否のエラーが出たりして、あれ、どこで設定するんだっけ?的なことがちらほらあります。
上級権限モードにした時に設定を忘れないように、備忘録をつけておきます。

上級権限モードとは

上級権限モードにすると

  • ページの閲覧・編集・編集の承認(公開)・管理(移動やコピー)・削除
  • ページの公開日時と公開終了日時の指定
  • エリアの閲覧・編集・編集の承認(公開)・管理(移動やコピー)・削除
  • エリアに追加出来るブロックの制限
  • ブロックの閲覧・編集・削除
  • 作成できる子ベージのページタイプの限定
  • グループへの期間限定加入

をユーザーやグループ毎に行えるようになります。
Concrete5日本語公式サイトより

権限の設定箇所が結構とっ散らかっている印象があって、ついうっかり設定を忘れてしまうことが多いです。

設定する箇所について

権限グループを作って、ユーザーごとに権限グループを割り当てる方法をとっています。
デフォルトでは、スーパーユーザー(インストール時のアカウント)はグループに属していないため、制作中はスーパーユーザーを使っていると、承認フロー周りの確認などでつまづくことがあります。
実際ありました。

僕が設定するグループは大体三つで、

  • 管理者:最上位権限
  • 編集者:編集・ページ追加のみ
  • 制作者:最上位権限

になります。
管理者と制作者は基本同じ権限に設定しているのですが、運用時に承認フローで承認メールを飛ばしたりする際に制作側に承認を求められても困るので、
管理者グループのみに承認メールを飛ばすようにするための区分けです。
スーパーユーザーがあるのに制作者グループを作っているのは、チームで制作する際のアカウントのためです。

原則的に、編集者が編集を行ってワークフローに送信してもらって、管理者が承認を行って公開、というイメージです。
そのほかにも編集者にはページを削除する権限を外したり、テンプレートの変更を行えないようにして作業範囲を限定的にすることで意図しないサイトの崩壊を防ぐ目的で制作しています。

なお、僕がいつも設定している箇所は以下の通りです。

ページ権限

場所:/index.php/dashboard/sitemap/full
基本的に、ページの権限は、フルサイトマップでトップページに設定をして、下階層はトップページを継承するようにしています。

また、もっと細かく設定したい場合、例えば、
「NEWS」ページだけを追加編集できる権限グループには、トップページから権限継承せずにNEWSページ以下のみにページ追加の権限を与えるとか、
ページ追加はできないけど、編集だけできる権限グループを作ったりとか、応用するとかなり細かく設定できます。

一般公開したくないページを作る場合は、権限を継承せずに手動で「表示」のゲストを登録ユーザーなどに変更すればいいかと思います。

ページタイプ権限

場所:/index.php/dashboard/pages/types
追加できるページタイプごとに権限を設定できます。
ここの設定をすることで、「ページの追加とサイトの案内」ボタンクリック時の「新しいページ」にページタイプが表示されます。
ここの設定を完全に忘れていて、下位権限グループで「新しいページ」の項目が表示されなくて小一時間悩みました。

スクリーンショット 2018-03-15 17.10.07

Screen Shot 2018-03-15 at 17.18.10-fullpage

スクリーンショット 2018-03-15 17.37.16

ファイルマネージャー権限

場所:/index.php/dashboard/system/files/permissions
ファイルマネージャーにアクセスする権限や、ファイルの操作に関する権限を設定できます
スクリーンショット 2018-03-15 17.22.05

タスク権限

場所:/index.php/dashboard/system/permissions/tasks
各種設定や、操作などの権限を設定できます。
なぜかフルサイトマップのアクセスもここにあったりして、ややこしいです。
僕はフルサイトマップを使用してページの更新をするのが効率がいいと考えているので、編集者グループにもフルサイトマップへのアクセスを許可すべきかと思っています。
スクリーンショット 2018-03-15 17.24.17

ユーザー権限

場所:/index.php/dashboard/system/permissions/tasks
ユーザーの追加や、削除などへのアクセスの権限です。
編集者にユーザーの追加や削除の権限は与えない方針です。
スクリーンショット 2018-03-15 17.26.59

以上です。

[concrete5 サイト制作] 社会福祉法人 恩賜財団 東京都同胞援護会

社会福祉法人 恩賜財団 東京都同胞援護会のサイトを10年ぶりにリニューアルしました
http://doen.jp/

昔MTで作ったせいで更新がすごく大変だったものをconcrete5にしてクライアントの更新作業が楽になるように設計。
もうずっとリニューアルしたかったんですよ

Screen Shot 2017-04-03 at 16.15.24-fullpage

Screen Shot 2017-04-03 at 16.15.39-fullpage

Screen Shot 2017-04-03 at 16.16.09-fullpage

Screen Shot 2017-04-03 at 16.16.03-fullpage

やったこと

  • デザイン
  • HTML/CSS/JSコーディング
  • レスポンシブ
  • concrete5組み込み
  • フォーム作成(concrete5外)
  • 承認フロー
  • 運用マニュアル作成

つらかったこと

  • 同じフォーマットにひたすら住所やら電話番号やら座標やらを入力していく作業
    →xmlかcsvでインポーター使えばよかったと反省。あるいはデータ投稿だけしてもらうバイトを雇えばよかった。
  • 承認フローがなかなかうまく機能してくれなくてどハマり
    →参考文献がなかったのと、フォーラムに質問するということを考えなかったので反省。次からはググってもわからない問題はフォーラムに質問しよう。
  • さくらサーバーで通知メールが飛ばない問題
    →もうどうしようもなくてフォーラムに相談して解決してもらった。

更新性が高い設計にするために汎用性をもたせつつ、デザインを両立させるという作業に対して、非常にモチベーションが高く保てたかな、と。
今回制作ページは160ページほどで、concrete5で作らなかったらおそらく3倍くらいの作業時間が必要だったのではないかなーと思います。

リリースしたおかげで今月は暇になったからゆっくり療養します。もう体がバキバキ。

[concrete5] Ver8.0.3 さくらのレンタルサーバーだとメール通知が送れない問題[解決]

表題の通り、さくらのレンタルサーバーでメール通知が送れない問題が発生して、ログを見てもわからないし、さくらの管理画面にエラーログは出力されないしで、全く原因がわからず1日半くらい費やしてしまってからフォーラムに相談してやっと解決できたのでご紹介します。
フォーラムで教えてくださった方に感謝。

concrete5 JAPAN フォーラム コメント欄のメール通知が送られない

おそらくさくらのレンタルサーバーでのセキュリティで、送信元ドメインが不正だとphp関数からメールが送れない、というのが原因だったのかと思います。

環境は以下

  • さくらレンタルサーバー ビジネス
  • PHP 5.6.30
  • mySQL 5.5
  • concrete5 8.0.3

確認した送れない通知メールは以下

  • コメント欄ブロックの通知
  • メール送信テスト
  • パスワード再発行のメール

なお以下の通知メールは送れていました。

  • ワークフローの通知
  • フォームブロックからの投稿通知

application/config/generated_overrides/concrete.phpに以下を追記して対処しました。

<?php

/**
 * -----------------------------------------------------------------------------
 * Generated 2017-02-27T15:34:58+09:00
 *
 * DO NOT EDIT THIS FILE DIRECTLY
 *
 * @item      cache.full_page_lifetime_value
 * @group     concrete
 * @namespace null
 * -----------------------------------------------------------------------------
 */
return [
    'locale' => 'ja_JP',
    'version_installed' => '8.0.3',
    'version_db_installed' => '20161216000000',
    'misc' => [
        'login_redirect' => 'DESKTOP',
        'access_entity_updated' => 1488174725,
    ],
    'cache' => [
        'blocks' => false,
        'assets' => false,
        'theme_css' => false,
        'overrides' => false,
        'pages' => '0',
        'full_page_lifetime' => 'default',
        'full_page_lifetime_value' => null,
    ],
    'theme' => [
        'compress_preprocessor_output' => false,
        'generate_less_sourcemap' => false,
    ],
    
    
    // さくらレンタルサーバー用メール通知 ここから
    'email' => array(
        'enabled' => true,
        'default' => array(
            'address' => 'concrete5-noreply@' . (isset($_SERVER['SERVER_NAME']) ? $_SERVER['SERVER_NAME'] : 'localhost'),
        )
    ),
    // さくらレンタルサーバー用メール通知 ここまで    
    
];

MacのFirefoxでimgのhoverにtransitionとopacityを書くとバグる

表題の通りです。
Firefox(バージョン52で確認)で、画像にマウスを乗せた時にフェードでちょっとだけ透明度を上げるような動き、よくあるじゃないですか。

画像に直接transitionとopacityを指定したら、途中までは想定通りフェードで透明になるんですが、最後にopacity:1に戻ってしまうという事象が発生しました。

追記
どうやらwindowsのfirefoxだと想定通りに動くらしいので、macのfirefoxだけの事象のようです。
タイトルを変更させていただきました。
Firefoxでimgのhoverにtransitionとopacityを書くとバグる

MacのFirefoxでimgのhoverにtransitionとopacityを書くとバグる

想定の動き(Chromeでの表示)

Firefoxでの動き(Firefoxでの表示)

ソースコードは以下です。

<html>
<head>
<style>
.box {
  display: inline-block;
  }
a {
    display: block;
}
img {
    transition: opacity 0.3s ease;
}
a:hover img {
    opacity:0.8;
}
</style>
</head>
<body>
<div class="box">
<a href="#">
  <picture>
    <img src="1.jpg"> // ←こいつにtransitionとopacityを付与しているとバグる
  </picture>
</a>
</div>
</body></html>

原因がつかめなくて四苦八苦してしまったのですが、img自体にtransitionとopacityを付与するのではなく、imgの親にtransitionとopacityを付与することで解決しました。

<html>
<head>
<style>
.box {
  display: inline-block;
  }
a {
    display: block;
}
picture {
    transition: opacity 0.3s ease;
}
a:hover picture {
    opacity:0.8;
}
</style>
</head>
<body>
<div class="box">
<a href="#">
  <picture>// ←こいつにtransitionとopacityを付与して解決
    <img src="1.jpg"> 
  </picture>
</a>
</div>
</body></html>

[concrete5]ページリストからページのエリアを表示する

ページリストで、ページ属性の取得は$page->getAttribute(‘handle’);で簡単にできたのですが、ページ内のエリアの取得ができなくてハマってしまってかなり時間を費やしてしまったのでメモ。

acliss19xxさんに教えていただきました。

カスタムテンプレート内に、下記を書くと表示できます。

$a = new Area('Main');
$a->display($page); 

[Concrete5]Block Designer Proを使う時のちょっとした罠

Concrete5.6まではDesigner Contentが無料で使えたので非常に良かったのですが、5.7以降はDesigner Contentのアップデートがなく、5.7以降では有料のBlock Designerを利用するようになりました。

今回繰り返しのブロックを作る必要があって、$65もするBlock Designer Proが必要になってしまったので購入してインストールしようとしたところ、version8 compatibleって書いてあるのにどうしても「RamonLeenders\BlockDesigner\FieldType\FieldType not found」と出て、インストールができなかったのでちゃーんとアドオンのページを確認したら、「(so Block Designer is required first)」って書いてありました。

単純すぎてアホらしいけど、Block Designer自体がないとBlock Designer Proはインストールできないのでした。

つまり、$65で購入したBlock Designer Proはそれだけでは意味がなく、$30のBlock Designer本体が必要と。
トータルで$95もかかりました。

[Concrete5] レイアウトの削除方法

そういえばレイアウトの追加はわかりやすいけど、削除はわかりにくい場所にあったなぁと思いまして。
Concrete5は自由度が高くて使いやすいのだけど、やはりまだまだwordpressに比べると人口的にも少ないし、ナレッジの蓄積が足りないなぁと思います。5.6から5.7に変わった時点で5.6までのノウハウやプラグインも使えなくなってしまって、かなり苦労しました。

下記に、くどくどとスクリーンショットを交えて書いてありますが、非常に分かりづらいので、サクッと解決方法を知りたい方は、動画キャプチャをご覧ください。

動画の流れを文章とスクリーンショットで記載しているだけですので動画を見て解決したら読む必要はないです。

レイアウトの追加は簡単

レイアウト機能の追加はエリアからすぐに選択できるので簡単に追加できます。
追加

レイアウト

こんな感じですぐに2カラムや3カラムの追加が可能です。

そして、削除をしたい時に削除のメニュー項目が見つからないことに気づきます。

エリアのメニューを開いても、「ブロックを追加」「エリアのデザインを編集」「レイアウトを追加」の三つしかありません。
エリア

レイアウトのメニューを開くと、エリアのメニューに加えて、「コンテナーのレイアウトを編集」「レイアウトデザインを編集」「レイアウトをプリセットとして保存」「プリセットを管理」の4項目が表示されます。
レイアウトメニュー

直感的に操作が可能なConcrete5なら、「レイアウトデザインを編集」だろうと、思って選択すると何やらエディタが出てきて、「どうやらここでは削除ができないなぁ、つまりConcrete5でレイアウトを一旦追加してしまうとレイアウト自体を削除することはできないのだろう…」と思ってしまいがちです。
レイアウトデザインを編集

レイアウト自体の削除は、「コンテナーのレイアウトを編集」

コンテナー

直感的にわかりにくい名称の「コンテナーのレイアウトを編集」、これはレイアウトがカラムになっているものを包括するブロックという意味として捉えられるので、このメニューを選ぶと、ゴミ箱のアイコンがあるので、ここからレイアウト自体の削除が可能です。
コンテナ編集

ウェブカメラを隠すNopeを買ってきた

最近Macのカメラが乗っ取られるという記事をよく見かけるので、僕のひどい顔を世間様にお見せするわけにはいかないので、いっそシール(ウェブカメラ目隠しシール
)で塞いでしまうことも考えていたのですが、お客さんとビデオ会議するのにも使うので、ちゃんと隠せて、さっと外せてすぐ使える、みたいなものがいいかと思い、カメラを隠す「Nope」というスタイリッシュな磁石を買ってきました。

参考:「ウェブカメラをスタイリッシュに隠して盗撮を防止する「Nope」

2016-10-03-16.41.09

秋葉館というお店で、iMac用が1組、iPadやMacbook用の2組の3組がセットになっていて1,242円でした。

iMac用とiPad用の違いは、磁石の大きさくらいです。
二つの磁石の片方に両面シールを貼って固定し、もう片方を目隠し用として使います

2016-10-03-17.08.39

実際に、Photo Boothを使って試してみたところ、貼り付けた位置が少しずれてしまって少し角が見えてしまいました。

スクリーンショット 2016-10-03 17.13.59

なお、まぁ顔が見えないならいいやと妥協しました。
固定側の磁石をちゃんと貼れば、しっかり隠れるとおもいます

Adobe AnimateCCでサクッとHTML5 canvasアニメーションを作れた

Adobe AnimateCCって?

Adobe AnimateCCは昔ウェブ界を席巻していた、旧Flashです。
Flashと同じ感覚で、canvasアニメーションが作れるみたいです。
僕はスクリプト系はてんでダメなんで、GUIでcanvasアニメーションがサクッと作れるのは非常に助かります。
ただ、現状使用している人自体が少なく、スクリプトの記述方法action scriptと若干変わってたりしてノウハウがあまりなくて独学で勉強するしかないのはちょっと辛いところだと思います。時間をかけてじっくり学んでいこうと思います。

ただ、そのままだとIE10で表示されないので、create.jsのdevicePixelRatioを調整する必要があるそうです(元同僚に教えてもらった)。
animateでパブリッシュした際に出力されるscriptのvar canvas, stage, exportRoot;の前に、以下の記述をすればIE10でも表示できます。

if("devicePixelRatio" in window === false) {
	window.devicePixelRatio = 1;
}

一応検証した限りでは、以下のブラウザで動きました。

  • Chrome52+
  • Firefox48+
  • Safari9+
  • IE10+

canvasなのでスマホでも問題ないはずです。