View customize
バージョン1.2.0 の紹介
2018-11-10
第15回redmine.tokyo勉強会
Hirokazu Onozato
@onozaty

自己紹介
• Hirokazu Onozato (onozaty)
• https://twitter.com/onozaty
• https://github.com/onozaty
• http://www.enjoyxstudy.com/
• 株式会社ユニスティ所属
• エンジニア
• アプリケーション開発
• 個人でも作ったものを公開
• Redmine歴9年

View customize plugin

View customize plugin
• Redmineの画面をカスタマイズするためのPlugin
• https://github.com/onozaty/redmine-view-customize
• 特定の画面に対して、JavaScript、CSSを埋め込む
機能を提供

View customize plugin
• Redmine自体のコードを変更したり、プラグイン
を作ったりといった手間無く、手軽にカスタマイ
ズできる
• 再起動不要でカスタマイズを適用

できることの例
• プロジェクト毎にヘッダの色を変える
• チケット一覧を識別しやすいように装飾
• カスタムフィールドを連動させる(親の値に応じて、子を絞り込む)
• 担当者を入力補完で選択可能に
• チケット作成時にトラッカーに応じてデフォルト値を設定
• サイドバーを開閉式に
• 「全てのチケット一覧」リンクをヘッダに
• 進行中にもかかわらず担当者が未設定の場合に警告を表示
• ユーザ選択のカスタムフィールドで自分を選択する項目を先頭に追加
• プロジェクト一覧からの各プロジェクトへのリンク先を変更

使用方法
• 詳しい使用方法は省略
• ぜひ下記スライドで確認を
• View customize pluginを使いこなす
https://www.slideshare.net/onozaty/view-customizeplugin-62005780

バージョン1.2.0

バージョン1.2.0
• 2018年10月1日リリース
• 2年ぶりの新バージョン
• 新機能も実装

リリース内容
• コードの挿入位置を選択できるように
• ユーザやプロジェクトの情報にJavaScriptでアクセス可能
に
• ローカライズ対応 (日本語リソースの追加)
• コメント欄を追加し、一覧表示の際にコメントがあればそ
ちらを表示するように (コメントが無かった時にコードを)
• 一覧をソート可能に
その他bug fixも

コードの挿入位置を
選択できるように
(Insertion position)

コードの挿入位置を選択できるように
• Insertion position(挿入位置)という項目が追加
• 今までは一律ヘッダ部分にコードを挿入していた
が、下記の3つから選べるように
• Head of all pages (全てのページのヘッダ)
※v1.2.0より前と同じ
• Bottom of issue form (チケット入力欄の下)
• Bottom of issue detail (チケット詳細の下)

Bottom of issue form (チケット入力欄の下)
• チケットの入力欄は、トラッカーやステータスを
変えた際に再構築されるが、再構築の際にも一緒
に再度挿入される

Bottom of issue form (チケット入力欄の下)
• 今まで面倒だった、入力欄が再構築された際に再
度実行するための考慮が不要に
// ステータス変更時などにDOMが差し替えられるので
// フォームの内容が書き変わるたびに表示切替
var _replaceIssueFormWith = replaceIssueFormWith;
replaceIssueFormWith = function(html){
_replaceIssueFormWith(html);
executeScript();
};

埋め込み位置による実行ページの制御
• 埋め込み位置が存在しないページでは、コードが
埋め込まれなくなる(＝実行されなくなる)
• Path patternとの組み合わせに注意(AND条件に)

埋め込み位置による実行ページの制御
• Path patternは .* で全ページにしておいて、
Insertion position で制御するといった方法も取れ
る

ユーザやプロジェクトの情報に
JavaScriptでアクセス可能に
(ViewCustomize.context)

ViewCustomize.context
• ユーザやプロジェクトの情報にJavaScriptでアクセ
スできるようにViewCustomize.contextというオブ
ジェクトを追加
• 画面上にない情報へのアクセスが可能に

ViewCustomize.context
プロジェクトの識別子やチケットのIDは、今までも画面に存
在する情報から取得可能だったが、利用頻度が多いため、よ
り直感的に書けるように今回追加
分類 項目
ユーザ ユーザID、ログインID、管理者かどうか、姓名、グループ、
APIキー、カスタムフィールド
プロジェクト 識別子、名前、ロール
チケット チケットID

ViewCustomize = {
"context": {
"user": {
"id": 1,
"login": "admin",
"admin": true,
"firstname": "Redmine",
"lastname": "Admin",
"groups": [
{"id": 5, "name": "Group1"}
],
"apiKey": "3dd35b5ad8456d90d21ef882f7aea651d367a9d8",
"customFields": [
{"id": 1, "name": "[Custom field] Text", "value": "text"}
]
},
"project": {
"identifier": "project-a",
"name": "Project A",
"roles": [
{"id": 6, "name": "RoleX"}
]
},
"issue": {
"id": 1
}
}
}
ViewCustomize.context

例: グループを使った適用ユーザ切り替え
• グループでスクリプトの実行可否を判定すること
によって、一部のユーザのみにスクリプトを適用
できる
• 適用したいユーザが増えたら、グループに追加す
るだけ
• View customize側をいちいち変えなくて良い

