タイトルが微妙に変わっていますが、書いてあることはいつもと同じです。

jquery

長年の懸案だった、Thickboxが IEでうまく動かない件がやっと解決しました。それも自力で。エライね>自分。
懸案事項は次の2点。

  • 縦に長い画面で、下にスクロールしたところでウィンドウを出すと、画面中央に出ず、上の方に隠れてしまう。(画面TOPからの固定位置で表示される)
  • このような場合、画面と一緒にスクロールしてしまう

本来は、どのような状況でもウィンドウは画面中央にきて、スクロールは背面の画面がスクロールするだけでウィンドウの位置は変わらないというのが正しい挙動です。もちろん、オフィシャルサイトのデモはそういう動きをしています。
それがどうしておかしくなるかというと、DOCTYPEの「標準モード」と「互換モード」の違いでした。



上が互換モードで、下が標準モードです。
Thickboxを互換モードで動かそうとすると、IEに限って、上のような現象に遭遇します。Firefoxとか Chromeは大丈夫なのが現象をわかりづらくしてますね。

今回は、ググったものというか、あとできっと見たくなるけど、いまは使わないことです。

  • Smartyのテンプレートの文字列内変数を拡張する
    Smartyのバッククォート解釈がタコなのはよく知られていることなので、それを自分でカスタマイズしてしまえるというのは、すごく魅力的です。
    どのタイミングでやるかと、1回自分でカスタマイズしたクラスを使ってしまうと、どこにでもそれを引きづっていかないといけなくなって、それがない環境(例えば、カラーミーなど)ではかえって辛くならないかという不安がありますけど、EC-CUBE限定でやるかもしれません。
  • date関数で”Asia/Tokyo・・”なんかのエラーが出る件:PHP5.1.0以降
    知らなかったので。
    「date_default_timezone_set(‘Asia/Tokyo’);」とか、php.iniで「date.timezone = Asia/Tokyo」書かないといけないそうですよ。
  • リファラ実験
    定番だけど備忘録として。
jquery

PHPで複数ファイルのアップロードをなるべくスマートにやる方法はないかなぁと探し回ってたどり着いたのが、コレ。
自分的にはベストな解答です、たぶん。
 
詳しい使い方は「Ajax風にファイルをアップロードするjQueryプラグイン「Uploadify」の使い方」が超詳しいので、こちらを参照のこと。
 
以下は自分的にポイントとなったところ。

  1. 既存のPHPシステム(例えば、EC-CUBEなど)とはできるだけ独立した形にしたかったので、少し工夫した。
  2. 呼出し部分は小さいので、display:none で本体のHTMLに組み込む。例えば、こんな感じ。
    
    $(document).ready(function() {
      $("#uploadify").uploadify({
        'uploader'     : '<!--{$TPL_DIR}-->js/uploadify/uploadify.swf',
        'script'         : '<!--{$TPL_DIR}-->js/uploadify/uploadify.php?rand_no=<!--{$rndNo}-->',
        'cancelImg'  : '<!--{$TPL_DIR}-->js/uploadify/cancel.png',
        'folder'         : '<!--{$smarty.const.IMAGE_TEMP_URL}-->',
        'queueID'     : 'fileQueue',
        'auto'          : false,
        'buttonText' : 'Select Files...',
        'multi'         : true
      });
    });
    
    <div>
      <p style="margin:0">画像ファイルを選択して、Uploadしてください。</p>
      <div></div>
      
      <div style="float:right"><a href="fnModeSubmit('upload_image','image_key','sub_image'); tb_remove();">Close Window</a></p></div>
      <p><a href="$('#uploadify').uploadifyUpload();">Upload Files</a> <a href="jQuery('#uploadify').uploadifyClearQueue()">Cancel All Uploads</a></p>
    </div>
    

    ちょっと見慣れない細工コードが入っているのは無視無視。たったこれだけでアップローダ定義完了。

  3. 特殊なことをしている点は、複数の人が同時にこのアップローダを使った場合、同じテンポラリ・フォルダを使うことになるので、ファイル管理用のランダム文字列を持たせたこと。(ほんとは rand()だとかぶる危険性もあるんだけど、今回は管理画面からのアップロードということで、せいぜい10人未満の同時使用しかないだろうから、そこには目を瞑った)
  4. それと、#uploadブロックは通常非表示で、Thickboxのモーダル・ウィンドウで上がってくるようにしている。
    <a href="#TB_inline?height=430&amp;width=405&amp;inlineId=upload&amp;modal=true" title="Uploadify" class="thickbox">Uploadify</a>
    

    こうすると本体のHTMLを汚さなくて済むからいいよね。で、Close Windowのとき、fnModeSubmit()といういままでアップロードボタンに割りつけていた関数を呼んでフックをかけると。

  5. サーバ側もいたってシンプル。
    if (!empty($_FILES)) {
      $tempFile = $_FILES['Filedata']['tmp_name'];
      $targetPath = str_replace('//','/', $_SERVER['DOCUMENT_ROOT'] . $_REQUEST['folder'] . '/');
      $targetFile =  $targetPath . $_FILES['Filedata']['name'];
      move_uploaded_file($tempFile,$targetFile);
    
      $_FILES['Filedata']['tmp_name'] = $targetFile;
      $fp = fopen($targetPath.$_REQUEST['rand_no'], "a");
      fputs($fp, serialize($_FILES['Filedata'])."\n");
      fclose($fp);
      echo "1";
    }
    

    複数ファイルをまとめてアップロードすると、この PHPが回数分呼ばれることになる。
    やってることは、渡されたファイルをフォルダに移して、なんのファイルを移したかファイルに記録しておくだけ。
    このときのファイル名に例のランダム文字列を使ってる。

  6. あとは、この $_FILES がシリアライズされたファイルを読んで、あたかも $_FILESで入ってきたように振舞ってやれば OK。
    $no  = 0;
    $buf = @file(IMAGE_TEMP_DIR . $this-&gt;rndNo);
    if ($buf) {
      foreach ($buf as $e) {
        $no++;
        $key = "sub_image".$no;
        $_FILES[$key] = unserialize($e);
        $this-&gt;arrErr[$key] = $this-&gt;objUpFile-&gt;makeTempFile($key, IMAGE_RENAME);
      }
      @unlink(IMAGE_TEMP_DIR . $this-&gt;rndNo);
      unset($_POST['rand_no']);
      unset($this-&gt;rndNo);
    }
    

    EC-CUBEのコードにがっつり入り込んでいるのでわかりにくいけど、シリアライズされたファイルを読んで、アンシリアライズしたものを $_FILESにセットして、処理を継続しているだけ。終わったら、後始末しておく。

