Archive for 6月, 2010

WordPressで title属性に改行を入れたいとき

 
Nivo Slider の画面キャプションは、imgタグの title属性にキャプション文字列をセットして表示するようになっているんですが、改行文字を入れようとしてはまったのでメモ。
 
普通、title属性に改行を入れたいときは、このどちらかだとおもいます。



<br />

WordPressだと、前者は無視され、BRは改行はするんですが、文字列終わりにゴミが付きます。

&lt;img src=&quot;test.jpg&quot; title=&quot;TEST<br />test" /&gt;

TEST
test" /&gt;

こんな感じになるわけです。apply_filtersが余計なことをしてるんじゃないかなという気がフツフツと湧いてきていますが、ここに手を入れると大変そうなので、見なかったことにして、とりあえず何とかしてみます。

$p = get_the_content();
$p = apply_filters('the_content', $p);
$p = str_replace('|BR|', '<br />', $p);
echo $p;

the_content()の代わりに get_the_content()を使って、自分で決めた改行コード(|BR|)を変換してるだけです。
やっぱり、apply_filters をちゃんと直すべきですね。(でも、WordPress3.0になったら直ってるかもしれない)

Nivo Sliderを使ったときの些細な問題点

 
Nivo Slider はすばらしいライブラリなんですが、IE8(or IE7)で使うと、タイミングによってたまに『 ‘undefined’は null またはオブジェクトではありません。』というエラーが出ることがあります。
たまにというのはずいぶんと控えめな表現で、リロードしたりページ切替えしたりしていると、2、3回に1回くらいの頻度でこのエラーが出て、画像が切り替わらないということになります。(私の環境では)
FirefoxやChromeでは相当激しくそうやってもならないので、「IEってバカなのね」で済ましてもいいんですが、まだまだ50%以上のシェアをもつブラウザを無視すると、あとで痛い目にあうのはこっちなので、なんとか対処しなければ。
 
エラーが発生するのは、http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js の中なので、これを見てみるとって、パックされたソースを見るのは嫌!ということで、http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js に置き変えてみたところ、ピタッとエラーが止まりました。
 
そういうことなんですね。

EC-CUBE:エラー対応(タイムアウト)

さっきの記事でもちょこっと書いたんですが、「月度で集計する」をやったら、30秒タイムアウトにひっかかった件が未解決でした。これもほっておけないので、対処しておきます。
エラーメッセージはこんな感じ。

/*
*/
Fatal error: Maximum execution time of 30 seconds exceeded

 
対応は次の3つらしいです。

  1. php.ini
    max_execution_time = 90
  2. httpd.conf or .htaccess
    php_value max_execution_time 90
  3. PHPファイル
    set_time_limit(90);

 
今回は限定的な対応なので、3のPHPソースの先頭に set_time_limit() を入れる方法で対処しました。
しかし、TOPで見ると売上集計が動き出すと、CPUがあっという間に 100%近くに張り付いて気持ち悪いこと。nice とかかませる方法はないのかしらん。(売上集計ごときはもう少し遠慮して動いてほしいものです)

EC-CUBE:エラー対応

お仕事で EC-CUBEのカスタマイズをやっていて(いろんなことをやってますよね)、いままで触ったこともなかった「売上集計」を動かしてみたらエラーが出たので、その対応について少しメモ。(きっと誰かの役に立つと思うので)

/*
*/
Warning: imagettftext() [function.imagettftext]: No character set found in /hoge/data/class/graph/SC_GraphBase.php on line 298

最初、「月度で集計する」をやったら、30秒タイムアウトにひっかかって、「期間で集計する」をやってみたら出たエラーがこれです。
 
ググってみてみたら『PHP がバンドル版の GD で構築されていないからではないか?』などというひやっとするようなことが書いてあって(PHPを使っているのは EC-CUBEだけじゃないので、いまさら CONFIGを変えてコンパイルし直すなんてこと、怖くてできない!)、そんなぁと思いつつ、ほかも調べてたら、GDがバンドル版じゃなかったら、そもそも Warningじゃなくて Fatal errorになるんじゃないかと。

