• ログインログイン
  • 新規登録新規登録

MENU

文系の私がエンジニアになっていくお話(Ruby on Rails編 第5回)

連載文系の私がエンジニアになっていくお話(Ruby on Rails編)

文系出身学生が、Webサービスやアプリ開発に取り組み、エンジニアになるべくどのように学習を進めていったのかの記録を紹介するコンテンツです。Ruby on RailsでのWebサービス開発の学習手順などを解説しています。

前回までのプログラミング学習コラムに続き5回目の勉強内容です。

コラムの連載をさせていただいている小林寛和(ひろかず)です。Ruby on Railsのコラムの第5回目となります。今回は予告とは変わってしまいますが、Ruby on Railsでアプリ開発におけるCSSの適用について記事にしてみました。

Railsの基礎知識(CSS関連編)

CSSの書き方

Viewの作り方と、そこにHTMLを書くことはわかりましたが、デザインの肝となるCSSはどこに書くのでしょうか。CSSは「アプリのホームディレクトリ /app/assets/stylesheets 」の中に置きます。この際、対応するモデルごとにCSSファイルを分けて作成します。つまり、同じモデルのViewならば全て同じスタイルが適用されるのです。

また、作成するファイルは「.css」の形式ではなく、「.css.scss」というファイル形式になります。こうすることでViewの方からCSSを呼び込む必要は無くなり、同じモデルなら自動的に適用されます。

画像ファイルの置き場所と引用方法

同じく画像ファイルも「ホームディレクトリ/app/assets/images」の中に配置します。どのViewからでもこのディレクトリが参照されます。

画像にリンクを付ける

画像にリンクを付けるには下記のように書きます。


要は、リンクタグを生成し、その中で通常文字を指定するところにイメージタグを埋め込んでいるのです。こうすれば無事に画像にリンクを付けることが出来ます。

CSSやJavascriptから画像を参照する(相対パス指定)

CSSやJavascriptから画像を参照する場合、相対パス指定をすることが出来ますが、Railsの場合は下記のように記述します。

background-image: url(/assets/blog_image.png);

注意しなければいけない点は、/assets/images/hogehogeではなく、/assets/hogehogeというようにimagesディレクトリの指定が省かれることです。これは相対パス指定全般において言えるので、別の処理で参照できなかった場合はこのassets内のディレクトリを外して試してみましょう。

応用編

ブログ毎に別々の画像を動的に表示させる

ブログ毎の画像とは、つまりブログ毎にタイトル画像のようなものを設置し、動的に(自動的に)読み込みたいとします。恐らくデータベース上に画像をアップロードし、そこから引っ張ってくるのが一般的だと思いますが、意外と設定が面倒みたいです。私の考えた方法を使うと簡単に画像を動的に読み込むことが出来ます。

方法と言っても簡単なロジックで、画像ファイル名を「blog_image_1.png」のような名前にし、ブログのidと結びつけ、対象となるブログのView内にて画像を引用する際にファイル名の数字の部分のみブログIDを動的に埋め込んで参照するといった流れになります。

画像ファイルの名前を設定

要は画像ファイル名+ブログのID(数字)にすればいいので、ここでは仮に「blog_image_1.png」とします。そのファイルを通常通り assets/images の中に配置します。

Viewから画像を動的に参照

View側ではそのブログのIDを参照し、それを材料に画像を引っ張ってくる形になります。

blog.idだけではInteger型の返り値となってしまうため、String型に直してからつなげています。当然予めBlogのデータベース上に「image_url」等でカラムを作っておき、それを参照しても良いでしょう。

まとめ

今回はCSS関連の意外と重要度の高いTips的な情報を書いていきました。RailsでWebアプリを作る際にほぼ必須の知識となるので、全て抑えておきましょう。

次回予告

次回はブログサービスのコメントを例に、has_manyやbelongs_to等の解説をしたいと思います。

オススメ記事一覧

もっと見る
完全無料!

1で登録完了!

エンジニアの仕事・年収や選考ノウハウ記事が読めるほか、
会員にはプログラミング講習やES・面接対策などリアルな無料サポートも充実。
ここだけの求人情報も多数。

今すぐ新規会員登録
Page Top