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

ミスターFのいろいろプログラミング

(主にSwift)プログラミング日記。札幌在住。

railsでレスポンシブデザインwebサイトを作ってみよう

今日の目標
rails serverの実行を通してレスポンシブデザインを確認する

出てくる用語と考え方

今回は、ビュー、コントローラ、ルーティングという言葉が出てきます。まずはこの言葉とその関係について簡単に説明します。 - ビュー: webページの見た目に関するコードの集まり。 - コントローラ: 先ほどのビューはいくつかのコードファイルの集まりなので、場面場面でどのファイルを使うか決めたりする。4章で出てくるモデルとも連携を行う。 - ルーティング: URLに応じて、どのコントローラを使うかを設定しておくこと。 それぞれの関係性
URL --> ルーティング --> コントローラ --> ビュー --> 表示

やるべきこと

  • サーバの確認
  • ルーティング
  • html,cssの知識習得

まずは、ルーティング(urlとコードの対応づけ)

root 'static_pages#home'
 上のルールに置き換えると、static_pages/homeというURLからstatic_pages#homeというコントローラ/アクションへの対応付けが変わり、ルート「/」へのGETリクエストがStaticこのコードにすると、static_pages/homeにアクセスしても動作しなくなります。
 今回は、ソシムさんのHTML5CSS3デザインブックを使いますが、この本はブログ風サイト1ページとビジネス用サイト2ページで合計2セット3ページなので、二つのコントローラをまず作成します。 なぜコントローラを二つ作るのか?ページ数は3だから、3つのhtmlファイルを作るんじゃないの?と思われる人もいるかと思われます。実は驚くべきことに、コントローラを作れば、htmも自動で作成してくれるのです!

コントローラを作成しよう

ではさっそく、コントローラを作成しましょう。 コマンドプロンプト(もしくはターミナル)を開き、 (開き方が分からない方は、pcでファイル名検索をかけてみてください) 以下のようにコマンドを入力します。ここで $ マークはコマンドの始まりを表すという意味で、実際にコマンドプロンプトには入力しないようにしてください。
$ cd /users/ユーザ名/desktop/firstapp
$ rails generate controller blog home
実行すると、以下のような表示が出ると思われます。
create app/controllers/blog_controller.rb
route get 'blog/home'
invoke erb
create app/views/blog
create app/views/blog/home.html.erb
invoke test_unit
create test/controllers/blog_controller_test.rb
invoke helper
create app/helpers/blog_helper.rb invoke test_unit
invoke assets
invoke coffee
create app/assets/javascripts/blog.coffee
invoke scss
create app/assets/stylesheets/blog.scss

これらの意味を説明します。 まず、
$ rails generate controller コントローラ名 コントローラと関連付けるviewの名前(複数も可)
というコマンドを実行します。このコマンドは、単にコントローラ(.rbファイル)とhtmlファイル(実際にはhtml.erb)の二つだけを作るわけではありません。controllerとviewを生成し、さらにそれらの関連付けを行います。さらに、ページのテストも作成します。(テストに関しては3章:テストをしてみようで説明します)このとき、controllerにあたるファイル、viewにあたるファイルは、それぞれ複数作成されます。

rails generate controllerが作るもの一覧

  • "view"
    • html.erbファイル
    • scssファイル (sassファイルとも言われます。webページのレイアウト構造に関わります)
    • coffeeファイル (javascriptのようなものです。動きのあるページをつくるためのものです。)
  • "controller"
    • foo_controller.rbファイル (fooは、コマンドで"コントローラ名"に何と書いたかによって変わってきます。foo,bar,hoge,hugaなどは、意味のない名前・任意の名前という意味でプログラマが使う言葉です。)
    • foo_helper.rbファイル (foo_controller.rbファイルに書ききれない分をhelpするコントローラの補助的な役目です。)
  • "test"
    • foo_controller_test.rbファイル (コントローラがきちんと"意図したとおりに"動いているかを確認します。これについてはまだ解説しません)
  • "config"
    • routes.rb (ルーティングを行うファイルです。)

