こんにちは、qiita記事初投稿です！
筆者は大学生限定のプログラミングスクール「GeekSalon」でメンターをしています！
興味のある方や話だけでも聞いてみてい方はぜひのぞいてみてください👍
さっそく今回の本題に入っていきます！
今回はモーダルウインドウを用いて、以下のように投稿した画像を拡大表示できる機能を、Bootstrapだけを用いて実装していきます！
（※Javascriptの記述は行いません）
完成イメージとしてはこんな感じです↓↓↓
このように、投稿された画像をクリックすると、画像が拡大されて表示される機能をBootstrapを用いて実装していきます！
##本記事を書くに至った背景
筆者は初心者なため、JavascriptではなくBootstrapのModalを用いてモーダルウインドウを実装していました。そんなある日、投稿された画像をクリックすると画像が拡大される機能をモーダルを用いて実装したいと考え記事を探したのですが、出てくる記事はJavascriptを用いて実装しているものばかりでBootstrapを用いているものがなかなかありませんでした。また、
そのため今回は、Bootstrapだけを用いて投稿された画像を拡大表示できる機能を実装する方法を説明していきます。
本記事の目的はモーダルによる画像拡大の実装であり、その後の装飾などは一切行いません
##実装環境
Ruby 3.0.2-1
Bootstrap 4.3
（※投稿機能、画像投稿機能は実装済み、Bootstrapも導入済みという前提で記事を書いていきます。）
##実装① ～トリガーボタンの実装～
まずはBootstrapのModalから自分が用いたいモーダルを探してきます。今回筆者はLarge modalを使用しました。Large modalの記述は以下の通りです。
<!-- Large modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-lg">Large modal</button>
<div class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
...
</div>
</div>
</div>
では、トリガーボタン（クリックする画像）を実装していきましょう。まずは以下の記述に、
#省略
<% @tweets.each do |t| %>
<div class="tweet">
<%= t.user.name %>
<%= image_tag t.image_url, size: "250x200" if t.image? %>
<%= t.body %>
#省略
トリガーボタンの記述を加えていきます。
トリガーボタンの記述を加えた後の記述はこんな感じです
#省略
<% @tweets.each do |t| %>
<div class="tweet">
<%= t.user.name %>
<button data-toggle="modal" data-target=".bd-example-modal-lg">
<%= image_tag t.image_url, size: "250x200" if t.image? %>
</button>
<%= t.body %>
#省略
今回は文字ではなく画像をトリガーボタンにしたいため、このように記述しましょう。その際、type="button" class="btn btn-primary"はトリガーボタンの装飾に関する記述のため、画像をトリガーボタンにする場合は省いて大丈夫です。また、<button>タグで記述すると、ボタンの装飾で投稿された画像が四角の黒枠で囲われてしまいます。そのため、以下のように<div>タグで記述してあげると、黒枠で画像が囲われることなく、画像を投稿されたままの形で表示しつつモーダルのトリガーボタンにすることができます。
#省略
<% @tweets.each do |t| %>
<div class="tweet">
<%= t.user.name %>
<div data-toggle="modal" data-target=".bd-example-modal-lg">
<%= image_tag t.image_url, size: "250x200" if t.image? %>
</div>
<%= t.body %>
#省略
以上までの記述で投稿された画像をモーダルウインドウを開くためのトリガーボタンにすることができました！
##実装② ～モーダルウインドウの実装～
では画像をクリックした際に表示するモーダルウインドウを実装していきます。
まず、Bootstrapのモーダルウインドウに関する記述部分を、投稿が表示されるページの以下の部分に記述していきます。
#省略
<% @tweets.each do |t| %>
#この部分の適当な箇所に記述
<% end %>
#省略
そして、モーダルウインドウの中身にあたる画像を拡大表示する部分に、<%= image_tag t.image_url, size: "900x450" %>を記述していきます。注意点としては、モーダルウインドウの中身にあたる部分の画像は、サイズの部分を大きめに書いておくということくらいです。完成イメージは以下のようになります。
#省略
<div class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<%= image_tag t.image_url, size: "800x450" if t.image? %>
</div>
</div>
</div>
<% end %>
</div>
さて、これだけで画像をクリックすると画像が拡大表示される機能の実装が終わりました。
どうでしょう？
しっかりと実装できていることを確認してみてください！
・
・
・
・
・
確認したら、まだ十分に実装できていないことに気が付くはずです。
つまり、このままだとどの投稿の画像をクリックしたとしても、１番目に来ている投稿の画像が表示されてしまいます。
ではなぜ、このようなことが起こってしまっているのでしょうか？
・
・
・
・
・
それは、投稿画像につけたトリガーボタンとモーダルウインドウに投稿のＩＤを紐づけることができていないからです。
つまり、今の状態では、トリガーボタンもモーダルウインドウも、どの投稿に紐づいた画像がクリックされたのか、またどの投稿に紐づいた画像を表示したらいいのかを認識できていない状態です。
では、トリガーボタン部分とモーダルウインドウに投稿のＩＤを紐づけていきましょう。
##実装③ ～投稿ＩＤの紐づけ～
まずはトリガーボタン部分に投稿ＩＤを紐づけていきます。紐づけの仕方としては、今の記述を以下のように変更します。
#省略
<button data-toggle="modal" data-target=".bd-example-modal-lg-<%= t.id %>">
#↑に-<%= t.id %>"を追記
<%= image_tag t.image_url, size: "250x200" if t.image? %>
</button>
#省略
このように記述することで、Classに動的にＩＤを追加することができます。
では同様にモーダルウインドウのほうにも記述を加えていきます。変更後は以下のようになっています。
#省略
<div class="modal fade bd-example-modal-lg-<%= t.id %>" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
#↑に-<%= t.id %>"を追記
<div class="modal-dialog modal-lg">
<div class="modal-content">
<%= image_tag t.image_url, size: "800x450" if t.image? %>
</div>
</div>
</div>
<% end %>
</div>
これで完了です！
もう一度実装できているかどうかを確認してみてください！
どうでしょうか、今回はしっかりとクリックした画像が拡大表示されているはずです！
今回は装飾は全く行っていません。
画像の大きさ、装飾等については各自モーダルウインドウの中身をいじっていいかんじにしてもらえると嬉しいです！
ここまで実装お疲れ様でした！