端くれプログラマの備忘録 – ページ 88 – 最近はウェブ系アプリ中心、あとWindowsアプリちょっと

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

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

$ ruby -v
-bash: ruby: command not found

1 2	$ ruby -v -bash: ruby: command not found

必要なパッケージをインストール

$ sudo yum install -y gcc gcc-c++ make git
$ sudo yum install -y zlib zlib-devel
$ sudo yum install -y openssl openssl-devel
$ sudo yum install -y patch
$ sudo yum install -y readline readline-devel
$ sudo yum install -y sqlite-devel
$ sudo yum install -y libffi-devel

$ sudo yum install -y gcc gcc-c++ make git

$ sudo yum install -y zlib zlib-devel

$ sudo yum install -y openssl openssl-devel

$ sudo yum install -y patch

$ sudo yum install -y readline readline-devel

$ sudo yum install -y sqlite-devel

$ sudo yum install -y libffi-devel

rbenvをインストール

$ git clone https://github.com/sstephenson/rbenv.git ~/.rbenv

1	$ git clone https://github.com/sstephenson/rbenv.git ~/.rbenv

環境変数の設定。

$ echo 'export PATH="$HOME/.rbenv/bin:$PATH"' >> ~/.bash_profile
$ echo 'eval "$(rbenv init -)"' >> ~/.bash_profile
$ exec $SHELL -l

$ echo 'export PATH="$HOME/.rbenv/bin:$PATH"' >> ~/.bash_profile

$ echo 'eval "$(rbenv init -)"' >> ~/.bash_profile

$ exec $SHELL -l

インストール確認。

$ rbenv
rbenv 0.4.0-146-g7ad01b2

1 2	$ rbenv rbenv 0.4.0-146-g7ad01b2

ruby_buildをインストール

$ git clone https://github.com/sstephenson/ruby-build.git ~/.rbenv/plugins/ruby_build
$ cd ~/.rbenv/plugins/ruby_build
$ sudo ./install.sh

$ git clone https://github.com/sstephenson/ruby-build.git ~/.rbenv/plugins/ruby_build

$ cd ~/.rbenv/plugins/ruby_build

$ sudo ./install.sh

Rubyをインストール

利用可能なバージョンをリスト。

$ rbenv install -l

1	$ rbenv install -l

現在の安定版2.2.1をインストール。

$ rbenv install -v 2.2.1
$ rbenv rehash
$ rbenv global 2.2.1
$ rbenv versions
* 2.2.1 (set by /home/vagrant/.rbenv/version)

$ rbenv install -v 2.2.1

$ rbenv rehash

$ rbenv global 2.2.1

$ rbenv versions

* 2.2.1 (set by /home/vagrant/.rbenv/version)

インストール確認。

$ ruby -v
ruby 2.2.1p85 (2015-02-26 revision 49769) [x86_64-linux]

1 2	$ ruby -v ruby 2.2.1p85 (2015-02-26 revision 49769) [x86_64-linux]

Railsをインストール

ドキュメント生成は省略。

$ gem install rails --no-ri --no-rdoc
$ rbenv rehash
$ rails -v
Rails 4.2.1

$ gem install rails --no-ri --no-rdoc

$ rbenv rehash

$ rails -v

Rails 4.2.1

テスト。

$ rails new test123
$ cd test123
$ rails server
=> Booting WEBrick
=> Rails 4.2.1 application starting in development on http://localhost:3000
=> Run `rails server -h` for more startup options
=> Ctrl-C to shutdown server
[2015-04-04 20:58:48] INFO WEBrick 1.3.1
[2015-04-04 20:58:48] INFO ruby 2.2.1 (2015-02-26) [x86_64-linux]
[2015-04-04 20:58:48] INFO WEBrick::HTTPServer#start: pid=415 port=3000

$ rails new test123

$ cd test123

$ rails server

=> Booting WEBrick

=> Rails 4.2.1 application starting in development on http://localhost:3000

=> Run `rails server -h` for more startup options

=> Ctrl-C to shutdown server

[2015-04-04 20:58:48] INFO WEBrick 1.3.1

[2015-04-04 20:58:48] INFO ruby 2.2.1 (2015-02-26) [x86_64-linux]

[2015-04-04 20:58:48] INFO WEBrick::HTTPServer#start: pid=415 port=3000

[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);

必要なパッケージをインストール

rbenvをインストール

ruby_buildをインストール

Railsをインストール

最新版にアップデート

MySQLをインストール

仮想環境の作成

CentOSの初期設定

Apacheのインストール

サンプルコード

サンプルコード

サンプルコード

サンプルコード