2015年4月 – ページ 3 – 端くれプログラマの備忘録

[Vagrant] Pythonをインストールする (CentOS 6.5)

2015年4月10日2015年8月21日 @84kure

CentOS 6.5のディストリビューションに同梱されてた。

$ python --version
Python 2.6.6

1 2	$ python --version Python 2.6.6

公式サイトを見ると2.xと3.xがあって、2.xの最新版は2.7.9らしい。

Download Python | Python.org
https://www.python.org/downloads/

[Vagrant] MySQLをインストールする (CentOS 6.5)

2015年4月9日2015年8月21日 @84kure

標準リポジトリのバージョンをチェック。

$ yum info mysql-server
Available Packages
Name : mysql-server
Arch : x86_64
Version : 5.1.73
Release : 3.el6_5
Size : 8.6 M
Repo : base
...

$ yum info mysql-server

Available Packages

Name : mysql-server

Arch : x86_64

Version : 5.1.73

Release : 3.el6_5

Size : 8.6 M

Repo : base

...

remiリポジトリのバージョンをチェック。

$ yum info --enablerepo=remi mysql-server
Available Packages
Name : mysql-server
Arch : x86_64
Version : 5.5.42
Release : 1.el6.remi
Size : 10 M
Repo : remi
...

$ yum info --enablerepo=remi mysql-server

Available Packages

Name : mysql-server

Arch : x86_64

Version : 5.5.42

Release : 1.el6.remi

Size : 10 M

Repo : remi

...

MySQLをインストール

remiリポジトリからインストール。

$ sudo yum --enablerepo=remi install -y mysql-server

1	$ sudo yum --enablerepo=remi install -y mysql-server

設定。

$ sudo vi /etc/my.cnf
[mysqld]
character_set_server=utf8　#追加
default_storage_engine=InnoDB　#追加
innodb_file_per_table　#追加

#以下追加
[mysql]
default_character_set=utf8
[mysqldump]
default_character_set=utf8

$ sudo vi /etc/my.cnf

[mysqld]

character_set_server=utf8　#追加

default_storage_engine=InnoDB　#追加

innodb_file_per_table　#追加

#以下追加

[mysql]

default_character_set=utf8

[mysqldump]

default_character_set=utf8

起動。

$ sudo service mysqld start
$ sudo chkconfig mysqld on

1 2	$ sudo service mysqld start $ sudo chkconfig mysqld on

初期設定。

$ sudo /usr/bin/mysql_secure_installation
Enter current password for root (enter for none):
Set root password? [Y/n]
New password: 
Re-enter new password:
Remove anonymous users? [Y/n]
Disallow root login remotely? [Y/n]
Remove test database and access to it? [Y/n]
Reload privilege tables now? [Y/n]

$ sudo /usr/bin/mysql_secure_installation

Enter current password for root (enter for none):

Set root password? [Y/n]

New password:

Re-enter new password:

Remove anonymous users? [Y/n]

Disallow root login remotely? [Y/n]

Remove test database and access to it? [Y/n]

Reload privilege tables now? [Y/n]

確認。

$ mysql -u root -p
Enter password: 
mysql> exit

$ mysql -u root -p

Enter password:

mysql> exit

[Vagrant] PHPをインストールする (CentOS 6.5)

2015年4月8日2015年8月21日 @84kure

標準リポジトリのphpのバージョンをチェックする。

$ yum info php
Available Packages
Name : php
Arch : x86_64
Version : 5.3.3
Release : 40.el6_6
Size : 1.1 M
Repo : updates
...

$ yum info php

Available Packages

Name : php

Arch : x86_64

Version : 5.3.3

Release : 40.el6_6

Size : 1.1 M

Repo : updates

...

公式サイトの最新版は5.6.7らしい。

PHP: Hypertext Preprocessor
http://php.net/

標準リポジトリのphpはちょっと古いね。remiリポジトリのバージョンをチェックする。

$ yum info --enablerepo=remi php
Available Packages
Name : php
Arch : x86_64
Version : 5.4.39
Release : 1.el6.remi
Size : 2.7 M
Repo : remi
...

