Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Redmine view customize1.2.0の紹介
Search
onozaty
November 10, 2018
Programming
0
99
Redmine view customize1.2.0の紹介
第15回 redmine.tokyo にて発表したView Customize Pluginバージョン1.2.0の紹介資料です
onozaty
November 10, 2018
Tweet
Share
More Decks by onozaty
See All by onozaty
リモートワーク中に買って良かったものベスト3
onozaty
0
180
情報を表現するときのポイント
onozaty
0
23
チームで開発するための環境を整える
onozaty
1
250
Selenium入門(2023年版)
onozaty
1
180
40歳過ぎてもエンジニアでいるためにやっていること
onozaty
0
65
Java8から17へ
onozaty
0
19
今からでも遅くないDBマイグレーション - Flyway と SchemaSpy の紹介 -
onozaty
0
210
Redmine issue assign notice plugin の紹介
onozaty
0
190
最近作ったもの
onozaty
0
31
Other Decks in Programming
See All in Programming
Let's Write a Train Tracking Algorithm
twocentstudios
0
220
iOSエンジニア向けの英語学習アプリを作る!
yukawashouhei
0
180
Railsだからできる 例外業務に禍根を残さない 設定設計パターン
ei_ei_eiichi
0
240
AIで開発生産性を上げる個人とチームの取り組み
taniigo
0
130
Чего вы не знали о строках в Python – Василий Рябов, PythoNN
sobolevn
0
160
どの様にAIエージェントと 協業すべきだったのか?
takefumiyoshii
2
600
CSC509 Lecture 03
javiergs
PRO
0
330
Go言語の特性を活かした公式MCP SDKの設計
hond0413
1
180
大規模アプリのDIフレームワーク刷新戦略 ~過去最大規模の並行開発を止めずにアプリ全体に導入するまで~
mot_techtalk
0
380
Catch Up: Go Style Guide Update
andpad
0
170
ててべんす独演会〜Flowの全てを語ります〜
tbsten
1
220
CSC509 Lecture 04
javiergs
PRO
0
290
Featured
See All Featured
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Typedesign – Prime Four
hannesfritz
42
2.8k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
9
580
The Invisible Side of Design
smashingmag
301
51k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
188
55k
How GitHub (no longer) Works
holman
315
140k
Become a Pro
speakerdeck
PRO
29
5.5k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
The Cult of Friendly URLs
andyhume
79
6.6k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
127
53k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.6k
How to Think Like a Performance Engineer
csswizardry
27
2k
Transcript
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/過去講演一覧-プラグイン・カスタマ イズ
おわり