dribbbleのようなモーダル兼詳細ページをRailsで作る（前半）

先日 Hugoのテーマ一覧を参照できるWebアプリを作成した のですが、この時に参考にしたサイトがあります。

Dribbble

言わずと知れた Dribbble です。 このサイト、画像をクリックするとmodalっぽく開く実装なのですが、リンクを別タブで開いても表示されます。 ◎ モーダル ◎ 別タブ

これをRailsアプリで実装したくなってきました。

やり方ざっくり

モーダルで表示する部分のデータをクライアント側（HTML or JS）に持たせても良いのですが、一覧ページの画像は結構な数があるので、このデータの取得をAjaxで都度取得する実装とすることにしました。
あと、UIはBootstrap使っているので、モーダルの操作はこちらのAPIを利用しています。
　

もう少し詳しく

1. 空のモーダルを用意する（HTML）
   以下、slimの例。ここは、まぁ公式ドキュメントを元に空のモーダルを1つ作っておくだけです。

1
2
3
4
5
6

#js-detail-modal.modal.fade aria-hidden="true" style="display: none;" tabindex="-1"
  .modal-dialog.modal-xl
    .d-flex.justify-content-end
      button.btn-close.btn-close-white aria-label="Close" data-bs-dismiss="modal" type="button"
    .modal-content
      #js-modal-body.modal-body

2. 一覧ページの画像に詳細ページのリンクをAjaxで追加（Rails）
   link_toのオプションに remote: true を設定しておきます。
   　
3. 詳細ページのviewは丸々partial化（Rails）
   これは、モーダル表示でのAjaxのための実装です。次の工程で利用します。（ここがポイントかな）
   　
4. partial化したviewをjs.erbにて、モーダルの中身を差し替え、モーダルの表示を行います。（Rails）

1
2

document.getElementById("js-modal-body").innerHTML = "<%= j(render 'theme')%>";
new Modal(document.getElementById('js-detail-modal')).show();

この Modalは、bootstrap.Modal です。webpackerのエントリーファイルで windowオブジェクトに突っ込んでいます。

1
2
3

// app/javascript/packs/application.js
import * as bootstrap from "bootstrap"
window.Modal = bootstrap.Modal;

残タスク

ここまでで、一応モーダルで表示するのと、別タブで表示するのは実装できました。

一見完了してそうなのですが、実はDribbbleではモーダル表示の際にURLを変更しています。 ここは、HTML5のHistory APIであるpushStateを利用しています。 いわゆるpjaxと呼ばれる実装ですね。 ここは実装してみて、少しハマったので、別記事で詳細記載したいと思います。

See Also

• Dribbble - Discover the World’s Top Designers & Creative Professionals
• Hugoのテーマ一覧を参照できるWebアプリを作成した
• Hugo Theme Gallery