【CakePHP】thickbox(+jQuery)で簡単モーダルダイアログ

フォーム内で画像を選ばせるようなインターフェースが出来ないものかと考えていて、今はやりのlightbox的なモーダルダイアログを実現出来ないかと思い、とりあえず自作してはみたのですがイマイチだったので、なんかこういうツールがないかなと思っていたのですが…
やっぱりちゃんとあるんですね!

▼ThickBox 3.1
http://jquery.com/demo/thickbox/

使い方はとっても簡単!
基本的に、ダウンロードしたJavaScriptファイルやcss、それとjQueryをwebroot内に設置して、表示したいもののURLを指定するだけ!iframe形式も、Ajaxによる埋め込みも可能です!
簡単な秘密は、URLにquery string(?~)でパラメータを渡すため、設定が不要だからだと思います。
この方式は欠点もありますが… このクエリストリングが実サイトの方にも行ってしまうため、たとえばgoogleなんかを呼び出すことは出来ないです。

本体の設置は省略して、viewにはこんな風に書けばOK!


<?php echo $html->css('thickbox'); ?>
<?php echo $javascript->link('jquery'); ?>
<?php echo $javascript->link('thickbox'); ?>
<?php //echo $html->link('テスト', array(
'controller' => 'hoge',
'action' => 'fuga',
'?' => array(
'keepThis' => true,   //iframeを使用する場合。Ajaxの場合はこれらを書かない
'TB_iframe' => true,  //
'height' => '70%',
'width' => '70%',
),
1,
2,
3,
), array(
'class' => 'thickbox',
'title' => 'てすとですよ',
)); ?>

まあ実際に設置してもらうと分かりますが、例えばこんな感じに表示できます。

thickbox_demo
試しにCakePHPサイトを表示してみると…

あと気をつけなければならない点として、Ajaxとして使う場合、paginate等で遷移させることが困難になるため、こちらもAjaxで実現しなければなりません。CakePHP1.2は基本的にprototype.jsであり、そのままではjQueryと共存が出来ないため、多少工夫がいるようです(詳しくはググってください)。こういった場合はiframeでやるのが手っ取り早いかもですね。この場合は、値の受け渡し等でiframeをまたぐ必要があり、これもまた工夫が必要ですが…

というわけで、とりあえずlightboxチックなユーザインターフェースをご希望でしたら是非thickboxを!

紹介していただいたkaz_29さん、ありがとうございました。大変に助かりました!

【Tplcutter】タグ仕様を決定!

先ほど某所にある「びっくりドンキー」にて、チーズバーグディッシュ300gを食いながらTplcutterのタグ仕様を決定してきました。

簡単に、今回搭載する機能概要を挙げますと…

  • レイアウトの定義(ファイルへ書き出し/メモリ記憶/破棄。各ビューにコピー)
  • レイアウトの呼び出し(メモリ記憶から/ファイルから。各ビューにコピー。新機能!)
  • ヘッダ/フッタの定義(レイアウトを分離したい場合に使用。各ビューにコピー。新機能!)
  • ヘッダ・フッタの呼び出し(メモリ記憶から/ファイルから。各ビューにコピー。新機能!)
  • ビューの定義
  • エレメントの定義
  • ピースの定義(範囲指定をメモリに記憶。0.2.0からの機能)
  • 文字列の定義(defineライクなメモリ記憶。新機能!)
  • メモリ記憶から書き出し(タグを置換/範囲指定を置換)
  • 領域消去(新機能!)

の機能を(タグ機能として)実装します。

更に、今まで放置状態だったCSSファイルやjsファイルに関しても今回メスを入れます。
今まではCSSやjsはTplcutterの処理対象外でしたが、0.3.0からは一部タグ機能(ピースなどのコピー置換機能など)についての処理を行います。また、Tplcutterタグは基本的にHTMLのコメントタグを利用したもののため、CSS/js内では使用不可能でしたが、該当タグについては「/* ~ */」や「//」も使えるようになります。これによって、CSS/jsファイル内で可変したかった値や、htmlのインライン内、PHPスクリプト内での置換をデザインツールで編集を損なうことなく表現することが出来るようになります。

今回の目玉は、何と言っても「コピー・置換機能」を「CSSやjs内でも使用できる」点ですかね。
「可変したい部分だけど編集用にダミー値を持たせたい」場合に本機能が大活躍します。
以前の記事でも書きましたが、今回のバージョンのテーマは「革命」です。
名ばかりでない「超便利!!」なツールを提供できるよう、頑張りたいと思います。

ちなみに、設定関連についてはこれから練るのですが、おそらく若干の変更はあるものの、こちらについては現状とあまり変わらないものになるかと思います。