[Concrete5]ログイン時や編集モード時で表示を切り替えよう[メモ]

バージョン:5.6.3.1

自分用メモ的な。

ログインしている or していない

ログインして”いる”時だけ表示

ログインは登録ユーザーしかできないので、クライアントへのメモ的な扱いで残しておくような用途で使えます。

<?php
$u = new User();
if ($u->isRegistered()) { ?>
ここに書いたものはログインして"いる"時だけ表示されます
<?php } ?>

ログインして”いない”時だけ表示

ログインしていない時なので、一般のユーザーが閲覧する際にだけ表示するものを指定できます。
あんまり意味がないと思われますが、最近使いました。

<?php
$u = new User();
if (!$u->isRegistered()) { ?>
ここに書いたものはログインして"いない"時だけ表示されます
<?php } ?>

編集モード or 非編集モード

編集モード時だけ表示

以前、[Concrete5]エリア内にブロックがある時にだけ表示する[メモ]でも使用しました。
編集モード時だけに表示したいものは結構あります。編集時にはヘッダーにメニューバーが表示されるので、メニューバー分の余白を開けるのにもデフォルトのテーマで設定されていますよね。

<?php if ($c->isEditMode()) { ?>
ここに書いたものは編集モード時だけ表示されます
<?php } ?>

非編集モード時だけ表示

編集モードで見えず非編集モードで見えるということは、編集モードでどう頑張っても消したりできないという、クライアントの混乱の元になるのでやめましょう。

<?php if (!$c->isEditMode()) { ?>
ここに書いたものは非編集モード時だけ表示されます
<?php } ?>

[EC-CUBE + Concrete5] ECキューブの商品情報をConcrete5で利用する

タイトル通りですが、もうちょっと詳しく説明しますと、
「ECキューブに商品登録されている商品情報をxmlで取得してきて、Concrete5の編集でブロックに個別の商品IDを入力すると表示する」といった感じでしょうか。
ECキューブのページ作成機能がお客さんには使いづらいという感想だったので、Concrete5で編集・商品リストの作成は任意で行ってもらうようにしました。

バージョン:
ECキューブ 2.13.3
Concrete5 5.6.3.1

ECキューブAPIの取得方法については、下記のサイトを参考にさせていただきました。
EC-CUBEのAjax APIを使う(2) −−− 商品情報取得

なお、今回は同一サーバー、同一ドメイン内にECキューブとConcrete5をインストールしています。

ECキューブのAPIを使う

ECキューブには最近のバージョンでAPI機能が追加されたので、APIを利用して商品情報を取得できるようにします。

管理画面の「システム設定>パラメーター設定」にある「API_ENABLE_FLAG」を「true」にします。

xml.php

ECキューブのAPIは以下のURLでリクエストが送れます。

http://ドメイン/api/出力フォーマット.php

出力フォーマットは、JSONとxmlとphpの三種類あります。
今回はxmlを使用しました。

http://ドメイン/api/xml.php

これだけだと、下記のようにFalseが返ってきてなにも表示することができませんので、パラメータを設定する必要があります。

パラメータを含めたリクエストURL

http://ドメイン/api/xml.php?Operation=ItemLookup&Service=abc&ItemId=商品ID

Operation オペレーションの種類を指定します
Service 指定しないとエラーになります。ただし何も使われていないので適当な値を入力すれば大丈夫

Operationの種類は多数あるのですが、今回は「ItemLookup」を使用しました。
ItemLookupは、商品IDをキーに、商品詳細情報を取得します。商品IDは「ItemId」へ入力します。

これで商品情報の取得が可能です

Concrete5での設定 Desginer content

Concrete5側では、お客さんに商品IDを入れてもらうだけにするために、「Designer content」アドオンを利用します。
インストール方法などは省きます。

Designer contentで、新しいブロックを作成します。

Block Handleとブロック名は任意で、Add Fieldから「Text Box」を選択し、「Editor Label」に「商品ID」と入力。ダッシュボードでのDesigner contentで行う作業はこれだけです。

作成したブロックをカスタマイズ

Designer contentで作成したブロックのフロントテンプレートは、コンクリインストールフォルダの「/blocks/」ディレクトリ内に作成されます。
上記の例だと「/blocks/product_item」というディレクトリができているかと思います。
この中にあるview.phpがフロントテンプレートになります。

