[Concrete5]Concrete5.7がリリースされました!!

Concrete5の最新版、Concrete5.7がリリースされました!!
Concrete5.7ダウンロード

そして早速インストールしてみました。
インストールの手順は旧バージョンと変わらないです。
以下インストール手順をスクリーンショット付きでご紹介します。

インストール開始!!

Concrete5.7をサーバーの任意の場所にアップロードして、アクセスするとインストール画面が表示されます。

インストール開始

言語選択

言語はお好みでお選びください。僕はこれらの言語の中で日本語が一番得意なので日本語を選択しました。

言語選択

インストールチェック

スクリーンショットを取り忘れてしまったのですが、「application/config」と「application/files」、「packages」フォルダのファイルパーミッションを書き込み可にしてください。

インストールチェック

各種情報入力

サイト名は後で変更できます。メールアドレスや、ログイン用のパスワード、データベースの情報を入力して「concrete5をインストール=b」ボタンをクリック!

情報入力

インストール中

待ちます。僕の借りてるサーバは1分くらいかかりました。それなりのスペックなので、安いレンタルサーバとかだともう少しかかるかも。

インストール中

インストール完了

この画面が開けば成功です。失敗した場合は、失敗した旨の表示が出ると思います。インストールに失敗した事がないので詳しくなくてすいません。

インストール完了

動画

5.7から紹介動画が開く様になりました。ただ、動画の音声は英語なので、日本語が得意な僕としてはちょっとヒアリングが難しかったです。

動画

トップページ

UIの一新と共に、デフォルトテーマも一新されました。

トップページ

編集画面

まだベータ版と、リリース版を少ししか触っていないので、率直な所、編集画面には違和感しか感じないです。
特に編集モード時の各エリアを囲むボーダー表示がなくなったのがかなり痛いですが、まぁ二、三日触れば多分慣れると思います。

編集画面

5.6以前でもかなり直感的であったUIがさらに直感的になったことで、お客さんへの提案はかなりしやすそうですね。

ちなみにテストサイトへインストールしましたので、興味のある方はぜひ。

[concrete5] 8/23 Concrete5 東京ブートキャンプ

8月23日、日本で初めてのconcrete5だけのビッグイベントがやってくる!セミナー、懇親会、ハッカソンを同時開催。1日でconcrete5をとことん知り、楽しみ尽くしましょう!

8/23 Concrete5 東京ブートキャンプ

このたび、セミナーでスピーカーをさせていただくこととなりました。
今までこういったセミナーでお話をさせていただくという機会はなかったものですから、まだ一ヶ月先のことではありますが、とても緊張していつつ、テンションが舞い上がっております。

で、何話すの?

一応、今原稿を作成していて、一体何を話したら良いんだろうと。
正直な所、他のスピーカーの方々と違って僕はプログラミングができないので、concrete5の内部の仕様だったり、アドオンの作り方だったりを説明する事はできないんです。
やっぱ、お客さんの目に見える部分で説明するのが良いかなと。

デザイナーとしてのconcreteの活用の仕方

以前このブログでも書いた事(WebデザイナーがConcrete5を使うことを躊躇う理由1)の焼き直しになってしまうかもしれませんが、プログラムが書けなくても、わからなくてもconcrete5は非常に有用ですよって事をもうちょっと詳しくお話できたらいいなって考えています。

まだ内容が全然決まってないのでざっくりしててすいません。

ご参加申し込みについて

お申し込みは詳細ページより。
8/23 Concrete5 東京ブートキャンプのお申し込みはこちら

[Concrete5]ページリストに更新日を表示[メモ]

更新した日付をページリストに表示するためには、カスタムテンプレート内に下記を記述します。

<?php echo $page->getCollectionDateLastModified ('Y年m月d日 ');?>

[Concrete5]日本語URLが長すぎた[既知のバグらしい]

去年納品済みのお客さんから特定のページでエラーが出るとの連絡を受け、内容を確認したところ、以下のようなエラーメッセージが。

去年アップデートしてそのまま運用していたので、バージョンは5.6.2.1。

