前提について

はじめまして、 プログラミングスクールに通っていたいりふねと申します。この記事は、スクールの課題である個人アプリの開発の記録を書くことで、自身のアウトプットに利用しています。もし、読んでいただけた方がいましたら、フィードバックをしていただけたら嬉しいです。

開発するのは「有給休暇管理ツール」です。仕様は過去記事をどうぞ。

アプリはデプロイまで行いますが、サービスとして提供するものではありません。あくまでも自学習の一環ですので、ご理解下さい。では本題へどうぞ。

今回の実施内容

作成中のアプリのビューのうち、サイドメニュー部分の表示と非表示を切り替えたいと言うのが、今回の内容になります。というのもこの個人アプリを見た方から「iPadのようなモバイル端末でも見られるようにしないと企業の管理者としては使いづらいのでは？」というフィードバックを頂いたためです。たしかに。。。
具体的には以下の手順で実装しました。

application.html.hamlを編集
サイドメニューのクラス名を変更
サイドメニューのCSSを変更
サイドメニューの表示非表示の切り替えボタンを設置
表示と非表示を切り替えるjsファイルの作成

開発環境

Rails 5.2.4.3
ビューは、HamlとSCSSで作成
jQueryが使用できる状態
Herokuを使用してデプロイ済み

デモ

今回は、「jQuery sidebar」というサイドバーを設置するためのプラグインを使用します。まずは、どんな動きをするのか以下の画像でご確認下さい。実際に触ってみたい方は、参考記事jQuery Sidebar 3.3.2からご確認いただけます。

・・・おわかりいただけただろうか。

サイドメニューと言っても、上や下からもメニューを呼び出せるようです。今回実装したのは、左から出てくるメニューのみですが、記述を少し変えれば色々と使えそう。

参考記事

今回もいくつか参考記事を使用しました。
【jQuery】簡単に設置できる！横から出てくるサイドバーを実装できる「jQuery Sidebar」
【公式】jQuery Sidebar 3.3.2
【GitHub】jillix/jQuery-sidebar

application.html.hamlを編集

まずは、application.html.hamlに「jQuery Sidebar」プラグインを読み込ませる記述を追加していきます。4と5行目のscriptタグが追記箇所になります。

app/views/layput/application.html.haml

  %head
    %meta{:content => "text/html; charset=UTF-8", "http-equiv": "Content-Type"}/
    %title Backyard
    %script{src: "//code.jquery.com/jquery-1.10.2.min.js" }
    %script{src: "//jillix.github.io/jQuery-sidebar/js/handlers.js" }

scriptタグのsrc属性がスラッシュから記述されている点に違和感を感じると思います。こちらの引用元は先程のGitHub内の「demo.html」となります。

元の記述では、スラッシュの前に「http:」が付いた状態でしたが、この状態ではどうしてもデプロイした際にプラグインが読み込まれないという状態になりました。これについては、こちらの参考記事を読ませていただきました。

herokuに上げたらニコニコ動画が取ってこれなくなった〜httpsは魔物でござるの巻〜

サイドメニューのクラス名を変更

今回サイドメニューは、部分テンプレートで切り出しています。このビューファイルの先頭部分に記入している一番の親要素にあたるdivタグのクラス名を「sidebar left」に変更します。

_side.html.haml

.sidebar.left　←作成中のサイドメニューの一番大きなdivタグを変更
  .sidebar__lists 　←クラス名をBEMで書いている方は2行目以降もsidebarに書き換え
    - current_user.branches.each do |branch|
      .list
        .list__top
以下省略

念のため、検証ツールで確認しておきます。以下のようなクラス名になっていればOKです。

今回は、左から出現するサイドメニューを想定していますが、それ以外の場合は、「left」部分を「right」「top」「bottom」のいずれかに変更すればOKだと思います（未検証）。

サイドメニューのCSSを変更

サイドメニューを左側に固定するためにCSSの記述を変更します。今回は、必要箇所のみ紹介していますが、アプリに合わせてサイドメニューのCSSを適宜記述して下さい。

_side.scss

  .sidebar{
    position: fixed;
  }
 
  .sidebar.left {
    top: 0;
    left: 0;
    bottom: 0;
  }

この段階でビューを確認します。サイドメニューが左に固定され、メイン部分のビューが下に回り込んでいればOKです。

なお、上、右、下からメニューを表示させたい場合はCSSの記述が異なってくるので、ご注意下さい。参考記事【jQuery】簡単に設置できる！横から出てくるサイドバーを実装できる「jQuery Sidebar」内にその他の場合のCSSの記述が掲載されています。リスト6と書かれたコード見本部分になります。

サイドメニューの表示非表示の切り替えボタンを設置

jQueryによって表示と非表示を切り替えますが、イベント発火させるためのボタンを設置します。カスタムデータ属性の記述がhamlは、少し特殊になります。

_mainheader.html.haml

.nav__ragistation
  = link_to "#", {class: "btn link", data:{action:'toggle', side:'left'}} do
    メニュー

また、今回は、サイドバーを出現させるとメインヘッダー部分のボタンが隠れてしまうので、サイドメニュー本体にも表示の切り替えボタンを設置します。全く同じ記述内容です。

_side.html.haml

.sidebar__closed
  = link_to "#", {class: "btn", data:{action:'toggle', side:'left'}} do
    メニューを閉じる

検証ツールで正しく属性が設定されているか確認します。

以下のように確認できればOKです。hamlではなく、htmlで記載する場合のカスタムデータ属性はそのまま「data-action」や「data-side」と入力すれば良いようです。

こちらの記述もまた、上や右、下からメニューを表示させたい場合は、data-side属性がleft以外の値（right、top、bottom）になるので注意が必要です。

表示と非表示を切り替えるjsファイルの作成

app/asset/javascriptsディレクトリ内に新規で、「sidebar.js」というファイルを作成します。ファイル名はお好みで決めて大丈夫だと思います。jsファイルの中身は、GitHubのjsファイルの記述をまるごとコピーします。

app/asset/javascripts/sidebar.js

長いので、具体的な記述はカットします。
リンク内の149行全てをコピー＆ペーストすればOKです。

動作確認

最後にブラウザで挙動を確認します。

まとめ

文字量が多くなりましたが、手順としてはそれほど難しくなかったように感じます。最終的にjsファイルを丸ごとコピーというのも下品だったと思うので、今後は内容の理解に勤めたいと思います。