view.phpには以下のphpが書かれていますので、これをどうにかして商品情報を表示するように設定します

<?php  defined('C5_EXECUTE') or die("Access Denied.");
?>

<?php  if (!empty($field_1_textbox_text)): ?>
	<?php  echo htmlentities($field_1_textbox_text, ENT_QUOTES, APP_CHARSET); ?>
<?php  endif; ?>

「echo htmlentities($field_1_textbox_text, ENT_QUOTES, APP_CHARSET);」が、ブロックに入力された文字を表示するので、ここに商品IDを入力してもらっていれば、phpからxmlへリクエストを送る際の必要な商品IDをそのまま利用できるということになります。

<?php
$productID = htmlentities($field_1_textbox_text, ENT_QUOTES, APP_CHARSET); //編集画面で入力された商品ID
$xml = simplexml_load_file('/api/xml.php?Operation=ItemLookup&Service=abc&ItemId=' . $productID); //APIへのリクエスト


xmlから必要な情報を取り出して変数に入れる

<?php
$productURL = $xml->Item->DetailPageURL;
$productName = $xml->Item->Title;
$productThumb = $xml->Item->ItemAttributes->main_list_image;
$productPrice = $xml->Item->ItemAttributes->price02_max;
?>


htmlのマークアップはお好みでどうぞ。

<p class="item_image"><a href="<?php echo $productURL;?>"><img src="/upload/save_image/<?php echo $productThumb;?>" alt="<?php echo $productName;?>"></a></p>
<p class="checkItemname"><a href="<?php echo $productURL;?>"><?php echo $productName;?></a></p>
<p class="price"><em><?php echo $productPrice;?></em>円</p>

補足

ちなみに、同一ドメインでも、apiへのリクエストが「/api〜〜」になっていると「I/O warning : failed to load external entity」が出る事があったので、apiリクエストを「http〜〜」になるようにしました。

<?php
$domain = (empty($_SERVER["HTTPS"]) ? "http://" : "https://") . $_SERVER["HTTP_HOST"] ; //ドメイン取得
$productID = htmlentities($field_1_textbox_text, ENT_QUOTES, APP_CHARSET); //編集画面で入力された商品ID

$xml = simplexml_load_file($domain . '/api/xml.php?Operation=ItemLookup&Service=abc&ItemId=' . $productID); //APIへのリクエスト

[Concrete5 5.6.3.1]タイトルタグの表示を変えたい[メモ]

前回。ECキューブのタイトルタグの記事を書いてから気づいたのですが、このブログはConcreteg5が主な趣旨のブログでしたので、一応このブログを見る方は既にご存知かと思いますがタイトルタグの表示の変更方法を記載しておきます。

Concrete5のデフォルトだと「サイト名::ページ名」という形で表示されます。
やはり、昔だとそれでも問題なかったんですが、最近のブラウザはタブ表示でサイト名が先に表示されるとタブを見てもどこのページを開いているかわかりませんので、特別な理由(宗教上の理由とか)がない限り、ページ名を先に表示させた方が明らかにユーザビリティに優れていますよね。

バージョン:5.6.3.1

Concrete5のタイトルタグはsite.phpに記述することで変更が可能です。
※インストール直後だとデータベースの設定しか書いてないので、その下にdefine(‘PAGE_TITLE_FORMAT’, ”);を追記します。
/config/site.php

デフォルト

<?php
define('DB_SERVER', '*******');
define('DB_USERNAME', '******');
define('DB_PASSWORD', '******');
define('DB_DATABASE', '******');

「ページ名|サイト名」

<?php
define('DB_SERVER', '*******');
define('DB_USERNAME', '******');
define('DB_PASSWORD', '******');
define('DB_DATABASE', '******');

define('PAGE_TITLE_FORMAT', '%2$s|%1$s'); //←ここ

「ページ名」のみ

<?php
define('DB_SERVER', '*******');
define('DB_USERNAME', '******');
define('DB_PASSWORD', '******');
define('DB_DATABASE', '******');

define('PAGE_TITLE_FORMAT', '%2$s'); //←ここ

%1$sがサイト名、%2$sがページ名となります。

また、個別にタイトルタグを変えたい場合は、ページ設定の「カスタム属性」にある、「Metaタグタイトル」に入力することで変更可能です

