JqueryでRedmineのメニューを閉じたり開いたりする方法
Redmine Advent Calendar 2023の6日目の記事として作成しました。
やりたいこと
Redmineのメニュー領域がかなり広いため、ユーザーが表示させたいチケットなどの情報を表示させる領域が相対的に狭くなるというデメリットがありました。
Redmineでサイドバーを非表示にするで紹介されているような、サイドバーの開閉に対応しているテーマを利用する理由も、作業領域の最大化に対するニーズがあるからです。
テーマやプラグインをインストールしても、Redmineのメニューを閉じたり開いたりすることができますが、今回は、もっと簡単に、JqueryでRedmineのメニューを閉じたり開いたりする方法を紹介いたします。
下図の動画が完成イメージです。
マウスクリックではなく、マウスオーバーでメニューを開閉できるため、より少ない労力で作業領域を広げたり、必要なメニューを表示させることができます。
＜JqueryでRedmineのメニューを閉じたり開いたりするサンプル画像＞
実現した方法
下記のプロセスでRedmineのメニューを開閉させます。
１）#top-menu要素の位置に#main-menu要素を移動させて、#header要素を非表示にします。
２）#sidebar要素の幅を最小化させ、#sidebar要素にマウスオーバーの時に、#sidebar要素を元に戻します。
具体的な方法を説明します。
1.1. #top-menu要素の位置に#main-menu要素を移動
#content要素と#sidebar要素にマウスオーバーしている時は元々の#top-menu要素と#header要素は非表示にして作業領域を最大化させます。
下図のようにトップメニューのかなり細い領域に「概要」、「活動」、「チケット」などのメニューが表示されています。
そのために、prependToを使って、#top-menu要素の位置に#main-menu要素を移動させます。
#main-menu要素の中に、「概要」、「活動」、「チケット」などのメニューが属しています。
メニュを最小化した状態では、「概要」、「活動」、「チケット」などのメニューを一番上の#top-menu要素の位置で表示させます。使用したソースは下記の通りです。
$("#content, #sidebar").hover(function () {
$("#header").hide();
$("#main-menu").prependTo("#top-menu");
$("#main-menu").css("position", "static");
});
1.2. #top-menu要素の位置に#main-menu要素を移動
#top-menu要素, #header要素, #main-menu要素にマウスオーバーしている時は、元々の#top-menu要素と#header要素を再度表示させて元のメニューが表示できるようにします。
#main-menu要素を元の#header要素内に戻します。
使用したソースは下記の通りです。
$("#top-menu, #header, #main-menu").hover(function () {
$("#header").show();
$("#main-menu").prependTo("#header");
$("#main-menu").css("position", "absolute");
});
2.1. #sidebar要素を表示
#sidebar要素にマウスオーバーしている時は#sidebar要素を表示させるために、#sidebar要素のwidthをデフォルトに戻します。#sidebar要素内のh3要素とul要素が非表示になっているため、再度表示させます。少しおしゃれにメニューを開閉させるために、transitionでアニメーション効果が入るようにしています。使用したソースは下記の通りです。
$("#sidebar").hover(function () {
$(this).css("width", "");
$("#sidebar h3, #sidebar ul").show().css({
opacity: "1",
transition: "opacity 0.2s"
});
$("#sidebar script").hide();
});
2.2. #sidebar要素を非表示
#content要素にマウスオーバーしている時は、#sidebar要素の幅を30pxとして、最小化させます。また、#sidebar要素内のh3要素とul要素を非表示にします。
下図のようにサイドバーは最小化して#content要素の領域を最大化させます。
使用したソースは下記の通りです。
$("#content").hover(function () {
$("#sidebar").css({
width: "30px",
transition: "width 0.5s"
});
$("#sidebar h3, #sidebar ul").css({
transition: "opacity 0.2s",
opacity: "0"
});
});
3.上記ののJqueryのスクリプトを実行する方法は色々とありますが、View Customizeで適用してみました。下図は実際の適用画面です。
＜Jqueryのスクリプト適用方法＞
感想
- メニュー領域を最小化させたいというニーズは少なからずあり、それを実現するためのプラグインやテーマがありますが、インストールする手間がかかりました。
- 今回の方法はJavaScript（Jquery）だけで実現できるので、かなりお手軽にRedmineの改善が実現できました。
- マウスクリックをトリガーにしないで、マウスオーバーをメニュー開閉のトリガーにしているので、マウスをクリックするという一手間を省いて作業領域の最大化をすることができます。
- サイドバーと上部のメニューが最小化されると、だいぶ作業領域が広がるので、可読性が向上できました。
この記事の作成者の紹介
山崎進
- Redmine、Jquery、JavaScript,Rails、Ruby、SQL、VBA、RPAの開発を行なっています。
- 自動化、業務の効率化に高い関心があります。
- 下記の媒体で情報を発信しています。Redmineのプラグインの開発などに対応が可能ですので、お気軽にご連絡ください。
* Qiita：https://qiita.com/ankosoft
* Twitter：https://twitter.com/yamasaki24
* Redmine Advent Calendarで記事投稿
* redmine.tokyoで講演多数
* Redmine Japan Vol.1 前夜祭、Redmine Japan Vol.3で講演
* https://ankosoft.co.jp/blog/
* https://technology.ankosoft.co.jp/
関連記事
* JqueryでRedmineのメニューにアイコンを入れる方法
* JqueryでRedmineのメニューを閉じたり開いたりする方法
* JqueryでRedmineの「活動ページ」をもっと便利に(タイトルを開閉したり、曜日を入れたり)
* JqueryでRedmineの「活動ページ」をもっと便利に②(フィルタリング機能と移動機能)
* JqueryでRedmineの「wikiページ」をもっと便利に(フィルタリング機能と移動機能)
* JqueryでRedmineの「チケットページ」をもっと便利に(年ごと、月ごと、四半期ごとの集計機能の開発)