kengo700のナレッジベース

誰かの役に立つと思う情報を発信するブログ

RedmineのWikiで案内図(クリッカブルマップ)

この記事では、私たちの研究室のRedmine内に作成した案内図のページを紹介します。研究室に配属された学生が、どこに何があるか簡単に分かるようになっています。また画像内にリンクを張ることで、Redmine内の他のページへ移動できるようになっています。

Wikiによる案内図の概要

f:id:kengo700:20160126170006j:plain

この案内図ページでは、図の一部にマウスオーバーすると色が変わり、クリックすると関連するRedmineのページに移動できるようになっています(クリッカブルマップ)。

f:id:kengo700:20160126195543g:plain

例えば「学位論文」をクリックすると学位論文リストのWikiページ(詳しくはこちらの記事)を、「プリンタ」をクリックするとプリンタ管理用のチケットページ(詳しくはこちらの記事)を開くことができます。

RedmineのWikiでクリッカブルマップ

案内図ページのソースは下記のようになっています。

<img name="labmap" src="/mnt/ファイルサーバ名/share/map/デフォルトの画像ファイル" alt="マップ" usemap="#imgmap"><map name="imgmap">
<area alt="学位論文" coords="341,337 418,365" onMouseover="labmap.src='/mnt/ファイルサーバ名/share/map/色を付けた画像ファイル';" onMouseout="labmap.src='/mnt/ファイルサーバ名/share/map/デフォルトの画像ファイル';" shape="rect" href="学位論文リストのWikiページのURL">
<area alt="学位論文" coords="361,305 387,318" onMouseover="labmap.src='/mnt/ファイルサーバ名/share/map/色を付けた画像ファイル';" onMouseout="labmap.src='/mnt/ファイルサーバ名/share/map/デフォルトの画像ファイル';" shape="rect" href="学位論文リストのWikiページのURL">
(省略)
</map>

画像上の、ある座標にマウスが置かれたときに、表示される画像を差し替えることで色を変え、またリンクを張っています。私もだいぶ忘れてしまったので、詳しくは後述の「参考資料」のリンク先をご参照ください。

案内図の画像は、過去に先輩が大掃除のために作った図面のデータをパワーポイントの図形に変換して色付けし、画像ファイルを出力して作っています。

f:id:kengo700:20160126182941j:plain:w400

画像ファイルはファイルサーバの共有フォルダに置き、Redmineのサーバがファイルサーバをマウントすることで、それらの画像ファイルにアクセスしています。これにより、Redmineのサーバにアクセス権がないメンバーでも、画像を編集・修正することができるようになっています(もっと良い方法があるかもしれません)。ファイルサーバのマウント方法については、下記記事にまとめてあります。

Redmineでは各種HTMLタグが禁止されているので、下記ページの方法でimg、map、areaタグを有効にする必要があります。

リンク

参考資料

関連記事

kengo700.hatenablog.com

おわりに

案内図を作る方法としては、全くスマートではない(効率が悪い)と思います。修正が大変ですので、おそらく今後このページは整備されることはないでしょう。

しかし、思いついてしまったら、実現せずにはいられません。