ただし、カスタム属性の Metaタグタイトルに入力をした場合には、%1$sで出力されるサイト名も丸ごと置き換わりますのでご注意ください。

[ECキューブ 2.13.3]タイトルタグの表示を変えたい[メモ]

ECキューブのタイトルタグは、デフォルトだと「サイト名 / ページ名」という形で表示されます。
昔だとそれでも問題なかったんですが、最近のブラウザはタブ表示でサイト名が先に表示されるとタブを見てもどこのページを開いているかわかりませんので、特別な理由(宗教上の理由とか)がない限り、ページ名を先に表示させた方が明らかにユーザビリティに優れていますよね。

バージョン:2.13.3

ECキューブのタイトルタグは基本、テンプレートのsite_frame.tplに書かれています。
/data/Smarty/templates/default/site_frame.tpl

その中の27行目あたりにタイトルタグがありますので、中身をちょちょいといじれば大丈夫
※一行だとみづらいので改行しています

「サイト名 / ページ名」

<title>
<!--{$arrSiteInfo.shop_name|h}-->
<!--{if $tpl_subtitle|strlen >= 1}--> / <!--{$tpl_subtitle|h}-->
<!--{elseif $tpl_title|strlen >= 1}--> / <!--{$tpl_title|h}-->
<!--{/if}-->
</title>

「ページ名|サイト名」にしました。

<title>
<!--{if $tpl_subtitle|strlen >= 1}-->
<!--{$tpl_subtitle|h}-->|
<!--{elseif $tpl_title|strlen >= 1}-->
<!--{$tpl_title|h}-->|
<!--{/if}--><!--{$arrSiteInfo.shop_name|h}-->
</title>

中身のif文は管理画面でサブタイトルが設定されているときにページ名の代わりに表示するものです。
<!–{$arrSiteInfo.shop_name|h}–>がサイト名です。

[CSS] 〜戒め〜 display: inline-blockのブロック直下に、floatが掛かっているブロックを置いてはいけない

今週ずっと徹夜が続いておりまして、体力的にも精神的にも限界でした。
そのおかげで脳みそが全く働いていない状態でハマってしまった、いや、これは完全に油断ですね。
きっともうちょっと気を引き締めよとのお告げなのです。

デザイン的にタイトルにinline-blockを使いたかったんです。
で、その直下に画像と説明文をfloatしたかったんです。

下記の画像をごらんください。

赤のブロック、これがタイトルで、その下に左右のfloatブロックがある。
タイトルの幅は100%ではなくて、中途半端な感じにしたかったんですよ。デザイン的事情で。

そしたら、float: leftをかけたブロックがinline-blockの左に回り込むという事態に。
多分これは仕様通りの動きなんだろうけど、ちょっと納得いかないすね。

安易にinline-blockを使うなという戒めである。

ちなみにソースコードは以下。

<style>
body {
	background: #ededed;
	font-size: 14px;
}
div#column {
	width: 600px;
	margin: 0 auto;
	padding: 10px;
	background: #fff;
}

div#column h2.inline-block {
	display: inline-block;
	width: 300px;
	background: #FFBCBD;
	margin: 0 0 10px;
	font-size: 14px;
}

div#column h2.block {
	display: block;
	width: 300px;
	background: #FFBCBD;
	margin: 0 0 10px;
	font-size: 14px;
}

div#column h2.block span {
	font-weight: normal;
	font-size: 12px;
}

section {
	clear: both;

}

p {
	margin: 0;
}

div.boxL {
	display: block;
	width: 240px;
	float: left;
	background: #AFECFF;
}

div.boxR {
	display: block;
	width: 240px;
	float: left;
	background: #BFFFBD;
}

.clear {
	clear: both;
}

</style>


<div id="column">

<section>
<h1>想像していた表示</h1>
<h2 class="block">inline-blockでタイトル
<pre>
div#column h2.inline-block {
	display: inline-block;
	width: 300px;
	background: #FFBCBD;
	margin: 0 0 15px;
}
</pre>
<span>※表示のために、実際はdisplay: blockと書いています。</span>
</h2>

<div class="boxL">floatLボックス
<pre>
div.boxL {
	display: block;
	width: 240px;
	float: left;
	background: #AFECFF;
}
</pre>
</div>