例: グループを使った適用ユーザ切り替え
$(function() {
var isEnabled = ViewCustomize.context.user.groups.some(function(group) {
return group.id == 5; // 有効にしたいグループのIDと比較
});
if (!isEnabled) {
// 無効の場合は処理終了
return;
}
// 以降実際に実行したいスクリプト
console.log('execute script.');
});

例: カスタムフィールドを使った制御
• ユーザのカスタムフィールド(真偽値)によって、
スクリプトの適用可否を判断
• 管理者ではなく、ユーザ側に選択権を持たせる

例: カスタムフィールドを使った制御
$(function() {
var isEnabled = ViewCustomize.context.user.customFields
.some(function(customField) {
// チェックしたいカスタムフィールドのIDと値でチェック ("1"がtrue)
return customField.id == 1 && customField.value == '1';
});
if (!isEnabled) {
// 無効の場合は処理終了
return;
}
// 以降実際に実行したいスクリプト
console.log('execute script.');
});

ユーザのカスタムフィールド
• ユーザのカスタムフィールドが、View customize
の幅を広げそう
• ユーザ自身が情報を付与できるのは大きい
• 他システムのAPIトークンをユーザに入れてもらって、
それを使って他システムと連携するとか

例: APIキーを使ってREST APIを呼び出し
• APIキーを参照できるようになったので、簡単に
ユーザ毎のAPIキーを利用し、REST APIを呼び出せ
る
• 今までは固定のAPIキーを埋め込むか、スクレイピン
グで頑張るかしかなかった

例: APIキーを使ってREST APIを呼び出し
$.ajax({
type: 'PUT‘,
url: '/issues/' + issueId + '.json‘,
headers: {
'X-Redmine-API-Key': ViewCustomize.context.user.apiKey
},
// 更新時はレスポンスのコンテンツが無く、jsonだとエラーとなるのでtextにしておく
dataType: 'text‘,
contentType: 'application/json‘,
data: JSON.stringify({
'issue': {
'parent_issue_id': '' // 親チケットIDをクリア
}
})
})
.done(function(data) {
// 成功したらリロード
location.reload();
})
.fail(function(data) {
alert('失敗しました');
});

例: APIキーを使ってREST APIを呼び出し
• サンプルコード全体は下記にて
• 子チケット一覧に親子関係を外すアイコンを追加
https://github.com/onozaty/redmine-view-customize-
scripts/blob/master/delete_parentage_relationship_using_rest_api.js
• 複数の子チケットをまとめて作成するボタン追加
https://github.com/onozaty/redmine-view-customize-
scripts/blob/master/create_children_issues_using_rest_api.js

例: APIキーを使ってREST APIを呼び出し

APIキーに関する注意事項
• 下記を行わないと利用できないので注意
• 設定画面より「RESTによるWebサービスを有効にす
る」をチェック
• 個人設定からAPIアクセスキーを
1度は表示しておく
(そうしないとAPIキーが払い出
されないため)

ローカライズ対応
(日本語リソースの追加)

ローカライズ対応
• ローカライズ対応として、まずは日本語リソース
を追加
• 母国語じゃないというだけで、敷居をあげてしま
うこともあるので、そこの軽減を目的
• 他の言語もやっていきたい

ローカライズ対応

一覧をソート可能に
コメント欄の追加

一覧のソート・コメント欄
• 一覧をソート可能に
• コメント欄を追加し、一覧表示の際にコメントが
あればそちらを表示するように (コメントが無
かった時には今までどおりコードを)
• 設定内容を一覧でわかるようにしようとした場合、今
まではコード内にコメントで入れるしかなかったのが、
別途コメントとして指定できるように

その他

今後の対応
• Redmine 4.0 対応
• 既に最新trunkでの動作検証済み
• 4.0 のリリース後に検証してリリース
• スクリプトサンプルの整理
• https://github.com/onozaty/redmine-view-customize-scripts
• 1.2.0 に対応したスクリプトを増やしていく予定
• 多言語リソース追加
• Pull request 募集中

View customizeの情報源 (1)
• GitHub - onozaty/redmine-view-customize
https://github.com/onozaty/redmine-view-customize
• View customize の提供サイト
• Star つけると、作者のやる気Up
• GitHub - onozaty/redmine-view-customize-scripts
https://github.com/onozaty/redmine-view-customize-scripts
• View customizeのサンプル集
• Blogなどで紹介したスクリプトは全てここに
• Twitter – onozaty https://twitter.com/onozaty
• 作者のTwitter
• 新しいサンプル書いたりしたらつぶやくので、ぜひフォローを

View customizeの情報源 (2)
• View customize pluginを使いこなす
https://www.slideshare.net/onozaty/view-customizeplugin-62005780
• 第10回 redmine.tokyo での発表資料
• 1.2.0の情報は無いが、現時点でView customizeの利用方法につい
て一番詳しく書かれたもの(だと思う)
他にもQiitaやredmine.tokyoでのカスタマイズ事例なども参
考に
• 「view customize」の検索結果 - Qiita
https://qiita.com/search?q=view+customize
• 過去講演一覧-プラグイン・カスタマイズ - redmine.tokyo
https://redmine.tokyo/projects/shinared/wiki/過去講演一覧-プラグイン・カスタマ
イズ

おわり