SlideShare a Scribd company logo
Submit Search
Upload
Login
Signup
View customize1.2.0の紹介
Report
onozaty
Follow
Nov. 9, 2018
•
0 likes
•
5,135 views
1
of
40
View customize1.2.0の紹介
Nov. 9, 2018
•
0 likes
•
5,135 views
Download Now
Download to read offline
Report
Technology
第15回 redmine.tokyo にて発表したView Customize Pluginバージョン1.2.0の紹介資料です
onozaty
Follow
Recommended
View customize pluginを使いこなす
onozaty
41.7K views
•
83 slides
View Customize Pluginで出来ること
onozaty
51.3K views
•
29 slides
View customize plugin for Redmineの紹介 (2019年版)
onozaty
10.7K views
•
26 slides
Redmineの画面をあなた好みにカスタマイズ - View customize pluginの紹介 - Redmine Japan 2020
onozaty
9.7K views
•
61 slides
Redmineカスタムフィールド表示改善
Yuuki Nara
19.5K views
•
21 slides
View customizeでユーザー/プロジェクトのカスタムフィールドを利用した個別カスタマイズの方法
Asa Morino
1.9K views
•
16 slides
More Related Content
What's hot
Redmineの意外と知らない便利機能(Redmine 4.2対応版)
Go Maeda
1.6K views
•
55 slides
RedmineのFAQとアンチパターン集
akipii Oga
66.3K views
•
43 slides
うちのRedmineの使い方(2)
Tomohisa Kusukawa
4.2K views
•
27 slides
Redmine issue assign notice plugin の紹介
onozaty
2.2K views
•
13 slides
事例から探る、Redmineの機能とよりよい運用
Go Maeda
13.7K views
•
38 slides
ある工場の Redmine 2021 ( Redmine of one plant 2021 )
Kohei Nakamura
2.9K views
•
33 slides
What's hot
(20)
Redmineの意外と知らない便利機能(Redmine 4.2対応版)
Go Maeda
•
1.6K views
RedmineのFAQとアンチパターン集
akipii Oga
•
66.3K views
うちのRedmineの使い方(2)
Tomohisa Kusukawa
•
4.2K views
Redmine issue assign notice plugin の紹介
onozaty
•
2.2K views
事例から探る、Redmineの機能とよりよい運用
Go Maeda
•
13.7K views
ある工場の Redmine 2021 ( Redmine of one plant 2021 )
Kohei Nakamura
•
2.9K views
講演1 Redmine導入のアンチパターン
Hidehisa Matsutani
•
19.9K views
継続使用と新規追加したRedmine Plugin
Mei Nakamura
•
327 views
「Redmineの運用パターン集~私に聞くな、チケットシステムに聞け」
akipii Oga
•
152.2K views
挫折しないRedmine
Go Maeda
•
120.4K views
うちのRedmineの使い方
Tomohisa Kusukawa
•
7.9K views
Redmineサーバ統合事例
Yuuki Nara
•
7.2K views
ユーザ要望に応えるView customize活用事例
Hidehisa Matsutani
•
1.8K views
Redmineの情報を自分好みに見える化した話
ToshiharuSakai
•
6.6K views
Redmineの基本と適用事例
Go Maeda
•
2.8K views
Redmineプラグイン導入・開発入門
Minoru Maeda
•
18.5K views
Redmine 4.2で作るヘルプデスク向け問い合わせ受付・管理システム
Go Maeda
•
3.8K views
とあるメーカーのRedmine活用事例
agileware_jp
•
2.8K views
挫折しないRedmine (2022)
Go Maeda
•
1.2K views
チケット駆動開発現場の最前線.pdf
Yokoba
•
314 views
Similar to View customize1.2.0の紹介
20150425 DroidKaigi つかえるGradleプロジェクトの作り方
Makoto Yamazaki
22.6K views
•
23 slides
App extensionでテストコードを書く
Yusuke Kita
3.2K views
•
15 slides
Visual studio 2013 Overview
一希 大田
6K views
•
89 slides
Google Apps Scirpt勉強会 #1
ikikko
2K views
•
18 slides
G * magazine 0
Tsuyoshi Yamamoto
1.7K views
•
16 slides
Adobe XDプラグインをつくってみよう
Yoshiki Takeoka
1.7K views
•
47 slides
Similar to View customize1.2.0の紹介
(20)
20150425 DroidKaigi つかえるGradleプロジェクトの作り方
Makoto Yamazaki
•
22.6K views
App extensionでテストコードを書く
Yusuke Kita
•
3.2K views
Visual studio 2013 Overview
一希 大田
•
6K views
Google Apps Scirpt勉強会 #1
ikikko
•
2K views
G * magazine 0
Tsuyoshi Yamamoto
•
1.7K views
Adobe XDプラグインをつくってみよう
Yoshiki Takeoka
•
1.7K views
Android Hacks - Hack40
Masanori Ohkawara
•
757 views
Internet Explorer 9 の新機能「固定サイト」 (Pinned sites)
shigeya
•
1.5K views
ゆるふわAzure Functions
Keiji Kamebuchi
•
220 views
Xamarin 20141212 モバイルカフェスペシャル 「C#で作るiOS/Androidのクロスプラットフォームスマホアプリ開発」
Yoshito Tabuchi
•
1.7K views
大規模なJavaScript開発の話
terurou
•
12.1K views
GitHub Codespaces と Azure でつくる、エンタープライズレベルの開発環境
Kazumi IWANAGA
•
99 views
AndroidでDIxAOP
nfc research
•
1.1K views
Android multiscreen
Kazuaki Ueda
•
1.6K views
Android カスタムROMの作り方
Masahiro Hidaka
•
41.4K views
1_各Atlassian製品の紹介
Ricksoft
•
1.6K views
Plugman code-reading
Motokazu Nishimura
•
649 views
アプリ屋もDockerをドカドカ使おう ~ Docker入門
Hori Tasuku
•
14.2K views
はてなにおける継続的デプロイメントの現状と Docker の導入
Yu Nobuoka
•
21.4K views
2005 07 30_xwj_customizinig
Tom Hayakawa
•
442 views
More from onozaty
Selenium入門(2023年版)
onozaty
3 views
•
30 slides
40歳過ぎてもエンジニアでいるためにやっていること
onozaty
32.2K views
•
18 slides
Java8から17へ
onozaty
628 views
•
61 slides
今からでも遅くないDBマイグレーション - Flyway と SchemaSpy の紹介 -
onozaty
2.9K views
•
30 slides
最近作ったもの
onozaty
1.4K views
•
41 slides
Selenium入門
onozaty
1.4K views
•
30 slides
More from onozaty
(15)
Selenium入門(2023年版)
onozaty
•
3 views
40歳過ぎてもエンジニアでいるためにやっていること
onozaty
•
32.2K views
Java8から17へ
onozaty
•
628 views
今からでも遅くないDBマイグレーション - Flyway と SchemaSpy の紹介 -
onozaty
•
2.9K views
最近作ったもの
onozaty
•
1.4K views
Selenium入門
onozaty
•
1.4K views
「伝わるチケット」の書き方
onozaty
•
3.3K views
WebSocketでカメラの映像を共有してみた
onozaty
•
5.2K views
Lombokの紹介
onozaty
•
2.5K views
Spring Bootを触ってみた
onozaty
•
2.7K views
30歳過ぎてもエンジニアでいるためにやったこと
onozaty
•
2.2K views
技術書のススメ
onozaty
•
2.4K views
課題管理と情報共有のためのツール群
onozaty
•
3.3K views
お試し用のLinux環境を作る
onozaty
•
3.9K views
業務で使うIRC
onozaty
•
16.5K views
Recently uploaded
画像生成AIの問題点
iPride Co., Ltd.
10 views
•
9 slides
gtk4_gem_usage.pdf
ssuser0ef4681
14 views
•
6 slides
20230921_IoTLT_vol103_kitazaki_v1.pdf
Ayachika Kitazaki
151 views
•
16 slides
CatBoost on GPU のひみつ
Takuji Tahara
495 views
•
30 slides
GraphQLはどんな時に使うか
Yutaka Tachibana
8 views
•
37 slides
IGDA Japan SIG Audio #20-1 室内・野外でのマイク収録と整音.pdf
IGDA Japan SIG-Audio
108 views
•
31 slides
Recently uploaded
(12)
画像生成AIの問題点
iPride Co., Ltd.
•
10 views
gtk4_gem_usage.pdf
ssuser0ef4681
•
14 views
20230921_IoTLT_vol103_kitazaki_v1.pdf
Ayachika Kitazaki
•
151 views
CatBoost on GPU のひみつ
Takuji Tahara
•
495 views
GraphQLはどんな時に使うか
Yutaka Tachibana
•
8 views
IGDA Japan SIG Audio #20-1 室内・野外でのマイク収録と整音.pdf
IGDA Japan SIG-Audio
•
108 views
2023情報処理学会関西支部大会-G12.pdf
KoseiShimoda1
•
7 views
テスト自動化.pdf
ssuserf8ea02
•
23 views
松下研究室紹介_関西大学高槻キャンパスオープンキャンパス
Matsushita Laboratory
•
27 views
遠隔お酌IoTLT2309.pptx
Yoshiaki Ito
•
134 views
MLOps Course Slides_JP(配布用).pdf
Yuya Yamamoto
•
39 views
CCoE実践者コミュニティ#1_CCoEが進めるセキュリティカイゼンの旅.pptx
Tomoaki Tada
•
43 views
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年
3.
View customize plugin
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を使いこなす https://www.slideshare.net/onozaty/view-customizeplugin-62005780
8.
バージョン1.2.0
9.
バージョン1.2.0 • 2018年10月1日リリース • 2年ぶりの新バージョン •
新機能も実装
10.
リリース内容 • コードの挿入位置を選択できるように • ユーザやプロジェクトの情報にJavaScriptでアクセス可能 に •
ローカライズ対応 (日本語リソースの追加) • コメント欄を追加し、一覧表示の際にコメントがあればそ ちらを表示するように (コメントが無かった時にコードを) • 一覧をソート可能に その他bug fixも
11.
コードの挿入位置を 選択できるように (Insertion position)
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
patternとの組み合わせに注意(AND条件に)
16.
埋め込み位置による実行ページの制御 • Path patternは
.* で全ページにしておいて、 Insertion position で制御するといった方法も取れ る
17.
ユーザやプロジェクトの情報に JavaScriptでアクセス可能に (ViewCustomize.context)
18.
ViewCustomize.context • ユーザやプロジェクトの情報にJavaScriptでアクセ スできるようにViewCustomize.contextというオブ ジェクトを追加 • 画面上にない情報へのアクセスが可能に
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
29.
例: APIキーを使ってREST APIを呼び出し
30.
APIキーに関する注意事項 • 下記を行わないと利用できないので注意 • 設定画面より「RESTによるWebサービスを有効にす る」をチェック •
個人設定からAPIアクセスキーを 1度は表示しておく (そうしないとAPIキーが払い出 されないため)
31.
ローカライズ対応 (日本語リソースの追加)
32.
ローカライズ対応 • ローカライズ対応として、まずは日本語リソース を追加 • 母国語じゃないというだけで、敷居をあげてしま うこともあるので、そこの軽減を目的 •
他の言語もやっていきたい
33.
ローカライズ対応
34.
一覧をソート可能に コメント欄の追加
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を使いこなす 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.
おわり