<div class="boxR">floatRボックス
<pre>
div.boxR {
	display: block;
	width: 240px;
	float: left;
	background: #BFFFBD;
}
</pre>
</div>

</section>

<p class="clear">↓</p>


<section>
<h1>実際の表示</h1>
<h2 class="inline-block">inline-blockでタイトル
<pre>
div#column h2.inline-block {
	display: inline-block;
	width: 300px;
	background: #FFBCBD;
	margin: 0 0 15px;
}
</pre>
</h2>

<div class="boxL">floatLボックス
<pre>
div.boxL {
	display: block;
	width: 240px;
	float: left;
	background: #AFECFF;
}
</pre>
</div>


<div class="boxR">floatRボックス
<pre>
div.boxR {
	display: block;
	width: 240px;
	float: left;
	background: #BFFFBD;
}
</pre>
</div>
</section>


</div>

解決策は?

ちょっとあんまり良い方法ではないんだけれど、inline-blockがかかってる要素か、floatの要素どちらかを別のボックスで囲ってやればおk。
下記の例だとdivを余計にひとつ追加してます。

<section>
<h1>解決策1</h1>

<h2 class="inline-block">inline-blockでタイトル
<pre>
div#column h2.inline-block {
	display: inline-block;
	width: 300px;
	background: #FFBCBD;
	margin: 0 0 15px;
}
</pre>
</h2>

<div>
<div class="boxL">floatLボックス
<pre>
div.boxL {
	display: block;
	width: 240px;
	float: left;
	background: #AFECFF;
}
</pre>
</div>


<div class="boxR">floatRボックス
<pre>
div.boxR {
	display: block;
	width: 240px;
	float: right;
	background: #BFFFBD;
}
</pre>
</div>
</div>

</section>

 
 <section>
<h1>解決策2</h1>

<div>
<h2 class="inline-block">inline-blockでタイトル
<pre>
div#column h2.inline-block {
	display: inline-block;
	width: 300px;
	background: #FFBCBD;
	margin: 0 0 15px;
}
</pre>
</h2>
</div>

<div class="boxL">floatLボックス
<pre>
div.boxL {
	display: block;
	width: 240px;
	float: left;
	background: #AFECFF;
}
</pre>
</div>


<div class="boxR">floatRボックス
<pre>
div.boxR {
	display: block;
	width: 240px;
	float: right;
	background: #BFFFBD;
}
</pre>
</div>


</section>

[EC-CUBE]プラグインが競合したときは。

今ECCUBEでサイト構築の案件をやっているのですが、デフォルトだと必要だと思う機能がなくて、プラグインを入れざるを得ない状況になります。
で、あれもこれもってプラグインを追加していくと上記のスクリーンショットのように競合のアラートが出まくります。競合すると動作もフロントに表示すらしなくなるので非常に困ります。

競合したら、まず優先度の数値を変えてみると問題が解消されることがあります。
それでもダメだったら自分でなんとかする前に、プラグインの開発者に問い合わせましょう。
それでもダメだったら、諦めましょう。

[Concrete5]ページURLを取得してテーマに表示する[メモ]

Concrete5の公式からいつの間にか消えてたのでメモ。
URLの取得なんて基本の基本すぎてわざわざ記事にしとく必要なんてないんだろうなぁ。

テーマファイルに以下の記述でページのURLが表示できました。

<?php
$nh = Loader::helper('navigation');
$URL = $nh->getCollectionURL($c);
echo $URL;
?>

[さくらVPS]Basic認証ができなかった→できた。[メモ]

基本認証を掛けてURLへ飛ぶと500 Internal Server errorが出てしまった。
なんでや。と思ってエラーログ見たら、
[code]configuration error: couldn’t check user. No user file?: /dir/[/code]
とか言われて、わけわからん。

なんやかんやいろいろ調べてみた結果、どうやらapacheをインストールした際に、モジュールの読み込みを忘れていたらしいので、httpd.confを見たら
[code]#LoadModule auth_basic_module modules/mod_auth_basic.so[/code]
コメントアウトしてた。

あるぇ〜?一連の設定してた筈なんだけどなぁ〜?

[Concrete5]オートナビにページの説明文を表示[メモ]

