Project

General

Profile

Actions

プラグイン独自のアイコンを使用する

前節でアイコンの使い方を説明しました。プラグインでアイコンを使いたい場合、テーマなどでアイコンも変えたりするので基本的にそれらの元から用意されているアイコンを使った方がいいと思います。しかし、望みのものがなくて自分で作ったものを使いたい時もあります。その場合の方法も紹介します。

サンプルコード

プラグインを作る場合、まずスケルトンを生成すると思いますが、そのとき asset ディレクトリが出来ます。その構成は以下のようになってます。

asset
  ├ images
  ├ javascripts
  └ stylesheets

プラグインで使いたい 画像、 javascript, css ファイルがある場合、それぞれの名前のディレクトリに格納します。 Redmine(Rails) は起動すると各プラグインの asset ディレクトリの中身を次のディレクトリにコピーします。

    plugin_assets/プラグイン名

プラグイン名というのは、プラグインのディレクトリ名であり、 init.rb の register メソッドで指定する名前です。この名前が一致していないとプラグインの画像ファイルなどが使えなくなるので、注意してください。

独自のアイコンを使いたい場合、まずアイコン画像とそれを使うための css ファイルを用意します。
サンプルでは R と書いただけの簡単な画像とそれを icon-rimg というクラス名で定義した bar.css を作っています。

.icon-rimg {
  background-image: url('../images/rimg.png');
}

そのアイコンを実際に使ってみます。
サンプルはアプリケーションメニューからただ表示するだけのページにしています。定義されたクラスを使うには その css ファイルを html のヘッダタグ内で link を使って指定する必要があります。指定している部分は以下のようになります。

<% content_for :header_tags do %>
<%= stylesheet_link_tag 'bar.css', :plugin => 'redmine_original_image' %>
<% end %>

content_for はブロックの中身を第一引数で指定したところに挿入する rails のメソッドです。 :header_tags でヘッダ内を指定したことになります。
そのブロック内で stylesheet_link_tag を使って css ファイルを指定します。このメソッドはスタイルシート用の link_to のようなもので、第一引数で css ファイル名を指定し、第二引数のオプションでプラグイン名を指定します。これでメソッド内で plugin_assets/... のパスを考えて link タグとして返してくれます。

この定義したクラスを使う例は次のようになります。

<span class='icon icon-rimg'> test1 </span> <br />
<%= link_to "test2", {:controller => :foo, :action => :show}, :class => 'icon icon-rimg' %>

Updated by Mitsuyoshi Yoshida about 8 years ago · 5 revisions