$ yum info --enablerepo=remi php

Available Packages

Name : php

Arch : x86_64

Version : 5.4.39

Release : 1.el6.remi

Size : 2.7 M

Repo : remi

...

標準リポジトリ(5.3.3)より新しい5.4.39があった。remiリポジトリからインストールしよう。

$ sudo yum --enablerepo=remi install -y php php-devel php-mysql php-mbstring php-gd

1	$ sudo yum --enablerepo=remi install -y php php-devel php-mysql php-mbstring php-gd

設定。

$ sudo vi /etc/php.ini
error_log = /var/log/php.log
mbstring.language = Japanese
mbstring.internal_encoding = UTF-8
mbstring.http_input = auto
mbstring.detect_order = auto
expose_php = Off
date.timezone = America/Los_Angeles

$ sudo vi /etc/php.ini

error_log = /var/log/php.log

mbstring.language = Japanese

mbstring.internal_encoding = UTF-8

mbstring.http_input = auto

mbstring.detect_order = auto

expose_php = Off

date.timezone = America/Los_Angeles

Apacheを再起動。

$ sudo service httpd restart

1	$ sudo service httpd restart

確認。

$ php -v
PHP 5.4.39 (cli) (built: Mar 19 2015 06:59:35)
Copyright (c) 1997-2014 The PHP Group
Zend Engine v2.4.0, Copyright (c) 1998-2014 Zend Technologies
$ sudo vi /var/www/html/test.php
<html>
<body><?php phpinfo(); ?></body>
</html>

$ php -v

PHP 5.4.39 (cli) (built: Mar 19 2015 06:59:35)

$ sudo vi /var/www/html/test.php

<html>

</html>

試しにホストOSのブラウザからアクセス。

http://192.168.33.10/test.php

1	http://192.168.33.10/test.php

[Vagrant] yumに外部リポジトリ(epel & remi)を追加する

2015年4月7日2015年8月21日 @84kure

remiを入れるにはepelが入っていないといけないので、まずはepelを入れる。

epel-releaseは標準リポジトリにある。

$ yum info epel-release
Available Packages
Name : epel-release
Arch : noarch
Version : 6
Release : 8
Size : 14 k
Repo : extras
Summary : Extra Packages for Enterprise Linux repository configuration
URL : http://dl.fedoraproject.org/pub/epel/
License : GPLv2
Description : This package contains the Extra Packages for Enterprise Linux (EPEL) repository
 : GPG key as well as configuration for yum and up2date.

$ yum info epel-release

Available Packages

Name : epel-release

Arch : noarch

Version : 6

Release : 8

Size : 14 k

Repo : extras

Summary : Extra Packages for Enterprise Linux repository configuration

URL : http://dl.fedoraproject.org/pub/epel/

License : GPLv2

Description : This package contains the Extra Packages for Enterprise Linux (EPEL) repository

: GPG key as well as configuration for yum and up2date.

インストールする。

$ sudo yum install epel-release

1	$ sudo yum install epel-release

Remiは公式サイトからインストールする。

Les RPM de Remi
http://rpms.famillecollet.com/

$ wget http://rpms.famillecollet.com/enterprise/remi-release-6.rpm
$ sudo rpm -Uvh remi-release-6.rpm

1 2	$ wget http://rpms.famillecollet.com/enterprise/remi-release-6.rpm $ sudo rpm -Uvh remi-release-6.rpm

外部リポジトリは必要なときに明示的に有効にしたい。epelはデフォルトで有効になっているので、設定変更しておこう。

$ sudo vi /etc/yum.repos.d/epel.repo
[epel]
;enabled=1
enabled=0 ←変更

$ sudo vi /etc/yum.repos.d/epel.repo

[epel]

;enabled=1

enabled=0 ←変更

remiはデフォルトで無効になっているので何もしなくて良い。

$ sudo vi /etc/yum.repos.d/remi.repo
[remi]
enabled=0

$ sudo vi /etc/yum.repos.d/remi.repo

[remi]

enabled=0

これでOK。必要なときはyumのオプションに –enablerepo=remi　を付けてやればよい。

