CSSの編集、画像の配置
今までに、少なくとも下記の2つの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を開いてください。
![Ruby_on_Rails_css1](//s3-ap-northeast-1.amazonaws.com/mash-jp/staging/uploads/1901/31fb9f38feb65b1accc25e0538d508d715d951bb.1901.original.png?1488163756)
stylesheet_link_tagの第1引数で指定されている、’application’というのは、app/assets/stylesheets/application.cssを指しています。
app/assets/stylesheets/application.cssを開いてください。
![Ruby_on_Rails_css2](//s3-ap-northeast-1.amazonaws.com/mash-jp/staging/uploads/1901/30c9e2782e9f0c59a0da2da8666a32f545d05121.1902.original.png?1488163757)
上の図のように、コメントアウトされた行がたくさんあり、英文が記述されています。
ここで注目していただきたいのが、13行目と14行目です。
*= 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/配下に作成してみましょう。
![Ruby_on_Rails_css3](//s3-ap-northeast-1.amazonaws.com/mash-jp/staging/uploads/1901/b2526c86bf863dec307a76fbebd94b9fcb72b490.1903.original.png?1488163758)
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の部分は環境により異なります。
![Ruby_on_Rails_css4](//s3-ap-northeast-1.amazonaws.com/mash-jp/staging/uploads/1901/a80a6678fa430121ecc291bf4dcf2d27ab283d06.1904.original.png?1488163759)
文言が中央よりになり、cssが適用されていることがわかります。
続いて、画像を挿入します。
サンプル画像:https://s3-ap-northeast-1.amazonaws.com/codecamp-image/noimage.png
![Ruby_on_Rails_css5](//s3-ap-northeast-1.amazonaws.com/mash-jp/staging/uploads/1901/6d3211de24f545a8f6242f2e05961de09a7a65c9.1905.original.png?1488163759)
![Ruby_on_Rails_css6](//s3-ap-northeast-1.amazonaws.com/mash-jp/staging/uploads/1901/f58488d89546773dc573388dc1f754b42b49b026.1906.original.png?1488163760)
アップロード方法は上の図の赤枠部分をクリックし、モーダルウィンドウを出現させます。
![Ruby_on_Rails_css7](//s3-ap-northeast-1.amazonaws.com/mash-jp/staging/uploads/1901/2b631272f3914ad68399ca37b2eeea714d2c6829.1907.original.png?1488163761)
モーダルウィンドウ上の、DRAG&DROPの部分にローカルに保存した画像をドラッグすると、任意のディレクトリにファイルを配置することができます。
![Ruby_on_Rails_css8](//s3-ap-northeast-1.amazonaws.com/mash-jp/staging/uploads/1901/8b92ebcc7520fe436156b99f7d2be8b4686a921d.1908.original.png?1488163761)
上の図の位置に配置できていれば問題ありません。
app/views/top/profile.html.erbを開き、下記を1行追加して下さい。
<%= image_tag 'noimage.png' %>
画像を表示するにはViewで、image_tagメソッドを呼び出す必要があります。
引数には画像ファイル名(ファイルパス)を指定しましょう。
![Ruby_on_Rails_css9](//s3-ap-northeast-1.amazonaws.com/mash-jp/staging/uploads/1901/03c342a614e0fb0e7b273bb21c094392f520ac28.1909.original.png?1488163762)
この状態のままでは、ブラウザで確認すると、エラーになります。
http://xxxxx.c9users.io:8080/top/profile
※xxxxxの部分は環境により異なります。
![Ruby_on_Rails_css10](//s3-ap-northeast-1.amazonaws.com/mash-jp/staging/uploads/1901/aebb269f1793d570326faf896380ca3fb1e4fb9b.1910.original.png?1488163762)
上の図のエラー内容は、image_tagメソッドで呼び出そうとしている画像が、読み取れない状態にあるという内容です。
画像を読み取れる状態にするには、下記のファイルに追記する必要があります。
config/initializers/assets.rb
![Ruby_on_Rails_css11](//s3-ap-northeast-1.amazonaws.com/mash-jp/staging/uploads/1901/929cfe39df4c8aabb4e52d30bc5ff110d2352a51.1911.original.png?1488163763)
複数のコメントアウトされている行がありますが、この中の
#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という2種類の拡張子が存在します。
追記後、
$ rails server -b 0.0.0.0 -p 8080
を実行し、サーバーを再起動して下さい。理由としては、configディレクトリの配下のファイルを修正した際は、基本的にはサーバーを再起動しなければ適用されないためです。
サーバーを再起動後、ブラウザで確認すると、
![Ruby_on_Rails_css12](//s3-ap-northeast-1.amazonaws.com/mash-jp/staging/uploads/1901/2ee1aa43aef4fd57145b0f8288b0561a003470ce.1912.original.png?1488163764)
上の図のように表示されるはずです。
■ 画像や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に記述された内容は、アプリケーション全体に影響します。
![Ruby_on_Rails_css13](//s3-ap-northeast-1.amazonaws.com/mash-jp/staging/uploads/1901/02fafc57e7777d371f1d677fb3a4a929818d5355.1913.original.png?1488163764)
ファイル内に
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require_tree .
という記述がありますが、こちらもcss同様、コメントアウトではなく意味のあるコードになります。内容としても、cssファイルに記述されているものと同様になります。
この章ではJavaScriptについては触れませんが、JavaScriptを修正する際はこのディレクトリにファイルを作成して下さい。