kohanaのテスト13-2・・・ヤマレコビューワーに ThickBox を使ってみる

　5日の日記で作成したヤマレコビューワーはちょっと見た目が冴えないので、格好よくすることにしました。今回のコードの目玉は、ThickBox のメソッドをこちらから能動的に使いに行っている点です。このような使い方のサンプルコードは滅多に無いんじゃないでしょうか。

ビュー

・kohana/application/views/test13_1.php

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>山の写真</title>
        <script type="text/javascript"><!--
            function changeImg(){
                jQuery("#TB_window").remove();
                jQuery("body").append("<div id='TB_window'></div>");
                tb_show("yamareco", "test13mediaview?getimg&"+(new Date()).getTime(),1);
            }
            function setTimer(){
                tb_show("yamareco", "test13mediaview?getimg&"+(new Date()).getTime(),1);
                imgTimer = setInterval("changeImg()",10*1000);
            }
            function clearTimer(){
                clearInterval(imgTimer);
            }
            // --></script>
        <link rel='stylesheet' href='/includes/wp/includes/js/thickbox/thickbox.css' type='text/css' media='all' />
        <script type='text/javascript' src='/kohana/loadjs?c=1&load=jquery'></script>
        <script type='text/javascript' src='/kohana/loadjs?c=1&load=commonl10n,thickbox'></script>
    </head>
    <body bgcolor=Gray>
        <p>ヤマレコの写真</p>
        <form>
            <input type="button" value="開始" onClick="setTimer()"/>
            <input type="button" value="停止" onClick="clearTimer()"/>
        </form>
    </body>
</html>

・開始すると ThickBox のメソッド tb_show を直接呼び出しています。
・ThicBox/jQuely は画像の履歴を残していて、同じ URL にアクセスすると履歴から画像を表示する仕様になっています。そこで、URLを毎回変更するように仕組んでいます。
・5日の日記に書きましたが、ThickBox は URL の末尾の拡張子で画像を判定しています。対策として末尾が mediaview でも画像と認識するように ThickBox をハックしています。

コントローラ

・kohana/application/classes/controller/test13mediaview.php

<?php defined('SYSPATH') OR die('No direct access allowed.');

class Controller_Test13mediaview extends Controller {

    public function action_index() {

        if (isset($_GET['getimg'])) {
            for ($i = 1; $i < 10; $i++) {

                mt_srand();
                $rand = mt_rand(50001, 196250);
                $yamareco = 'http://www.yamareco.com/modules/yamareco/detail-' . $rand . '.html';

                $config = array(
// 'proxy_type' => 'http',
// 'proxy_host' => 'プロキシサーバー',
// 'proxy_port' => 8080,
// 'proxy_user' => 'ユーザー名',
// 'proxy_password' => 'パスワード'
                );

                require_once("HTTP/Request2.php");
                $http = new HTTP_Request2($yamareco, HTTP_Request2::METHOD_GET, $config);
                $subject = $http->send()->getBody();

                if ($subject == FALSE)
                    continue;

                preg_match_all("#http.+modules/yamareco/include/tmp_imgresize.+'#", $subject, $matches);
                $matches = $matches[0];

                if (!$matches)
                    continue;

                $rand = mt_rand(0, count($matches) - 1);
                $url = $matches[$rand];
                $url = preg_replace("/'/", '', $url);
                $url = preg_replace("/maxsize=800/", 'maxsize=1200', $url);

                $http = new HTTP_Request2($url, HTTP_Request2::METHOD_GET, $config);
                $img = $http->send()->getBody();


                if ($img == FALSE)
                    continue;

                if (strlen($img) < 1000)
                    continue;

                header("Accept-Ranges: bytes");
                header("Content-Length: " . strlen($img));
                header("Content-type: image/jpeg");
                ob_clean();
                flush();
                print $img;
                exit();
            }

            echo 'Time out!';
        } else {
            $view = view::factory('test13_1');
            $this->response->body($view);
        }
    }

}

?>

・今度のコードは引数に getimg があると写真そのものを返す仕様になっています。

動作試験

　5日のコードですと縦長の写真の表示が見苦しかったのですが、ThickBox のおかげでウインドウサイズに合わせて適切な表示がされるようになりました。

　素晴らしい！　ますます山に行きたくなります・・・（＾＾；；；

dari88's diary

これから趣味にするプログラミング/PHP/javascript/kohana/CMS/web design/

kohanaのテスト13-2・・・ヤマレコビューワーに ThickBox を使ってみる