[Vagrant] Apacheをインストールする (CentOS 6.5)

2015年4月6日2015年11月6日 @84kure

VagrantでCentOS 6.5の仮想環境を作ってApacheを走らせる。

仮想環境の作成

> vagrant box add chef/centos-6.5
> cd C:\Temp
> mkdir centos6.5
> cd centos6.5
> vagrant init chef/centos-6.5

> vagrant box add chef/centos-6.5

> cd C:\Temp

> mkdir centos6.5

> cd centos6.5

> vagrant init chef/centos-6.5

Vagrantfileを編集してプライベートネットワークを有効化。

# Create a private network, which allows host-only access to the machine
 # using a specific IP.
config.vm.network "private_network", ip: "192.168.33.10"

# Create a private network, which allows host-only access to the machine

# using a specific IP.

config.vm.network "private_network", ip: "192.168.33.10"

> vagrant up

1	> vagrant up

CentOSの初期設定

パッケージのアップデート。

$ sudo yum update -y

1	$ sudo yum update -y

外向きでは無いのでファイヤーウォールが動いていたら停めておく。

$ sudo service iptables stop
$ sudo chkconfig iptables off

1 2	$ sudo service iptables stop $ sudo chkconfig iptables off

Apacheのインストール

念のためインストールされているか確認。

$ yum list installed | grep httpd

1	$ yum list installed \| grep httpd

インストール。

$ sudo yum install -y httpd

1	$ sudo yum install -y httpd

起動。

$ sudo service httpd start
$ sudo chkconfig httpd on

1 2	$ sudo service httpd start $ sudo chkconfig httpd on

テストページを作成。

$ sudo vi /var/www/html/index.html
---
<html>
<body>test123</boxy>
</html>
---

$ sudo vi /var/www/html/index.html

---

<html>

</html>

---

必要に応じてホームディレクトリのオーナーを変更しておく。

$ sudo chown -R vagrant:vagrant /var/www/html

1	$ sudo chown -R vagrant:vagrant /var/www/html

試しにホストOSのブラウザからアクセス。

http://192.168.33.10/

1	http://192.168.33.10/

試しにホストOSのFTPクライアントからアクセス。

Host: 192.168.33.10
Username: vagrant
Password: vagrant

Host: 192.168.33.10

Username: vagrant

Password: vagrant

[jQuery] プラグイン内に関数を定義する

2015年4月5日2015年8月21日 @84kure

サンプルコード

jquery.showsize.js

;(function($) {
    $.fn.showsize = function(options) {
        console.log(this);
        var elements = this;
        elements.each (function() {
            var opts = $.extend({}, $.fn.showsize.defaults, options, $(this).data());
            $(this).click(function() {
                var msg = $(this).width() + 'x' + $(this).height();
                var color = getRandomColor();
                $(this).wrap('<div style="position:relative;"></div>');
                var div = $('<div>').text(msg).css('position','absolute').css('top',0)
                    .css('padding','2px').css('background','black').css('color',color)
                    .css('font-size',opts.size).css('opacity',opts.opacity);
                $(this).after(div);
            });
        });
        return this;
    };
    $.fn.showsize.defaults = {
        size: 10,
        opacity: 0.9,
    };
　　 // プラグイン内関数
    function getRandomColor() {
        var colors = ['white','pink','orange','green'];
        return colors[Math.floor(Math.random() * colors.length)];
    };
})(jQuery);

