[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]ブロックを上下左右中央に配置したい

ECサイトなんかだと、よくあるパターンなんですが、商品画像のトリミングが縦長だったり、横長だったりして、余白が気になるってお客さんに言われます。
トリミングが正方形だったらなんの問題もないんですが、ウェブに関わる全ての人が画像を正方形にトリミングできるはずもないので、それがどんなトリミングであっても美しく表示させるのがウェブデザイナーの仕事だと思います。

左右のセンタリングは簡単

text-align: centerを使って、左右中央は簡単にできます

<style>
div.LRbox {
  text-align: center;
  border: 1px solid #cacaca;
  width: 200px;
  height: 200px;
}
</style>

<div class="LRbox">
<img src="http://wordpress.go-designing.com/wp-content/uploads/2015/02/LR1.gif" alt="縦長の画像" width="150" height="200" />
</div>

縦長の画像

上下のセンタリングがめんどい

ダメな例

<style>
div.TBbox {
  vertical-align: middle;
  border: 1px solid #cacaca;
  width: 200px;
  height: 200px;
}
</style>
<div class="TBbox">
<img src="http://wordpress.go-designing.com/wp-content/uploads/2015/02/TB.gif" alt="横長の画像" width="200" height="150" />
</div>

横長の画像

上下の場合、vertical-align:middleを使っても中央によってはくれませんね。
要素名のせいで勘違いしやすいのですがvertical-alignは、ボックス内のインライン要素の高さ位置を揃えるのであって、ボックスの内部の位置を中央にするわけではないのです。

解決策

<style>
div.TBboxTrue {
  border: 1px solid #cacaca;
  width: 200px;
  height: 200px;
  position: relative; /* 親のボックスのpositionをrelativeに */
}
div.TBboxTrue img {
  position: absolute;  /* 上下中央にしたい要素のpositionをabsoluteに */
  top: 0; /* top位置を0 */
  bottom: 0; /* bottom位置も0 */
  margin: auto; /* marginをautoに */
}
</style>
<div class="TBboxTrue">
<img src="http://wordpress.go-designing.com/wp-content/uploads/2015/02/TB.gif" alt="横長の画像" width="200" height="150" />
</div>

横長の画像

応用

これを応用して、上下左右中央に指定しておくことができます。
たとえば、ボックスより大きい画像の場合は、max-widthやmax-heightを100%にしておくことで、ボックスから画像がはみ出てしまうことを回避できますが、そもそもボックスより画像が小さい場合は、上下左右中央に寄せることで対応するといいでしょう。

<style>
div.TBLRbox {
  border: 1px solid #cacaca;
  width: 200px;
  height: 200px;
  position: relative;
margin-bottom: 20px;
}
div.TBLRbox img {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}
</style>
<div class="TBLRbox">
<img src="http://wordpress.go-designing.com/wp-content/uploads/2015/02/TBLR.gif" alt="ボックスより小さい画像" width="150" height="150" />
</div>

ボックスより小さい画像

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

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

[雑記]YouTubeがFlashからHTML5に移行ということでFlashの思い出話。

YouTubeがデフォルトの動画プレイヤーをFlashからHTML5に移行したという記事を見ましたので、一時代の隆盛を見たということで、思い出語りをしたいと思います。

YouTubeがFlashからHTML 5に移行した今こそ振り返るスティーブ・ジョブズの5年前のレター : ギズモード・ジャパン

FLASHの思い出。

僕がWEB業界に入った頃、2000年代前半くらい前の話です。その頃はFLASH全盛時代だったと記憶しています。
僕は学生時代からウェブサイトを作る仕事がしたいと野心に燃える若者だったのですが、特に技術や知識があるわけでもなく、漠然とそう思っているだけでした。
とは言え、星の数ほどあるウェブサイトを見てhtmlの仕組みや、デザインの表現は勉強をすることができましたので、寝食を忘れありとあらゆるジャンルのサイトを眺めては、スクリーンショットを取り、600%くらいまで拡大してテクスチャパターンの作り方やら、アイコン1pxの重要性、グラデーションの色配分などを目を皿にして、それこそディスプレイに穴が開くほど見つめていました。
あぁ、この罫線は黒じゃなくて#333のグレーと#fffの1pxずつ組み合わせて表現しているんだ、とか、べた塗りに見えて実はほんのりグラデーションがかかってるんだ、とか、えっウェブサイトってtableタグで作るの!?とかそういう感じです。あの頃は見るものすべてが楽しくて仕方ありませんでした。

しかし、FLASHに関してはあまり興味がありませんでした。いや、語弊があります。
FLASHは見ても勉強にならなかったのです。それはなぜか。

ソースコードが見れない

Flashは当時Macromedia Flashというソフト(現在はAdobe Flash)でしか作成できない上に、Flashをブラウザで表示するために.flaファイルを.swfへパブリッシュする必要がありました。
.swfファイルはブラウザのプラグインという形でインストールされたFlash Playerで再生されます。.swfは再生するためのファイル形式ですので、中身に何が書いてあるのかはわかりませんでした。
中身がどうなっているかわからないということはつまり、どう書いたらどういう風に動くかがさっぱりわからないということです。
ちなみに、Flash Playerは無償で提供されていたので、誰でもダウンロードしてインストールすることができますが、Flashは有償です。テキストエディタだけあれば始められるhtml+javascriptとはエライ違いですね。

