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

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

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

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

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

[追記]

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

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

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

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

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

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

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

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

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

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