;(function($) {

$.fn.showsize = function(options) {

console.log(this);

var elements = this;

elements.each (function() {

var opts = $.extend({}, $.fn.showsize.defaults, options, $(this).data());

$(this).click(function() {

var msg = $(this).width() + 'x' + $(this).height();

var color = getRandomColor();

$(this).wrap('<div style="position:relative;"></div>');

var div = $('<div>').text(msg).css('position','absolute').css('top',0)

.css('padding','2px').css('background','black').css('color',color)

.css('font-size',opts.size).css('opacity',opts.opacity);

$(this).after(div);

});

return this;

};

$.fn.showsize.defaults = {

size: 10,

opacity: 0.9,

};

　　 // プラグイン内関数

function getRandomColor() {

var colors = ['white','pink','orange','green'];

return colors[Math.floor(Math.random() * colors.length)];

};

})(jQuery);

[jQuery] プラグインでカスタムデータ属性を使う

2015年4月4日2015年8月21日 @84kure

サンプルコード

要素ごとに異なるオプションを指定するためにカスタムデータ属性を使う。

<p><img src="sample.jpg" data-size="20"></p>
<p><img src="sample.jpg"></p>
<p><img src="sample.jpg" data-size="30"></p>
<script src="js/jquery.showsize.js"></script>

$('img').showsize();

1	$('img').showsize();

jquery.showsize.js

;(function($) {
    $.fn.showsize = function(options) {
        console.log(this);
        var elements = this;
        elements.each (function() {
            var opts = $.extend({}, $.fn.showsize.defaults, options, $(this).data());
           $(this).click(function() {
                var msg = $(this).width() + 'x' + $(this).height();
                $(this).wrap('<div style="position:relative;"></div>');
                var div = $('<div>').text(msg).css('position','absolute').css('top',0)
                    .css('padding','2px').css('background','black').css('color','white')
                    .css('font-size',opts.size).css('opacity',opts.opacity);
                $(this).after(div);
            });
        });
        return this;
    };
    $.fn.showsize.defaults = {
        size: 10,
        opacity: 0.9,
    };
})(jQuery);

;(function($) {

$.fn.showsize = function(options) {

console.log(this);

var elements = this;

elements.each (function() {

var opts = $.extend({}, $.fn.showsize.defaults, options, $(this).data());

$(this).click(function() {

var msg = $(this).width() + 'x' + $(this).height();

$(this).wrap('<div style="position:relative;"></div>');

var div = $('<div>').text(msg).css('position','absolute').css('top',0)

.css('padding','2px').css('background','black').css('color','white')

.css('font-size',opts.size).css('opacity',opts.opacity);

$(this).after(div);

});

return this;

};

$.fn.showsize.defaults = {

size: 10,

opacity: 0.9,

};

})(jQuery);

[jQuery] プラグインにオプションを追加する

2015年4月3日2015年8月21日 @84kure

サンプルコード

<p><img src="sample.jpg"></p>
<script src="js/jquery.showsize.js"></script>

1 2	<p><img src="sample.jpg"></p> <script src="js/jquery.showsize.js"></script>

$('img').showsize({
    size: 20,
    opacity: 0.5,
});

$('img').showsize({

size: 20,

opacity: 0.5,

});

jquery.showsize.js

;(function($) {
    $.fn.showsize = function(options) {
        console.log(this);
        var elements = this;
        elements.each (function() {
            var opts = $.extend({}, $.fn.showsize.defaults, options);
            // $.extend(空オブジェクト,デフォルト値,設定値)
            // 空オブジェクトにオプションがセットされる
            $(this).click(function() {
                var msg = $(this).width() + 'x' + $(this).height();
                $(this).wrap('<div style="position:relative;"></div>');
                var div = $('<div>').text(msg).css('position','absolute').css('top',0)
                    .css('padding','2px').css('background','black').css('color','white')
                    .css('font-size',opts.size).css('opacity',opts.opacity);
                $(this).after(div);
            });
        });
        return this;
    };
    $.fn.showsize.defaults = {
        size: 10,
        opacity: 0.9,
    };
})(jQuery);

;(function($) {

$.fn.showsize = function(options) {

console.log(this);

var elements = this;

elements.each (function() {

var opts = $.extend({}, $.fn.showsize.defaults, options);

// $.extend(空オブジェクト,デフォルト値,設定値)

// 空オブジェクトにオプションがセットされる

$(this).click(function() {

var msg = $(this).width() + 'x' + $(this).height();

$(this).wrap('<div style="position:relative;"></div>');

var div = $('<div>').text(msg).css('position','absolute').css('top',0)

.css('padding','2px').css('background','black').css('color','white')

.css('font-size',opts.size).css('opacity',opts.opacity);

$(this).after(div);

});

return this;

};

$.fn.showsize.defaults = {

size: 10,

opacity: 0.9,

};

})(jQuery);

[jQuery] 機能をプラグイン化する

2015年4月2日2015年8月21日 @84kure

サンプルコード

画像をクリックすると、画像の右上にサイズを表示する例題。

<p><img src="sample.jpg"></p>

1	<p><img src="sample.jpg"></p>

<script>
$(function() {
    $('img').click(function() {
        var msg = $(this).width() + 'x' + $(this).height();
        $(this).wrap('<div style="position:relative;"></div>');
        var div = $('<div>').text(msg).css('position','absolute').css('top',0)
            .css('padding','2px').css('background','black').css('color','white')
            .css('font-size','10px').css('opacity','0.9');
        $(this).after(div);
    });
});
</script>

$(function() {

$('img').click(function() {

var msg = $(this).width() + 'x' + $(this).height();

$(this).wrap('<div style="position:relative;"></div>');

var div = $('<div>').text(msg).css('position','absolute').css('top',0)

.css('padding','2px').css('background','black').css('color','white')

.css('font-size','10px').css('opacity','0.9');

$(this).after(div);

});

</script>

この機能をプラグイン化する。

<p><img src="sample.jpg"></p>
<script src="js/jquery.showsize.js"></script>

1 2	<p><img src="sample.jpg"></p> <script src="js/jquery.showsize.js"></script>

$('img').showsize();

1	$('img').showsize();

jquery.showsize.js

// このJSの前に読み込んだライブラリにセミコロンが抜けていた場合に
// 備えて先頭にセミコロンをつけておく (予防的処置)
;(function($) {
    $.fn.showsize = function() {
        console.log(this);
        var elements = this;
        elements.each (function() {
            $(this).click(function() {
                var msg = $(this).width() + 'x' + $(this).height();
                $(this).wrap('<div style="position:relative;"></div>');
                var div = $('<div>').text(msg).css('position','absolute').css('top',0)
                    .css('padding','2px').css('background','black').css('color','white')
                    .css('font-size','10px').css('opacity','0.9');
                $(this).after(div);
            });
        });
        return this; //メソッドチェインのために必要
    };
})(jQuery);

// このJSの前に読み込んだライブラリにセミコロンが抜けていた場合に

// 備えて先頭にセミコロンをつけておく (予防的処置)

;(function($) {

$.fn.showsize = function() {

console.log(this);

var elements = this;

elements.each (function() {

$(this).click(function() {

var msg = $(this).width() + 'x' + $(this).height();

$(this).wrap('<div style="position:relative;"></div>');

var div = $('<div>').text(msg).css('position','absolute').css('top',0)

.css('padding','2px').css('background','black').css('color','white')

.css('font-size','10px').css('opacity','0.9');

$(this).after(div);

});

return this; //メソッドチェインのために必要

};

})(jQuery);

[jQuery UI] 基本メモ: Effects

2015年4月1日2015年8月21日 @84kure

サンプルコード

<div id="box" style="width:100px; height:100px; background:green;">box</div>

1	<div id="box" style="width:100px; height:100px; background:green;">box</div>

$('#box').click(function() {
    $(this).effect('explode');
})

$('#box').click(function() {

$(this).effect('explode');

})

参考サイト

Effect | jQuery UI
https://jqueryui.com/effect/

端くれプログラマの備忘録

月: 2015年4月

[Vagrant] Pythonをインストールする (CentOS 6.5)

最新版にアップデート

[Vagrant] MySQLをインストールする (CentOS 6.5)

MySQLをインストール

[Vagrant] PHPをインストールする (CentOS 6.5)

[Vagrant] yumに外部リポジトリ(epel & remi)を追加する

[Vagrant] Apacheをインストールする (CentOS 6.5)

仮想環境の作成

CentOSの初期設定

Apacheのインストール

[jQuery] プラグイン内に関数を定義する

サンプルコード

[jQuery] プラグインでカスタムデータ属性を使う

サンプルコード

[jQuery] プラグインにオプションを追加する

サンプルコード

[jQuery] 機能をプラグイン化する

サンプルコード

[jQuery UI] 基本メモ: Effects

サンプルコード

参考サイト