CodeIgniterの学習 70 - LightWindow(ThickBoxみたいなの）をCodeIgniter上で使ってみる

CodeIgniter PHP

こんにちは、お久しぶりっす。

今日はLightwindow(ThickBoxみたいなの）をCodeIgniter上で使ってみる。

元ネタは http://codeigniter.com/wiki/Lightwindow_with_CI/ です。

ほぼ元ネタに従えば動くんだけど、実際に使ってみるべし。ひたすら実験君あるのみ。


機能

ThickBox3 (http://jquery.com/demo/thickbox/)とか、
Lightboxとかを使ったことがあればすぐわかると思うけど、
画像が、もわーって出てびょーんってのびるアレね。


こいつもそれに似た奴の高機能版らしい。

lightwindow - http://www.stickmanlabs.com/lightwindow/

画像以外にも多様なフォーマットに対応している。
（実際の動作は http://www.stickmanlabs.com/lightwindow/#demos を参照）


画面

こんな感じ（cssを多少いじっている）


リンクをプチって押すと、



こんな感じで出現する。

ここでは、元ネタサンプルに従い、

ajax経由で、CodeIgniter内のコントローラ内メソッドを呼び出して、
ビューをdiv内のinnerHTMLで表示している。


コントローラを呼び出せるので、何でも出来ちゃうわけですよ。わーい。


導入手順

使い方は元ネタに書いているけど、若干足りないので、補足する。

１）ライブラリー application/libraries/Lightwindow.php の新設

http://codeigniter.com/wiki/Lightwindow_with_CI/ 上のソースをコピペして、application/libraries/Lightwindow.php として設置。
（ただし、コピペソースの１行目と２行目のPHPの開始タグ、終了タグの連続が気に入らないので、CI内の他のソースと同様にする。）


２）Lightwindowソースの取得

http://www.stickmanlabs.com/lightwindow/#download から、lightwindow.zip (v2.0) をダウンロードして解凍する。


３）Lightwindowソース群の設置(javascriptファイル）
各自の環境によって違うだろうが、解凍したソースの中の、

  1. javascript/lightwindow.js
  2. javascript/effects.js
  3. javascript/prototype.js
  4. javascript/scriptaculous.js

を、

  1. ドキュメントルート/js/lightwindow.js
  2. ドキュメントルート/js/effects.js
  3. ドキュメントルート/js/prototype.js
  4. ドキュメントルート/js/scriptaculous.js

等に設置する。


４）Lightwindowソース群の設置(cssファイル）
３）と同様に、解凍したソースの中の、

を、

  • ドキュメントルート/css/lightwindow.css

等に設置する。このcssはサンプルなので、色とかサイズとか好きにいじるべし。


５）Lightwindowソース群の設置(画像ファイル）
３）４）と同様に、解凍したソースの中の、

  • images/以下の画像ファイル

を

  • ドキュメントルート/img/lightwindow/以下

等に設置する。(ここではimg内に、lightwindowディレクトリ新設し、そこに設置している。）


６）４）のjsファイルの更新（任意）
Lightwindowソースに同梱されている

  1. javascript/effects.js
  2. javascript/prototype.js
  3. javascript/scriptaculous.js

のバージョンが若干古いので、
script.aculo.usから、現在の最新安定版の scriptaculous-js-1.8.2.zip を取ってきて入れ替えた。
(prototype.jsの最新版も、このzipファイルに入っていた。）

（ script.aculo.us - http://script.aculo.us/downloads ）


サンプルソース

元ネタライブラリー内に若干説明が書いているけど、ちょっと説明が足りないので、ソースを書いてみる。
（以下のソースはurl_helperをデフォルトで有効にしている前提。）

１）呼び出し元：適当なコントローラー（ここでは tasklist/index）

<?php if ( !defined( 'BASEPATH' ) ) exit( 'No direct script access allowed' );
//上略
    function index()
    {
        $this->load->library('lightwindow');//Lightwindowライブラリの読み込み
        //中略
    }

//下略

 ?>

コントローラ内でライブラリを読み込む（コンストラクタとかでもいいけど、お好きに。）


２）呼び出し元ビュー：適当なビュー

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
<head>
<!-- 途中略 -->
<script type="text/javascript" src="<?=base_url()?>js/prototype.js"></script>
<script type="text/javascript" src="<?=base_url()?>js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="<?=base_url()?>js/lightwindow.js"></script>
<link href="<?=base_url()?>css/lightwindow.css" rel="stylesheet" type="text/css"/>
<!-- 途中略 -->
</head>
<body>
<!-- 途中略 -->
<h2>Lightwindowを試してみたテスト</h2>
<div>
<a href="#" onclick="hoge_lwtest(); return false;">Lighwindowを開きまーす</a>
<script type="text/javascript">
// <![CDATA[
<?=$this->lightwindow->ajax('hoge_lwtest', 
                            base_url().'tasklist/lwtest', 
                            'ここは窓のタイトル', 
                            'ここは説明だ。<br>この画像は以前のエントリーでCodeIgniter上で合成したもの', 
                            'ヌル画伯 - 1931年');?>

// ]]>
</script>
</div>
<!-- 下略 -->
</body>
</html>

こんなかんじ。
ヘッダ部分と、ボディ部分に追加
（ウチの環境だと、ヘッダ部分は別のビューに分割しているけど、ここでは説明のため一つにしている）


onclick部分のhoge_lwtest();と、
$this->lightwindow->ajax('hoge_lwtest',

が同じ。

$this->lightwindow->ajaxの第二引数が、呼び出し先コントローラー/メソッド名。


このへんは、ライブラリー application/libraries/Lightwindow.php を見れば分かるので省略。
ライブラリーの引数を、
http://www.stickmanlabs.com/lightwindow/#howtouse を見ながら拡張すれば、
もっと細かい制御が出来そう。


３）呼び出し先コントローラー：適当なコントローラー（ここでは tasklist/lwtest）
２）の第二引数部分で、tasklist/lwtest を呼び出すようにしている。

<?php if ( !defined( 'BASEPATH' ) ) exit( 'No direct script access allowed' );
//上略
    //lightwindowのテスト
    function lwtest(){

        $data['hoge'] = date("Y/m/d H:i",time());
        $data['fuga'] = "lightwindowのテストだよーby ajax";
        $this->load->view('lwtest_view',$data);

    }
//下略

 ?>

こんなかんじ。日付を動的に作っているだけ。



４）呼び出し先ビュー：適当なビュー（ここでは lwtest_view.php）

<div style="padding:4px 0;">
<p style="color:#fff;">
<?=$hoge?>
</p>
<p style="color:#fff;">
<?=$fuga?>
</p>

<div style="text-align:center;">
<img src="/img/tmp/kame_400x300_thumb_rotate_crop_watermark.png" width="240">
</div>
</div>

こんなかんじ。ちなみにinnerHTMLで差し込まれるので、head , body タグは不要
日付だけだと寂しいので、ここでは画像ファイルも読み込んでみた。

もっと複雑な処理を噛ましたビューも作れるだろう。
（っていうかそれがajaxで動的呼び出しする目的。）



動作確認

画面サンプルのとおりなので省略。
多分最初CSSが多少ずれて気に入らないと思うが、そこはコツコツ直しましょう。

あと、lightwindow.css内の、

background: url(../images/arrow-up.gif) no-repeat 60px 5px transparent;

等の画像背景部分を、

background: url(/img/lightwindow/arrow-up.gif) no-repeat 60px 5px transparent;

等、Lightwindowソース群から持ってきた画像ファイルのパスに書き換える必要があることに注意。




まだあまりさわっていないけど、おもしろそうだし、
CodeIgniterと親和性が高そうなので、Lightwindowをモノにする。



しょぼい日報PGをつくるのエントリーは現在絶賛停滞中。（今週書ければいいなー）