/*
*/
Fatal error: Call to undefined function: imagettftext() in ...

 
で、エラーメッセージに立ち戻ってみると、No character set found とあるので、キャラクターセットがないと言ってるんだなと。
どうやら、EC-CUBEに標準で付いてくる wlmaru20044.ttf というやつがマズイようなので、IPAのページから最新の「IPAexフォント」をダウンロードして、wlmaru20044.ttfのあるフォント・ディレクトリ(/hoge/data/fonts/)に突っ込んでやります。

そして、エラーの出てるファイル(SC_GraphBase.php)のデファインを IPAexフォントに変えて、わざわざ EUC-JPにしてるところをコメントアウトして、元のUTF-8をいかせばOKです。

/*
*/
/* /hoge/data/class/graph/SC_GraphBase.php */

/* TTFフォントファイル */
//define("FONT_PATH", DATA_PATH . "fonts/wlmaru20044.ttf");
define("FONT_PATH", DATA_PATH . "fonts/ipaexg.ttf");

         /*     http://www.php.net/imagettftext を見ると, UTF-8 にしろと
         *     書いてあるのに...
         *
         */
//        $text = mb_convert_encoding($text, "EUC-JP", CHAR_CODE);
        $text = mb_convert_encoding($text, CHAR_CODE);
        if($color != NULL) {
            ImageTTFText($this-&gt;image, $font_size, $angle, $left, $top + $font_size, $color, FONT_PATH, $text);
        } else {
            ImageTTFText($this-&gt;image, $font_size, $angle, $left, $top + $font_size, $this-&gt;text_color, FONT_PATH, $text);
        }

EUC-JPをそのままにしておくと、日本語が化け化けになります。
しかし、なんで EC-CUBEは wlmaru20044.ttf なんかを同梱してるんだろうか?
ライセンスの関係で IPAフォントがバンドルできないのかな?(ライセンスをざっと読んだ限りではそんな制限に引っ掛かるように思えないんだけど)

Nivo Slider

