View customize1.2.0の紹介
1 like5,312 views
第15回 redmine.tokyo にて発表したView Customize Pluginバージョン1.2.0の紹介資料です
![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](https://image.slidesharecdn.com/viewcustomize1-181109153038/85/View-customize1-2-0-20-320.jpg)
More Related Content
What's hot (20)
Similar to View customize1.2.0の紹介 (20)
More from onozaty (19)
Recently uploaded (8)
![ElasticsearchでSPLADEする [Search Engineering Tech Talk 2025 Winter]](https://cdn.slidesharecdn.com/ss_thumbnails/searchtech-250228102455-ddc5ce09-thumbnail.jpg?width=560&fit=bounds)
View customize1.2.0の紹介
- 1. View customize バージョン1.2.0 の紹介 2018-11-10 第15回redmine.tokyo勉強会 Hirokazu Onozato @onozaty
- 2. 自己紹介 ? Hirokazu Onozato (onozaty) ? https://twitter.com/onozaty ? https://github.com/onozaty ? http://www.enjoyxstudy.com/ ? 株式会社ユニスティ所属 ? エンジニア ? アプリケーション開発 ? 個人でも作ったものを公開 ? Redmine歴9年
- 4. View customize plugin ? Redmineの画面をカスタマイズするためのPlugin ? https://github.com/onozaty/redmine-view-customize ? 特定の画面に対して、JavaScript、CSSを埋め込む 機能を提供
- 5. View customize plugin ? Redmine自体のコードを変更したり、プラグイン を作ったりといった手間無く、手軽にカスタマイ ズできる ? 再起動不要でカスタマイズを適用
- 6. できることの例 ? プロジェクト毎にヘッダの色を変える ? チケット一覧を識別しやすいように装飾 ? カスタムフィールドを連動させる(親の値に応じて、子を絞り込む) ? 担当者を入力補完で選択可能に ? チケット作成時にトラッカーに応じてデフォルト値を設定 ? サイドバーを開閉式に ? 「全てのチケット一覧」リンクをヘッダに ? 進行中にもかかわらず担当者が未設定の場合に警告を表示 ? ユーザ選択のカスタムフィールドで自分を選択する項目を先頭に追加 ? プロジェクト一覧からの各プロジェクトへのリンク先を変更
- 7. 使用方法 ? 詳しい使用方法は省略 ? ぜひ下記スライドで確認を ? View customize pluginを使いこなす /onozaty/view-customizeplugin-62005780
- 8. バージョン1.2.0
- 10. リリース内容 ? コードの挿入位置を選択できるように ? ユーザやプロジェクトの情報にJavaScriptでアクセス可能 に ? ローカライズ対応 (日本語リソースの追加) ? コメント欄を追加し、一覧表示の際にコメントがあればそ ちらを表示するように (コメントが無かった時にコードを) ? 一覧をソート可能に その他bug fixも
- 12. コードの挿入位置を選択できるように ? Insertion position(挿入位置)という項目が追加 ? 今までは一律ヘッダ部分にコードを挿入していた が、下記の3つから選べるように ? Head of all pages (全てのページのヘッダ) ※v1.2.0より前と同じ ? Bottom of issue form (チケット入力欄の下) ? Bottom of issue detail (チケット詳細の下)
- 13. Bottom of issue form (チケット入力欄の下) ? チケットの入力欄は、トラッカーやステータスを 変えた際に再構築されるが、再構築の際にも一緒 に再度挿入される
- 14. Bottom of issue form (チケット入力欄の下) ? 今まで面倒だった、入力欄が再構築された際に再 度実行するための考慮が不要に // ステータス変更時などにDOMが差し替えられるので // フォームの内容が書き変わるたびに表示切替 var _replaceIssueFormWith = replaceIssueFormWith; replaceIssueFormWith = function(html){ _replaceIssueFormWith(html); executeScript(); };
- 15. 埋め込み位置による実行ページの制御 ? 埋め込み位置が存在しないページでは、コードが 埋め込まれなくなる(＝実行されなくなる) ? Path 辫补迟迟别谤苍との组み合わせに注意(础狈顿条件に)
- 16. 埋め込み位置による実行ページの制御 ? Path patternは .* で全ページにしておいて、 Insertion position で制御するといった方法も取れ る
- 19. ViewCustomize.context プロジェクトの識別子やチケットのIDは、今までも画面に存 在する情報から取得可能だったが、利用頻度が多いため、よ り直感的に書けるように今回追加 分類 項目 ユーザ ユーザID、ログインID、管理者かどうか、姓名、グループ、 APIキー、カスタムフィールド プロジェクト 識別子、名前、ロール チケット チケットID
- 20. 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
- 21. 例: グループを使った適用ユーザ切り替え ? グループでスクリプトの実行可否を判定すること によって、一部のユーザのみにスクリプトを適用 できる ? 適用したいユーザが増えたら、グループに追加す るだけ ? View customize側をいちいち変えなくて良い
- 22. 例: グループを使った適用ユーザ切り替え $(function() { var isEnabled = ViewCustomize.context.user.groups.some(function(group) { return group.id == 5; // 有効にしたいグループのIDと比較 }); if (!isEnabled) { // 無効の場合は処理終了 return; } // 以降実際に実行したいスクリプト console.log('execute script.'); });
- 23. 例: カスタムフィールドを使った制御 ? ユーザのカスタムフィールド(真偽値)によって、 スクリプトの適用可否を判断 ? 管理者ではなく、ユーザ侧に选択権を持たせる
- 24. 例: カスタムフィールドを使った制御 $(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.'); });
- 25. ユーザのカスタムフィールド ? ユーザのカスタムフィールドが、View customize の幅を広げそう ? ユーザ自身が情報を付与できるのは大きい ? 他システムのAPIトークンをユーザに入れてもらって、 それを使って他システムと連携するとか
- 26. 例: APIキーを使ってREST APIを呼び出し ? APIキーを参照できるようになったので、簡単に ユーザ毎のAPIキーを利用し、REST APIを呼び出せ る ? 今までは固定のAPIキーを埋め込むか、スクレイピン グで頑張るかしかなかった
- 27. 例: 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('失敗しました'); });
- 28. 例: 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
- 30. APIキーに関する注意事項 ? 下記を行わないと利用できないので注意 ? 設定画面より「RESTによるWebサービスを有効にす る」をチェック ? 個人設定からAPIアクセスキーを 1度は表示しておく (そうしないとAPIキーが払い出 されないため)
- 33. ローカライズ対応
- 35. 一覧のソート?コメント欄 ? 一覧をソート可能に ? コメント欄を追加し、一覧表示の際にコメントが あればそちらを表示するように (コメントが無 かった時には今までどおりコードを) ? 設定内容を一覧でわかるようにしようとした場合、今 まではコード内にコメントで入れるしかなかったのが、 別途コメントとして指定できるように
- 36. その他
- 37. 今後の対応 ? Redmine 4.0 対応 ? 既に最新trunkでの動作検証済み ? 4.0 のリリース後に検証してリリース ? スクリプトサンプルの整理 ? https://github.com/onozaty/redmine-view-customize-scripts ? 1.2.0 に対応したスクリプトを増やしていく予定 ? 多言語リソース追加 ? Pull request 募集中
- 38. 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 ? 新しいサンプル書いたりしたらつぶやくので、ぜひフォローを
- 39. View customizeの情報源 (2) ? View customize pluginを使いこなす /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/過去講演一覧-プラグイン?カスタマ イズ
- 40. おわり