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 に置き変えてみたところ、ピタッとエラーが止まりました。
 
そういうことなんですね。

さっきの記事でもちょこっと書いたんですが、「月度で集計する」をやったら、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のカスタマイズをやっていて(いろんなことをやってますよね)、いままで触ったこともなかった「売上集計」を動かしてみたらエラーが出たので、その対応について少しメモ。(きっと誰かの役に立つと思うので)

/*
*/
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->image, $font_size, $angle, $left, $top + $font_size, $color, FONT_PATH, $text);
        } else {
            ImageTTFText($this->image, $font_size, $angle, $left, $top + $font_size, $this->text_color, FONT_PATH, $text);
        }

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

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 に設定します。

 
いつも釈然としないまま、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 ですよ。(なんの豆知識やねん!)

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

<!-- $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]・・・)のリンクです。途中を省略したいときや、いまいるところの前後だけ出す場合はとりあえず考慮してありませんが、できます。
 
二つ目はまた今度。