r-labs

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

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

サンプルコード

* "表示":http://code.google.com/p/myoshida-rp/source/browse/trunk/Tips/#Tips%2Foriginal_image%2Fredmine_original_image

* "ダウンロード":http://code.google.com/p/myoshida-rp/downloads/detail?name=sample-orgimg.zip

!orignal_image.png!

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

<pre>

asset

  ├ images

  ├ javascripts

  └ stylesheets

</pre>

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

<pre>

    plugin_assets/プラグイン名

</pre>

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

独自のアイコンを使いたい場合、まずアイコン画像とそれを使うための css ファイルを用意します。

サンプルでは @R@ と書いただけの簡単な画像とそれを icon-rimg というクラス名で定義した @bar.css@ を作っています。

<pre><code class="css">

.icon-rimg {

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

}

</code></pre>

そのアイコンを実際に使ってみます。

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

<pre><code class="rhtml">

<% content_for :header_tags do %>

<%= stylesheet_link_tag 'bar.css', :plugin => 'redmine_original_image' %>

<% end %>

</code></pre>

*content_for* はブロックの中身を第一引数で指定したところに挿入する rails のメソッドです。 *:header_tags* でヘッダ内を指定したことになります。

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

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

<pre><code class="rhtml">

<span class='icon icon-rimg'> test1 </span> <br />

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

</code></pre>