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

## JqueryでRedmineのメニューにアイコンを入れる方法
[Redmine Advent Calendar 2023](https://adventar.org/calendars/8974)の５日目の記事として作成しました。

* * *
### やりたいこと

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




![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3633321/f92499f9-47f3-e229-45d3-19850bdb7daf.png)
　　　　　　　　　＜現状のデフォルトのRedmineのメニュー画面＞

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3633321/1b3d6ac4-307b-7ed5-57c2-1b0c8c1d1e5b.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3633321/36839ade-88b5-935b-be37-3bb71ef3e38b.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3633321/93edf247-5e2c-4cb4-4285-18735acfdfc0.png)

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


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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3633321/468bb989-82fe-d0cf-b601-4e1b8d21d73d.png)
　　　　　　　　　![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3633321/3c437e8a-8c9d-1f17-6c21-7307fc4fdea6.png)

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

* * *         
### 実現した方法

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

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

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


１）はお好みのアイコンを選択します。Ioniconsは2023年現在、MIT Licenseで提供されています。各自の責任でご利用ください。
２）メニューの位置が「top-menu」と「main-menu」があります。ブラウザのデベロッパーツールで要素の定義を確認します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3633321/04ec93d4-c50c-8765-6279-b5bf0d33e8e7.png)



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

```JavaScript
  // #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の各要素に挿入するサンプル例
```JavaScript
  // #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の各要素に挿入するサンプル例
```JavaScript
$('#main-menu > ul > li:nth-child(2) > a').each(function() {
  $(this).html('<ion-icon name="chatbox-ellipses-outline"></ion-icon>' + $(this).html());
});  
```

アイコンに「padding-right」を指定
```JavaScript
 $('ion-icon').css('padding-right', '3px');
```

メニューのテキストをtitle属性に反映して、マウスオーバー時にメニュー名が表示される処理は下記の通りです。
```JavaScript
//メニューのテキストを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](https://github.com/onozaty/redmine-view-customize/blob/master/README.ja.md)を使うのが便利だと思います。







* * *
### 感想

* メニューにアイコンが表示されるだけで、だいぶメニューの雰囲気が変わったことが実感できました。
* 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/


* * *
#### 関連記事

### 関連記事

 *　[JqueryでRedmineのメニューにアイコンを入れる方法](https://qiita.com/yam_asaki/items/32097598cb0a653dd916)

 *　[JqueryでRedmineのメニューを閉じたり開いたりする方法](https://qiita.com/yam_asaki/items/5ac4a1127beeed53059c)

　*　[JqueryでRedmineの「活動ページ」をもっと便利に(タイトルを開閉したり、曜日を入れたり)](https://qiita.com/yam_asaki/items/718513b52b30b30f65bc)

　*　[JqueryでRedmineの「活動ページ」をもっと便利に②(フィルタリング機能と移動機能)](https://qiita.com/yam_asaki/items/2428610fd89bc73ce0ab)

　*　[JqueryでRedmineの「wikiページ」をもっと便利に(フィルタリング機能と移動機能)](https://qiita.com/yam_asaki/items/a6a32c45dbbc72a28836)

　*　[JqueryでRedmineの「チケットページ」をもっと便利に(年ごと、月ごと、四半期ごとの集計機能の開発)](https://qiita.com/yam_asaki/items/176d07588793b3e66b5d)

　*　[RedmineのパスワードやログインIDを忘れた時の復旧方法](https://qiita.com/yam_asaki/items/6881c92b30dc85f589ad)

　*　[「rails console」を使ってRedmine上のスケジュールを一括変更する方法](https://qiita.com/yam_asaki/items/1d41dc8653773f3522e6)