今回はRuby on Railsで画像に対してリンク設定をやろうと思います。
最終的にはECサイトを作成したいと思います。
今回の内容の詳しくはコチラ→image_tagメソッドを使ったイメージタグの作成
環境
| OS/ミドルウェア | バージョン |
|---|---|
| CentOS | 7.2.1511 |
| ruby | 2.4.2p198 |
| Rails | 5.1.4 |
画像の設置場所
アプリケーションの中で使用される画像ファイルの設置場所として、「app/assets/images」ディレクトリです。(デフォルトで画像ファイルが1つ設置されています)。
今回は「logo_001.png」の画像を使用したいので、画像をアップします。
[ファイルの確認]
|
1 |
$ ls -al |
[実行結果]
|
1 2 3 4 5 |
total 20 drwxrwxr-x 2 uchida uchida 4096 Dec 15 19:52 . drwxrwxr-x 6 uchida uchida 4096 Dec 14 13:33 .. -rw-rw-r-- 1 uchida uchida 0 Dec 14 13:33 .keep -rw-r--r-- 1 uchida uchida 11753 Dec 15 19:52 logo_001.png |
画像に対してリンクを設定
「link_toメソッド」を使うことでリンクを出力することができますが、リンクを設定する文字列を指定する場所にimage_tagメソッドを記述することで画像に対してリンクを設定することができます。
「app/views/shopping/index.html.erb」
[ファイルの中身]
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
// ↓ ここから <div id="header"> <div class="nav-left"> <div id="head-logo"> <!-- 画像に対してリンクを設定 --> <%= link_to image_tag('logo_001.png'), '/' %> </div><!-- head-logo --> </div><!-- nav-left --> </div><!-- header --> // ↑ ここまで追加 <h1>Hello</h1> <p> 現在登録されているユーザは次のとおりです。 </p> <p> <!-- アクションから渡されてきたモデルクラスのオブジェクトの配列の数だけ順にメールアドレスとパスワードを取得して画面に表示 --> <% @users.each do |user| %> [メールアドレス] <%= user.email %>, [パスワード] <%= user.password %><br /> <% end %> </p> |
[link_toメソッド＆image_tagメソッド]
|
1 |
<%= link_to image_tag('画像'), 'リンク先' %> |
[link_toメソッド＆image_tagメソッドを使用した時の実際のHTML]
|
1 2 3 |
<%= link_to image_tag('logo_001.png'), '/' %> ↓ <a href="/"><img src="/assets/logo_001.png" alt="Logo 001" /></a> |
※画像の置き場所によってディレクトリは変更して下さい。
私の場合は、「app/assets/images/logo_001.png」に画像を置いているので、上記の設定になっています。
動作確認
それではRailsアプリケーションを起動してここまでの動作を確認してみます。ターミナルを起動し、起動させたいアプリケーションのルートディレクトリに移動して下さい。そして下記のコマンドを実行して下さい。
[Railsサーバ起動]
|
1 |
$ rails server -b 0.0.0.0 |
ブラウザから次のURLへアクセスして下さい。
|
1 |
http://☓☓☓.☓☓.☓☓☓.☓☓:3000/ |
これで一通りの作業が終了しました。
Ruby on Rails5でコントローラーからテンプレートの表示
Ruby on Rails5でモデルの作成とデータベースの利用
Ruby on Rails5でBootstrap4デザインにする
Ruby on Rails5で検索フォームと一体型になった検索ボタン作成方法
Ruby on Rails5でFontAwesomeを導入する方法(アイコンが使用可能)
Ruby on Rails5でBootstrap4のナビゲーションバーを使用する方法
Ruby on Rails5でBootstrap4のナビゲーションバーに画像(ロゴ)を設置
Ruby on Rails5でBootstrap4を使用しながらCSSを使用する
Ruby on Rails5でBootstrap4のドロップメニューをホバー表示する方法
Ruby on Rails5でBootstrap4のドロップメニューログインアイコンを作成
Ruby on Rails5でBootstrap4のドロップメニューでカートアイコンを作成
Ruby on Rails5でBootstrap4のドロップメニューで注文履歴を作成
