@blog.justoneplanet.info

日々勉強

PHPとGDで画像テキストを出力する

こんな感じ。

$width  = 300;// px
$height = 40;// px
$text   = 'This is a sample.';// string
$font   = /usr/share/fonts/bitstream-vera/ACaslonPro-Bold.otf';// path

$im              = imagecreatetruecolor($width, $height);
$color           = imagecolorallocate($im, 0, 0, 0);
$backgroundColor = imagecolorallocate($im, 255, 255, 255);
imagefilledrectangle($im, 0, 0, 299, 99, $backgroundColor);
imagettftext($im, 14, 0, 14, 20, $color, $font, $text);

header('Content-type: image/png');
imagepng($im);
imagedestroy($im);

さくっと。

ファイル名とか使って上手くキャッシュできそうだ=3

Zend_Viewを触ってみる

$this->_viewで色々設定できるらしー。

■パスの指定

class IndexController extends Zend_Controller_Action
{
    public function init()
    {
        $this->_session    = new Zend_Session_Namespace('global');
        $this->view->module     = $this->_getParam('module');
        $this->view->controller = $this->_getParam('controller');
        $this->view->action     = $this->_getParam('action');
    }
    
    public function indexAction()
    {
        // view 関連のディレクトリのパス(helpers,filters,scriptsが含まれる)
        $this->view->setBasePath('../views');
        // filters関連のディレクトリのパス
        $this->view->setFilterPath('../views/filters');
        // helpers関連のディレクトリのパス
        $this->view->setHelperPath('../views/helpers');
        // scripts関連のディレクトリのパス
        $this->view->setScriptPath('../views/scripts');
        // view 関連のディレクトリのパス(helpers,filters,scriptsが含まれる)
        $this->view->addBasePath('../views');
        // filters関連のディレクトリのパス
        $this->view->addFilterPath('../views/filters');
        // helpers関連のディレクトリのパス
        $this->view->addHelperPath('../views/helpers');
        // scripts関連のディレクトリのパス
        $this->view->addScriptPath('../views/scripts');
        $this->view->title = 'ページのタイトル';
    }
}

■エンコードとエスケープ

ガラパゴス携帯だからsjisとか。

class IndexController extends Zend_Controller_Action
{
    public function init()
    {
        $this->_session    = new Zend_Session_Namespace('global');
        $this->view->module     = $this->_getParam('module');
        $this->view->controller = $this->_getParam('controller');
        $this->view->action     = $this->_getParam('action');
    }
    
    public function indexAction()
    {
        $this->view->encoding('Shift_JIS');// 文字コードを指定
        $this->view->escape('htmlentities');// escapeで使う関数を指定
        $this->view->title = 'ページのタイトル';
    }
}

■フィルタ

class IndexController extends Zend_Controller_Action
{
    public function init()
    {
        $this->_session    = new Zend_Session_Namespace('global');
        $this->view->module     = $this->_getParam('module');
        $this->view->controller = $this->_getParam('controller');
        $this->view->action     = $this->_getParam('action');
    }
    
    public function indexAction()
    {
        $this->view->setFilter('hogeFilter');
        $this->view->title = 'ページのタイトル';
    }
}

views/filters配下に設置。

class Zend_Filter_HogeFilter extends Zend_Filter
{
    public function filter($value)
    {
        $value = preg_replace('/<p>/', '<p><i>', $value);
        return $value;
    }
}

■ヘルパー

よく使われる要素のビューヘルパはZend Frameworkで標準的に準備されてるらしー。

フォーム

第三引数でフォームの内容を指定できる。falseを指定すると開始タグしか出力されない。

<?php
echo $this->form(
    'form',
    array(
        'action' => '/index/register',
        'method' => 'post'
    ),
    $this->formText('dateTime', '', array('size' => '30')) .
    $this->formSubmit('', $this->translate('submit'))
);
?>

URL

有用性が良く分からん。

<?php
echo $this->url(array(
    'controller' => 'Index',
    'action'     => 'index'
));
?>

svgをやりたいからRaphaëlを使ってみる