今だったら何で例えようかな…PDFリーダーみたいなもんですかね。OSXだと印刷代わりに PDF出力できるから違うな…。
とにかく、Flashを作るためには専用のソフトが必要でそれが結構な値段で販売されていて、さらにいろんなサイトを見て学習しようとしても構造がどうなっているのかわからず、勉強するためにまず超えなきゃいけない壁が結構大きかったんです。

それでもやらなきゃならなかった

そんな僕でも、運良く雇ってくれる会社があって、もちろんFlashの制作もありました。
運良く雇ってくれた会社でも、運悪くFlashができる人が僕と入れ替わりで退社、二日間だけ前任者の人にFlashの基礎の基礎を教えて貰いました。
OnMouseOver(だっけ?)とか、OnReleaseだとか、this.stopとかそんなレベルの話です。正直、仕事になるわけがありません。
traceも知らないので、意図通りに動かない場合の対処の方法すらわからない。
幸いにも、会社に参考書は大量にあったので、ひたすら読んで、ググっては目的のものが探せず悩んだり、前任者が作った.flaファイルをいじって…を繰り返して勉強しながら仕事していました。
Flashに造詣の深い人脈もなく、誰にも聞けない状況で、あーでもない、こーでもないとFlashと格闘を繰り返しておりました。

もしもあの頃、Flashを良く理解している人が一緒に仕事をしていたら、僕のFlashに対する考え方は今と違っていたのかもしれません。

ぶっちゃけ、今考えればよくあのクオリティで給料もらえたなぁと当時の会社の優しさを今ひしひしと感じております。

それなりに作れるようになった

とまぁ、わからないながらも何回も触っているとググり方もわかってきて、理解も深まり、転職をしたりしてFlashを触る機会も増え、それなりに仕事として作れるレベルにはなったんです。
タイムライン制御だったものをActionScript制御で出来たり、外部データと連携したり、と、やれることも増えました。
多分やっとそこで仕事としてお金がもらえるレベルだったんだと思います。

やっとFlashでも仕事できるじゃん、と思ってた矢先にiPhoneが。

設計、デザインや、HTMLとCSSに関しては普通に仕事としてできてると思ってて、仕事の選択肢としてFlashも増やせるなぁと思っていた頃に海の向こうではiPhoneが登場。
2007年頃だったかな。当時は日本じゃ売ってなかった。
翌年にiPhone3Gが日本でも販売されて、爆発的に普及したのは記憶に新しいところですが、もう7年前の話なんですね。つい最近のように思えます。

その頃お客様から「iPhoneでメインビジュアルのところが真っ白なんですが」という問い合わせがいくつかあって、毎回「iPhoneではFlashが表示できないんですぅ〜」という言い訳をしておりました。
代替手段はFlash Playerがないときにインストールを促すアラートの代わりに画像をただ置くだけ。単純な複数の画像を切り替えるスライドショーならまだしも、当時は複雑な動きをするFlashをメインビジュアルに使用しているサイトも多数あったのでJavascriptで実装しようにも、コスト面で妥協せざるを得ませんでした。

さらに、Flashには、前述のように専用のソフトでないと開発できないことだったり、HTML+Javascriptに比べてCPUにかかる負荷が大きかったり(作り方にもよるけれど同様の動作をさせるのであればという条件で)、.flaファイルの中身の作り方によっては、作った人しか理解できなくなってしまうブラックボックス化からのメンテナンス性の低さだったり、検索対策が甘い(できるんだけどswfの中身が見えない関係で効果がわかりにくい、SEO業者に嫌われる)と、デメリットの多さもありました。
しかしながら、それまでのプラットフォームで多彩な表現のできるFlashは、上記のデメリットを打ち消してお釣りがくるほどの有用なツールだったのです。
iPhoneのFlash非対応や、PCブラウザのHTML5+CSS3サポートによる代替技術の発達によって、業界全体の考え方が変わってくるまでは。

と、業界全体でだんだんとFlashは使わない方向で考え方がまとまりかけていた過渡期ですが、未だにお客さんからは「Flashでお願いします〜」という依頼もあったりしました。
「予算との兼ね合いもありますが、スマホでの表示や今後のメンテナンス性も考えてFlashはやめましょう」という話を、何度かした記憶があります。

Android

せっかくみんながFlashをなるべく使わない方向で動いていた矢先、Androidがリリースされました。
どうやらAndroidはFlash Playerがインストールできるらしい。

業界騒然、となるわけはなく、すでに多くの人たちがFlashを利用することのメリットデメリットを理解しているため、AndroidでFlashが再生できることは、Flashの終焉を遅らせることはできませんでした。
FlashのCPUの負荷が大きいということはつまり、より多くの電力の消費につながります。モバイルデバイスですので電力は電池を使用するので、電力を多く消費することは電池の減りが早くなることを意味します。
また、日本でAndroid黎明期にリリースされた端末はそれぞれが貧弱なメモリしか搭載しておらず、Flashが含まれるウェブサイトを表示するとフリーズしたり、ブラウザが強制終了したりという事態が頻発しました。そういったこともあり、Flashを使用するサイトは次々と消えていったのです。

