涼風コンピュータblog

涼風 ・Rubyist, RubyやRuby on Railsに詳しくなっていきたいです

rspec-railsのインストール (rails 3または4)

はじめに

rspec-rails 2はrails 3と4用のrspecプラグインです。それではインストール方法を２つ紹介します

Railsは3.2.14、Mac OS X 10.9.2で確認しました

インストール方法

(1) railsアプリのgemに設定してインストールする方法

my_blogというrailsアプリを作成するとします。-Tオプションを指定すると、railsがデフォルトに用意しているtestunitによるテストを作成しません

$ rails new my_blog -T
$ cd my_blog

gemfileにrspec-railsのgemを設定します

group :test, :development do
  gem "rspec-rails", "~> 2.14"
end

bundle installでgemfileに書かれたgemを自動的にインストールします

$ bundle install
... 省略
Installing rspec-core (2.14.8)
Installing rspec-expectations (2.14.5)
Installing rspec-mocks (2.14.6)
Installing rspec-rails (2.14.2)
... 省略

rspecがインストールされていることを確認する

$ rspec -v
2.14.8

(2) gemでインストールする方法

$ sudo gem install rspec-rails
$ rbenv rehash        # rbenvを使用している場合
$ gem list                # 以下の4つがインストールされます
... 省略
rspec-core (2.14.8)
rspec-expectations (2.14.5)
rspec-mocks (2.14.6)
rspec-rails (2.14.2)
... 省略
$ rspec -v
2.14.8

(3) おまけ

ちなみにrspecをインストールするとこんな感じにになります

$ sudo gem install rspec
$ rbenv rehash        # rbenvを使用している場合
$ gem list                # 以下の4つがインストールされます
... 省略
rspec (2.14.1)
rspec-core (2.14.8)
rspec-expectations (2.14.5)
rspec-mocks (2.14.6)
... 省略

rspecがインストールされていることを確認する

$ rspec -v
2.14.8

rspec-railsに必要なファイルを生成する

rspec-railsをインストールし、Gemfileにrspec-railsを設定していると、以下のコマンドで、rspec-railsに必要なファイルを生成できます

$ rails g rspec:install
      create  .rspec
      create  spec
      create  spec/spec_helper.rb

おわりに

rspecもrspec-railsのインストールしたとき、両方ともrspec -vを実行したときにrspec-coreのバージョンが表示されるので、どちらも、rspecの本体はrspec-coreなんでしょうね

テスト駆動開発

テスト駆動開発とはなにかを勉強しました

第2回　「テスト駆動開発」とは何か？

引用

TDD(テスト駆動開発)
* ステップ1：これから書く機能に対するテストを1つ書き，テストが失敗することを確認する（レッド）
* ステップ2：ステップ1のテストを通す最低限のコードを実装する（グリーン）
* ステップ3：リファクタリングを行う（リファクタリング）

1〜3をブラッシュアップされるまで繰り返します。 ポイントとしてはテストを全部書くのではなく、まずテストを１つ書くそうです。 リファクタリングでは重複したコードなどを直します

ドットインストールでMySQL入門

本日はドットインストールで、MySQL入門はやりました。SQLは初めてではないですが、10年ぐらい触ってないので、ああそういえばそんなのあったねとか、知らなかったとかがありました。

  • likeで"_"を指定すると1文字マッチするものを抽出する
select * from users where email like '%@school.__';

%は任意の文字列にマッチします。以下があった場合に

abc@school.jp

xyz@school.jp

a@school.com

"_"を2つ指定しているので、2文字であるjpの以下がヒットする

abc@school.jp

xyz@school.jp

  • ランダムに1レコード抽出する

order by rand()でランダムにソートし、limit に1を設定すると無作為に1 レコード抽出できる

select * from table order by rand() limit 1;

ただし、件数が多いとよくないみたい

MySQL の order by rand()

order by randで検索したら、またしてもnaoyaさん登場でした

  • 日付の差分を日数で返すdatediff()関数
select name, datediff(now(), day) from table;

now()が現在時刻で、dayがレコードに記録された日付とします

#15までやりました

DebianをVirtualBoxにインストール

MacでDebianをVirtualBoxにインストールして、Linuxの仮想環境を構築しました。 DebianというLinuxのディストリビューションは歴史があり、Linuxのディストリビューションで人気のあるUbuntuもベースにしているとのことです。

インストール作業を行いました。

インストールしてログイン完了したところです debian

久しぶりLinuxディストリビューションをインストールして、面倒臭さを味わいました

以前、仮想環境構築ツール「Vagrant」を使ったことがあるのですが、インストール作業しなくてもいいからと「Vagrant」の便利さが認識できました