Warning: file_put_contents(/home/files/cache/pages/m/a/n/manual%2F%25E4%25E4%25E4%25E4%25E4%25E4%25E4%25E4%25E4%25E4%25E4%25E4%25E4%25E4%25E4%25E4%25E4%25E4%25E4%25E4%25E4%25E4%25E4%25E4%25E4%25E4%25E4%25E4%25E4%25E4%25E4%25E4%25E4%25E4%25E4%25E4%25E4%25E4%25E4%25E4%25E4%25E4%25E4%25E4%25E4%25E4%25E4%25E4%25E4%25E4%25E4%25E4%25E4%25E4%25E4%25E4%25E4%25E4%25E4%25E4%25E4%25E4.cache) 
[function.file-put-contents]: failed to open stream: File name too long in /home/updates/concrete5.6.2.1.ja/concrete/core/libraries/page_cache/types/file.php on line 67

File name too long in
と書かれていたので、まぁファイル名が長いんでしょうなぁと思いつつも対策を探したけどイマイチよくわからなかったので素直にコンクリートファイブジャパンの佐々木さんに聞きました。

日本語URLの長さとキャッシュ

日本語でページURLが、ページキャッシュとして保存される際にURLエンコードされて上記の様なとんでもなく長いURLになってしまう為、エラーが表示されるという事だった。

対策

主な対策方法は4つ。

1.ページキャッシュをしない