実践あるのみ。o(^O^*=*^O^)oでも面倒だからjQueryを使用する。

■円を描く

JavaScript

$(function(){
    // 描画エリアをidで指定
    var paper = Raphael("notepad", 320, 50);
    // 円を描く
    var circle = paper.circle(20, 20, 10);
});

HTML

<div id="notepad"></div>

サンプル

おー。できた(*^-^)

■パスを描く

JavaScript

$(function(){
    // 描画エリアをidで指定
    var paper = Raphael("notepad", 320, 200);
    // パスを描く
    var path = paper.path("M25 25L20 65L25 105L65 110L105 105L110 65L105 25L75 20L45 25L40 55L45 85L65 90L85 85L90 65L85 45L75 40L65 45L60 55L65 65");
});

サンプル

ふむふむ。分かってきた。パスの書き方を見てみると相対的でも座標を指定できるらしい。

■文字を描く

JavaScript

$(function(){
    // 描画エリアをidで指定
    var paper = Raphael("notepad", 320, 30);
    // 文字を描く
    var string = paper.text (90, 10, "なめらかなベクターグラフィックス。\nSVGです。");
});

サンプル

おー。どうやらセンタリングされるらしいな★

■ドラッグ&ドロップしてみる

JavaScript

$(function(){
    var paper = Raphael("notepad", 500, 100);
    var circle = paper.circle(50, 40, 10);
    circle.attr("fill", "#55ccff");
    circle.attr("stroke", "#55ccff");
    circle.drag(
        function(dx, dy){// move
            this.attr({
                "cx" : this.ox + dx,
                "cy" : this.oy + dy
            });
        },
        function(){// start
            this.ox = this.attr("cx");
            this.oy = this.attr("cy");
            this.attr({"opacity" : 0.5});
        },
        function(){// end
            this.attr({"opacity" : 1});
        }
    );
});

サンプル

おー。キター(゜∀゜)

■DOM

DOMが取り出せるらしいぞ!

JavaScript

$(function(){
    var paper = Raphael("notepad", 320, 50);
    var circle = paper.circle(20, 20, 10);
    circle.attr('fill', 'blue');
    circle.node.onclick = function(){
        alert('hello!');
    }
});

サンプル

jQueryと組み合わせは・・・

$(function(){
    var paper = Raphael("notepad", 320, 50);
    var circle = paper.circle(20, 20, 10);
    circle.attr('fill', 'blue');
    $(circle.node).click(function(){
        alert('hello!');
    });
});

サンプル

むはっ★

$(function(){
    var paper = Raphael("notepad", 320, 50);
    var circle = paper.circle(20, 20, 10);
    circle.attr('fill', 'blue');
    $(circle.node).click(function(){
        circle.hide();
    });
});

サンプル

■参考

Raphael Reference

html5を使う準備をする

■準備

DOCTYPE宣言

以下のように記述する。

<!DOCTYPE html>

エンコード

以下のように記述する。

<meta charset="UTF-8" />

もしくは以下のように記述する。

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

どっちかだけ書くように(o^-‘)b

■時代遅れのブラウザで使う準備

block要素として認識してほしいものをcssで指定。

section,
header,
footer,
nav,
aside,
article,
address,
figure,
hgroup,
menu {
    display: block;
}
[hidden],
menu[type="context"],
command,
datalist,
rp,
source {
    display: none;
}

IE6~8

面倒なので以下のスクリプトを書いて終わりにする。m(。・ε・。)m

<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

中身が気になる。「(゚ペ)

