[Redmine] ヘッダーメニューに任意の項目を追加する

Redmineのヘッダー部分に独自のメニューを追加します。
GoogleDriveやGitHubなど、プロジェクトで利用しているツールに移動するのが格段に楽チンになります。

今回はView Customizeプラグインを利用して実装します。インストール方法などは以下の記事をご覧ください。

[Redmine] view customize pluginをインストールする

https://blog.katsubemakito.net/redmine/install-viewcustomize

Redmineを利用していると、プラグインを入れるほどではないけど細かいちょっとした部分をカスタマイズしたい欲求に襲われることが毎日のようにあります。しかしRedmineのソース自体に手を入れてしまうとバージョンアップ時に移行が面倒なことになってしまう。そんな時に使うのがRedmine view customize pluginです。原理はシンプルで、Redmineの指定したページにHTMLやCSS、JavaScriptを埋め込めるというだけの物です。データはすべてDBに保存されますのでバージョンアップ時に困ることもありません。今回はインストールから簡単なカス...

ねこの足跡R

設定する

メニューの追加

「パスのパターン」や「プロジェクトのパターン」「挿入位置」は要件に合う物を設定してください。「種別」はJavaScriptを選択。

コード欄には以下のようなJavaScriptを入力します。

$(document).ready(function(){
  // メニューの準備
  const menus = `
<li><a href="https://drive.google.com" target="_blank" rel="noopener noreferrer">GoogleDrive</a></li>
<li><a href="https://github.com" target="_blank" rel="noopener noreferrer">GitHub</a></li>
`;

  // 追加する
  $('#top-menu>ul').append(menus);
});

すると以下のようにヘッダーの末尾に追加することができます。

アイコンに置き換える

テキストリンクでも機能的には問題ないのですが、ちょっとダサい感じがするのでアイコンに置き換えます。ここではFontAwesomeを利用しました。

まずはFontAwesomeを利用する際に必要なCSSをheadタグ内に埋め込みます。ViewCustomizeプラグインを利用するか、Redmineのテンプレート(app/views/layouts/base.html.erb)に直接記入します。

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.14.0/css/all.css" integrity="sha384-HzLeBuhoNPvSl5KYnjx0BT+WB0QEEqLprO+NBkkk5gbc67FTaL7XIGa2w1L0Xbgc" crossorigin="anonymous">

あとは先ほどのJavaScriptのHTML部分を以下のように変更してやるだけ。

<li><a href="https://drive.google.com/" target="_blank" rel="noopener noreferrer"><i class="fab fa-google-drive fa-lg"></i></a></li>
<li><a href="https://github.com/" target="_blank" rel="noopener noreferrer"><i class="fab fa-github fa-lg"></i></a></li>

するとご覧のようにGoogleDriveとGitHubのアイコンに置き換えることができました。こっちの方がスペースも取らず直感的にわかりますね。

この他にも様々なアイコンがFontAwesomeには用意されていますのでお好きな物を利用してください。

参考ページ

• FontAwesome
  • GitHub
  • GoogleDrive

このブログを応援する

お寄せいただいたお気持ちは全額サーバ代や次の記事を執筆するための原資として活用させていただいております。この記事が参考になった場合などぜひご検討ください。

PayPalで300円支払う
※金額は任意で変更できます。
※100円でも泣いて喜びますw
※住所の入力欄が現れた場合は「no needed」を選択ください
これまでのご協力者さま

- Sponsored Link -