読者です 読者をやめる 読者になる 読者になる

WebEngine

web、プログラミング関係について書いていきます。あなたの優しい眼差しがブログの成長につながりますのでどうぞよろしく。

CSS3で光沢を表現する

HTML + CSS

ナビゲーションをつくる

今回は以下のナビゲーションにlinear-gradientを施す形で光沢を表現します。

f:id:web-engine:20161101150726p:plain

コードは以下の通り。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>DEMO</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>

<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Works</a></li>
    <li><a href="#">Links</a></li>
  </ul>
</nav>

</body>
</html>


body {
  margin: 0;
  padding: 0;
}

nav {
  background-color: #ddd;
}

nav ul {
  overflow: hidden;
  list-style: none;
}

nav li {
  float: left;
  width: 100px;
  border-right: #fff 1px solid;
  font-weight: 700;
}

nav li:first-child {
  border-left: #fff 1px solid;
}

nav a {
  display: block;
  text-decoration: none;
  text-align: center;
  background-color: #f36;
  padding: 10px 0;
  color: #fff;
}

nav a:hover {
  opacity: 0.7;
}


見てわかる人もいるかもしれませんが、前回の記事のコードをちょっと加工しただけです。

ナビゲーションに光沢を施してみる

CSSに以下の記述を追加します。

nav a {
  display: block;
  text-decoration: none;
  text-align: center;
  background-color: #f36;
  padding: 10px 0;
  color: #fff;

  /* ここから先を追記 */

  background: -webkit-linear-gradient(
    top,
    #ffced7 0%,
    #f74657 49%,
    #f10013 51%,
    #fe2951 100%
  );
  background: -ms-linear-gradient(
    top,
    #ffced7 0%,
    #f74657 49%,
    #f10013 51%,
    #fe2951 100%
  );
  background: linear-gradient(
    to bottom,
    #ffced7 0%,
    #f74657 49%,
    #f10013 51%,
    #fe2951 100%
  );

  /* ここまで追記 */

}


以下はGoogle chromeでの表示結果です。

f:id:web-engine:20161101150748p:plain

ベンダープレフィックスをつけているので、FireFoxとIE10以上でも表示されます。その 他のブラウザでは確認していません。
linear-gradientはIE9以下ではサポートされていません。F12ボタン(Windowsの場合)を 押して開発者ツールでブラウザのバージョンを下げれば、そのことがわかります。

linear-gradientの注意点

上記コードでlinear-gradientを施した際、ベンダープレフィックスつきの書式と、ついていない書式で違う部分が あります。(それ以外は同じということなのでコピペが有効)
topto bottomの部分ですね。今回のグラデーションの場合、上から下へのグラデーションと なっているわけですが、linear-gradientでは、プレフィックスつきの場合は起点の名前を、そうでない (ベンダープレフィックスではない)場合は、to ××で方向を指定します。

上記のナビは光沢にするため%なんかを使っていますが、基本形は下記のような感じになります。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>DEMO</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div id="grad_box"></div>
</body>
</html>


body {
  margin: 0;
  padding: 0;
}

