Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

View customize1.2.0の紹介

973 views

Published on

第15回 redmine.tokyo にて発表したView Customize Pluginバージョン1.2.0の紹介資料です

Published in: Technology
  • Be the first to comment

  • Be the first to like this

View customize1.2.0の紹介

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

×