月別アーカイブ: 2013年1月

jQuery ColorPickerで色を選択

ここでは色を選択するjQuery ColorPickerプラグインを紹介します。

colorpicker-jquery

デモはこちら
http://office-goto.info/demo/colorpicker/

ColorPicker – jQuery pluginのダウンロード
http://www.eyecon.ro/colorpicker/

head内で読み込み

<link rel="stylesheet" href="css/colorpicker.css" type="text/css" />
<script src="js/jquery.js"></script>
<script type="text/javascript" src="js/colorpicker.js"></script>

colorpicker.css、colorpicker.jsを読み込んでください。

script

$(function(){
    $('#picker').ColorPicker({
        onSubmit: function(hsb, hex, rgb, el) {
            $(el).val(hex);
            $(el).ColorPickerHide();
            $('body').css({'backgroundColor' : '#' + hex});
        },
        onBeforeShow: function () {
            $(this).ColorPickerSetColor(this.value);
        }
    })
    .bind('keyup', function() {
        $(this).ColorPickerSetColor(this.value);
    });
});

html

<input type="text" id="picker" value="ffffff">

今回は例としてtextをクリックしたらColorPickerが出てくるように設定して
ColorPickerで色を選択したら背景色を変更しています。

ロリポップでCakePHP2.xを動かす

ここではCakePHP2.xをロリポップで動かす設定についてまとめています。

ロリポップphp.ini

;mbstring 関連
mbstring.language = neutral
mbstring.internal_encoding = UTF-8
mbstring.encoding_translation = On
mbstring.func_overload = 0
mbstring.http_input = UTF-8
mbstring.http_output = UTF-8
  
;session 関連
session.auto_start = 0
session.use_trans_sid = 0
session.use_only_cookies = 0
  
;apc 関連
apc.enabled = 1
apc.enable_cli = 0
  
;そのほか
default_charset = UTF-8
output_handler = mb_output_handler
output_buffering = 未設定
magic_quotes_gpc = Off
short_open_tag = On
safe_mode = Off
register_globals = Off
allow_url_fopen = On
allow_url_include = Off
upload_max_filesize = 20M
display_errors = On
error_reporting = E_ALL ^ E_NOTICE ^ E_DEPRECATED
asp_tags = Off
variables_order = EGPCS

output_handler = mb_output_handler
$this->redirect();が使えなかったので設定しました。

apc.enabled = 1
php5.3の場合は設定します。

CakePHP2.x core.php

Configure::write(‘debug’, 0);
一瞬だけ3にしてから0に戻してください。
0と3ではパフォーマンスに影響するので必ず0に戻すようにしてください。
0 = 運用モード
1 = エラーと警告
2 = エラーと警告、SQL
3 = エラーと警告、SQL、コントローラのdumpを表示

Configure::write(‘Cache.disable’, true);
サイト全体のキャッシュを無効にする。

これだけで基本動いてくれます。

php.ini my.ini設定

ここでは私がよくやるphp.iniとmy.iniの設定についてまとめています。

xampp

php.ini

error_reporting = E_ALL & ~E_STRICT
  
memory_limit =1000M
post_max_size =1000M
upload_max_filesize =1000M
  
mbstring.internal_encoding = UTF-8
mbstring.http_output = UTF-8
mbstring.encoding_translation = On
  
zend_extension = "D:\xampp\php\ext\php_xdebug.dll"
xdebug.remote_enable = 1
  
date.timezone = Asia/Tokyo

my.ini

[mysqld]
character-set-server = utf8
collation-server = utf8_general_ci
init-connect = SET NAMES utf8
#default-character-set = utf8
  
[mysqldump]
default-character-set = utf8
  
[mysql]
default-character-set = utf8

文字コードはUTF-8でデバッグにはXdebugを使用しています。

box2d-jquery サイト崩壊

ここではbox2d-jqueryプラグインの紹介をしていきます。

デモはこちら
http://office-goto.info/demo/box2d/

ダウンロードはこちら
https://github.com/franzenzenhofer/box2d-jquery

head内で読み込み

<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="js/lib/jquery.box2d.min.js"></script>

jquery.box2d.min.jsを読み込んでください。

script