Nivo Slider という、jQueryを使ったかっちょいいスライダーです。
サムネイル画像の上にマウスをもっていくと(マウスオーバー)、メインの画像が切り替わるというのはよくやることですよね。
あれはただ、onMouseOver = “jQuery(‘#main-img”).attr(‘src’, ‘sub-img-02.jpg’);” みたいなことをしてるだけで、切替え効果などは特に考えていないわけなんですが、このハデハデ GUI全盛の折にそれでいいのか、ということです。(ボクはシンプルな方が好きなんですけど)
で、Nivo Slider の出番です。

  • サムネイルに対応している
  • 画像にキャプションをかぶせられる
  • 勝手に動かない(スライドショーじゃないので)

こんなわがままな要望をかなえてくれます。
実際に使うときの注意点は、こんなところ。

  • jQueryの 1.2.6には対応していないので、素直に ajax.googleapis.com から最新版(1.4.2)を取ってきましょう。
  • jquery.nivo.slider.pack.jsのソースを見ると、ほぇ?! っとなりますが、大丈夫。これで動きます。
  • $(window).load(function() になっているところもそのままで。入れるタイミングがあるようです。
  • manualAdvance:true にすると勝手に動きません。
  • controlNavThumbs:true でサムネイルが出ます。
  • サムネイルファイルは、画像と同じところに『同じ名前_thumb.jpg』というファイルを作っておきましょう。
  • キャプションは、imgの title に設定します。

floatを入れておく箱の高さ

 
いつも釈然としないまま、clear:both したり、border:1px solid #fff したりしてたんですけど、明確な解決法があったので、メモ。
 
ここ(⇒ float属性を指定した要素の親要素の高さ)に書いてありました。overflow:auto を指定するだけですって、奥さん!

<div style="overflow:auto">
  <div style="float:left">左側のなにか</div>
  <div style="float:right">右側のなにか</div>
</div>

 
これだけじゃ、なんなんで、display:none で隠しておいた要素を表示するとき、display:block じゃ表示されませんよと。display:inline ですよ。(なんの豆知識やねん!)

カラーミーでのTips

 
お仕事でカラーミーのカスタマイズをやってるんですけど、これがなかなか癖があって面倒というか面白いので、少しメモっておきます。
一番美味しいところからひとつ。商品一覧でページ数を求めるときです。

<!-- $pgnum = floor(($productlist_num - 1) / 12) +1; -->



カラーミーは基本 smartyなんですけど、微妙にいろんなところがマスク(使えなく)してあって、使えないんです。
やりたいことは一番上に書いたことですが、そのまま assignしてもエラーになるので、四則演算をバラバラにして、切り捨ては、regex_replaceを使うという裏ワザです。
 
これを使って、[1] [2] [3] [4] みたいなページ・ナビゲータを出すのはこうです。


  

  

<div class="pagenate">
  
    &lt;a href=&quot;"&gt;<img src="http://img05.shop-pro.jp/PA01105/188/etc/page_arrow_lt.gif" alt="" /></a>
  
  
    &lt;a class=&quot;pbox&quot; href=&quot;&amp;page="&gt;</a>
  
  
    &lt;a href=&quot;"&gt;<img src="http://img05.shop-pro.jp/PA01105/188/etc/page_arrow_rt.gif" alt="" /></a>
  
</div>

左右の矢印を出して、間は数字([1] [2] [3]・・・)のリンクです。途中を省略したいときや、いまいるところの前後だけ出す場合はとりあえず考慮してありませんが、できます。
 
二つ目はまた今度。

CrossSlide

 
いつも同じスライドショーだと飽きるので、新しいやつを探してみた。
 
CrossSlide がそれ!
 
普通のフェードと上下左右にパンしながらのフェード(ただし、これは表示エリアより画像が大きくないとエラーになる)、それと Ken Burnsができる。設定も簡単だし使いやすいが、1回で止まる指定はないみたいで、ずっとループするみたい。
この辺をどう考えるかだな。止まってほしい気もするが。(ソース見たらそういう指定が入ってるというオチはありがち)

用紙の拡大比率など

 
幼稚園の広報誌の表紙の制作を依頼されて(うちの財務大臣からロハで)、カラーコピーで簡易印刷するので、その程度のクォリティでいいということだったので、PhotoShopで土曜日しこしこと作業してたんですが、ほぼ完成したところでプリントアウトしてみると、「A4じゃないよ、B5って言ったじゃん!」とのこと。
さて、どうするか?
 
1.B5でレイアウトし直す。・・・ 面倒いからヤダ。
2.B5で印刷する。・・・ フチなしにしてくれ!とのこと。無理だ。
3.B5でA4用紙に印刷。・・・一見よさそうだが、上マージンが足りないらしく却下。1cmくらい上マージンが指定できればいいだけなんだけど。
4.結局、PhotoShopでPNG保存して、それを Wordに貼りつけて、86%縮小して印刷。・・・OK
 
で、必要な用紙サイズをメモっときます。

A判 B判
A4 210×297 B4 257×364
A5 148×210 B5 182×257

 
これだけじゃなんなんで、その間ググったことメモ。
 
PhotoShopで塗りつぶしじゃない円を描く方法
 なんでもっと簡単に円を描く方法を提供しないんだろうかとそっちの方が気になる。
 
PhotoShopでキラキラした星を描く方法
 これは効果的です。使いました。
 
PHPのヒアドキュメント
 よく使うんだけど、ちゃんと覚えてないものの典型。
 
CSSハック一覧 – IE, Firefox, Safariなどなど
 きっとこれが決定版。
 
フレームの右側を折り返さないようにする方法は?
 white-space:nowrap が思い出せなくてね。年だね、もう。

背景画像の位置

またまた、IE7互換表示だと OKで、IE8だと NGな CSSがあったので、メモ。
 
ここ(⇒ 背景画像の表示位置)によると、『CSS2.1においてbackground-positionプロパティにおいて、「キーワードを、長さや%値と組み合わせることはできません」という記述が削除されました。つまり、「top 25%」という記述も許可されます(ie8- -ff3 -o9 -sf4 -gc2未対応)。』ということですが、まだ未対応のようですね。IE7互換が先取りしてたってことで。

background-position:0 right;     /* NG */
background-position:0px right;  /* NG */
background-position:0% right;  /* NG */
background-position:top right;  /* OK */

 
あと、角丸ボックス・吹き出しのまとめ。ピタッとこないとなかなか使いにくいですが。

次ページへ »