Concrete5、すごく便利です。
ただ一点、日本語のドキュメントというか、まだユーザが少ないのでwordpressみたいにググればすぐにヒットするような状況ではなくて、一つ一つ手探りでやるんですが、それでもダメでいつもSさんに頼っている次第でございます。

ページリストでやれば説明文は簡単に出せる、でも。

ページリストブロック

Concrete5のページリストブロックには、デフォルトで個別のページの説明文を表示する記述がされているので、ブロック設置時点で表示非表示はワンクリックで出来てしまいます。すげー。

そう、ページリストを使えば全く問題なくページのリンクリストと説明文を表示出来てしまうのですが、ページリストはデフォルトでは階層構造が出せないんです。

↓こんなマークアップがしたいのに。

<ul>
  <li><a href="oya">親ページ</a>
    <ul>
      <li><a href="ko">子ページ</a>
      <ul>
        <li><a href="mago">孫ページ</a>
      </ul></li>
    </ul></li>
</ul>

ページリストだと「親ページ > 子ページ > 孫ページ」と言った階層順に上記のようにマークアップしつつ一覧にする事ができない。
実際に出てくるマークアップは、↓のようになってしまいます。
<ul>
<li><a href="oya">親ページ</a></li>
<li><a href="ko">子ページ</a></li>
<li><a href="mago">孫ページ</a></li>
</ul>

全部並列になってしまう。
ページリストで階層を出したい場合は、カスタムテンプレートをいじる必要があります。

じゃあ、オートナビを使いましょう

オートナビ

階層構造をマークアップしたいのであれば、ページリストのカスタマイズをするより、オートナビを使用すれば何も考えなくても勝手に階層順にしてくれます。

うほっ!超らくちん!

と最初わたしは思いましたが、今回の案件で、お客さんの要望としては、「最下層にあるページの説明をリストに追加したい。」ということですので、上記のマークアップの例で言うと、下記の3点が大きな要件でした。

  1. 孫ページに説明文を表示
  2. 孫ページに説明文が入力されていない場合は非表示
  3. 親と子ページには説明文を表示しない

オートナビに説明文を表示する機能はデフォルトでついていないので、どうにかしてデータを引っ張ってこないといけないのです。

さて、どうしたもんか。

やっぱりカスタムテンプレートは使わないといけないのであった。

オートナビのデフォルトテンプレートは以下のような記述になっています。

echo '<ul class="nav">'; //opens the top-level menu
foreach ($navItems as $ni) {
	echo '<li class="' . $ni->classes . '">'; //opens a nav item
	echo '<a href="' . $ni->url . '" target="' . $ni->target . '" class="' . $ni->classes . '">' . $ni->name . '</a>';
	if ($ni->hasSubmenu) {
		echo '<ul>'; //opens a dropdown sub-menu
	} else {
		echo '</li>'; //closes a nav item
		echo str_repeat('</ul></li>', $ni->subDepth); //closes dropdown sub-menu(s) and their top-level nav item(s)
	}
}
echo '</ul>'; //closes the top-level menu