なお、Android向けFlash Playerは2013年にサポートが打ち切られました。合掌(-人-)

おわりに

今後の動静を考えるに、そう遠くない将来にFlashを利用したサイトは確実にその数を減らし、開発ツールであるAdobe FlashもFireworks同様に姿を消していくのでしょうか。
近年のAdobe Flashでは、AIRアプリ開発、HTML5 canvas制作ツールとしての機能が強化され、もともとのflash作成という面はあまり目立たなくなっています。

すでに若い人たちはFlashそのものの存在自体を知らないと思います。
未だにFlashを使用しているサイトが、web黎明期のmarqueeタグやblinkを多用したサイトのような過去の遺物、化石のような扱いを受けることもあるのではないでしょうか。

というわけで久しぶりにFlash触ってみたけど、懐かしすぎて泣けてきた。
さらに、swf埋め込みの記述の仕方忘れてわかんない!

[concrete5]コミュニティに接続できない


テスト用にConcrete5.6をインストールして、コミュニティに接続してアドオンを試そうとしたところ、コミュニティに接続の画面が真っ白。

なんかインストール方法間違ったかなぁ…と思っていろいろ調べてみたけど、どうもそんな様子はなく。

原因は本家のサイトがメンテナンス中だったというオチ。

できれば今日中に確認したかったんだよなぁ…。

[WordPress]カテゴリー名にリンクをつけたくない[メモ]

<?php the_category(); ?>
wordpressで、カテゴリ名を表示するには、上記のコードを書きますが、カテゴリ名と一緒にリンクも吐き出されてしまうので、時と場合によってはリンクが邪魔になってしまうことがあります。

そういった場合には、該当する記事のカテゴリ名のみを取得することで解決できます。

<?php
$cat = get_the_category();
$cat = $cat[0];

echo get_cat_name($cat->term_id);
?>

上部の画像のような投稿日と記事タイトルの一覧のような形で使うなら、こんな感じかな

<dl class="news">
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>

<?php
$cat = get_the_category();
$cat = $cat[0];
?>
<dt><?php the_time('Y/m/j') ?><span class="<?php echo <?php echo $cat->slug;?>"><?php echo get_cat_name($cat->term_id); ?></span></dt> 
<dd><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></dd>

<?php endwhile; ?>
</dl>
<?php else : ?>
<p>記事がありません</p>
<?php endif; ?>

このphpででてくるhtmlが以下になる

<dl class="news">
<dt>2014/12/05<span class="news">おしらせ</span></dt>
<dd><a href="#">年末年始の営業日についてのご案内</a></dd>

<dt>2014/12/04<span class="news">おしらせ</span></dt>
<dd><a href="#">新商品のご案内</a></dd>

<dt>2014/12/04<span class="event">イベント</span></dt>
<dd><a href="#">イベント開催情報を更新しました</a></dd>
</dl>

で、cssで見た目を変えればおk

dl.news dt {
	margin-bottom: 8px;
}

dl.news dt span {
	border-radius: 3px;
	padding: 2px 2px 0 2px;
	margin-left: 8px;
	color: #fff;
}
dl.news dt span.news {
	background: #9cd227;
}
dl.news dt span.event {
	background: #297ddc;
}

dl.news dd {
	margin: 0 0 10px 0;
	padding: 0 0 6px 0;
	border-bottom: 1px dotted #c1c1c1;
}
dl.news dd:last-child {
	margin-bottom: 0;
	padding-bottom: 0;
	border: none;
}

参考
関数リファレンス/get cat name

[Concrete5]ブロックのエイリアスを作りたい[メモ]

今回は愚痴です。
Concrete5でもちょっと不便だなぁって思うことがあるんですよ。

ページのエイリアスはフルサイトマップで管理できて、UI的にもわかりやすくできてるんですが、同じブロックを同期しつつ別のページで利用したい場合に、デフォルトの機能だけだと「スタック」を利用するしかないという点。

スタック」は「ブロック」をグループにしておいて、複数のページで使用できる、簡単に言うとエイリアスが作れるんですが、スタック管理画面がいただけない。
Concrete5の優秀なところって、ページを見ながら編集ができることだと思うのだけれど、特定のブロックを複数のページで使用するためにスタックを作成してしまうと、その中にあるブロックはスタック管理画面でしか編集ができなくなってしまうことが結構なストレスなんですよね。
ページ編集画面で直接編集をする利点があるにも関わらず、スタック管理画面へ飛ばされてしまうため厄介な仕様だなぁと3年くらい前から思っています。

スタック周りの仕様はバージョン5.7でも変更がなかったのでとても残念です。

ちなみに、
[code]$block->alias($page)[/code]
をテーマに書き込んでおくこともできるけど、制作側があらかじめ記述しておかないといけないという点において、ユーザー側じゃどうにもできない部分だよね。