Vagrantの詳しい記事はnaoyaさんの記事があります

http://d.hatena.ne.jp/naoya/20130205/1360062070

Vagrantの入門はドットインストールがよいと思います

http://dotinstall.com/lessons/basic_vagrant

怖話の改善点

ユーザーが怖い話を投稿する怖話を使ってみて、改善点を洗い出します

▼ 改善点

  • 無料ホラー漫画の次のページをめくる向きは以下のほうが見やすいと思う
左 進む
右 戻る
一般的な字が縦の漫画は左側で次のページに進む
  • 無料ホラー漫画の最後のページで前に戻れないので、戻れるようにする
  • 怖話をグループ化できるようにする
例
 前編,中編,後編とあった場合に
前編の怖話では
　中編と後編のリンクが話の最後ある
中編の怖話では
　前編と後編のリンクが話し最後にある
後編を読んだけど、実は前編があったから、そちらを読みたい時や、まとめて読みたいときに便利だと思います

投稿者でコメントで次の怖話のリンクを貼っている人がいました

  • マイページのリンクが重いので、表示速度を速くする
リンクをクリックしても、10秒以上表示されない
※macで確認
  • マイページの既読の話のリンクが重いので、表示速度を速くする
リンクをクリックしても、10秒以上表示されない
※macで確認

▼ 自分にできそうなところ

  • 無料ホラー漫画の次のページをめくる向きは以下のほうが見やすいと思う
左 進む
右 戻る
一般的な字が縦の漫画は左側で次のページに進む

  • 無料ホラー漫画の最後のページで前に戻れないので、戻れるようにする

  • マイページのリンクが重い

  • マイページの既読の話のリンクが重いので、表示速度を速くする

※リンクが重いので、表示速度を速くするは難しいと思いますが、改善できるような技術を身につけたいです。 画面の表示時間を計測する、ボトルネックを探す。例えば、スロークエリーだったり

レスポンシブレイアウトとBoostrapの勉強

本日はレスポンシブレイアウトの勉強です

画面の大きさによって、レイアウトを変えることをレスポンシブレイアウトというそうです。Media Queriesなるもので、画面の大きさによって、CSSの定義を場合分けすることが可能なようです

Bootstrapはレスポンシブレイアウトをサポートした、CSSのフレームワークです。ドットインストールでBootstrap 3.0入門を行いました

BootstrapにはGridシステムというものがあります。これは、横を12分割して、横幅を合計して12になるように指定する方法です

Bootstrapに用意されているCSSのclassを指定することにより、簡単にレスポンシブレイアウトを作成することができます

いろいろ簡単にできました。人気があるのもうなずけます

CSSの勉強(2)とCSS3の勉強

本日はドットインストールでCSSの勉強、CSS3の勉強をしました

CSSでは、カーソルを変更することもできます

<style>
  .change {
    cursor: move;
  }
</style>

<span class="change">hello</span>

こんなかんじにすると、ドラッグ可能なカーソルに変更されます

CSS3では、まだ策定段階ですが各ベンダーが先行して、機能を実装しています。そのため、各ベンダーの使える機能がまちまちです。各ベンダーのみで使えるきのは、ベンダープレフィックを先頭につけます

border-radius:5px; /* ベンダープレフィックなし */
-webkit-border-radius:5px;   /* ベンダープレフィックス    */

ベンダープレフィック一覧

どの機能がサポートされているのか、ベンダープレフィックをつける必要があるのかはhttp://caniuse.comで調べることができます。 今回はGoogle Chromeで確認しました

div要素に対して、border-radiusプロパティを設定すると、角丸にすることができます

div {
  width: 100px;
  height: 100px;
  border-radius: 10px 20px 30px 40px
}

border-radius: 左上の半径, 右上の半径, 右下の半径, 左下の半径

一つだけ設定すると4つの角に設定されます

%も設定でき、以下を設定すると円になります。そして、background-imageを設定すると円に繰り抜いた画像が表示されます

border-radius: 50%;
background-image:url('画像ファイル');

これは簡単で使えそうだ思いました

・ボックスシャドウ

四角形に影を落とします

box-shadow:10px 20px 5px

box-shadow: x方向ずらし y方向ずらし ぼかし具合 色

色を指定しないと黒になります

・テキストシャドウ

ボックスシャドウと同じ要領でテキストに影をつけることができます

 text-shadow: 1px 1px 0 white;

text-shadow: x方向ずらし y方向ずらし ぼかし具合 色;

CSS3はかなり複雑なことをできるので、CSS3のコードを生成するページも紹介されていました