$(function(){
    $("h1, p, #box").box2d({'y-velocity':5});
});

ターゲットで指定するだけです。
要素が多いとかなり重たくなってしまうので注意が必要です。

ルパン三世風 jQuery

ここでは自作したlupin.jsの紹介です。

lupin

音声再生はjPlayerプラグインを使用しました。

jPlayerの実装はこちらで解説しています。
http://office-goto.info/javascript-jquery/jplayer/

デモはこちら
http://office-goto.info/demo/lupin/

lupin.js

$(document).ready(function(){
    $("#player").jPlayer({
        ready: function () {
            $(this).jPlayer("setMedia", {
                mp3: "js/type.mp3"
            });
        },swfPath: "js"
    });

    $('.box').hide();
    $('.box_after').hide();
});

var timer;      // タイマーオブジェクト
var title;      // タイトル
var arrTitle;   // タイトル配列
var i = 0;      // カウント
var length = 0; // 最大カウント

function lupinAction(str) {
    $('.box').show();
    $('a').hide();
    $('h2').hide();
    title = str;
    arrTitle = str.split('');
    length = arrTitle.length;
    timer = setInterval("lstart()", 300);
}
function lstart(){
    $("#player").jPlayer('stop');
    $("#player").jPlayer('setMedia', {
        mp3: "js/type.mp3"
    }).jPlayer('play');
    $('.box').text(arrTitle[i]);
    i++;
    if (length == i) {
        setTimeout(function(){
            $("#player").jPlayer('stop');
            $("#player").jPlayer('setMedia', {
                mp3: "js/title.mp3"
            }).jPlayer('play');
            clearInterval(timer);
            $('.box_after').show();
            $('.box_after').html('<p>' + title + '</p>');
            setTimeout(function(){
                $('a').show();
                $('h2').show();
                $('.box').hide();
                $('.box').empty();
                $('.box_after').hide();
                $('p').remove();
                i = 0;
                length = 0;
                arrTitle = null;
                title = null;
            },4000);
        },300);
    }
}

lupin.css

#lupin .box{
    position: absolute;
    width:500px;
    height:440px;
    margin-left:-250px;
    margin-top:-220px;
    top: 50%;
    left: 50%;
    background-color:#000;
    font-size: 430px;
    font-family: MS 明朝;
    color:#fff;
    text-align: center;
    line-height: 440px;
}
#lupin .box_after{
    position: absolute;
    width:500px;
    height:440px;
    margin-left:-250px;
    margin-top:-220px;
    top: 50%;
    left: 50%;
    background-color:#000;
}
#lupin p {
    width:500px;
    height:440px;
    display: table-cell;
    vertical-align:middle;
    text-align:center;
    font-size: 60px;
    font-family: MS 明朝;
    color:#fff;
}

html

<div id="lupin">
<ul>
<li><a href="" onclick="lupinAction('ルパン三世颯爽登場'); return false;">ルパン三世颯爽登場</a></li>
<li><a href="" onclick="lupinAction('死んでゆくブルース'); return false;">死んでゆくブルース</a></li>
<li><a href="" onclick="lupinAction('シッパイ大作戦'); return false;">シッパイ大作戦</a></li>
<li><a href="" onclick="lupinAction('集まれ奇人ども'); return false;">集まれ奇人ども</a></li>
<li><a href="" onclick="lupinAction('ルパンの法則'); return false;">ルパンの法則</a></li>
<li><a href="" onclick="lupinAction('盗っ人ゲーム'); return false;">盗っ人ゲーム</a></li>
<li><a href="" onclick="lupinAction('ストレート・フラッシュ'); return false;">ストレート・フラッシュ</a></li>
<li><a href="" onclick="lupinAction('イヌも歩けばルパンにあたる'); return false;">イヌも歩けばルパンにあたる</a></li>
<li><a href="" onclick="lupinAction('さらば愛しきルパン!'); return false;">さらば愛しきルパン!</a></li>
<li><a href="" onclick="lupinAction('バカボン一家がサヨウナラ'); return false;">バカボン一家がサヨウナラ</a></li>
</ul>
<div class="box"></div>
<div class="box_after"></div>
<div id="player"></div>
</div>