階層に応じて、ifがあって、表示する階層分だけ繰り返すように書かれています。
concrete5のブロックというか、テンプレのファイルには結構な量のコメントが書かれていて、それを読めばどうやってデータを取得出来るかがわかりやすいです。
コメント内に、下記のようなインフォメーションが記載されているので、それを参照しつつ、テンプレートを書き換えます。

 * Each nav item object contains the following information:
 *	$navItem->url        : URL to the page
 *	$navItem->name       : page title (already escaped for html output)
 *	$navItem->target     : link target (e.g. "_self" or "_blank")
 *	$navItem->level      : number of levels deep the current menu item is from the top (top-level nav items are 1, their sub-items are 2, etc.)
 *	$navItem->subDepth   : number of levels deep the current menu item is *compared to the next item in the list* (useful for determining how many <ul>'s to close in a nested list)
 *	$navItem->hasSubmenu : true/false -- if this item has one or more sub-items (sometimes useful for CSS styling)
 *	$navItem->isFirst    : true/false -- if this is the first nav item *in its level* (for example, the first sub-item of a top-level item is TRUE)
 *	$navItem->isLast     : true/false -- if this is the last nav item *in its level* (for example, the last sub-item of a top-level item is TRUE)
 *	$navItem->isCurrent  : true/false -- if this nav item represents the page currently being viewed
 *	$navItem->inPath     : true/false -- if this nav item represents a parent page of the page currently being viewed (also true for the page currently being viewed)
 *	$navItem->attrClass  : Value of the 'nav_item_class' custom page attribute (if it exists and is set)
 *	$navItem->isHome     : true/false -- if this nav item represents the home page
 *	$navItem->cID        : collection id of the page this nav item represents
 *	$navItem->cObj       : collection object of the page this nav item represents (use this if you need to access page properties and attributes that aren't already available in the $navItem object)

今回使用するのは、最後の行の「$navItem->cObj」で、英語がよくわからないながらも読んでみると、どうやら「
ナビアイテムに該当するページのコレクションオブジェクト(既に用意されている$navItemオブジェクト以外でページプロパティとか属性が必要だったらこれを使え)」って書いてあるっぽいです。なんとなく雰囲気で和訳してるので多少の間違いは勘弁してください。

で、コードを追加しますた↓

echo '<ul class="nav">'; //opens the top-level menu
foreach ($navItems as $ni) {
	echo '<li class="' . $ni->classes . '">'; //opens a nav item
	echo '<a href="' . $ni->url . '" target="' . $ni->target . '" class="' . $ni->classes . '">' . $ni->name . '</a>';
	if ($ni->hasSubmenu) {
		echo '<ul>'; //opens a dropdown sub-menu
	} else {
			$cobj = $ni->cObj; // ← $navItems->cObjを$cobjに入れる
			if($ni->level == 2 && $cobj->getCollectionDescription()) { //後述
			echo '<p>' . $cobj->getCollectionDescription() . '</p>';
		}
		echo '</li>'; //closes a nav item
		echo str_repeat('</ul></li>', $ni->subDepth); //closes dropdown sub-menu(s) and their top-level nav item(s)
	}
}
echo '</ul>'; //closes the top-level menu

順を追って説明すると、該当箇所は「$cobj = $ni->cObj;」から始まる4行です。

「$cobj = $ni->cObj;」で、インフォメーションにあった$navItems->cObjを変数にしました。

さらに、次の行のifの条件ですが、「$ni->level」を使用すると階層の深さが0から順に取得できますので、「$ni->level == 2」とすることで、「孫ページのみ」の条件指定ができます。汎用性持たせるなら、levelの値を数値じゃなくて、「一番大きい値」とか「最後の値」とか変数にしておいた方がいいかもですね。

さらに先ほど変数にした$cobjから「$cobj->getCollectionDescription()」を記述する事で、説明文が存在するかどうかの判別をしています。なので条件が「if($ni->level == 2 && $cobj->getCollectionDescription())」となっています。

で、最後にechoするだけ。なんということでしょう。今になって考えればこんなに簡単な事を、全然わからなくて2日くらいずっとやってました。アホです。

最終的に上記のカスタムテンプレートで、↓のようなマークアップになります。

<ul>
  <li><a href="oya">親ページ</a>
    <ul>
      <li><a href="ko">子ページ</a>
      <ul>
        <li><a href="mago">孫ページ</a>
     <p>説明文テキスト説明文テキスト説明文テキスト説明文テキスト説明文テキスト</p>
      </ul></li>
    </ul></li>
</ul>

以上。

メモ:concrete5のページ属性で指定した画像を、カスタムテンプレートから表示する方法

ページリストで、記事ページのサムネイルブロックを表示する方法もあるのですが、ケースバイケースで属性から画像入れた方が良い場合もございまして、
以前テーマファイルに属性の画像を表示する方法を書きました。
メモ:concrete5のページ属性で指定した画像を表示する方法

以前の記事の内容ではちょっと問題がございました。
↓以前の書き方

<img src="<?php echo ($c->getAttribute('ハンドル')->getVersion()->getRelativePath());?>" alt="" />

これ、カスタム属性に画像ファイルが入ってないとエラーが出てしまいます。

↓なので、個人的には画像があるときだけ表示するという方法を取るのが望ましいのかと思いますね。

<?php
  $変数 = $c->getAttribute('ハンドル');
  if($変数) {
    echo '<img src="' . $変数->getVersion()->getRelativePath() . '" alt="" />';
  }
?>

そしてカスタムテンプレートで表示する場合は、

$c->getAttribute('ハンドル')

を↓

$cobj->getAttribute('ハンドル')

に書き換えると対応できました。