// html5shiv MIT @rem remysharp.com/html5-enabling-script
// iepp v1.5.1 MIT @jon_neal iecss.com/print-protector
(function (p, e)
{
    var q = e.createElement("div");
    q.innerHTML = "<z>i</z>";
    q.childNodes.length !== 1 && function ()
    {
        function r(a, b)
        {
            if (g[a]) {
                g[a].styleSheet.cssText += b;
            }
            else {
                var c = s[l], d = e[j]("style");
                d.media = a;
                c.insertBefore(d, c[l]);
                g[a] = d;
                r(a, b)
            }
        }
        function t(a, b)
        {
            for (var c = new RegExp("\\b(" + m + ")\\b(?!.*[;}])", "gi"), d = function (k)
            {
                return ".iepp_" + k;
            },
            h =- 1;
            ++h < a.length;
            ) {
                b = a[h].media || b;
                t(a[h].imports, b);
                r(b, a[h].cssText.replace(c, d))
            }
        }
        for (var s = e.documentElement, i = e.createDocumentFragment(), g = {}, m = "abbr article aside audio canvas details figcaption figure footer header hgroup mark meter nav output progress section summary time video".replace(/ /g, 
        '|'), n = m.split("|"), f = [], o =- 1, l = "firstChild", j = "createElement";
        ++o < n.length;
        ) {
            e[j](n[o]);
            i[j](n[o])
        }
        i = i.appendChild(e[j]("div"));
        p.attachEvent("onbeforeprint", function ()
        {
            for (var a, b = e.getElementsByTagName("*"), c, d, h = new RegExp("^" + m + "$", "i"), k =- 1; ++k < b.length; )
            {
                if ((a = b[k]) && (d = a.nodeName.match(h))) 
                {
                    c = new RegExp("^\\s*<" + d + "(.*)\\/" + d + ">\\s*$", "i");
                    i.innerHTML = a.outerHTML.replace(/\r|\n/g, " ").replace(c, a.currentStyle.display == "block" ? "<div$1/div>" : "<span$1/span>");
                    c = i.childNodes[0];
                    c.className += " iepp_" + d;
                    c = f[f.length] = [a, c];
                    a.parentNode.replaceChild(c[1], c[0]) 
                }
                t(e.styleSheets, "all");
            }
        });
        p.attachEvent("onafterprint", function ()
        {
            for (var a =- 1, b; ++a < f.length; ) {
                f[a][1].parentNode.replaceChild(f[a][0], f[a][1]);
            }
            for (b in g) {
                s[l].removeChild(g[b]);
            }
            g = {};
            f = [];
        })
    }
    ()
})(this, document);

古いIEって大変だね。ヾ(・・;)

■その他

  • タグは省略できるが、個人的にはチャント書く。
  • 場合によっては無くても良いが、個人的に属性値はチャント”で括る。

バリデート

こいつを使う。o(^o^)o

新要素

ほんの一部をピックアップ。

section 文章のアウトライン
header セクションのヘッダー
footer セクションのフッター
nav 外側のセクションに対するナビゲーション
aside 外側のセクションに対する補足情報
article セクションみたいな感じで、独立したコンテンツ
hgroup h1~h6をまとめる
menu コマンドのリスト
figure キャプションとセットの要素を埋め込む際に使用
video 動画
audio 音声
source videoやaudioで使う
canvas キャンバス

wgetでhttpheader

コンナ感じ。

wget --referer="http://www.google.com" --user-agent="Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.1.6) Gecko/20070725 Firefox/2.0.0.6"

以上。

mysqldumpする

■mysqldump

mysqldump --no-autocommit -u root -p dbname > db.dump
scp -r ./db.dump user@123.123.123.123:/home/db.dump

123.123.123.123

cd /home
mysql -u root -p --default-character-set=utf8 < db.dump

50MBくらいなら10秒で終わる。ちなみにWHEREで条件を絞ってエクスポートする場合は以下のようにする。

echo "SET NAMES utf8;SELECT * FROM table WHERE hoge = 'fuga'” | mysql -u user -p dbname > /home/piyo.txt;

INTO OUTFILEは権限が必要なので実行できない場合も多々ある。

■バックアップ

以下のようにすることでmysqldumpを利用して定期的にデータベースをbackupできる。

#!/bin/sh
TDAY=`date +%Y%m%d`
cd /var/www/hogehoge.justoneplanet.info/app/vendors/shells
mysqldump --no-autocommit -u root --password=hogehoge dbname > $TDAY.dump

crontab

以下のように記述することで、毎日1:15にバックアップが実行される。

15 1 * * * /var/www/hogehoge.justoneplanet.info/app/vendors/shells/backup.sh