JqueryでRedmineのメニューにアイコンを入れる方法 #JavaScript - Qiita

JqueryでRedmineのメニューにアイコンを入れる方法

Redmine Advent Calendar 2023の５日目の記事として作成しました。

やりたいこと

デフォルトのRedmineのメニューにはテキストだけが表示され、アイコンが表示されていません。
現在のUIではテキストの代わりにアイコンが多用されており、デフォルトのRedmineのメニューは堅苦しい感があります。

　　　　　　　　　＜現状のデフォルトのRedmineのメニュー画面＞

既存のデフォルトのRedmineのメニューにアイコンを挿入してみました。

　　　　　　　　　＜Redmineのメニューにアイコンを追加した画面＞

既存のデフォルトのRedmineのメニューのテキストを削除して、アイコンだけを表示させ、マウスオーバー時に、メニュー名が表示されるようにしてみました。

　　　　　　　　　＜Redmineのメニューからテキストを削除してアイコンだけ表示＞

実現した方法

下記のプロセスでRedmineのメニューにアイコンを追加します。

１）https://ionic.io/ioniconsからRedmineのメニューで表示させるアイコンを選択します。
２）Jqueryを使ってIoniconsのインストール用のスクリプトと１）のアイコンをRedmineのメニューに追加させます。
３）上記の２）のJqueryのスクリプトを実行します。

具体的な方法を説明します。

１）はお好みのアイコンを選択します。Ioniconsは2023年現在、MIT Licenseで提供されています。各自の責任でご利用ください。
２）メニューの位置が「top-menu」と「main-menu」があります。ブラウザのデベロッパーツールで要素の定義を確認します。

Ioniconsのインストール用のスクリプトを挿入します。

  // #ajax-modal 要素の後にスクリプトを挿入
  $('#ajax-modal').after(
      '<script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>' +
      '<script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>'
  );

アイコンをtop-menuの各要素に挿入するサンプル例

  // #top-menu > ul > li:nth-child(1) > a 要素の直前に ion-icon を挿入
  $('#top-menu > ul > li:nth-child(1) > a').before(
      '<ion-icon name="home-outline"></ion-icon>'
  );

アイコンをtop-menuの各要素に挿入するサンプル例

$('#main-menu > ul > li:nth-child(2) > a').each(function() {
  $(this).html('<ion-icon name="chatbox-ellipses-outline"></ion-icon>' + $(this).html());
});

アイコンに「padding-right」を指定

 $('ion-icon').css('padding-right', '3px');

メニューのテキストをtitle属性に反映して、マウスオーバー時にメニュー名が表示される処理は下記の通りです。

//メニューのテキストをtitle属性に反映、これによりマウスオーバー時にメニュー名が表示される
$('#main-menu > ul a').each(function() {
  $(this).attr('title', $(this).text());
});

//メニューのテキストを削除してアイコンだけ表示させる
$('#main-menu > ul a').contents().filter(function() {
  return this.nodeType === 3; 
}).remove();

３）上記の２）のJqueryのスクリプトを実行する方法は色々とありますが、View Customizeを使うのが便利だと思います。

感想

メニューにアイコンが表示されるだけで、だいぶメニューの雰囲気が変わったことが実感できました。
JavaScript（Jquery）だけで実現できるので、かなりお手軽にRedmineの改善が実現できました。
Ioniconsには多様なアイコンがあるのですが、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/