こんな感じで活用させていただいてます。ありがとう、Uploadify

jquery

いつもお世話になっている Thickboxですが、画像の拡大表示くらいしか使っていなかったんですけど、よんどころない事情でインライン表示を使うことになって、いまさらながらのポイントもわかり、きっとあとで見ると思うので、メモメモ。
 

  1. 別ファイルをモーダルで表示するとき、どうやって閉じればいいんだ?
    こう「self.parent.tb_remove();」します。具体的には、こんな感じ。
    <a href=”javascript:self.parent.tb_remove();”>Close Window</a>
  2. Thickboxをドラッグ可能にする
    これはまだ試してないけど、動かせなくて不便だなと常々思っていたので、そのうちやってみます。
    jQuery UI Draggable を使えば簡単よ、ということらしい。
  3. Thickbox呼び出し方のまとめ
    <a href="#TB_inline?height=xxx&amp;width=xxx&amp;inlineId=divID" class="thickbox">EXAMPLE</a>
    <a href="#TB_inline?height=xxx&amp;width=xxx&amp;inlineId=divID&amp;modal=true" class="thickbox">EXAMPLE</a>
    <a href="http://url.com?keepThis=true&amp;TB_iframe=true&amp;height=xxx&amp;width=xxx" title="xxx" class="thickbox">EXAMPLE</a>
    <a href="http://url.com?placeValuesBeforeTB_=savedValues&amp;TB_iframe=true&amp;height=xxx&amp;width=xxx&amp;modal=true" title="xxx" class="thickbox">EXAMPLE</a>
    

    keepThis や placeValuesBeforeTB_ はなくてもへっちゃらみたいです。

fax

新しくFAXを買ったときや、FAXの設定を変えたときなんかに『ああー、誰か FAX送ってくれないかなぁ』と思ったこと、ありませんか?
ボクはたまに、そうですね、年に一度ほど、あります。
 
「FAX テスト」でググってみると、FAXのテストをしたいのですが無料で返信してくれるサービスは … とか、FAXを購入したのですが、受信のテストをしたいです。FAX番号を入力して … などの質問が上がっているのですが、回答は全然使えません。
 
いっそ自分で、『専用の受付メールアドレスに、送信先を書いたメールをくれたら、来たメールをそのままFAXへ送信するサービスをやろうか』と思ったくらい。でも自分でやると、自分のテストのとき使えないからやらないけど。
 
で、本題です。そういうときはどうすればいいか。オススメ順から。

  1. JAL音声自動応答「SKYナビ」
    0120-747-222(フリーダイヤル)に電話すると、空席・運賃案内を FAXで送ってくれます。
    年に1回や2回は飛行機を使うときがあるでしょうから、そういうときは JALを使いましょう。JALは、いま大変なときなんだし。
  2. eFax
    ここの30日間無料トライアルを申し込むと、50ページまでの送信が無料です。
    注意点として、自分で解約手続きをしないと31日目以降は自動的にサービス加入状態になって、月額1,500円とられます。あと、無料トライアルの申込みにクレジットカード番号を入力するのが、心理的に嫌かな。

以上、テストは計画的に。本来のサービス利用の主旨を外れないよう、節度をもって利用しましょう。