#grad_box {
  width: 200px;
  height: 200px;
  background: #ddd;
  background: -webkit-linear-gradient(top, #ffced7, #fe2951);
  background: -ms-linear-gradient(top, #ffced7, #fe2951);
  background: linear-gradient(to bottom, #ffced7, #fe2951);
}


f:id:web-engine:20161101150803p:plain

現在ではフラットデザインが主流となっているので使用場面が限られますが、それでも覚えておいて損はないはずです。

よく使うdisplayプロパティまとめ

HTML + CSS

displayプロパティとは?

displayプロパティはCSS3において、要素の表示特性を操作するものです。たとえば、ブロック要素をインライン要素に 変更したり、その逆にしたりすることが可能です。(HTML5ではブロック要素やインライン要素といった分類は廃止されましたが説明 を簡単にするため省略します)

よく利用されるのがa要素のブロック化ですね。下記のコードはブロック化する前のリンクです。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>DEMO</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>

<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Works</a></li>
    <li><a href="#">Links</a></li>
  </ul>
</nav>

<body>
</html>


body {
  margin: 0;
  padding: 0;
}

nav {
  background-color: lightgreen;
}

nav ul {
  overflow: hidden;
  list-style: none;
}

nav li {
  float: left;
  width: 100px;
  border-right: #fff 1px solid;
}

nav li:first-child {
  border-left: #fff 1px solid;
}


f:id:web-engine:20161030193936p:plain

a要素がブロック化されていないと、このようにリンクとして作用するのは文字に触れているあいだだけになります。a要素がデフォルトでは display: inline;になっているからです。
この問題を解決するためにa要素にdisplay: block;を指定してみましょう。CSSに次のように追加します。

nav a {
  display: block;
  text-decoration: none;
  background-color: orange;
  padding: 10px 0;
}

nav a:hover {
  background-color: green;
}


f:id:web-engine:20161030193953p:plain

a要素がブロック化されていることを証明するためにオレンジ色を施しました。また、文字に触れていなくても、領域全体が クリック可能になっていることが緑色でわかるはずです。paddingで幅と高さが指定できるようになっているのも わかりますね。

ちなみに、ここではnavに直接CSS指定を指定していますが、実際はidclassで指定しましょう。

主要なもの

displayプロパティの種類は結構多いですが、とりあえず以下の4つが基本です。

  • block
    • float, position等を指定しない限りは配置された要素は自動改行され、上から下へ並ぶ
    • width, heightが指定可能
    • margin, paddingが指定可能
    • vertical-alignプロパティ指定不可


  • inline
    • br要素で改行されない限り、テキストと同じように横並びになる
    • width, heightが指定不可
    • 上下marginが指定不可
    • vertical-alignプロパティ指定可能


  • inline-block
    • 上記のinlineと同じく、横並びになる
    • width, heightが指定可能
    • margin, paddingが指定可能
    • vertical-alignプロパティ指定可能
    • 親要素のtext-alignでボックスどうしの上下の方向を揃えることが可能


  • table-cell
    • 要素が一列に横に並ぶ(th, tdのようになる)
    • 隣りあう要素の高さは自動的に最も高い要素に揃えられる
    • vertical-alignプロパティ指定可能
    • 親要素にdisplay: table;を指定した上で、その要素にwidth指定を行うと、これを指定 した要素が親要素の幅に合わせて自動で伸縮するようになる


たまに使うもの

  • table
    • 上記で出てきたtable-cellとセットで使うことが多い
    • ブロックレベルボックスとして配置される表(tableをそのままイメージしてもらえれれば良い)


  • list-item
    • リスト項目として表示
    • ブロックレベルとして配置される


  • none
    • 要素事態を非表示にしてしまう(ないものとしてしまう)
    • 指定された要素の空白領域は確保されず、後続要素が上に詰めて表示される。


最近の主流

display: flex;と表記することでフレキシブルボックス化することができます。これを利用した デザインはフレキシブル・ボックス・レイアウトなんて呼ばれるみたいです。複雑なwebサイトを柔軟にレイアウト できる比較的新しい技術ですが、一部ブラウザでは対応されてないので注意しましょう。


参考


JavaScriptでオブジェクト指向プログラミング

javaScript

JavaScriptの特徴

JavaScriptは立派なオブジェクト指向言語です。ただし、Javaなんかのオブジェクト指向言語とは かなり異なる部分があり、オブジェクト指向を知らない初心者がJavaScriptから勉強しはじめると 混乱に陥ります。
まず、JavaScriptにはクラスがありません。かわりにプロトタイプと呼ばれるものが存在します。 ただし、このプロトタイプという言葉自体が混乱を招く結果にもなっていると僕は思います。なので、ここでは便宜上、 プロトタイプのことをクラス、あるいはオブジェクトと呼ぶこととします。

あと、以下のプログラムはGoogle chromefirefoxでしかテストしていません。念のため。

空のクラスを定義

まずTestクラスを実装してみます。

var Test = function() {
  // プロパティ、メソッドなどをこの中に記述
};


これがJavaScriptのクラスです。見てのとおり、厳密にはクラスではありません。関数にクラスとしての役割を与えることで クラスっぽい挙動をさせるのです。
ちなみにクラスなので変数の最初は大文字です。そうしないと混乱を招くので必ずそうしましょう。

インスタンス化は

var test = new Test();

と記述します。これは多言語と同じような感じですね。

プロパティとメソッドを実装

では上記のクラスにプロパティ、メソッドを書いてみましょう。

var Test = function(name, score) {

  // プロパティ(Javaだとフィールドにあたる)
  this.name = name;
  this.score = score;

  // メソッド
  this.getData = function() {
    return this.name + " : " + this.score;
  }

};


こんな感じになります。
メソッドに注目してください。これはメソッドというよりはプロパティに関数を突っ込んでいるだけ、とも 言えます。実際、JavaScriptではメソッドという概念があるとは言えず、値が関数であるプロパティが メソッドとしてみなされます。しかし、大体どこでもメソッドと言っている気がしますし、ここでもメソッドで通します。
あと、直観でわかる人もいると思いますがthisは自分自身(ここではTestクラス自身)です。(正確には、JavaScriptのthisは、 Javaなんかとちょっと違うのですが、ここでは割愛します)

本当に呼び出せるか実際に実行してみます。

var test = new Test("hoge-kun", 75);
console.log(test.getData());


hoge-kun : 75と表示されればOKです。

メソッドの後づけ定義

JavaScript一旦インスタンス化させたオブジェクトに対し、新しくメソッドを追加することができます。
言っている意味がわからない人も多いと思いますので具体例を出します。

var Test = function(name, score) {

  this.name = name;
  this.score = score;

  this.getData = function() {
    return this.name + " : " + this.score;
  }

};

var test = new Test("hoge-kun", 75);

// 名前だけ返すgetNameメソッドを追加
test.getName = function() {
  return this.name;
}

console.log(test.getName());


ちゃんとhoge-kunとだけかえってきましたか?
こんなことできていいのかよ、と多言語を使っていた人なら思うでしょう。
これがJavaScriptの柔軟性であり、同時にバグが混入しやすくなる原因でもあります。

たとえば、下記のコードを見てみましょう。

var Test = function(name, score) {

  this.name = name;
  this.score = score;

  this.getData = function() {
    return this.name + " : " + this.score;
  }

};

// hoge-kunとfuga-chanのTestオブジェクトをインスタンス化
var test_hoge = new Test("hoge-kun", 75);
var test_fuga = new Test("fuga-chan", 90);

// 変数test_hogeだけに、名前だけ返すgetNameメソッドを追加
test_hoge.getName = function() {
  return this.name;
}

console.log(test_hoge.getName());
console.log(test_fuga.getName());


TypeError: test_fuga.getName is not a functionといったような エラーが返ってきたはずです。そう、メソッドを追加したのは変数test_hogeだけであり、test_fugaには追加 されていないからです。
このようにJavaScriptでは、同じクラスのもとにインスタンス化されたオブジェクトであろうと、それぞれのインスタンスが持つメソッドは 同じとは限らないのです。

メソッドはプロトタイプで宣言しよう

先にコードを出します。

// -- Testクラス(Testオブジェクト) --

// プロパティ(フィールド)はTestクラスをつくったときに
var Test = function(name, score) {
  this.name = name;
  this.score = score;
};

// メソッドはprototypeプロパティへ入れる
Test.prototype = {
  getData : function() {
    return this.name + " : " + this.score;
  },

  getName : function() {
    return this.name;
  }

};
// -- Testクラスここまで(実際はここまででファイルを分ける) --

// -- ここからメイン処理 --
var test_hoge = new Test("hoge-kun", 75);
var test_fuga = new Test("fuga-chan", 90);

console.log(test_hoge.getName());
console.log(test_fuga.getName());


今回はhoge-kun fuga-chanがともに返ってきます。これがJavaScriptオブジェクト指向の完成形・・・というわけでは ないのですが、とりあえずそうしておいてください。少なくとも僕はこう書いています。
この急に出てきた 「prototypeってなに?」 「なんでクラスのなかにメソッド入れてしまわないの?」 と思われる方 もいると思いますが、これを使うといろいろ利点があります。その内の一つが

メモリ消費を抑えることができる

です。

インスタンスは生成するたびに、それぞれのインスタンスのためのメモリを消費します。メソッドをプロトタイプ宣言で追加する前のコードでは、 メソッドをインスタンス化のたびにコピーしていたわけです。

f:id:web-engine:20161023190700p:plain

これらのメソッド群をprototypeプロパティで追加すると、オブジェクトをインスタンス化したとき、インスタンスはそれぞれ個別のメソッドを 持つわけではなく、もととなったprototypeオブジェクトを参照することとなります。
図で説明するとこんな感じですね。

f:id:web-engine:20161023190721p:plain

毎回メソッドをコピーするわけではなく同じアドレスを見に行っているだけなので、結果としてメモリ節約になるわけです。

ちなみに、上記コードでメソッドをprototypeプロパティへ格納していますが、この手法はオブジェクトのリテラル表現を使っています。

基本形は

var Test = function() { // プロパティ };
Test.prototype.getData() { // 処理 };
Test.prototype.getName() { // 処理 };


のように書きます。しかし、これでは修正箇所が多くなるので、以下のように書くと良いでしょう。

var Test = function() { // プロパティ };
Test.prototype = {
   getData : function() {
    // 処理
  },

  getName : function() {
    // 処理
  }
  
};


読みやすくもなって一石二鳥です。

カプセル化は面倒くさい

PHPの場合

<?php
class Test {

  private $name;
  private $score;

  function __construct($name, $score) {
    $this->name = $name;
    $this->score = $score;
  }

  // $nameは、このメソッドを通しでしか参照できない
  public function getName() {
    return $this->name;
  }

  // Testクラス内でしか呼び出せないメソッドの処理
  private function secretMethod() {
    // 処理
  }

}


のようにしてメソッドなどを自分自身のクラス内でしか呼び出せないようにします。$name$scoreも パブリックメソッドを通してでしか参照できないようにできます。クラスを設計する際は、通常このようにして 安全性を向上させます。これが俗に言うカプセル化です。

JavaScriptではデフォルトで、すべてのメンバがパブリックになっています。そして、JavaScriptでも カプセル化を施すことは可能です。
可能なんですが、ちょっと面倒くさいというか、コードが非常に冗長的になるというか・・・。

どうしても仕事で使っていてプライベートメンバにして「危険を取り除きたいんだ!」という方は、ほかの人が良い 方法を書いてくれているはずなので検索してみてください。(投げやり)


静的プロパティ・メソッドの定義

静的プロパティ、静的メソッドとは、インスタンス化せずともオブジェクトから直接呼び出せるプロパティ、メソッド。 グローバル変数、関数を減らすために使用されることが多いです。
以下のように実装します。

/*
 -- 構文 --
 オブジェクト名.プロパティ名 = 値;
 オブジェクト名.メソッド名 = function() { 処理 };
*/

// クラス定義
var StaticTest = function() {};

// 静的プロパティ定義
StaticTest.VERSION = "2.0";

// 静的メソッド定義
StaticTest.returnName = function () {
  return "STATIC_TEST!";
};

// -- メイン処理 --
console.log(StaticTest.VERSION);
console.log(StaticTest.returnName());

var static_test = new StaticTest();
console.log(static_test.returnName()); // エラー


インスタンス経由で静的メソッドを呼び出そうとするとエラーになるはずです。

上記のエラーからわかるように、静的プロパティ及びメソッドを定義する際は、プロトタイプオブジェクトには追加できません。 プロトタイプオブジェクトはインスタンスから直接参照されることを前提としたものだからです。

PHPでJSONを扱う

php

JSONってなに?

JSON(JavaScript Object Notation)は、テキストフォーマットの一種です。シンプルで 開発者が理解しやすい構造をしており、コンピュータにとっては高速で処理しやすいというすぐれもの。
WebAPIなどを使って引っ張ってくる形式のファイルはCSVXMLJSONのうちどれかですが、 最近の主流はJSON。構造がJavaScript連想配列と似ている(というかそのまま?)ので、はじめて 見る人でも理解しやすい。


PHPJSON処理

下記のようなjsonファイルを用意しました(test.json)。ゲームなんかで使えそうな タイプです。

{
"id" : 24,
"name" : "勇者A",
"status" :
    {
        "hp" : 175,
        "mp" : 50
    },
"item" :
    {
        "money" : 25000,
        "sword" : [
            {
                "name" : "錆びた剣",
                "atk_point" : 50
            },
            {
                "name" : "ライトセーバー",
                "atk_point" : 350
            }
        ]
    }
}

これをPHPで処理します。具体的には下のコードを参照してください。

<?php
$pass = "test.json";
$json = file_get_contents($pass);
if (!empty($json)) {
  $json = mb_convert_encoding($json, 'UTF8', 'ASCII,JIS,UTF-8,EUC-JP,SJIS-WIN');

  // 連想配列として扱いたい場合は、第2引数にtrueを渡す
  $obj = json_decode($json);
}
?>
<!DOCTYPE html>
<html lang="ja">
<head>
  <title>TestJSON</title>
  <meta charset="utf-8">
</head>
<body>

<p>ID: <?=$obj->id?></p>
<p>名前: <?=$obj->name?></p>
<p>HP: <?=$obj->status->hp?></p>
<p>MP: <?=$obj->status->mp?></p>
<p>所持金: <?=$obj->item->money?></p>

<?php foreach ($obj->item->sword as $val): ?>
  <p>剣の名前: <?=$val->name?></p>
  <p>剣の攻撃力: <?=$val->atk_point?></p>
<?php endforeach; ?>

</body>
</html>

WebAPIなんかを利用する場合は$passの部分にURLを書きます。今回はなるべくシンプルにした かったのでこのようなコードになりました。コメントアウトにもあるとおり、連想配列として扱いたい場合、 json_decode()の引数にtrueを渡してやります。 僕はオブジェクトとして扱う方が好きなので 今回は使っていません。

$ary = json_decode($json, true);


説明するまでもないですが、これでjsonの内容がすべて出力されます。

広告を非表示にする

パスワードをデータベースに保存するときは、一緒に塩を入れよう

php MySQL SQL

セキュアに保存する -> 漏れた場合を想定する

データベース(以下DB)にパスワードを保存するとき、そのまま (平文で)保存してはいけません。データが漏れた場合に、パスワードが 見た瞬間わかってしまうからです。
パスワードを保存する場合、暗号化してからDBへインサートします。

実装例

手法は多種多様ですが、ここではSALTを使って暗号化 してみたいと思います。PHP + MySQLでの想定です。(ちなみにPDO)
SALTはランダムな文字列で、各ユーザごとにそれぞれ異なる ものを用意します。

<?php

/* 暗号化関数 */
function saltAngo($password, $salt) {
    $saltPassword = crypt($password, $salt);
    return $saltPassword;
}

/* ランダムな文字列を生成 */
function mkSalt($length = 8) {
    return substr(str_shuffle(str_repeat('0123456789abcdefghijklmnopqrstuvwxyz', $length)), 0, $length);
}


<?php
/* 上記ファイルの関数をrequire_onceなどで使えるようになっているとします。 */

$user = 'hoge';
$password = 'hogehoge';

$stmt = $pdo->prepare('INSERT INTO userdata SET user = ?, password = ?, salt = ?');

// トランザクション開始
$pdo->beginTransaction();

try {
    $stmt->bindValue(1, $user);
    $salt = mkSalt(); // ランダムな文字列作成
    // パスワードはsaltAngo関数で暗号化
    $password = saltAngo($password, $salt);
    $stmt->bindValue(2, $password);
    $stmt->bindValue(3, $salt); // 使ったSALTもDBへ保存
    $stmt->execute();

    // コミット 
    $pdo->commit();
} catch (PDOException $e) {
    // エラーでロールバック 
    $pdo->rollBack();
    throw $e;
}


ログイン時は、DBに保存された同じSALTを使います。同じ暗号化のロジックを使用すれば、同じ結果が 戻ってくることを利用するのです。

<?php
/* 実際はちゃんと無毒化しましょう */
$user = $_POST['user'];
$password = $_POST['password'];

$stmt = $pdo->prepare('SELECT * FROM userdata WHERE user = ?');
$stmt->bindValue(1, $user);
$stmt->execute();

$row = $stmt->fetch(PDO::FETCH_ASSOC);

if (!empty($row)) {
    $salt = $row['salt'];
    $password = crypt($password, $salt); // 保存時と同じSALTで復号化

    // パスワードが一致しているか
    if ($row['password'] === $password) {
        echo 'ログイン完了';
    } else {
        echo 'ユーザ名かパスワードが違います';
    }
} else {
    echo 'そのようなユーザは登録されていません';
}


ここでは説明を簡単にするため、弱い暗号化で済ませています。実際には、もっと 強いロジックを考えましょう。

strictモードで厳格なjavaScriptを書こう

javaScript

strictモードとは?

近頃見られるようになった下記のような記述。javaScriptを書く際、必須になりつつあります。

(function() {
  'use strict';
  
  // 処理
})();


jsファイルの先頭に

'use strict'; 

と記述することにより、strictモードを 宣言することができます。strictモード下では、厳格なjavaScriptを書くことが求められるので、必然的に バグの混入を減らすことができます。

ちなみに

(function() {
})();

の部分は即時関数と呼ばれ、スコープ汚染を防ぐために用いられるものです。ここではテーマの範囲外になるので 割愛します。


効果

  1. 暗黙的なグローバル変数の禁止
  2. 代入不可なプロパティへの代入の禁止
  3. 削除できないプロパティの削除の禁止
  4. 関数の引数名の重複の禁止
  5. 幾つかの識別子は予約語にするため使用禁止(staticとか)
  6. 8進数表記の禁止
  7. eval 変数、arguments 変数の宣言禁止
  8. with 禁止

etc...って感じですね。
下の6、7、8はいいとして、1から5の効果は僕としては、かなり、ありがたいと思います。

代表効果の例

strictモードには、いくつかの効果がありますが、そのうちのもっとも基本的な効果がvar のつけ忘れを防げることです。上記の効果のうちの1.暗黙的なグローバル変数の禁止に当たる機能 です。

(function() {
  'use strict';
  var x = 'hello'; // ok
  y = 'goodnight'; // error
})();

コンソールで確認すればUncaught ReferenceError: y is not defined と注意されているはずです。ちょっとしたことですが、javaScriptは基本ゆるい言語 なので、こういうのが案外、助けになったりします。

注意点

  1. IE10以下ではサポートされていない
  2. 先頭以外でstrictを宣言しても strict モードにならない

1はそのままの意味です。Internet Explorerは昔からjavaScriptと 相性が悪いのです。

2は下記のコードを見てもらうのが早いです。

(function() {
  var x = 'hello';

  'use strict';
  y = 'goodnight'; // エラー吐かない

  // 両方の変数がコンソールに出力されてしまう!
  console.log(x);
  console.log(y);
})();

参考

Vagrant + CentOS6.4 + rbenv でRuby環境構築

Linux Vagrant git Ruby

Step.0 前提条件


Step.1 VagrantCentOSを導入

ターミナルから作業ディレクトリに移動。なければmkdirでつくります。

Vagrantbox.esから 使えそうなCentOSを探しましょう。今回はこの

f:id:web-engine:20160626181426p:plain

を使用。Copyのボタンを押して、ターミナル(コマンドプロンプト)に戻ります。

vagrant box add centos-testhttps://github.com/2creatives/vagrant-centos/releases/download/v6.4.2/centos64-x86_64-20140116.box

と打ち込んで実行。Copyボタンを押しているならば、URL部分はコピーの方が早いです。
centos-testの部分はボックスの名前ですが、自分のわかるものであれば好きな名前で 構いません。2、3個であれば問題ないですが、多くなってくると混乱します。間違えて違うボックスを 消してしまったりしないようにしましょう。

ボックスが追加されているか確認するには

vagrant box list

と打ち込みます。centos-testと追加されていれば成功です。

続いて、作業用のディレクトリを作成し、その中に移動します。もちろん自分のつけたい名前でオーケイです。

mkdir centos-test
cd centos-test

そこまでできたら

vagrant init centos-test

と入力。centos-testの部分は自分のつけたディレクトリ名を打ち込ましょう。
ディレクトリ内にVagrantfileというファイルが作成されれば成功です。

次に、このVagrantfileを編集します。好みのエディタで開いて

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

という部分の#を外しましょう。
たいていは192.168.33.10だと思いますが、もし、ipの数字部分が違う人がいればメモするなり しておきましょう。

いよいよ仮想マシンを起動します。起動するには、Vagrantfileが存在するディレクトリ下で

vagrant up

と入力するだけです。起動したか確認するには

vagrant status

と打ち込みます。runningと表示されれば無事起動しています。

Macならばvagrant sshを使い、WindowsならばPuTTYかTeraTarmを 使って仮想マシンに接続します。このとき、ipの番号が書かれていたものと違っていた人は、書かれていた 番号を使って接続しましょう。

接続に成功するとユーザ名を聞かれます。ユーザ名はデフォルトでvagrantとなっています。 次にパスワードを聞かれますが、パスワードも同じくvagrantです。

無事入ることができたら少し休憩でもしましょう。
仮想マシンを切断するにはexit
仮想マシンを止めるにはvagrant suspendvagrant haltを使います。


Step.2 gitを導入

gitを使うので

git --version

でgitが入っているか確認します。入っていなかったら

sudo yum install -y git

でインストール。


BreakTime なぜrbenvを導入するか

rbenvとは、複数のバージョンのRubyを管理できるコマンド群です。今まで知らなかったのですが、アールビーエンヴとかアールベンヴって読むらしいですね。
して、なぜ普通にyum install rubyとしないかと言うと、2系のRubyが入らないからです。
このコマンドだと、1系のRubyが入ってしまいます。(2016年6月 現在)
もちろん、それでオーケイだという方は面倒な手順をふまずに、yumを使ってインストールしてもらっても 構いません。


Step.3 rbenvを導入

いちいちsudoを打つのが面倒なのでルートユーザになります。

su -

パスワードは初期設定でvagrantでした。

つづいて、/usr/local/src下に、rbenvのリポジトリをクローンします。

git clone git://github.com/sstephenson/rbenv.git /usr/local/src/rbenv

つづいて、パスを通します。
~/.bash_profileに書き込んでしまうと、実行ユーザしか読み込んでくれないので、/etc/profile.d/下 に、rbenv.shというファイルをつくって設定を書き込みます。

echo 'export RBENV_ROOT="/usr/local/src/rbenv"' >> /etc/profile.d/rbenv.sh
echo 'export PATH="${RBENV_ROOT}/bin:${PATH}"' >> /etc/profile.d/rbenv.sh
echo 'eval "$(rbenv init -)"' >> /etc/profile.d/rbenv.sh
source /etc/profile.d/rbenv.sh

ちゃんと書き込まれているかを、エディタで開くかcatコマンドで確認しましょう。
確認したら、exec $SHELL -lとコマンドを打ち、シェルを再起動します。(exitで一度出ても良い)

ルートユーザから一般ユーザに戻ってrbenv -vと打ち込んでバージョンが表示されればオーケイです。


Step.4 ruby-buildの導入

rbenvはRubyのバージョンを管理するためのコマンド群なので、これだけでインストールすると普通にyum install ruby とするのと変わりません。rbenvディレクトリ下にpluginsというディレクトリをつくり、その中にruby-buildのリポジトリをクローン します。

git clone git://github.com/sstephenson/ruby-build.git /usr/local/src/rbenv/plugins/ruby-build


Step.5 依存パッケージのインストール

rubyをインストールするにあたり必要なものをまとめてインストールしてしまいましょう。

sudo yum install -y gcc make openssl-devel readline-devel libffi-devel zlib-devel libcurl-devel

1個ずつgrep等を使ってすでに入っているか確かめて行っても良いですね。
っていうかこんなにインストールしなくていいような気がする・・・。


Step.6 エラーの解決

rbenv install --listでインストールできるRubyのバージョンが確認できます。
当然インストールするのは2系。ここでは2.2.2をインストールしてみます。
(ここで注意点があります。ルートユーザになりましょう。グループ作成をしておらず、グループがrootの ままになっているからです)

rbenv install 2.2.2

ここで「足りないものがあるよ」と怒られた場合には、それをインストールしましょう。ただ、僕の場合は 少し違いました。

mkdir: cannot create directory `/usr/local/src/rbenv/versions/2.2.2': 
Permission denied

Permission deniedだからRuby2.2.2のディレクトリを作成できない、と言われているようです。

ちょっと危険ですが

chmod -R 775 rbenv

chmod -R 775 versions

でアクセス権を変更しました。(どっちでやったか忘れた)2番目の7は、グループのアクセス権を表しており、それの読み、書き、実行のすべてができる ように許可したわけですね。ls -lで確認すればわかるようにroot rootとなっています。2番目のroot がグループを表しているわけです。こういうのは、あまり良くないですが、練習用の仮想環境下なので今回はこれで良しとします。

もう一度インストールを試みると今回は上手くいきました。念のため、本当に成功したか下記のコマンドで確認します。

rbenv versions

インストールはできましたが、まだ、Rubyは使えません。

rbenv global 2.2.2

とコマンドを打ち、「2.2.2のバージョンを使うよ」と宣言しましょう。ruby -vで確認して2.2.2のバージョンが表示されれば、 あとは自由にRubyを使うことができます。


step.7 バージョンの切り替え

せっかくなので、もう一つ違うバージョンをインストールしてみます。

rbenv install 2.3.0

もちろん違うバージョンをインストールしただけでは、前のバージョンのままです。

rbenv vesions

で確認すると、2.2.2のバージョンの前に * がついていると思います。現在使っているバージョンを表す記号です。
新しくインストールしたバージョンを使うことを下のコマンドで宣言します。

rbenv global 2.3.0

もう一度rbenv vesionsで確認すると、アスタリスクが新しいバージョンの方についていると思います。
これで新しく追加した方のRubyが使えるようになりました。
rbenv便利ですね!


参考