失敗して削除したいとき: rails destroy

なんだかいっぱい作成されちゃったので、もし失敗して消したい!となったとき大変そうですが、ご安心ください。
$ rails destroy controller 消したいコントローラ名 view名1 view名2
(コントローラは一つ、viewはそのコントローラに関連付けられたものであれば複数可。
しかし、
$ rails generate controller A B C とした場合は
$ rails destroy controller A B C と必ず同じものを引数にとりましょう。

コントローラとビューでwebページを作ってみよう

1.ルーティング:webページへの道をつくる 最初に、まずはブラウザからwebページに到達できるようにしましょう。ここで、またfirstappディレクトリ(フォルダ)にいきましょう。すでにいる人はそのままで大丈夫です。
$ cd /users/ユーザ名/desktop/firstapp
それでは、ルーティング用ファイルを開いてみましょう。
$ gvim config/route.rb
開いた時点ではこのようになっているはずです。

Rails.application.routes.draw do
  get 'blog/home'
end

実は、config/routes.rbもまた、$ rails generate controller コマンドで編集されているのでした。(このファイルは、コマンドごとに生成されるのではなく、コマンドを実行するたびに自動的に編集されます。) 先ほどの
$ rails generate controller blog home
で作成されたのは、
get 'blog/home'の一行です。これは、http://example.com/blog/home/にアクセスしたとき、blog_controllerクラスのhomeメソッドが実行される、ということを示しています。さらに、homeメソッドの実行が終了した時点で、home.html.erbファイルのデータがwebブラウザに送られます。つまり、流れとしては、
流れとしては、

  1. ブラウザでhttp://example.com/blog/home/にアクセス
  2. blog_controller.rbのhomeメソッドが実行される(それが終わる)
  3. home.html.erbのデータをブラウザに送信
  4. ブラウザがhome.html.erbをレンダリングする
    ということになります。

homeページへのルーティングをしよう

さて、ルーティングの仕組みと流れが分かったところで、まずはhomeページにアクセスできるようにしましょう。

さっそく自分のサイトにアクセスしよう

$ rails server -b $IP -p $PORT
(エラーが出る場合は、$rails server -b 0.0.0.0 -p 3000、もしくは$ rails serverだけで実行してみてください。) コマンドを入れると、http://localhost:3000のようなurlが出てくるはずです。これをwebブラウザに打ち込めば、アクセスできます。 しかし、ここで
could not connect to server: Connection refused (0x0000274D/10061) Is the server running on host "localhost" (::1) and accepting TCP/IP connections on port 5432? could not connect to server: Connection refused (0x0000274D/10061) Is the server running on host "localhost" (127.0.0.1) and accepting TCP/IP connections on port 5432?
のようなエラーが出ると思います。これは、最初に $ rails new 5.0.0.1 -d postgresqlとしたことが原因です。これは、上のコマンドで指定した、postgresqlサーバを起動していないというエラーなのです。しかし、まだみなさんはpostgresqlをインストールしていないはずです。

postgresqlサーバをインストールしよう

https://www.postgresql.org/download/ このページから、linux,mac,windowsのどれかのページにとび、そこで64ビットパソコンの方はx86-64と書かれたものを、32ビットパソコンの方はx86-32と書かれたものを選んでください。(自分のPCが何ビットかわからない人は、コントロールパネルを開き、システムとセキュリティ、システムと進み、そこのシステムの種類という項目に書いてあります。)

$ psql -U postgres; $ create database firstapp1013_development;

$ rake db:create RAILS_ENV=test create database firstapp1013_test

$ rake db:migrate

$ rake test Run options: --seed 59955

Running:

.

Finished in 10.997155s, 0.0909 runs/s, 0.0909 assertions/s.

1 runs, 1 assertions, 0 failures, 0 errors, 0 skip

環境変数をセットしない場合 FATAL: password authentication failed for user "postgres"s

環境変数をセット C> set RAILS_ENV = 環境変数 さらに、 password : <%= EVN[''] %>のように組み込みraisl文に変更 fe_sendauth: no password supplied このエラーに変わった

再起動したら、環境変数が設定されます。

C:> setx 環境変数名 値 でセットしましょう。 うまくいかないときは、とりあえず値が設定されている確かめよう ->コントロールパネル->システム->サイドバーの「システムの詳細設定->環境変数 もしくは、C:\users/ユーザ名/desktop/アプリフォルダ名> rails console

puts ENV['環境変数名'] とすると、 puts ENV['環境変数名'] 値 => nil (必ずnilが返されます。putsに返り値がないからです。)

この辺でgit add -Aしたら、LF will be replaced by CRLFみたいな表示が出たので、http://qiita.com/uggds/items/00a1974ec4f115616580 このサイトを参考にした。多分、git for windowsはLFをCRLFに変えてpushしようとする野だと思う。しかし、gvimunix系、すなわち改行コードにLFを使っているので、このような変更が発生すると考えられる。 $ git config --global core.autocrlf input をしてgit add -Aすると、何のcautionも出ずに実行できた。

やっとこさルーティング

今、$rails serverして、http://localhost:3000にブラウザからアクセスすると、"Yay! you are on rails!"のようなページが表示されると思います。 まずは、http://localhost:3000にアクセスしたとき、homeページを開くようにルーティング設定をしてみましょう。 $ git checkout -b socym_resposive_blog

Rails.application.routes.draw do
  #get 'blog/home'
  root 'blog#home'
end

ここで、
$rails server すると、 以下の画像のようなページが表示されるはずです。そうです。 root 'blog#home'は、ルートurl(http;//localhost:3000/)にアクセスしたとき、 blog_controller.rbのhomeメソッドを実行し(今は中身は空です)、その後home.html.erbを表示させるという役割を持ちます。それでは、ようやくhtml.erbファイルにアクセスできるようになったので、レスポンシブデザインサイトを作成してみましょう。

rails generate controllerで自動作成されるファイルの内容

時間があるとき追記する。

ソシム2章

この章で編集するファイル - viewディレクトリ - home.html.erb - assetsディレクトリ - blog.scss

これより、home.html.erbを編集していく。コメント等は、html.erbソースに書いておき、完成後にこちらに来ぴprする形式をとろうと思う。

scssとhtml.erbの関連付け

scssは、webページのレイアウトのルールを部分ごとに決めるものです。では、どのようにhtml.erbの一部分とscssを関連付けるのでしょうか?その方法を紹介します。

cssとdivクラスやタグの関連付け

cssの基本文法 .クラス名 タグ名1 ネストされたタグ名2 { スタイルの内容 }
(クラス名の前には . (ドット)が付きます!忘れないように!)
まず、cssでは、htmlファイルで設定したクラスごとにスタイルを記述していきます。
書くべきこと

  • 対象クラス: .クラス名
  • 対象タグ: タグ名。<>は必要ない
  • スタイル内容: { }で囲む

出てくるhtnlタグ

  • <div>タグ: htmlをセクション分けする。このタグで囲まれたセクションにクラス名やidをつけて、cssと関連付けたりできるようになる。非常に重要なタグ。
  • <h1>タグ: ヘッダを書くためのタグ。
  • <p>タグ: 1つの段落を表すタグ
  • <br>タグ: 改行を表すタグ。これを使わないとエディタの見た目は改行されていても実際のwebページでは改行されていないので注意。
  • `表示タグ: リンクを作成するタグ。

基本のスタイル

先ほどの分類でいうスタイル内容のことをプロパティと言います。

代表的なプロパティ

  • color:テキストの色。左から16進数2桁ずつRGBが割り当てられている。
    例: color: #000000 -> 白
  • margin:クラスやタグ同士の余白の大きさを決めます。 例: margin: 0 -> 上下左右の余白が0 注意:marginを0に設定しても、文字と文字の間の余白がなくなるわけではない。また、上下左右別々のmarginを設定することももちろん可能。 詳しくはhttp://kojika17.com/2012/08/margin-of-css.htmlを見るべし。
  • font-size:文字の大きさ。 例: font-size: 10px