日本語URLから作成されてバカみたいに長くなるキャッシュファイル名が問題なら元を断つ。
キャッシュを使用しなければ、エラーは出ない!(キリッ

2.日本語URLを使用しない

バカみたいに長くなるキャッシュファイル名が作成される元が、日本語のURLならそもそも日本語を使用しなければいいのでは。

3.エラーを表示しない

管理画面のデバッグ設定で、「来訪者からエラーを隠します。」にチェックをするとエラーが非表示になります。

うーん。根本的な解決にはならないかな…?

4.file.phpを書き換える

ページキャッシュを取っている記述をページIDにすれば解決と教えていただきました。

/concrete/core/libraries/page_cache/types/file.php 56行目〜70行目

public function set(Page $c, $content) {
		if (!is_dir(DIR_FILES_PAGE_CACHE)) {
			@mkdir(DIR_FILES_PAGE_CACHE);
			@touch(DIR_FILES_PAGE_CACHE . '/index.html');
		}

		$lifetime = $c->getCollectionFullPageCachingLifetimeValue();//←多分この辺を変えればいいのでは(無責任)
		$file = $this->getCacheFile($c);//←多分この辺を変えればいいのでは(無責任)
		if ($file) {
			$response = new PageCacheRecord($c, $content, $lifetime);
			if ($content) {
				file_put_contents($file, serialize($response));
			}
		}
	}

たぶん。というのも、coreの中をいじるのは怖くて実際にやってないので未検証なのです。

プログラムの知識が無くても簡単に使えるconcrete5ですが、こういう細かい部分になるとwordpressや他のオープンソースのツールに比べて参照元が少ないのが現状ですね…。

[Concrete5]concrete5+IE11でTinyMCE表示バグ[未解決]

はじまりは一本の電話

先日、ようやくの事XPのサポート終了でR.I.P IE6をしたばかりだというのに、今度はIE11。
勘弁してくださいよ。冗談抜きで。

お客さんから、「記事ブロック編集時にHTMLエディタを開いたら真っ白で何も出来なくなった!」というご連絡を頂きましたので、確認してみたところ、Firefox, Chrome, Safari, windows7+IE10では問題無し。
結構前に納品済みの案件でconcreteのバージョンは5.6.0.2。
新バージョンでのバグではなさそう。

IE11でのみ下記スクリーンショットのような状態が発生。

対策はまだ、ない

原因はまだ特定できておらず不明なのでとりあえず情報共有という形で投稿しておきます。

仮の対策として

ちなみに、HTMLエディタを開かなければ普通に記事ブロック編集ができたのですが、ちょっと不安なので、仮の対策としては以下の通り。

  • IE11を使わない。
  • IE11をどうしても使わなきゃならないなら、HTMLエディタを使わない。

以上2点。

お客さんが理解のある方なので、現状とりあえずはFirefoxかChromeで更新作業を行っていただくという方向で話をしていますが、会社の規定でIE11しか使っちゃダメってクライアントが居たら困りますねこれは…。

追記

菱川さんから貴重な情報いただいたので以下。

TinyMCEのバグレポート

https://www.tinymce.com/develop/bugtracker_view.php?id=6307
2013年9月の段階で確認されていたTinyMCEの既知のバグらしく。
つまり、concreteの問題ではない。

コメント欄見る限り、同様に表示されていない人がちらほらいました。
解決策としてmetaタグでIEを後方互換モードにしたらというコメントもあって参考になりました。が、果たしてそれで良いのだろうか…。

[Concrete5]良さげなアドオン[メモ]

良さげだったのでメモ程度に。


Best Concrete5 Add-Ons

スライダーのアドオン。
トランジションの豊富さと、カスタマイズ性に富んだアドオン。$15なので買ってみよう。


Slider Revolution Responsive Concrete5 Add-On

[jQuery]wordpressで画像にリンクしてるときだけlightboxしたい

wordpressで記事書いてて思うのは、aタグは普通のページリンクと、拡大画像表示用と2種類あって、毎回毎回aタグにclass=”lightbox”って書くのがめんどくさ…
いや、手間だしヒューマンエラーもあるようなので、記事を書く際に画像を入れたら勝手に拡大画像へのリンクが付く事ですし、めんどうな事は機械にやってもらいました。

[javascript]
<script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/js/jquery.lightbox.js"></script>
//↑lightboxのプラグイン

$(function(){
$(‘div.entry-content a’).has(‘img’).click(function(){
$(‘div.entry-content a’).lightbox();
});
});
[/javascript]

「.has()」でimgタグがあるかを判断して、あった場合にlightboxするようにしてます。
if使わなくていいのが楽でいいね。

このページを参考にしました。
https://js.studio-kingdom.com/jquery/traversing/has

追記

ご指摘をもらいました。

これでいいらしいです。ちゃんと動きました。
[javascript]
$(‘.entry-content a:has(img)’).lightbox();
[/javascript]

[Concrete5]エリア内にブロックがある時にだけ表示する[メモ]

実は、Concrete5公式活用ガイドブックの172ページに記載があるのですが、ちょっと気になった部分がありました。

エリアが空の時には何も表示しない要素を作る記述で以下の様なコードが載っていたのですが、

<?php
$a = new Area('Main');
if ($a->getTotalBlocksInArea($c) > 0) : ?>
<h1>この見出しはエリア内に何かブロックが配置されているときだけ表示されます</h1>
<?php
endif;
$a->display($c);
?>

これだと初めての編集時にエリアが表示されなかったんです。
編集時にエリアが表示されない = いつまでも編集できない。
つまりこのエリアはいつになっても表示される事がなくなってしまうのではないか。

で、編集モード時には表示されれば問題がないので、$c->isEditMode() を使って下記のようにしました。

<?php 
$a = new Area('Main');
if ($c->isEditMode() | $a->getTotalBlocksInArea($c) > 0){ ?>
<h1>この見出しはエリア内に何かブロックが配置されているときだけ表示されます</h1>
<?php
$a->display($c);
}
?>

これで安心。夜も眠れます。

[追記]

if文の閉じ括弧の部分について、ご指摘ありがとうございました。

下記の様なデザインを想定した場合に、ブロックが無い場合にはsectionごと非表示という方法は、ガイドブックに載っている方法では対応できませんでした。

<?php 
$a = new Area('Main');
if ($c->isEditMode() | $a->getTotalBlocksInArea($c) > 0){ ?>
<section>
<h1>この見出しはエリア内に何かブロックが配置されているときだけ表示されます</h1>
<?php
$a->display($c); // *1
?>
</section> *2
<?php } ?>

*1より前に閉じ括弧があると、*2の</section>タグが出力されてしまいます。
phpの問題というより、htmlのマークアップの問題ですね。
このような状況を想定しているため、先述のコードとなりました。

[Photoshop]何の役に立つか全くわからない、たった2秒で集中線を描くアクション

昨日の記事の集中線の作り方ですが、実際説明するのも自分で作るのもめんどくさいのでアクションファイルを作りました。

Photoshop CCのアクションパレットのオプションで「アクションの読み込み」で使えます。
カンバスを何も開いていない状態でもOKです。

バージョンについてはおそらくですが、CS5とかでも大丈夫じゃないでしょうか。自己責任でどうぞ。

下記からダウンロードできます。

atnファイルをダウンロード

[Photoshop]いつ使えるかわからないけれど集中線を描こう

なんか無性に、漫画でよく使われる集中線をデザインに盛り込みたくなってしまう病気にかかっているので、集中線の書き方を簡単にまとめてみました。
ブログ記事はとても長くなってしまいましたが、実作業は理解してれば3分弱でできちゃったりします。

1.ファイル作成

新規

とりあえず、新規でカンバスを作ります。
サイズについてもあんまり制約無いですが、今回は1000×1000で作りますね。

2.レイヤー追加

ファイルを作ったら新しいレイヤーを追加します。

3.雲模様フィルタ

描画色と背景色が白と黒になってるのを確認して、「フィルタ」→「描画」→「雲模様1」を選択します。

雲模様が描かれます。

4.ノイズを加える

雲模様を描画したら、今度は同じレイヤーに「フィルタ」→「ノイズ」→「ノイズを加える」を選択します。

ダイアログが開いたら、「量:400%」「均等に分布」「グレースケールノイズにチェック」をします。

雲模様がノイズになりました。

5.ぼかし(移動)

ノイズを加えた後に、「フィルタ」→「ぼかし」→「ぼかし(移動)」を選択します。

ダイアログで、「角度:90」「距離:2000px」に指定します。
角度については、横(角度:0)でも問題ないですが、今回は縦にしています。また、距離についても1500pxくらいでも問題ないです。

ぼかし(移動)が適用されて、縦の縞模様になりました。

6.2階調化

縦の縞模様になっても、このままだとグレーの部分が多く、集中線とは言いがたいものになってしまいます。
そこで、このレイヤーを「レイヤーパレット」の「調整レイヤー」アイコンから「2階調化」を選択し2階調化します。

属性パレットのスライダーを左右に動かして、線がいい感じになるところで調整してください。
こればっかりは、雲模様やノイズなどのフィルタがランダムにかかる関係で、数値をいくつにしてって説明ができないのです。

縦線は右記のようになります。
上辺の数十px分を縦に引き延ばしてまっすぐきれいな線を作るので、真ん中辺りにできるもにょもにょした部分はあんまり気にしなくていいです。

7.切って延ばす

上辺の数十pxを適当に選択して、残りの部分を削除し、自由変形で縦に下まで引き延ばします。

すると、なんということでしょう!!
まるでバーコードのようなきれいな縦線ができあがります!!

7.極座標

もしここまでで作業完了するなら、「え、これただのバーコードじゃん」でいいんですが、今回は集中線ですので、集中しないといけませんね。
「フィルタ」→「変形」→「極座標」を選択します。

極座標ダイアログで、「直交座標を極座標に」を選択します。

いい感じになってきました。

8.白い背景色を除去

で、このままだとちょっと使い勝手がよろしくないです。
たとえば背景色は青にしたいとか、写真の上に追加したいとかってなったときに使えないわけです。
せっかくphotoshopなのだから、黒い線だけのレイヤーとして使いたいですよね。
「自動選択ツール」でレイヤーの白い部分をクリックして選択し、

「選択範囲」→「近似値を選択」を使います。

すると、レイヤー上の白い部分が全て選択された状態になるので、Deleteします。
色を付けたレイヤーを下に配置してみるとわかりやすいかと思います。

9.最後の仕上げはレイヤーマスク

集中線は演出的に何かに集中させる為のものですので、中央に線があるのは邪魔ですよね。
レイヤーマスクで中央部分を消してしまいましょう。
まず、レイヤーにレイヤーマスクをつけます。

次に、グラデーションツールを選択し、円形グラデーションを選択します。

カンバス中央から外に向かってドラッグしてグラデーションを描画します。
ここの行程も、何度か繰り返したり、やり直したりグラデーションの割合を調整するなどして、いい感じの所を探してください。

10.完成!

おめでとうございます!これで集中線マスターですね!!
とりあえずいつ使うかわからないので、自分の写真に使ってみました。

追記

これらの作業をなんと2秒で完了させる、アクションファイルを作成しました!
是非ご活用ください!!!!!!!!!