作って学ぶRuby on Rails Vol.5 ページを画像やcssで整えよう！

CSSの編集、画像の配置

今までに、少なくとも下記の２つのURLへアクセスが可能になっているかと思います。

http://xxxxx.c9users.io:8080

http://xxxxx.c9users.io:8080/top/profile

※xxxxxの部分は環境により異なります

今回は、Viewに対してCSSを適用し、画像を追加していきます。

本項の最後まで学習することで、RubyonRailsで簡単なWebサイト(静的なのでWebアプリケーションではない)であれば構築することができるようになります。

それでは前項同様、app/views/layouts/application.html.erbを開いてください。

stylesheet_link_tagの第１引数で指定されている、’application’というのは、app/assets/stylesheets/application.cssを指しています。

app/assets/stylesheets/application.cssを開いてください。

上の図のように、コメントアウトされた行がたくさんあり、英文が記述されています。

ここで注目していただきたいのが、１３行目と１４行目です。

*= require_tree .
*= require_self

このように記述されていますが、

これはコメントアウトされているかに見えますが、実際はコードとして意味のある行になります。( コメントアウト行の先頭がイコールで始まる行はdirectiveと呼ばれ、Ruby on Railsがapp/assets を管理する際に用いられる記法です )

「require_tree.」と「require_self」はそれぞれ以下のような動きをします。

require_tree .

引数として指定されたディレクトリ配下を検索し、同じフォーマットのファイルがあれば自身より前に挿入する

※挿入される順番はアルファベット順

require_self

自身のファイル内容を挿入する。自身が読み込まれる順番を指定したい場合に利用

例えば、app/assets/stylesheets/にprofile.cssを作成した場合でも、require_tree.が記述されている場合は、自動で読み込みます。その場合は、require_selfが後に記述されているので、profile.cssが先に挿入されることになります。

それでは実際に、profile.cssを、app/assets/stylesheets/配下に作成してみましょう。

app/assets/stylesheets/profile.cssを開き、内容を下記のように記述して下さい。

※以降、本カリキュラムではインデントを半角スペース2つとして記述していきます。

.profile { width: 960px; margin: 0 auto; }

続いて、app/views/top/profile.html.erbを下記のように修正して下さい。

※divで囲ってprofileというクラスを指定します。

<div class="profile">
  <h1>Top/profile</h1>
  <p>Find me in app/views/top/profile.html.erb</p>
</div>

cssやhtmlファイルへの更新は、ブラウザを更新することで反映されます。サーバーを再起動する必要はありません。

ブラウザで確認すると下の図のようになっています。

http://xxxxx.c9users.io:8080/top/profile

※xxxxxの部分は環境により異なります。

文言が中央よりになり、cssが適用されていることがわかります。

続いて、画像を挿入します。

サンプル画像:https://s3-ap-northeast-1.amazonaws.com/codecamp-image/noimage.png

アップロード方法は上の図の赤枠部分をクリックし、モーダルウィンドウを出現させます。

モーダルウィンドウ上の、DRAG&DROPの部分にローカルに保存した画像をドラッグすると、任意のディレクトリにファイルを配置することができます。

上の図の位置に配置できていれば問題ありません。

app/views/top/profile.html.erbを開き、下記を１行追加して下さい。

<%= image_tag 'noimage.png' %>

画像を表示するにはViewで、image_tagメソッドを呼び出す必要があります。

引数には画像ファイル名(ファイルパス)を指定しましょう。

この状態のままでは、ブラウザで確認すると、エラーになります。

http://xxxxx.c9users.io:8080/top/profile

※xxxxxの部分は環境により異なります。

上の図のエラー内容は、image_tagメソッドで呼び出そうとしている画像が、読み取れない状態にあるという内容です。

画像を読み取れる状態にするには、下記のファイルに追記する必要があります。

config/initializers/assets.rb

複数のコメントアウトされている行がありますが、この中の

＃Rails.application.config.assets.precompile+=%w(search.js)

このように記述されている箇所のコメントアウトを外します。

そして、search.jsと記述されている箇所を**.png* **.jpg* ** .jpeg * **.gif*と書き換えましょう。

＃ Be sure to restart your server when you modify this file.

＃ Version of your assets, change this if you want to expire all your assets.
Rails.application.config.assets.version = '1.0'

＃ Add additional assets to the asset load path
＃ Rails.application.config.assets.paths << Emoji.images_path

＃ Precompile additional assets.
＃ application.js, application.css, and all non-JS/CSS in app/assets folder are already added.
Rails.application.config.assets.precompile += %w( *.png *.jpg *.jpeg *.gif )

上記コードのようにします。

こうすることで、image_tagメソッドを実行した際に、読み取れる状態になります。

内容としては、*(アスタリスク)はワイルドカードと呼ばれ、「全ての」という意味になります。従って、全てのpng、全てのjpg、全てのjpeg、全てのgifファイルを読み取れる状態にするという意味になります。

※Jpeg画像には、jpgとjpegという２種類の拡張子が存在します。

追記後、

$ rails server -b 0.0.0.0 -p 8080

を実行し、サーバーを再起動して下さい。理由としては、configディレクトリの配下のファイルを修正した際は、基本的にはサーバーを再起動しなければ適用されないためです。

サーバーを再起動後、ブラウザで確認すると、

上の図のように表示されるはずです。

■ 画像やcssを配置するディレクトリ CSS: app/assets/stylesheets/ 画像: app/assets/images/ JS app/assets/javascripts/   画像をimage_tagメソッドで呼び出す場合は、config/initializers/assets.rbへの修正が必要である。

 

 

Try 自己紹介ページの作成   app/views/top/profile.html.erb と、app/assets/stylesheets/profile.cssを修正し、好きな画像を追加しながら自己紹介ページを作成して下さい。

JSファイルについて

js(JavaScript)ファイルを配置するディレクトリはapp/assets/javascripts/になります。

$railsnewを行った時点で、app/assets/javascripts/application.jsファイルが生成されています。application.jsに記述された内容は、アプリケーション全体に影響します。

ファイル内に

//= require jquery

//= require jquery_ujs

//= require turbolinks

//= require_tree .

という記述がありますが、こちらもcss同様、コメントアウトではなく意味のあるコードになります。内容としても、cssファイルに記述されているものと同様になります。

この章ではJavaScriptについては触れませんが、JavaScriptを修正する際はこのディレクトリにファイルを作成して下さい。

NEXT LESSON ☛ 変数を活用しよう！

PREV LESSON ☛ レイアウトを活用しよう！

目次　- Ruby & Ruby on Rails テキスト目次 -