Redmine内で文字のスタイルや表現を豊かにしてくれるツールバーボタン、使ってますか？ 全社Redmineの最重要プラグインの一つ、ツールバーボタンを拡張する『jsToolbar Buttons Extension』プラグインについてご紹介します。 これを使って"赤文字"、"青文字"、"Webページ呼び出し"、"テキスト折り畳み"、"ファイルサーバへのリンク"ボタンを作成しています。 発表: 2016-03-05（土）RxTStudy #14 「Redmineの未来を考える - 機能・運用・コミュニティ」＠大阪 https://rxtstudy.doorkeeper.jp/events/36338 前作: ある工場のRedmine +(Plus) (2015/11) http://www.slideshare.net/netazone/redmine-plus

2. • 中村�浩平 ( ナカムラ コウヘイ)
• SIer:オープン系エンジニア(11年)
→工場:情報システム(2年)
• Redmine歴: 7年�管理者歴: 4年
• 新職場でも導入
• Redmine全社利用
→既存業務システムの置き換え中
2015/11 redmine.tokyo 9
2015/08 RxTstudy #13

3. • Redmineバージョン：2.5.1(bitnami でインストール)
• OS：Linux CentOS 6.5
• 仮想サーバ：MEM 2G, CPU 2Core, Disk 20GB
• 2014/04構築→2015/06から全社利用
• ユーザ数:150 チケット数:10,000�
• 使用しているプラグイン：24

4. •ツールバーボタン使ってる？捗るよ
•素晴らしいプラグイン
jsToolbar Buttons Extension
•オリジナルツールバーボタン作ろう

5. ツールバーボタンって？

6. Excelにもありますね

7. > 引用
! image.png ! 画像挿入
<pre>
〜 </pre>
整形テキスト
h1. / h2. / h3. 見出し、文字サイズ大
こんな感じでしょうか？

8. •興味ない、テキストで十分
•記法よくわからない (textile/markdown)
•直接書く
•使いたいボタンがない

9. よーし、ソース修正だ！
ダメ、ゼッタイ。
→プラグインを探そう

10. jsToolbar Buttons Extension - Plugins - Redmine
ツールバーボタンを追加＆カスタムできるプラグイン
【親プラグイン】あわせて必要なもの
GitHub - tleish/redmine_jstoolbar_ext
【兄弟プラグイン】こちらもオススメ
jsToolbar CodeRay Extension - Plugins - Redmine
jsToolbar Images Extension - Plugins - Redmine

11. $ cd redmine/plugins
$ git clone https://github.com/tleish/redmine_jstoolbar_ext
$ git clone https://github.com/tleish/redmine_jstoolbar_ext_buttons
restart Redmine
親プラグインと一緒にダウンロード→再起動
ツールバーボタンが増えました

12. redmine_jstoolbar_ext_buttons
├─app
│ └─views
│ └─redmine_jstoolbar_ext_buttons
├─assets
│ ├─help
│ ├─images : jstb_xxxx.png
│ ├─javascripts: redmine_jstoolbar_ext_buttons.js
│ └─stylesheets: redmine_jstoolbar_ext_buttons.css
└─lib
1. ボタンアイコン作成
2. CSS修正(1行)
3. JavaScript修正
やることは3点

13. ・・・
// RedFont 赤文字
{ title: 'RedFont', after: 'pre',
fn: { wiki: function() { this.singleTag(' %{color: red}', '% ') } }
},
// BlueFont 青文字
{ title: 'BlueFont', after: 'redfont',
fn: { wiki: function() { this.singleTag(' %{color: blue}', '% ') } }
},
// Customer DB Webページ呼び出し
{ title: 'Customer DB', after: 'bluefont',
fn: { wiki: function () {
window.open('/customer_db/', '', 'resizable=yes, location=no, width=600, height=350, menubar=no, status=no, scrollbars=yes, titlebar=no') }}
},
// Collapse テキスト折り畳み
{ title: 'Collapse', after: 'help',
fn: { wiki: function() { this.encloseLineSelection('{{collapse()n<pre>n', 'n</pre>n}}') } }
},
//UNC_Link ファイルサーバリンク(Zドライブをファイルサーバのホスト名に置換)
{ title: 'UNCLink', after: 'customer_db',
fn: { wiki: function () { this.encloseLineSelection('{{unc(', ')}}' , function (str) {
str�= str.replace('Z:', 'fileserver');
str�= str.replace(/["]/g, '');
return str; }); }}
}
・・・
redmine_jstoolbar_ext_buttons.js

14. %{color: red} 〜 % 赤文字にする
%{color: blue} 〜 % 青文字にする
window.open(webページ) Webページ呼び出し
{{collapse()
〜}}
テキスト折り畳み
※2.2以降
{{unc(fileserver部門db)}
ファイルサーバへのリンク作成
※要Wiki UNCプラグイン、ブラウザ依存あり

15. •以下のフォルダをクリア(再起動でまた作成される)
rm -rf redmine/public/plugin_assets/redmine_jstoolbar_ext_buttons
•画像、CCS、JS内が揃っているか確認
【例】赤字ボタンの場合
ボタンアイコン jstb_redfont.png
CSS
.jstb_redfont { background-image:
url('../images/jstb_redfont.png') }
JavaScript
{ title: 'RedFont', after: 'pre',
fn: { wiki: function() { this.singleTag(' %{color: red}', '% ') }
}
}

16. 【WebSite】
Redmine.JP : 前田剛
Redmine.JP Blog : ファーエンドテクノロジー株式会社
r-labs (プラグイン情報)
プログラマの思索 : あきぴー
Enjoy*Study : onozaty (View Customize Pluginほか )
kengo700のブログ kengo700(大学の研究室（機械系）でRedmineを運用)
Redmine : Jean-Philippe Langほか Redmine開発チーム
SlideShare : Redmine関連スライド作者
bitnami : bitnami Redmineチーム
【Books】
『Redmine超入門』日経システムズ
『入門Redmine 第4版』前田剛
『Redmine実践ガイド』株式会社アジャイルウェア
【Others】
Redmineプラグイン作者
redmine.tokyo STAFF http://redmine.tokyo/
RxTStudy STAFF https://sites.google.com/site/rxtstudy/