Upload
onozaty
View
7.034
Download
0
Embed Size (px)
Citation preview
View customize pluginを 使いこなす
2016-05-14
第10回 redmine tokyo勉強会
Hirokazu Onozato
onozaty
自己紹介
bull Hirokazu Onozato (onozaty) オノザティ
bull httpstwittercomonozaty
bull httpsgithubcomonozaty
bull httpwwwenjoyxstudycom
bull 株式会社ユニスティ所属
bull エンジニア
bull アプリケーション開発
bull マネージメントも少々
個人で作ったもの
bull 個人の時間を使って作ったものを公開
bull httpwwwenjoyxstudycomproductshtml
bull Firefoxの拡張機能JavaScriptライブラリなど
bull suggestjs - 入力補完ライブラリ
httpwwwenjoyxstudycomjavascriptsuggest
bull ShortcutKey2URL ‐ショートカットキーでURLを開くための
Firefoxの拡張機能
httpwwwenjoyxstudycomfirefoxextensionshortcutkey2url
bull IRCbot Console - ブラウザから操作できる多機能なIRCボット
httpwwwenjoyxstudycomircbotconsole
RedmineのPlugin
bull RedmineのPluginも2年くらい前から作り出した
bull 業務であったらいいなと思うものをプライベー
トな時間で作って公開+自分でも利用
bull View customize
httpswwwredmineorgpluginsredmine_view_customize
bull Parent issue filter
httpswwwredmineorgpluginsredmine_parent_issue_filter
bull Copy parent issue id
httpswwwredmineorgpluginscopy_parent_issue_id
Redmineの使用状況
bull Redmine使用歴6年
bull 初めて触ったのは10年前だったがその時はあまり
しっかり使わずに6年前から継続して使用
bull 現プロジェクトでは09 から使い始めて1x
2x とマイグレーションを重ねて今は31を利用
bull チケット数は40000超え
利用プラグイン
bull View customize httpswwwredmineorgpluginsredmine_view_customize
bull Parent issue filter httpswwwredmineorgpluginsredmine_parent_issue_filter
bull Copy parent issue id httpswwwredmineorgpluginscopy_parent_issue_id
bull Issue Template httpswwwredmineorgpluginsissue_templates
bull Checklists httpswwwredmineorgpluginsredmine_checklists
bull News Notification httpsgithubcomgeorzredmine_news_notification
bull その他自作Pluginも
View customize plugin
View customize plugin
bull Redmineの画面をカスタマイズするためのPlugin
bull httpswwwredmineorgpluginsredmine_view_customize
bull httpsgithubcomonozatyredmine-view-customize
bull 特定の画面に対してJavaScriptCSSを埋め込む
機能を提供
View customize plugin
bull Redmine自体のコードを変更したりプラグイン
を作ったりといった手間無く手軽にカスタマイ
ズできる
bull 再起動不要でカスタマイズを適用
≒UserScript
bull UserScriptをクライアントではなくサーバ側で
設定してRedmineを使用する全ユーザに適用す
るイメージ
UserScriptとは画面ロード時に任意のJavaScriptを実行して
画面カスタマイズを行えるブラウザの機能
できることの例
bull プロジェクト毎にヘッダの色を変える
bull チケット一覧を識別しやすいように装飾
bull チケット作成時にトラッカーに応じてデフォルト値を設定
bull サイドバーを開閉式に
bull 「全てのチケット一覧」リンクをヘッダに
bull 進行中にもかかわらず担当者が未設定の場合に警告を表示
bull ユーザ選択のカスタムフィールドで自分を選択する項目を先頭に追加
bull プロジェクト一覧からの各プロジェクトへのリンク先を変更
bull カスタムフィールドを連動させる(親の値に応じて子を絞り込む)
bull コンテキストメニューを選択しやすくする
注意点
注意点
bull View customize pluginでは画面側(JavaScript
CSS)でしかカスタマイズできないため出来ない
こともある
bull 画面にない情報を表示するとか
注意点
bull 画面だけでもいろいろ解決できることがあるが
もしも欲しい機能に特化したプラグインがあるな
らばそちらを使った方が良い
bull 画面側だけの制約が無いのでシンプルな実装になっ
ているはず
bull その機能の検証も十分行われているはず
使い方
インストール
bull Redmineのインストールディレクトリ配下の
pluginsディレクトリに移動してView customize
pluginのリポジトリをclone
clone時のディレクトリ名はview_customizeとしてください
cd varlibredmineplugins
git clone httpsgithubcomonozatyredmine-view-customizegit view_customize
rake redminepluginsmigrate RAILS_ENV=production
インストールしただけではhellip
bull 何も変わらない
bull View customize pluginはRedmineの拡張方法を
提供するだけでどう設定するかはユーザ次第
設定方法
bull 管理 gt View customize で一覧画面へ遷移し
「New view customize」で設定入力画面へ
設定方法
コードを実行するパス(URL)
正規表現で記載
実行するコード
JavaScript または
StyleSheet(CSS)で書く
Redmineの画面で使用されているjQueryも使える(Redmineのバージョンによってライブラリが違うので注意)
プライベートにチェックを入れると作成したユーザのみに有効
実行
bull Pathが一致すると画面にコードが埋め込まれて
実行される
View customizeを触るうえで キーとなる技術
キーとなる技術
bull JavaScript(ブラウザ上で動作するスクリプト言語)
とCSS(ページのデザインを定義する仕組み)で設定
するのでオリジナルのカスタマイズをしたい場
合にはそれらの知識が必要となってくる
bull ただカスタマイズをするにあたってそこまで多く
の知識が求められるわけではないので調べたり見
よう見まねでもどうにかなるはず
bull 実際JavaScriptやCSS知らなかった人でも調べながらで使え
てたりする
jQuery
jQuery
bull JavaScriptライブラリ
bull httpsjquerycom
bull RedmineではjQueryをすべての画面で読み込んで
いるのでView customizeでもjQueryが利用でき
る
jQuery
bull jQueryを使うとクロスブラウザによる違いの煩
わしさを吸収したりDOM操作が簡潔に書けるの
で便利
bull ただ最近のブラウザだと標準で代替するようなメ
ソッドが提供されているのでIE8捨てられるならば
jQuery使うまでもないかも
bull WebにjQueryの情報はあふれているので調べる
のも簡単
CSSセレクタ
CSSセレクタ
bull CSSセレクタとはCSSでスタイルを適用する対象
を示すもの
bull View customizeでも良く使うことになる
bull JavaScriptで指定要素を取得するとき
bull jQueryの$(selector)関数
bull CSSで対象を指定するとき
divheader h1
設定に関するノウハウ
対象画面の指定方法
Path pattern
bull Path patternに一致した画面の場合該当のスクリ
プトが埋め込まれる
bull 正規表現で記載する
URLとPath
bull URLでアプリケーション配下がPath
bull クエリパラメータは含まれない
bull httpexamplecomprojects
-gt prjects
bull httpexamplecomprojectsaissuesset_filter=1
-gt projectsaissues
bull httpexamplecomredmineprojects
ドキュメントルートではなくredmineとしてインストール
-gt prjects
Pathを確認する方法
bull バージョン114からHTMLにPathをコメントと
して埋め込むようになっている
bull ブラウザのソース表示で見ればその画面のPathが
わかる
指定例 (よくつかうもの)
Path pattern 一致する画面
全ての画面
issues$ チケット一覧
issuesnew$ チケットの新規作成画面
issues[0-9]+$ 個々のチケット内容表示画面
issues[0-9]+copy$ チケットのコピーによる作成画面
issuesgantt ガントチャート
projects$ プロジェクト一覧
[]+$ といった文字は正規表現におけるメタ文字(特殊な意味をもった文字)
チケットの入力フォーム
bull チケットの入力フォームはいろいろな画面で存
在するのでPathの指定だけだと面倒
bull issues1 チケット内容表示画面でも編集ボタンでフォームが
bull issuesnew 新規作成
bull issues1copy コピーによる作成画面
bull issuesgantt timesガントチャートなのでこれは一致させたくない
bull issues timesチケット一覧の場合 チケット登録時のValidationエラーの場合
Path pattern + JavaScriptで絞る
bull ldquoissuesrdquo と指定してJavaScript側でチケットの入
力フォームが無かったら処理しないようにする
bull チケットの入力フォームでしか存在しない要素
(issue-form とか)で確認する
bull 指定した要素が無かった場合でも処理がスキップされ
るように書いていればOK
jQueryの$(selector)関数
bull jQueryの$(selector)関数で返却されるjQueryオブジェクト
は一致する要素が無かった場合何も処理されないので
それを使っていれば大丈夫
bull 上記例だと入力フォームが無かった場合on関数でのイベント
登録が行われず何も処理されないことになる
(エラーにもならない)
$(issue-form input[type=submit]) on(click function(event) 送信ボタン押下時に何か処理を行わせる )
プロジェクト毎の指定
bull チケット詳細画面(issues1 など)はプロジェク
トをパスに持たないのでPathだけだとプロジェ
クトを指定できない
bull projectsprj1issues
bull projectsprj1issues1 timesこれはパスとして無効
bull issues1 チケット詳細はプロジェクト関係なく固定パス
body要素に付与されるclass属性で判断
bull body要素のclass属性に project-プロジェクト識別
子 が設定されるのでこれを使ってプロジェクト
を識別する
JavaScriptでプロジェクトを判定
bull jQueryのhasClass()関数で指定のクラス名が存在
するかチェックできる
bull またはclass属性を取り出して比較するなど
if ($(body)hasClass(project-prj1)) プロジェクト識別子がprj1の場合
CSSでプロジェクトを指定
bull CSSのセレクタでbodyのclassを利用するだけ
bodyproject-prj1 top-menu background-color 006400 dark green bodyproject-prj1 header background-color 008000 green
class属性が振られるもの
bull プロジェクト以外にもclass属性が振られるもの
が多々あるので対象画面や対象箇所を限定する
のに使用できる
class属性が振られるもの
bull body要素
bull controller-コントローラ名
bull action-アクション名
bull チケット一覧の各行
bull tracker-トラッカーID
bull status-ステータスID
bull priority-優先度ID
bull created-by-me
class属性が振られるもの
bull 他にもいろいろあるので詳しくは「Redmineの
画面で振られているclass属性について -
EnjoyStudy」にて
bull httpblogenjoyxstudycomentry20141011000000
コード(JavaScript)の書き方
ブラウザの開発者ツールを活用
ブラウザの開発者ツール
bull いきなりView customizeで設定するのではなく
ブラウザの開発者ツールを使いながら作成確認
する
bull DOMインスペクタ
bull コンソール
ブラウザの開発者ツール
bull 開発者ツールはChromeFirefoxIE それぞれ
のブラウザに標準でも入っている
bull Firefoxだと拡張機能のFirebugでもOK
bull 愛用しているので以降のキャプチャはFirebugにて
DOMインスペクタ
bull 選択した要素がHTML上でどういった構造で書か
れているか確認できる
bull ソース表示で見るより簡単
コンソール
bull 表示している画面に対してのJavaScriptの実行を手
軽に試せる
bull 補完も効く(複数行モードの場合はダメ)
コンソール
bull 複数行まとめて実行できるものもあり長めの
コードでも修正実行を繰り返し行える
実際に試してみる
例ヘッダにチケット一覧リンクを追加
bull やること
1 どこに要素を追加すればよいか調べる
2 その要素を起点にリンクを追加するコードを書く
3 うまくいったらView customize で設定
(いったんプライベートで)
4 動作することが確認できたらプライベートを外し
て全体に反映
追加位置を調べる
bull DOMインスペクタで追加したい位置を選択
追加位置を調べる
bull パスを確認
bull id属性がtop-menuとなっているdiv要素配下のul要素の
最後に追加してあげればよさそう
追加位置を調べる
bull コンソールで追加対象の要素を取得してみる
bull divtop-menu gt ul (id属性がtop-menuのdiv要素の子
のul要素) で取れた
リンクを追加するコードを書く
bull 対象のul要素の子要素としてリンクを追加する
コードを実行し思った動作になるまで確認
View customizeで設定
bull 画面の描画完了時にコードを実行する必要がある
(描画完了前だと要素が取得できない)ので
jQueryの$(function)関数を利用
$(function() ロード完了時に呼び出される $(top-menu gt ul) append(ltligtlta href=issuesgt全てのチケットltagtltligt) )
View customizeで設定
bull いったんプライベートで設定し動作を確認する
bull 動作OKでプライベートを外して全体に有効へ
コード(CSS)の書き方
JavaScriptの時と同じ
bull DOMインスペクタで変更したい要素を探す
bull CSSセレクタがどうなりそうかも確認しておく
bull 要素のスタイルを変えて試す
CSSをView customizeに設定
bull Path Patternは絞れるならば絞って問題ないが
CSSセレクタ自体で対象箇所が絞ってかけるので
全画面対象でもほとんど問題なし
bull そのままCSSを書くイメージ
CSSセレクタの書き方
CSSセレクタの確認
bull DOMインスペクタを使うことによってCSSセレ
クタはわかる
CSSセレクタの指定
bull bodyからすべてのパスを書く必要はなくid属性
が付与されているものを起点に考えると良い
bull id属性は一意のものになるので
body divwrapper divwrapper2 divwrapper3 divheader h1
divheader h1
bodyからのフルパス
こっちで十分
良く使うCSSセレクタ
他にもいろいろあるので詳しくない場合には
rdquoCSSセレクタrdquoで一度調べておくと良い
セレクタ名 書式 対象
型セレクタ E E要素
idセレクタ Emyid id名がmyidのE要素
classセレクタ Ewarning class名がwarinigのE要素
子孫セレクタ E F E要素の子孫にあたるF要素
子セレクタ E gt F E要素の子にあたるF要素 (子孫セレクタはE要素の配下ならばどこにあっても良いが子セレクタは1階層下のみが対象)
CSSセレクタで気を付けること
bull 必要のない要素と一致させない
bull 一致してしまう場合には条件をもっときつく
bull 単に要素を指定するのではなく要素+属性で指定す
る(idセレクタclassセレクタなど)
bull 子孫セレクタではなく子セレクタを使うなど
うまく動作しないときの 確認ポイント
Path patternがあっているか
bull 画面のソースを表示してView customizeで指定
したコードが埋め込まれているか確認
bull 埋め込まれていない場合Path patternが間違えている
のでPath patternを見直す
JavaScriptでエラーが発生していないか
bull 開発者ツールでエラーメッセージが出力されて
いないか確認
bull エラーメッセージが出力されていればそれをもとに
JavaScriptを修正
CSSが上書きされていないか
bull 複数のCSSが一致する場合その要素に対してど
のようなスタイルが適用されるかは優先度に
よって決まる
bull 該当の要素を詳細に指定している方が優先される
bull 型セレクタよりidセレクタで指定したものの方が優先
bull セレクタのレベルが同じならば後に書かれたものが
優先される
CSSが上書きされていないか
bull 上にあるほどもの優先度が高い
bull 取り消し線のものは優先度が高いものによって上書きさ
れているもの
チケットの入力フォームがらみは面倒
bull チケットの入力フォームはトラッカーまたはス
テータスが変わるとフォームの再読み込みが行
われる(all_attributes配下が差し替わる)
bull これはトラッカーやステータスによって入力可能な
フィールドや選択肢が変わるため
bull これにより入力フォームの各要素に対する変更(内
容変更やイベントの登録)はリセットされてし
まう
チケット入力フォームに対するイベント
bull 入力フォームが差し替わってもハンドリングでき
るようにする必要がある
bull 考え方としては親の要素に対してイベントを登
録しておいてイベントが発生した際に発生元が
該当のものか判断するようなイメージ
bull jQueryのon関数を使うと簡単に書ける
チケット入力フォームに対するイベント
bull ダメな例
これだと入力フォームが差し替わったタイミングで登録先の要素
(issue_status_id)が別物に変わってしまうのでうまく動かない
bull OKな例
documentに対してイベントハンドラを登録し該当の要素(issue_status_id)
が発生元だったら動作するように書くことによってissue_status_idが差し
替わってもハンドリング可能に
$(issue_status_id) on(change function(e) ステータス変更時に実施したい処理 )
$(document) on(change issue_status_id function(e) ステータス変更時に実施したい処理 )
チケット入力フォームに対する変更
bull 入力フォームが差し替わると変更した内容も元
に戻ってしまうので差し替わったタイミングで
処理する必要がある
bull たとえばカスタムフィールドの値に応じて他のカ
スタムフィールドで選択可能な値を絞る場合など
チケット入力フォームに対する変更
bull 差し替え処理を行っている関数をフックして差
し替え処理の後に処理を差し込む
bull replaceIssueFormWith 関数が差し替え処理を行って
いる関数なのでそこを対象に
関数を別名で退避 var _replaceIssueFormWith = replaceIssueFormWith 関数を中身を変更 退避した処理を呼び出すような関数として作り変える replaceIssueFormWith = function(html) 退避しておいた関数を呼び出し _replaceIssueFormWith(html) ここでフォーム差し替え後に やりたい処理を書く
View customize導入に向けて
試す環境を作る
bull プロジェクトで使っているRedmineにいきなり適
用するのは敷居が高いという場合にはまずは仮
想環境などで試してみる
bull Redmineの各バージョンのVagrant boxを公開している
のでそちらを使えばすぐに
vagrant init onozatyredmine-32
vagrant up
スクリプトを書いてみる
bull この資料を参考に書いてみる
bull スクリプトのサンプルは下記リポジトリに貯め
ていっているので参考に
bull httpsgithubcomonozatyredmine-view-customize-scripts
bull これからもだんだん増えていく予定
困ったときには
困ったときにはhellip
bull onozaty まで (follow me)
bull 即レスとまでいきませんが毎日確認してます
bull スクリプト例などもつぶやいています
困ったときにはhellip
bull こういうことできませんかといった質問もお
気軽にどうぞ
bull 一応全部答えている(できるものはBlogでも公開)つ
もりですが拾えてなかったらごめんなさい
おわり
自己紹介
bull Hirokazu Onozato (onozaty) オノザティ
bull httpstwittercomonozaty
bull httpsgithubcomonozaty
bull httpwwwenjoyxstudycom
bull 株式会社ユニスティ所属
bull エンジニア
bull アプリケーション開発
bull マネージメントも少々
個人で作ったもの
bull 個人の時間を使って作ったものを公開
bull httpwwwenjoyxstudycomproductshtml
bull Firefoxの拡張機能JavaScriptライブラリなど
bull suggestjs - 入力補完ライブラリ
httpwwwenjoyxstudycomjavascriptsuggest
bull ShortcutKey2URL ‐ショートカットキーでURLを開くための
Firefoxの拡張機能
httpwwwenjoyxstudycomfirefoxextensionshortcutkey2url
bull IRCbot Console - ブラウザから操作できる多機能なIRCボット
httpwwwenjoyxstudycomircbotconsole
RedmineのPlugin
bull RedmineのPluginも2年くらい前から作り出した
bull 業務であったらいいなと思うものをプライベー
トな時間で作って公開+自分でも利用
bull View customize
httpswwwredmineorgpluginsredmine_view_customize
bull Parent issue filter
httpswwwredmineorgpluginsredmine_parent_issue_filter
bull Copy parent issue id
httpswwwredmineorgpluginscopy_parent_issue_id
Redmineの使用状況
bull Redmine使用歴6年
bull 初めて触ったのは10年前だったがその時はあまり
しっかり使わずに6年前から継続して使用
bull 現プロジェクトでは09 から使い始めて1x
2x とマイグレーションを重ねて今は31を利用
bull チケット数は40000超え
利用プラグイン
bull View customize httpswwwredmineorgpluginsredmine_view_customize
bull Parent issue filter httpswwwredmineorgpluginsredmine_parent_issue_filter
bull Copy parent issue id httpswwwredmineorgpluginscopy_parent_issue_id
bull Issue Template httpswwwredmineorgpluginsissue_templates
bull Checklists httpswwwredmineorgpluginsredmine_checklists
bull News Notification httpsgithubcomgeorzredmine_news_notification
bull その他自作Pluginも
View customize plugin
View customize plugin
bull Redmineの画面をカスタマイズするためのPlugin
bull httpswwwredmineorgpluginsredmine_view_customize
bull httpsgithubcomonozatyredmine-view-customize
bull 特定の画面に対してJavaScriptCSSを埋め込む
機能を提供
View customize plugin
bull Redmine自体のコードを変更したりプラグイン
を作ったりといった手間無く手軽にカスタマイ
ズできる
bull 再起動不要でカスタマイズを適用
≒UserScript
bull UserScriptをクライアントではなくサーバ側で
設定してRedmineを使用する全ユーザに適用す
るイメージ
UserScriptとは画面ロード時に任意のJavaScriptを実行して
画面カスタマイズを行えるブラウザの機能
できることの例
bull プロジェクト毎にヘッダの色を変える
bull チケット一覧を識別しやすいように装飾
bull チケット作成時にトラッカーに応じてデフォルト値を設定
bull サイドバーを開閉式に
bull 「全てのチケット一覧」リンクをヘッダに
bull 進行中にもかかわらず担当者が未設定の場合に警告を表示
bull ユーザ選択のカスタムフィールドで自分を選択する項目を先頭に追加
bull プロジェクト一覧からの各プロジェクトへのリンク先を変更
bull カスタムフィールドを連動させる(親の値に応じて子を絞り込む)
bull コンテキストメニューを選択しやすくする
注意点
注意点
bull View customize pluginでは画面側(JavaScript
CSS)でしかカスタマイズできないため出来ない
こともある
bull 画面にない情報を表示するとか
注意点
bull 画面だけでもいろいろ解決できることがあるが
もしも欲しい機能に特化したプラグインがあるな
らばそちらを使った方が良い
bull 画面側だけの制約が無いのでシンプルな実装になっ
ているはず
bull その機能の検証も十分行われているはず
使い方
インストール
bull Redmineのインストールディレクトリ配下の
pluginsディレクトリに移動してView customize
pluginのリポジトリをclone
clone時のディレクトリ名はview_customizeとしてください
cd varlibredmineplugins
git clone httpsgithubcomonozatyredmine-view-customizegit view_customize
rake redminepluginsmigrate RAILS_ENV=production
インストールしただけではhellip
bull 何も変わらない
bull View customize pluginはRedmineの拡張方法を
提供するだけでどう設定するかはユーザ次第
設定方法
bull 管理 gt View customize で一覧画面へ遷移し
「New view customize」で設定入力画面へ
設定方法
コードを実行するパス(URL)
正規表現で記載
実行するコード
JavaScript または
StyleSheet(CSS)で書く
Redmineの画面で使用されているjQueryも使える(Redmineのバージョンによってライブラリが違うので注意)
プライベートにチェックを入れると作成したユーザのみに有効
実行
bull Pathが一致すると画面にコードが埋め込まれて
実行される
View customizeを触るうえで キーとなる技術
キーとなる技術
bull JavaScript(ブラウザ上で動作するスクリプト言語)
とCSS(ページのデザインを定義する仕組み)で設定
するのでオリジナルのカスタマイズをしたい場
合にはそれらの知識が必要となってくる
bull ただカスタマイズをするにあたってそこまで多く
の知識が求められるわけではないので調べたり見
よう見まねでもどうにかなるはず
bull 実際JavaScriptやCSS知らなかった人でも調べながらで使え
てたりする
jQuery
jQuery
bull JavaScriptライブラリ
bull httpsjquerycom
bull RedmineではjQueryをすべての画面で読み込んで
いるのでView customizeでもjQueryが利用でき
る
jQuery
bull jQueryを使うとクロスブラウザによる違いの煩
わしさを吸収したりDOM操作が簡潔に書けるの
で便利
bull ただ最近のブラウザだと標準で代替するようなメ
ソッドが提供されているのでIE8捨てられるならば
jQuery使うまでもないかも
bull WebにjQueryの情報はあふれているので調べる
のも簡単
CSSセレクタ
CSSセレクタ
bull CSSセレクタとはCSSでスタイルを適用する対象
を示すもの
bull View customizeでも良く使うことになる
bull JavaScriptで指定要素を取得するとき
bull jQueryの$(selector)関数
bull CSSで対象を指定するとき
divheader h1
設定に関するノウハウ
対象画面の指定方法
Path pattern
bull Path patternに一致した画面の場合該当のスクリ
プトが埋め込まれる
bull 正規表現で記載する
URLとPath
bull URLでアプリケーション配下がPath
bull クエリパラメータは含まれない
bull httpexamplecomprojects
-gt prjects
bull httpexamplecomprojectsaissuesset_filter=1
-gt projectsaissues
bull httpexamplecomredmineprojects
ドキュメントルートではなくredmineとしてインストール
-gt prjects
Pathを確認する方法
bull バージョン114からHTMLにPathをコメントと
して埋め込むようになっている
bull ブラウザのソース表示で見ればその画面のPathが
わかる
指定例 (よくつかうもの)
Path pattern 一致する画面
全ての画面
issues$ チケット一覧
issuesnew$ チケットの新規作成画面
issues[0-9]+$ 個々のチケット内容表示画面
issues[0-9]+copy$ チケットのコピーによる作成画面
issuesgantt ガントチャート
projects$ プロジェクト一覧
[]+$ といった文字は正規表現におけるメタ文字(特殊な意味をもった文字)
チケットの入力フォーム
bull チケットの入力フォームはいろいろな画面で存
在するのでPathの指定だけだと面倒
bull issues1 チケット内容表示画面でも編集ボタンでフォームが
bull issuesnew 新規作成
bull issues1copy コピーによる作成画面
bull issuesgantt timesガントチャートなのでこれは一致させたくない
bull issues timesチケット一覧の場合 チケット登録時のValidationエラーの場合
Path pattern + JavaScriptで絞る
bull ldquoissuesrdquo と指定してJavaScript側でチケットの入
力フォームが無かったら処理しないようにする
bull チケットの入力フォームでしか存在しない要素
(issue-form とか)で確認する
bull 指定した要素が無かった場合でも処理がスキップされ
るように書いていればOK
jQueryの$(selector)関数
bull jQueryの$(selector)関数で返却されるjQueryオブジェクト
は一致する要素が無かった場合何も処理されないので
それを使っていれば大丈夫
bull 上記例だと入力フォームが無かった場合on関数でのイベント
登録が行われず何も処理されないことになる
(エラーにもならない)
$(issue-form input[type=submit]) on(click function(event) 送信ボタン押下時に何か処理を行わせる )
プロジェクト毎の指定
bull チケット詳細画面(issues1 など)はプロジェク
トをパスに持たないのでPathだけだとプロジェ
クトを指定できない
bull projectsprj1issues
bull projectsprj1issues1 timesこれはパスとして無効
bull issues1 チケット詳細はプロジェクト関係なく固定パス
body要素に付与されるclass属性で判断
bull body要素のclass属性に project-プロジェクト識別
子 が設定されるのでこれを使ってプロジェクト
を識別する
JavaScriptでプロジェクトを判定
bull jQueryのhasClass()関数で指定のクラス名が存在
するかチェックできる
bull またはclass属性を取り出して比較するなど
if ($(body)hasClass(project-prj1)) プロジェクト識別子がprj1の場合
CSSでプロジェクトを指定
bull CSSのセレクタでbodyのclassを利用するだけ
bodyproject-prj1 top-menu background-color 006400 dark green bodyproject-prj1 header background-color 008000 green
class属性が振られるもの
bull プロジェクト以外にもclass属性が振られるもの
が多々あるので対象画面や対象箇所を限定する
のに使用できる
class属性が振られるもの
bull body要素
bull controller-コントローラ名
bull action-アクション名
bull チケット一覧の各行
bull tracker-トラッカーID
bull status-ステータスID
bull priority-優先度ID
bull created-by-me
class属性が振られるもの
bull 他にもいろいろあるので詳しくは「Redmineの
画面で振られているclass属性について -
EnjoyStudy」にて
bull httpblogenjoyxstudycomentry20141011000000
コード(JavaScript)の書き方
ブラウザの開発者ツールを活用
ブラウザの開発者ツール
bull いきなりView customizeで設定するのではなく
ブラウザの開発者ツールを使いながら作成確認
する
bull DOMインスペクタ
bull コンソール
ブラウザの開発者ツール
bull 開発者ツールはChromeFirefoxIE それぞれ
のブラウザに標準でも入っている
bull Firefoxだと拡張機能のFirebugでもOK
bull 愛用しているので以降のキャプチャはFirebugにて
DOMインスペクタ
bull 選択した要素がHTML上でどういった構造で書か
れているか確認できる
bull ソース表示で見るより簡単
コンソール
bull 表示している画面に対してのJavaScriptの実行を手
軽に試せる
bull 補完も効く(複数行モードの場合はダメ)
コンソール
bull 複数行まとめて実行できるものもあり長めの
コードでも修正実行を繰り返し行える
実際に試してみる
例ヘッダにチケット一覧リンクを追加
bull やること
1 どこに要素を追加すればよいか調べる
2 その要素を起点にリンクを追加するコードを書く
3 うまくいったらView customize で設定
(いったんプライベートで)
4 動作することが確認できたらプライベートを外し
て全体に反映
追加位置を調べる
bull DOMインスペクタで追加したい位置を選択
追加位置を調べる
bull パスを確認
bull id属性がtop-menuとなっているdiv要素配下のul要素の
最後に追加してあげればよさそう
追加位置を調べる
bull コンソールで追加対象の要素を取得してみる
bull divtop-menu gt ul (id属性がtop-menuのdiv要素の子
のul要素) で取れた
リンクを追加するコードを書く
bull 対象のul要素の子要素としてリンクを追加する
コードを実行し思った動作になるまで確認
View customizeで設定
bull 画面の描画完了時にコードを実行する必要がある
(描画完了前だと要素が取得できない)ので
jQueryの$(function)関数を利用
$(function() ロード完了時に呼び出される $(top-menu gt ul) append(ltligtlta href=issuesgt全てのチケットltagtltligt) )
View customizeで設定
bull いったんプライベートで設定し動作を確認する
bull 動作OKでプライベートを外して全体に有効へ
コード(CSS)の書き方
JavaScriptの時と同じ
bull DOMインスペクタで変更したい要素を探す
bull CSSセレクタがどうなりそうかも確認しておく
bull 要素のスタイルを変えて試す
CSSをView customizeに設定
bull Path Patternは絞れるならば絞って問題ないが
CSSセレクタ自体で対象箇所が絞ってかけるので
全画面対象でもほとんど問題なし
bull そのままCSSを書くイメージ
CSSセレクタの書き方
CSSセレクタの確認
bull DOMインスペクタを使うことによってCSSセレ
クタはわかる
CSSセレクタの指定
bull bodyからすべてのパスを書く必要はなくid属性
が付与されているものを起点に考えると良い
bull id属性は一意のものになるので
body divwrapper divwrapper2 divwrapper3 divheader h1
divheader h1
bodyからのフルパス
こっちで十分
良く使うCSSセレクタ
他にもいろいろあるので詳しくない場合には
rdquoCSSセレクタrdquoで一度調べておくと良い
セレクタ名 書式 対象
型セレクタ E E要素
idセレクタ Emyid id名がmyidのE要素
classセレクタ Ewarning class名がwarinigのE要素
子孫セレクタ E F E要素の子孫にあたるF要素
子セレクタ E gt F E要素の子にあたるF要素 (子孫セレクタはE要素の配下ならばどこにあっても良いが子セレクタは1階層下のみが対象)
CSSセレクタで気を付けること
bull 必要のない要素と一致させない
bull 一致してしまう場合には条件をもっときつく
bull 単に要素を指定するのではなく要素+属性で指定す
る(idセレクタclassセレクタなど)
bull 子孫セレクタではなく子セレクタを使うなど
うまく動作しないときの 確認ポイント
Path patternがあっているか
bull 画面のソースを表示してView customizeで指定
したコードが埋め込まれているか確認
bull 埋め込まれていない場合Path patternが間違えている
のでPath patternを見直す
JavaScriptでエラーが発生していないか
bull 開発者ツールでエラーメッセージが出力されて
いないか確認
bull エラーメッセージが出力されていればそれをもとに
JavaScriptを修正
CSSが上書きされていないか
bull 複数のCSSが一致する場合その要素に対してど
のようなスタイルが適用されるかは優先度に
よって決まる
bull 該当の要素を詳細に指定している方が優先される
bull 型セレクタよりidセレクタで指定したものの方が優先
bull セレクタのレベルが同じならば後に書かれたものが
優先される
CSSが上書きされていないか
bull 上にあるほどもの優先度が高い
bull 取り消し線のものは優先度が高いものによって上書きさ
れているもの
チケットの入力フォームがらみは面倒
bull チケットの入力フォームはトラッカーまたはス
テータスが変わるとフォームの再読み込みが行
われる(all_attributes配下が差し替わる)
bull これはトラッカーやステータスによって入力可能な
フィールドや選択肢が変わるため
bull これにより入力フォームの各要素に対する変更(内
容変更やイベントの登録)はリセットされてし
まう
チケット入力フォームに対するイベント
bull 入力フォームが差し替わってもハンドリングでき
るようにする必要がある
bull 考え方としては親の要素に対してイベントを登
録しておいてイベントが発生した際に発生元が
該当のものか判断するようなイメージ
bull jQueryのon関数を使うと簡単に書ける
チケット入力フォームに対するイベント
bull ダメな例
これだと入力フォームが差し替わったタイミングで登録先の要素
(issue_status_id)が別物に変わってしまうのでうまく動かない
bull OKな例
documentに対してイベントハンドラを登録し該当の要素(issue_status_id)
が発生元だったら動作するように書くことによってissue_status_idが差し
替わってもハンドリング可能に
$(issue_status_id) on(change function(e) ステータス変更時に実施したい処理 )
$(document) on(change issue_status_id function(e) ステータス変更時に実施したい処理 )
チケット入力フォームに対する変更
bull 入力フォームが差し替わると変更した内容も元
に戻ってしまうので差し替わったタイミングで
処理する必要がある
bull たとえばカスタムフィールドの値に応じて他のカ
スタムフィールドで選択可能な値を絞る場合など
チケット入力フォームに対する変更
bull 差し替え処理を行っている関数をフックして差
し替え処理の後に処理を差し込む
bull replaceIssueFormWith 関数が差し替え処理を行って
いる関数なのでそこを対象に
関数を別名で退避 var _replaceIssueFormWith = replaceIssueFormWith 関数を中身を変更 退避した処理を呼び出すような関数として作り変える replaceIssueFormWith = function(html) 退避しておいた関数を呼び出し _replaceIssueFormWith(html) ここでフォーム差し替え後に やりたい処理を書く
View customize導入に向けて
試す環境を作る
bull プロジェクトで使っているRedmineにいきなり適
用するのは敷居が高いという場合にはまずは仮
想環境などで試してみる
bull Redmineの各バージョンのVagrant boxを公開している
のでそちらを使えばすぐに
vagrant init onozatyredmine-32
vagrant up
スクリプトを書いてみる
bull この資料を参考に書いてみる
bull スクリプトのサンプルは下記リポジトリに貯め
ていっているので参考に
bull httpsgithubcomonozatyredmine-view-customize-scripts
bull これからもだんだん増えていく予定
困ったときには
困ったときにはhellip
bull onozaty まで (follow me)
bull 即レスとまでいきませんが毎日確認してます
bull スクリプト例などもつぶやいています
困ったときにはhellip
bull こういうことできませんかといった質問もお
気軽にどうぞ
bull 一応全部答えている(できるものはBlogでも公開)つ
もりですが拾えてなかったらごめんなさい
おわり
個人で作ったもの
bull 個人の時間を使って作ったものを公開
bull httpwwwenjoyxstudycomproductshtml
bull Firefoxの拡張機能JavaScriptライブラリなど
bull suggestjs - 入力補完ライブラリ
httpwwwenjoyxstudycomjavascriptsuggest
bull ShortcutKey2URL ‐ショートカットキーでURLを開くための
Firefoxの拡張機能
httpwwwenjoyxstudycomfirefoxextensionshortcutkey2url
bull IRCbot Console - ブラウザから操作できる多機能なIRCボット
httpwwwenjoyxstudycomircbotconsole
RedmineのPlugin
bull RedmineのPluginも2年くらい前から作り出した
bull 業務であったらいいなと思うものをプライベー
トな時間で作って公開+自分でも利用
bull View customize
httpswwwredmineorgpluginsredmine_view_customize
bull Parent issue filter
httpswwwredmineorgpluginsredmine_parent_issue_filter
bull Copy parent issue id
httpswwwredmineorgpluginscopy_parent_issue_id
Redmineの使用状況
bull Redmine使用歴6年
bull 初めて触ったのは10年前だったがその時はあまり
しっかり使わずに6年前から継続して使用
bull 現プロジェクトでは09 から使い始めて1x
2x とマイグレーションを重ねて今は31を利用
bull チケット数は40000超え
利用プラグイン
bull View customize httpswwwredmineorgpluginsredmine_view_customize
bull Parent issue filter httpswwwredmineorgpluginsredmine_parent_issue_filter
bull Copy parent issue id httpswwwredmineorgpluginscopy_parent_issue_id
bull Issue Template httpswwwredmineorgpluginsissue_templates
bull Checklists httpswwwredmineorgpluginsredmine_checklists
bull News Notification httpsgithubcomgeorzredmine_news_notification
bull その他自作Pluginも
View customize plugin
View customize plugin
bull Redmineの画面をカスタマイズするためのPlugin
bull httpswwwredmineorgpluginsredmine_view_customize
bull httpsgithubcomonozatyredmine-view-customize
bull 特定の画面に対してJavaScriptCSSを埋め込む
機能を提供
View customize plugin
bull Redmine自体のコードを変更したりプラグイン
を作ったりといった手間無く手軽にカスタマイ
ズできる
bull 再起動不要でカスタマイズを適用
≒UserScript
bull UserScriptをクライアントではなくサーバ側で
設定してRedmineを使用する全ユーザに適用す
るイメージ
UserScriptとは画面ロード時に任意のJavaScriptを実行して
画面カスタマイズを行えるブラウザの機能
できることの例
bull プロジェクト毎にヘッダの色を変える
bull チケット一覧を識別しやすいように装飾
bull チケット作成時にトラッカーに応じてデフォルト値を設定
bull サイドバーを開閉式に
bull 「全てのチケット一覧」リンクをヘッダに
bull 進行中にもかかわらず担当者が未設定の場合に警告を表示
bull ユーザ選択のカスタムフィールドで自分を選択する項目を先頭に追加
bull プロジェクト一覧からの各プロジェクトへのリンク先を変更
bull カスタムフィールドを連動させる(親の値に応じて子を絞り込む)
bull コンテキストメニューを選択しやすくする
注意点
注意点
bull View customize pluginでは画面側(JavaScript
CSS)でしかカスタマイズできないため出来ない
こともある
bull 画面にない情報を表示するとか
注意点
bull 画面だけでもいろいろ解決できることがあるが
もしも欲しい機能に特化したプラグインがあるな
らばそちらを使った方が良い
bull 画面側だけの制約が無いのでシンプルな実装になっ
ているはず
bull その機能の検証も十分行われているはず
使い方
インストール
bull Redmineのインストールディレクトリ配下の
pluginsディレクトリに移動してView customize
pluginのリポジトリをclone
clone時のディレクトリ名はview_customizeとしてください
cd varlibredmineplugins
git clone httpsgithubcomonozatyredmine-view-customizegit view_customize
rake redminepluginsmigrate RAILS_ENV=production
インストールしただけではhellip
bull 何も変わらない
bull View customize pluginはRedmineの拡張方法を
提供するだけでどう設定するかはユーザ次第
設定方法
bull 管理 gt View customize で一覧画面へ遷移し
「New view customize」で設定入力画面へ
設定方法
コードを実行するパス(URL)
正規表現で記載
実行するコード
JavaScript または
StyleSheet(CSS)で書く
Redmineの画面で使用されているjQueryも使える(Redmineのバージョンによってライブラリが違うので注意)
プライベートにチェックを入れると作成したユーザのみに有効
実行
bull Pathが一致すると画面にコードが埋め込まれて
実行される
View customizeを触るうえで キーとなる技術
キーとなる技術
bull JavaScript(ブラウザ上で動作するスクリプト言語)
とCSS(ページのデザインを定義する仕組み)で設定
するのでオリジナルのカスタマイズをしたい場
合にはそれらの知識が必要となってくる
bull ただカスタマイズをするにあたってそこまで多く
の知識が求められるわけではないので調べたり見
よう見まねでもどうにかなるはず
bull 実際JavaScriptやCSS知らなかった人でも調べながらで使え
てたりする
jQuery
jQuery
bull JavaScriptライブラリ
bull httpsjquerycom
bull RedmineではjQueryをすべての画面で読み込んで
いるのでView customizeでもjQueryが利用でき
る
jQuery
bull jQueryを使うとクロスブラウザによる違いの煩
わしさを吸収したりDOM操作が簡潔に書けるの
で便利
bull ただ最近のブラウザだと標準で代替するようなメ
ソッドが提供されているのでIE8捨てられるならば
jQuery使うまでもないかも
bull WebにjQueryの情報はあふれているので調べる
のも簡単
CSSセレクタ
CSSセレクタ
bull CSSセレクタとはCSSでスタイルを適用する対象
を示すもの
bull View customizeでも良く使うことになる
bull JavaScriptで指定要素を取得するとき
bull jQueryの$(selector)関数
bull CSSで対象を指定するとき
divheader h1
設定に関するノウハウ
対象画面の指定方法
Path pattern
bull Path patternに一致した画面の場合該当のスクリ
プトが埋め込まれる
bull 正規表現で記載する
URLとPath
bull URLでアプリケーション配下がPath
bull クエリパラメータは含まれない
bull httpexamplecomprojects
-gt prjects
bull httpexamplecomprojectsaissuesset_filter=1
-gt projectsaissues
bull httpexamplecomredmineprojects
ドキュメントルートではなくredmineとしてインストール
-gt prjects
Pathを確認する方法
bull バージョン114からHTMLにPathをコメントと
して埋め込むようになっている
bull ブラウザのソース表示で見ればその画面のPathが
わかる
指定例 (よくつかうもの)
Path pattern 一致する画面
全ての画面
issues$ チケット一覧
issuesnew$ チケットの新規作成画面
issues[0-9]+$ 個々のチケット内容表示画面
issues[0-9]+copy$ チケットのコピーによる作成画面
issuesgantt ガントチャート
projects$ プロジェクト一覧
[]+$ といった文字は正規表現におけるメタ文字(特殊な意味をもった文字)
チケットの入力フォーム
bull チケットの入力フォームはいろいろな画面で存
在するのでPathの指定だけだと面倒
bull issues1 チケット内容表示画面でも編集ボタンでフォームが
bull issuesnew 新規作成
bull issues1copy コピーによる作成画面
bull issuesgantt timesガントチャートなのでこれは一致させたくない
bull issues timesチケット一覧の場合 チケット登録時のValidationエラーの場合
Path pattern + JavaScriptで絞る
bull ldquoissuesrdquo と指定してJavaScript側でチケットの入
力フォームが無かったら処理しないようにする
bull チケットの入力フォームでしか存在しない要素
(issue-form とか)で確認する
bull 指定した要素が無かった場合でも処理がスキップされ
るように書いていればOK
jQueryの$(selector)関数
bull jQueryの$(selector)関数で返却されるjQueryオブジェクト
は一致する要素が無かった場合何も処理されないので
それを使っていれば大丈夫
bull 上記例だと入力フォームが無かった場合on関数でのイベント
登録が行われず何も処理されないことになる
(エラーにもならない)
$(issue-form input[type=submit]) on(click function(event) 送信ボタン押下時に何か処理を行わせる )
プロジェクト毎の指定
bull チケット詳細画面(issues1 など)はプロジェク
トをパスに持たないのでPathだけだとプロジェ
クトを指定できない
bull projectsprj1issues
bull projectsprj1issues1 timesこれはパスとして無効
bull issues1 チケット詳細はプロジェクト関係なく固定パス
body要素に付与されるclass属性で判断
bull body要素のclass属性に project-プロジェクト識別
子 が設定されるのでこれを使ってプロジェクト
を識別する
JavaScriptでプロジェクトを判定
bull jQueryのhasClass()関数で指定のクラス名が存在
するかチェックできる
bull またはclass属性を取り出して比較するなど
if ($(body)hasClass(project-prj1)) プロジェクト識別子がprj1の場合
CSSでプロジェクトを指定
bull CSSのセレクタでbodyのclassを利用するだけ
bodyproject-prj1 top-menu background-color 006400 dark green bodyproject-prj1 header background-color 008000 green
class属性が振られるもの
bull プロジェクト以外にもclass属性が振られるもの
が多々あるので対象画面や対象箇所を限定する
のに使用できる
class属性が振られるもの
bull body要素
bull controller-コントローラ名
bull action-アクション名
bull チケット一覧の各行
bull tracker-トラッカーID
bull status-ステータスID
bull priority-優先度ID
bull created-by-me
class属性が振られるもの
bull 他にもいろいろあるので詳しくは「Redmineの
画面で振られているclass属性について -
EnjoyStudy」にて
bull httpblogenjoyxstudycomentry20141011000000
コード(JavaScript)の書き方
ブラウザの開発者ツールを活用
ブラウザの開発者ツール
bull いきなりView customizeで設定するのではなく
ブラウザの開発者ツールを使いながら作成確認
する
bull DOMインスペクタ
bull コンソール
ブラウザの開発者ツール
bull 開発者ツールはChromeFirefoxIE それぞれ
のブラウザに標準でも入っている
bull Firefoxだと拡張機能のFirebugでもOK
bull 愛用しているので以降のキャプチャはFirebugにて
DOMインスペクタ
bull 選択した要素がHTML上でどういった構造で書か
れているか確認できる
bull ソース表示で見るより簡単
コンソール
bull 表示している画面に対してのJavaScriptの実行を手
軽に試せる
bull 補完も効く(複数行モードの場合はダメ)
コンソール
bull 複数行まとめて実行できるものもあり長めの
コードでも修正実行を繰り返し行える
実際に試してみる
例ヘッダにチケット一覧リンクを追加
bull やること
1 どこに要素を追加すればよいか調べる
2 その要素を起点にリンクを追加するコードを書く
3 うまくいったらView customize で設定
(いったんプライベートで)
4 動作することが確認できたらプライベートを外し
て全体に反映
追加位置を調べる
bull DOMインスペクタで追加したい位置を選択
追加位置を調べる
bull パスを確認
bull id属性がtop-menuとなっているdiv要素配下のul要素の
最後に追加してあげればよさそう
追加位置を調べる
bull コンソールで追加対象の要素を取得してみる
bull divtop-menu gt ul (id属性がtop-menuのdiv要素の子
のul要素) で取れた
リンクを追加するコードを書く
bull 対象のul要素の子要素としてリンクを追加する
コードを実行し思った動作になるまで確認
View customizeで設定
bull 画面の描画完了時にコードを実行する必要がある
(描画完了前だと要素が取得できない)ので
jQueryの$(function)関数を利用
$(function() ロード完了時に呼び出される $(top-menu gt ul) append(ltligtlta href=issuesgt全てのチケットltagtltligt) )
View customizeで設定
bull いったんプライベートで設定し動作を確認する
bull 動作OKでプライベートを外して全体に有効へ
コード(CSS)の書き方
JavaScriptの時と同じ
bull DOMインスペクタで変更したい要素を探す
bull CSSセレクタがどうなりそうかも確認しておく
bull 要素のスタイルを変えて試す
CSSをView customizeに設定
bull Path Patternは絞れるならば絞って問題ないが
CSSセレクタ自体で対象箇所が絞ってかけるので
全画面対象でもほとんど問題なし
bull そのままCSSを書くイメージ
CSSセレクタの書き方
CSSセレクタの確認
bull DOMインスペクタを使うことによってCSSセレ
クタはわかる
CSSセレクタの指定
bull bodyからすべてのパスを書く必要はなくid属性
が付与されているものを起点に考えると良い
bull id属性は一意のものになるので
body divwrapper divwrapper2 divwrapper3 divheader h1
divheader h1
bodyからのフルパス
こっちで十分
良く使うCSSセレクタ
他にもいろいろあるので詳しくない場合には
rdquoCSSセレクタrdquoで一度調べておくと良い
セレクタ名 書式 対象
型セレクタ E E要素
idセレクタ Emyid id名がmyidのE要素
classセレクタ Ewarning class名がwarinigのE要素
子孫セレクタ E F E要素の子孫にあたるF要素
子セレクタ E gt F E要素の子にあたるF要素 (子孫セレクタはE要素の配下ならばどこにあっても良いが子セレクタは1階層下のみが対象)
CSSセレクタで気を付けること
bull 必要のない要素と一致させない
bull 一致してしまう場合には条件をもっときつく
bull 単に要素を指定するのではなく要素+属性で指定す
る(idセレクタclassセレクタなど)
bull 子孫セレクタではなく子セレクタを使うなど
うまく動作しないときの 確認ポイント
Path patternがあっているか
bull 画面のソースを表示してView customizeで指定
したコードが埋め込まれているか確認
bull 埋め込まれていない場合Path patternが間違えている
のでPath patternを見直す
JavaScriptでエラーが発生していないか
bull 開発者ツールでエラーメッセージが出力されて
いないか確認
bull エラーメッセージが出力されていればそれをもとに
JavaScriptを修正
CSSが上書きされていないか
bull 複数のCSSが一致する場合その要素に対してど
のようなスタイルが適用されるかは優先度に
よって決まる
bull 該当の要素を詳細に指定している方が優先される
bull 型セレクタよりidセレクタで指定したものの方が優先
bull セレクタのレベルが同じならば後に書かれたものが
優先される
CSSが上書きされていないか
bull 上にあるほどもの優先度が高い
bull 取り消し線のものは優先度が高いものによって上書きさ
れているもの
チケットの入力フォームがらみは面倒
bull チケットの入力フォームはトラッカーまたはス
テータスが変わるとフォームの再読み込みが行
われる(all_attributes配下が差し替わる)
bull これはトラッカーやステータスによって入力可能な
フィールドや選択肢が変わるため
bull これにより入力フォームの各要素に対する変更(内
容変更やイベントの登録)はリセットされてし
まう
チケット入力フォームに対するイベント
bull 入力フォームが差し替わってもハンドリングでき
るようにする必要がある
bull 考え方としては親の要素に対してイベントを登
録しておいてイベントが発生した際に発生元が
該当のものか判断するようなイメージ
bull jQueryのon関数を使うと簡単に書ける
チケット入力フォームに対するイベント
bull ダメな例
これだと入力フォームが差し替わったタイミングで登録先の要素
(issue_status_id)が別物に変わってしまうのでうまく動かない
bull OKな例
documentに対してイベントハンドラを登録し該当の要素(issue_status_id)
が発生元だったら動作するように書くことによってissue_status_idが差し
替わってもハンドリング可能に
$(issue_status_id) on(change function(e) ステータス変更時に実施したい処理 )
$(document) on(change issue_status_id function(e) ステータス変更時に実施したい処理 )
チケット入力フォームに対する変更
bull 入力フォームが差し替わると変更した内容も元
に戻ってしまうので差し替わったタイミングで
処理する必要がある
bull たとえばカスタムフィールドの値に応じて他のカ
スタムフィールドで選択可能な値を絞る場合など
チケット入力フォームに対する変更
bull 差し替え処理を行っている関数をフックして差
し替え処理の後に処理を差し込む
bull replaceIssueFormWith 関数が差し替え処理を行って
いる関数なのでそこを対象に
関数を別名で退避 var _replaceIssueFormWith = replaceIssueFormWith 関数を中身を変更 退避した処理を呼び出すような関数として作り変える replaceIssueFormWith = function(html) 退避しておいた関数を呼び出し _replaceIssueFormWith(html) ここでフォーム差し替え後に やりたい処理を書く
View customize導入に向けて
試す環境を作る
bull プロジェクトで使っているRedmineにいきなり適
用するのは敷居が高いという場合にはまずは仮
想環境などで試してみる
bull Redmineの各バージョンのVagrant boxを公開している
のでそちらを使えばすぐに
vagrant init onozatyredmine-32
vagrant up
スクリプトを書いてみる
bull この資料を参考に書いてみる
bull スクリプトのサンプルは下記リポジトリに貯め
ていっているので参考に
bull httpsgithubcomonozatyredmine-view-customize-scripts
bull これからもだんだん増えていく予定
困ったときには
困ったときにはhellip
bull onozaty まで (follow me)
bull 即レスとまでいきませんが毎日確認してます
bull スクリプト例などもつぶやいています
困ったときにはhellip
bull こういうことできませんかといった質問もお
気軽にどうぞ
bull 一応全部答えている(できるものはBlogでも公開)つ
もりですが拾えてなかったらごめんなさい
おわり
RedmineのPlugin
bull RedmineのPluginも2年くらい前から作り出した
bull 業務であったらいいなと思うものをプライベー
トな時間で作って公開+自分でも利用
bull View customize
httpswwwredmineorgpluginsredmine_view_customize
bull Parent issue filter
httpswwwredmineorgpluginsredmine_parent_issue_filter
bull Copy parent issue id
httpswwwredmineorgpluginscopy_parent_issue_id
Redmineの使用状況
bull Redmine使用歴6年
bull 初めて触ったのは10年前だったがその時はあまり
しっかり使わずに6年前から継続して使用
bull 現プロジェクトでは09 から使い始めて1x
2x とマイグレーションを重ねて今は31を利用
bull チケット数は40000超え
利用プラグイン
bull View customize httpswwwredmineorgpluginsredmine_view_customize
bull Parent issue filter httpswwwredmineorgpluginsredmine_parent_issue_filter
bull Copy parent issue id httpswwwredmineorgpluginscopy_parent_issue_id
bull Issue Template httpswwwredmineorgpluginsissue_templates
bull Checklists httpswwwredmineorgpluginsredmine_checklists
bull News Notification httpsgithubcomgeorzredmine_news_notification
bull その他自作Pluginも
View customize plugin
View customize plugin
bull Redmineの画面をカスタマイズするためのPlugin
bull httpswwwredmineorgpluginsredmine_view_customize
bull httpsgithubcomonozatyredmine-view-customize
bull 特定の画面に対してJavaScriptCSSを埋め込む
機能を提供
View customize plugin
bull Redmine自体のコードを変更したりプラグイン
を作ったりといった手間無く手軽にカスタマイ
ズできる
bull 再起動不要でカスタマイズを適用
≒UserScript
bull UserScriptをクライアントではなくサーバ側で
設定してRedmineを使用する全ユーザに適用す
るイメージ
UserScriptとは画面ロード時に任意のJavaScriptを実行して
画面カスタマイズを行えるブラウザの機能
できることの例
bull プロジェクト毎にヘッダの色を変える
bull チケット一覧を識別しやすいように装飾
bull チケット作成時にトラッカーに応じてデフォルト値を設定
bull サイドバーを開閉式に
bull 「全てのチケット一覧」リンクをヘッダに
bull 進行中にもかかわらず担当者が未設定の場合に警告を表示
bull ユーザ選択のカスタムフィールドで自分を選択する項目を先頭に追加
bull プロジェクト一覧からの各プロジェクトへのリンク先を変更
bull カスタムフィールドを連動させる(親の値に応じて子を絞り込む)
bull コンテキストメニューを選択しやすくする
注意点
注意点
bull View customize pluginでは画面側(JavaScript
CSS)でしかカスタマイズできないため出来ない
こともある
bull 画面にない情報を表示するとか
注意点
bull 画面だけでもいろいろ解決できることがあるが
もしも欲しい機能に特化したプラグインがあるな
らばそちらを使った方が良い
bull 画面側だけの制約が無いのでシンプルな実装になっ
ているはず
bull その機能の検証も十分行われているはず
使い方
インストール
bull Redmineのインストールディレクトリ配下の
pluginsディレクトリに移動してView customize
pluginのリポジトリをclone
clone時のディレクトリ名はview_customizeとしてください
cd varlibredmineplugins
git clone httpsgithubcomonozatyredmine-view-customizegit view_customize
rake redminepluginsmigrate RAILS_ENV=production
インストールしただけではhellip
bull 何も変わらない
bull View customize pluginはRedmineの拡張方法を
提供するだけでどう設定するかはユーザ次第
設定方法
bull 管理 gt View customize で一覧画面へ遷移し
「New view customize」で設定入力画面へ
設定方法
コードを実行するパス(URL)
正規表現で記載
実行するコード
JavaScript または
StyleSheet(CSS)で書く
Redmineの画面で使用されているjQueryも使える(Redmineのバージョンによってライブラリが違うので注意)
プライベートにチェックを入れると作成したユーザのみに有効
実行
bull Pathが一致すると画面にコードが埋め込まれて
実行される
View customizeを触るうえで キーとなる技術
キーとなる技術
bull JavaScript(ブラウザ上で動作するスクリプト言語)
とCSS(ページのデザインを定義する仕組み)で設定
するのでオリジナルのカスタマイズをしたい場
合にはそれらの知識が必要となってくる
bull ただカスタマイズをするにあたってそこまで多く
の知識が求められるわけではないので調べたり見
よう見まねでもどうにかなるはず
bull 実際JavaScriptやCSS知らなかった人でも調べながらで使え
てたりする
jQuery
jQuery
bull JavaScriptライブラリ
bull httpsjquerycom
bull RedmineではjQueryをすべての画面で読み込んで
いるのでView customizeでもjQueryが利用でき
る
jQuery
bull jQueryを使うとクロスブラウザによる違いの煩
わしさを吸収したりDOM操作が簡潔に書けるの
で便利
bull ただ最近のブラウザだと標準で代替するようなメ
ソッドが提供されているのでIE8捨てられるならば
jQuery使うまでもないかも
bull WebにjQueryの情報はあふれているので調べる
のも簡単
CSSセレクタ
CSSセレクタ
bull CSSセレクタとはCSSでスタイルを適用する対象
を示すもの
bull View customizeでも良く使うことになる
bull JavaScriptで指定要素を取得するとき
bull jQueryの$(selector)関数
bull CSSで対象を指定するとき
divheader h1
設定に関するノウハウ
対象画面の指定方法
Path pattern
bull Path patternに一致した画面の場合該当のスクリ
プトが埋め込まれる
bull 正規表現で記載する
URLとPath
bull URLでアプリケーション配下がPath
bull クエリパラメータは含まれない
bull httpexamplecomprojects
-gt prjects
bull httpexamplecomprojectsaissuesset_filter=1
-gt projectsaissues
bull httpexamplecomredmineprojects
ドキュメントルートではなくredmineとしてインストール
-gt prjects
Pathを確認する方法
bull バージョン114からHTMLにPathをコメントと
して埋め込むようになっている
bull ブラウザのソース表示で見ればその画面のPathが
わかる
指定例 (よくつかうもの)
Path pattern 一致する画面
全ての画面
issues$ チケット一覧
issuesnew$ チケットの新規作成画面
issues[0-9]+$ 個々のチケット内容表示画面
issues[0-9]+copy$ チケットのコピーによる作成画面
issuesgantt ガントチャート
projects$ プロジェクト一覧
[]+$ といった文字は正規表現におけるメタ文字(特殊な意味をもった文字)
チケットの入力フォーム
bull チケットの入力フォームはいろいろな画面で存
在するのでPathの指定だけだと面倒
bull issues1 チケット内容表示画面でも編集ボタンでフォームが
bull issuesnew 新規作成
bull issues1copy コピーによる作成画面
bull issuesgantt timesガントチャートなのでこれは一致させたくない
bull issues timesチケット一覧の場合 チケット登録時のValidationエラーの場合
Path pattern + JavaScriptで絞る
bull ldquoissuesrdquo と指定してJavaScript側でチケットの入
力フォームが無かったら処理しないようにする
bull チケットの入力フォームでしか存在しない要素
(issue-form とか)で確認する
bull 指定した要素が無かった場合でも処理がスキップされ
るように書いていればOK
jQueryの$(selector)関数
bull jQueryの$(selector)関数で返却されるjQueryオブジェクト
は一致する要素が無かった場合何も処理されないので
それを使っていれば大丈夫
bull 上記例だと入力フォームが無かった場合on関数でのイベント
登録が行われず何も処理されないことになる
(エラーにもならない)
$(issue-form input[type=submit]) on(click function(event) 送信ボタン押下時に何か処理を行わせる )
プロジェクト毎の指定
bull チケット詳細画面(issues1 など)はプロジェク
トをパスに持たないのでPathだけだとプロジェ
クトを指定できない
bull projectsprj1issues
bull projectsprj1issues1 timesこれはパスとして無効
bull issues1 チケット詳細はプロジェクト関係なく固定パス
body要素に付与されるclass属性で判断
bull body要素のclass属性に project-プロジェクト識別
子 が設定されるのでこれを使ってプロジェクト
を識別する
JavaScriptでプロジェクトを判定
bull jQueryのhasClass()関数で指定のクラス名が存在
するかチェックできる
bull またはclass属性を取り出して比較するなど
if ($(body)hasClass(project-prj1)) プロジェクト識別子がprj1の場合
CSSでプロジェクトを指定
bull CSSのセレクタでbodyのclassを利用するだけ
bodyproject-prj1 top-menu background-color 006400 dark green bodyproject-prj1 header background-color 008000 green
class属性が振られるもの
bull プロジェクト以外にもclass属性が振られるもの
が多々あるので対象画面や対象箇所を限定する
のに使用できる
class属性が振られるもの
bull body要素
bull controller-コントローラ名
bull action-アクション名
bull チケット一覧の各行
bull tracker-トラッカーID
bull status-ステータスID
bull priority-優先度ID
bull created-by-me
class属性が振られるもの
bull 他にもいろいろあるので詳しくは「Redmineの
画面で振られているclass属性について -
EnjoyStudy」にて
bull httpblogenjoyxstudycomentry20141011000000
コード(JavaScript)の書き方
ブラウザの開発者ツールを活用
ブラウザの開発者ツール
bull いきなりView customizeで設定するのではなく
ブラウザの開発者ツールを使いながら作成確認
する
bull DOMインスペクタ
bull コンソール
ブラウザの開発者ツール
bull 開発者ツールはChromeFirefoxIE それぞれ
のブラウザに標準でも入っている
bull Firefoxだと拡張機能のFirebugでもOK
bull 愛用しているので以降のキャプチャはFirebugにて
DOMインスペクタ
bull 選択した要素がHTML上でどういった構造で書か
れているか確認できる
bull ソース表示で見るより簡単
コンソール
bull 表示している画面に対してのJavaScriptの実行を手
軽に試せる
bull 補完も効く(複数行モードの場合はダメ)
コンソール
bull 複数行まとめて実行できるものもあり長めの
コードでも修正実行を繰り返し行える
実際に試してみる
例ヘッダにチケット一覧リンクを追加
bull やること
1 どこに要素を追加すればよいか調べる
2 その要素を起点にリンクを追加するコードを書く
3 うまくいったらView customize で設定
(いったんプライベートで)
4 動作することが確認できたらプライベートを外し
て全体に反映
追加位置を調べる
bull DOMインスペクタで追加したい位置を選択
追加位置を調べる
bull パスを確認
bull id属性がtop-menuとなっているdiv要素配下のul要素の
最後に追加してあげればよさそう
追加位置を調べる
bull コンソールで追加対象の要素を取得してみる
bull divtop-menu gt ul (id属性がtop-menuのdiv要素の子
のul要素) で取れた
リンクを追加するコードを書く
bull 対象のul要素の子要素としてリンクを追加する
コードを実行し思った動作になるまで確認
View customizeで設定
bull 画面の描画完了時にコードを実行する必要がある
(描画完了前だと要素が取得できない)ので
jQueryの$(function)関数を利用
$(function() ロード完了時に呼び出される $(top-menu gt ul) append(ltligtlta href=issuesgt全てのチケットltagtltligt) )
View customizeで設定
bull いったんプライベートで設定し動作を確認する
bull 動作OKでプライベートを外して全体に有効へ
コード(CSS)の書き方
JavaScriptの時と同じ
bull DOMインスペクタで変更したい要素を探す
bull CSSセレクタがどうなりそうかも確認しておく
bull 要素のスタイルを変えて試す
CSSをView customizeに設定
bull Path Patternは絞れるならば絞って問題ないが
CSSセレクタ自体で対象箇所が絞ってかけるので
全画面対象でもほとんど問題なし
bull そのままCSSを書くイメージ
CSSセレクタの書き方
CSSセレクタの確認
bull DOMインスペクタを使うことによってCSSセレ
クタはわかる
CSSセレクタの指定
bull bodyからすべてのパスを書く必要はなくid属性
が付与されているものを起点に考えると良い
bull id属性は一意のものになるので
body divwrapper divwrapper2 divwrapper3 divheader h1
divheader h1
bodyからのフルパス
こっちで十分
良く使うCSSセレクタ
他にもいろいろあるので詳しくない場合には
rdquoCSSセレクタrdquoで一度調べておくと良い
セレクタ名 書式 対象
型セレクタ E E要素
idセレクタ Emyid id名がmyidのE要素
classセレクタ Ewarning class名がwarinigのE要素
子孫セレクタ E F E要素の子孫にあたるF要素
子セレクタ E gt F E要素の子にあたるF要素 (子孫セレクタはE要素の配下ならばどこにあっても良いが子セレクタは1階層下のみが対象)
CSSセレクタで気を付けること
bull 必要のない要素と一致させない
bull 一致してしまう場合には条件をもっときつく
bull 単に要素を指定するのではなく要素+属性で指定す
る(idセレクタclassセレクタなど)
bull 子孫セレクタではなく子セレクタを使うなど
うまく動作しないときの 確認ポイント
Path patternがあっているか
bull 画面のソースを表示してView customizeで指定
したコードが埋め込まれているか確認
bull 埋め込まれていない場合Path patternが間違えている
のでPath patternを見直す
JavaScriptでエラーが発生していないか
bull 開発者ツールでエラーメッセージが出力されて
いないか確認
bull エラーメッセージが出力されていればそれをもとに
JavaScriptを修正
CSSが上書きされていないか
bull 複数のCSSが一致する場合その要素に対してど
のようなスタイルが適用されるかは優先度に
よって決まる
bull 該当の要素を詳細に指定している方が優先される
bull 型セレクタよりidセレクタで指定したものの方が優先
bull セレクタのレベルが同じならば後に書かれたものが
優先される
CSSが上書きされていないか
bull 上にあるほどもの優先度が高い
bull 取り消し線のものは優先度が高いものによって上書きさ
れているもの
チケットの入力フォームがらみは面倒
bull チケットの入力フォームはトラッカーまたはス
テータスが変わるとフォームの再読み込みが行
われる(all_attributes配下が差し替わる)
bull これはトラッカーやステータスによって入力可能な
フィールドや選択肢が変わるため
bull これにより入力フォームの各要素に対する変更(内
容変更やイベントの登録)はリセットされてし
まう
チケット入力フォームに対するイベント
bull 入力フォームが差し替わってもハンドリングでき
るようにする必要がある
bull 考え方としては親の要素に対してイベントを登
録しておいてイベントが発生した際に発生元が
該当のものか判断するようなイメージ
bull jQueryのon関数を使うと簡単に書ける
チケット入力フォームに対するイベント
bull ダメな例
これだと入力フォームが差し替わったタイミングで登録先の要素
(issue_status_id)が別物に変わってしまうのでうまく動かない
bull OKな例
documentに対してイベントハンドラを登録し該当の要素(issue_status_id)
が発生元だったら動作するように書くことによってissue_status_idが差し
替わってもハンドリング可能に
$(issue_status_id) on(change function(e) ステータス変更時に実施したい処理 )
$(document) on(change issue_status_id function(e) ステータス変更時に実施したい処理 )
チケット入力フォームに対する変更
bull 入力フォームが差し替わると変更した内容も元
に戻ってしまうので差し替わったタイミングで
処理する必要がある
bull たとえばカスタムフィールドの値に応じて他のカ
スタムフィールドで選択可能な値を絞る場合など
チケット入力フォームに対する変更
bull 差し替え処理を行っている関数をフックして差
し替え処理の後に処理を差し込む
bull replaceIssueFormWith 関数が差し替え処理を行って
いる関数なのでそこを対象に
関数を別名で退避 var _replaceIssueFormWith = replaceIssueFormWith 関数を中身を変更 退避した処理を呼び出すような関数として作り変える replaceIssueFormWith = function(html) 退避しておいた関数を呼び出し _replaceIssueFormWith(html) ここでフォーム差し替え後に やりたい処理を書く
View customize導入に向けて
試す環境を作る
bull プロジェクトで使っているRedmineにいきなり適
用するのは敷居が高いという場合にはまずは仮
想環境などで試してみる
bull Redmineの各バージョンのVagrant boxを公開している
のでそちらを使えばすぐに
vagrant init onozatyredmine-32
vagrant up
スクリプトを書いてみる
bull この資料を参考に書いてみる
bull スクリプトのサンプルは下記リポジトリに貯め
ていっているので参考に
bull httpsgithubcomonozatyredmine-view-customize-scripts
bull これからもだんだん増えていく予定
困ったときには
困ったときにはhellip
bull onozaty まで (follow me)
bull 即レスとまでいきませんが毎日確認してます
bull スクリプト例などもつぶやいています
困ったときにはhellip
bull こういうことできませんかといった質問もお
気軽にどうぞ
bull 一応全部答えている(できるものはBlogでも公開)つ
もりですが拾えてなかったらごめんなさい
おわり
Redmineの使用状況
bull Redmine使用歴6年
bull 初めて触ったのは10年前だったがその時はあまり
しっかり使わずに6年前から継続して使用
bull 現プロジェクトでは09 から使い始めて1x
2x とマイグレーションを重ねて今は31を利用
bull チケット数は40000超え
利用プラグイン
bull View customize httpswwwredmineorgpluginsredmine_view_customize
bull Parent issue filter httpswwwredmineorgpluginsredmine_parent_issue_filter
bull Copy parent issue id httpswwwredmineorgpluginscopy_parent_issue_id
bull Issue Template httpswwwredmineorgpluginsissue_templates
bull Checklists httpswwwredmineorgpluginsredmine_checklists
bull News Notification httpsgithubcomgeorzredmine_news_notification
bull その他自作Pluginも
View customize plugin
View customize plugin
bull Redmineの画面をカスタマイズするためのPlugin
bull httpswwwredmineorgpluginsredmine_view_customize
bull httpsgithubcomonozatyredmine-view-customize
bull 特定の画面に対してJavaScriptCSSを埋め込む
機能を提供
View customize plugin
bull Redmine自体のコードを変更したりプラグイン
を作ったりといった手間無く手軽にカスタマイ
ズできる
bull 再起動不要でカスタマイズを適用
≒UserScript
bull UserScriptをクライアントではなくサーバ側で
設定してRedmineを使用する全ユーザに適用す
るイメージ
UserScriptとは画面ロード時に任意のJavaScriptを実行して
画面カスタマイズを行えるブラウザの機能
できることの例
bull プロジェクト毎にヘッダの色を変える
bull チケット一覧を識別しやすいように装飾
bull チケット作成時にトラッカーに応じてデフォルト値を設定
bull サイドバーを開閉式に
bull 「全てのチケット一覧」リンクをヘッダに
bull 進行中にもかかわらず担当者が未設定の場合に警告を表示
bull ユーザ選択のカスタムフィールドで自分を選択する項目を先頭に追加
bull プロジェクト一覧からの各プロジェクトへのリンク先を変更
bull カスタムフィールドを連動させる(親の値に応じて子を絞り込む)
bull コンテキストメニューを選択しやすくする
注意点
注意点
bull View customize pluginでは画面側(JavaScript
CSS)でしかカスタマイズできないため出来ない
こともある
bull 画面にない情報を表示するとか
注意点
bull 画面だけでもいろいろ解決できることがあるが
もしも欲しい機能に特化したプラグインがあるな
らばそちらを使った方が良い
bull 画面側だけの制約が無いのでシンプルな実装になっ
ているはず
bull その機能の検証も十分行われているはず
使い方
インストール
bull Redmineのインストールディレクトリ配下の
pluginsディレクトリに移動してView customize
pluginのリポジトリをclone
clone時のディレクトリ名はview_customizeとしてください
cd varlibredmineplugins
git clone httpsgithubcomonozatyredmine-view-customizegit view_customize
rake redminepluginsmigrate RAILS_ENV=production
インストールしただけではhellip
bull 何も変わらない
bull View customize pluginはRedmineの拡張方法を
提供するだけでどう設定するかはユーザ次第
設定方法
bull 管理 gt View customize で一覧画面へ遷移し
「New view customize」で設定入力画面へ
設定方法
コードを実行するパス(URL)
正規表現で記載
実行するコード
JavaScript または
StyleSheet(CSS)で書く
Redmineの画面で使用されているjQueryも使える(Redmineのバージョンによってライブラリが違うので注意)
プライベートにチェックを入れると作成したユーザのみに有効
実行
bull Pathが一致すると画面にコードが埋め込まれて
実行される
View customizeを触るうえで キーとなる技術
キーとなる技術
bull JavaScript(ブラウザ上で動作するスクリプト言語)
とCSS(ページのデザインを定義する仕組み)で設定
するのでオリジナルのカスタマイズをしたい場
合にはそれらの知識が必要となってくる
bull ただカスタマイズをするにあたってそこまで多く
の知識が求められるわけではないので調べたり見
よう見まねでもどうにかなるはず
bull 実際JavaScriptやCSS知らなかった人でも調べながらで使え
てたりする
jQuery
jQuery
bull JavaScriptライブラリ
bull httpsjquerycom
bull RedmineではjQueryをすべての画面で読み込んで
いるのでView customizeでもjQueryが利用でき
る
jQuery
bull jQueryを使うとクロスブラウザによる違いの煩
わしさを吸収したりDOM操作が簡潔に書けるの
で便利
bull ただ最近のブラウザだと標準で代替するようなメ
ソッドが提供されているのでIE8捨てられるならば
jQuery使うまでもないかも
bull WebにjQueryの情報はあふれているので調べる
のも簡単
CSSセレクタ
CSSセレクタ
bull CSSセレクタとはCSSでスタイルを適用する対象
を示すもの
bull View customizeでも良く使うことになる
bull JavaScriptで指定要素を取得するとき
bull jQueryの$(selector)関数
bull CSSで対象を指定するとき
divheader h1
設定に関するノウハウ
対象画面の指定方法
Path pattern
bull Path patternに一致した画面の場合該当のスクリ
プトが埋め込まれる
bull 正規表現で記載する
URLとPath
bull URLでアプリケーション配下がPath
bull クエリパラメータは含まれない
bull httpexamplecomprojects
-gt prjects
bull httpexamplecomprojectsaissuesset_filter=1
-gt projectsaissues
bull httpexamplecomredmineprojects
ドキュメントルートではなくredmineとしてインストール
-gt prjects
Pathを確認する方法
bull バージョン114からHTMLにPathをコメントと
して埋め込むようになっている
bull ブラウザのソース表示で見ればその画面のPathが
わかる
指定例 (よくつかうもの)
Path pattern 一致する画面
全ての画面
issues$ チケット一覧
issuesnew$ チケットの新規作成画面
issues[0-9]+$ 個々のチケット内容表示画面
issues[0-9]+copy$ チケットのコピーによる作成画面
issuesgantt ガントチャート
projects$ プロジェクト一覧
[]+$ といった文字は正規表現におけるメタ文字(特殊な意味をもった文字)
チケットの入力フォーム
bull チケットの入力フォームはいろいろな画面で存
在するのでPathの指定だけだと面倒
bull issues1 チケット内容表示画面でも編集ボタンでフォームが
bull issuesnew 新規作成
bull issues1copy コピーによる作成画面
bull issuesgantt timesガントチャートなのでこれは一致させたくない
bull issues timesチケット一覧の場合 チケット登録時のValidationエラーの場合
Path pattern + JavaScriptで絞る
bull ldquoissuesrdquo と指定してJavaScript側でチケットの入
力フォームが無かったら処理しないようにする
bull チケットの入力フォームでしか存在しない要素
(issue-form とか)で確認する
bull 指定した要素が無かった場合でも処理がスキップされ
るように書いていればOK
jQueryの$(selector)関数
bull jQueryの$(selector)関数で返却されるjQueryオブジェクト
は一致する要素が無かった場合何も処理されないので
それを使っていれば大丈夫
bull 上記例だと入力フォームが無かった場合on関数でのイベント
登録が行われず何も処理されないことになる
(エラーにもならない)
$(issue-form input[type=submit]) on(click function(event) 送信ボタン押下時に何か処理を行わせる )
プロジェクト毎の指定
bull チケット詳細画面(issues1 など)はプロジェク
トをパスに持たないのでPathだけだとプロジェ
クトを指定できない
bull projectsprj1issues
bull projectsprj1issues1 timesこれはパスとして無効
bull issues1 チケット詳細はプロジェクト関係なく固定パス
body要素に付与されるclass属性で判断
bull body要素のclass属性に project-プロジェクト識別
子 が設定されるのでこれを使ってプロジェクト
を識別する
JavaScriptでプロジェクトを判定
bull jQueryのhasClass()関数で指定のクラス名が存在
するかチェックできる
bull またはclass属性を取り出して比較するなど
if ($(body)hasClass(project-prj1)) プロジェクト識別子がprj1の場合
CSSでプロジェクトを指定
bull CSSのセレクタでbodyのclassを利用するだけ
bodyproject-prj1 top-menu background-color 006400 dark green bodyproject-prj1 header background-color 008000 green
class属性が振られるもの
bull プロジェクト以外にもclass属性が振られるもの
が多々あるので対象画面や対象箇所を限定する
のに使用できる
class属性が振られるもの
bull body要素
bull controller-コントローラ名
bull action-アクション名
bull チケット一覧の各行
bull tracker-トラッカーID
bull status-ステータスID
bull priority-優先度ID
bull created-by-me
class属性が振られるもの
bull 他にもいろいろあるので詳しくは「Redmineの
画面で振られているclass属性について -
EnjoyStudy」にて
bull httpblogenjoyxstudycomentry20141011000000
コード(JavaScript)の書き方
ブラウザの開発者ツールを活用
ブラウザの開発者ツール
bull いきなりView customizeで設定するのではなく
ブラウザの開発者ツールを使いながら作成確認
する
bull DOMインスペクタ
bull コンソール
ブラウザの開発者ツール
bull 開発者ツールはChromeFirefoxIE それぞれ
のブラウザに標準でも入っている
bull Firefoxだと拡張機能のFirebugでもOK
bull 愛用しているので以降のキャプチャはFirebugにて
DOMインスペクタ
bull 選択した要素がHTML上でどういった構造で書か
れているか確認できる
bull ソース表示で見るより簡単
コンソール
bull 表示している画面に対してのJavaScriptの実行を手
軽に試せる
bull 補完も効く(複数行モードの場合はダメ)
コンソール
bull 複数行まとめて実行できるものもあり長めの
コードでも修正実行を繰り返し行える
実際に試してみる
例ヘッダにチケット一覧リンクを追加
bull やること
1 どこに要素を追加すればよいか調べる
2 その要素を起点にリンクを追加するコードを書く
3 うまくいったらView customize で設定
(いったんプライベートで)
4 動作することが確認できたらプライベートを外し
て全体に反映
追加位置を調べる
bull DOMインスペクタで追加したい位置を選択
追加位置を調べる
bull パスを確認
bull id属性がtop-menuとなっているdiv要素配下のul要素の
最後に追加してあげればよさそう
追加位置を調べる
bull コンソールで追加対象の要素を取得してみる
bull divtop-menu gt ul (id属性がtop-menuのdiv要素の子
のul要素) で取れた
リンクを追加するコードを書く
bull 対象のul要素の子要素としてリンクを追加する
コードを実行し思った動作になるまで確認
View customizeで設定
bull 画面の描画完了時にコードを実行する必要がある
(描画完了前だと要素が取得できない)ので
jQueryの$(function)関数を利用
$(function() ロード完了時に呼び出される $(top-menu gt ul) append(ltligtlta href=issuesgt全てのチケットltagtltligt) )
View customizeで設定
bull いったんプライベートで設定し動作を確認する
bull 動作OKでプライベートを外して全体に有効へ
コード(CSS)の書き方
JavaScriptの時と同じ
bull DOMインスペクタで変更したい要素を探す
bull CSSセレクタがどうなりそうかも確認しておく
bull 要素のスタイルを変えて試す
CSSをView customizeに設定
bull Path Patternは絞れるならば絞って問題ないが
CSSセレクタ自体で対象箇所が絞ってかけるので
全画面対象でもほとんど問題なし
bull そのままCSSを書くイメージ
CSSセレクタの書き方
CSSセレクタの確認
bull DOMインスペクタを使うことによってCSSセレ
クタはわかる
CSSセレクタの指定
bull bodyからすべてのパスを書く必要はなくid属性
が付与されているものを起点に考えると良い
bull id属性は一意のものになるので
body divwrapper divwrapper2 divwrapper3 divheader h1
divheader h1
bodyからのフルパス
こっちで十分
良く使うCSSセレクタ
他にもいろいろあるので詳しくない場合には
rdquoCSSセレクタrdquoで一度調べておくと良い
セレクタ名 書式 対象
型セレクタ E E要素
idセレクタ Emyid id名がmyidのE要素
classセレクタ Ewarning class名がwarinigのE要素
子孫セレクタ E F E要素の子孫にあたるF要素
子セレクタ E gt F E要素の子にあたるF要素 (子孫セレクタはE要素の配下ならばどこにあっても良いが子セレクタは1階層下のみが対象)
CSSセレクタで気を付けること
bull 必要のない要素と一致させない
bull 一致してしまう場合には条件をもっときつく
bull 単に要素を指定するのではなく要素+属性で指定す
る(idセレクタclassセレクタなど)
bull 子孫セレクタではなく子セレクタを使うなど
うまく動作しないときの 確認ポイント
Path patternがあっているか
bull 画面のソースを表示してView customizeで指定
したコードが埋め込まれているか確認
bull 埋め込まれていない場合Path patternが間違えている
のでPath patternを見直す
JavaScriptでエラーが発生していないか
bull 開発者ツールでエラーメッセージが出力されて
いないか確認
bull エラーメッセージが出力されていればそれをもとに
JavaScriptを修正
CSSが上書きされていないか
bull 複数のCSSが一致する場合その要素に対してど
のようなスタイルが適用されるかは優先度に
よって決まる
bull 該当の要素を詳細に指定している方が優先される
bull 型セレクタよりidセレクタで指定したものの方が優先
bull セレクタのレベルが同じならば後に書かれたものが
優先される
CSSが上書きされていないか
bull 上にあるほどもの優先度が高い
bull 取り消し線のものは優先度が高いものによって上書きさ
れているもの
チケットの入力フォームがらみは面倒
bull チケットの入力フォームはトラッカーまたはス
テータスが変わるとフォームの再読み込みが行
われる(all_attributes配下が差し替わる)
bull これはトラッカーやステータスによって入力可能な
フィールドや選択肢が変わるため
bull これにより入力フォームの各要素に対する変更(内
容変更やイベントの登録)はリセットされてし
まう
チケット入力フォームに対するイベント
bull 入力フォームが差し替わってもハンドリングでき
るようにする必要がある
bull 考え方としては親の要素に対してイベントを登
録しておいてイベントが発生した際に発生元が
該当のものか判断するようなイメージ
bull jQueryのon関数を使うと簡単に書ける
チケット入力フォームに対するイベント
bull ダメな例
これだと入力フォームが差し替わったタイミングで登録先の要素
(issue_status_id)が別物に変わってしまうのでうまく動かない
bull OKな例
documentに対してイベントハンドラを登録し該当の要素(issue_status_id)
が発生元だったら動作するように書くことによってissue_status_idが差し
替わってもハンドリング可能に
$(issue_status_id) on(change function(e) ステータス変更時に実施したい処理 )
$(document) on(change issue_status_id function(e) ステータス変更時に実施したい処理 )
チケット入力フォームに対する変更
bull 入力フォームが差し替わると変更した内容も元
に戻ってしまうので差し替わったタイミングで
処理する必要がある
bull たとえばカスタムフィールドの値に応じて他のカ
スタムフィールドで選択可能な値を絞る場合など
チケット入力フォームに対する変更
bull 差し替え処理を行っている関数をフックして差
し替え処理の後に処理を差し込む
bull replaceIssueFormWith 関数が差し替え処理を行って
いる関数なのでそこを対象に
関数を別名で退避 var _replaceIssueFormWith = replaceIssueFormWith 関数を中身を変更 退避した処理を呼び出すような関数として作り変える replaceIssueFormWith = function(html) 退避しておいた関数を呼び出し _replaceIssueFormWith(html) ここでフォーム差し替え後に やりたい処理を書く
View customize導入に向けて
試す環境を作る
bull プロジェクトで使っているRedmineにいきなり適
用するのは敷居が高いという場合にはまずは仮
想環境などで試してみる
bull Redmineの各バージョンのVagrant boxを公開している
のでそちらを使えばすぐに
vagrant init onozatyredmine-32
vagrant up
スクリプトを書いてみる
bull この資料を参考に書いてみる
bull スクリプトのサンプルは下記リポジトリに貯め
ていっているので参考に
bull httpsgithubcomonozatyredmine-view-customize-scripts
bull これからもだんだん増えていく予定
困ったときには
困ったときにはhellip
bull onozaty まで (follow me)
bull 即レスとまでいきませんが毎日確認してます
bull スクリプト例などもつぶやいています
困ったときにはhellip
bull こういうことできませんかといった質問もお
気軽にどうぞ
bull 一応全部答えている(できるものはBlogでも公開)つ
もりですが拾えてなかったらごめんなさい
おわり
利用プラグイン
bull View customize httpswwwredmineorgpluginsredmine_view_customize
bull Parent issue filter httpswwwredmineorgpluginsredmine_parent_issue_filter
bull Copy parent issue id httpswwwredmineorgpluginscopy_parent_issue_id
bull Issue Template httpswwwredmineorgpluginsissue_templates
bull Checklists httpswwwredmineorgpluginsredmine_checklists
bull News Notification httpsgithubcomgeorzredmine_news_notification
bull その他自作Pluginも
View customize plugin
View customize plugin
bull Redmineの画面をカスタマイズするためのPlugin
bull httpswwwredmineorgpluginsredmine_view_customize
bull httpsgithubcomonozatyredmine-view-customize
bull 特定の画面に対してJavaScriptCSSを埋め込む
機能を提供
View customize plugin
bull Redmine自体のコードを変更したりプラグイン
を作ったりといった手間無く手軽にカスタマイ
ズできる
bull 再起動不要でカスタマイズを適用
≒UserScript
bull UserScriptをクライアントではなくサーバ側で
設定してRedmineを使用する全ユーザに適用す
るイメージ
UserScriptとは画面ロード時に任意のJavaScriptを実行して
画面カスタマイズを行えるブラウザの機能
できることの例
bull プロジェクト毎にヘッダの色を変える
bull チケット一覧を識別しやすいように装飾
bull チケット作成時にトラッカーに応じてデフォルト値を設定
bull サイドバーを開閉式に
bull 「全てのチケット一覧」リンクをヘッダに
bull 進行中にもかかわらず担当者が未設定の場合に警告を表示
bull ユーザ選択のカスタムフィールドで自分を選択する項目を先頭に追加
bull プロジェクト一覧からの各プロジェクトへのリンク先を変更
bull カスタムフィールドを連動させる(親の値に応じて子を絞り込む)
bull コンテキストメニューを選択しやすくする
注意点
注意点
bull View customize pluginでは画面側(JavaScript
CSS)でしかカスタマイズできないため出来ない
こともある
bull 画面にない情報を表示するとか
注意点
bull 画面だけでもいろいろ解決できることがあるが
もしも欲しい機能に特化したプラグインがあるな
らばそちらを使った方が良い
bull 画面側だけの制約が無いのでシンプルな実装になっ
ているはず
bull その機能の検証も十分行われているはず
使い方
インストール
bull Redmineのインストールディレクトリ配下の
pluginsディレクトリに移動してView customize
pluginのリポジトリをclone
clone時のディレクトリ名はview_customizeとしてください
cd varlibredmineplugins
git clone httpsgithubcomonozatyredmine-view-customizegit view_customize
rake redminepluginsmigrate RAILS_ENV=production
インストールしただけではhellip
bull 何も変わらない
bull View customize pluginはRedmineの拡張方法を
提供するだけでどう設定するかはユーザ次第
設定方法
bull 管理 gt View customize で一覧画面へ遷移し
「New view customize」で設定入力画面へ
設定方法
コードを実行するパス(URL)
正規表現で記載
実行するコード
JavaScript または
StyleSheet(CSS)で書く
Redmineの画面で使用されているjQueryも使える(Redmineのバージョンによってライブラリが違うので注意)
プライベートにチェックを入れると作成したユーザのみに有効
実行
bull Pathが一致すると画面にコードが埋め込まれて
実行される
View customizeを触るうえで キーとなる技術
キーとなる技術
bull JavaScript(ブラウザ上で動作するスクリプト言語)
とCSS(ページのデザインを定義する仕組み)で設定
するのでオリジナルのカスタマイズをしたい場
合にはそれらの知識が必要となってくる
bull ただカスタマイズをするにあたってそこまで多く
の知識が求められるわけではないので調べたり見
よう見まねでもどうにかなるはず
bull 実際JavaScriptやCSS知らなかった人でも調べながらで使え
てたりする
jQuery
jQuery
bull JavaScriptライブラリ
bull httpsjquerycom
bull RedmineではjQueryをすべての画面で読み込んで
いるのでView customizeでもjQueryが利用でき
る
jQuery
bull jQueryを使うとクロスブラウザによる違いの煩
わしさを吸収したりDOM操作が簡潔に書けるの
で便利
bull ただ最近のブラウザだと標準で代替するようなメ
ソッドが提供されているのでIE8捨てられるならば
jQuery使うまでもないかも
bull WebにjQueryの情報はあふれているので調べる
のも簡単
CSSセレクタ
CSSセレクタ
bull CSSセレクタとはCSSでスタイルを適用する対象
を示すもの
bull View customizeでも良く使うことになる
bull JavaScriptで指定要素を取得するとき
bull jQueryの$(selector)関数
bull CSSで対象を指定するとき
divheader h1
設定に関するノウハウ
対象画面の指定方法
Path pattern
bull Path patternに一致した画面の場合該当のスクリ
プトが埋め込まれる
bull 正規表現で記載する
URLとPath
bull URLでアプリケーション配下がPath
bull クエリパラメータは含まれない
bull httpexamplecomprojects
-gt prjects
bull httpexamplecomprojectsaissuesset_filter=1
-gt projectsaissues
bull httpexamplecomredmineprojects
ドキュメントルートではなくredmineとしてインストール
-gt prjects
Pathを確認する方法
bull バージョン114からHTMLにPathをコメントと
して埋め込むようになっている
bull ブラウザのソース表示で見ればその画面のPathが
わかる
指定例 (よくつかうもの)
Path pattern 一致する画面
全ての画面
issues$ チケット一覧
issuesnew$ チケットの新規作成画面
issues[0-9]+$ 個々のチケット内容表示画面
issues[0-9]+copy$ チケットのコピーによる作成画面
issuesgantt ガントチャート
projects$ プロジェクト一覧
[]+$ といった文字は正規表現におけるメタ文字(特殊な意味をもった文字)
チケットの入力フォーム
bull チケットの入力フォームはいろいろな画面で存
在するのでPathの指定だけだと面倒
bull issues1 チケット内容表示画面でも編集ボタンでフォームが
bull issuesnew 新規作成
bull issues1copy コピーによる作成画面
bull issuesgantt timesガントチャートなのでこれは一致させたくない
bull issues timesチケット一覧の場合 チケット登録時のValidationエラーの場合
Path pattern + JavaScriptで絞る
bull ldquoissuesrdquo と指定してJavaScript側でチケットの入
力フォームが無かったら処理しないようにする
bull チケットの入力フォームでしか存在しない要素
(issue-form とか)で確認する
bull 指定した要素が無かった場合でも処理がスキップされ
るように書いていればOK
jQueryの$(selector)関数
bull jQueryの$(selector)関数で返却されるjQueryオブジェクト
は一致する要素が無かった場合何も処理されないので
それを使っていれば大丈夫
bull 上記例だと入力フォームが無かった場合on関数でのイベント
登録が行われず何も処理されないことになる
(エラーにもならない)
$(issue-form input[type=submit]) on(click function(event) 送信ボタン押下時に何か処理を行わせる )
プロジェクト毎の指定
bull チケット詳細画面(issues1 など)はプロジェク
トをパスに持たないのでPathだけだとプロジェ
クトを指定できない
bull projectsprj1issues
bull projectsprj1issues1 timesこれはパスとして無効
bull issues1 チケット詳細はプロジェクト関係なく固定パス
body要素に付与されるclass属性で判断
bull body要素のclass属性に project-プロジェクト識別
子 が設定されるのでこれを使ってプロジェクト
を識別する
JavaScriptでプロジェクトを判定
bull jQueryのhasClass()関数で指定のクラス名が存在
するかチェックできる
bull またはclass属性を取り出して比較するなど
if ($(body)hasClass(project-prj1)) プロジェクト識別子がprj1の場合
CSSでプロジェクトを指定
bull CSSのセレクタでbodyのclassを利用するだけ
bodyproject-prj1 top-menu background-color 006400 dark green bodyproject-prj1 header background-color 008000 green
class属性が振られるもの
bull プロジェクト以外にもclass属性が振られるもの
が多々あるので対象画面や対象箇所を限定する
のに使用できる
class属性が振られるもの
bull body要素
bull controller-コントローラ名
bull action-アクション名
bull チケット一覧の各行
bull tracker-トラッカーID
bull status-ステータスID
bull priority-優先度ID
bull created-by-me
class属性が振られるもの
bull 他にもいろいろあるので詳しくは「Redmineの
画面で振られているclass属性について -
EnjoyStudy」にて
bull httpblogenjoyxstudycomentry20141011000000
コード(JavaScript)の書き方
ブラウザの開発者ツールを活用
ブラウザの開発者ツール
bull いきなりView customizeで設定するのではなく
ブラウザの開発者ツールを使いながら作成確認
する
bull DOMインスペクタ
bull コンソール
ブラウザの開発者ツール
bull 開発者ツールはChromeFirefoxIE それぞれ
のブラウザに標準でも入っている
bull Firefoxだと拡張機能のFirebugでもOK
bull 愛用しているので以降のキャプチャはFirebugにて
DOMインスペクタ
bull 選択した要素がHTML上でどういった構造で書か
れているか確認できる
bull ソース表示で見るより簡単
コンソール
bull 表示している画面に対してのJavaScriptの実行を手
軽に試せる
bull 補完も効く(複数行モードの場合はダメ)
コンソール
bull 複数行まとめて実行できるものもあり長めの
コードでも修正実行を繰り返し行える
実際に試してみる
例ヘッダにチケット一覧リンクを追加
bull やること
1 どこに要素を追加すればよいか調べる
2 その要素を起点にリンクを追加するコードを書く
3 うまくいったらView customize で設定
(いったんプライベートで)
4 動作することが確認できたらプライベートを外し
て全体に反映
追加位置を調べる
bull DOMインスペクタで追加したい位置を選択
追加位置を調べる
bull パスを確認
bull id属性がtop-menuとなっているdiv要素配下のul要素の
最後に追加してあげればよさそう
追加位置を調べる
bull コンソールで追加対象の要素を取得してみる
bull divtop-menu gt ul (id属性がtop-menuのdiv要素の子
のul要素) で取れた
リンクを追加するコードを書く
bull 対象のul要素の子要素としてリンクを追加する
コードを実行し思った動作になるまで確認
View customizeで設定
bull 画面の描画完了時にコードを実行する必要がある
(描画完了前だと要素が取得できない)ので
jQueryの$(function)関数を利用
$(function() ロード完了時に呼び出される $(top-menu gt ul) append(ltligtlta href=issuesgt全てのチケットltagtltligt) )
View customizeで設定
bull いったんプライベートで設定し動作を確認する
bull 動作OKでプライベートを外して全体に有効へ
コード(CSS)の書き方
JavaScriptの時と同じ
bull DOMインスペクタで変更したい要素を探す
bull CSSセレクタがどうなりそうかも確認しておく
bull 要素のスタイルを変えて試す
CSSをView customizeに設定
bull Path Patternは絞れるならば絞って問題ないが
CSSセレクタ自体で対象箇所が絞ってかけるので
全画面対象でもほとんど問題なし
bull そのままCSSを書くイメージ
CSSセレクタの書き方
CSSセレクタの確認
bull DOMインスペクタを使うことによってCSSセレ
クタはわかる
CSSセレクタの指定
bull bodyからすべてのパスを書く必要はなくid属性
が付与されているものを起点に考えると良い
bull id属性は一意のものになるので
body divwrapper divwrapper2 divwrapper3 divheader h1
divheader h1
bodyからのフルパス
こっちで十分
良く使うCSSセレクタ
他にもいろいろあるので詳しくない場合には
rdquoCSSセレクタrdquoで一度調べておくと良い
セレクタ名 書式 対象
型セレクタ E E要素
idセレクタ Emyid id名がmyidのE要素
classセレクタ Ewarning class名がwarinigのE要素
子孫セレクタ E F E要素の子孫にあたるF要素
子セレクタ E gt F E要素の子にあたるF要素 (子孫セレクタはE要素の配下ならばどこにあっても良いが子セレクタは1階層下のみが対象)
CSSセレクタで気を付けること
bull 必要のない要素と一致させない
bull 一致してしまう場合には条件をもっときつく
bull 単に要素を指定するのではなく要素+属性で指定す
る(idセレクタclassセレクタなど)
bull 子孫セレクタではなく子セレクタを使うなど
うまく動作しないときの 確認ポイント
Path patternがあっているか
bull 画面のソースを表示してView customizeで指定
したコードが埋め込まれているか確認
bull 埋め込まれていない場合Path patternが間違えている
のでPath patternを見直す
JavaScriptでエラーが発生していないか
bull 開発者ツールでエラーメッセージが出力されて
いないか確認
bull エラーメッセージが出力されていればそれをもとに
JavaScriptを修正
CSSが上書きされていないか
bull 複数のCSSが一致する場合その要素に対してど
のようなスタイルが適用されるかは優先度に
よって決まる
bull 該当の要素を詳細に指定している方が優先される
bull 型セレクタよりidセレクタで指定したものの方が優先
bull セレクタのレベルが同じならば後に書かれたものが
優先される
CSSが上書きされていないか
bull 上にあるほどもの優先度が高い
bull 取り消し線のものは優先度が高いものによって上書きさ
れているもの
チケットの入力フォームがらみは面倒
bull チケットの入力フォームはトラッカーまたはス
テータスが変わるとフォームの再読み込みが行
われる(all_attributes配下が差し替わる)
bull これはトラッカーやステータスによって入力可能な
フィールドや選択肢が変わるため
bull これにより入力フォームの各要素に対する変更(内
容変更やイベントの登録)はリセットされてし
まう
チケット入力フォームに対するイベント
bull 入力フォームが差し替わってもハンドリングでき
るようにする必要がある
bull 考え方としては親の要素に対してイベントを登
録しておいてイベントが発生した際に発生元が
該当のものか判断するようなイメージ
bull jQueryのon関数を使うと簡単に書ける
チケット入力フォームに対するイベント
bull ダメな例
これだと入力フォームが差し替わったタイミングで登録先の要素
(issue_status_id)が別物に変わってしまうのでうまく動かない
bull OKな例
documentに対してイベントハンドラを登録し該当の要素(issue_status_id)
が発生元だったら動作するように書くことによってissue_status_idが差し
替わってもハンドリング可能に
$(issue_status_id) on(change function(e) ステータス変更時に実施したい処理 )
$(document) on(change issue_status_id function(e) ステータス変更時に実施したい処理 )
チケット入力フォームに対する変更
bull 入力フォームが差し替わると変更した内容も元
に戻ってしまうので差し替わったタイミングで
処理する必要がある
bull たとえばカスタムフィールドの値に応じて他のカ
スタムフィールドで選択可能な値を絞る場合など
チケット入力フォームに対する変更
bull 差し替え処理を行っている関数をフックして差
し替え処理の後に処理を差し込む
bull replaceIssueFormWith 関数が差し替え処理を行って
いる関数なのでそこを対象に
関数を別名で退避 var _replaceIssueFormWith = replaceIssueFormWith 関数を中身を変更 退避した処理を呼び出すような関数として作り変える replaceIssueFormWith = function(html) 退避しておいた関数を呼び出し _replaceIssueFormWith(html) ここでフォーム差し替え後に やりたい処理を書く
View customize導入に向けて
試す環境を作る
bull プロジェクトで使っているRedmineにいきなり適
用するのは敷居が高いという場合にはまずは仮
想環境などで試してみる
bull Redmineの各バージョンのVagrant boxを公開している
のでそちらを使えばすぐに
vagrant init onozatyredmine-32
vagrant up
スクリプトを書いてみる
bull この資料を参考に書いてみる
bull スクリプトのサンプルは下記リポジトリに貯め
ていっているので参考に
bull httpsgithubcomonozatyredmine-view-customize-scripts
bull これからもだんだん増えていく予定
困ったときには
困ったときにはhellip
bull onozaty まで (follow me)
bull 即レスとまでいきませんが毎日確認してます
bull スクリプト例などもつぶやいています
困ったときにはhellip
bull こういうことできませんかといった質問もお
気軽にどうぞ
bull 一応全部答えている(できるものはBlogでも公開)つ
もりですが拾えてなかったらごめんなさい
おわり
View customize plugin
View customize plugin
bull Redmineの画面をカスタマイズするためのPlugin
bull httpswwwredmineorgpluginsredmine_view_customize
bull httpsgithubcomonozatyredmine-view-customize
bull 特定の画面に対してJavaScriptCSSを埋め込む
機能を提供
View customize plugin
bull Redmine自体のコードを変更したりプラグイン
を作ったりといった手間無く手軽にカスタマイ
ズできる
bull 再起動不要でカスタマイズを適用
≒UserScript
bull UserScriptをクライアントではなくサーバ側で
設定してRedmineを使用する全ユーザに適用す
るイメージ
UserScriptとは画面ロード時に任意のJavaScriptを実行して
画面カスタマイズを行えるブラウザの機能
できることの例
bull プロジェクト毎にヘッダの色を変える
bull チケット一覧を識別しやすいように装飾
bull チケット作成時にトラッカーに応じてデフォルト値を設定
bull サイドバーを開閉式に
bull 「全てのチケット一覧」リンクをヘッダに
bull 進行中にもかかわらず担当者が未設定の場合に警告を表示
bull ユーザ選択のカスタムフィールドで自分を選択する項目を先頭に追加
bull プロジェクト一覧からの各プロジェクトへのリンク先を変更
bull カスタムフィールドを連動させる(親の値に応じて子を絞り込む)
bull コンテキストメニューを選択しやすくする
注意点
注意点
bull View customize pluginでは画面側(JavaScript
CSS)でしかカスタマイズできないため出来ない
こともある
bull 画面にない情報を表示するとか
注意点
bull 画面だけでもいろいろ解決できることがあるが
もしも欲しい機能に特化したプラグインがあるな
らばそちらを使った方が良い
bull 画面側だけの制約が無いのでシンプルな実装になっ
ているはず
bull その機能の検証も十分行われているはず
使い方
インストール
bull Redmineのインストールディレクトリ配下の
pluginsディレクトリに移動してView customize
pluginのリポジトリをclone
clone時のディレクトリ名はview_customizeとしてください
cd varlibredmineplugins
git clone httpsgithubcomonozatyredmine-view-customizegit view_customize
rake redminepluginsmigrate RAILS_ENV=production
インストールしただけではhellip
bull 何も変わらない
bull View customize pluginはRedmineの拡張方法を
提供するだけでどう設定するかはユーザ次第
設定方法
bull 管理 gt View customize で一覧画面へ遷移し
「New view customize」で設定入力画面へ
設定方法
コードを実行するパス(URL)
正規表現で記載
実行するコード
JavaScript または
StyleSheet(CSS)で書く
Redmineの画面で使用されているjQueryも使える(Redmineのバージョンによってライブラリが違うので注意)
プライベートにチェックを入れると作成したユーザのみに有効
実行
bull Pathが一致すると画面にコードが埋め込まれて
実行される
View customizeを触るうえで キーとなる技術
キーとなる技術
bull JavaScript(ブラウザ上で動作するスクリプト言語)
とCSS(ページのデザインを定義する仕組み)で設定
するのでオリジナルのカスタマイズをしたい場
合にはそれらの知識が必要となってくる
bull ただカスタマイズをするにあたってそこまで多く
の知識が求められるわけではないので調べたり見
よう見まねでもどうにかなるはず
bull 実際JavaScriptやCSS知らなかった人でも調べながらで使え
てたりする
jQuery
jQuery
bull JavaScriptライブラリ
bull httpsjquerycom
bull RedmineではjQueryをすべての画面で読み込んで
いるのでView customizeでもjQueryが利用でき
る
jQuery
bull jQueryを使うとクロスブラウザによる違いの煩
わしさを吸収したりDOM操作が簡潔に書けるの
で便利
bull ただ最近のブラウザだと標準で代替するようなメ
ソッドが提供されているのでIE8捨てられるならば
jQuery使うまでもないかも
bull WebにjQueryの情報はあふれているので調べる
のも簡単
CSSセレクタ
CSSセレクタ
bull CSSセレクタとはCSSでスタイルを適用する対象
を示すもの
bull View customizeでも良く使うことになる
bull JavaScriptで指定要素を取得するとき
bull jQueryの$(selector)関数
bull CSSで対象を指定するとき
divheader h1
設定に関するノウハウ
対象画面の指定方法
Path pattern
bull Path patternに一致した画面の場合該当のスクリ
プトが埋め込まれる
bull 正規表現で記載する
URLとPath
bull URLでアプリケーション配下がPath
bull クエリパラメータは含まれない
bull httpexamplecomprojects
-gt prjects
bull httpexamplecomprojectsaissuesset_filter=1
-gt projectsaissues
bull httpexamplecomredmineprojects
ドキュメントルートではなくredmineとしてインストール
-gt prjects
Pathを確認する方法
bull バージョン114からHTMLにPathをコメントと
して埋め込むようになっている
bull ブラウザのソース表示で見ればその画面のPathが
わかる
指定例 (よくつかうもの)
Path pattern 一致する画面
全ての画面
issues$ チケット一覧
issuesnew$ チケットの新規作成画面
issues[0-9]+$ 個々のチケット内容表示画面
issues[0-9]+copy$ チケットのコピーによる作成画面
issuesgantt ガントチャート
projects$ プロジェクト一覧
[]+$ といった文字は正規表現におけるメタ文字(特殊な意味をもった文字)
チケットの入力フォーム
bull チケットの入力フォームはいろいろな画面で存
在するのでPathの指定だけだと面倒
bull issues1 チケット内容表示画面でも編集ボタンでフォームが
bull issuesnew 新規作成
bull issues1copy コピーによる作成画面
bull issuesgantt timesガントチャートなのでこれは一致させたくない
bull issues timesチケット一覧の場合 チケット登録時のValidationエラーの場合
Path pattern + JavaScriptで絞る
bull ldquoissuesrdquo と指定してJavaScript側でチケットの入
力フォームが無かったら処理しないようにする
bull チケットの入力フォームでしか存在しない要素
(issue-form とか)で確認する
bull 指定した要素が無かった場合でも処理がスキップされ
るように書いていればOK
jQueryの$(selector)関数
bull jQueryの$(selector)関数で返却されるjQueryオブジェクト
は一致する要素が無かった場合何も処理されないので
それを使っていれば大丈夫
bull 上記例だと入力フォームが無かった場合on関数でのイベント
登録が行われず何も処理されないことになる
(エラーにもならない)
$(issue-form input[type=submit]) on(click function(event) 送信ボタン押下時に何か処理を行わせる )
プロジェクト毎の指定
bull チケット詳細画面(issues1 など)はプロジェク
トをパスに持たないのでPathだけだとプロジェ
クトを指定できない
bull projectsprj1issues
bull projectsprj1issues1 timesこれはパスとして無効
bull issues1 チケット詳細はプロジェクト関係なく固定パス
body要素に付与されるclass属性で判断
bull body要素のclass属性に project-プロジェクト識別
子 が設定されるのでこれを使ってプロジェクト
を識別する
JavaScriptでプロジェクトを判定
bull jQueryのhasClass()関数で指定のクラス名が存在
するかチェックできる
bull またはclass属性を取り出して比較するなど
if ($(body)hasClass(project-prj1)) プロジェクト識別子がprj1の場合
CSSでプロジェクトを指定
bull CSSのセレクタでbodyのclassを利用するだけ
bodyproject-prj1 top-menu background-color 006400 dark green bodyproject-prj1 header background-color 008000 green
class属性が振られるもの
bull プロジェクト以外にもclass属性が振られるもの
が多々あるので対象画面や対象箇所を限定する
のに使用できる
class属性が振られるもの
bull body要素
bull controller-コントローラ名
bull action-アクション名
bull チケット一覧の各行
bull tracker-トラッカーID
bull status-ステータスID
bull priority-優先度ID
bull created-by-me
class属性が振られるもの
bull 他にもいろいろあるので詳しくは「Redmineの
画面で振られているclass属性について -
EnjoyStudy」にて
bull httpblogenjoyxstudycomentry20141011000000
コード(JavaScript)の書き方
ブラウザの開発者ツールを活用
ブラウザの開発者ツール
bull いきなりView customizeで設定するのではなく
ブラウザの開発者ツールを使いながら作成確認
する
bull DOMインスペクタ
bull コンソール
ブラウザの開発者ツール
bull 開発者ツールはChromeFirefoxIE それぞれ
のブラウザに標準でも入っている
bull Firefoxだと拡張機能のFirebugでもOK
bull 愛用しているので以降のキャプチャはFirebugにて
DOMインスペクタ
bull 選択した要素がHTML上でどういった構造で書か
れているか確認できる
bull ソース表示で見るより簡単
コンソール
bull 表示している画面に対してのJavaScriptの実行を手
軽に試せる
bull 補完も効く(複数行モードの場合はダメ)
コンソール
bull 複数行まとめて実行できるものもあり長めの
コードでも修正実行を繰り返し行える
実際に試してみる
例ヘッダにチケット一覧リンクを追加
bull やること
1 どこに要素を追加すればよいか調べる
2 その要素を起点にリンクを追加するコードを書く
3 うまくいったらView customize で設定
(いったんプライベートで)
4 動作することが確認できたらプライベートを外し
て全体に反映
追加位置を調べる
bull DOMインスペクタで追加したい位置を選択
追加位置を調べる
bull パスを確認
bull id属性がtop-menuとなっているdiv要素配下のul要素の
最後に追加してあげればよさそう
追加位置を調べる
bull コンソールで追加対象の要素を取得してみる
bull divtop-menu gt ul (id属性がtop-menuのdiv要素の子
のul要素) で取れた
リンクを追加するコードを書く
bull 対象のul要素の子要素としてリンクを追加する
コードを実行し思った動作になるまで確認
View customizeで設定
bull 画面の描画完了時にコードを実行する必要がある
(描画完了前だと要素が取得できない)ので
jQueryの$(function)関数を利用
$(function() ロード完了時に呼び出される $(top-menu gt ul) append(ltligtlta href=issuesgt全てのチケットltagtltligt) )
View customizeで設定
bull いったんプライベートで設定し動作を確認する
bull 動作OKでプライベートを外して全体に有効へ
コード(CSS)の書き方
JavaScriptの時と同じ
bull DOMインスペクタで変更したい要素を探す
bull CSSセレクタがどうなりそうかも確認しておく
bull 要素のスタイルを変えて試す
CSSをView customizeに設定
bull Path Patternは絞れるならば絞って問題ないが
CSSセレクタ自体で対象箇所が絞ってかけるので
全画面対象でもほとんど問題なし
bull そのままCSSを書くイメージ
CSSセレクタの書き方
CSSセレクタの確認
bull DOMインスペクタを使うことによってCSSセレ
クタはわかる
CSSセレクタの指定
bull bodyからすべてのパスを書く必要はなくid属性
が付与されているものを起点に考えると良い
bull id属性は一意のものになるので
body divwrapper divwrapper2 divwrapper3 divheader h1
divheader h1
bodyからのフルパス
こっちで十分
良く使うCSSセレクタ
他にもいろいろあるので詳しくない場合には
rdquoCSSセレクタrdquoで一度調べておくと良い
セレクタ名 書式 対象
型セレクタ E E要素
idセレクタ Emyid id名がmyidのE要素
classセレクタ Ewarning class名がwarinigのE要素
子孫セレクタ E F E要素の子孫にあたるF要素
子セレクタ E gt F E要素の子にあたるF要素 (子孫セレクタはE要素の配下ならばどこにあっても良いが子セレクタは1階層下のみが対象)
CSSセレクタで気を付けること
bull 必要のない要素と一致させない
bull 一致してしまう場合には条件をもっときつく
bull 単に要素を指定するのではなく要素+属性で指定す
る(idセレクタclassセレクタなど)
bull 子孫セレクタではなく子セレクタを使うなど
うまく動作しないときの 確認ポイント
Path patternがあっているか
bull 画面のソースを表示してView customizeで指定
したコードが埋め込まれているか確認
bull 埋め込まれていない場合Path patternが間違えている
のでPath patternを見直す
JavaScriptでエラーが発生していないか
bull 開発者ツールでエラーメッセージが出力されて
いないか確認
bull エラーメッセージが出力されていればそれをもとに
JavaScriptを修正
CSSが上書きされていないか
bull 複数のCSSが一致する場合その要素に対してど
のようなスタイルが適用されるかは優先度に
よって決まる
bull 該当の要素を詳細に指定している方が優先される
bull 型セレクタよりidセレクタで指定したものの方が優先
bull セレクタのレベルが同じならば後に書かれたものが
優先される
CSSが上書きされていないか
bull 上にあるほどもの優先度が高い
bull 取り消し線のものは優先度が高いものによって上書きさ
れているもの
チケットの入力フォームがらみは面倒
bull チケットの入力フォームはトラッカーまたはス
テータスが変わるとフォームの再読み込みが行
われる(all_attributes配下が差し替わる)
bull これはトラッカーやステータスによって入力可能な
フィールドや選択肢が変わるため
bull これにより入力フォームの各要素に対する変更(内
容変更やイベントの登録)はリセットされてし
まう
チケット入力フォームに対するイベント
bull 入力フォームが差し替わってもハンドリングでき
るようにする必要がある
bull 考え方としては親の要素に対してイベントを登
録しておいてイベントが発生した際に発生元が
該当のものか判断するようなイメージ
bull jQueryのon関数を使うと簡単に書ける
チケット入力フォームに対するイベント
bull ダメな例
これだと入力フォームが差し替わったタイミングで登録先の要素
(issue_status_id)が別物に変わってしまうのでうまく動かない
bull OKな例
documentに対してイベントハンドラを登録し該当の要素(issue_status_id)
が発生元だったら動作するように書くことによってissue_status_idが差し
替わってもハンドリング可能に
$(issue_status_id) on(change function(e) ステータス変更時に実施したい処理 )
$(document) on(change issue_status_id function(e) ステータス変更時に実施したい処理 )
チケット入力フォームに対する変更
bull 入力フォームが差し替わると変更した内容も元
に戻ってしまうので差し替わったタイミングで
処理する必要がある
bull たとえばカスタムフィールドの値に応じて他のカ
スタムフィールドで選択可能な値を絞る場合など
チケット入力フォームに対する変更
bull 差し替え処理を行っている関数をフックして差
し替え処理の後に処理を差し込む
bull replaceIssueFormWith 関数が差し替え処理を行って
いる関数なのでそこを対象に
関数を別名で退避 var _replaceIssueFormWith = replaceIssueFormWith 関数を中身を変更 退避した処理を呼び出すような関数として作り変える replaceIssueFormWith = function(html) 退避しておいた関数を呼び出し _replaceIssueFormWith(html) ここでフォーム差し替え後に やりたい処理を書く
View customize導入に向けて
試す環境を作る
bull プロジェクトで使っているRedmineにいきなり適
用するのは敷居が高いという場合にはまずは仮
想環境などで試してみる
bull Redmineの各バージョンのVagrant boxを公開している
のでそちらを使えばすぐに
vagrant init onozatyredmine-32
vagrant up
スクリプトを書いてみる
bull この資料を参考に書いてみる
bull スクリプトのサンプルは下記リポジトリに貯め
ていっているので参考に
bull httpsgithubcomonozatyredmine-view-customize-scripts
bull これからもだんだん増えていく予定
困ったときには
困ったときにはhellip
bull onozaty まで (follow me)
bull 即レスとまでいきませんが毎日確認してます
bull スクリプト例などもつぶやいています
困ったときにはhellip
bull こういうことできませんかといった質問もお
気軽にどうぞ
bull 一応全部答えている(できるものはBlogでも公開)つ
もりですが拾えてなかったらごめんなさい
おわり
View customize plugin
bull Redmineの画面をカスタマイズするためのPlugin
bull httpswwwredmineorgpluginsredmine_view_customize
bull httpsgithubcomonozatyredmine-view-customize
bull 特定の画面に対してJavaScriptCSSを埋め込む
機能を提供
View customize plugin
bull Redmine自体のコードを変更したりプラグイン
を作ったりといった手間無く手軽にカスタマイ
ズできる
bull 再起動不要でカスタマイズを適用
≒UserScript
bull UserScriptをクライアントではなくサーバ側で
設定してRedmineを使用する全ユーザに適用す
るイメージ
UserScriptとは画面ロード時に任意のJavaScriptを実行して
画面カスタマイズを行えるブラウザの機能
できることの例
bull プロジェクト毎にヘッダの色を変える
bull チケット一覧を識別しやすいように装飾
bull チケット作成時にトラッカーに応じてデフォルト値を設定
bull サイドバーを開閉式に
bull 「全てのチケット一覧」リンクをヘッダに
bull 進行中にもかかわらず担当者が未設定の場合に警告を表示
bull ユーザ選択のカスタムフィールドで自分を選択する項目を先頭に追加
bull プロジェクト一覧からの各プロジェクトへのリンク先を変更
bull カスタムフィールドを連動させる(親の値に応じて子を絞り込む)
bull コンテキストメニューを選択しやすくする
注意点
注意点
bull View customize pluginでは画面側(JavaScript
CSS)でしかカスタマイズできないため出来ない
こともある
bull 画面にない情報を表示するとか
注意点
bull 画面だけでもいろいろ解決できることがあるが
もしも欲しい機能に特化したプラグインがあるな
らばそちらを使った方が良い
bull 画面側だけの制約が無いのでシンプルな実装になっ
ているはず
bull その機能の検証も十分行われているはず
使い方
インストール
bull Redmineのインストールディレクトリ配下の
pluginsディレクトリに移動してView customize
pluginのリポジトリをclone
clone時のディレクトリ名はview_customizeとしてください
cd varlibredmineplugins
git clone httpsgithubcomonozatyredmine-view-customizegit view_customize
rake redminepluginsmigrate RAILS_ENV=production
インストールしただけではhellip
bull 何も変わらない
bull View customize pluginはRedmineの拡張方法を
提供するだけでどう設定するかはユーザ次第
設定方法
bull 管理 gt View customize で一覧画面へ遷移し
「New view customize」で設定入力画面へ
設定方法
コードを実行するパス(URL)
正規表現で記載
実行するコード
JavaScript または
StyleSheet(CSS)で書く
Redmineの画面で使用されているjQueryも使える(Redmineのバージョンによってライブラリが違うので注意)
プライベートにチェックを入れると作成したユーザのみに有効
実行
bull Pathが一致すると画面にコードが埋め込まれて
実行される
View customizeを触るうえで キーとなる技術
キーとなる技術
bull JavaScript(ブラウザ上で動作するスクリプト言語)
とCSS(ページのデザインを定義する仕組み)で設定
するのでオリジナルのカスタマイズをしたい場
合にはそれらの知識が必要となってくる
bull ただカスタマイズをするにあたってそこまで多く
の知識が求められるわけではないので調べたり見
よう見まねでもどうにかなるはず
bull 実際JavaScriptやCSS知らなかった人でも調べながらで使え
てたりする
jQuery
jQuery
bull JavaScriptライブラリ
bull httpsjquerycom
bull RedmineではjQueryをすべての画面で読み込んで
いるのでView customizeでもjQueryが利用でき
る
jQuery
bull jQueryを使うとクロスブラウザによる違いの煩
わしさを吸収したりDOM操作が簡潔に書けるの
で便利
bull ただ最近のブラウザだと標準で代替するようなメ
ソッドが提供されているのでIE8捨てられるならば
jQuery使うまでもないかも
bull WebにjQueryの情報はあふれているので調べる
のも簡単
CSSセレクタ
CSSセレクタ
bull CSSセレクタとはCSSでスタイルを適用する対象
を示すもの
bull View customizeでも良く使うことになる
bull JavaScriptで指定要素を取得するとき
bull jQueryの$(selector)関数
bull CSSで対象を指定するとき
divheader h1
設定に関するノウハウ
対象画面の指定方法
Path pattern
bull Path patternに一致した画面の場合該当のスクリ
プトが埋め込まれる
bull 正規表現で記載する
URLとPath
bull URLでアプリケーション配下がPath
bull クエリパラメータは含まれない
bull httpexamplecomprojects
-gt prjects
bull httpexamplecomprojectsaissuesset_filter=1
-gt projectsaissues
bull httpexamplecomredmineprojects
ドキュメントルートではなくredmineとしてインストール
-gt prjects
Pathを確認する方法
bull バージョン114からHTMLにPathをコメントと
して埋め込むようになっている
bull ブラウザのソース表示で見ればその画面のPathが
わかる
指定例 (よくつかうもの)
Path pattern 一致する画面
全ての画面
issues$ チケット一覧
issuesnew$ チケットの新規作成画面
issues[0-9]+$ 個々のチケット内容表示画面
issues[0-9]+copy$ チケットのコピーによる作成画面
issuesgantt ガントチャート
projects$ プロジェクト一覧
[]+$ といった文字は正規表現におけるメタ文字(特殊な意味をもった文字)
チケットの入力フォーム
bull チケットの入力フォームはいろいろな画面で存
在するのでPathの指定だけだと面倒
bull issues1 チケット内容表示画面でも編集ボタンでフォームが
bull issuesnew 新規作成
bull issues1copy コピーによる作成画面
bull issuesgantt timesガントチャートなのでこれは一致させたくない
bull issues timesチケット一覧の場合 チケット登録時のValidationエラーの場合
Path pattern + JavaScriptで絞る
bull ldquoissuesrdquo と指定してJavaScript側でチケットの入
力フォームが無かったら処理しないようにする
bull チケットの入力フォームでしか存在しない要素
(issue-form とか)で確認する
bull 指定した要素が無かった場合でも処理がスキップされ
るように書いていればOK
jQueryの$(selector)関数
bull jQueryの$(selector)関数で返却されるjQueryオブジェクト
は一致する要素が無かった場合何も処理されないので
それを使っていれば大丈夫
bull 上記例だと入力フォームが無かった場合on関数でのイベント
登録が行われず何も処理されないことになる
(エラーにもならない)
$(issue-form input[type=submit]) on(click function(event) 送信ボタン押下時に何か処理を行わせる )
プロジェクト毎の指定
bull チケット詳細画面(issues1 など)はプロジェク
トをパスに持たないのでPathだけだとプロジェ
クトを指定できない
bull projectsprj1issues
bull projectsprj1issues1 timesこれはパスとして無効
bull issues1 チケット詳細はプロジェクト関係なく固定パス
body要素に付与されるclass属性で判断
bull body要素のclass属性に project-プロジェクト識別
子 が設定されるのでこれを使ってプロジェクト
を識別する
JavaScriptでプロジェクトを判定
bull jQueryのhasClass()関数で指定のクラス名が存在
するかチェックできる
bull またはclass属性を取り出して比較するなど
if ($(body)hasClass(project-prj1)) プロジェクト識別子がprj1の場合
CSSでプロジェクトを指定
bull CSSのセレクタでbodyのclassを利用するだけ
bodyproject-prj1 top-menu background-color 006400 dark green bodyproject-prj1 header background-color 008000 green
class属性が振られるもの
bull プロジェクト以外にもclass属性が振られるもの
が多々あるので対象画面や対象箇所を限定する
のに使用できる
class属性が振られるもの
bull body要素
bull controller-コントローラ名
bull action-アクション名
bull チケット一覧の各行
bull tracker-トラッカーID
bull status-ステータスID
bull priority-優先度ID
bull created-by-me
class属性が振られるもの
bull 他にもいろいろあるので詳しくは「Redmineの
画面で振られているclass属性について -
EnjoyStudy」にて
bull httpblogenjoyxstudycomentry20141011000000
コード(JavaScript)の書き方
ブラウザの開発者ツールを活用
ブラウザの開発者ツール
bull いきなりView customizeで設定するのではなく
ブラウザの開発者ツールを使いながら作成確認
する
bull DOMインスペクタ
bull コンソール
ブラウザの開発者ツール
bull 開発者ツールはChromeFirefoxIE それぞれ
のブラウザに標準でも入っている
bull Firefoxだと拡張機能のFirebugでもOK
bull 愛用しているので以降のキャプチャはFirebugにて
DOMインスペクタ
bull 選択した要素がHTML上でどういった構造で書か
れているか確認できる
bull ソース表示で見るより簡単
コンソール
bull 表示している画面に対してのJavaScriptの実行を手
軽に試せる
bull 補完も効く(複数行モードの場合はダメ)
コンソール
bull 複数行まとめて実行できるものもあり長めの
コードでも修正実行を繰り返し行える
実際に試してみる
例ヘッダにチケット一覧リンクを追加
bull やること
1 どこに要素を追加すればよいか調べる
2 その要素を起点にリンクを追加するコードを書く
3 うまくいったらView customize で設定
(いったんプライベートで)
4 動作することが確認できたらプライベートを外し
て全体に反映
追加位置を調べる
bull DOMインスペクタで追加したい位置を選択
追加位置を調べる
bull パスを確認
bull id属性がtop-menuとなっているdiv要素配下のul要素の
最後に追加してあげればよさそう
追加位置を調べる
bull コンソールで追加対象の要素を取得してみる
bull divtop-menu gt ul (id属性がtop-menuのdiv要素の子
のul要素) で取れた
リンクを追加するコードを書く
bull 対象のul要素の子要素としてリンクを追加する
コードを実行し思った動作になるまで確認
View customizeで設定
bull 画面の描画完了時にコードを実行する必要がある
(描画完了前だと要素が取得できない)ので
jQueryの$(function)関数を利用
$(function() ロード完了時に呼び出される $(top-menu gt ul) append(ltligtlta href=issuesgt全てのチケットltagtltligt) )
View customizeで設定
bull いったんプライベートで設定し動作を確認する
bull 動作OKでプライベートを外して全体に有効へ
コード(CSS)の書き方
JavaScriptの時と同じ
bull DOMインスペクタで変更したい要素を探す
bull CSSセレクタがどうなりそうかも確認しておく
bull 要素のスタイルを変えて試す
CSSをView customizeに設定
bull Path Patternは絞れるならば絞って問題ないが
CSSセレクタ自体で対象箇所が絞ってかけるので
全画面対象でもほとんど問題なし
bull そのままCSSを書くイメージ
CSSセレクタの書き方
CSSセレクタの確認
bull DOMインスペクタを使うことによってCSSセレ
クタはわかる
CSSセレクタの指定
bull bodyからすべてのパスを書く必要はなくid属性
が付与されているものを起点に考えると良い
bull id属性は一意のものになるので
body divwrapper divwrapper2 divwrapper3 divheader h1
divheader h1
bodyからのフルパス
こっちで十分
良く使うCSSセレクタ
他にもいろいろあるので詳しくない場合には
rdquoCSSセレクタrdquoで一度調べておくと良い
セレクタ名 書式 対象
型セレクタ E E要素
idセレクタ Emyid id名がmyidのE要素
classセレクタ Ewarning class名がwarinigのE要素
子孫セレクタ E F E要素の子孫にあたるF要素
子セレクタ E gt F E要素の子にあたるF要素 (子孫セレクタはE要素の配下ならばどこにあっても良いが子セレクタは1階層下のみが対象)
CSSセレクタで気を付けること
bull 必要のない要素と一致させない
bull 一致してしまう場合には条件をもっときつく
bull 単に要素を指定するのではなく要素+属性で指定す
る(idセレクタclassセレクタなど)
bull 子孫セレクタではなく子セレクタを使うなど
うまく動作しないときの 確認ポイント
Path patternがあっているか
bull 画面のソースを表示してView customizeで指定
したコードが埋め込まれているか確認
bull 埋め込まれていない場合Path patternが間違えている
のでPath patternを見直す
JavaScriptでエラーが発生していないか
bull 開発者ツールでエラーメッセージが出力されて
いないか確認
bull エラーメッセージが出力されていればそれをもとに
JavaScriptを修正
CSSが上書きされていないか
bull 複数のCSSが一致する場合その要素に対してど
のようなスタイルが適用されるかは優先度に
よって決まる
bull 該当の要素を詳細に指定している方が優先される
bull 型セレクタよりidセレクタで指定したものの方が優先
bull セレクタのレベルが同じならば後に書かれたものが
優先される
CSSが上書きされていないか
bull 上にあるほどもの優先度が高い
bull 取り消し線のものは優先度が高いものによって上書きさ
れているもの
チケットの入力フォームがらみは面倒
bull チケットの入力フォームはトラッカーまたはス
テータスが変わるとフォームの再読み込みが行
われる(all_attributes配下が差し替わる)
bull これはトラッカーやステータスによって入力可能な
フィールドや選択肢が変わるため
bull これにより入力フォームの各要素に対する変更(内
容変更やイベントの登録)はリセットされてし
まう
チケット入力フォームに対するイベント
bull 入力フォームが差し替わってもハンドリングでき
るようにする必要がある
bull 考え方としては親の要素に対してイベントを登
録しておいてイベントが発生した際に発生元が
該当のものか判断するようなイメージ
bull jQueryのon関数を使うと簡単に書ける
チケット入力フォームに対するイベント
bull ダメな例
これだと入力フォームが差し替わったタイミングで登録先の要素
(issue_status_id)が別物に変わってしまうのでうまく動かない
bull OKな例
documentに対してイベントハンドラを登録し該当の要素(issue_status_id)
が発生元だったら動作するように書くことによってissue_status_idが差し
替わってもハンドリング可能に
$(issue_status_id) on(change function(e) ステータス変更時に実施したい処理 )
$(document) on(change issue_status_id function(e) ステータス変更時に実施したい処理 )
チケット入力フォームに対する変更
bull 入力フォームが差し替わると変更した内容も元
に戻ってしまうので差し替わったタイミングで
処理する必要がある
bull たとえばカスタムフィールドの値に応じて他のカ
スタムフィールドで選択可能な値を絞る場合など
チケット入力フォームに対する変更
bull 差し替え処理を行っている関数をフックして差
し替え処理の後に処理を差し込む
bull replaceIssueFormWith 関数が差し替え処理を行って
いる関数なのでそこを対象に
関数を別名で退避 var _replaceIssueFormWith = replaceIssueFormWith 関数を中身を変更 退避した処理を呼び出すような関数として作り変える replaceIssueFormWith = function(html) 退避しておいた関数を呼び出し _replaceIssueFormWith(html) ここでフォーム差し替え後に やりたい処理を書く
View customize導入に向けて
試す環境を作る
bull プロジェクトで使っているRedmineにいきなり適
用するのは敷居が高いという場合にはまずは仮
想環境などで試してみる
bull Redmineの各バージョンのVagrant boxを公開している
のでそちらを使えばすぐに
vagrant init onozatyredmine-32
vagrant up
スクリプトを書いてみる
bull この資料を参考に書いてみる
bull スクリプトのサンプルは下記リポジトリに貯め
ていっているので参考に
bull httpsgithubcomonozatyredmine-view-customize-scripts
bull これからもだんだん増えていく予定
困ったときには
困ったときにはhellip
bull onozaty まで (follow me)
bull 即レスとまでいきませんが毎日確認してます
bull スクリプト例などもつぶやいています
困ったときにはhellip
bull こういうことできませんかといった質問もお
気軽にどうぞ
bull 一応全部答えている(できるものはBlogでも公開)つ
もりですが拾えてなかったらごめんなさい
おわり
View customize plugin
bull Redmine自体のコードを変更したりプラグイン
を作ったりといった手間無く手軽にカスタマイ
ズできる
bull 再起動不要でカスタマイズを適用
≒UserScript
bull UserScriptをクライアントではなくサーバ側で
設定してRedmineを使用する全ユーザに適用す
るイメージ
UserScriptとは画面ロード時に任意のJavaScriptを実行して
画面カスタマイズを行えるブラウザの機能
できることの例
bull プロジェクト毎にヘッダの色を変える
bull チケット一覧を識別しやすいように装飾
bull チケット作成時にトラッカーに応じてデフォルト値を設定
bull サイドバーを開閉式に
bull 「全てのチケット一覧」リンクをヘッダに
bull 進行中にもかかわらず担当者が未設定の場合に警告を表示
bull ユーザ選択のカスタムフィールドで自分を選択する項目を先頭に追加
bull プロジェクト一覧からの各プロジェクトへのリンク先を変更
bull カスタムフィールドを連動させる(親の値に応じて子を絞り込む)
bull コンテキストメニューを選択しやすくする
注意点
注意点
bull View customize pluginでは画面側(JavaScript
CSS)でしかカスタマイズできないため出来ない
こともある
bull 画面にない情報を表示するとか
注意点
bull 画面だけでもいろいろ解決できることがあるが
もしも欲しい機能に特化したプラグインがあるな
らばそちらを使った方が良い
bull 画面側だけの制約が無いのでシンプルな実装になっ
ているはず
bull その機能の検証も十分行われているはず
使い方
インストール
bull Redmineのインストールディレクトリ配下の
pluginsディレクトリに移動してView customize
pluginのリポジトリをclone
clone時のディレクトリ名はview_customizeとしてください
cd varlibredmineplugins
git clone httpsgithubcomonozatyredmine-view-customizegit view_customize
rake redminepluginsmigrate RAILS_ENV=production
インストールしただけではhellip
bull 何も変わらない
bull View customize pluginはRedmineの拡張方法を
提供するだけでどう設定するかはユーザ次第
設定方法
bull 管理 gt View customize で一覧画面へ遷移し
「New view customize」で設定入力画面へ
設定方法
コードを実行するパス(URL)
正規表現で記載
実行するコード
JavaScript または
StyleSheet(CSS)で書く
Redmineの画面で使用されているjQueryも使える(Redmineのバージョンによってライブラリが違うので注意)
プライベートにチェックを入れると作成したユーザのみに有効
実行
bull Pathが一致すると画面にコードが埋め込まれて
実行される
View customizeを触るうえで キーとなる技術
キーとなる技術
bull JavaScript(ブラウザ上で動作するスクリプト言語)
とCSS(ページのデザインを定義する仕組み)で設定
するのでオリジナルのカスタマイズをしたい場
合にはそれらの知識が必要となってくる
bull ただカスタマイズをするにあたってそこまで多く
の知識が求められるわけではないので調べたり見
よう見まねでもどうにかなるはず
bull 実際JavaScriptやCSS知らなかった人でも調べながらで使え
てたりする
jQuery
jQuery
bull JavaScriptライブラリ
bull httpsjquerycom
bull RedmineではjQueryをすべての画面で読み込んで
いるのでView customizeでもjQueryが利用でき
る
jQuery
bull jQueryを使うとクロスブラウザによる違いの煩
わしさを吸収したりDOM操作が簡潔に書けるの
で便利
bull ただ最近のブラウザだと標準で代替するようなメ
ソッドが提供されているのでIE8捨てられるならば
jQuery使うまでもないかも
bull WebにjQueryの情報はあふれているので調べる
のも簡単
CSSセレクタ
CSSセレクタ
bull CSSセレクタとはCSSでスタイルを適用する対象
を示すもの
bull View customizeでも良く使うことになる
bull JavaScriptで指定要素を取得するとき
bull jQueryの$(selector)関数
bull CSSで対象を指定するとき
divheader h1
設定に関するノウハウ
対象画面の指定方法
Path pattern
bull Path patternに一致した画面の場合該当のスクリ
プトが埋め込まれる
bull 正規表現で記載する
URLとPath
bull URLでアプリケーション配下がPath
bull クエリパラメータは含まれない
bull httpexamplecomprojects
-gt prjects
bull httpexamplecomprojectsaissuesset_filter=1
-gt projectsaissues
bull httpexamplecomredmineprojects
ドキュメントルートではなくredmineとしてインストール
-gt prjects
Pathを確認する方法
bull バージョン114からHTMLにPathをコメントと
して埋め込むようになっている
bull ブラウザのソース表示で見ればその画面のPathが
わかる
指定例 (よくつかうもの)
Path pattern 一致する画面
全ての画面
issues$ チケット一覧
issuesnew$ チケットの新規作成画面
issues[0-9]+$ 個々のチケット内容表示画面
issues[0-9]+copy$ チケットのコピーによる作成画面
issuesgantt ガントチャート
projects$ プロジェクト一覧
[]+$ といった文字は正規表現におけるメタ文字(特殊な意味をもった文字)
チケットの入力フォーム
bull チケットの入力フォームはいろいろな画面で存
在するのでPathの指定だけだと面倒
bull issues1 チケット内容表示画面でも編集ボタンでフォームが
bull issuesnew 新規作成
bull issues1copy コピーによる作成画面
bull issuesgantt timesガントチャートなのでこれは一致させたくない
bull issues timesチケット一覧の場合 チケット登録時のValidationエラーの場合
Path pattern + JavaScriptで絞る
bull ldquoissuesrdquo と指定してJavaScript側でチケットの入
力フォームが無かったら処理しないようにする
bull チケットの入力フォームでしか存在しない要素
(issue-form とか)で確認する
bull 指定した要素が無かった場合でも処理がスキップされ
るように書いていればOK
jQueryの$(selector)関数
bull jQueryの$(selector)関数で返却されるjQueryオブジェクト
は一致する要素が無かった場合何も処理されないので
それを使っていれば大丈夫
bull 上記例だと入力フォームが無かった場合on関数でのイベント
登録が行われず何も処理されないことになる
(エラーにもならない)
$(issue-form input[type=submit]) on(click function(event) 送信ボタン押下時に何か処理を行わせる )
プロジェクト毎の指定
bull チケット詳細画面(issues1 など)はプロジェク
トをパスに持たないのでPathだけだとプロジェ
クトを指定できない
bull projectsprj1issues
bull projectsprj1issues1 timesこれはパスとして無効
bull issues1 チケット詳細はプロジェクト関係なく固定パス
body要素に付与されるclass属性で判断
bull body要素のclass属性に project-プロジェクト識別
子 が設定されるのでこれを使ってプロジェクト
を識別する
JavaScriptでプロジェクトを判定
bull jQueryのhasClass()関数で指定のクラス名が存在
するかチェックできる
bull またはclass属性を取り出して比較するなど
if ($(body)hasClass(project-prj1)) プロジェクト識別子がprj1の場合
CSSでプロジェクトを指定
bull CSSのセレクタでbodyのclassを利用するだけ
bodyproject-prj1 top-menu background-color 006400 dark green bodyproject-prj1 header background-color 008000 green
class属性が振られるもの
bull プロジェクト以外にもclass属性が振られるもの
が多々あるので対象画面や対象箇所を限定する
のに使用できる
class属性が振られるもの
bull body要素
bull controller-コントローラ名
bull action-アクション名
bull チケット一覧の各行
bull tracker-トラッカーID
bull status-ステータスID
bull priority-優先度ID
bull created-by-me
class属性が振られるもの
bull 他にもいろいろあるので詳しくは「Redmineの
画面で振られているclass属性について -
EnjoyStudy」にて
bull httpblogenjoyxstudycomentry20141011000000
コード(JavaScript)の書き方
ブラウザの開発者ツールを活用
ブラウザの開発者ツール
bull いきなりView customizeで設定するのではなく
ブラウザの開発者ツールを使いながら作成確認
する
bull DOMインスペクタ
bull コンソール
ブラウザの開発者ツール
bull 開発者ツールはChromeFirefoxIE それぞれ
のブラウザに標準でも入っている
bull Firefoxだと拡張機能のFirebugでもOK
bull 愛用しているので以降のキャプチャはFirebugにて
DOMインスペクタ
bull 選択した要素がHTML上でどういった構造で書か
れているか確認できる
bull ソース表示で見るより簡単
コンソール
bull 表示している画面に対してのJavaScriptの実行を手
軽に試せる
bull 補完も効く(複数行モードの場合はダメ)
コンソール
bull 複数行まとめて実行できるものもあり長めの
コードでも修正実行を繰り返し行える
実際に試してみる
例ヘッダにチケット一覧リンクを追加
bull やること
1 どこに要素を追加すればよいか調べる
2 その要素を起点にリンクを追加するコードを書く
3 うまくいったらView customize で設定
(いったんプライベートで)
4 動作することが確認できたらプライベートを外し
て全体に反映
追加位置を調べる
bull DOMインスペクタで追加したい位置を選択
追加位置を調べる
bull パスを確認
bull id属性がtop-menuとなっているdiv要素配下のul要素の
最後に追加してあげればよさそう
追加位置を調べる
bull コンソールで追加対象の要素を取得してみる
bull divtop-menu gt ul (id属性がtop-menuのdiv要素の子
のul要素) で取れた
リンクを追加するコードを書く
bull 対象のul要素の子要素としてリンクを追加する
コードを実行し思った動作になるまで確認
View customizeで設定
bull 画面の描画完了時にコードを実行する必要がある
(描画完了前だと要素が取得できない)ので
jQueryの$(function)関数を利用
$(function() ロード完了時に呼び出される $(top-menu gt ul) append(ltligtlta href=issuesgt全てのチケットltagtltligt) )
View customizeで設定
bull いったんプライベートで設定し動作を確認する
bull 動作OKでプライベートを外して全体に有効へ
コード(CSS)の書き方
JavaScriptの時と同じ
bull DOMインスペクタで変更したい要素を探す
bull CSSセレクタがどうなりそうかも確認しておく
bull 要素のスタイルを変えて試す
CSSをView customizeに設定
bull Path Patternは絞れるならば絞って問題ないが
CSSセレクタ自体で対象箇所が絞ってかけるので
全画面対象でもほとんど問題なし
bull そのままCSSを書くイメージ
CSSセレクタの書き方
CSSセレクタの確認
bull DOMインスペクタを使うことによってCSSセレ
クタはわかる
CSSセレクタの指定
bull bodyからすべてのパスを書く必要はなくid属性
が付与されているものを起点に考えると良い
bull id属性は一意のものになるので
body divwrapper divwrapper2 divwrapper3 divheader h1
divheader h1
bodyからのフルパス
こっちで十分
良く使うCSSセレクタ
他にもいろいろあるので詳しくない場合には
rdquoCSSセレクタrdquoで一度調べておくと良い
セレクタ名 書式 対象
型セレクタ E E要素
idセレクタ Emyid id名がmyidのE要素
classセレクタ Ewarning class名がwarinigのE要素
子孫セレクタ E F E要素の子孫にあたるF要素
子セレクタ E gt F E要素の子にあたるF要素 (子孫セレクタはE要素の配下ならばどこにあっても良いが子セレクタは1階層下のみが対象)
CSSセレクタで気を付けること
bull 必要のない要素と一致させない
bull 一致してしまう場合には条件をもっときつく
bull 単に要素を指定するのではなく要素+属性で指定す
る(idセレクタclassセレクタなど)
bull 子孫セレクタではなく子セレクタを使うなど
うまく動作しないときの 確認ポイント
Path patternがあっているか
bull 画面のソースを表示してView customizeで指定
したコードが埋め込まれているか確認
bull 埋め込まれていない場合Path patternが間違えている
のでPath patternを見直す
JavaScriptでエラーが発生していないか
bull 開発者ツールでエラーメッセージが出力されて
いないか確認
bull エラーメッセージが出力されていればそれをもとに
JavaScriptを修正
CSSが上書きされていないか
bull 複数のCSSが一致する場合その要素に対してど
のようなスタイルが適用されるかは優先度に
よって決まる
bull 該当の要素を詳細に指定している方が優先される
bull 型セレクタよりidセレクタで指定したものの方が優先
bull セレクタのレベルが同じならば後に書かれたものが
優先される
CSSが上書きされていないか
bull 上にあるほどもの優先度が高い
bull 取り消し線のものは優先度が高いものによって上書きさ
れているもの
チケットの入力フォームがらみは面倒
bull チケットの入力フォームはトラッカーまたはス
テータスが変わるとフォームの再読み込みが行
われる(all_attributes配下が差し替わる)
bull これはトラッカーやステータスによって入力可能な
フィールドや選択肢が変わるため
bull これにより入力フォームの各要素に対する変更(内
容変更やイベントの登録)はリセットされてし
まう
チケット入力フォームに対するイベント
bull 入力フォームが差し替わってもハンドリングでき
るようにする必要がある
bull 考え方としては親の要素に対してイベントを登
録しておいてイベントが発生した際に発生元が
該当のものか判断するようなイメージ
bull jQueryのon関数を使うと簡単に書ける
チケット入力フォームに対するイベント
bull ダメな例
これだと入力フォームが差し替わったタイミングで登録先の要素
(issue_status_id)が別物に変わってしまうのでうまく動かない
bull OKな例
documentに対してイベントハンドラを登録し該当の要素(issue_status_id)
が発生元だったら動作するように書くことによってissue_status_idが差し
替わってもハンドリング可能に
$(issue_status_id) on(change function(e) ステータス変更時に実施したい処理 )
$(document) on(change issue_status_id function(e) ステータス変更時に実施したい処理 )
チケット入力フォームに対する変更
bull 入力フォームが差し替わると変更した内容も元
に戻ってしまうので差し替わったタイミングで
処理する必要がある
bull たとえばカスタムフィールドの値に応じて他のカ
スタムフィールドで選択可能な値を絞る場合など
チケット入力フォームに対する変更
bull 差し替え処理を行っている関数をフックして差
し替え処理の後に処理を差し込む
bull replaceIssueFormWith 関数が差し替え処理を行って
いる関数なのでそこを対象に
関数を別名で退避 var _replaceIssueFormWith = replaceIssueFormWith 関数を中身を変更 退避した処理を呼び出すような関数として作り変える replaceIssueFormWith = function(html) 退避しておいた関数を呼び出し _replaceIssueFormWith(html) ここでフォーム差し替え後に やりたい処理を書く
View customize導入に向けて
試す環境を作る
bull プロジェクトで使っているRedmineにいきなり適
用するのは敷居が高いという場合にはまずは仮
想環境などで試してみる
bull Redmineの各バージョンのVagrant boxを公開している
のでそちらを使えばすぐに
vagrant init onozatyredmine-32
vagrant up
スクリプトを書いてみる
bull この資料を参考に書いてみる
bull スクリプトのサンプルは下記リポジトリに貯め
ていっているので参考に
bull httpsgithubcomonozatyredmine-view-customize-scripts
bull これからもだんだん増えていく予定
困ったときには
困ったときにはhellip
bull onozaty まで (follow me)
bull 即レスとまでいきませんが毎日確認してます
bull スクリプト例などもつぶやいています
困ったときにはhellip
bull こういうことできませんかといった質問もお
気軽にどうぞ
bull 一応全部答えている(できるものはBlogでも公開)つ
もりですが拾えてなかったらごめんなさい
おわり
≒UserScript
bull UserScriptをクライアントではなくサーバ側で
設定してRedmineを使用する全ユーザに適用す
るイメージ
UserScriptとは画面ロード時に任意のJavaScriptを実行して
画面カスタマイズを行えるブラウザの機能
できることの例
bull プロジェクト毎にヘッダの色を変える
bull チケット一覧を識別しやすいように装飾
bull チケット作成時にトラッカーに応じてデフォルト値を設定
bull サイドバーを開閉式に
bull 「全てのチケット一覧」リンクをヘッダに
bull 進行中にもかかわらず担当者が未設定の場合に警告を表示
bull ユーザ選択のカスタムフィールドで自分を選択する項目を先頭に追加
bull プロジェクト一覧からの各プロジェクトへのリンク先を変更
bull カスタムフィールドを連動させる(親の値に応じて子を絞り込む)
bull コンテキストメニューを選択しやすくする
注意点
注意点
bull View customize pluginでは画面側(JavaScript
CSS)でしかカスタマイズできないため出来ない
こともある
bull 画面にない情報を表示するとか
注意点
bull 画面だけでもいろいろ解決できることがあるが
もしも欲しい機能に特化したプラグインがあるな
らばそちらを使った方が良い
bull 画面側だけの制約が無いのでシンプルな実装になっ
ているはず
bull その機能の検証も十分行われているはず
使い方
インストール
bull Redmineのインストールディレクトリ配下の
pluginsディレクトリに移動してView customize
pluginのリポジトリをclone
clone時のディレクトリ名はview_customizeとしてください
cd varlibredmineplugins
git clone httpsgithubcomonozatyredmine-view-customizegit view_customize
rake redminepluginsmigrate RAILS_ENV=production
インストールしただけではhellip
bull 何も変わらない
bull View customize pluginはRedmineの拡張方法を
提供するだけでどう設定するかはユーザ次第
設定方法
bull 管理 gt View customize で一覧画面へ遷移し
「New view customize」で設定入力画面へ
設定方法
コードを実行するパス(URL)
正規表現で記載
実行するコード
JavaScript または
StyleSheet(CSS)で書く
Redmineの画面で使用されているjQueryも使える(Redmineのバージョンによってライブラリが違うので注意)
プライベートにチェックを入れると作成したユーザのみに有効
実行
bull Pathが一致すると画面にコードが埋め込まれて
実行される
View customizeを触るうえで キーとなる技術
キーとなる技術
bull JavaScript(ブラウザ上で動作するスクリプト言語)
とCSS(ページのデザインを定義する仕組み)で設定
するのでオリジナルのカスタマイズをしたい場
合にはそれらの知識が必要となってくる
bull ただカスタマイズをするにあたってそこまで多く
の知識が求められるわけではないので調べたり見
よう見まねでもどうにかなるはず
bull 実際JavaScriptやCSS知らなかった人でも調べながらで使え
てたりする
jQuery
jQuery
bull JavaScriptライブラリ
bull httpsjquerycom
bull RedmineではjQueryをすべての画面で読み込んで
いるのでView customizeでもjQueryが利用でき
る
jQuery
bull jQueryを使うとクロスブラウザによる違いの煩
わしさを吸収したりDOM操作が簡潔に書けるの
で便利
bull ただ最近のブラウザだと標準で代替するようなメ
ソッドが提供されているのでIE8捨てられるならば
jQuery使うまでもないかも
bull WebにjQueryの情報はあふれているので調べる
のも簡単
CSSセレクタ
CSSセレクタ
bull CSSセレクタとはCSSでスタイルを適用する対象
を示すもの
bull View customizeでも良く使うことになる
bull JavaScriptで指定要素を取得するとき
bull jQueryの$(selector)関数
bull CSSで対象を指定するとき
divheader h1
設定に関するノウハウ
対象画面の指定方法
Path pattern
bull Path patternに一致した画面の場合該当のスクリ
プトが埋め込まれる
bull 正規表現で記載する
URLとPath
bull URLでアプリケーション配下がPath
bull クエリパラメータは含まれない
bull httpexamplecomprojects
-gt prjects
bull httpexamplecomprojectsaissuesset_filter=1
-gt projectsaissues
bull httpexamplecomredmineprojects
ドキュメントルートではなくredmineとしてインストール
-gt prjects
Pathを確認する方法
bull バージョン114からHTMLにPathをコメントと
して埋め込むようになっている
bull ブラウザのソース表示で見ればその画面のPathが
わかる
指定例 (よくつかうもの)
Path pattern 一致する画面
全ての画面
issues$ チケット一覧
issuesnew$ チケットの新規作成画面
issues[0-9]+$ 個々のチケット内容表示画面
issues[0-9]+copy$ チケットのコピーによる作成画面
issuesgantt ガントチャート
projects$ プロジェクト一覧
[]+$ といった文字は正規表現におけるメタ文字(特殊な意味をもった文字)
チケットの入力フォーム
bull チケットの入力フォームはいろいろな画面で存
在するのでPathの指定だけだと面倒
bull issues1 チケット内容表示画面でも編集ボタンでフォームが
bull issuesnew 新規作成
bull issues1copy コピーによる作成画面
bull issuesgantt timesガントチャートなのでこれは一致させたくない
bull issues timesチケット一覧の場合 チケット登録時のValidationエラーの場合
Path pattern + JavaScriptで絞る
bull ldquoissuesrdquo と指定してJavaScript側でチケットの入
力フォームが無かったら処理しないようにする
bull チケットの入力フォームでしか存在しない要素
(issue-form とか)で確認する
bull 指定した要素が無かった場合でも処理がスキップされ
るように書いていればOK
jQueryの$(selector)関数
bull jQueryの$(selector)関数で返却されるjQueryオブジェクト
は一致する要素が無かった場合何も処理されないので
それを使っていれば大丈夫
bull 上記例だと入力フォームが無かった場合on関数でのイベント
登録が行われず何も処理されないことになる
(エラーにもならない)
$(issue-form input[type=submit]) on(click function(event) 送信ボタン押下時に何か処理を行わせる )
プロジェクト毎の指定
bull チケット詳細画面(issues1 など)はプロジェク
トをパスに持たないのでPathだけだとプロジェ
クトを指定できない
bull projectsprj1issues
bull projectsprj1issues1 timesこれはパスとして無効
bull issues1 チケット詳細はプロジェクト関係なく固定パス
body要素に付与されるclass属性で判断
bull body要素のclass属性に project-プロジェクト識別
子 が設定されるのでこれを使ってプロジェクト
を識別する
JavaScriptでプロジェクトを判定
bull jQueryのhasClass()関数で指定のクラス名が存在
するかチェックできる
bull またはclass属性を取り出して比較するなど
if ($(body)hasClass(project-prj1)) プロジェクト識別子がprj1の場合
CSSでプロジェクトを指定
bull CSSのセレクタでbodyのclassを利用するだけ
bodyproject-prj1 top-menu background-color 006400 dark green bodyproject-prj1 header background-color 008000 green
class属性が振られるもの
bull プロジェクト以外にもclass属性が振られるもの
が多々あるので対象画面や対象箇所を限定する
のに使用できる
class属性が振られるもの
bull body要素
bull controller-コントローラ名
bull action-アクション名
bull チケット一覧の各行
bull tracker-トラッカーID
bull status-ステータスID
bull priority-優先度ID
bull created-by-me
class属性が振られるもの
bull 他にもいろいろあるので詳しくは「Redmineの
画面で振られているclass属性について -
EnjoyStudy」にて
bull httpblogenjoyxstudycomentry20141011000000
コード(JavaScript)の書き方
ブラウザの開発者ツールを活用
ブラウザの開発者ツール
bull いきなりView customizeで設定するのではなく
ブラウザの開発者ツールを使いながら作成確認
する
bull DOMインスペクタ
bull コンソール
ブラウザの開発者ツール
bull 開発者ツールはChromeFirefoxIE それぞれ
のブラウザに標準でも入っている
bull Firefoxだと拡張機能のFirebugでもOK
bull 愛用しているので以降のキャプチャはFirebugにて
DOMインスペクタ
bull 選択した要素がHTML上でどういった構造で書か
れているか確認できる
bull ソース表示で見るより簡単
コンソール
bull 表示している画面に対してのJavaScriptの実行を手
軽に試せる
bull 補完も効く(複数行モードの場合はダメ)
コンソール
bull 複数行まとめて実行できるものもあり長めの
コードでも修正実行を繰り返し行える
実際に試してみる
例ヘッダにチケット一覧リンクを追加
bull やること
1 どこに要素を追加すればよいか調べる
2 その要素を起点にリンクを追加するコードを書く
3 うまくいったらView customize で設定
(いったんプライベートで)
4 動作することが確認できたらプライベートを外し
て全体に反映
追加位置を調べる
bull DOMインスペクタで追加したい位置を選択
追加位置を調べる
bull パスを確認
bull id属性がtop-menuとなっているdiv要素配下のul要素の
最後に追加してあげればよさそう
追加位置を調べる
bull コンソールで追加対象の要素を取得してみる
bull divtop-menu gt ul (id属性がtop-menuのdiv要素の子
のul要素) で取れた
リンクを追加するコードを書く
bull 対象のul要素の子要素としてリンクを追加する
コードを実行し思った動作になるまで確認
View customizeで設定
bull 画面の描画完了時にコードを実行する必要がある
(描画完了前だと要素が取得できない)ので
jQueryの$(function)関数を利用
$(function() ロード完了時に呼び出される $(top-menu gt ul) append(ltligtlta href=issuesgt全てのチケットltagtltligt) )
View customizeで設定
bull いったんプライベートで設定し動作を確認する
bull 動作OKでプライベートを外して全体に有効へ
コード(CSS)の書き方
JavaScriptの時と同じ
bull DOMインスペクタで変更したい要素を探す
bull CSSセレクタがどうなりそうかも確認しておく
bull 要素のスタイルを変えて試す
CSSをView customizeに設定
bull Path Patternは絞れるならば絞って問題ないが
CSSセレクタ自体で対象箇所が絞ってかけるので
全画面対象でもほとんど問題なし
bull そのままCSSを書くイメージ
CSSセレクタの書き方
CSSセレクタの確認
bull DOMインスペクタを使うことによってCSSセレ
クタはわかる
CSSセレクタの指定
bull bodyからすべてのパスを書く必要はなくid属性
が付与されているものを起点に考えると良い
bull id属性は一意のものになるので
body divwrapper divwrapper2 divwrapper3 divheader h1
divheader h1
bodyからのフルパス
こっちで十分
良く使うCSSセレクタ
他にもいろいろあるので詳しくない場合には
rdquoCSSセレクタrdquoで一度調べておくと良い
セレクタ名 書式 対象
型セレクタ E E要素
idセレクタ Emyid id名がmyidのE要素
classセレクタ Ewarning class名がwarinigのE要素
子孫セレクタ E F E要素の子孫にあたるF要素
子セレクタ E gt F E要素の子にあたるF要素 (子孫セレクタはE要素の配下ならばどこにあっても良いが子セレクタは1階層下のみが対象)
CSSセレクタで気を付けること
bull 必要のない要素と一致させない
bull 一致してしまう場合には条件をもっときつく
bull 単に要素を指定するのではなく要素+属性で指定す
る(idセレクタclassセレクタなど)
bull 子孫セレクタではなく子セレクタを使うなど
うまく動作しないときの 確認ポイント
Path patternがあっているか
bull 画面のソースを表示してView customizeで指定
したコードが埋め込まれているか確認
bull 埋め込まれていない場合Path patternが間違えている
のでPath patternを見直す
JavaScriptでエラーが発生していないか
bull 開発者ツールでエラーメッセージが出力されて
いないか確認
bull エラーメッセージが出力されていればそれをもとに
JavaScriptを修正
CSSが上書きされていないか
bull 複数のCSSが一致する場合その要素に対してど
のようなスタイルが適用されるかは優先度に
よって決まる
bull 該当の要素を詳細に指定している方が優先される
bull 型セレクタよりidセレクタで指定したものの方が優先
bull セレクタのレベルが同じならば後に書かれたものが
優先される
CSSが上書きされていないか
bull 上にあるほどもの優先度が高い
bull 取り消し線のものは優先度が高いものによって上書きさ
れているもの
チケットの入力フォームがらみは面倒
bull チケットの入力フォームはトラッカーまたはス
テータスが変わるとフォームの再読み込みが行
われる(all_attributes配下が差し替わる)
bull これはトラッカーやステータスによって入力可能な
フィールドや選択肢が変わるため
bull これにより入力フォームの各要素に対する変更(内
容変更やイベントの登録)はリセットされてし
まう
チケット入力フォームに対するイベント
bull 入力フォームが差し替わってもハンドリングでき
るようにする必要がある
bull 考え方としては親の要素に対してイベントを登
録しておいてイベントが発生した際に発生元が
該当のものか判断するようなイメージ
bull jQueryのon関数を使うと簡単に書ける
チケット入力フォームに対するイベント
bull ダメな例
これだと入力フォームが差し替わったタイミングで登録先の要素
(issue_status_id)が別物に変わってしまうのでうまく動かない
bull OKな例
documentに対してイベントハンドラを登録し該当の要素(issue_status_id)
が発生元だったら動作するように書くことによってissue_status_idが差し
替わってもハンドリング可能に
$(issue_status_id) on(change function(e) ステータス変更時に実施したい処理 )
$(document) on(change issue_status_id function(e) ステータス変更時に実施したい処理 )
チケット入力フォームに対する変更
bull 入力フォームが差し替わると変更した内容も元
に戻ってしまうので差し替わったタイミングで
処理する必要がある
bull たとえばカスタムフィールドの値に応じて他のカ
スタムフィールドで選択可能な値を絞る場合など
チケット入力フォームに対する変更
bull 差し替え処理を行っている関数をフックして差
し替え処理の後に処理を差し込む
bull replaceIssueFormWith 関数が差し替え処理を行って
いる関数なのでそこを対象に
関数を別名で退避 var _replaceIssueFormWith = replaceIssueFormWith 関数を中身を変更 退避した処理を呼び出すような関数として作り変える replaceIssueFormWith = function(html) 退避しておいた関数を呼び出し _replaceIssueFormWith(html) ここでフォーム差し替え後に やりたい処理を書く
View customize導入に向けて
試す環境を作る
bull プロジェクトで使っているRedmineにいきなり適
用するのは敷居が高いという場合にはまずは仮
想環境などで試してみる
bull Redmineの各バージョンのVagrant boxを公開している
のでそちらを使えばすぐに
vagrant init onozatyredmine-32
vagrant up
スクリプトを書いてみる
bull この資料を参考に書いてみる
bull スクリプトのサンプルは下記リポジトリに貯め
ていっているので参考に
bull httpsgithubcomonozatyredmine-view-customize-scripts
bull これからもだんだん増えていく予定
困ったときには
困ったときにはhellip
bull onozaty まで (follow me)
bull 即レスとまでいきませんが毎日確認してます
bull スクリプト例などもつぶやいています
困ったときにはhellip
bull こういうことできませんかといった質問もお
気軽にどうぞ
bull 一応全部答えている(できるものはBlogでも公開)つ
もりですが拾えてなかったらごめんなさい
おわり
できることの例
bull プロジェクト毎にヘッダの色を変える
bull チケット一覧を識別しやすいように装飾
bull チケット作成時にトラッカーに応じてデフォルト値を設定
bull サイドバーを開閉式に
bull 「全てのチケット一覧」リンクをヘッダに
bull 進行中にもかかわらず担当者が未設定の場合に警告を表示
bull ユーザ選択のカスタムフィールドで自分を選択する項目を先頭に追加
bull プロジェクト一覧からの各プロジェクトへのリンク先を変更
bull カスタムフィールドを連動させる(親の値に応じて子を絞り込む)
bull コンテキストメニューを選択しやすくする
注意点
注意点
bull View customize pluginでは画面側(JavaScript
CSS)でしかカスタマイズできないため出来ない
こともある
bull 画面にない情報を表示するとか
注意点
bull 画面だけでもいろいろ解決できることがあるが
もしも欲しい機能に特化したプラグインがあるな
らばそちらを使った方が良い
bull 画面側だけの制約が無いのでシンプルな実装になっ
ているはず
bull その機能の検証も十分行われているはず
使い方
インストール
bull Redmineのインストールディレクトリ配下の
pluginsディレクトリに移動してView customize
pluginのリポジトリをclone
clone時のディレクトリ名はview_customizeとしてください
cd varlibredmineplugins
git clone httpsgithubcomonozatyredmine-view-customizegit view_customize
rake redminepluginsmigrate RAILS_ENV=production
インストールしただけではhellip
bull 何も変わらない
bull View customize pluginはRedmineの拡張方法を
提供するだけでどう設定するかはユーザ次第
設定方法
bull 管理 gt View customize で一覧画面へ遷移し
「New view customize」で設定入力画面へ
設定方法
コードを実行するパス(URL)
正規表現で記載
実行するコード
JavaScript または
StyleSheet(CSS)で書く
Redmineの画面で使用されているjQueryも使える(Redmineのバージョンによってライブラリが違うので注意)
プライベートにチェックを入れると作成したユーザのみに有効
実行
bull Pathが一致すると画面にコードが埋め込まれて
実行される
View customizeを触るうえで キーとなる技術
キーとなる技術
bull JavaScript(ブラウザ上で動作するスクリプト言語)
とCSS(ページのデザインを定義する仕組み)で設定
するのでオリジナルのカスタマイズをしたい場
合にはそれらの知識が必要となってくる
bull ただカスタマイズをするにあたってそこまで多く
の知識が求められるわけではないので調べたり見
よう見まねでもどうにかなるはず
bull 実際JavaScriptやCSS知らなかった人でも調べながらで使え
てたりする
jQuery
jQuery
bull JavaScriptライブラリ
bull httpsjquerycom
bull RedmineではjQueryをすべての画面で読み込んで
いるのでView customizeでもjQueryが利用でき
る
jQuery
bull jQueryを使うとクロスブラウザによる違いの煩
わしさを吸収したりDOM操作が簡潔に書けるの
で便利
bull ただ最近のブラウザだと標準で代替するようなメ
ソッドが提供されているのでIE8捨てられるならば
jQuery使うまでもないかも
bull WebにjQueryの情報はあふれているので調べる
のも簡単
CSSセレクタ
CSSセレクタ
bull CSSセレクタとはCSSでスタイルを適用する対象
を示すもの
bull View customizeでも良く使うことになる
bull JavaScriptで指定要素を取得するとき
bull jQueryの$(selector)関数
bull CSSで対象を指定するとき
divheader h1
設定に関するノウハウ
対象画面の指定方法
Path pattern
bull Path patternに一致した画面の場合該当のスクリ
プトが埋め込まれる
bull 正規表現で記載する
URLとPath
bull URLでアプリケーション配下がPath
bull クエリパラメータは含まれない
bull httpexamplecomprojects
-gt prjects
bull httpexamplecomprojectsaissuesset_filter=1
-gt projectsaissues
bull httpexamplecomredmineprojects
ドキュメントルートではなくredmineとしてインストール
-gt prjects
Pathを確認する方法
bull バージョン114からHTMLにPathをコメントと
して埋め込むようになっている
bull ブラウザのソース表示で見ればその画面のPathが
わかる
指定例 (よくつかうもの)
Path pattern 一致する画面
全ての画面
issues$ チケット一覧
issuesnew$ チケットの新規作成画面
issues[0-9]+$ 個々のチケット内容表示画面
issues[0-9]+copy$ チケットのコピーによる作成画面
issuesgantt ガントチャート
projects$ プロジェクト一覧
[]+$ といった文字は正規表現におけるメタ文字(特殊な意味をもった文字)
チケットの入力フォーム
bull チケットの入力フォームはいろいろな画面で存
在するのでPathの指定だけだと面倒
bull issues1 チケット内容表示画面でも編集ボタンでフォームが
bull issuesnew 新規作成
bull issues1copy コピーによる作成画面
bull issuesgantt timesガントチャートなのでこれは一致させたくない
bull issues timesチケット一覧の場合 チケット登録時のValidationエラーの場合
Path pattern + JavaScriptで絞る
bull ldquoissuesrdquo と指定してJavaScript側でチケットの入
力フォームが無かったら処理しないようにする
bull チケットの入力フォームでしか存在しない要素
(issue-form とか)で確認する
bull 指定した要素が無かった場合でも処理がスキップされ
るように書いていればOK
jQueryの$(selector)関数
bull jQueryの$(selector)関数で返却されるjQueryオブジェクト
は一致する要素が無かった場合何も処理されないので
それを使っていれば大丈夫
bull 上記例だと入力フォームが無かった場合on関数でのイベント
登録が行われず何も処理されないことになる
(エラーにもならない)
$(issue-form input[type=submit]) on(click function(event) 送信ボタン押下時に何か処理を行わせる )
プロジェクト毎の指定
bull チケット詳細画面(issues1 など)はプロジェク
トをパスに持たないのでPathだけだとプロジェ
クトを指定できない
bull projectsprj1issues
bull projectsprj1issues1 timesこれはパスとして無効
bull issues1 チケット詳細はプロジェクト関係なく固定パス
body要素に付与されるclass属性で判断
bull body要素のclass属性に project-プロジェクト識別
子 が設定されるのでこれを使ってプロジェクト
を識別する
JavaScriptでプロジェクトを判定
bull jQueryのhasClass()関数で指定のクラス名が存在
するかチェックできる
bull またはclass属性を取り出して比較するなど
if ($(body)hasClass(project-prj1)) プロジェクト識別子がprj1の場合
CSSでプロジェクトを指定
bull CSSのセレクタでbodyのclassを利用するだけ
bodyproject-prj1 top-menu background-color 006400 dark green bodyproject-prj1 header background-color 008000 green
class属性が振られるもの
bull プロジェクト以外にもclass属性が振られるもの
が多々あるので対象画面や対象箇所を限定する
のに使用できる
class属性が振られるもの
bull body要素
bull controller-コントローラ名
bull action-アクション名
bull チケット一覧の各行
bull tracker-トラッカーID
bull status-ステータスID
bull priority-優先度ID
bull created-by-me
class属性が振られるもの
bull 他にもいろいろあるので詳しくは「Redmineの
画面で振られているclass属性について -
EnjoyStudy」にて
bull httpblogenjoyxstudycomentry20141011000000
コード(JavaScript)の書き方
ブラウザの開発者ツールを活用
ブラウザの開発者ツール
bull いきなりView customizeで設定するのではなく
ブラウザの開発者ツールを使いながら作成確認
する
bull DOMインスペクタ
bull コンソール
ブラウザの開発者ツール
bull 開発者ツールはChromeFirefoxIE それぞれ
のブラウザに標準でも入っている
bull Firefoxだと拡張機能のFirebugでもOK
bull 愛用しているので以降のキャプチャはFirebugにて
DOMインスペクタ
bull 選択した要素がHTML上でどういった構造で書か
れているか確認できる
bull ソース表示で見るより簡単
コンソール
bull 表示している画面に対してのJavaScriptの実行を手
軽に試せる
bull 補完も効く(複数行モードの場合はダメ)
コンソール
bull 複数行まとめて実行できるものもあり長めの
コードでも修正実行を繰り返し行える
実際に試してみる
例ヘッダにチケット一覧リンクを追加
bull やること
1 どこに要素を追加すればよいか調べる
2 その要素を起点にリンクを追加するコードを書く
3 うまくいったらView customize で設定
(いったんプライベートで)
4 動作することが確認できたらプライベートを外し
て全体に反映
追加位置を調べる
bull DOMインスペクタで追加したい位置を選択
追加位置を調べる
bull パスを確認
bull id属性がtop-menuとなっているdiv要素配下のul要素の
最後に追加してあげればよさそう
追加位置を調べる
bull コンソールで追加対象の要素を取得してみる
bull divtop-menu gt ul (id属性がtop-menuのdiv要素の子
のul要素) で取れた
リンクを追加するコードを書く
bull 対象のul要素の子要素としてリンクを追加する
コードを実行し思った動作になるまで確認
View customizeで設定
bull 画面の描画完了時にコードを実行する必要がある
(描画完了前だと要素が取得できない)ので
jQueryの$(function)関数を利用
$(function() ロード完了時に呼び出される $(top-menu gt ul) append(ltligtlta href=issuesgt全てのチケットltagtltligt) )
View customizeで設定
bull いったんプライベートで設定し動作を確認する
bull 動作OKでプライベートを外して全体に有効へ
コード(CSS)の書き方
JavaScriptの時と同じ
bull DOMインスペクタで変更したい要素を探す
bull CSSセレクタがどうなりそうかも確認しておく
bull 要素のスタイルを変えて試す
CSSをView customizeに設定
bull Path Patternは絞れるならば絞って問題ないが
CSSセレクタ自体で対象箇所が絞ってかけるので
全画面対象でもほとんど問題なし
bull そのままCSSを書くイメージ
CSSセレクタの書き方
CSSセレクタの確認
bull DOMインスペクタを使うことによってCSSセレ
クタはわかる
CSSセレクタの指定
bull bodyからすべてのパスを書く必要はなくid属性
が付与されているものを起点に考えると良い
bull id属性は一意のものになるので
body divwrapper divwrapper2 divwrapper3 divheader h1
divheader h1
bodyからのフルパス
こっちで十分
良く使うCSSセレクタ
他にもいろいろあるので詳しくない場合には
rdquoCSSセレクタrdquoで一度調べておくと良い
セレクタ名 書式 対象
型セレクタ E E要素
idセレクタ Emyid id名がmyidのE要素
classセレクタ Ewarning class名がwarinigのE要素
子孫セレクタ E F E要素の子孫にあたるF要素
子セレクタ E gt F E要素の子にあたるF要素 (子孫セレクタはE要素の配下ならばどこにあっても良いが子セレクタは1階層下のみが対象)
CSSセレクタで気を付けること
bull 必要のない要素と一致させない
bull 一致してしまう場合には条件をもっときつく
bull 単に要素を指定するのではなく要素+属性で指定す
る(idセレクタclassセレクタなど)
bull 子孫セレクタではなく子セレクタを使うなど
うまく動作しないときの 確認ポイント
Path patternがあっているか
bull 画面のソースを表示してView customizeで指定
したコードが埋め込まれているか確認
bull 埋め込まれていない場合Path patternが間違えている
のでPath patternを見直す
JavaScriptでエラーが発生していないか
bull 開発者ツールでエラーメッセージが出力されて
いないか確認
bull エラーメッセージが出力されていればそれをもとに
JavaScriptを修正
CSSが上書きされていないか
bull 複数のCSSが一致する場合その要素に対してど
のようなスタイルが適用されるかは優先度に
よって決まる
bull 該当の要素を詳細に指定している方が優先される
bull 型セレクタよりidセレクタで指定したものの方が優先
bull セレクタのレベルが同じならば後に書かれたものが
優先される
CSSが上書きされていないか
bull 上にあるほどもの優先度が高い
bull 取り消し線のものは優先度が高いものによって上書きさ
れているもの
チケットの入力フォームがらみは面倒
bull チケットの入力フォームはトラッカーまたはス
テータスが変わるとフォームの再読み込みが行
われる(all_attributes配下が差し替わる)
bull これはトラッカーやステータスによって入力可能な
フィールドや選択肢が変わるため
bull これにより入力フォームの各要素に対する変更(内
容変更やイベントの登録)はリセットされてし
まう
チケット入力フォームに対するイベント
bull 入力フォームが差し替わってもハンドリングでき
るようにする必要がある
bull 考え方としては親の要素に対してイベントを登
録しておいてイベントが発生した際に発生元が
該当のものか判断するようなイメージ
bull jQueryのon関数を使うと簡単に書ける
チケット入力フォームに対するイベント
bull ダメな例
これだと入力フォームが差し替わったタイミングで登録先の要素
(issue_status_id)が別物に変わってしまうのでうまく動かない
bull OKな例
documentに対してイベントハンドラを登録し該当の要素(issue_status_id)
が発生元だったら動作するように書くことによってissue_status_idが差し
替わってもハンドリング可能に
$(issue_status_id) on(change function(e) ステータス変更時に実施したい処理 )
$(document) on(change issue_status_id function(e) ステータス変更時に実施したい処理 )
チケット入力フォームに対する変更
bull 入力フォームが差し替わると変更した内容も元
に戻ってしまうので差し替わったタイミングで
処理する必要がある
bull たとえばカスタムフィールドの値に応じて他のカ
スタムフィールドで選択可能な値を絞る場合など
チケット入力フォームに対する変更
bull 差し替え処理を行っている関数をフックして差
し替え処理の後に処理を差し込む
bull replaceIssueFormWith 関数が差し替え処理を行って
いる関数なのでそこを対象に
関数を別名で退避 var _replaceIssueFormWith = replaceIssueFormWith 関数を中身を変更 退避した処理を呼び出すような関数として作り変える replaceIssueFormWith = function(html) 退避しておいた関数を呼び出し _replaceIssueFormWith(html) ここでフォーム差し替え後に やりたい処理を書く
View customize導入に向けて
試す環境を作る
bull プロジェクトで使っているRedmineにいきなり適
用するのは敷居が高いという場合にはまずは仮
想環境などで試してみる
bull Redmineの各バージョンのVagrant boxを公開している
のでそちらを使えばすぐに
vagrant init onozatyredmine-32
vagrant up
スクリプトを書いてみる
bull この資料を参考に書いてみる
bull スクリプトのサンプルは下記リポジトリに貯め
ていっているので参考に
bull httpsgithubcomonozatyredmine-view-customize-scripts
bull これからもだんだん増えていく予定
困ったときには
困ったときにはhellip
bull onozaty まで (follow me)
bull 即レスとまでいきませんが毎日確認してます
bull スクリプト例などもつぶやいています
困ったときにはhellip
bull こういうことできませんかといった質問もお
気軽にどうぞ
bull 一応全部答えている(できるものはBlogでも公開)つ
もりですが拾えてなかったらごめんなさい
おわり
注意点
注意点
bull View customize pluginでは画面側(JavaScript
CSS)でしかカスタマイズできないため出来ない
こともある
bull 画面にない情報を表示するとか
注意点
bull 画面だけでもいろいろ解決できることがあるが
もしも欲しい機能に特化したプラグインがあるな
らばそちらを使った方が良い
bull 画面側だけの制約が無いのでシンプルな実装になっ
ているはず
bull その機能の検証も十分行われているはず
使い方
インストール
bull Redmineのインストールディレクトリ配下の
pluginsディレクトリに移動してView customize
pluginのリポジトリをclone
clone時のディレクトリ名はview_customizeとしてください
cd varlibredmineplugins
git clone httpsgithubcomonozatyredmine-view-customizegit view_customize
rake redminepluginsmigrate RAILS_ENV=production
インストールしただけではhellip
bull 何も変わらない
bull View customize pluginはRedmineの拡張方法を
提供するだけでどう設定するかはユーザ次第
設定方法
bull 管理 gt View customize で一覧画面へ遷移し
「New view customize」で設定入力画面へ
設定方法
コードを実行するパス(URL)
正規表現で記載
実行するコード
JavaScript または
StyleSheet(CSS)で書く
Redmineの画面で使用されているjQueryも使える(Redmineのバージョンによってライブラリが違うので注意)
プライベートにチェックを入れると作成したユーザのみに有効
実行
bull Pathが一致すると画面にコードが埋め込まれて
実行される
View customizeを触るうえで キーとなる技術
キーとなる技術
bull JavaScript(ブラウザ上で動作するスクリプト言語)
とCSS(ページのデザインを定義する仕組み)で設定
するのでオリジナルのカスタマイズをしたい場
合にはそれらの知識が必要となってくる
bull ただカスタマイズをするにあたってそこまで多く
の知識が求められるわけではないので調べたり見
よう見まねでもどうにかなるはず
bull 実際JavaScriptやCSS知らなかった人でも調べながらで使え
てたりする
jQuery
jQuery
bull JavaScriptライブラリ
bull httpsjquerycom
bull RedmineではjQueryをすべての画面で読み込んで
いるのでView customizeでもjQueryが利用でき
る
jQuery
bull jQueryを使うとクロスブラウザによる違いの煩
わしさを吸収したりDOM操作が簡潔に書けるの
で便利
bull ただ最近のブラウザだと標準で代替するようなメ
ソッドが提供されているのでIE8捨てられるならば
jQuery使うまでもないかも
bull WebにjQueryの情報はあふれているので調べる
のも簡単
CSSセレクタ
CSSセレクタ
bull CSSセレクタとはCSSでスタイルを適用する対象
を示すもの
bull View customizeでも良く使うことになる
bull JavaScriptで指定要素を取得するとき
bull jQueryの$(selector)関数
bull CSSで対象を指定するとき
divheader h1
設定に関するノウハウ
対象画面の指定方法
Path pattern
bull Path patternに一致した画面の場合該当のスクリ
プトが埋め込まれる
bull 正規表現で記載する
URLとPath
bull URLでアプリケーション配下がPath
bull クエリパラメータは含まれない
bull httpexamplecomprojects
-gt prjects
bull httpexamplecomprojectsaissuesset_filter=1
-gt projectsaissues
bull httpexamplecomredmineprojects
ドキュメントルートではなくredmineとしてインストール
-gt prjects
Pathを確認する方法
bull バージョン114からHTMLにPathをコメントと
して埋め込むようになっている
bull ブラウザのソース表示で見ればその画面のPathが
わかる
指定例 (よくつかうもの)
Path pattern 一致する画面
全ての画面
issues$ チケット一覧
issuesnew$ チケットの新規作成画面
issues[0-9]+$ 個々のチケット内容表示画面
issues[0-9]+copy$ チケットのコピーによる作成画面
issuesgantt ガントチャート
projects$ プロジェクト一覧
[]+$ といった文字は正規表現におけるメタ文字(特殊な意味をもった文字)
チケットの入力フォーム
bull チケットの入力フォームはいろいろな画面で存
在するのでPathの指定だけだと面倒
bull issues1 チケット内容表示画面でも編集ボタンでフォームが
bull issuesnew 新規作成
bull issues1copy コピーによる作成画面
bull issuesgantt timesガントチャートなのでこれは一致させたくない
bull issues timesチケット一覧の場合 チケット登録時のValidationエラーの場合
Path pattern + JavaScriptで絞る
bull ldquoissuesrdquo と指定してJavaScript側でチケットの入
力フォームが無かったら処理しないようにする
bull チケットの入力フォームでしか存在しない要素
(issue-form とか)で確認する
bull 指定した要素が無かった場合でも処理がスキップされ
るように書いていればOK
jQueryの$(selector)関数
bull jQueryの$(selector)関数で返却されるjQueryオブジェクト
は一致する要素が無かった場合何も処理されないので
それを使っていれば大丈夫
bull 上記例だと入力フォームが無かった場合on関数でのイベント
登録が行われず何も処理されないことになる
(エラーにもならない)
$(issue-form input[type=submit]) on(click function(event) 送信ボタン押下時に何か処理を行わせる )
プロジェクト毎の指定
bull チケット詳細画面(issues1 など)はプロジェク
トをパスに持たないのでPathだけだとプロジェ
クトを指定できない
bull projectsprj1issues
bull projectsprj1issues1 timesこれはパスとして無効
bull issues1 チケット詳細はプロジェクト関係なく固定パス
body要素に付与されるclass属性で判断
bull body要素のclass属性に project-プロジェクト識別
子 が設定されるのでこれを使ってプロジェクト
を識別する
JavaScriptでプロジェクトを判定
bull jQueryのhasClass()関数で指定のクラス名が存在
するかチェックできる
bull またはclass属性を取り出して比較するなど
if ($(body)hasClass(project-prj1)) プロジェクト識別子がprj1の場合
CSSでプロジェクトを指定
bull CSSのセレクタでbodyのclassを利用するだけ
bodyproject-prj1 top-menu background-color 006400 dark green bodyproject-prj1 header background-color 008000 green
class属性が振られるもの
bull プロジェクト以外にもclass属性が振られるもの
が多々あるので対象画面や対象箇所を限定する
のに使用できる
class属性が振られるもの
bull body要素
bull controller-コントローラ名
bull action-アクション名
bull チケット一覧の各行
bull tracker-トラッカーID
bull status-ステータスID
bull priority-優先度ID
bull created-by-me
class属性が振られるもの
bull 他にもいろいろあるので詳しくは「Redmineの
画面で振られているclass属性について -
EnjoyStudy」にて
bull httpblogenjoyxstudycomentry20141011000000
コード(JavaScript)の書き方
ブラウザの開発者ツールを活用
ブラウザの開発者ツール
bull いきなりView customizeで設定するのではなく
ブラウザの開発者ツールを使いながら作成確認
する
bull DOMインスペクタ
bull コンソール
ブラウザの開発者ツール
bull 開発者ツールはChromeFirefoxIE それぞれ
のブラウザに標準でも入っている
bull Firefoxだと拡張機能のFirebugでもOK
bull 愛用しているので以降のキャプチャはFirebugにて
DOMインスペクタ
bull 選択した要素がHTML上でどういった構造で書か
れているか確認できる
bull ソース表示で見るより簡単
コンソール
bull 表示している画面に対してのJavaScriptの実行を手
軽に試せる
bull 補完も効く(複数行モードの場合はダメ)
コンソール
bull 複数行まとめて実行できるものもあり長めの
コードでも修正実行を繰り返し行える
実際に試してみる
例ヘッダにチケット一覧リンクを追加
bull やること
1 どこに要素を追加すればよいか調べる
2 その要素を起点にリンクを追加するコードを書く
3 うまくいったらView customize で設定
(いったんプライベートで)
4 動作することが確認できたらプライベートを外し
て全体に反映
追加位置を調べる
bull DOMインスペクタで追加したい位置を選択
追加位置を調べる
bull パスを確認
bull id属性がtop-menuとなっているdiv要素配下のul要素の
最後に追加してあげればよさそう
追加位置を調べる
bull コンソールで追加対象の要素を取得してみる
bull divtop-menu gt ul (id属性がtop-menuのdiv要素の子
のul要素) で取れた
リンクを追加するコードを書く
bull 対象のul要素の子要素としてリンクを追加する
コードを実行し思った動作になるまで確認
View customizeで設定
bull 画面の描画完了時にコードを実行する必要がある
(描画完了前だと要素が取得できない)ので
jQueryの$(function)関数を利用
$(function() ロード完了時に呼び出される $(top-menu gt ul) append(ltligtlta href=issuesgt全てのチケットltagtltligt) )
View customizeで設定
bull いったんプライベートで設定し動作を確認する
bull 動作OKでプライベートを外して全体に有効へ
コード(CSS)の書き方
JavaScriptの時と同じ
bull DOMインスペクタで変更したい要素を探す
bull CSSセレクタがどうなりそうかも確認しておく
bull 要素のスタイルを変えて試す
CSSをView customizeに設定
bull Path Patternは絞れるならば絞って問題ないが
CSSセレクタ自体で対象箇所が絞ってかけるので
全画面対象でもほとんど問題なし
bull そのままCSSを書くイメージ
CSSセレクタの書き方
CSSセレクタの確認
bull DOMインスペクタを使うことによってCSSセレ
クタはわかる
CSSセレクタの指定
bull bodyからすべてのパスを書く必要はなくid属性
が付与されているものを起点に考えると良い
bull id属性は一意のものになるので
body divwrapper divwrapper2 divwrapper3 divheader h1
divheader h1
bodyからのフルパス
こっちで十分
良く使うCSSセレクタ
他にもいろいろあるので詳しくない場合には
rdquoCSSセレクタrdquoで一度調べておくと良い
セレクタ名 書式 対象
型セレクタ E E要素
idセレクタ Emyid id名がmyidのE要素
classセレクタ Ewarning class名がwarinigのE要素
子孫セレクタ E F E要素の子孫にあたるF要素
子セレクタ E gt F E要素の子にあたるF要素 (子孫セレクタはE要素の配下ならばどこにあっても良いが子セレクタは1階層下のみが対象)
CSSセレクタで気を付けること
bull 必要のない要素と一致させない
bull 一致してしまう場合には条件をもっときつく
bull 単に要素を指定するのではなく要素+属性で指定す
る(idセレクタclassセレクタなど)
bull 子孫セレクタではなく子セレクタを使うなど
うまく動作しないときの 確認ポイント
Path patternがあっているか
bull 画面のソースを表示してView customizeで指定
したコードが埋め込まれているか確認
bull 埋め込まれていない場合Path patternが間違えている
のでPath patternを見直す
JavaScriptでエラーが発生していないか
bull 開発者ツールでエラーメッセージが出力されて
いないか確認
bull エラーメッセージが出力されていればそれをもとに
JavaScriptを修正
CSSが上書きされていないか
bull 複数のCSSが一致する場合その要素に対してど
のようなスタイルが適用されるかは優先度に
よって決まる
bull 該当の要素を詳細に指定している方が優先される
bull 型セレクタよりidセレクタで指定したものの方が優先
bull セレクタのレベルが同じならば後に書かれたものが
優先される
CSSが上書きされていないか
bull 上にあるほどもの優先度が高い
bull 取り消し線のものは優先度が高いものによって上書きさ
れているもの
チケットの入力フォームがらみは面倒
bull チケットの入力フォームはトラッカーまたはス
テータスが変わるとフォームの再読み込みが行
われる(all_attributes配下が差し替わる)
bull これはトラッカーやステータスによって入力可能な
フィールドや選択肢が変わるため
bull これにより入力フォームの各要素に対する変更(内
容変更やイベントの登録)はリセットされてし
まう
チケット入力フォームに対するイベント
bull 入力フォームが差し替わってもハンドリングでき
るようにする必要がある
bull 考え方としては親の要素に対してイベントを登
録しておいてイベントが発生した際に発生元が
該当のものか判断するようなイメージ
bull jQueryのon関数を使うと簡単に書ける
チケット入力フォームに対するイベント
bull ダメな例
これだと入力フォームが差し替わったタイミングで登録先の要素
(issue_status_id)が別物に変わってしまうのでうまく動かない
bull OKな例
documentに対してイベントハンドラを登録し該当の要素(issue_status_id)
が発生元だったら動作するように書くことによってissue_status_idが差し
替わってもハンドリング可能に
$(issue_status_id) on(change function(e) ステータス変更時に実施したい処理 )
$(document) on(change issue_status_id function(e) ステータス変更時に実施したい処理 )
チケット入力フォームに対する変更
bull 入力フォームが差し替わると変更した内容も元
に戻ってしまうので差し替わったタイミングで
処理する必要がある
bull たとえばカスタムフィールドの値に応じて他のカ
スタムフィールドで選択可能な値を絞る場合など
チケット入力フォームに対する変更
bull 差し替え処理を行っている関数をフックして差
し替え処理の後に処理を差し込む
bull replaceIssueFormWith 関数が差し替え処理を行って
いる関数なのでそこを対象に
関数を別名で退避 var _replaceIssueFormWith = replaceIssueFormWith 関数を中身を変更 退避した処理を呼び出すような関数として作り変える replaceIssueFormWith = function(html) 退避しておいた関数を呼び出し _replaceIssueFormWith(html) ここでフォーム差し替え後に やりたい処理を書く
View customize導入に向けて
試す環境を作る
bull プロジェクトで使っているRedmineにいきなり適
用するのは敷居が高いという場合にはまずは仮
想環境などで試してみる
bull Redmineの各バージョンのVagrant boxを公開している
のでそちらを使えばすぐに
vagrant init onozatyredmine-32
vagrant up
スクリプトを書いてみる
bull この資料を参考に書いてみる
bull スクリプトのサンプルは下記リポジトリに貯め
ていっているので参考に
bull httpsgithubcomonozatyredmine-view-customize-scripts
bull これからもだんだん増えていく予定
困ったときには
困ったときにはhellip
bull onozaty まで (follow me)
bull 即レスとまでいきませんが毎日確認してます
bull スクリプト例などもつぶやいています
困ったときにはhellip
bull こういうことできませんかといった質問もお
気軽にどうぞ
bull 一応全部答えている(できるものはBlogでも公開)つ
もりですが拾えてなかったらごめんなさい
おわり
注意点
bull View customize pluginでは画面側(JavaScript
CSS)でしかカスタマイズできないため出来ない
こともある
bull 画面にない情報を表示するとか
注意点
bull 画面だけでもいろいろ解決できることがあるが
もしも欲しい機能に特化したプラグインがあるな
らばそちらを使った方が良い
bull 画面側だけの制約が無いのでシンプルな実装になっ
ているはず
bull その機能の検証も十分行われているはず
使い方
インストール
bull Redmineのインストールディレクトリ配下の
pluginsディレクトリに移動してView customize
pluginのリポジトリをclone
clone時のディレクトリ名はview_customizeとしてください
cd varlibredmineplugins
git clone httpsgithubcomonozatyredmine-view-customizegit view_customize
rake redminepluginsmigrate RAILS_ENV=production
インストールしただけではhellip
bull 何も変わらない
bull View customize pluginはRedmineの拡張方法を
提供するだけでどう設定するかはユーザ次第
設定方法
bull 管理 gt View customize で一覧画面へ遷移し
「New view customize」で設定入力画面へ
設定方法
コードを実行するパス(URL)
正規表現で記載
実行するコード
JavaScript または
StyleSheet(CSS)で書く
Redmineの画面で使用されているjQueryも使える(Redmineのバージョンによってライブラリが違うので注意)
プライベートにチェックを入れると作成したユーザのみに有効
実行
bull Pathが一致すると画面にコードが埋め込まれて
実行される
View customizeを触るうえで キーとなる技術
キーとなる技術
bull JavaScript(ブラウザ上で動作するスクリプト言語)
とCSS(ページのデザインを定義する仕組み)で設定
するのでオリジナルのカスタマイズをしたい場
合にはそれらの知識が必要となってくる
bull ただカスタマイズをするにあたってそこまで多く
の知識が求められるわけではないので調べたり見
よう見まねでもどうにかなるはず
bull 実際JavaScriptやCSS知らなかった人でも調べながらで使え
てたりする
jQuery
jQuery
bull JavaScriptライブラリ
bull httpsjquerycom
bull RedmineではjQueryをすべての画面で読み込んで
いるのでView customizeでもjQueryが利用でき
る
jQuery
bull jQueryを使うとクロスブラウザによる違いの煩
わしさを吸収したりDOM操作が簡潔に書けるの
で便利
bull ただ最近のブラウザだと標準で代替するようなメ
ソッドが提供されているのでIE8捨てられるならば
jQuery使うまでもないかも
bull WebにjQueryの情報はあふれているので調べる
のも簡単
CSSセレクタ
CSSセレクタ
bull CSSセレクタとはCSSでスタイルを適用する対象
を示すもの
bull View customizeでも良く使うことになる
bull JavaScriptで指定要素を取得するとき
bull jQueryの$(selector)関数
bull CSSで対象を指定するとき
divheader h1
設定に関するノウハウ
対象画面の指定方法
Path pattern
bull Path patternに一致した画面の場合該当のスクリ
プトが埋め込まれる
bull 正規表現で記載する
URLとPath
bull URLでアプリケーション配下がPath
bull クエリパラメータは含まれない
bull httpexamplecomprojects
-gt prjects
bull httpexamplecomprojectsaissuesset_filter=1
-gt projectsaissues
bull httpexamplecomredmineprojects
ドキュメントルートではなくredmineとしてインストール
-gt prjects
Pathを確認する方法
bull バージョン114からHTMLにPathをコメントと
して埋め込むようになっている
bull ブラウザのソース表示で見ればその画面のPathが
わかる
指定例 (よくつかうもの)
Path pattern 一致する画面
全ての画面
issues$ チケット一覧
issuesnew$ チケットの新規作成画面
issues[0-9]+$ 個々のチケット内容表示画面
issues[0-9]+copy$ チケットのコピーによる作成画面
issuesgantt ガントチャート
projects$ プロジェクト一覧
[]+$ といった文字は正規表現におけるメタ文字(特殊な意味をもった文字)
チケットの入力フォーム
bull チケットの入力フォームはいろいろな画面で存
在するのでPathの指定だけだと面倒
bull issues1 チケット内容表示画面でも編集ボタンでフォームが
bull issuesnew 新規作成
bull issues1copy コピーによる作成画面
bull issuesgantt timesガントチャートなのでこれは一致させたくない
bull issues timesチケット一覧の場合 チケット登録時のValidationエラーの場合
Path pattern + JavaScriptで絞る
bull ldquoissuesrdquo と指定してJavaScript側でチケットの入
力フォームが無かったら処理しないようにする
bull チケットの入力フォームでしか存在しない要素
(issue-form とか)で確認する
bull 指定した要素が無かった場合でも処理がスキップされ
るように書いていればOK
jQueryの$(selector)関数
bull jQueryの$(selector)関数で返却されるjQueryオブジェクト
は一致する要素が無かった場合何も処理されないので
それを使っていれば大丈夫
bull 上記例だと入力フォームが無かった場合on関数でのイベント
登録が行われず何も処理されないことになる
(エラーにもならない)
$(issue-form input[type=submit]) on(click function(event) 送信ボタン押下時に何か処理を行わせる )
プロジェクト毎の指定
bull チケット詳細画面(issues1 など)はプロジェク
トをパスに持たないのでPathだけだとプロジェ
クトを指定できない
bull projectsprj1issues
bull projectsprj1issues1 timesこれはパスとして無効
bull issues1 チケット詳細はプロジェクト関係なく固定パス
body要素に付与されるclass属性で判断
bull body要素のclass属性に project-プロジェクト識別
子 が設定されるのでこれを使ってプロジェクト
を識別する
JavaScriptでプロジェクトを判定
bull jQueryのhasClass()関数で指定のクラス名が存在
するかチェックできる
bull またはclass属性を取り出して比較するなど
if ($(body)hasClass(project-prj1)) プロジェクト識別子がprj1の場合
CSSでプロジェクトを指定
bull CSSのセレクタでbodyのclassを利用するだけ
bodyproject-prj1 top-menu background-color 006400 dark green bodyproject-prj1 header background-color 008000 green
class属性が振られるもの
bull プロジェクト以外にもclass属性が振られるもの
が多々あるので対象画面や対象箇所を限定する
のに使用できる
class属性が振られるもの
bull body要素
bull controller-コントローラ名
bull action-アクション名
bull チケット一覧の各行
bull tracker-トラッカーID
bull status-ステータスID
bull priority-優先度ID
bull created-by-me
class属性が振られるもの
bull 他にもいろいろあるので詳しくは「Redmineの
画面で振られているclass属性について -
EnjoyStudy」にて
bull httpblogenjoyxstudycomentry20141011000000
コード(JavaScript)の書き方
ブラウザの開発者ツールを活用
ブラウザの開発者ツール
bull いきなりView customizeで設定するのではなく
ブラウザの開発者ツールを使いながら作成確認
する
bull DOMインスペクタ
bull コンソール
ブラウザの開発者ツール
bull 開発者ツールはChromeFirefoxIE それぞれ
のブラウザに標準でも入っている
bull Firefoxだと拡張機能のFirebugでもOK
bull 愛用しているので以降のキャプチャはFirebugにて
DOMインスペクタ
bull 選択した要素がHTML上でどういった構造で書か
れているか確認できる
bull ソース表示で見るより簡単
コンソール
bull 表示している画面に対してのJavaScriptの実行を手
軽に試せる
bull 補完も効く(複数行モードの場合はダメ)
コンソール
bull 複数行まとめて実行できるものもあり長めの
コードでも修正実行を繰り返し行える
実際に試してみる
例ヘッダにチケット一覧リンクを追加
bull やること
1 どこに要素を追加すればよいか調べる
2 その要素を起点にリンクを追加するコードを書く
3 うまくいったらView customize で設定
(いったんプライベートで)
4 動作することが確認できたらプライベートを外し
て全体に反映
追加位置を調べる
bull DOMインスペクタで追加したい位置を選択
追加位置を調べる
bull パスを確認
bull id属性がtop-menuとなっているdiv要素配下のul要素の
最後に追加してあげればよさそう
追加位置を調べる
bull コンソールで追加対象の要素を取得してみる
bull divtop-menu gt ul (id属性がtop-menuのdiv要素の子
のul要素) で取れた
リンクを追加するコードを書く
bull 対象のul要素の子要素としてリンクを追加する
コードを実行し思った動作になるまで確認
View customizeで設定
bull 画面の描画完了時にコードを実行する必要がある
(描画完了前だと要素が取得できない)ので
jQueryの$(function)関数を利用
$(function() ロード完了時に呼び出される $(top-menu gt ul) append(ltligtlta href=issuesgt全てのチケットltagtltligt) )
View customizeで設定
bull いったんプライベートで設定し動作を確認する
bull 動作OKでプライベートを外して全体に有効へ
コード(CSS)の書き方
JavaScriptの時と同じ
bull DOMインスペクタで変更したい要素を探す
bull CSSセレクタがどうなりそうかも確認しておく
bull 要素のスタイルを変えて試す
CSSをView customizeに設定
bull Path Patternは絞れるならば絞って問題ないが
CSSセレクタ自体で対象箇所が絞ってかけるので
全画面対象でもほとんど問題なし
bull そのままCSSを書くイメージ
CSSセレクタの書き方
CSSセレクタの確認
bull DOMインスペクタを使うことによってCSSセレ
クタはわかる
CSSセレクタの指定
bull bodyからすべてのパスを書く必要はなくid属性
が付与されているものを起点に考えると良い
bull id属性は一意のものになるので
body divwrapper divwrapper2 divwrapper3 divheader h1
divheader h1
bodyからのフルパス
こっちで十分
良く使うCSSセレクタ
他にもいろいろあるので詳しくない場合には
rdquoCSSセレクタrdquoで一度調べておくと良い
セレクタ名 書式 対象
型セレクタ E E要素
idセレクタ Emyid id名がmyidのE要素
classセレクタ Ewarning class名がwarinigのE要素
子孫セレクタ E F E要素の子孫にあたるF要素
子セレクタ E gt F E要素の子にあたるF要素 (子孫セレクタはE要素の配下ならばどこにあっても良いが子セレクタは1階層下のみが対象)
CSSセレクタで気を付けること
bull 必要のない要素と一致させない
bull 一致してしまう場合には条件をもっときつく
bull 単に要素を指定するのではなく要素+属性で指定す
る(idセレクタclassセレクタなど)
bull 子孫セレクタではなく子セレクタを使うなど
うまく動作しないときの 確認ポイント
Path patternがあっているか
bull 画面のソースを表示してView customizeで指定
したコードが埋め込まれているか確認
bull 埋め込まれていない場合Path patternが間違えている
のでPath patternを見直す
JavaScriptでエラーが発生していないか
bull 開発者ツールでエラーメッセージが出力されて
いないか確認
bull エラーメッセージが出力されていればそれをもとに
JavaScriptを修正
CSSが上書きされていないか
bull 複数のCSSが一致する場合その要素に対してど
のようなスタイルが適用されるかは優先度に
よって決まる
bull 該当の要素を詳細に指定している方が優先される
bull 型セレクタよりidセレクタで指定したものの方が優先
bull セレクタのレベルが同じならば後に書かれたものが
優先される
CSSが上書きされていないか
bull 上にあるほどもの優先度が高い
bull 取り消し線のものは優先度が高いものによって上書きさ
れているもの
チケットの入力フォームがらみは面倒
bull チケットの入力フォームはトラッカーまたはス
テータスが変わるとフォームの再読み込みが行
われる(all_attributes配下が差し替わる)
bull これはトラッカーやステータスによって入力可能な
フィールドや選択肢が変わるため
bull これにより入力フォームの各要素に対する変更(内
容変更やイベントの登録)はリセットされてし
まう
チケット入力フォームに対するイベント
bull 入力フォームが差し替わってもハンドリングでき
るようにする必要がある
bull 考え方としては親の要素に対してイベントを登
録しておいてイベントが発生した際に発生元が
該当のものか判断するようなイメージ
bull jQueryのon関数を使うと簡単に書ける
チケット入力フォームに対するイベント
bull ダメな例
これだと入力フォームが差し替わったタイミングで登録先の要素
(issue_status_id)が別物に変わってしまうのでうまく動かない
bull OKな例
documentに対してイベントハンドラを登録し該当の要素(issue_status_id)
が発生元だったら動作するように書くことによってissue_status_idが差し
替わってもハンドリング可能に
$(issue_status_id) on(change function(e) ステータス変更時に実施したい処理 )
$(document) on(change issue_status_id function(e) ステータス変更時に実施したい処理 )
チケット入力フォームに対する変更
bull 入力フォームが差し替わると変更した内容も元
に戻ってしまうので差し替わったタイミングで
処理する必要がある
bull たとえばカスタムフィールドの値に応じて他のカ
スタムフィールドで選択可能な値を絞る場合など
チケット入力フォームに対する変更
bull 差し替え処理を行っている関数をフックして差
し替え処理の後に処理を差し込む
bull replaceIssueFormWith 関数が差し替え処理を行って
いる関数なのでそこを対象に
関数を別名で退避 var _replaceIssueFormWith = replaceIssueFormWith 関数を中身を変更 退避した処理を呼び出すような関数として作り変える replaceIssueFormWith = function(html) 退避しておいた関数を呼び出し _replaceIssueFormWith(html) ここでフォーム差し替え後に やりたい処理を書く
View customize導入に向けて
試す環境を作る
bull プロジェクトで使っているRedmineにいきなり適
用するのは敷居が高いという場合にはまずは仮
想環境などで試してみる
bull Redmineの各バージョンのVagrant boxを公開している
のでそちらを使えばすぐに
vagrant init onozatyredmine-32
vagrant up
スクリプトを書いてみる
bull この資料を参考に書いてみる
bull スクリプトのサンプルは下記リポジトリに貯め
ていっているので参考に
bull httpsgithubcomonozatyredmine-view-customize-scripts
bull これからもだんだん増えていく予定
困ったときには
困ったときにはhellip
bull onozaty まで (follow me)
bull 即レスとまでいきませんが毎日確認してます
bull スクリプト例などもつぶやいています
困ったときにはhellip
bull こういうことできませんかといった質問もお
気軽にどうぞ
bull 一応全部答えている(できるものはBlogでも公開)つ
もりですが拾えてなかったらごめんなさい
おわり
注意点
bull 画面だけでもいろいろ解決できることがあるが
もしも欲しい機能に特化したプラグインがあるな
らばそちらを使った方が良い
bull 画面側だけの制約が無いのでシンプルな実装になっ
ているはず
bull その機能の検証も十分行われているはず
使い方
インストール
bull Redmineのインストールディレクトリ配下の
pluginsディレクトリに移動してView customize
pluginのリポジトリをclone
clone時のディレクトリ名はview_customizeとしてください
cd varlibredmineplugins
git clone httpsgithubcomonozatyredmine-view-customizegit view_customize
rake redminepluginsmigrate RAILS_ENV=production
インストールしただけではhellip
bull 何も変わらない
bull View customize pluginはRedmineの拡張方法を
提供するだけでどう設定するかはユーザ次第
設定方法
bull 管理 gt View customize で一覧画面へ遷移し
「New view customize」で設定入力画面へ
設定方法
コードを実行するパス(URL)
正規表現で記載
実行するコード
JavaScript または
StyleSheet(CSS)で書く
Redmineの画面で使用されているjQueryも使える(Redmineのバージョンによってライブラリが違うので注意)
プライベートにチェックを入れると作成したユーザのみに有効
実行
bull Pathが一致すると画面にコードが埋め込まれて
実行される
View customizeを触るうえで キーとなる技術
キーとなる技術
bull JavaScript(ブラウザ上で動作するスクリプト言語)
とCSS(ページのデザインを定義する仕組み)で設定
するのでオリジナルのカスタマイズをしたい場
合にはそれらの知識が必要となってくる
bull ただカスタマイズをするにあたってそこまで多く
の知識が求められるわけではないので調べたり見
よう見まねでもどうにかなるはず
bull 実際JavaScriptやCSS知らなかった人でも調べながらで使え
てたりする
jQuery
jQuery
bull JavaScriptライブラリ
bull httpsjquerycom
bull RedmineではjQueryをすべての画面で読み込んで
いるのでView customizeでもjQueryが利用でき
る
jQuery
bull jQueryを使うとクロスブラウザによる違いの煩
わしさを吸収したりDOM操作が簡潔に書けるの
で便利
bull ただ最近のブラウザだと標準で代替するようなメ
ソッドが提供されているのでIE8捨てられるならば
jQuery使うまでもないかも
bull WebにjQueryの情報はあふれているので調べる
のも簡単
CSSセレクタ
CSSセレクタ
bull CSSセレクタとはCSSでスタイルを適用する対象
を示すもの
bull View customizeでも良く使うことになる
bull JavaScriptで指定要素を取得するとき
bull jQueryの$(selector)関数
bull CSSで対象を指定するとき
divheader h1
設定に関するノウハウ
対象画面の指定方法
Path pattern
bull Path patternに一致した画面の場合該当のスクリ
プトが埋め込まれる
bull 正規表現で記載する
URLとPath
bull URLでアプリケーション配下がPath
bull クエリパラメータは含まれない
bull httpexamplecomprojects
-gt prjects
bull httpexamplecomprojectsaissuesset_filter=1
-gt projectsaissues
bull httpexamplecomredmineprojects
ドキュメントルートではなくredmineとしてインストール
-gt prjects
Pathを確認する方法
bull バージョン114からHTMLにPathをコメントと
して埋め込むようになっている
bull ブラウザのソース表示で見ればその画面のPathが
わかる
指定例 (よくつかうもの)
Path pattern 一致する画面
全ての画面
issues$ チケット一覧
issuesnew$ チケットの新規作成画面
issues[0-9]+$ 個々のチケット内容表示画面
issues[0-9]+copy$ チケットのコピーによる作成画面
issuesgantt ガントチャート
projects$ プロジェクト一覧
[]+$ といった文字は正規表現におけるメタ文字(特殊な意味をもった文字)
チケットの入力フォーム
bull チケットの入力フォームはいろいろな画面で存
在するのでPathの指定だけだと面倒
bull issues1 チケット内容表示画面でも編集ボタンでフォームが
bull issuesnew 新規作成
bull issues1copy コピーによる作成画面
bull issuesgantt timesガントチャートなのでこれは一致させたくない
bull issues timesチケット一覧の場合 チケット登録時のValidationエラーの場合
Path pattern + JavaScriptで絞る
bull ldquoissuesrdquo と指定してJavaScript側でチケットの入
力フォームが無かったら処理しないようにする
bull チケットの入力フォームでしか存在しない要素
(issue-form とか)で確認する
bull 指定した要素が無かった場合でも処理がスキップされ
るように書いていればOK
jQueryの$(selector)関数
bull jQueryの$(selector)関数で返却されるjQueryオブジェクト
は一致する要素が無かった場合何も処理されないので
それを使っていれば大丈夫
bull 上記例だと入力フォームが無かった場合on関数でのイベント
登録が行われず何も処理されないことになる
(エラーにもならない)
$(issue-form input[type=submit]) on(click function(event) 送信ボタン押下時に何か処理を行わせる )
プロジェクト毎の指定
bull チケット詳細画面(issues1 など)はプロジェク
トをパスに持たないのでPathだけだとプロジェ
クトを指定できない
bull projectsprj1issues
bull projectsprj1issues1 timesこれはパスとして無効
bull issues1 チケット詳細はプロジェクト関係なく固定パス
body要素に付与されるclass属性で判断
bull body要素のclass属性に project-プロジェクト識別
子 が設定されるのでこれを使ってプロジェクト
を識別する
JavaScriptでプロジェクトを判定
bull jQueryのhasClass()関数で指定のクラス名が存在
するかチェックできる
bull またはclass属性を取り出して比較するなど
if ($(body)hasClass(project-prj1)) プロジェクト識別子がprj1の場合
CSSでプロジェクトを指定
bull CSSのセレクタでbodyのclassを利用するだけ
bodyproject-prj1 top-menu background-color 006400 dark green bodyproject-prj1 header background-color 008000 green
class属性が振られるもの
bull プロジェクト以外にもclass属性が振られるもの
が多々あるので対象画面や対象箇所を限定する
のに使用できる
class属性が振られるもの
bull body要素
bull controller-コントローラ名
bull action-アクション名
bull チケット一覧の各行
bull tracker-トラッカーID
bull status-ステータスID
bull priority-優先度ID
bull created-by-me
class属性が振られるもの
bull 他にもいろいろあるので詳しくは「Redmineの
画面で振られているclass属性について -
EnjoyStudy」にて
bull httpblogenjoyxstudycomentry20141011000000
コード(JavaScript)の書き方
ブラウザの開発者ツールを活用
ブラウザの開発者ツール
bull いきなりView customizeで設定するのではなく
ブラウザの開発者ツールを使いながら作成確認
する
bull DOMインスペクタ
bull コンソール
ブラウザの開発者ツール
bull 開発者ツールはChromeFirefoxIE それぞれ
のブラウザに標準でも入っている
bull Firefoxだと拡張機能のFirebugでもOK
bull 愛用しているので以降のキャプチャはFirebugにて
DOMインスペクタ
bull 選択した要素がHTML上でどういった構造で書か
れているか確認できる
bull ソース表示で見るより簡単
コンソール
bull 表示している画面に対してのJavaScriptの実行を手
軽に試せる
bull 補完も効く(複数行モードの場合はダメ)
コンソール
bull 複数行まとめて実行できるものもあり長めの
コードでも修正実行を繰り返し行える
実際に試してみる
例ヘッダにチケット一覧リンクを追加
bull やること
1 どこに要素を追加すればよいか調べる
2 その要素を起点にリンクを追加するコードを書く
3 うまくいったらView customize で設定
(いったんプライベートで)
4 動作することが確認できたらプライベートを外し
て全体に反映
追加位置を調べる
bull DOMインスペクタで追加したい位置を選択
追加位置を調べる
bull パスを確認
bull id属性がtop-menuとなっているdiv要素配下のul要素の
最後に追加してあげればよさそう
追加位置を調べる
bull コンソールで追加対象の要素を取得してみる
bull divtop-menu gt ul (id属性がtop-menuのdiv要素の子
のul要素) で取れた
リンクを追加するコードを書く
bull 対象のul要素の子要素としてリンクを追加する
コードを実行し思った動作になるまで確認
View customizeで設定
bull 画面の描画完了時にコードを実行する必要がある
(描画完了前だと要素が取得できない)ので
jQueryの$(function)関数を利用
$(function() ロード完了時に呼び出される $(top-menu gt ul) append(ltligtlta href=issuesgt全てのチケットltagtltligt) )
View customizeで設定
bull いったんプライベートで設定し動作を確認する
bull 動作OKでプライベートを外して全体に有効へ
コード(CSS)の書き方
JavaScriptの時と同じ
bull DOMインスペクタで変更したい要素を探す
bull CSSセレクタがどうなりそうかも確認しておく
bull 要素のスタイルを変えて試す
CSSをView customizeに設定
bull Path Patternは絞れるならば絞って問題ないが
CSSセレクタ自体で対象箇所が絞ってかけるので
全画面対象でもほとんど問題なし
bull そのままCSSを書くイメージ
CSSセレクタの書き方
CSSセレクタの確認
bull DOMインスペクタを使うことによってCSSセレ
クタはわかる
CSSセレクタの指定
bull bodyからすべてのパスを書く必要はなくid属性
が付与されているものを起点に考えると良い
bull id属性は一意のものになるので
body divwrapper divwrapper2 divwrapper3 divheader h1
divheader h1
bodyからのフルパス
こっちで十分
良く使うCSSセレクタ
他にもいろいろあるので詳しくない場合には
rdquoCSSセレクタrdquoで一度調べておくと良い
セレクタ名 書式 対象
型セレクタ E E要素
idセレクタ Emyid id名がmyidのE要素
classセレクタ Ewarning class名がwarinigのE要素
子孫セレクタ E F E要素の子孫にあたるF要素
子セレクタ E gt F E要素の子にあたるF要素 (子孫セレクタはE要素の配下ならばどこにあっても良いが子セレクタは1階層下のみが対象)
CSSセレクタで気を付けること
bull 必要のない要素と一致させない
bull 一致してしまう場合には条件をもっときつく
bull 単に要素を指定するのではなく要素+属性で指定す
る(idセレクタclassセレクタなど)
bull 子孫セレクタではなく子セレクタを使うなど
うまく動作しないときの 確認ポイント
Path patternがあっているか
bull 画面のソースを表示してView customizeで指定
したコードが埋め込まれているか確認
bull 埋め込まれていない場合Path patternが間違えている
のでPath patternを見直す
JavaScriptでエラーが発生していないか
bull 開発者ツールでエラーメッセージが出力されて
いないか確認
bull エラーメッセージが出力されていればそれをもとに
JavaScriptを修正
CSSが上書きされていないか
bull 複数のCSSが一致する場合その要素に対してど
のようなスタイルが適用されるかは優先度に
よって決まる
bull 該当の要素を詳細に指定している方が優先される
bull 型セレクタよりidセレクタで指定したものの方が優先
bull セレクタのレベルが同じならば後に書かれたものが
優先される
CSSが上書きされていないか
bull 上にあるほどもの優先度が高い
bull 取り消し線のものは優先度が高いものによって上書きさ
れているもの
チケットの入力フォームがらみは面倒
bull チケットの入力フォームはトラッカーまたはス
テータスが変わるとフォームの再読み込みが行
われる(all_attributes配下が差し替わる)
bull これはトラッカーやステータスによって入力可能な
フィールドや選択肢が変わるため
bull これにより入力フォームの各要素に対する変更(内
容変更やイベントの登録)はリセットされてし
まう
チケット入力フォームに対するイベント
bull 入力フォームが差し替わってもハンドリングでき
るようにする必要がある
bull 考え方としては親の要素に対してイベントを登
録しておいてイベントが発生した際に発生元が
該当のものか判断するようなイメージ
bull jQueryのon関数を使うと簡単に書ける
チケット入力フォームに対するイベント
bull ダメな例
これだと入力フォームが差し替わったタイミングで登録先の要素
(issue_status_id)が別物に変わってしまうのでうまく動かない
bull OKな例
documentに対してイベントハンドラを登録し該当の要素(issue_status_id)
が発生元だったら動作するように書くことによってissue_status_idが差し
替わってもハンドリング可能に
$(issue_status_id) on(change function(e) ステータス変更時に実施したい処理 )
$(document) on(change issue_status_id function(e) ステータス変更時に実施したい処理 )
チケット入力フォームに対する変更
bull 入力フォームが差し替わると変更した内容も元
に戻ってしまうので差し替わったタイミングで
処理する必要がある
bull たとえばカスタムフィールドの値に応じて他のカ
スタムフィールドで選択可能な値を絞る場合など
チケット入力フォームに対する変更
bull 差し替え処理を行っている関数をフックして差
し替え処理の後に処理を差し込む
bull replaceIssueFormWith 関数が差し替え処理を行って
いる関数なのでそこを対象に
関数を別名で退避 var _replaceIssueFormWith = replaceIssueFormWith 関数を中身を変更 退避した処理を呼び出すような関数として作り変える replaceIssueFormWith = function(html) 退避しておいた関数を呼び出し _replaceIssueFormWith(html) ここでフォーム差し替え後に やりたい処理を書く
View customize導入に向けて
試す環境を作る
bull プロジェクトで使っているRedmineにいきなり適
用するのは敷居が高いという場合にはまずは仮
想環境などで試してみる
bull Redmineの各バージョンのVagrant boxを公開している
のでそちらを使えばすぐに
vagrant init onozatyredmine-32
vagrant up
スクリプトを書いてみる
bull この資料を参考に書いてみる
bull スクリプトのサンプルは下記リポジトリに貯め
ていっているので参考に
bull httpsgithubcomonozatyredmine-view-customize-scripts
bull これからもだんだん増えていく予定
困ったときには
困ったときにはhellip
bull onozaty まで (follow me)
bull 即レスとまでいきませんが毎日確認してます
bull スクリプト例などもつぶやいています
困ったときにはhellip
bull こういうことできませんかといった質問もお
気軽にどうぞ
bull 一応全部答えている(できるものはBlogでも公開)つ
もりですが拾えてなかったらごめんなさい
おわり
使い方
インストール
bull Redmineのインストールディレクトリ配下の
pluginsディレクトリに移動してView customize
pluginのリポジトリをclone
clone時のディレクトリ名はview_customizeとしてください
cd varlibredmineplugins
git clone httpsgithubcomonozatyredmine-view-customizegit view_customize
rake redminepluginsmigrate RAILS_ENV=production
インストールしただけではhellip
bull 何も変わらない
bull View customize pluginはRedmineの拡張方法を
提供するだけでどう設定するかはユーザ次第
設定方法
bull 管理 gt View customize で一覧画面へ遷移し
「New view customize」で設定入力画面へ
設定方法
コードを実行するパス(URL)
正規表現で記載
実行するコード
JavaScript または
StyleSheet(CSS)で書く
Redmineの画面で使用されているjQueryも使える(Redmineのバージョンによってライブラリが違うので注意)
プライベートにチェックを入れると作成したユーザのみに有効
実行
bull Pathが一致すると画面にコードが埋め込まれて
実行される
View customizeを触るうえで キーとなる技術
キーとなる技術
bull JavaScript(ブラウザ上で動作するスクリプト言語)
とCSS(ページのデザインを定義する仕組み)で設定
するのでオリジナルのカスタマイズをしたい場
合にはそれらの知識が必要となってくる
bull ただカスタマイズをするにあたってそこまで多く
の知識が求められるわけではないので調べたり見
よう見まねでもどうにかなるはず
bull 実際JavaScriptやCSS知らなかった人でも調べながらで使え
てたりする
jQuery
jQuery
bull JavaScriptライブラリ
bull httpsjquerycom
bull RedmineではjQueryをすべての画面で読み込んで
いるのでView customizeでもjQueryが利用でき
る
jQuery
bull jQueryを使うとクロスブラウザによる違いの煩
わしさを吸収したりDOM操作が簡潔に書けるの
で便利
bull ただ最近のブラウザだと標準で代替するようなメ
ソッドが提供されているのでIE8捨てられるならば
jQuery使うまでもないかも
bull WebにjQueryの情報はあふれているので調べる
のも簡単
CSSセレクタ
CSSセレクタ
bull CSSセレクタとはCSSでスタイルを適用する対象
を示すもの
bull View customizeでも良く使うことになる
bull JavaScriptで指定要素を取得するとき
bull jQueryの$(selector)関数
bull CSSで対象を指定するとき
divheader h1
設定に関するノウハウ
対象画面の指定方法
Path pattern
bull Path patternに一致した画面の場合該当のスクリ
プトが埋め込まれる
bull 正規表現で記載する
URLとPath
bull URLでアプリケーション配下がPath
bull クエリパラメータは含まれない
bull httpexamplecomprojects
-gt prjects
bull httpexamplecomprojectsaissuesset_filter=1
-gt projectsaissues
bull httpexamplecomredmineprojects
ドキュメントルートではなくredmineとしてインストール
-gt prjects
Pathを確認する方法
bull バージョン114からHTMLにPathをコメントと
して埋め込むようになっている
bull ブラウザのソース表示で見ればその画面のPathが
わかる
指定例 (よくつかうもの)
Path pattern 一致する画面
全ての画面
issues$ チケット一覧
issuesnew$ チケットの新規作成画面
issues[0-9]+$ 個々のチケット内容表示画面
issues[0-9]+copy$ チケットのコピーによる作成画面
issuesgantt ガントチャート
projects$ プロジェクト一覧
[]+$ といった文字は正規表現におけるメタ文字(特殊な意味をもった文字)
チケットの入力フォーム
bull チケットの入力フォームはいろいろな画面で存
在するのでPathの指定だけだと面倒
bull issues1 チケット内容表示画面でも編集ボタンでフォームが
bull issuesnew 新規作成
bull issues1copy コピーによる作成画面
bull issuesgantt timesガントチャートなのでこれは一致させたくない
bull issues timesチケット一覧の場合 チケット登録時のValidationエラーの場合
Path pattern + JavaScriptで絞る
bull ldquoissuesrdquo と指定してJavaScript側でチケットの入
力フォームが無かったら処理しないようにする
bull チケットの入力フォームでしか存在しない要素
(issue-form とか)で確認する
bull 指定した要素が無かった場合でも処理がスキップされ
るように書いていればOK
jQueryの$(selector)関数
bull jQueryの$(selector)関数で返却されるjQueryオブジェクト
は一致する要素が無かった場合何も処理されないので
それを使っていれば大丈夫
bull 上記例だと入力フォームが無かった場合on関数でのイベント
登録が行われず何も処理されないことになる
(エラーにもならない)
$(issue-form input[type=submit]) on(click function(event) 送信ボタン押下時に何か処理を行わせる )
プロジェクト毎の指定
bull チケット詳細画面(issues1 など)はプロジェク
トをパスに持たないのでPathだけだとプロジェ
クトを指定できない
bull projectsprj1issues
bull projectsprj1issues1 timesこれはパスとして無効
bull issues1 チケット詳細はプロジェクト関係なく固定パス
body要素に付与されるclass属性で判断
bull body要素のclass属性に project-プロジェクト識別
子 が設定されるのでこれを使ってプロジェクト
を識別する
JavaScriptでプロジェクトを判定
bull jQueryのhasClass()関数で指定のクラス名が存在
するかチェックできる
bull またはclass属性を取り出して比較するなど
if ($(body)hasClass(project-prj1)) プロジェクト識別子がprj1の場合
CSSでプロジェクトを指定
bull CSSのセレクタでbodyのclassを利用するだけ
bodyproject-prj1 top-menu background-color 006400 dark green bodyproject-prj1 header background-color 008000 green
class属性が振られるもの
bull プロジェクト以外にもclass属性が振られるもの
が多々あるので対象画面や対象箇所を限定する
のに使用できる
class属性が振られるもの
bull body要素
bull controller-コントローラ名
bull action-アクション名
bull チケット一覧の各行
bull tracker-トラッカーID
bull status-ステータスID
bull priority-優先度ID
bull created-by-me
class属性が振られるもの
bull 他にもいろいろあるので詳しくは「Redmineの
画面で振られているclass属性について -
EnjoyStudy」にて
bull httpblogenjoyxstudycomentry20141011000000
コード(JavaScript)の書き方
ブラウザの開発者ツールを活用
ブラウザの開発者ツール
bull いきなりView customizeで設定するのではなく
ブラウザの開発者ツールを使いながら作成確認
する
bull DOMインスペクタ
bull コンソール
ブラウザの開発者ツール
bull 開発者ツールはChromeFirefoxIE それぞれ
のブラウザに標準でも入っている
bull Firefoxだと拡張機能のFirebugでもOK
bull 愛用しているので以降のキャプチャはFirebugにて
DOMインスペクタ
bull 選択した要素がHTML上でどういった構造で書か
れているか確認できる
bull ソース表示で見るより簡単
コンソール
bull 表示している画面に対してのJavaScriptの実行を手
軽に試せる
bull 補完も効く(複数行モードの場合はダメ)
コンソール
bull 複数行まとめて実行できるものもあり長めの
コードでも修正実行を繰り返し行える
実際に試してみる
例ヘッダにチケット一覧リンクを追加
bull やること
1 どこに要素を追加すればよいか調べる
2 その要素を起点にリンクを追加するコードを書く
3 うまくいったらView customize で設定
(いったんプライベートで)
4 動作することが確認できたらプライベートを外し
て全体に反映
追加位置を調べる
bull DOMインスペクタで追加したい位置を選択
追加位置を調べる
bull パスを確認
bull id属性がtop-menuとなっているdiv要素配下のul要素の
最後に追加してあげればよさそう
追加位置を調べる
bull コンソールで追加対象の要素を取得してみる
bull divtop-menu gt ul (id属性がtop-menuのdiv要素の子
のul要素) で取れた
リンクを追加するコードを書く
bull 対象のul要素の子要素としてリンクを追加する
コードを実行し思った動作になるまで確認
View customizeで設定
bull 画面の描画完了時にコードを実行する必要がある
(描画完了前だと要素が取得できない)ので
jQueryの$(function)関数を利用
$(function() ロード完了時に呼び出される $(top-menu gt ul) append(ltligtlta href=issuesgt全てのチケットltagtltligt) )
View customizeで設定
bull いったんプライベートで設定し動作を確認する
bull 動作OKでプライベートを外して全体に有効へ
コード(CSS)の書き方
JavaScriptの時と同じ
bull DOMインスペクタで変更したい要素を探す
bull CSSセレクタがどうなりそうかも確認しておく
bull 要素のスタイルを変えて試す
CSSをView customizeに設定
bull Path Patternは絞れるならば絞って問題ないが
CSSセレクタ自体で対象箇所が絞ってかけるので
全画面対象でもほとんど問題なし
bull そのままCSSを書くイメージ
CSSセレクタの書き方
CSSセレクタの確認
bull DOMインスペクタを使うことによってCSSセレ
クタはわかる
CSSセレクタの指定
bull bodyからすべてのパスを書く必要はなくid属性
が付与されているものを起点に考えると良い
bull id属性は一意のものになるので
body divwrapper divwrapper2 divwrapper3 divheader h1
divheader h1
bodyからのフルパス
こっちで十分
良く使うCSSセレクタ
他にもいろいろあるので詳しくない場合には
rdquoCSSセレクタrdquoで一度調べておくと良い
セレクタ名 書式 対象
型セレクタ E E要素
idセレクタ Emyid id名がmyidのE要素
classセレクタ Ewarning class名がwarinigのE要素
子孫セレクタ E F E要素の子孫にあたるF要素
子セレクタ E gt F E要素の子にあたるF要素 (子孫セレクタはE要素の配下ならばどこにあっても良いが子セレクタは1階層下のみが対象)
CSSセレクタで気を付けること
bull 必要のない要素と一致させない
bull 一致してしまう場合には条件をもっときつく
bull 単に要素を指定するのではなく要素+属性で指定す
る(idセレクタclassセレクタなど)
bull 子孫セレクタではなく子セレクタを使うなど
うまく動作しないときの 確認ポイント
Path patternがあっているか
bull 画面のソースを表示してView customizeで指定
したコードが埋め込まれているか確認
bull 埋め込まれていない場合Path patternが間違えている
のでPath patternを見直す
JavaScriptでエラーが発生していないか
bull 開発者ツールでエラーメッセージが出力されて
いないか確認
bull エラーメッセージが出力されていればそれをもとに
JavaScriptを修正
CSSが上書きされていないか
bull 複数のCSSが一致する場合その要素に対してど
のようなスタイルが適用されるかは優先度に
よって決まる
bull 該当の要素を詳細に指定している方が優先される
bull 型セレクタよりidセレクタで指定したものの方が優先
bull セレクタのレベルが同じならば後に書かれたものが
優先される
CSSが上書きされていないか
bull 上にあるほどもの優先度が高い
bull 取り消し線のものは優先度が高いものによって上書きさ
れているもの
チケットの入力フォームがらみは面倒
bull チケットの入力フォームはトラッカーまたはス
テータスが変わるとフォームの再読み込みが行
われる(all_attributes配下が差し替わる)
bull これはトラッカーやステータスによって入力可能な
フィールドや選択肢が変わるため
bull これにより入力フォームの各要素に対する変更(内
容変更やイベントの登録)はリセットされてし
まう
チケット入力フォームに対するイベント
bull 入力フォームが差し替わってもハンドリングでき
るようにする必要がある
bull 考え方としては親の要素に対してイベントを登
録しておいてイベントが発生した際に発生元が
該当のものか判断するようなイメージ
bull jQueryのon関数を使うと簡単に書ける
チケット入力フォームに対するイベント
bull ダメな例
これだと入力フォームが差し替わったタイミングで登録先の要素
(issue_status_id)が別物に変わってしまうのでうまく動かない
bull OKな例
documentに対してイベントハンドラを登録し該当の要素(issue_status_id)
が発生元だったら動作するように書くことによってissue_status_idが差し
替わってもハンドリング可能に
$(issue_status_id) on(change function(e) ステータス変更時に実施したい処理 )
$(document) on(change issue_status_id function(e) ステータス変更時に実施したい処理 )
チケット入力フォームに対する変更
bull 入力フォームが差し替わると変更した内容も元
に戻ってしまうので差し替わったタイミングで
処理する必要がある
bull たとえばカスタムフィールドの値に応じて他のカ
スタムフィールドで選択可能な値を絞る場合など
チケット入力フォームに対する変更
bull 差し替え処理を行っている関数をフックして差
し替え処理の後に処理を差し込む
bull replaceIssueFormWith 関数が差し替え処理を行って
いる関数なのでそこを対象に
関数を別名で退避 var _replaceIssueFormWith = replaceIssueFormWith 関数を中身を変更 退避した処理を呼び出すような関数として作り変える replaceIssueFormWith = function(html) 退避しておいた関数を呼び出し _replaceIssueFormWith(html) ここでフォーム差し替え後に やりたい処理を書く
View customize導入に向けて
試す環境を作る
bull プロジェクトで使っているRedmineにいきなり適
用するのは敷居が高いという場合にはまずは仮
想環境などで試してみる
bull Redmineの各バージョンのVagrant boxを公開している
のでそちらを使えばすぐに
vagrant init onozatyredmine-32
vagrant up
スクリプトを書いてみる
bull この資料を参考に書いてみる
bull スクリプトのサンプルは下記リポジトリに貯め
ていっているので参考に
bull httpsgithubcomonozatyredmine-view-customize-scripts
bull これからもだんだん増えていく予定
困ったときには
困ったときにはhellip
bull onozaty まで (follow me)
bull 即レスとまでいきませんが毎日確認してます
bull スクリプト例などもつぶやいています
困ったときにはhellip
bull こういうことできませんかといった質問もお
気軽にどうぞ
bull 一応全部答えている(できるものはBlogでも公開)つ
もりですが拾えてなかったらごめんなさい
おわり
インストール
bull Redmineのインストールディレクトリ配下の
pluginsディレクトリに移動してView customize
pluginのリポジトリをclone
clone時のディレクトリ名はview_customizeとしてください
cd varlibredmineplugins
git clone httpsgithubcomonozatyredmine-view-customizegit view_customize
rake redminepluginsmigrate RAILS_ENV=production
インストールしただけではhellip
bull 何も変わらない
bull View customize pluginはRedmineの拡張方法を
提供するだけでどう設定するかはユーザ次第
設定方法
bull 管理 gt View customize で一覧画面へ遷移し
「New view customize」で設定入力画面へ
設定方法
コードを実行するパス(URL)
正規表現で記載
実行するコード
JavaScript または
StyleSheet(CSS)で書く
Redmineの画面で使用されているjQueryも使える(Redmineのバージョンによってライブラリが違うので注意)
プライベートにチェックを入れると作成したユーザのみに有効
実行
bull Pathが一致すると画面にコードが埋め込まれて
実行される
View customizeを触るうえで キーとなる技術
キーとなる技術
bull JavaScript(ブラウザ上で動作するスクリプト言語)
とCSS(ページのデザインを定義する仕組み)で設定
するのでオリジナルのカスタマイズをしたい場
合にはそれらの知識が必要となってくる
bull ただカスタマイズをするにあたってそこまで多く
の知識が求められるわけではないので調べたり見
よう見まねでもどうにかなるはず
bull 実際JavaScriptやCSS知らなかった人でも調べながらで使え
てたりする
jQuery
jQuery
bull JavaScriptライブラリ
bull httpsjquerycom
bull RedmineではjQueryをすべての画面で読み込んで
いるのでView customizeでもjQueryが利用でき
る
jQuery
bull jQueryを使うとクロスブラウザによる違いの煩
わしさを吸収したりDOM操作が簡潔に書けるの
で便利
bull ただ最近のブラウザだと標準で代替するようなメ
ソッドが提供されているのでIE8捨てられるならば
jQuery使うまでもないかも
bull WebにjQueryの情報はあふれているので調べる
のも簡単
CSSセレクタ
CSSセレクタ
bull CSSセレクタとはCSSでスタイルを適用する対象
を示すもの
bull View customizeでも良く使うことになる
bull JavaScriptで指定要素を取得するとき
bull jQueryの$(selector)関数
bull CSSで対象を指定するとき
divheader h1
設定に関するノウハウ
対象画面の指定方法
Path pattern
bull Path patternに一致した画面の場合該当のスクリ
プトが埋め込まれる
bull 正規表現で記載する
URLとPath
bull URLでアプリケーション配下がPath
bull クエリパラメータは含まれない
bull httpexamplecomprojects
-gt prjects
bull httpexamplecomprojectsaissuesset_filter=1
-gt projectsaissues
bull httpexamplecomredmineprojects
ドキュメントルートではなくredmineとしてインストール
-gt prjects
Pathを確認する方法
bull バージョン114からHTMLにPathをコメントと
して埋め込むようになっている
bull ブラウザのソース表示で見ればその画面のPathが
わかる
指定例 (よくつかうもの)
Path pattern 一致する画面
全ての画面
issues$ チケット一覧
issuesnew$ チケットの新規作成画面
issues[0-9]+$ 個々のチケット内容表示画面
issues[0-9]+copy$ チケットのコピーによる作成画面
issuesgantt ガントチャート
projects$ プロジェクト一覧
[]+$ といった文字は正規表現におけるメタ文字(特殊な意味をもった文字)
チケットの入力フォーム
bull チケットの入力フォームはいろいろな画面で存
在するのでPathの指定だけだと面倒
bull issues1 チケット内容表示画面でも編集ボタンでフォームが
bull issuesnew 新規作成
bull issues1copy コピーによる作成画面
bull issuesgantt timesガントチャートなのでこれは一致させたくない
bull issues timesチケット一覧の場合 チケット登録時のValidationエラーの場合
Path pattern + JavaScriptで絞る
bull ldquoissuesrdquo と指定してJavaScript側でチケットの入
力フォームが無かったら処理しないようにする
bull チケットの入力フォームでしか存在しない要素
(issue-form とか)で確認する
bull 指定した要素が無かった場合でも処理がスキップされ
るように書いていればOK
jQueryの$(selector)関数
bull jQueryの$(selector)関数で返却されるjQueryオブジェクト
は一致する要素が無かった場合何も処理されないので
それを使っていれば大丈夫
bull 上記例だと入力フォームが無かった場合on関数でのイベント
登録が行われず何も処理されないことになる
(エラーにもならない)
$(issue-form input[type=submit]) on(click function(event) 送信ボタン押下時に何か処理を行わせる )
プロジェクト毎の指定
bull チケット詳細画面(issues1 など)はプロジェク
トをパスに持たないのでPathだけだとプロジェ
クトを指定できない
bull projectsprj1issues
bull projectsprj1issues1 timesこれはパスとして無効
bull issues1 チケット詳細はプロジェクト関係なく固定パス
body要素に付与されるclass属性で判断
bull body要素のclass属性に project-プロジェクト識別
子 が設定されるのでこれを使ってプロジェクト
を識別する
JavaScriptでプロジェクトを判定
bull jQueryのhasClass()関数で指定のクラス名が存在
するかチェックできる
bull またはclass属性を取り出して比較するなど
if ($(body)hasClass(project-prj1)) プロジェクト識別子がprj1の場合
CSSでプロジェクトを指定
bull CSSのセレクタでbodyのclassを利用するだけ
bodyproject-prj1 top-menu background-color 006400 dark green bodyproject-prj1 header background-color 008000 green
class属性が振られるもの
bull プロジェクト以外にもclass属性が振られるもの
が多々あるので対象画面や対象箇所を限定する
のに使用できる
class属性が振られるもの
bull body要素
bull controller-コントローラ名
bull action-アクション名
bull チケット一覧の各行
bull tracker-トラッカーID
bull status-ステータスID
bull priority-優先度ID
bull created-by-me
class属性が振られるもの
bull 他にもいろいろあるので詳しくは「Redmineの
画面で振られているclass属性について -
EnjoyStudy」にて
bull httpblogenjoyxstudycomentry20141011000000
コード(JavaScript)の書き方
ブラウザの開発者ツールを活用
ブラウザの開発者ツール
bull いきなりView customizeで設定するのではなく
ブラウザの開発者ツールを使いながら作成確認
する
bull DOMインスペクタ
bull コンソール
ブラウザの開発者ツール
bull 開発者ツールはChromeFirefoxIE それぞれ
のブラウザに標準でも入っている
bull Firefoxだと拡張機能のFirebugでもOK
bull 愛用しているので以降のキャプチャはFirebugにて
DOMインスペクタ
bull 選択した要素がHTML上でどういった構造で書か
れているか確認できる
bull ソース表示で見るより簡単
コンソール
bull 表示している画面に対してのJavaScriptの実行を手
軽に試せる
bull 補完も効く(複数行モードの場合はダメ)
コンソール
bull 複数行まとめて実行できるものもあり長めの
コードでも修正実行を繰り返し行える
実際に試してみる
例ヘッダにチケット一覧リンクを追加
bull やること
1 どこに要素を追加すればよいか調べる
2 その要素を起点にリンクを追加するコードを書く
3 うまくいったらView customize で設定
(いったんプライベートで)
4 動作することが確認できたらプライベートを外し
て全体に反映
追加位置を調べる
bull DOMインスペクタで追加したい位置を選択
追加位置を調べる
bull パスを確認
bull id属性がtop-menuとなっているdiv要素配下のul要素の
最後に追加してあげればよさそう
追加位置を調べる
bull コンソールで追加対象の要素を取得してみる
bull divtop-menu gt ul (id属性がtop-menuのdiv要素の子
のul要素) で取れた
リンクを追加するコードを書く
bull 対象のul要素の子要素としてリンクを追加する
コードを実行し思った動作になるまで確認
View customizeで設定
bull 画面の描画完了時にコードを実行する必要がある
(描画完了前だと要素が取得できない)ので
jQueryの$(function)関数を利用
$(function() ロード完了時に呼び出される $(top-menu gt ul) append(ltligtlta href=issuesgt全てのチケットltagtltligt) )
View customizeで設定
bull いったんプライベートで設定し動作を確認する
bull 動作OKでプライベートを外して全体に有効へ
コード(CSS)の書き方
JavaScriptの時と同じ
bull DOMインスペクタで変更したい要素を探す
bull CSSセレクタがどうなりそうかも確認しておく
bull 要素のスタイルを変えて試す
CSSをView customizeに設定
bull Path Patternは絞れるならば絞って問題ないが
CSSセレクタ自体で対象箇所が絞ってかけるので
全画面対象でもほとんど問題なし
bull そのままCSSを書くイメージ
CSSセレクタの書き方
CSSセレクタの確認
bull DOMインスペクタを使うことによってCSSセレ
クタはわかる
CSSセレクタの指定
bull bodyからすべてのパスを書く必要はなくid属性
が付与されているものを起点に考えると良い
bull id属性は一意のものになるので
body divwrapper divwrapper2 divwrapper3 divheader h1
divheader h1
bodyからのフルパス
こっちで十分
良く使うCSSセレクタ
他にもいろいろあるので詳しくない場合には
rdquoCSSセレクタrdquoで一度調べておくと良い
セレクタ名 書式 対象
型セレクタ E E要素
idセレクタ Emyid id名がmyidのE要素
classセレクタ Ewarning class名がwarinigのE要素
子孫セレクタ E F E要素の子孫にあたるF要素
子セレクタ E gt F E要素の子にあたるF要素 (子孫セレクタはE要素の配下ならばどこにあっても良いが子セレクタは1階層下のみが対象)
CSSセレクタで気を付けること
bull 必要のない要素と一致させない
bull 一致してしまう場合には条件をもっときつく
bull 単に要素を指定するのではなく要素+属性で指定す
る(idセレクタclassセレクタなど)
bull 子孫セレクタではなく子セレクタを使うなど
うまく動作しないときの 確認ポイント
Path patternがあっているか
bull 画面のソースを表示してView customizeで指定
したコードが埋め込まれているか確認
bull 埋め込まれていない場合Path patternが間違えている
のでPath patternを見直す
JavaScriptでエラーが発生していないか
bull 開発者ツールでエラーメッセージが出力されて
いないか確認
bull エラーメッセージが出力されていればそれをもとに
JavaScriptを修正
CSSが上書きされていないか
bull 複数のCSSが一致する場合その要素に対してど
のようなスタイルが適用されるかは優先度に
よって決まる
bull 該当の要素を詳細に指定している方が優先される
bull 型セレクタよりidセレクタで指定したものの方が優先
bull セレクタのレベルが同じならば後に書かれたものが
優先される
CSSが上書きされていないか
bull 上にあるほどもの優先度が高い
bull 取り消し線のものは優先度が高いものによって上書きさ
れているもの
チケットの入力フォームがらみは面倒
bull チケットの入力フォームはトラッカーまたはス
テータスが変わるとフォームの再読み込みが行
われる(all_attributes配下が差し替わる)
bull これはトラッカーやステータスによって入力可能な
フィールドや選択肢が変わるため
bull これにより入力フォームの各要素に対する変更(内
容変更やイベントの登録)はリセットされてし
まう
チケット入力フォームに対するイベント
bull 入力フォームが差し替わってもハンドリングでき
るようにする必要がある
bull 考え方としては親の要素に対してイベントを登
録しておいてイベントが発生した際に発生元が
該当のものか判断するようなイメージ
bull jQueryのon関数を使うと簡単に書ける
チケット入力フォームに対するイベント
bull ダメな例
これだと入力フォームが差し替わったタイミングで登録先の要素
(issue_status_id)が別物に変わってしまうのでうまく動かない
bull OKな例
documentに対してイベントハンドラを登録し該当の要素(issue_status_id)
が発生元だったら動作するように書くことによってissue_status_idが差し
替わってもハンドリング可能に
$(issue_status_id) on(change function(e) ステータス変更時に実施したい処理 )
$(document) on(change issue_status_id function(e) ステータス変更時に実施したい処理 )
チケット入力フォームに対する変更
bull 入力フォームが差し替わると変更した内容も元
に戻ってしまうので差し替わったタイミングで
処理する必要がある
bull たとえばカスタムフィールドの値に応じて他のカ
スタムフィールドで選択可能な値を絞る場合など
チケット入力フォームに対する変更
bull 差し替え処理を行っている関数をフックして差
し替え処理の後に処理を差し込む
bull replaceIssueFormWith 関数が差し替え処理を行って
いる関数なのでそこを対象に
関数を別名で退避 var _replaceIssueFormWith = replaceIssueFormWith 関数を中身を変更 退避した処理を呼び出すような関数として作り変える replaceIssueFormWith = function(html) 退避しておいた関数を呼び出し _replaceIssueFormWith(html) ここでフォーム差し替え後に やりたい処理を書く
View customize導入に向けて
試す環境を作る
bull プロジェクトで使っているRedmineにいきなり適
用するのは敷居が高いという場合にはまずは仮
想環境などで試してみる
bull Redmineの各バージョンのVagrant boxを公開している
のでそちらを使えばすぐに
vagrant init onozatyredmine-32
vagrant up
スクリプトを書いてみる
bull この資料を参考に書いてみる
bull スクリプトのサンプルは下記リポジトリに貯め
ていっているので参考に
bull httpsgithubcomonozatyredmine-view-customize-scripts
bull これからもだんだん増えていく予定
困ったときには
困ったときにはhellip
bull onozaty まで (follow me)
bull 即レスとまでいきませんが毎日確認してます
bull スクリプト例などもつぶやいています
困ったときにはhellip
bull こういうことできませんかといった質問もお
気軽にどうぞ
bull 一応全部答えている(できるものはBlogでも公開)つ
もりですが拾えてなかったらごめんなさい
おわり
インストールしただけではhellip
bull 何も変わらない
bull View customize pluginはRedmineの拡張方法を
提供するだけでどう設定するかはユーザ次第
設定方法
bull 管理 gt View customize で一覧画面へ遷移し
「New view customize」で設定入力画面へ
設定方法
コードを実行するパス(URL)
正規表現で記載
実行するコード
JavaScript または
StyleSheet(CSS)で書く
Redmineの画面で使用されているjQueryも使える(Redmineのバージョンによってライブラリが違うので注意)
プライベートにチェックを入れると作成したユーザのみに有効
実行
bull Pathが一致すると画面にコードが埋め込まれて
実行される
View customizeを触るうえで キーとなる技術
キーとなる技術
bull JavaScript(ブラウザ上で動作するスクリプト言語)
とCSS(ページのデザインを定義する仕組み)で設定
するのでオリジナルのカスタマイズをしたい場
合にはそれらの知識が必要となってくる
bull ただカスタマイズをするにあたってそこまで多く
の知識が求められるわけではないので調べたり見
よう見まねでもどうにかなるはず
bull 実際JavaScriptやCSS知らなかった人でも調べながらで使え
てたりする
jQuery
jQuery
bull JavaScriptライブラリ
bull httpsjquerycom
bull RedmineではjQueryをすべての画面で読み込んで
いるのでView customizeでもjQueryが利用でき
る
jQuery
bull jQueryを使うとクロスブラウザによる違いの煩
わしさを吸収したりDOM操作が簡潔に書けるの
で便利
bull ただ最近のブラウザだと標準で代替するようなメ
ソッドが提供されているのでIE8捨てられるならば
jQuery使うまでもないかも
bull WebにjQueryの情報はあふれているので調べる
のも簡単
CSSセレクタ
CSSセレクタ
bull CSSセレクタとはCSSでスタイルを適用する対象
を示すもの
bull View customizeでも良く使うことになる
bull JavaScriptで指定要素を取得するとき
bull jQueryの$(selector)関数
bull CSSで対象を指定するとき
divheader h1
設定に関するノウハウ
対象画面の指定方法
Path pattern
bull Path patternに一致した画面の場合該当のスクリ
プトが埋め込まれる
bull 正規表現で記載する
URLとPath
bull URLでアプリケーション配下がPath
bull クエリパラメータは含まれない
bull httpexamplecomprojects
-gt prjects
bull httpexamplecomprojectsaissuesset_filter=1
-gt projectsaissues
bull httpexamplecomredmineprojects
ドキュメントルートではなくredmineとしてインストール
-gt prjects
Pathを確認する方法
bull バージョン114からHTMLにPathをコメントと
して埋め込むようになっている
bull ブラウザのソース表示で見ればその画面のPathが
わかる
指定例 (よくつかうもの)
Path pattern 一致する画面
全ての画面
issues$ チケット一覧
issuesnew$ チケットの新規作成画面
issues[0-9]+$ 個々のチケット内容表示画面
issues[0-9]+copy$ チケットのコピーによる作成画面
issuesgantt ガントチャート
projects$ プロジェクト一覧
[]+$ といった文字は正規表現におけるメタ文字(特殊な意味をもった文字)
チケットの入力フォーム
bull チケットの入力フォームはいろいろな画面で存
在するのでPathの指定だけだと面倒
bull issues1 チケット内容表示画面でも編集ボタンでフォームが
bull issuesnew 新規作成
bull issues1copy コピーによる作成画面
bull issuesgantt timesガントチャートなのでこれは一致させたくない
bull issues timesチケット一覧の場合 チケット登録時のValidationエラーの場合
Path pattern + JavaScriptで絞る
bull ldquoissuesrdquo と指定してJavaScript側でチケットの入
力フォームが無かったら処理しないようにする
bull チケットの入力フォームでしか存在しない要素
(issue-form とか)で確認する
bull 指定した要素が無かった場合でも処理がスキップされ
るように書いていればOK
jQueryの$(selector)関数
bull jQueryの$(selector)関数で返却されるjQueryオブジェクト
は一致する要素が無かった場合何も処理されないので
それを使っていれば大丈夫
bull 上記例だと入力フォームが無かった場合on関数でのイベント
登録が行われず何も処理されないことになる
(エラーにもならない)
$(issue-form input[type=submit]) on(click function(event) 送信ボタン押下時に何か処理を行わせる )
プロジェクト毎の指定
bull チケット詳細画面(issues1 など)はプロジェク
トをパスに持たないのでPathだけだとプロジェ
クトを指定できない
bull projectsprj1issues
bull projectsprj1issues1 timesこれはパスとして無効
bull issues1 チケット詳細はプロジェクト関係なく固定パス
body要素に付与されるclass属性で判断
bull body要素のclass属性に project-プロジェクト識別
子 が設定されるのでこれを使ってプロジェクト
を識別する
JavaScriptでプロジェクトを判定
bull jQueryのhasClass()関数で指定のクラス名が存在
するかチェックできる
bull またはclass属性を取り出して比較するなど
if ($(body)hasClass(project-prj1)) プロジェクト識別子がprj1の場合
CSSでプロジェクトを指定
bull CSSのセレクタでbodyのclassを利用するだけ
bodyproject-prj1 top-menu background-color 006400 dark green bodyproject-prj1 header background-color 008000 green
class属性が振られるもの
bull プロジェクト以外にもclass属性が振られるもの
が多々あるので対象画面や対象箇所を限定する
のに使用できる
class属性が振られるもの
bull body要素
bull controller-コントローラ名
bull action-アクション名
bull チケット一覧の各行
bull tracker-トラッカーID
bull status-ステータスID
bull priority-優先度ID
bull created-by-me
class属性が振られるもの
bull 他にもいろいろあるので詳しくは「Redmineの
画面で振られているclass属性について -
EnjoyStudy」にて
bull httpblogenjoyxstudycomentry20141011000000
コード(JavaScript)の書き方
ブラウザの開発者ツールを活用
ブラウザの開発者ツール
bull いきなりView customizeで設定するのではなく
ブラウザの開発者ツールを使いながら作成確認
する
bull DOMインスペクタ
bull コンソール
ブラウザの開発者ツール
bull 開発者ツールはChromeFirefoxIE それぞれ
のブラウザに標準でも入っている
bull Firefoxだと拡張機能のFirebugでもOK
bull 愛用しているので以降のキャプチャはFirebugにて
DOMインスペクタ
bull 選択した要素がHTML上でどういった構造で書か
れているか確認できる
bull ソース表示で見るより簡単
コンソール
bull 表示している画面に対してのJavaScriptの実行を手
軽に試せる
bull 補完も効く(複数行モードの場合はダメ)
コンソール
bull 複数行まとめて実行できるものもあり長めの
コードでも修正実行を繰り返し行える
実際に試してみる
例ヘッダにチケット一覧リンクを追加
bull やること
1 どこに要素を追加すればよいか調べる
2 その要素を起点にリンクを追加するコードを書く
3 うまくいったらView customize で設定
(いったんプライベートで)
4 動作することが確認できたらプライベートを外し
て全体に反映
追加位置を調べる
bull DOMインスペクタで追加したい位置を選択
追加位置を調べる
bull パスを確認
bull id属性がtop-menuとなっているdiv要素配下のul要素の
最後に追加してあげればよさそう
追加位置を調べる
bull コンソールで追加対象の要素を取得してみる
bull divtop-menu gt ul (id属性がtop-menuのdiv要素の子
のul要素) で取れた
リンクを追加するコードを書く
bull 対象のul要素の子要素としてリンクを追加する
コードを実行し思った動作になるまで確認
View customizeで設定
bull 画面の描画完了時にコードを実行する必要がある
(描画完了前だと要素が取得できない)ので
jQueryの$(function)関数を利用
$(function() ロード完了時に呼び出される $(top-menu gt ul) append(ltligtlta href=issuesgt全てのチケットltagtltligt) )
View customizeで設定
bull いったんプライベートで設定し動作を確認する
bull 動作OKでプライベートを外して全体に有効へ
コード(CSS)の書き方
JavaScriptの時と同じ
bull DOMインスペクタで変更したい要素を探す
bull CSSセレクタがどうなりそうかも確認しておく
bull 要素のスタイルを変えて試す
CSSをView customizeに設定
bull Path Patternは絞れるならば絞って問題ないが
CSSセレクタ自体で対象箇所が絞ってかけるので
全画面対象でもほとんど問題なし
bull そのままCSSを書くイメージ
CSSセレクタの書き方
CSSセレクタの確認
bull DOMインスペクタを使うことによってCSSセレ
クタはわかる
CSSセレクタの指定
bull bodyからすべてのパスを書く必要はなくid属性
が付与されているものを起点に考えると良い
bull id属性は一意のものになるので
body divwrapper divwrapper2 divwrapper3 divheader h1
divheader h1
bodyからのフルパス
こっちで十分
良く使うCSSセレクタ
他にもいろいろあるので詳しくない場合には
rdquoCSSセレクタrdquoで一度調べておくと良い
セレクタ名 書式 対象
型セレクタ E E要素
idセレクタ Emyid id名がmyidのE要素
classセレクタ Ewarning class名がwarinigのE要素
子孫セレクタ E F E要素の子孫にあたるF要素
子セレクタ E gt F E要素の子にあたるF要素 (子孫セレクタはE要素の配下ならばどこにあっても良いが子セレクタは1階層下のみが対象)
CSSセレクタで気を付けること
bull 必要のない要素と一致させない
bull 一致してしまう場合には条件をもっときつく
bull 単に要素を指定するのではなく要素+属性で指定す
る(idセレクタclassセレクタなど)
bull 子孫セレクタではなく子セレクタを使うなど
うまく動作しないときの 確認ポイント
Path patternがあっているか
bull 画面のソースを表示してView customizeで指定
したコードが埋め込まれているか確認
bull 埋め込まれていない場合Path patternが間違えている
のでPath patternを見直す
JavaScriptでエラーが発生していないか
bull 開発者ツールでエラーメッセージが出力されて
いないか確認
bull エラーメッセージが出力されていればそれをもとに
JavaScriptを修正
CSSが上書きされていないか
bull 複数のCSSが一致する場合その要素に対してど
のようなスタイルが適用されるかは優先度に
よって決まる
bull 該当の要素を詳細に指定している方が優先される
bull 型セレクタよりidセレクタで指定したものの方が優先
bull セレクタのレベルが同じならば後に書かれたものが
優先される
CSSが上書きされていないか
bull 上にあるほどもの優先度が高い
bull 取り消し線のものは優先度が高いものによって上書きさ
れているもの
チケットの入力フォームがらみは面倒
bull チケットの入力フォームはトラッカーまたはス
テータスが変わるとフォームの再読み込みが行
われる(all_attributes配下が差し替わる)
bull これはトラッカーやステータスによって入力可能な
フィールドや選択肢が変わるため
bull これにより入力フォームの各要素に対する変更(内
容変更やイベントの登録)はリセットされてし
まう
チケット入力フォームに対するイベント
bull 入力フォームが差し替わってもハンドリングでき
るようにする必要がある
bull 考え方としては親の要素に対してイベントを登
録しておいてイベントが発生した際に発生元が
該当のものか判断するようなイメージ
bull jQueryのon関数を使うと簡単に書ける
チケット入力フォームに対するイベント
bull ダメな例
これだと入力フォームが差し替わったタイミングで登録先の要素
(issue_status_id)が別物に変わってしまうのでうまく動かない
bull OKな例
documentに対してイベントハンドラを登録し該当の要素(issue_status_id)
が発生元だったら動作するように書くことによってissue_status_idが差し
替わってもハンドリング可能に
$(issue_status_id) on(change function(e) ステータス変更時に実施したい処理 )
$(document) on(change issue_status_id function(e) ステータス変更時に実施したい処理 )
チケット入力フォームに対する変更
bull 入力フォームが差し替わると変更した内容も元
に戻ってしまうので差し替わったタイミングで
処理する必要がある
bull たとえばカスタムフィールドの値に応じて他のカ
スタムフィールドで選択可能な値を絞る場合など
チケット入力フォームに対する変更
bull 差し替え処理を行っている関数をフックして差
し替え処理の後に処理を差し込む
bull replaceIssueFormWith 関数が差し替え処理を行って
いる関数なのでそこを対象に
関数を別名で退避 var _replaceIssueFormWith = replaceIssueFormWith 関数を中身を変更 退避した処理を呼び出すような関数として作り変える replaceIssueFormWith = function(html) 退避しておいた関数を呼び出し _replaceIssueFormWith(html) ここでフォーム差し替え後に やりたい処理を書く
View customize導入に向けて
試す環境を作る
bull プロジェクトで使っているRedmineにいきなり適
用するのは敷居が高いという場合にはまずは仮
想環境などで試してみる
bull Redmineの各バージョンのVagrant boxを公開している
のでそちらを使えばすぐに
vagrant init onozatyredmine-32
vagrant up
スクリプトを書いてみる
bull この資料を参考に書いてみる
bull スクリプトのサンプルは下記リポジトリに貯め
ていっているので参考に
bull httpsgithubcomonozatyredmine-view-customize-scripts
bull これからもだんだん増えていく予定
困ったときには
困ったときにはhellip
bull onozaty まで (follow me)
bull 即レスとまでいきませんが毎日確認してます
bull スクリプト例などもつぶやいています
困ったときにはhellip
bull こういうことできませんかといった質問もお
気軽にどうぞ
bull 一応全部答えている(できるものはBlogでも公開)つ
もりですが拾えてなかったらごめんなさい
おわり
設定方法
bull 管理 gt View customize で一覧画面へ遷移し
「New view customize」で設定入力画面へ
設定方法
コードを実行するパス(URL)
正規表現で記載
実行するコード
JavaScript または
StyleSheet(CSS)で書く
Redmineの画面で使用されているjQueryも使える(Redmineのバージョンによってライブラリが違うので注意)
プライベートにチェックを入れると作成したユーザのみに有効
実行
bull Pathが一致すると画面にコードが埋め込まれて
実行される
View customizeを触るうえで キーとなる技術
キーとなる技術
bull JavaScript(ブラウザ上で動作するスクリプト言語)
とCSS(ページのデザインを定義する仕組み)で設定
するのでオリジナルのカスタマイズをしたい場
合にはそれらの知識が必要となってくる
bull ただカスタマイズをするにあたってそこまで多く
の知識が求められるわけではないので調べたり見
よう見まねでもどうにかなるはず
bull 実際JavaScriptやCSS知らなかった人でも調べながらで使え
てたりする
jQuery
jQuery
bull JavaScriptライブラリ
bull httpsjquerycom
bull RedmineではjQueryをすべての画面で読み込んで
いるのでView customizeでもjQueryが利用でき
る
jQuery
bull jQueryを使うとクロスブラウザによる違いの煩
わしさを吸収したりDOM操作が簡潔に書けるの
で便利
bull ただ最近のブラウザだと標準で代替するようなメ
ソッドが提供されているのでIE8捨てられるならば
jQuery使うまでもないかも
bull WebにjQueryの情報はあふれているので調べる
のも簡単
CSSセレクタ
CSSセレクタ
bull CSSセレクタとはCSSでスタイルを適用する対象
を示すもの
bull View customizeでも良く使うことになる
bull JavaScriptで指定要素を取得するとき
bull jQueryの$(selector)関数
bull CSSで対象を指定するとき
divheader h1
設定に関するノウハウ
対象画面の指定方法
Path pattern
bull Path patternに一致した画面の場合該当のスクリ
プトが埋め込まれる
bull 正規表現で記載する
URLとPath
bull URLでアプリケーション配下がPath
bull クエリパラメータは含まれない
bull httpexamplecomprojects
-gt prjects
bull httpexamplecomprojectsaissuesset_filter=1
-gt projectsaissues
bull httpexamplecomredmineprojects
ドキュメントルートではなくredmineとしてインストール
-gt prjects
Pathを確認する方法
bull バージョン114からHTMLにPathをコメントと
して埋め込むようになっている
bull ブラウザのソース表示で見ればその画面のPathが
わかる
指定例 (よくつかうもの)
Path pattern 一致する画面
全ての画面
issues$ チケット一覧
issuesnew$ チケットの新規作成画面
issues[0-9]+$ 個々のチケット内容表示画面
issues[0-9]+copy$ チケットのコピーによる作成画面
issuesgantt ガントチャート
projects$ プロジェクト一覧
[]+$ といった文字は正規表現におけるメタ文字(特殊な意味をもった文字)
チケットの入力フォーム
bull チケットの入力フォームはいろいろな画面で存
在するのでPathの指定だけだと面倒
bull issues1 チケット内容表示画面でも編集ボタンでフォームが
bull issuesnew 新規作成
bull issues1copy コピーによる作成画面
bull issuesgantt timesガントチャートなのでこれは一致させたくない
bull issues timesチケット一覧の場合 チケット登録時のValidationエラーの場合
Path pattern + JavaScriptで絞る
bull ldquoissuesrdquo と指定してJavaScript側でチケットの入
力フォームが無かったら処理しないようにする
bull チケットの入力フォームでしか存在しない要素
(issue-form とか)で確認する
bull 指定した要素が無かった場合でも処理がスキップされ
るように書いていればOK
jQueryの$(selector)関数
bull jQueryの$(selector)関数で返却されるjQueryオブジェクト
は一致する要素が無かった場合何も処理されないので
それを使っていれば大丈夫
bull 上記例だと入力フォームが無かった場合on関数でのイベント
登録が行われず何も処理されないことになる
(エラーにもならない)
$(issue-form input[type=submit]) on(click function(event) 送信ボタン押下時に何か処理を行わせる )
プロジェクト毎の指定
bull チケット詳細画面(issues1 など)はプロジェク
トをパスに持たないのでPathだけだとプロジェ
クトを指定できない
bull projectsprj1issues
bull projectsprj1issues1 timesこれはパスとして無効
bull issues1 チケット詳細はプロジェクト関係なく固定パス
body要素に付与されるclass属性で判断
bull body要素のclass属性に project-プロジェクト識別
子 が設定されるのでこれを使ってプロジェクト
を識別する
JavaScriptでプロジェクトを判定
bull jQueryのhasClass()関数で指定のクラス名が存在
するかチェックできる
bull またはclass属性を取り出して比較するなど
if ($(body)hasClass(project-prj1)) プロジェクト識別子がprj1の場合
CSSでプロジェクトを指定
bull CSSのセレクタでbodyのclassを利用するだけ
bodyproject-prj1 top-menu background-color 006400 dark green bodyproject-prj1 header background-color 008000 green
class属性が振られるもの
bull プロジェクト以外にもclass属性が振られるもの
が多々あるので対象画面や対象箇所を限定する
のに使用できる
class属性が振られるもの
bull body要素
bull controller-コントローラ名
bull action-アクション名
bull チケット一覧の各行
bull tracker-トラッカーID
bull status-ステータスID
bull priority-優先度ID
bull created-by-me
class属性が振られるもの
bull 他にもいろいろあるので詳しくは「Redmineの
画面で振られているclass属性について -
EnjoyStudy」にて
bull httpblogenjoyxstudycomentry20141011000000
コード(JavaScript)の書き方
ブラウザの開発者ツールを活用
ブラウザの開発者ツール
bull いきなりView customizeで設定するのではなく
ブラウザの開発者ツールを使いながら作成確認
する
bull DOMインスペクタ
bull コンソール
ブラウザの開発者ツール
bull 開発者ツールはChromeFirefoxIE それぞれ
のブラウザに標準でも入っている
bull Firefoxだと拡張機能のFirebugでもOK
bull 愛用しているので以降のキャプチャはFirebugにて
DOMインスペクタ
bull 選択した要素がHTML上でどういった構造で書か
れているか確認できる
bull ソース表示で見るより簡単
コンソール
bull 表示している画面に対してのJavaScriptの実行を手
軽に試せる
bull 補完も効く(複数行モードの場合はダメ)
コンソール
bull 複数行まとめて実行できるものもあり長めの
コードでも修正実行を繰り返し行える
実際に試してみる
例ヘッダにチケット一覧リンクを追加
bull やること
1 どこに要素を追加すればよいか調べる
2 その要素を起点にリンクを追加するコードを書く
3 うまくいったらView customize で設定
(いったんプライベートで)
4 動作することが確認できたらプライベートを外し
て全体に反映
追加位置を調べる
bull DOMインスペクタで追加したい位置を選択
追加位置を調べる
bull パスを確認
bull id属性がtop-menuとなっているdiv要素配下のul要素の
最後に追加してあげればよさそう
追加位置を調べる
bull コンソールで追加対象の要素を取得してみる
bull divtop-menu gt ul (id属性がtop-menuのdiv要素の子
のul要素) で取れた
リンクを追加するコードを書く
bull 対象のul要素の子要素としてリンクを追加する
コードを実行し思った動作になるまで確認
View customizeで設定
bull 画面の描画完了時にコードを実行する必要がある
(描画完了前だと要素が取得できない)ので
jQueryの$(function)関数を利用
$(function() ロード完了時に呼び出される $(top-menu gt ul) append(ltligtlta href=issuesgt全てのチケットltagtltligt) )
View customizeで設定
bull いったんプライベートで設定し動作を確認する
bull 動作OKでプライベートを外して全体に有効へ
コード(CSS)の書き方
JavaScriptの時と同じ
bull DOMインスペクタで変更したい要素を探す
bull CSSセレクタがどうなりそうかも確認しておく
bull 要素のスタイルを変えて試す
CSSをView customizeに設定
bull Path Patternは絞れるならば絞って問題ないが
CSSセレクタ自体で対象箇所が絞ってかけるので
全画面対象でもほとんど問題なし
bull そのままCSSを書くイメージ
CSSセレクタの書き方
CSSセレクタの確認
bull DOMインスペクタを使うことによってCSSセレ
クタはわかる
CSSセレクタの指定
bull bodyからすべてのパスを書く必要はなくid属性
が付与されているものを起点に考えると良い
bull id属性は一意のものになるので
body divwrapper divwrapper2 divwrapper3 divheader h1
divheader h1
bodyからのフルパス
こっちで十分
良く使うCSSセレクタ
他にもいろいろあるので詳しくない場合には
rdquoCSSセレクタrdquoで一度調べておくと良い
セレクタ名 書式 対象
型セレクタ E E要素
idセレクタ Emyid id名がmyidのE要素
classセレクタ Ewarning class名がwarinigのE要素
子孫セレクタ E F E要素の子孫にあたるF要素
子セレクタ E gt F E要素の子にあたるF要素 (子孫セレクタはE要素の配下ならばどこにあっても良いが子セレクタは1階層下のみが対象)
CSSセレクタで気を付けること
bull 必要のない要素と一致させない
bull 一致してしまう場合には条件をもっときつく
bull 単に要素を指定するのではなく要素+属性で指定す
る(idセレクタclassセレクタなど)
bull 子孫セレクタではなく子セレクタを使うなど
うまく動作しないときの 確認ポイント
Path patternがあっているか
bull 画面のソースを表示してView customizeで指定
したコードが埋め込まれているか確認
bull 埋め込まれていない場合Path patternが間違えている
のでPath patternを見直す
JavaScriptでエラーが発生していないか
bull 開発者ツールでエラーメッセージが出力されて
いないか確認
bull エラーメッセージが出力されていればそれをもとに
JavaScriptを修正
CSSが上書きされていないか
bull 複数のCSSが一致する場合その要素に対してど
のようなスタイルが適用されるかは優先度に
よって決まる
bull 該当の要素を詳細に指定している方が優先される
bull 型セレクタよりidセレクタで指定したものの方が優先
bull セレクタのレベルが同じならば後に書かれたものが
優先される
CSSが上書きされていないか
bull 上にあるほどもの優先度が高い
bull 取り消し線のものは優先度が高いものによって上書きさ
れているもの
チケットの入力フォームがらみは面倒
bull チケットの入力フォームはトラッカーまたはス
テータスが変わるとフォームの再読み込みが行
われる(all_attributes配下が差し替わる)
bull これはトラッカーやステータスによって入力可能な
フィールドや選択肢が変わるため
bull これにより入力フォームの各要素に対する変更(内
容変更やイベントの登録)はリセットされてし
まう
チケット入力フォームに対するイベント
bull 入力フォームが差し替わってもハンドリングでき
るようにする必要がある
bull 考え方としては親の要素に対してイベントを登
録しておいてイベントが発生した際に発生元が
該当のものか判断するようなイメージ
bull jQueryのon関数を使うと簡単に書ける
チケット入力フォームに対するイベント
bull ダメな例
これだと入力フォームが差し替わったタイミングで登録先の要素
(issue_status_id)が別物に変わってしまうのでうまく動かない
bull OKな例
documentに対してイベントハンドラを登録し該当の要素(issue_status_id)
が発生元だったら動作するように書くことによってissue_status_idが差し
替わってもハンドリング可能に
$(issue_status_id) on(change function(e) ステータス変更時に実施したい処理 )
$(document) on(change issue_status_id function(e) ステータス変更時に実施したい処理 )
チケット入力フォームに対する変更
bull 入力フォームが差し替わると変更した内容も元
に戻ってしまうので差し替わったタイミングで
処理する必要がある
bull たとえばカスタムフィールドの値に応じて他のカ
スタムフィールドで選択可能な値を絞る場合など
チケット入力フォームに対する変更
bull 差し替え処理を行っている関数をフックして差
し替え処理の後に処理を差し込む
bull replaceIssueFormWith 関数が差し替え処理を行って
いる関数なのでそこを対象に
関数を別名で退避 var _replaceIssueFormWith = replaceIssueFormWith 関数を中身を変更 退避した処理を呼び出すような関数として作り変える replaceIssueFormWith = function(html) 退避しておいた関数を呼び出し _replaceIssueFormWith(html) ここでフォーム差し替え後に やりたい処理を書く
View customize導入に向けて
試す環境を作る
bull プロジェクトで使っているRedmineにいきなり適
用するのは敷居が高いという場合にはまずは仮
想環境などで試してみる
bull Redmineの各バージョンのVagrant boxを公開している
のでそちらを使えばすぐに
vagrant init onozatyredmine-32
vagrant up
スクリプトを書いてみる
bull この資料を参考に書いてみる
bull スクリプトのサンプルは下記リポジトリに貯め
ていっているので参考に
bull httpsgithubcomonozatyredmine-view-customize-scripts
bull これからもだんだん増えていく予定
困ったときには
困ったときにはhellip
bull onozaty まで (follow me)
bull 即レスとまでいきませんが毎日確認してます
bull スクリプト例などもつぶやいています
困ったときにはhellip
bull こういうことできませんかといった質問もお
気軽にどうぞ
bull 一応全部答えている(できるものはBlogでも公開)つ
もりですが拾えてなかったらごめんなさい
おわり
設定方法
コードを実行するパス(URL)
正規表現で記載
実行するコード
JavaScript または
StyleSheet(CSS)で書く
Redmineの画面で使用されているjQueryも使える(Redmineのバージョンによってライブラリが違うので注意)
プライベートにチェックを入れると作成したユーザのみに有効
実行
bull Pathが一致すると画面にコードが埋め込まれて
実行される
View customizeを触るうえで キーとなる技術
キーとなる技術
bull JavaScript(ブラウザ上で動作するスクリプト言語)
とCSS(ページのデザインを定義する仕組み)で設定
するのでオリジナルのカスタマイズをしたい場
合にはそれらの知識が必要となってくる
bull ただカスタマイズをするにあたってそこまで多く
の知識が求められるわけではないので調べたり見
よう見まねでもどうにかなるはず
bull 実際JavaScriptやCSS知らなかった人でも調べながらで使え
てたりする
jQuery
jQuery
bull JavaScriptライブラリ
bull httpsjquerycom
bull RedmineではjQueryをすべての画面で読み込んで
いるのでView customizeでもjQueryが利用でき
る
jQuery
bull jQueryを使うとクロスブラウザによる違いの煩
わしさを吸収したりDOM操作が簡潔に書けるの
で便利
bull ただ最近のブラウザだと標準で代替するようなメ
ソッドが提供されているのでIE8捨てられるならば
jQuery使うまでもないかも
bull WebにjQueryの情報はあふれているので調べる
のも簡単
CSSセレクタ
CSSセレクタ
bull CSSセレクタとはCSSでスタイルを適用する対象
を示すもの
bull View customizeでも良く使うことになる
bull JavaScriptで指定要素を取得するとき
bull jQueryの$(selector)関数
bull CSSで対象を指定するとき
divheader h1
設定に関するノウハウ
対象画面の指定方法
Path pattern
bull Path patternに一致した画面の場合該当のスクリ
プトが埋め込まれる
bull 正規表現で記載する
URLとPath
bull URLでアプリケーション配下がPath
bull クエリパラメータは含まれない
bull httpexamplecomprojects
-gt prjects
bull httpexamplecomprojectsaissuesset_filter=1
-gt projectsaissues
bull httpexamplecomredmineprojects
ドキュメントルートではなくredmineとしてインストール
-gt prjects
Pathを確認する方法
bull バージョン114からHTMLにPathをコメントと
して埋め込むようになっている
bull ブラウザのソース表示で見ればその画面のPathが
わかる
指定例 (よくつかうもの)
Path pattern 一致する画面
全ての画面
issues$ チケット一覧
issuesnew$ チケットの新規作成画面
issues[0-9]+$ 個々のチケット内容表示画面
issues[0-9]+copy$ チケットのコピーによる作成画面
issuesgantt ガントチャート
projects$ プロジェクト一覧
[]+$ といった文字は正規表現におけるメタ文字(特殊な意味をもった文字)
チケットの入力フォーム
bull チケットの入力フォームはいろいろな画面で存
在するのでPathの指定だけだと面倒
bull issues1 チケット内容表示画面でも編集ボタンでフォームが
bull issuesnew 新規作成
bull issues1copy コピーによる作成画面
bull issuesgantt timesガントチャートなのでこれは一致させたくない
bull issues timesチケット一覧の場合 チケット登録時のValidationエラーの場合
Path pattern + JavaScriptで絞る
bull ldquoissuesrdquo と指定してJavaScript側でチケットの入
力フォームが無かったら処理しないようにする
bull チケットの入力フォームでしか存在しない要素
(issue-form とか)で確認する
bull 指定した要素が無かった場合でも処理がスキップされ
るように書いていればOK
jQueryの$(selector)関数
bull jQueryの$(selector)関数で返却されるjQueryオブジェクト
は一致する要素が無かった場合何も処理されないので
それを使っていれば大丈夫
bull 上記例だと入力フォームが無かった場合on関数でのイベント
登録が行われず何も処理されないことになる
(エラーにもならない)
$(issue-form input[type=submit]) on(click function(event) 送信ボタン押下時に何か処理を行わせる )
プロジェクト毎の指定
bull チケット詳細画面(issues1 など)はプロジェク
トをパスに持たないのでPathだけだとプロジェ
クトを指定できない
bull projectsprj1issues
bull projectsprj1issues1 timesこれはパスとして無効
bull issues1 チケット詳細はプロジェクト関係なく固定パス
body要素に付与されるclass属性で判断
bull body要素のclass属性に project-プロジェクト識別
子 が設定されるのでこれを使ってプロジェクト
を識別する
JavaScriptでプロジェクトを判定
bull jQueryのhasClass()関数で指定のクラス名が存在
するかチェックできる
bull またはclass属性を取り出して比較するなど
if ($(body)hasClass(project-prj1)) プロジェクト識別子がprj1の場合
CSSでプロジェクトを指定
bull CSSのセレクタでbodyのclassを利用するだけ
bodyproject-prj1 top-menu background-color 006400 dark green bodyproject-prj1 header background-color 008000 green
class属性が振られるもの
bull プロジェクト以外にもclass属性が振られるもの
が多々あるので対象画面や対象箇所を限定する
のに使用できる
class属性が振られるもの
bull body要素
bull controller-コントローラ名
bull action-アクション名
bull チケット一覧の各行
bull tracker-トラッカーID
bull status-ステータスID
bull priority-優先度ID
bull created-by-me
class属性が振られるもの
bull 他にもいろいろあるので詳しくは「Redmineの
画面で振られているclass属性について -
EnjoyStudy」にて
bull httpblogenjoyxstudycomentry20141011000000
コード(JavaScript)の書き方
ブラウザの開発者ツールを活用
ブラウザの開発者ツール
bull いきなりView customizeで設定するのではなく
ブラウザの開発者ツールを使いながら作成確認
する
bull DOMインスペクタ
bull コンソール
ブラウザの開発者ツール
bull 開発者ツールはChromeFirefoxIE それぞれ
のブラウザに標準でも入っている
bull Firefoxだと拡張機能のFirebugでもOK
bull 愛用しているので以降のキャプチャはFirebugにて
DOMインスペクタ
bull 選択した要素がHTML上でどういった構造で書か
れているか確認できる
bull ソース表示で見るより簡単
コンソール
bull 表示している画面に対してのJavaScriptの実行を手
軽に試せる
bull 補完も効く(複数行モードの場合はダメ)
コンソール
bull 複数行まとめて実行できるものもあり長めの
コードでも修正実行を繰り返し行える
実際に試してみる
例ヘッダにチケット一覧リンクを追加
bull やること
1 どこに要素を追加すればよいか調べる
2 その要素を起点にリンクを追加するコードを書く
3 うまくいったらView customize で設定
(いったんプライベートで)
4 動作することが確認できたらプライベートを外し
て全体に反映
追加位置を調べる
bull DOMインスペクタで追加したい位置を選択
追加位置を調べる
bull パスを確認
bull id属性がtop-menuとなっているdiv要素配下のul要素の
最後に追加してあげればよさそう
追加位置を調べる
bull コンソールで追加対象の要素を取得してみる
bull divtop-menu gt ul (id属性がtop-menuのdiv要素の子
のul要素) で取れた
リンクを追加するコードを書く
bull 対象のul要素の子要素としてリンクを追加する
コードを実行し思った動作になるまで確認
View customizeで設定
bull 画面の描画完了時にコードを実行する必要がある
(描画完了前だと要素が取得できない)ので
jQueryの$(function)関数を利用
$(function() ロード完了時に呼び出される $(top-menu gt ul) append(ltligtlta href=issuesgt全てのチケットltagtltligt) )
View customizeで設定
bull いったんプライベートで設定し動作を確認する
bull 動作OKでプライベートを外して全体に有効へ
コード(CSS)の書き方
JavaScriptの時と同じ
bull DOMインスペクタで変更したい要素を探す
bull CSSセレクタがどうなりそうかも確認しておく
bull 要素のスタイルを変えて試す
CSSをView customizeに設定
bull Path Patternは絞れるならば絞って問題ないが
CSSセレクタ自体で対象箇所が絞ってかけるので
全画面対象でもほとんど問題なし
bull そのままCSSを書くイメージ
CSSセレクタの書き方
CSSセレクタの確認
bull DOMインスペクタを使うことによってCSSセレ
クタはわかる
CSSセレクタの指定
bull bodyからすべてのパスを書く必要はなくid属性
が付与されているものを起点に考えると良い
bull id属性は一意のものになるので
body divwrapper divwrapper2 divwrapper3 divheader h1
divheader h1
bodyからのフルパス
こっちで十分
良く使うCSSセレクタ
他にもいろいろあるので詳しくない場合には
rdquoCSSセレクタrdquoで一度調べておくと良い
セレクタ名 書式 対象
型セレクタ E E要素
idセレクタ Emyid id名がmyidのE要素
classセレクタ Ewarning class名がwarinigのE要素
子孫セレクタ E F E要素の子孫にあたるF要素
子セレクタ E gt F E要素の子にあたるF要素 (子孫セレクタはE要素の配下ならばどこにあっても良いが子セレクタは1階層下のみが対象)
CSSセレクタで気を付けること
bull 必要のない要素と一致させない
bull 一致してしまう場合には条件をもっときつく
bull 単に要素を指定するのではなく要素+属性で指定す
る(idセレクタclassセレクタなど)
bull 子孫セレクタではなく子セレクタを使うなど
うまく動作しないときの 確認ポイント
Path patternがあっているか
bull 画面のソースを表示してView customizeで指定
したコードが埋め込まれているか確認
bull 埋め込まれていない場合Path patternが間違えている
のでPath patternを見直す
JavaScriptでエラーが発生していないか
bull 開発者ツールでエラーメッセージが出力されて
いないか確認
bull エラーメッセージが出力されていればそれをもとに
JavaScriptを修正
CSSが上書きされていないか
bull 複数のCSSが一致する場合その要素に対してど
のようなスタイルが適用されるかは優先度に
よって決まる
bull 該当の要素を詳細に指定している方が優先される
bull 型セレクタよりidセレクタで指定したものの方が優先
bull セレクタのレベルが同じならば後に書かれたものが
優先される
CSSが上書きされていないか
bull 上にあるほどもの優先度が高い
bull 取り消し線のものは優先度が高いものによって上書きさ
れているもの
チケットの入力フォームがらみは面倒
bull チケットの入力フォームはトラッカーまたはス
テータスが変わるとフォームの再読み込みが行
われる(all_attributes配下が差し替わる)
bull これはトラッカーやステータスによって入力可能な
フィールドや選択肢が変わるため
bull これにより入力フォームの各要素に対する変更(内
容変更やイベントの登録)はリセットされてし
まう
チケット入力フォームに対するイベント
bull 入力フォームが差し替わってもハンドリングでき
るようにする必要がある
bull 考え方としては親の要素に対してイベントを登
録しておいてイベントが発生した際に発生元が
該当のものか判断するようなイメージ
bull jQueryのon関数を使うと簡単に書ける
チケット入力フォームに対するイベント
bull ダメな例
これだと入力フォームが差し替わったタイミングで登録先の要素
(issue_status_id)が別物に変わってしまうのでうまく動かない
bull OKな例
documentに対してイベントハンドラを登録し該当の要素(issue_status_id)
が発生元だったら動作するように書くことによってissue_status_idが差し
替わってもハンドリング可能に
$(issue_status_id) on(change function(e) ステータス変更時に実施したい処理 )
$(document) on(change issue_status_id function(e) ステータス変更時に実施したい処理 )
チケット入力フォームに対する変更
bull 入力フォームが差し替わると変更した内容も元
に戻ってしまうので差し替わったタイミングで
処理する必要がある
bull たとえばカスタムフィールドの値に応じて他のカ
スタムフィールドで選択可能な値を絞る場合など
チケット入力フォームに対する変更
bull 差し替え処理を行っている関数をフックして差
し替え処理の後に処理を差し込む
bull replaceIssueFormWith 関数が差し替え処理を行って
いる関数なのでそこを対象に
関数を別名で退避 var _replaceIssueFormWith = replaceIssueFormWith 関数を中身を変更 退避した処理を呼び出すような関数として作り変える replaceIssueFormWith = function(html) 退避しておいた関数を呼び出し _replaceIssueFormWith(html) ここでフォーム差し替え後に やりたい処理を書く
View customize導入に向けて
試す環境を作る
bull プロジェクトで使っているRedmineにいきなり適
用するのは敷居が高いという場合にはまずは仮
想環境などで試してみる
bull Redmineの各バージョンのVagrant boxを公開している
のでそちらを使えばすぐに
vagrant init onozatyredmine-32
vagrant up
スクリプトを書いてみる
bull この資料を参考に書いてみる
bull スクリプトのサンプルは下記リポジトリに貯め
ていっているので参考に
bull httpsgithubcomonozatyredmine-view-customize-scripts
bull これからもだんだん増えていく予定
困ったときには
困ったときにはhellip
bull onozaty まで (follow me)
bull 即レスとまでいきませんが毎日確認してます
bull スクリプト例などもつぶやいています
困ったときにはhellip
bull こういうことできませんかといった質問もお
気軽にどうぞ
bull 一応全部答えている(できるものはBlogでも公開)つ
もりですが拾えてなかったらごめんなさい
おわり
実行
bull Pathが一致すると画面にコードが埋め込まれて
実行される
View customizeを触るうえで キーとなる技術
キーとなる技術
bull JavaScript(ブラウザ上で動作するスクリプト言語)
とCSS(ページのデザインを定義する仕組み)で設定
するのでオリジナルのカスタマイズをしたい場
合にはそれらの知識が必要となってくる
bull ただカスタマイズをするにあたってそこまで多く
の知識が求められるわけではないので調べたり見
よう見まねでもどうにかなるはず
bull 実際JavaScriptやCSS知らなかった人でも調べながらで使え
てたりする
jQuery
jQuery
bull JavaScriptライブラリ
bull httpsjquerycom
bull RedmineではjQueryをすべての画面で読み込んで
いるのでView customizeでもjQueryが利用でき
る
jQuery
bull jQueryを使うとクロスブラウザによる違いの煩
わしさを吸収したりDOM操作が簡潔に書けるの
で便利
bull ただ最近のブラウザだと標準で代替するようなメ
ソッドが提供されているのでIE8捨てられるならば
jQuery使うまでもないかも
bull WebにjQueryの情報はあふれているので調べる
のも簡単
CSSセレクタ
CSSセレクタ
bull CSSセレクタとはCSSでスタイルを適用する対象
を示すもの
bull View customizeでも良く使うことになる
bull JavaScriptで指定要素を取得するとき
bull jQueryの$(selector)関数
bull CSSで対象を指定するとき
divheader h1
設定に関するノウハウ
対象画面の指定方法
Path pattern
bull Path patternに一致した画面の場合該当のスクリ
プトが埋め込まれる
bull 正規表現で記載する
URLとPath
bull URLでアプリケーション配下がPath
bull クエリパラメータは含まれない
bull httpexamplecomprojects
-gt prjects
bull httpexamplecomprojectsaissuesset_filter=1
-gt projectsaissues
bull httpexamplecomredmineprojects
ドキュメントルートではなくredmineとしてインストール
-gt prjects
Pathを確認する方法
bull バージョン114からHTMLにPathをコメントと
して埋め込むようになっている
bull ブラウザのソース表示で見ればその画面のPathが
わかる
指定例 (よくつかうもの)
Path pattern 一致する画面
全ての画面
issues$ チケット一覧
issuesnew$ チケットの新規作成画面
issues[0-9]+$ 個々のチケット内容表示画面
issues[0-9]+copy$ チケットのコピーによる作成画面
issuesgantt ガントチャート
projects$ プロジェクト一覧
[]+$ といった文字は正規表現におけるメタ文字(特殊な意味をもった文字)
チケットの入力フォーム
bull チケットの入力フォームはいろいろな画面で存
在するのでPathの指定だけだと面倒
bull issues1 チケット内容表示画面でも編集ボタンでフォームが
bull issuesnew 新規作成
bull issues1copy コピーによる作成画面
bull issuesgantt timesガントチャートなのでこれは一致させたくない
bull issues timesチケット一覧の場合 チケット登録時のValidationエラーの場合
Path pattern + JavaScriptで絞る
bull ldquoissuesrdquo と指定してJavaScript側でチケットの入
力フォームが無かったら処理しないようにする
bull チケットの入力フォームでしか存在しない要素
(issue-form とか)で確認する
bull 指定した要素が無かった場合でも処理がスキップされ
るように書いていればOK
jQueryの$(selector)関数
bull jQueryの$(selector)関数で返却されるjQueryオブジェクト
は一致する要素が無かった場合何も処理されないので
それを使っていれば大丈夫
bull 上記例だと入力フォームが無かった場合on関数でのイベント
登録が行われず何も処理されないことになる
(エラーにもならない)
$(issue-form input[type=submit]) on(click function(event) 送信ボタン押下時に何か処理を行わせる )
プロジェクト毎の指定
bull チケット詳細画面(issues1 など)はプロジェク
トをパスに持たないのでPathだけだとプロジェ
クトを指定できない
bull projectsprj1issues
bull projectsprj1issues1 timesこれはパスとして無効
bull issues1 チケット詳細はプロジェクト関係なく固定パス
body要素に付与されるclass属性で判断
bull body要素のclass属性に project-プロジェクト識別
子 が設定されるのでこれを使ってプロジェクト
を識別する
JavaScriptでプロジェクトを判定
bull jQueryのhasClass()関数で指定のクラス名が存在
するかチェックできる
bull またはclass属性を取り出して比較するなど
if ($(body)hasClass(project-prj1)) プロジェクト識別子がprj1の場合
CSSでプロジェクトを指定
bull CSSのセレクタでbodyのclassを利用するだけ
bodyproject-prj1 top-menu background-color 006400 dark green bodyproject-prj1 header background-color 008000 green
class属性が振られるもの
bull プロジェクト以外にもclass属性が振られるもの
が多々あるので対象画面や対象箇所を限定する
のに使用できる
class属性が振られるもの
bull body要素
bull controller-コントローラ名
bull action-アクション名
bull チケット一覧の各行
bull tracker-トラッカーID
bull status-ステータスID
bull priority-優先度ID
bull created-by-me
class属性が振られるもの
bull 他にもいろいろあるので詳しくは「Redmineの
画面で振られているclass属性について -
EnjoyStudy」にて
bull httpblogenjoyxstudycomentry20141011000000
コード(JavaScript)の書き方
ブラウザの開発者ツールを活用
ブラウザの開発者ツール
bull いきなりView customizeで設定するのではなく
ブラウザの開発者ツールを使いながら作成確認
する
bull DOMインスペクタ
bull コンソール
ブラウザの開発者ツール
bull 開発者ツールはChromeFirefoxIE それぞれ
のブラウザに標準でも入っている
bull Firefoxだと拡張機能のFirebugでもOK
bull 愛用しているので以降のキャプチャはFirebugにて
DOMインスペクタ
bull 選択した要素がHTML上でどういった構造で書か
れているか確認できる
bull ソース表示で見るより簡単
コンソール
bull 表示している画面に対してのJavaScriptの実行を手
軽に試せる
bull 補完も効く(複数行モードの場合はダメ)
コンソール
bull 複数行まとめて実行できるものもあり長めの
コードでも修正実行を繰り返し行える
実際に試してみる
例ヘッダにチケット一覧リンクを追加
bull やること
1 どこに要素を追加すればよいか調べる
2 その要素を起点にリンクを追加するコードを書く
3 うまくいったらView customize で設定
(いったんプライベートで)
4 動作することが確認できたらプライベートを外し
て全体に反映
追加位置を調べる
bull DOMインスペクタで追加したい位置を選択
追加位置を調べる
bull パスを確認
bull id属性がtop-menuとなっているdiv要素配下のul要素の
最後に追加してあげればよさそう
追加位置を調べる
bull コンソールで追加対象の要素を取得してみる
bull divtop-menu gt ul (id属性がtop-menuのdiv要素の子
のul要素) で取れた
リンクを追加するコードを書く
bull 対象のul要素の子要素としてリンクを追加する
コードを実行し思った動作になるまで確認
View customizeで設定
bull 画面の描画完了時にコードを実行する必要がある
(描画完了前だと要素が取得できない)ので
jQueryの$(function)関数を利用
$(function() ロード完了時に呼び出される $(top-menu gt ul) append(ltligtlta href=issuesgt全てのチケットltagtltligt) )
View customizeで設定
bull いったんプライベートで設定し動作を確認する
bull 動作OKでプライベートを外して全体に有効へ
コード(CSS)の書き方
JavaScriptの時と同じ
bull DOMインスペクタで変更したい要素を探す
bull CSSセレクタがどうなりそうかも確認しておく
bull 要素のスタイルを変えて試す
CSSをView customizeに設定
bull Path Patternは絞れるならば絞って問題ないが
CSSセレクタ自体で対象箇所が絞ってかけるので
全画面対象でもほとんど問題なし
bull そのままCSSを書くイメージ
CSSセレクタの書き方
CSSセレクタの確認
bull DOMインスペクタを使うことによってCSSセレ
クタはわかる
CSSセレクタの指定
bull bodyからすべてのパスを書く必要はなくid属性
が付与されているものを起点に考えると良い
bull id属性は一意のものになるので
body divwrapper divwrapper2 divwrapper3 divheader h1
divheader h1
bodyからのフルパス
こっちで十分
良く使うCSSセレクタ
他にもいろいろあるので詳しくない場合には
rdquoCSSセレクタrdquoで一度調べておくと良い
セレクタ名 書式 対象
型セレクタ E E要素
idセレクタ Emyid id名がmyidのE要素
classセレクタ Ewarning class名がwarinigのE要素
子孫セレクタ E F E要素の子孫にあたるF要素
子セレクタ E gt F E要素の子にあたるF要素 (子孫セレクタはE要素の配下ならばどこにあっても良いが子セレクタは1階層下のみが対象)
CSSセレクタで気を付けること
bull 必要のない要素と一致させない
bull 一致してしまう場合には条件をもっときつく
bull 単に要素を指定するのではなく要素+属性で指定す
る(idセレクタclassセレクタなど)
bull 子孫セレクタではなく子セレクタを使うなど
うまく動作しないときの 確認ポイント
Path patternがあっているか
bull 画面のソースを表示してView customizeで指定
したコードが埋め込まれているか確認
bull 埋め込まれていない場合Path patternが間違えている
のでPath patternを見直す
JavaScriptでエラーが発生していないか
bull 開発者ツールでエラーメッセージが出力されて
いないか確認
bull エラーメッセージが出力されていればそれをもとに
JavaScriptを修正
CSSが上書きされていないか
bull 複数のCSSが一致する場合その要素に対してど
のようなスタイルが適用されるかは優先度に
よって決まる
bull 該当の要素を詳細に指定している方が優先される
bull 型セレクタよりidセレクタで指定したものの方が優先
bull セレクタのレベルが同じならば後に書かれたものが
優先される
CSSが上書きされていないか
bull 上にあるほどもの優先度が高い
bull 取り消し線のものは優先度が高いものによって上書きさ
れているもの
チケットの入力フォームがらみは面倒
bull チケットの入力フォームはトラッカーまたはス
テータスが変わるとフォームの再読み込みが行
われる(all_attributes配下が差し替わる)
bull これはトラッカーやステータスによって入力可能な
フィールドや選択肢が変わるため
bull これにより入力フォームの各要素に対する変更(内
容変更やイベントの登録)はリセットされてし
まう
チケット入力フォームに対するイベント
bull 入力フォームが差し替わってもハンドリングでき
るようにする必要がある
bull 考え方としては親の要素に対してイベントを登
録しておいてイベントが発生した際に発生元が
該当のものか判断するようなイメージ
bull jQueryのon関数を使うと簡単に書ける
チケット入力フォームに対するイベント
bull ダメな例
これだと入力フォームが差し替わったタイミングで登録先の要素
(issue_status_id)が別物に変わってしまうのでうまく動かない
bull OKな例
documentに対してイベントハンドラを登録し該当の要素(issue_status_id)
が発生元だったら動作するように書くことによってissue_status_idが差し
替わってもハンドリング可能に
$(issue_status_id) on(change function(e) ステータス変更時に実施したい処理 )
$(document) on(change issue_status_id function(e) ステータス変更時に実施したい処理 )
チケット入力フォームに対する変更
bull 入力フォームが差し替わると変更した内容も元
に戻ってしまうので差し替わったタイミングで
処理する必要がある
bull たとえばカスタムフィールドの値に応じて他のカ
スタムフィールドで選択可能な値を絞る場合など
チケット入力フォームに対する変更
bull 差し替え処理を行っている関数をフックして差
し替え処理の後に処理を差し込む
bull replaceIssueFormWith 関数が差し替え処理を行って
いる関数なのでそこを対象に
関数を別名で退避 var _replaceIssueFormWith = replaceIssueFormWith 関数を中身を変更 退避した処理を呼び出すような関数として作り変える replaceIssueFormWith = function(html) 退避しておいた関数を呼び出し _replaceIssueFormWith(html) ここでフォーム差し替え後に やりたい処理を書く
View customize導入に向けて
試す環境を作る
bull プロジェクトで使っているRedmineにいきなり適
用するのは敷居が高いという場合にはまずは仮
想環境などで試してみる
bull Redmineの各バージョンのVagrant boxを公開している
のでそちらを使えばすぐに
vagrant init onozatyredmine-32
vagrant up
スクリプトを書いてみる
bull この資料を参考に書いてみる
bull スクリプトのサンプルは下記リポジトリに貯め
ていっているので参考に
bull httpsgithubcomonozatyredmine-view-customize-scripts
bull これからもだんだん増えていく予定
困ったときには
困ったときにはhellip
bull onozaty まで (follow me)
bull 即レスとまでいきませんが毎日確認してます
bull スクリプト例などもつぶやいています
困ったときにはhellip
bull こういうことできませんかといった質問もお
気軽にどうぞ
bull 一応全部答えている(できるものはBlogでも公開)つ
もりですが拾えてなかったらごめんなさい
おわり
View customizeを触るうえで キーとなる技術
キーとなる技術
bull JavaScript(ブラウザ上で動作するスクリプト言語)
とCSS(ページのデザインを定義する仕組み)で設定
するのでオリジナルのカスタマイズをしたい場
合にはそれらの知識が必要となってくる
bull ただカスタマイズをするにあたってそこまで多く
の知識が求められるわけではないので調べたり見
よう見まねでもどうにかなるはず
bull 実際JavaScriptやCSS知らなかった人でも調べながらで使え
てたりする
jQuery
jQuery
bull JavaScriptライブラリ
bull httpsjquerycom
bull RedmineではjQueryをすべての画面で読み込んで
いるのでView customizeでもjQueryが利用でき
る
jQuery
bull jQueryを使うとクロスブラウザによる違いの煩
わしさを吸収したりDOM操作が簡潔に書けるの
で便利
bull ただ最近のブラウザだと標準で代替するようなメ
ソッドが提供されているのでIE8捨てられるならば
jQuery使うまでもないかも
bull WebにjQueryの情報はあふれているので調べる
のも簡単
CSSセレクタ
CSSセレクタ
bull CSSセレクタとはCSSでスタイルを適用する対象
を示すもの
bull View customizeでも良く使うことになる
bull JavaScriptで指定要素を取得するとき
bull jQueryの$(selector)関数
bull CSSで対象を指定するとき
divheader h1
設定に関するノウハウ
対象画面の指定方法
Path pattern
bull Path patternに一致した画面の場合該当のスクリ
プトが埋め込まれる
bull 正規表現で記載する
URLとPath
bull URLでアプリケーション配下がPath
bull クエリパラメータは含まれない
bull httpexamplecomprojects
-gt prjects
bull httpexamplecomprojectsaissuesset_filter=1
-gt projectsaissues
bull httpexamplecomredmineprojects
ドキュメントルートではなくredmineとしてインストール
-gt prjects
Pathを確認する方法
bull バージョン114からHTMLにPathをコメントと
して埋め込むようになっている
bull ブラウザのソース表示で見ればその画面のPathが
わかる
指定例 (よくつかうもの)
Path pattern 一致する画面
全ての画面
issues$ チケット一覧
issuesnew$ チケットの新規作成画面
issues[0-9]+$ 個々のチケット内容表示画面
issues[0-9]+copy$ チケットのコピーによる作成画面
issuesgantt ガントチャート
projects$ プロジェクト一覧
[]+$ といった文字は正規表現におけるメタ文字(特殊な意味をもった文字)
チケットの入力フォーム
bull チケットの入力フォームはいろいろな画面で存
在するのでPathの指定だけだと面倒
bull issues1 チケット内容表示画面でも編集ボタンでフォームが
bull issuesnew 新規作成
bull issues1copy コピーによる作成画面
bull issuesgantt timesガントチャートなのでこれは一致させたくない
bull issues timesチケット一覧の場合 チケット登録時のValidationエラーの場合
Path pattern + JavaScriptで絞る
bull ldquoissuesrdquo と指定してJavaScript側でチケットの入
力フォームが無かったら処理しないようにする
bull チケットの入力フォームでしか存在しない要素
(issue-form とか)で確認する
bull 指定した要素が無かった場合でも処理がスキップされ
るように書いていればOK
jQueryの$(selector)関数
bull jQueryの$(selector)関数で返却されるjQueryオブジェクト
は一致する要素が無かった場合何も処理されないので
それを使っていれば大丈夫
bull 上記例だと入力フォームが無かった場合on関数でのイベント
登録が行われず何も処理されないことになる
(エラーにもならない)
$(issue-form input[type=submit]) on(click function(event) 送信ボタン押下時に何か処理を行わせる )
プロジェクト毎の指定
bull チケット詳細画面(issues1 など)はプロジェク
トをパスに持たないのでPathだけだとプロジェ
クトを指定できない
bull projectsprj1issues
bull projectsprj1issues1 timesこれはパスとして無効
bull issues1 チケット詳細はプロジェクト関係なく固定パス
body要素に付与されるclass属性で判断
bull body要素のclass属性に project-プロジェクト識別
子 が設定されるのでこれを使ってプロジェクト
を識別する
JavaScriptでプロジェクトを判定
bull jQueryのhasClass()関数で指定のクラス名が存在
するかチェックできる
bull またはclass属性を取り出して比較するなど
if ($(body)hasClass(project-prj1)) プロジェクト識別子がprj1の場合
CSSでプロジェクトを指定
bull CSSのセレクタでbodyのclassを利用するだけ
bodyproject-prj1 top-menu background-color 006400 dark green bodyproject-prj1 header background-color 008000 green
class属性が振られるもの
bull プロジェクト以外にもclass属性が振られるもの
が多々あるので対象画面や対象箇所を限定する
のに使用できる
class属性が振られるもの
bull body要素
bull controller-コントローラ名
bull action-アクション名
bull チケット一覧の各行
bull tracker-トラッカーID
bull status-ステータスID
bull priority-優先度ID
bull created-by-me
class属性が振られるもの
bull 他にもいろいろあるので詳しくは「Redmineの
画面で振られているclass属性について -
EnjoyStudy」にて
bull httpblogenjoyxstudycomentry20141011000000
コード(JavaScript)の書き方
ブラウザの開発者ツールを活用
ブラウザの開発者ツール
bull いきなりView customizeで設定するのではなく
ブラウザの開発者ツールを使いながら作成確認
する
bull DOMインスペクタ
bull コンソール
ブラウザの開発者ツール
bull 開発者ツールはChromeFirefoxIE それぞれ
のブラウザに標準でも入っている
bull Firefoxだと拡張機能のFirebugでもOK
bull 愛用しているので以降のキャプチャはFirebugにて
DOMインスペクタ
bull 選択した要素がHTML上でどういった構造で書か
れているか確認できる
bull ソース表示で見るより簡単
コンソール
bull 表示している画面に対してのJavaScriptの実行を手
軽に試せる
bull 補完も効く(複数行モードの場合はダメ)
コンソール
bull 複数行まとめて実行できるものもあり長めの
コードでも修正実行を繰り返し行える
実際に試してみる
例ヘッダにチケット一覧リンクを追加
bull やること
1 どこに要素を追加すればよいか調べる
2 その要素を起点にリンクを追加するコードを書く
3 うまくいったらView customize で設定
(いったんプライベートで)
4 動作することが確認できたらプライベートを外し
て全体に反映
追加位置を調べる
bull DOMインスペクタで追加したい位置を選択
追加位置を調べる
bull パスを確認
bull id属性がtop-menuとなっているdiv要素配下のul要素の
最後に追加してあげればよさそう
追加位置を調べる
bull コンソールで追加対象の要素を取得してみる
bull divtop-menu gt ul (id属性がtop-menuのdiv要素の子
のul要素) で取れた
リンクを追加するコードを書く
bull 対象のul要素の子要素としてリンクを追加する
コードを実行し思った動作になるまで確認
View customizeで設定
bull 画面の描画完了時にコードを実行する必要がある
(描画完了前だと要素が取得できない)ので
jQueryの$(function)関数を利用
$(function() ロード完了時に呼び出される $(top-menu gt ul) append(ltligtlta href=issuesgt全てのチケットltagtltligt) )
View customizeで設定
bull いったんプライベートで設定し動作を確認する
bull 動作OKでプライベートを外して全体に有効へ
コード(CSS)の書き方
JavaScriptの時と同じ
bull DOMインスペクタで変更したい要素を探す
bull CSSセレクタがどうなりそうかも確認しておく
bull 要素のスタイルを変えて試す
CSSをView customizeに設定
bull Path Patternは絞れるならば絞って問題ないが
CSSセレクタ自体で対象箇所が絞ってかけるので
全画面対象でもほとんど問題なし
bull そのままCSSを書くイメージ
CSSセレクタの書き方
CSSセレクタの確認
bull DOMインスペクタを使うことによってCSSセレ
クタはわかる
CSSセレクタの指定
bull bodyからすべてのパスを書く必要はなくid属性
が付与されているものを起点に考えると良い
bull id属性は一意のものになるので
body divwrapper divwrapper2 divwrapper3 divheader h1
divheader h1
bodyからのフルパス
こっちで十分
良く使うCSSセレクタ
他にもいろいろあるので詳しくない場合には
rdquoCSSセレクタrdquoで一度調べておくと良い
セレクタ名 書式 対象
型セレクタ E E要素
idセレクタ Emyid id名がmyidのE要素
classセレクタ Ewarning class名がwarinigのE要素
子孫セレクタ E F E要素の子孫にあたるF要素
子セレクタ E gt F E要素の子にあたるF要素 (子孫セレクタはE要素の配下ならばどこにあっても良いが子セレクタは1階層下のみが対象)
CSSセレクタで気を付けること
bull 必要のない要素と一致させない
bull 一致してしまう場合には条件をもっときつく
bull 単に要素を指定するのではなく要素+属性で指定す
る(idセレクタclassセレクタなど)
bull 子孫セレクタではなく子セレクタを使うなど
うまく動作しないときの 確認ポイント
Path patternがあっているか
bull 画面のソースを表示してView customizeで指定
したコードが埋め込まれているか確認
bull 埋め込まれていない場合Path patternが間違えている
のでPath patternを見直す
JavaScriptでエラーが発生していないか
bull 開発者ツールでエラーメッセージが出力されて
いないか確認
bull エラーメッセージが出力されていればそれをもとに
JavaScriptを修正
CSSが上書きされていないか
bull 複数のCSSが一致する場合その要素に対してど
のようなスタイルが適用されるかは優先度に
よって決まる
bull 該当の要素を詳細に指定している方が優先される
bull 型セレクタよりidセレクタで指定したものの方が優先
bull セレクタのレベルが同じならば後に書かれたものが
優先される
CSSが上書きされていないか
bull 上にあるほどもの優先度が高い
bull 取り消し線のものは優先度が高いものによって上書きさ
れているもの
チケットの入力フォームがらみは面倒
bull チケットの入力フォームはトラッカーまたはス
テータスが変わるとフォームの再読み込みが行
われる(all_attributes配下が差し替わる)
bull これはトラッカーやステータスによって入力可能な
フィールドや選択肢が変わるため
bull これにより入力フォームの各要素に対する変更(内
容変更やイベントの登録)はリセットされてし
まう
チケット入力フォームに対するイベント
bull 入力フォームが差し替わってもハンドリングでき
るようにする必要がある
bull 考え方としては親の要素に対してイベントを登
録しておいてイベントが発生した際に発生元が
該当のものか判断するようなイメージ
bull jQueryのon関数を使うと簡単に書ける
チケット入力フォームに対するイベント
bull ダメな例
これだと入力フォームが差し替わったタイミングで登録先の要素
(issue_status_id)が別物に変わってしまうのでうまく動かない
bull OKな例
documentに対してイベントハンドラを登録し該当の要素(issue_status_id)
が発生元だったら動作するように書くことによってissue_status_idが差し
替わってもハンドリング可能に
$(issue_status_id) on(change function(e) ステータス変更時に実施したい処理 )
$(document) on(change issue_status_id function(e) ステータス変更時に実施したい処理 )
チケット入力フォームに対する変更
bull 入力フォームが差し替わると変更した内容も元
に戻ってしまうので差し替わったタイミングで
処理する必要がある
bull たとえばカスタムフィールドの値に応じて他のカ
スタムフィールドで選択可能な値を絞る場合など
チケット入力フォームに対する変更
bull 差し替え処理を行っている関数をフックして差
し替え処理の後に処理を差し込む
bull replaceIssueFormWith 関数が差し替え処理を行って
いる関数なのでそこを対象に
関数を別名で退避 var _replaceIssueFormWith = replaceIssueFormWith 関数を中身を変更 退避した処理を呼び出すような関数として作り変える replaceIssueFormWith = function(html) 退避しておいた関数を呼び出し _replaceIssueFormWith(html) ここでフォーム差し替え後に やりたい処理を書く
View customize導入に向けて
試す環境を作る
bull プロジェクトで使っているRedmineにいきなり適
用するのは敷居が高いという場合にはまずは仮
想環境などで試してみる
bull Redmineの各バージョンのVagrant boxを公開している
のでそちらを使えばすぐに
vagrant init onozatyredmine-32
vagrant up
スクリプトを書いてみる
bull この資料を参考に書いてみる
bull スクリプトのサンプルは下記リポジトリに貯め
ていっているので参考に
bull httpsgithubcomonozatyredmine-view-customize-scripts
bull これからもだんだん増えていく予定
困ったときには
困ったときにはhellip
bull onozaty まで (follow me)
bull 即レスとまでいきませんが毎日確認してます
bull スクリプト例などもつぶやいています
困ったときにはhellip
bull こういうことできませんかといった質問もお
気軽にどうぞ
bull 一応全部答えている(できるものはBlogでも公開)つ
もりですが拾えてなかったらごめんなさい
おわり
キーとなる技術
bull JavaScript(ブラウザ上で動作するスクリプト言語)
とCSS(ページのデザインを定義する仕組み)で設定
するのでオリジナルのカスタマイズをしたい場
合にはそれらの知識が必要となってくる
bull ただカスタマイズをするにあたってそこまで多く
の知識が求められるわけではないので調べたり見
よう見まねでもどうにかなるはず
bull 実際JavaScriptやCSS知らなかった人でも調べながらで使え
てたりする
jQuery
jQuery
bull JavaScriptライブラリ
bull httpsjquerycom
bull RedmineではjQueryをすべての画面で読み込んで
いるのでView customizeでもjQueryが利用でき
る
jQuery
bull jQueryを使うとクロスブラウザによる違いの煩
わしさを吸収したりDOM操作が簡潔に書けるの
で便利
bull ただ最近のブラウザだと標準で代替するようなメ
ソッドが提供されているのでIE8捨てられるならば
jQuery使うまでもないかも
bull WebにjQueryの情報はあふれているので調べる
のも簡単
CSSセレクタ
CSSセレクタ
bull CSSセレクタとはCSSでスタイルを適用する対象
を示すもの
bull View customizeでも良く使うことになる
bull JavaScriptで指定要素を取得するとき
bull jQueryの$(selector)関数
bull CSSで対象を指定するとき
divheader h1
設定に関するノウハウ
対象画面の指定方法
Path pattern
bull Path patternに一致した画面の場合該当のスクリ
プトが埋め込まれる
bull 正規表現で記載する
URLとPath
bull URLでアプリケーション配下がPath
bull クエリパラメータは含まれない
bull httpexamplecomprojects
-gt prjects
bull httpexamplecomprojectsaissuesset_filter=1
-gt projectsaissues
bull httpexamplecomredmineprojects
ドキュメントルートではなくredmineとしてインストール
-gt prjects
Pathを確認する方法
bull バージョン114からHTMLにPathをコメントと
して埋め込むようになっている
bull ブラウザのソース表示で見ればその画面のPathが
わかる
指定例 (よくつかうもの)
Path pattern 一致する画面
全ての画面
issues$ チケット一覧
issuesnew$ チケットの新規作成画面
issues[0-9]+$ 個々のチケット内容表示画面
issues[0-9]+copy$ チケットのコピーによる作成画面
issuesgantt ガントチャート
projects$ プロジェクト一覧
[]+$ といった文字は正規表現におけるメタ文字(特殊な意味をもった文字)
チケットの入力フォーム
bull チケットの入力フォームはいろいろな画面で存
在するのでPathの指定だけだと面倒
bull issues1 チケット内容表示画面でも編集ボタンでフォームが
bull issuesnew 新規作成
bull issues1copy コピーによる作成画面
bull issuesgantt timesガントチャートなのでこれは一致させたくない
bull issues timesチケット一覧の場合 チケット登録時のValidationエラーの場合
Path pattern + JavaScriptで絞る
bull ldquoissuesrdquo と指定してJavaScript側でチケットの入
力フォームが無かったら処理しないようにする
bull チケットの入力フォームでしか存在しない要素
(issue-form とか)で確認する
bull 指定した要素が無かった場合でも処理がスキップされ
るように書いていればOK
jQueryの$(selector)関数
bull jQueryの$(selector)関数で返却されるjQueryオブジェクト
は一致する要素が無かった場合何も処理されないので
それを使っていれば大丈夫
bull 上記例だと入力フォームが無かった場合on関数でのイベント
登録が行われず何も処理されないことになる
(エラーにもならない)
$(issue-form input[type=submit]) on(click function(event) 送信ボタン押下時に何か処理を行わせる )
プロジェクト毎の指定
bull チケット詳細画面(issues1 など)はプロジェク
トをパスに持たないのでPathだけだとプロジェ
クトを指定できない
bull projectsprj1issues
bull projectsprj1issues1 timesこれはパスとして無効
bull issues1 チケット詳細はプロジェクト関係なく固定パス
body要素に付与されるclass属性で判断
bull body要素のclass属性に project-プロジェクト識別
子 が設定されるのでこれを使ってプロジェクト
を識別する
JavaScriptでプロジェクトを判定
bull jQueryのhasClass()関数で指定のクラス名が存在
するかチェックできる
bull またはclass属性を取り出して比較するなど
if ($(body)hasClass(project-prj1)) プロジェクト識別子がprj1の場合
CSSでプロジェクトを指定
bull CSSのセレクタでbodyのclassを利用するだけ
bodyproject-prj1 top-menu background-color 006400 dark green bodyproject-prj1 header background-color 008000 green
class属性が振られるもの
bull プロジェクト以外にもclass属性が振られるもの
が多々あるので対象画面や対象箇所を限定する
のに使用できる
class属性が振られるもの
bull body要素
bull controller-コントローラ名
bull action-アクション名
bull チケット一覧の各行
bull tracker-トラッカーID
bull status-ステータスID
bull priority-優先度ID
bull created-by-me
class属性が振られるもの
bull 他にもいろいろあるので詳しくは「Redmineの
画面で振られているclass属性について -
EnjoyStudy」にて
bull httpblogenjoyxstudycomentry20141011000000
コード(JavaScript)の書き方
ブラウザの開発者ツールを活用
ブラウザの開発者ツール
bull いきなりView customizeで設定するのではなく
ブラウザの開発者ツールを使いながら作成確認
する
bull DOMインスペクタ
bull コンソール
ブラウザの開発者ツール
bull 開発者ツールはChromeFirefoxIE それぞれ
のブラウザに標準でも入っている
bull Firefoxだと拡張機能のFirebugでもOK
bull 愛用しているので以降のキャプチャはFirebugにて
DOMインスペクタ
bull 選択した要素がHTML上でどういった構造で書か
れているか確認できる
bull ソース表示で見るより簡単
コンソール
bull 表示している画面に対してのJavaScriptの実行を手
軽に試せる
bull 補完も効く(複数行モードの場合はダメ)
コンソール
bull 複数行まとめて実行できるものもあり長めの
コードでも修正実行を繰り返し行える
実際に試してみる
例ヘッダにチケット一覧リンクを追加
bull やること
1 どこに要素を追加すればよいか調べる
2 その要素を起点にリンクを追加するコードを書く
3 うまくいったらView customize で設定
(いったんプライベートで)
4 動作することが確認できたらプライベートを外し
て全体に反映
追加位置を調べる
bull DOMインスペクタで追加したい位置を選択
追加位置を調べる
bull パスを確認
bull id属性がtop-menuとなっているdiv要素配下のul要素の
最後に追加してあげればよさそう
追加位置を調べる
bull コンソールで追加対象の要素を取得してみる
bull divtop-menu gt ul (id属性がtop-menuのdiv要素の子
のul要素) で取れた
リンクを追加するコードを書く
bull 対象のul要素の子要素としてリンクを追加する
コードを実行し思った動作になるまで確認
View customizeで設定
bull 画面の描画完了時にコードを実行する必要がある
(描画完了前だと要素が取得できない)ので
jQueryの$(function)関数を利用
$(function() ロード完了時に呼び出される $(top-menu gt ul) append(ltligtlta href=issuesgt全てのチケットltagtltligt) )
View customizeで設定
bull いったんプライベートで設定し動作を確認する
bull 動作OKでプライベートを外して全体に有効へ
コード(CSS)の書き方
JavaScriptの時と同じ
bull DOMインスペクタで変更したい要素を探す
bull CSSセレクタがどうなりそうかも確認しておく
bull 要素のスタイルを変えて試す
CSSをView customizeに設定
bull Path Patternは絞れるならば絞って問題ないが
CSSセレクタ自体で対象箇所が絞ってかけるので
全画面対象でもほとんど問題なし
bull そのままCSSを書くイメージ
CSSセレクタの書き方
CSSセレクタの確認
bull DOMインスペクタを使うことによってCSSセレ
クタはわかる
CSSセレクタの指定
bull bodyからすべてのパスを書く必要はなくid属性
が付与されているものを起点に考えると良い
bull id属性は一意のものになるので
body divwrapper divwrapper2 divwrapper3 divheader h1
divheader h1
bodyからのフルパス
こっちで十分
良く使うCSSセレクタ
他にもいろいろあるので詳しくない場合には
rdquoCSSセレクタrdquoで一度調べておくと良い
セレクタ名 書式 対象
型セレクタ E E要素
idセレクタ Emyid id名がmyidのE要素
classセレクタ Ewarning class名がwarinigのE要素
子孫セレクタ E F E要素の子孫にあたるF要素
子セレクタ E gt F E要素の子にあたるF要素 (子孫セレクタはE要素の配下ならばどこにあっても良いが子セレクタは1階層下のみが対象)
CSSセレクタで気を付けること
bull 必要のない要素と一致させない
bull 一致してしまう場合には条件をもっときつく
bull 単に要素を指定するのではなく要素+属性で指定す
る(idセレクタclassセレクタなど)
bull 子孫セレクタではなく子セレクタを使うなど
うまく動作しないときの 確認ポイント
Path patternがあっているか
bull 画面のソースを表示してView customizeで指定
したコードが埋め込まれているか確認
bull 埋め込まれていない場合Path patternが間違えている
のでPath patternを見直す
JavaScriptでエラーが発生していないか
bull 開発者ツールでエラーメッセージが出力されて
いないか確認
bull エラーメッセージが出力されていればそれをもとに
JavaScriptを修正
CSSが上書きされていないか
bull 複数のCSSが一致する場合その要素に対してど
のようなスタイルが適用されるかは優先度に
よって決まる
bull 該当の要素を詳細に指定している方が優先される
bull 型セレクタよりidセレクタで指定したものの方が優先
bull セレクタのレベルが同じならば後に書かれたものが
優先される
CSSが上書きされていないか
bull 上にあるほどもの優先度が高い
bull 取り消し線のものは優先度が高いものによって上書きさ
れているもの
チケットの入力フォームがらみは面倒
bull チケットの入力フォームはトラッカーまたはス
テータスが変わるとフォームの再読み込みが行
われる(all_attributes配下が差し替わる)
bull これはトラッカーやステータスによって入力可能な
フィールドや選択肢が変わるため
bull これにより入力フォームの各要素に対する変更(内
容変更やイベントの登録)はリセットされてし
まう
チケット入力フォームに対するイベント
bull 入力フォームが差し替わってもハンドリングでき
るようにする必要がある
bull 考え方としては親の要素に対してイベントを登
録しておいてイベントが発生した際に発生元が
該当のものか判断するようなイメージ
bull jQueryのon関数を使うと簡単に書ける
チケット入力フォームに対するイベント
bull ダメな例
これだと入力フォームが差し替わったタイミングで登録先の要素
(issue_status_id)が別物に変わってしまうのでうまく動かない
bull OKな例
documentに対してイベントハンドラを登録し該当の要素(issue_status_id)
が発生元だったら動作するように書くことによってissue_status_idが差し
替わってもハンドリング可能に
$(issue_status_id) on(change function(e) ステータス変更時に実施したい処理 )
$(document) on(change issue_status_id function(e) ステータス変更時に実施したい処理 )
チケット入力フォームに対する変更
bull 入力フォームが差し替わると変更した内容も元
に戻ってしまうので差し替わったタイミングで
処理する必要がある
bull たとえばカスタムフィールドの値に応じて他のカ
スタムフィールドで選択可能な値を絞る場合など
チケット入力フォームに対する変更
bull 差し替え処理を行っている関数をフックして差
し替え処理の後に処理を差し込む
bull replaceIssueFormWith 関数が差し替え処理を行って
いる関数なのでそこを対象に
関数を別名で退避 var _replaceIssueFormWith = replaceIssueFormWith 関数を中身を変更 退避した処理を呼び出すような関数として作り変える replaceIssueFormWith = function(html) 退避しておいた関数を呼び出し _replaceIssueFormWith(html) ここでフォーム差し替え後に やりたい処理を書く
View customize導入に向けて
試す環境を作る
bull プロジェクトで使っているRedmineにいきなり適
用するのは敷居が高いという場合にはまずは仮
想環境などで試してみる
bull Redmineの各バージョンのVagrant boxを公開している
のでそちらを使えばすぐに
vagrant init onozatyredmine-32
vagrant up
スクリプトを書いてみる
bull この資料を参考に書いてみる
bull スクリプトのサンプルは下記リポジトリに貯め
ていっているので参考に
bull httpsgithubcomonozatyredmine-view-customize-scripts
bull これからもだんだん増えていく予定
困ったときには
困ったときにはhellip
bull onozaty まで (follow me)
bull 即レスとまでいきませんが毎日確認してます
bull スクリプト例などもつぶやいています
困ったときにはhellip
bull こういうことできませんかといった質問もお
気軽にどうぞ
bull 一応全部答えている(できるものはBlogでも公開)つ
もりですが拾えてなかったらごめんなさい
おわり
jQuery
jQuery
bull JavaScriptライブラリ
bull httpsjquerycom
bull RedmineではjQueryをすべての画面で読み込んで
いるのでView customizeでもjQueryが利用でき
る
jQuery
bull jQueryを使うとクロスブラウザによる違いの煩
わしさを吸収したりDOM操作が簡潔に書けるの
で便利
bull ただ最近のブラウザだと標準で代替するようなメ
ソッドが提供されているのでIE8捨てられるならば
jQuery使うまでもないかも
bull WebにjQueryの情報はあふれているので調べる
のも簡単
CSSセレクタ
CSSセレクタ
bull CSSセレクタとはCSSでスタイルを適用する対象
を示すもの
bull View customizeでも良く使うことになる
bull JavaScriptで指定要素を取得するとき
bull jQueryの$(selector)関数
bull CSSで対象を指定するとき
divheader h1
設定に関するノウハウ
対象画面の指定方法
Path pattern
bull Path patternに一致した画面の場合該当のスクリ
プトが埋め込まれる
bull 正規表現で記載する
URLとPath
bull URLでアプリケーション配下がPath
bull クエリパラメータは含まれない
bull httpexamplecomprojects
-gt prjects
bull httpexamplecomprojectsaissuesset_filter=1
-gt projectsaissues
bull httpexamplecomredmineprojects
ドキュメントルートではなくredmineとしてインストール
-gt prjects
Pathを確認する方法
bull バージョン114からHTMLにPathをコメントと
して埋め込むようになっている
bull ブラウザのソース表示で見ればその画面のPathが
わかる
指定例 (よくつかうもの)
Path pattern 一致する画面
全ての画面
issues$ チケット一覧
issuesnew$ チケットの新規作成画面
issues[0-9]+$ 個々のチケット内容表示画面
issues[0-9]+copy$ チケットのコピーによる作成画面
issuesgantt ガントチャート
projects$ プロジェクト一覧
[]+$ といった文字は正規表現におけるメタ文字(特殊な意味をもった文字)
チケットの入力フォーム
bull チケットの入力フォームはいろいろな画面で存
在するのでPathの指定だけだと面倒
bull issues1 チケット内容表示画面でも編集ボタンでフォームが
bull issuesnew 新規作成
bull issues1copy コピーによる作成画面
bull issuesgantt timesガントチャートなのでこれは一致させたくない
bull issues timesチケット一覧の場合 チケット登録時のValidationエラーの場合
Path pattern + JavaScriptで絞る
bull ldquoissuesrdquo と指定してJavaScript側でチケットの入
力フォームが無かったら処理しないようにする
bull チケットの入力フォームでしか存在しない要素
(issue-form とか)で確認する
bull 指定した要素が無かった場合でも処理がスキップされ
るように書いていればOK
jQueryの$(selector)関数
bull jQueryの$(selector)関数で返却されるjQueryオブジェクト
は一致する要素が無かった場合何も処理されないので
それを使っていれば大丈夫
bull 上記例だと入力フォームが無かった場合on関数でのイベント
登録が行われず何も処理されないことになる
(エラーにもならない)
$(issue-form input[type=submit]) on(click function(event) 送信ボタン押下時に何か処理を行わせる )
プロジェクト毎の指定
bull チケット詳細画面(issues1 など)はプロジェク
トをパスに持たないのでPathだけだとプロジェ
クトを指定できない
bull projectsprj1issues
bull projectsprj1issues1 timesこれはパスとして無効
bull issues1 チケット詳細はプロジェクト関係なく固定パス
body要素に付与されるclass属性で判断
bull body要素のclass属性に project-プロジェクト識別
子 が設定されるのでこれを使ってプロジェクト
を識別する
JavaScriptでプロジェクトを判定
bull jQueryのhasClass()関数で指定のクラス名が存在
するかチェックできる
bull またはclass属性を取り出して比較するなど
if ($(body)hasClass(project-prj1)) プロジェクト識別子がprj1の場合
CSSでプロジェクトを指定
bull CSSのセレクタでbodyのclassを利用するだけ
bodyproject-prj1 top-menu background-color 006400 dark green bodyproject-prj1 header background-color 008000 green
class属性が振られるもの
bull プロジェクト以外にもclass属性が振られるもの
が多々あるので対象画面や対象箇所を限定する
のに使用できる
class属性が振られるもの
bull body要素
bull controller-コントローラ名
bull action-アクション名
bull チケット一覧の各行
bull tracker-トラッカーID
bull status-ステータスID
bull priority-優先度ID
bull created-by-me
class属性が振られるもの
bull 他にもいろいろあるので詳しくは「Redmineの
画面で振られているclass属性について -
EnjoyStudy」にて
bull httpblogenjoyxstudycomentry20141011000000
コード(JavaScript)の書き方
ブラウザの開発者ツールを活用
ブラウザの開発者ツール
bull いきなりView customizeで設定するのではなく
ブラウザの開発者ツールを使いながら作成確認
する
bull DOMインスペクタ
bull コンソール
ブラウザの開発者ツール
bull 開発者ツールはChromeFirefoxIE それぞれ
のブラウザに標準でも入っている
bull Firefoxだと拡張機能のFirebugでもOK
bull 愛用しているので以降のキャプチャはFirebugにて
DOMインスペクタ
bull 選択した要素がHTML上でどういった構造で書か
れているか確認できる
bull ソース表示で見るより簡単
コンソール
bull 表示している画面に対してのJavaScriptの実行を手
軽に試せる
bull 補完も効く(複数行モードの場合はダメ)
コンソール
bull 複数行まとめて実行できるものもあり長めの
コードでも修正実行を繰り返し行える
実際に試してみる
例ヘッダにチケット一覧リンクを追加
bull やること
1 どこに要素を追加すればよいか調べる
2 その要素を起点にリンクを追加するコードを書く
3 うまくいったらView customize で設定
(いったんプライベートで)
4 動作することが確認できたらプライベートを外し
て全体に反映
追加位置を調べる
bull DOMインスペクタで追加したい位置を選択
追加位置を調べる
bull パスを確認
bull id属性がtop-menuとなっているdiv要素配下のul要素の
最後に追加してあげればよさそう
追加位置を調べる
bull コンソールで追加対象の要素を取得してみる
bull divtop-menu gt ul (id属性がtop-menuのdiv要素の子
のul要素) で取れた
リンクを追加するコードを書く
bull 対象のul要素の子要素としてリンクを追加する
コードを実行し思った動作になるまで確認
View customizeで設定
bull 画面の描画完了時にコードを実行する必要がある
(描画完了前だと要素が取得できない)ので
jQueryの$(function)関数を利用
$(function() ロード完了時に呼び出される $(top-menu gt ul) append(ltligtlta href=issuesgt全てのチケットltagtltligt) )
View customizeで設定
bull いったんプライベートで設定し動作を確認する
bull 動作OKでプライベートを外して全体に有効へ
コード(CSS)の書き方
JavaScriptの時と同じ
bull DOMインスペクタで変更したい要素を探す
bull CSSセレクタがどうなりそうかも確認しておく
bull 要素のスタイルを変えて試す
CSSをView customizeに設定
bull Path Patternは絞れるならば絞って問題ないが
CSSセレクタ自体で対象箇所が絞ってかけるので
全画面対象でもほとんど問題なし
bull そのままCSSを書くイメージ
CSSセレクタの書き方
CSSセレクタの確認
bull DOMインスペクタを使うことによってCSSセレ
クタはわかる
CSSセレクタの指定
bull bodyからすべてのパスを書く必要はなくid属性
が付与されているものを起点に考えると良い
bull id属性は一意のものになるので
body divwrapper divwrapper2 divwrapper3 divheader h1
divheader h1
bodyからのフルパス
こっちで十分
良く使うCSSセレクタ
他にもいろいろあるので詳しくない場合には
rdquoCSSセレクタrdquoで一度調べておくと良い
セレクタ名 書式 対象
型セレクタ E E要素
idセレクタ Emyid id名がmyidのE要素
classセレクタ Ewarning class名がwarinigのE要素
子孫セレクタ E F E要素の子孫にあたるF要素
子セレクタ E gt F E要素の子にあたるF要素 (子孫セレクタはE要素の配下ならばどこにあっても良いが子セレクタは1階層下のみが対象)
CSSセレクタで気を付けること
bull 必要のない要素と一致させない
bull 一致してしまう場合には条件をもっときつく
bull 単に要素を指定するのではなく要素+属性で指定す
る(idセレクタclassセレクタなど)
bull 子孫セレクタではなく子セレクタを使うなど
うまく動作しないときの 確認ポイント
Path patternがあっているか
bull 画面のソースを表示してView customizeで指定
したコードが埋め込まれているか確認
bull 埋め込まれていない場合Path patternが間違えている
のでPath patternを見直す
JavaScriptでエラーが発生していないか
bull 開発者ツールでエラーメッセージが出力されて
いないか確認
bull エラーメッセージが出力されていればそれをもとに
JavaScriptを修正
CSSが上書きされていないか
bull 複数のCSSが一致する場合その要素に対してど
のようなスタイルが適用されるかは優先度に
よって決まる
bull 該当の要素を詳細に指定している方が優先される
bull 型セレクタよりidセレクタで指定したものの方が優先
bull セレクタのレベルが同じならば後に書かれたものが
優先される
CSSが上書きされていないか
bull 上にあるほどもの優先度が高い
bull 取り消し線のものは優先度が高いものによって上書きさ
れているもの
チケットの入力フォームがらみは面倒
bull チケットの入力フォームはトラッカーまたはス
テータスが変わるとフォームの再読み込みが行
われる(all_attributes配下が差し替わる)
bull これはトラッカーやステータスによって入力可能な
フィールドや選択肢が変わるため
bull これにより入力フォームの各要素に対する変更(内
容変更やイベントの登録)はリセットされてし
まう
チケット入力フォームに対するイベント
bull 入力フォームが差し替わってもハンドリングでき
るようにする必要がある
bull 考え方としては親の要素に対してイベントを登
録しておいてイベントが発生した際に発生元が
該当のものか判断するようなイメージ
bull jQueryのon関数を使うと簡単に書ける
チケット入力フォームに対するイベント
bull ダメな例
これだと入力フォームが差し替わったタイミングで登録先の要素
(issue_status_id)が別物に変わってしまうのでうまく動かない
bull OKな例
documentに対してイベントハンドラを登録し該当の要素(issue_status_id)
が発生元だったら動作するように書くことによってissue_status_idが差し
替わってもハンドリング可能に
$(issue_status_id) on(change function(e) ステータス変更時に実施したい処理 )
$(document) on(change issue_status_id function(e) ステータス変更時に実施したい処理 )
チケット入力フォームに対する変更
bull 入力フォームが差し替わると変更した内容も元
に戻ってしまうので差し替わったタイミングで
処理する必要がある
bull たとえばカスタムフィールドの値に応じて他のカ
スタムフィールドで選択可能な値を絞る場合など
チケット入力フォームに対する変更
bull 差し替え処理を行っている関数をフックして差
し替え処理の後に処理を差し込む
bull replaceIssueFormWith 関数が差し替え処理を行って
いる関数なのでそこを対象に
関数を別名で退避 var _replaceIssueFormWith = replaceIssueFormWith 関数を中身を変更 退避した処理を呼び出すような関数として作り変える replaceIssueFormWith = function(html) 退避しておいた関数を呼び出し _replaceIssueFormWith(html) ここでフォーム差し替え後に やりたい処理を書く
View customize導入に向けて
試す環境を作る
bull プロジェクトで使っているRedmineにいきなり適
用するのは敷居が高いという場合にはまずは仮
想環境などで試してみる
bull Redmineの各バージョンのVagrant boxを公開している
のでそちらを使えばすぐに
vagrant init onozatyredmine-32
vagrant up
スクリプトを書いてみる
bull この資料を参考に書いてみる
bull スクリプトのサンプルは下記リポジトリに貯め
ていっているので参考に
bull httpsgithubcomonozatyredmine-view-customize-scripts
bull これからもだんだん増えていく予定
困ったときには
困ったときにはhellip
bull onozaty まで (follow me)
bull 即レスとまでいきませんが毎日確認してます
bull スクリプト例などもつぶやいています
困ったときにはhellip
bull こういうことできませんかといった質問もお
気軽にどうぞ
bull 一応全部答えている(できるものはBlogでも公開)つ
もりですが拾えてなかったらごめんなさい
おわり
jQuery
bull JavaScriptライブラリ
bull httpsjquerycom
bull RedmineではjQueryをすべての画面で読み込んで
いるのでView customizeでもjQueryが利用でき
る
jQuery
bull jQueryを使うとクロスブラウザによる違いの煩
わしさを吸収したりDOM操作が簡潔に書けるの
で便利
bull ただ最近のブラウザだと標準で代替するようなメ
ソッドが提供されているのでIE8捨てられるならば
jQuery使うまでもないかも
bull WebにjQueryの情報はあふれているので調べる
のも簡単
CSSセレクタ
CSSセレクタ
bull CSSセレクタとはCSSでスタイルを適用する対象
を示すもの
bull View customizeでも良く使うことになる
bull JavaScriptで指定要素を取得するとき
bull jQueryの$(selector)関数
bull CSSで対象を指定するとき
divheader h1
設定に関するノウハウ
対象画面の指定方法
Path pattern
bull Path patternに一致した画面の場合該当のスクリ
プトが埋め込まれる
bull 正規表現で記載する
URLとPath
bull URLでアプリケーション配下がPath
bull クエリパラメータは含まれない
bull httpexamplecomprojects
-gt prjects
bull httpexamplecomprojectsaissuesset_filter=1
-gt projectsaissues
bull httpexamplecomredmineprojects
ドキュメントルートではなくredmineとしてインストール
-gt prjects
Pathを確認する方法
bull バージョン114からHTMLにPathをコメントと
して埋め込むようになっている
bull ブラウザのソース表示で見ればその画面のPathが
わかる
指定例 (よくつかうもの)
Path pattern 一致する画面
全ての画面
issues$ チケット一覧
issuesnew$ チケットの新規作成画面
issues[0-9]+$ 個々のチケット内容表示画面
issues[0-9]+copy$ チケットのコピーによる作成画面
issuesgantt ガントチャート
projects$ プロジェクト一覧
[]+$ といった文字は正規表現におけるメタ文字(特殊な意味をもった文字)
チケットの入力フォーム
bull チケットの入力フォームはいろいろな画面で存
在するのでPathの指定だけだと面倒
bull issues1 チケット内容表示画面でも編集ボタンでフォームが
bull issuesnew 新規作成
bull issues1copy コピーによる作成画面
bull issuesgantt timesガントチャートなのでこれは一致させたくない
bull issues timesチケット一覧の場合 チケット登録時のValidationエラーの場合
Path pattern + JavaScriptで絞る
bull ldquoissuesrdquo と指定してJavaScript側でチケットの入
力フォームが無かったら処理しないようにする
bull チケットの入力フォームでしか存在しない要素
(issue-form とか)で確認する
bull 指定した要素が無かった場合でも処理がスキップされ
るように書いていればOK
jQueryの$(selector)関数
bull jQueryの$(selector)関数で返却されるjQueryオブジェクト
は一致する要素が無かった場合何も処理されないので
それを使っていれば大丈夫
bull 上記例だと入力フォームが無かった場合on関数でのイベント
登録が行われず何も処理されないことになる
(エラーにもならない)
$(issue-form input[type=submit]) on(click function(event) 送信ボタン押下時に何か処理を行わせる )
プロジェクト毎の指定
bull チケット詳細画面(issues1 など)はプロジェク
トをパスに持たないのでPathだけだとプロジェ
クトを指定できない
bull projectsprj1issues
bull projectsprj1issues1 timesこれはパスとして無効
bull issues1 チケット詳細はプロジェクト関係なく固定パス
body要素に付与されるclass属性で判断
bull body要素のclass属性に project-プロジェクト識別
子 が設定されるのでこれを使ってプロジェクト
を識別する
JavaScriptでプロジェクトを判定
bull jQueryのhasClass()関数で指定のクラス名が存在
するかチェックできる
bull またはclass属性を取り出して比較するなど
if ($(body)hasClass(project-prj1)) プロジェクト識別子がprj1の場合
CSSでプロジェクトを指定
bull CSSのセレクタでbodyのclassを利用するだけ
bodyproject-prj1 top-menu background-color 006400 dark green bodyproject-prj1 header background-color 008000 green
class属性が振られるもの
bull プロジェクト以外にもclass属性が振られるもの
が多々あるので対象画面や対象箇所を限定する
のに使用できる
class属性が振られるもの
bull body要素
bull controller-コントローラ名
bull action-アクション名
bull チケット一覧の各行
bull tracker-トラッカーID
bull status-ステータスID
bull priority-優先度ID
bull created-by-me
class属性が振られるもの
bull 他にもいろいろあるので詳しくは「Redmineの
画面で振られているclass属性について -
EnjoyStudy」にて
bull httpblogenjoyxstudycomentry20141011000000
コード(JavaScript)の書き方
ブラウザの開発者ツールを活用
ブラウザの開発者ツール
bull いきなりView customizeで設定するのではなく
ブラウザの開発者ツールを使いながら作成確認
する
bull DOMインスペクタ
bull コンソール
ブラウザの開発者ツール
bull 開発者ツールはChromeFirefoxIE それぞれ
のブラウザに標準でも入っている
bull Firefoxだと拡張機能のFirebugでもOK
bull 愛用しているので以降のキャプチャはFirebugにて
DOMインスペクタ
bull 選択した要素がHTML上でどういった構造で書か
れているか確認できる
bull ソース表示で見るより簡単
コンソール
bull 表示している画面に対してのJavaScriptの実行を手
軽に試せる
bull 補完も効く(複数行モードの場合はダメ)
コンソール
bull 複数行まとめて実行できるものもあり長めの
コードでも修正実行を繰り返し行える
実際に試してみる
例ヘッダにチケット一覧リンクを追加
bull やること
1 どこに要素を追加すればよいか調べる
2 その要素を起点にリンクを追加するコードを書く
3 うまくいったらView customize で設定
(いったんプライベートで)
4 動作することが確認できたらプライベートを外し
て全体に反映
追加位置を調べる
bull DOMインスペクタで追加したい位置を選択
追加位置を調べる
bull パスを確認
bull id属性がtop-menuとなっているdiv要素配下のul要素の
最後に追加してあげればよさそう
追加位置を調べる
bull コンソールで追加対象の要素を取得してみる
bull divtop-menu gt ul (id属性がtop-menuのdiv要素の子
のul要素) で取れた
リンクを追加するコードを書く
bull 対象のul要素の子要素としてリンクを追加する
コードを実行し思った動作になるまで確認
View customizeで設定
bull 画面の描画完了時にコードを実行する必要がある
(描画完了前だと要素が取得できない)ので
jQueryの$(function)関数を利用
$(function() ロード完了時に呼び出される $(top-menu gt ul) append(ltligtlta href=issuesgt全てのチケットltagtltligt) )
View customizeで設定
bull いったんプライベートで設定し動作を確認する
bull 動作OKでプライベートを外して全体に有効へ
コード(CSS)の書き方
JavaScriptの時と同じ
bull DOMインスペクタで変更したい要素を探す
bull CSSセレクタがどうなりそうかも確認しておく
bull 要素のスタイルを変えて試す
CSSをView customizeに設定
bull Path Patternは絞れるならば絞って問題ないが
CSSセレクタ自体で対象箇所が絞ってかけるので
全画面対象でもほとんど問題なし
bull そのままCSSを書くイメージ
CSSセレクタの書き方
CSSセレクタの確認
bull DOMインスペクタを使うことによってCSSセレ
クタはわかる
CSSセレクタの指定
bull bodyからすべてのパスを書く必要はなくid属性
が付与されているものを起点に考えると良い
bull id属性は一意のものになるので
body divwrapper divwrapper2 divwrapper3 divheader h1
divheader h1
bodyからのフルパス
こっちで十分
良く使うCSSセレクタ
他にもいろいろあるので詳しくない場合には
rdquoCSSセレクタrdquoで一度調べておくと良い
セレクタ名 書式 対象
型セレクタ E E要素
idセレクタ Emyid id名がmyidのE要素
classセレクタ Ewarning class名がwarinigのE要素
子孫セレクタ E F E要素の子孫にあたるF要素
子セレクタ E gt F E要素の子にあたるF要素 (子孫セレクタはE要素の配下ならばどこにあっても良いが子セレクタは1階層下のみが対象)
CSSセレクタで気を付けること
bull 必要のない要素と一致させない
bull 一致してしまう場合には条件をもっときつく
bull 単に要素を指定するのではなく要素+属性で指定す
る(idセレクタclassセレクタなど)
bull 子孫セレクタではなく子セレクタを使うなど
うまく動作しないときの 確認ポイント
Path patternがあっているか
bull 画面のソースを表示してView customizeで指定
したコードが埋め込まれているか確認
bull 埋め込まれていない場合Path patternが間違えている
のでPath patternを見直す
JavaScriptでエラーが発生していないか
bull 開発者ツールでエラーメッセージが出力されて
いないか確認
bull エラーメッセージが出力されていればそれをもとに
JavaScriptを修正
CSSが上書きされていないか
bull 複数のCSSが一致する場合その要素に対してど
のようなスタイルが適用されるかは優先度に
よって決まる
bull 該当の要素を詳細に指定している方が優先される
bull 型セレクタよりidセレクタで指定したものの方が優先
bull セレクタのレベルが同じならば後に書かれたものが
優先される
CSSが上書きされていないか
bull 上にあるほどもの優先度が高い
bull 取り消し線のものは優先度が高いものによって上書きさ
れているもの
チケットの入力フォームがらみは面倒
bull チケットの入力フォームはトラッカーまたはス
テータスが変わるとフォームの再読み込みが行
われる(all_attributes配下が差し替わる)
bull これはトラッカーやステータスによって入力可能な
フィールドや選択肢が変わるため
bull これにより入力フォームの各要素に対する変更(内
容変更やイベントの登録)はリセットされてし
まう
チケット入力フォームに対するイベント
bull 入力フォームが差し替わってもハンドリングでき
るようにする必要がある
bull 考え方としては親の要素に対してイベントを登
録しておいてイベントが発生した際に発生元が
該当のものか判断するようなイメージ
bull jQueryのon関数を使うと簡単に書ける
チケット入力フォームに対するイベント
bull ダメな例
これだと入力フォームが差し替わったタイミングで登録先の要素
(issue_status_id)が別物に変わってしまうのでうまく動かない
bull OKな例
documentに対してイベントハンドラを登録し該当の要素(issue_status_id)
が発生元だったら動作するように書くことによってissue_status_idが差し
替わってもハンドリング可能に
$(issue_status_id) on(change function(e) ステータス変更時に実施したい処理 )
$(document) on(change issue_status_id function(e) ステータス変更時に実施したい処理 )
チケット入力フォームに対する変更
bull 入力フォームが差し替わると変更した内容も元
に戻ってしまうので差し替わったタイミングで
処理する必要がある
bull たとえばカスタムフィールドの値に応じて他のカ
スタムフィールドで選択可能な値を絞る場合など
チケット入力フォームに対する変更
bull 差し替え処理を行っている関数をフックして差
し替え処理の後に処理を差し込む
bull replaceIssueFormWith 関数が差し替え処理を行って
いる関数なのでそこを対象に
関数を別名で退避 var _replaceIssueFormWith = replaceIssueFormWith 関数を中身を変更 退避した処理を呼び出すような関数として作り変える replaceIssueFormWith = function(html) 退避しておいた関数を呼び出し _replaceIssueFormWith(html) ここでフォーム差し替え後に やりたい処理を書く
View customize導入に向けて
試す環境を作る
bull プロジェクトで使っているRedmineにいきなり適
用するのは敷居が高いという場合にはまずは仮
想環境などで試してみる
bull Redmineの各バージョンのVagrant boxを公開している
のでそちらを使えばすぐに
vagrant init onozatyredmine-32
vagrant up
スクリプトを書いてみる
bull この資料を参考に書いてみる
bull スクリプトのサンプルは下記リポジトリに貯め
ていっているので参考に
bull httpsgithubcomonozatyredmine-view-customize-scripts
bull これからもだんだん増えていく予定
困ったときには
困ったときにはhellip
bull onozaty まで (follow me)
bull 即レスとまでいきませんが毎日確認してます
bull スクリプト例などもつぶやいています
困ったときにはhellip
bull こういうことできませんかといった質問もお
気軽にどうぞ
bull 一応全部答えている(できるものはBlogでも公開)つ
もりですが拾えてなかったらごめんなさい
おわり
jQuery
bull jQueryを使うとクロスブラウザによる違いの煩
わしさを吸収したりDOM操作が簡潔に書けるの
で便利
bull ただ最近のブラウザだと標準で代替するようなメ
ソッドが提供されているのでIE8捨てられるならば
jQuery使うまでもないかも
bull WebにjQueryの情報はあふれているので調べる
のも簡単
CSSセレクタ
CSSセレクタ
bull CSSセレクタとはCSSでスタイルを適用する対象
を示すもの
bull View customizeでも良く使うことになる
bull JavaScriptで指定要素を取得するとき
bull jQueryの$(selector)関数
bull CSSで対象を指定するとき
divheader h1
設定に関するノウハウ
対象画面の指定方法
Path pattern
bull Path patternに一致した画面の場合該当のスクリ
プトが埋め込まれる
bull 正規表現で記載する
URLとPath
bull URLでアプリケーション配下がPath
bull クエリパラメータは含まれない
bull httpexamplecomprojects
-gt prjects
bull httpexamplecomprojectsaissuesset_filter=1
-gt projectsaissues
bull httpexamplecomredmineprojects
ドキュメントルートではなくredmineとしてインストール
-gt prjects
Pathを確認する方法
bull バージョン114からHTMLにPathをコメントと
して埋め込むようになっている
bull ブラウザのソース表示で見ればその画面のPathが
わかる
指定例 (よくつかうもの)
Path pattern 一致する画面
全ての画面
issues$ チケット一覧
issuesnew$ チケットの新規作成画面
issues[0-9]+$ 個々のチケット内容表示画面
issues[0-9]+copy$ チケットのコピーによる作成画面
issuesgantt ガントチャート
projects$ プロジェクト一覧
[]+$ といった文字は正規表現におけるメタ文字(特殊な意味をもった文字)
チケットの入力フォーム
bull チケットの入力フォームはいろいろな画面で存
在するのでPathの指定だけだと面倒
bull issues1 チケット内容表示画面でも編集ボタンでフォームが
bull issuesnew 新規作成
bull issues1copy コピーによる作成画面
bull issuesgantt timesガントチャートなのでこれは一致させたくない
bull issues timesチケット一覧の場合 チケット登録時のValidationエラーの場合
Path pattern + JavaScriptで絞る
bull ldquoissuesrdquo と指定してJavaScript側でチケットの入
力フォームが無かったら処理しないようにする
bull チケットの入力フォームでしか存在しない要素
(issue-form とか)で確認する
bull 指定した要素が無かった場合でも処理がスキップされ
るように書いていればOK
jQueryの$(selector)関数
bull jQueryの$(selector)関数で返却されるjQueryオブジェクト
は一致する要素が無かった場合何も処理されないので
それを使っていれば大丈夫
bull 上記例だと入力フォームが無かった場合on関数でのイベント
登録が行われず何も処理されないことになる
(エラーにもならない)
$(issue-form input[type=submit]) on(click function(event) 送信ボタン押下時に何か処理を行わせる )
プロジェクト毎の指定
bull チケット詳細画面(issues1 など)はプロジェク
トをパスに持たないのでPathだけだとプロジェ
クトを指定できない
bull projectsprj1issues
bull projectsprj1issues1 timesこれはパスとして無効
bull issues1 チケット詳細はプロジェクト関係なく固定パス
body要素に付与されるclass属性で判断
bull body要素のclass属性に project-プロジェクト識別
子 が設定されるのでこれを使ってプロジェクト
を識別する
JavaScriptでプロジェクトを判定
bull jQueryのhasClass()関数で指定のクラス名が存在
するかチェックできる
bull またはclass属性を取り出して比較するなど
if ($(body)hasClass(project-prj1)) プロジェクト識別子がprj1の場合
CSSでプロジェクトを指定
bull CSSのセレクタでbodyのclassを利用するだけ
bodyproject-prj1 top-menu background-color 006400 dark green bodyproject-prj1 header background-color 008000 green
class属性が振られるもの
bull プロジェクト以外にもclass属性が振られるもの
が多々あるので対象画面や対象箇所を限定する
のに使用できる
class属性が振られるもの
bull body要素
bull controller-コントローラ名
bull action-アクション名
bull チケット一覧の各行
bull tracker-トラッカーID
bull status-ステータスID
bull priority-優先度ID
bull created-by-me
class属性が振られるもの
bull 他にもいろいろあるので詳しくは「Redmineの
画面で振られているclass属性について -
EnjoyStudy」にて
bull httpblogenjoyxstudycomentry20141011000000
コード(JavaScript)の書き方
ブラウザの開発者ツールを活用
ブラウザの開発者ツール
bull いきなりView customizeで設定するのではなく
ブラウザの開発者ツールを使いながら作成確認
する
bull DOMインスペクタ
bull コンソール
ブラウザの開発者ツール
bull 開発者ツールはChromeFirefoxIE それぞれ
のブラウザに標準でも入っている
bull Firefoxだと拡張機能のFirebugでもOK
bull 愛用しているので以降のキャプチャはFirebugにて
DOMインスペクタ
bull 選択した要素がHTML上でどういった構造で書か
れているか確認できる
bull ソース表示で見るより簡単
コンソール
bull 表示している画面に対してのJavaScriptの実行を手
軽に試せる
bull 補完も効く(複数行モードの場合はダメ)
コンソール
bull 複数行まとめて実行できるものもあり長めの
コードでも修正実行を繰り返し行える
実際に試してみる
例ヘッダにチケット一覧リンクを追加
bull やること
1 どこに要素を追加すればよいか調べる
2 その要素を起点にリンクを追加するコードを書く
3 うまくいったらView customize で設定
(いったんプライベートで)
4 動作することが確認できたらプライベートを外し
て全体に反映
追加位置を調べる
bull DOMインスペクタで追加したい位置を選択
追加位置を調べる
bull パスを確認
bull id属性がtop-menuとなっているdiv要素配下のul要素の
最後に追加してあげればよさそう
追加位置を調べる
bull コンソールで追加対象の要素を取得してみる
bull divtop-menu gt ul (id属性がtop-menuのdiv要素の子
のul要素) で取れた
リンクを追加するコードを書く
bull 対象のul要素の子要素としてリンクを追加する
コードを実行し思った動作になるまで確認
View customizeで設定
bull 画面の描画完了時にコードを実行する必要がある
(描画完了前だと要素が取得できない)ので
jQueryの$(function)関数を利用
$(function() ロード完了時に呼び出される $(top-menu gt ul) append(ltligtlta href=issuesgt全てのチケットltagtltligt) )
View customizeで設定
bull いったんプライベートで設定し動作を確認する
bull 動作OKでプライベートを外して全体に有効へ
コード(CSS)の書き方
JavaScriptの時と同じ
bull DOMインスペクタで変更したい要素を探す
bull CSSセレクタがどうなりそうかも確認しておく
bull 要素のスタイルを変えて試す
CSSをView customizeに設定
bull Path Patternは絞れるならば絞って問題ないが
CSSセレクタ自体で対象箇所が絞ってかけるので
全画面対象でもほとんど問題なし
bull そのままCSSを書くイメージ
CSSセレクタの書き方
CSSセレクタの確認
bull DOMインスペクタを使うことによってCSSセレ
クタはわかる
CSSセレクタの指定
bull bodyからすべてのパスを書く必要はなくid属性
が付与されているものを起点に考えると良い
bull id属性は一意のものになるので
body divwrapper divwrapper2 divwrapper3 divheader h1
divheader h1
bodyからのフルパス
こっちで十分
良く使うCSSセレクタ
他にもいろいろあるので詳しくない場合には
rdquoCSSセレクタrdquoで一度調べておくと良い
セレクタ名 書式 対象
型セレクタ E E要素
idセレクタ Emyid id名がmyidのE要素
classセレクタ Ewarning class名がwarinigのE要素
子孫セレクタ E F E要素の子孫にあたるF要素
子セレクタ E gt F E要素の子にあたるF要素 (子孫セレクタはE要素の配下ならばどこにあっても良いが子セレクタは1階層下のみが対象)
CSSセレクタで気を付けること
bull 必要のない要素と一致させない
bull 一致してしまう場合には条件をもっときつく
bull 単に要素を指定するのではなく要素+属性で指定す
る(idセレクタclassセレクタなど)
bull 子孫セレクタではなく子セレクタを使うなど
うまく動作しないときの 確認ポイント
Path patternがあっているか
bull 画面のソースを表示してView customizeで指定
したコードが埋め込まれているか確認
bull 埋め込まれていない場合Path patternが間違えている
のでPath patternを見直す
JavaScriptでエラーが発生していないか
bull 開発者ツールでエラーメッセージが出力されて
いないか確認
bull エラーメッセージが出力されていればそれをもとに
JavaScriptを修正
CSSが上書きされていないか
bull 複数のCSSが一致する場合その要素に対してど
のようなスタイルが適用されるかは優先度に
よって決まる
bull 該当の要素を詳細に指定している方が優先される
bull 型セレクタよりidセレクタで指定したものの方が優先
bull セレクタのレベルが同じならば後に書かれたものが
優先される
CSSが上書きされていないか
bull 上にあるほどもの優先度が高い
bull 取り消し線のものは優先度が高いものによって上書きさ
れているもの
チケットの入力フォームがらみは面倒
bull チケットの入力フォームはトラッカーまたはス
テータスが変わるとフォームの再読み込みが行
われる(all_attributes配下が差し替わる)
bull これはトラッカーやステータスによって入力可能な
フィールドや選択肢が変わるため
bull これにより入力フォームの各要素に対する変更(内
容変更やイベントの登録)はリセットされてし
まう
チケット入力フォームに対するイベント
bull 入力フォームが差し替わってもハンドリングでき
るようにする必要がある
bull 考え方としては親の要素に対してイベントを登
録しておいてイベントが発生した際に発生元が
該当のものか判断するようなイメージ
bull jQueryのon関数を使うと簡単に書ける
チケット入力フォームに対するイベント
bull ダメな例
これだと入力フォームが差し替わったタイミングで登録先の要素
(issue_status_id)が別物に変わってしまうのでうまく動かない
bull OKな例
documentに対してイベントハンドラを登録し該当の要素(issue_status_id)
が発生元だったら動作するように書くことによってissue_status_idが差し
替わってもハンドリング可能に
$(issue_status_id) on(change function(e) ステータス変更時に実施したい処理 )
$(document) on(change issue_status_id function(e) ステータス変更時に実施したい処理 )
チケット入力フォームに対する変更
bull 入力フォームが差し替わると変更した内容も元
に戻ってしまうので差し替わったタイミングで
処理する必要がある
bull たとえばカスタムフィールドの値に応じて他のカ
スタムフィールドで選択可能な値を絞る場合など
チケット入力フォームに対する変更
bull 差し替え処理を行っている関数をフックして差
し替え処理の後に処理を差し込む
bull replaceIssueFormWith 関数が差し替え処理を行って
いる関数なのでそこを対象に
関数を別名で退避 var _replaceIssueFormWith = replaceIssueFormWith 関数を中身を変更 退避した処理を呼び出すような関数として作り変える replaceIssueFormWith = function(html) 退避しておいた関数を呼び出し _replaceIssueFormWith(html) ここでフォーム差し替え後に やりたい処理を書く
View customize導入に向けて
試す環境を作る
bull プロジェクトで使っているRedmineにいきなり適
用するのは敷居が高いという場合にはまずは仮
想環境などで試してみる
bull Redmineの各バージョンのVagrant boxを公開している
のでそちらを使えばすぐに
vagrant init onozatyredmine-32
vagrant up
スクリプトを書いてみる
bull この資料を参考に書いてみる
bull スクリプトのサンプルは下記リポジトリに貯め
ていっているので参考に
bull httpsgithubcomonozatyredmine-view-customize-scripts
bull これからもだんだん増えていく予定
困ったときには
困ったときにはhellip
bull onozaty まで (follow me)
bull 即レスとまでいきませんが毎日確認してます
bull スクリプト例などもつぶやいています
困ったときにはhellip
bull こういうことできませんかといった質問もお
気軽にどうぞ
bull 一応全部答えている(できるものはBlogでも公開)つ
もりですが拾えてなかったらごめんなさい
おわり
CSSセレクタ
CSSセレクタ
bull CSSセレクタとはCSSでスタイルを適用する対象
を示すもの
bull View customizeでも良く使うことになる
bull JavaScriptで指定要素を取得するとき
bull jQueryの$(selector)関数
bull CSSで対象を指定するとき
divheader h1
設定に関するノウハウ
対象画面の指定方法
Path pattern
bull Path patternに一致した画面の場合該当のスクリ
プトが埋め込まれる
bull 正規表現で記載する
URLとPath
bull URLでアプリケーション配下がPath
bull クエリパラメータは含まれない
bull httpexamplecomprojects
-gt prjects
bull httpexamplecomprojectsaissuesset_filter=1
-gt projectsaissues
bull httpexamplecomredmineprojects
ドキュメントルートではなくredmineとしてインストール
-gt prjects
Pathを確認する方法
bull バージョン114からHTMLにPathをコメントと
して埋め込むようになっている
bull ブラウザのソース表示で見ればその画面のPathが
わかる
指定例 (よくつかうもの)
Path pattern 一致する画面
全ての画面
issues$ チケット一覧
issuesnew$ チケットの新規作成画面
issues[0-9]+$ 個々のチケット内容表示画面
issues[0-9]+copy$ チケットのコピーによる作成画面
issuesgantt ガントチャート
projects$ プロジェクト一覧
[]+$ といった文字は正規表現におけるメタ文字(特殊な意味をもった文字)
チケットの入力フォーム
bull チケットの入力フォームはいろいろな画面で存
在するのでPathの指定だけだと面倒
bull issues1 チケット内容表示画面でも編集ボタンでフォームが
bull issuesnew 新規作成
bull issues1copy コピーによる作成画面
bull issuesgantt timesガントチャートなのでこれは一致させたくない
bull issues timesチケット一覧の場合 チケット登録時のValidationエラーの場合
Path pattern + JavaScriptで絞る
bull ldquoissuesrdquo と指定してJavaScript側でチケットの入
力フォームが無かったら処理しないようにする
bull チケットの入力フォームでしか存在しない要素
(issue-form とか)で確認する
bull 指定した要素が無かった場合でも処理がスキップされ
るように書いていればOK
jQueryの$(selector)関数
bull jQueryの$(selector)関数で返却されるjQueryオブジェクト
は一致する要素が無かった場合何も処理されないので
それを使っていれば大丈夫
bull 上記例だと入力フォームが無かった場合on関数でのイベント
登録が行われず何も処理されないことになる
(エラーにもならない)
$(issue-form input[type=submit]) on(click function(event) 送信ボタン押下時に何か処理を行わせる )
プロジェクト毎の指定
bull チケット詳細画面(issues1 など)はプロジェク
トをパスに持たないのでPathだけだとプロジェ
クトを指定できない
bull projectsprj1issues
bull projectsprj1issues1 timesこれはパスとして無効
bull issues1 チケット詳細はプロジェクト関係なく固定パス
body要素に付与されるclass属性で判断
bull body要素のclass属性に project-プロジェクト識別
子 が設定されるのでこれを使ってプロジェクト
を識別する
JavaScriptでプロジェクトを判定
bull jQueryのhasClass()関数で指定のクラス名が存在
するかチェックできる
bull またはclass属性を取り出して比較するなど
if ($(body)hasClass(project-prj1)) プロジェクト識別子がprj1の場合
CSSでプロジェクトを指定
bull CSSのセレクタでbodyのclassを利用するだけ
bodyproject-prj1 top-menu background-color 006400 dark green bodyproject-prj1 header background-color 008000 green
class属性が振られるもの
bull プロジェクト以外にもclass属性が振られるもの
が多々あるので対象画面や対象箇所を限定する
のに使用できる
class属性が振られるもの
bull body要素
bull controller-コントローラ名
bull action-アクション名
bull チケット一覧の各行
bull tracker-トラッカーID
bull status-ステータスID
bull priority-優先度ID
bull created-by-me
class属性が振られるもの
bull 他にもいろいろあるので詳しくは「Redmineの
画面で振られているclass属性について -
EnjoyStudy」にて
bull httpblogenjoyxstudycomentry20141011000000
コード(JavaScript)の書き方
ブラウザの開発者ツールを活用
ブラウザの開発者ツール
bull いきなりView customizeで設定するのではなく
ブラウザの開発者ツールを使いながら作成確認
する
bull DOMインスペクタ
bull コンソール
ブラウザの開発者ツール
bull 開発者ツールはChromeFirefoxIE それぞれ
のブラウザに標準でも入っている
bull Firefoxだと拡張機能のFirebugでもOK
bull 愛用しているので以降のキャプチャはFirebugにて
DOMインスペクタ
bull 選択した要素がHTML上でどういった構造で書か
れているか確認できる
bull ソース表示で見るより簡単
コンソール
bull 表示している画面に対してのJavaScriptの実行を手
軽に試せる
bull 補完も効く(複数行モードの場合はダメ)
コンソール
bull 複数行まとめて実行できるものもあり長めの
コードでも修正実行を繰り返し行える
実際に試してみる
例ヘッダにチケット一覧リンクを追加
bull やること
1 どこに要素を追加すればよいか調べる
2 その要素を起点にリンクを追加するコードを書く
3 うまくいったらView customize で設定
(いったんプライベートで)
4 動作することが確認できたらプライベートを外し
て全体に反映
追加位置を調べる
bull DOMインスペクタで追加したい位置を選択
追加位置を調べる
bull パスを確認
bull id属性がtop-menuとなっているdiv要素配下のul要素の
最後に追加してあげればよさそう
追加位置を調べる
bull コンソールで追加対象の要素を取得してみる
bull divtop-menu gt ul (id属性がtop-menuのdiv要素の子
のul要素) で取れた
リンクを追加するコードを書く
bull 対象のul要素の子要素としてリンクを追加する
コードを実行し思った動作になるまで確認
View customizeで設定
bull 画面の描画完了時にコードを実行する必要がある
(描画完了前だと要素が取得できない)ので
jQueryの$(function)関数を利用
$(function() ロード完了時に呼び出される $(top-menu gt ul) append(ltligtlta href=issuesgt全てのチケットltagtltligt) )
View customizeで設定
bull いったんプライベートで設定し動作を確認する
bull 動作OKでプライベートを外して全体に有効へ
コード(CSS)の書き方
JavaScriptの時と同じ
bull DOMインスペクタで変更したい要素を探す
bull CSSセレクタがどうなりそうかも確認しておく
bull 要素のスタイルを変えて試す
CSSをView customizeに設定
bull Path Patternは絞れるならば絞って問題ないが
CSSセレクタ自体で対象箇所が絞ってかけるので
全画面対象でもほとんど問題なし
bull そのままCSSを書くイメージ
CSSセレクタの書き方
CSSセレクタの確認
bull DOMインスペクタを使うことによってCSSセレ
クタはわかる
CSSセレクタの指定
bull bodyからすべてのパスを書く必要はなくid属性
が付与されているものを起点に考えると良い
bull id属性は一意のものになるので
body divwrapper divwrapper2 divwrapper3 divheader h1
divheader h1
bodyからのフルパス
こっちで十分
良く使うCSSセレクタ
他にもいろいろあるので詳しくない場合には
rdquoCSSセレクタrdquoで一度調べておくと良い
セレクタ名 書式 対象
型セレクタ E E要素
idセレクタ Emyid id名がmyidのE要素
classセレクタ Ewarning class名がwarinigのE要素
子孫セレクタ E F E要素の子孫にあたるF要素
子セレクタ E gt F E要素の子にあたるF要素 (子孫セレクタはE要素の配下ならばどこにあっても良いが子セレクタは1階層下のみが対象)
CSSセレクタで気を付けること
bull 必要のない要素と一致させない
bull 一致してしまう場合には条件をもっときつく
bull 単に要素を指定するのではなく要素+属性で指定す
る(idセレクタclassセレクタなど)
bull 子孫セレクタではなく子セレクタを使うなど
うまく動作しないときの 確認ポイント
Path patternがあっているか
bull 画面のソースを表示してView customizeで指定
したコードが埋め込まれているか確認
bull 埋め込まれていない場合Path patternが間違えている
のでPath patternを見直す
JavaScriptでエラーが発生していないか
bull 開発者ツールでエラーメッセージが出力されて
いないか確認
bull エラーメッセージが出力されていればそれをもとに
JavaScriptを修正
CSSが上書きされていないか
bull 複数のCSSが一致する場合その要素に対してど
のようなスタイルが適用されるかは優先度に
よって決まる
bull 該当の要素を詳細に指定している方が優先される
bull 型セレクタよりidセレクタで指定したものの方が優先
bull セレクタのレベルが同じならば後に書かれたものが
優先される
CSSが上書きされていないか
bull 上にあるほどもの優先度が高い
bull 取り消し線のものは優先度が高いものによって上書きさ
れているもの
チケットの入力フォームがらみは面倒
bull チケットの入力フォームはトラッカーまたはス
テータスが変わるとフォームの再読み込みが行
われる(all_attributes配下が差し替わる)
bull これはトラッカーやステータスによって入力可能な
フィールドや選択肢が変わるため
bull これにより入力フォームの各要素に対する変更(内
容変更やイベントの登録)はリセットされてし
まう
チケット入力フォームに対するイベント
bull 入力フォームが差し替わってもハンドリングでき
るようにする必要がある
bull 考え方としては親の要素に対してイベントを登
録しておいてイベントが発生した際に発生元が
該当のものか判断するようなイメージ
bull jQueryのon関数を使うと簡単に書ける
チケット入力フォームに対するイベント
bull ダメな例
これだと入力フォームが差し替わったタイミングで登録先の要素
(issue_status_id)が別物に変わってしまうのでうまく動かない
bull OKな例
documentに対してイベントハンドラを登録し該当の要素(issue_status_id)
が発生元だったら動作するように書くことによってissue_status_idが差し
替わってもハンドリング可能に
$(issue_status_id) on(change function(e) ステータス変更時に実施したい処理 )
$(document) on(change issue_status_id function(e) ステータス変更時に実施したい処理 )
チケット入力フォームに対する変更
bull 入力フォームが差し替わると変更した内容も元
に戻ってしまうので差し替わったタイミングで
処理する必要がある
bull たとえばカスタムフィールドの値に応じて他のカ
スタムフィールドで選択可能な値を絞る場合など
チケット入力フォームに対する変更
bull 差し替え処理を行っている関数をフックして差
し替え処理の後に処理を差し込む
bull replaceIssueFormWith 関数が差し替え処理を行って
いる関数なのでそこを対象に
関数を別名で退避 var _replaceIssueFormWith = replaceIssueFormWith 関数を中身を変更 退避した処理を呼び出すような関数として作り変える replaceIssueFormWith = function(html) 退避しておいた関数を呼び出し _replaceIssueFormWith(html) ここでフォーム差し替え後に やりたい処理を書く
View customize導入に向けて
試す環境を作る
bull プロジェクトで使っているRedmineにいきなり適
用するのは敷居が高いという場合にはまずは仮
想環境などで試してみる
bull Redmineの各バージョンのVagrant boxを公開している
のでそちらを使えばすぐに
vagrant init onozatyredmine-32
vagrant up
スクリプトを書いてみる
bull この資料を参考に書いてみる
bull スクリプトのサンプルは下記リポジトリに貯め
ていっているので参考に
bull httpsgithubcomonozatyredmine-view-customize-scripts
bull これからもだんだん増えていく予定
困ったときには
困ったときにはhellip
bull onozaty まで (follow me)
bull 即レスとまでいきませんが毎日確認してます
bull スクリプト例などもつぶやいています
困ったときにはhellip
bull こういうことできませんかといった質問もお
気軽にどうぞ
bull 一応全部答えている(できるものはBlogでも公開)つ
もりですが拾えてなかったらごめんなさい
おわり
CSSセレクタ
bull CSSセレクタとはCSSでスタイルを適用する対象
を示すもの
bull View customizeでも良く使うことになる
bull JavaScriptで指定要素を取得するとき
bull jQueryの$(selector)関数
bull CSSで対象を指定するとき
divheader h1
設定に関するノウハウ
対象画面の指定方法
Path pattern
bull Path patternに一致した画面の場合該当のスクリ
プトが埋め込まれる
bull 正規表現で記載する
URLとPath
bull URLでアプリケーション配下がPath
bull クエリパラメータは含まれない
bull httpexamplecomprojects
-gt prjects
bull httpexamplecomprojectsaissuesset_filter=1
-gt projectsaissues
bull httpexamplecomredmineprojects
ドキュメントルートではなくredmineとしてインストール
-gt prjects
Pathを確認する方法
bull バージョン114からHTMLにPathをコメントと
して埋め込むようになっている
bull ブラウザのソース表示で見ればその画面のPathが
わかる
指定例 (よくつかうもの)
Path pattern 一致する画面
全ての画面
issues$ チケット一覧
issuesnew$ チケットの新規作成画面
issues[0-9]+$ 個々のチケット内容表示画面
issues[0-9]+copy$ チケットのコピーによる作成画面
issuesgantt ガントチャート
projects$ プロジェクト一覧
[]+$ といった文字は正規表現におけるメタ文字(特殊な意味をもった文字)
チケットの入力フォーム
bull チケットの入力フォームはいろいろな画面で存
在するのでPathの指定だけだと面倒
bull issues1 チケット内容表示画面でも編集ボタンでフォームが
bull issuesnew 新規作成
bull issues1copy コピーによる作成画面
bull issuesgantt timesガントチャートなのでこれは一致させたくない
bull issues timesチケット一覧の場合 チケット登録時のValidationエラーの場合
Path pattern + JavaScriptで絞る
bull ldquoissuesrdquo と指定してJavaScript側でチケットの入
力フォームが無かったら処理しないようにする
bull チケットの入力フォームでしか存在しない要素
(issue-form とか)で確認する
bull 指定した要素が無かった場合でも処理がスキップされ
るように書いていればOK
jQueryの$(selector)関数
bull jQueryの$(selector)関数で返却されるjQueryオブジェクト
は一致する要素が無かった場合何も処理されないので
それを使っていれば大丈夫
bull 上記例だと入力フォームが無かった場合on関数でのイベント
登録が行われず何も処理されないことになる
(エラーにもならない)
$(issue-form input[type=submit]) on(click function(event) 送信ボタン押下時に何か処理を行わせる )
プロジェクト毎の指定
bull チケット詳細画面(issues1 など)はプロジェク
トをパスに持たないのでPathだけだとプロジェ
クトを指定できない
bull projectsprj1issues
bull projectsprj1issues1 timesこれはパスとして無効
bull issues1 チケット詳細はプロジェクト関係なく固定パス
body要素に付与されるclass属性で判断
bull body要素のclass属性に project-プロジェクト識別
子 が設定されるのでこれを使ってプロジェクト
を識別する
JavaScriptでプロジェクトを判定
bull jQueryのhasClass()関数で指定のクラス名が存在
するかチェックできる
bull またはclass属性を取り出して比較するなど
if ($(body)hasClass(project-prj1)) プロジェクト識別子がprj1の場合
CSSでプロジェクトを指定
bull CSSのセレクタでbodyのclassを利用するだけ
bodyproject-prj1 top-menu background-color 006400 dark green bodyproject-prj1 header background-color 008000 green
class属性が振られるもの
bull プロジェクト以外にもclass属性が振られるもの
が多々あるので対象画面や対象箇所を限定する
のに使用できる
class属性が振られるもの
bull body要素
bull controller-コントローラ名
bull action-アクション名
bull チケット一覧の各行
bull tracker-トラッカーID
bull status-ステータスID
bull priority-優先度ID
bull created-by-me
class属性が振られるもの
bull 他にもいろいろあるので詳しくは「Redmineの
画面で振られているclass属性について -
EnjoyStudy」にて
bull httpblogenjoyxstudycomentry20141011000000
コード(JavaScript)の書き方
ブラウザの開発者ツールを活用
ブラウザの開発者ツール
bull いきなりView customizeで設定するのではなく
ブラウザの開発者ツールを使いながら作成確認
する
bull DOMインスペクタ
bull コンソール
ブラウザの開発者ツール
bull 開発者ツールはChromeFirefoxIE それぞれ
のブラウザに標準でも入っている
bull Firefoxだと拡張機能のFirebugでもOK
bull 愛用しているので以降のキャプチャはFirebugにて
DOMインスペクタ
bull 選択した要素がHTML上でどういった構造で書か
れているか確認できる
bull ソース表示で見るより簡単
コンソール
bull 表示している画面に対してのJavaScriptの実行を手
軽に試せる
bull 補完も効く(複数行モードの場合はダメ)
コンソール
bull 複数行まとめて実行できるものもあり長めの
コードでも修正実行を繰り返し行える
実際に試してみる
例ヘッダにチケット一覧リンクを追加
bull やること
1 どこに要素を追加すればよいか調べる
2 その要素を起点にリンクを追加するコードを書く
3 うまくいったらView customize で設定
(いったんプライベートで)
4 動作することが確認できたらプライベートを外し
て全体に反映
追加位置を調べる
bull DOMインスペクタで追加したい位置を選択
追加位置を調べる
bull パスを確認
bull id属性がtop-menuとなっているdiv要素配下のul要素の
最後に追加してあげればよさそう
追加位置を調べる
bull コンソールで追加対象の要素を取得してみる
bull divtop-menu gt ul (id属性がtop-menuのdiv要素の子
のul要素) で取れた
リンクを追加するコードを書く
bull 対象のul要素の子要素としてリンクを追加する
コードを実行し思った動作になるまで確認
View customizeで設定
bull 画面の描画完了時にコードを実行する必要がある
(描画完了前だと要素が取得できない)ので
jQueryの$(function)関数を利用
$(function() ロード完了時に呼び出される $(top-menu gt ul) append(ltligtlta href=issuesgt全てのチケットltagtltligt) )
View customizeで設定
bull いったんプライベートで設定し動作を確認する
bull 動作OKでプライベートを外して全体に有効へ
コード(CSS)の書き方
JavaScriptの時と同じ
bull DOMインスペクタで変更したい要素を探す
bull CSSセレクタがどうなりそうかも確認しておく
bull 要素のスタイルを変えて試す
CSSをView customizeに設定
bull Path Patternは絞れるならば絞って問題ないが
CSSセレクタ自体で対象箇所が絞ってかけるので
全画面対象でもほとんど問題なし
bull そのままCSSを書くイメージ
CSSセレクタの書き方
CSSセレクタの確認
bull DOMインスペクタを使うことによってCSSセレ
クタはわかる
CSSセレクタの指定
bull bodyからすべてのパスを書く必要はなくid属性
が付与されているものを起点に考えると良い
bull id属性は一意のものになるので
body divwrapper divwrapper2 divwrapper3 divheader h1
divheader h1
bodyからのフルパス
こっちで十分
良く使うCSSセレクタ
他にもいろいろあるので詳しくない場合には
rdquoCSSセレクタrdquoで一度調べておくと良い
セレクタ名 書式 対象
型セレクタ E E要素
idセレクタ Emyid id名がmyidのE要素
classセレクタ Ewarning class名がwarinigのE要素
子孫セレクタ E F E要素の子孫にあたるF要素
子セレクタ E gt F E要素の子にあたるF要素 (子孫セレクタはE要素の配下ならばどこにあっても良いが子セレクタは1階層下のみが対象)
CSSセレクタで気を付けること
bull 必要のない要素と一致させない
bull 一致してしまう場合には条件をもっときつく
bull 単に要素を指定するのではなく要素+属性で指定す
る(idセレクタclassセレクタなど)
bull 子孫セレクタではなく子セレクタを使うなど
うまく動作しないときの 確認ポイント
Path patternがあっているか
bull 画面のソースを表示してView customizeで指定
したコードが埋め込まれているか確認
bull 埋め込まれていない場合Path patternが間違えている
のでPath patternを見直す
JavaScriptでエラーが発生していないか
bull 開発者ツールでエラーメッセージが出力されて
いないか確認
bull エラーメッセージが出力されていればそれをもとに
JavaScriptを修正
CSSが上書きされていないか
bull 複数のCSSが一致する場合その要素に対してど
のようなスタイルが適用されるかは優先度に
よって決まる
bull 該当の要素を詳細に指定している方が優先される
bull 型セレクタよりidセレクタで指定したものの方が優先
bull セレクタのレベルが同じならば後に書かれたものが
優先される
CSSが上書きされていないか
bull 上にあるほどもの優先度が高い
bull 取り消し線のものは優先度が高いものによって上書きさ
れているもの
チケットの入力フォームがらみは面倒
bull チケットの入力フォームはトラッカーまたはス
テータスが変わるとフォームの再読み込みが行
われる(all_attributes配下が差し替わる)
bull これはトラッカーやステータスによって入力可能な
フィールドや選択肢が変わるため
bull これにより入力フォームの各要素に対する変更(内
容変更やイベントの登録)はリセットされてし
まう
チケット入力フォームに対するイベント
bull 入力フォームが差し替わってもハンドリングでき
るようにする必要がある
bull 考え方としては親の要素に対してイベントを登
録しておいてイベントが発生した際に発生元が
該当のものか判断するようなイメージ
bull jQueryのon関数を使うと簡単に書ける
チケット入力フォームに対するイベント
bull ダメな例
これだと入力フォームが差し替わったタイミングで登録先の要素
(issue_status_id)が別物に変わってしまうのでうまく動かない
bull OKな例
documentに対してイベントハンドラを登録し該当の要素(issue_status_id)
が発生元だったら動作するように書くことによってissue_status_idが差し
替わってもハンドリング可能に
$(issue_status_id) on(change function(e) ステータス変更時に実施したい処理 )
$(document) on(change issue_status_id function(e) ステータス変更時に実施したい処理 )
チケット入力フォームに対する変更
bull 入力フォームが差し替わると変更した内容も元
に戻ってしまうので差し替わったタイミングで
処理する必要がある
bull たとえばカスタムフィールドの値に応じて他のカ
スタムフィールドで選択可能な値を絞る場合など
チケット入力フォームに対する変更
bull 差し替え処理を行っている関数をフックして差
し替え処理の後に処理を差し込む
bull replaceIssueFormWith 関数が差し替え処理を行って
いる関数なのでそこを対象に
関数を別名で退避 var _replaceIssueFormWith = replaceIssueFormWith 関数を中身を変更 退避した処理を呼び出すような関数として作り変える replaceIssueFormWith = function(html) 退避しておいた関数を呼び出し _replaceIssueFormWith(html) ここでフォーム差し替え後に やりたい処理を書く
View customize導入に向けて
試す環境を作る
bull プロジェクトで使っているRedmineにいきなり適
用するのは敷居が高いという場合にはまずは仮
想環境などで試してみる
bull Redmineの各バージョンのVagrant boxを公開している
のでそちらを使えばすぐに
vagrant init onozatyredmine-32
vagrant up
スクリプトを書いてみる
bull この資料を参考に書いてみる
bull スクリプトのサンプルは下記リポジトリに貯め
ていっているので参考に
bull httpsgithubcomonozatyredmine-view-customize-scripts
bull これからもだんだん増えていく予定
困ったときには
困ったときにはhellip
bull onozaty まで (follow me)
bull 即レスとまでいきませんが毎日確認してます
bull スクリプト例などもつぶやいています
困ったときにはhellip
bull こういうことできませんかといった質問もお
気軽にどうぞ
bull 一応全部答えている(できるものはBlogでも公開)つ
もりですが拾えてなかったらごめんなさい
おわり
設定に関するノウハウ
対象画面の指定方法
Path pattern
bull Path patternに一致した画面の場合該当のスクリ
プトが埋め込まれる
bull 正規表現で記載する
URLとPath
bull URLでアプリケーション配下がPath
bull クエリパラメータは含まれない
bull httpexamplecomprojects
-gt prjects
bull httpexamplecomprojectsaissuesset_filter=1
-gt projectsaissues
bull httpexamplecomredmineprojects
ドキュメントルートではなくredmineとしてインストール
-gt prjects
Pathを確認する方法
bull バージョン114からHTMLにPathをコメントと
して埋め込むようになっている
bull ブラウザのソース表示で見ればその画面のPathが
わかる
指定例 (よくつかうもの)
Path pattern 一致する画面
全ての画面
issues$ チケット一覧
issuesnew$ チケットの新規作成画面
issues[0-9]+$ 個々のチケット内容表示画面
issues[0-9]+copy$ チケットのコピーによる作成画面
issuesgantt ガントチャート
projects$ プロジェクト一覧
[]+$ といった文字は正規表現におけるメタ文字(特殊な意味をもった文字)
チケットの入力フォーム
bull チケットの入力フォームはいろいろな画面で存
在するのでPathの指定だけだと面倒
bull issues1 チケット内容表示画面でも編集ボタンでフォームが
bull issuesnew 新規作成
bull issues1copy コピーによる作成画面
bull issuesgantt timesガントチャートなのでこれは一致させたくない
bull issues timesチケット一覧の場合 チケット登録時のValidationエラーの場合
Path pattern + JavaScriptで絞る
bull ldquoissuesrdquo と指定してJavaScript側でチケットの入
力フォームが無かったら処理しないようにする
bull チケットの入力フォームでしか存在しない要素
(issue-form とか)で確認する
bull 指定した要素が無かった場合でも処理がスキップされ
るように書いていればOK
jQueryの$(selector)関数
bull jQueryの$(selector)関数で返却されるjQueryオブジェクト
は一致する要素が無かった場合何も処理されないので
それを使っていれば大丈夫
bull 上記例だと入力フォームが無かった場合on関数でのイベント
登録が行われず何も処理されないことになる
(エラーにもならない)
$(issue-form input[type=submit]) on(click function(event) 送信ボタン押下時に何か処理を行わせる )
プロジェクト毎の指定
bull チケット詳細画面(issues1 など)はプロジェク
トをパスに持たないのでPathだけだとプロジェ
クトを指定できない
bull projectsprj1issues
bull projectsprj1issues1 timesこれはパスとして無効
bull issues1 チケット詳細はプロジェクト関係なく固定パス
body要素に付与されるclass属性で判断
bull body要素のclass属性に project-プロジェクト識別
子 が設定されるのでこれを使ってプロジェクト
を識別する
JavaScriptでプロジェクトを判定
bull jQueryのhasClass()関数で指定のクラス名が存在
するかチェックできる
bull またはclass属性を取り出して比較するなど
if ($(body)hasClass(project-prj1)) プロジェクト識別子がprj1の場合
CSSでプロジェクトを指定
bull CSSのセレクタでbodyのclassを利用するだけ
bodyproject-prj1 top-menu background-color 006400 dark green bodyproject-prj1 header background-color 008000 green
class属性が振られるもの
bull プロジェクト以外にもclass属性が振られるもの
が多々あるので対象画面や対象箇所を限定する
のに使用できる
class属性が振られるもの
bull body要素
bull controller-コントローラ名
bull action-アクション名
bull チケット一覧の各行
bull tracker-トラッカーID
bull status-ステータスID
bull priority-優先度ID
bull created-by-me
class属性が振られるもの
bull 他にもいろいろあるので詳しくは「Redmineの
画面で振られているclass属性について -
EnjoyStudy」にて
bull httpblogenjoyxstudycomentry20141011000000
コード(JavaScript)の書き方
ブラウザの開発者ツールを活用
ブラウザの開発者ツール
bull いきなりView customizeで設定するのではなく
ブラウザの開発者ツールを使いながら作成確認
する
bull DOMインスペクタ
bull コンソール
ブラウザの開発者ツール
bull 開発者ツールはChromeFirefoxIE それぞれ
のブラウザに標準でも入っている
bull Firefoxだと拡張機能のFirebugでもOK
bull 愛用しているので以降のキャプチャはFirebugにて
DOMインスペクタ
bull 選択した要素がHTML上でどういった構造で書か
れているか確認できる
bull ソース表示で見るより簡単
コンソール
bull 表示している画面に対してのJavaScriptの実行を手
軽に試せる
bull 補完も効く(複数行モードの場合はダメ)
コンソール
bull 複数行まとめて実行できるものもあり長めの
コードでも修正実行を繰り返し行える
実際に試してみる
例ヘッダにチケット一覧リンクを追加
bull やること
1 どこに要素を追加すればよいか調べる
2 その要素を起点にリンクを追加するコードを書く
3 うまくいったらView customize で設定
(いったんプライベートで)
4 動作することが確認できたらプライベートを外し
て全体に反映
追加位置を調べる
bull DOMインスペクタで追加したい位置を選択
追加位置を調べる
bull パスを確認
bull id属性がtop-menuとなっているdiv要素配下のul要素の
最後に追加してあげればよさそう
追加位置を調べる
bull コンソールで追加対象の要素を取得してみる
bull divtop-menu gt ul (id属性がtop-menuのdiv要素の子
のul要素) で取れた
リンクを追加するコードを書く
bull 対象のul要素の子要素としてリンクを追加する
コードを実行し思った動作になるまで確認
View customizeで設定
bull 画面の描画完了時にコードを実行する必要がある
(描画完了前だと要素が取得できない)ので
jQueryの$(function)関数を利用
$(function() ロード完了時に呼び出される $(top-menu gt ul) append(ltligtlta href=issuesgt全てのチケットltagtltligt) )
View customizeで設定
bull いったんプライベートで設定し動作を確認する
bull 動作OKでプライベートを外して全体に有効へ
コード(CSS)の書き方
JavaScriptの時と同じ
bull DOMインスペクタで変更したい要素を探す
bull CSSセレクタがどうなりそうかも確認しておく
bull 要素のスタイルを変えて試す
CSSをView customizeに設定
bull Path Patternは絞れるならば絞って問題ないが
CSSセレクタ自体で対象箇所が絞ってかけるので
全画面対象でもほとんど問題なし
bull そのままCSSを書くイメージ
CSSセレクタの書き方
CSSセレクタの確認
bull DOMインスペクタを使うことによってCSSセレ
クタはわかる
CSSセレクタの指定
bull bodyからすべてのパスを書く必要はなくid属性
が付与されているものを起点に考えると良い
bull id属性は一意のものになるので
body divwrapper divwrapper2 divwrapper3 divheader h1
divheader h1
bodyからのフルパス
こっちで十分
良く使うCSSセレクタ
他にもいろいろあるので詳しくない場合には
rdquoCSSセレクタrdquoで一度調べておくと良い
セレクタ名 書式 対象
型セレクタ E E要素
idセレクタ Emyid id名がmyidのE要素
classセレクタ Ewarning class名がwarinigのE要素
子孫セレクタ E F E要素の子孫にあたるF要素
子セレクタ E gt F E要素の子にあたるF要素 (子孫セレクタはE要素の配下ならばどこにあっても良いが子セレクタは1階層下のみが対象)
CSSセレクタで気を付けること
bull 必要のない要素と一致させない
bull 一致してしまう場合には条件をもっときつく
bull 単に要素を指定するのではなく要素+属性で指定す
る(idセレクタclassセレクタなど)
bull 子孫セレクタではなく子セレクタを使うなど
うまく動作しないときの 確認ポイント
Path patternがあっているか
bull 画面のソースを表示してView customizeで指定
したコードが埋め込まれているか確認
bull 埋め込まれていない場合Path patternが間違えている
のでPath patternを見直す
JavaScriptでエラーが発生していないか
bull 開発者ツールでエラーメッセージが出力されて
いないか確認
bull エラーメッセージが出力されていればそれをもとに
JavaScriptを修正
CSSが上書きされていないか
bull 複数のCSSが一致する場合その要素に対してど
のようなスタイルが適用されるかは優先度に
よって決まる
bull 該当の要素を詳細に指定している方が優先される
bull 型セレクタよりidセレクタで指定したものの方が優先
bull セレクタのレベルが同じならば後に書かれたものが
優先される
CSSが上書きされていないか
bull 上にあるほどもの優先度が高い
bull 取り消し線のものは優先度が高いものによって上書きさ
れているもの
チケットの入力フォームがらみは面倒
bull チケットの入力フォームはトラッカーまたはス
テータスが変わるとフォームの再読み込みが行
われる(all_attributes配下が差し替わる)
bull これはトラッカーやステータスによって入力可能な
フィールドや選択肢が変わるため
bull これにより入力フォームの各要素に対する変更(内
容変更やイベントの登録)はリセットされてし
まう
チケット入力フォームに対するイベント
bull 入力フォームが差し替わってもハンドリングでき
るようにする必要がある
bull 考え方としては親の要素に対してイベントを登
録しておいてイベントが発生した際に発生元が
該当のものか判断するようなイメージ
bull jQueryのon関数を使うと簡単に書ける
チケット入力フォームに対するイベント
bull ダメな例
これだと入力フォームが差し替わったタイミングで登録先の要素
(issue_status_id)が別物に変わってしまうのでうまく動かない
bull OKな例
documentに対してイベントハンドラを登録し該当の要素(issue_status_id)
が発生元だったら動作するように書くことによってissue_status_idが差し
替わってもハンドリング可能に
$(issue_status_id) on(change function(e) ステータス変更時に実施したい処理 )
$(document) on(change issue_status_id function(e) ステータス変更時に実施したい処理 )
チケット入力フォームに対する変更
bull 入力フォームが差し替わると変更した内容も元
に戻ってしまうので差し替わったタイミングで
処理する必要がある
bull たとえばカスタムフィールドの値に応じて他のカ
スタムフィールドで選択可能な値を絞る場合など
チケット入力フォームに対する変更
bull 差し替え処理を行っている関数をフックして差
し替え処理の後に処理を差し込む
bull replaceIssueFormWith 関数が差し替え処理を行って
いる関数なのでそこを対象に
関数を別名で退避 var _replaceIssueFormWith = replaceIssueFormWith 関数を中身を変更 退避した処理を呼び出すような関数として作り変える replaceIssueFormWith = function(html) 退避しておいた関数を呼び出し _replaceIssueFormWith(html) ここでフォーム差し替え後に やりたい処理を書く
View customize導入に向けて
試す環境を作る
bull プロジェクトで使っているRedmineにいきなり適
用するのは敷居が高いという場合にはまずは仮
想環境などで試してみる
bull Redmineの各バージョンのVagrant boxを公開している
のでそちらを使えばすぐに
vagrant init onozatyredmine-32
vagrant up
スクリプトを書いてみる
bull この資料を参考に書いてみる
bull スクリプトのサンプルは下記リポジトリに貯め
ていっているので参考に
bull httpsgithubcomonozatyredmine-view-customize-scripts
bull これからもだんだん増えていく予定
困ったときには
困ったときにはhellip
bull onozaty まで (follow me)
bull 即レスとまでいきませんが毎日確認してます
bull スクリプト例などもつぶやいています
困ったときにはhellip
bull こういうことできませんかといった質問もお
気軽にどうぞ
bull 一応全部答えている(できるものはBlogでも公開)つ
もりですが拾えてなかったらごめんなさい
おわり
対象画面の指定方法
Path pattern
bull Path patternに一致した画面の場合該当のスクリ
プトが埋め込まれる
bull 正規表現で記載する
URLとPath
bull URLでアプリケーション配下がPath
bull クエリパラメータは含まれない
bull httpexamplecomprojects
-gt prjects
bull httpexamplecomprojectsaissuesset_filter=1
-gt projectsaissues
bull httpexamplecomredmineprojects
ドキュメントルートではなくredmineとしてインストール
-gt prjects
Pathを確認する方法
bull バージョン114からHTMLにPathをコメントと
して埋め込むようになっている
bull ブラウザのソース表示で見ればその画面のPathが
わかる
指定例 (よくつかうもの)
Path pattern 一致する画面
全ての画面
issues$ チケット一覧
issuesnew$ チケットの新規作成画面
issues[0-9]+$ 個々のチケット内容表示画面
issues[0-9]+copy$ チケットのコピーによる作成画面
issuesgantt ガントチャート
projects$ プロジェクト一覧
[]+$ といった文字は正規表現におけるメタ文字(特殊な意味をもった文字)
チケットの入力フォーム
bull チケットの入力フォームはいろいろな画面で存
在するのでPathの指定だけだと面倒
bull issues1 チケット内容表示画面でも編集ボタンでフォームが
bull issuesnew 新規作成
bull issues1copy コピーによる作成画面
bull issuesgantt timesガントチャートなのでこれは一致させたくない
bull issues timesチケット一覧の場合 チケット登録時のValidationエラーの場合
Path pattern + JavaScriptで絞る
bull ldquoissuesrdquo と指定してJavaScript側でチケットの入
力フォームが無かったら処理しないようにする
bull チケットの入力フォームでしか存在しない要素
(issue-form とか)で確認する
bull 指定した要素が無かった場合でも処理がスキップされ
るように書いていればOK
jQueryの$(selector)関数
bull jQueryの$(selector)関数で返却されるjQueryオブジェクト
は一致する要素が無かった場合何も処理されないので
それを使っていれば大丈夫
bull 上記例だと入力フォームが無かった場合on関数でのイベント
登録が行われず何も処理されないことになる
(エラーにもならない)
$(issue-form input[type=submit]) on(click function(event) 送信ボタン押下時に何か処理を行わせる )
プロジェクト毎の指定
bull チケット詳細画面(issues1 など)はプロジェク
トをパスに持たないのでPathだけだとプロジェ
クトを指定できない
bull projectsprj1issues
bull projectsprj1issues1 timesこれはパスとして無効
bull issues1 チケット詳細はプロジェクト関係なく固定パス
body要素に付与されるclass属性で判断
bull body要素のclass属性に project-プロジェクト識別
子 が設定されるのでこれを使ってプロジェクト
を識別する
JavaScriptでプロジェクトを判定
bull jQueryのhasClass()関数で指定のクラス名が存在
するかチェックできる
bull またはclass属性を取り出して比較するなど
if ($(body)hasClass(project-prj1)) プロジェクト識別子がprj1の場合
CSSでプロジェクトを指定
bull CSSのセレクタでbodyのclassを利用するだけ
bodyproject-prj1 top-menu background-color 006400 dark green bodyproject-prj1 header background-color 008000 green
class属性が振られるもの
bull プロジェクト以外にもclass属性が振られるもの
が多々あるので対象画面や対象箇所を限定する
のに使用できる
class属性が振られるもの
bull body要素
bull controller-コントローラ名
bull action-アクション名
bull チケット一覧の各行
bull tracker-トラッカーID
bull status-ステータスID
bull priority-優先度ID
bull created-by-me
class属性が振られるもの
bull 他にもいろいろあるので詳しくは「Redmineの
画面で振られているclass属性について -
EnjoyStudy」にて
bull httpblogenjoyxstudycomentry20141011000000
コード(JavaScript)の書き方
ブラウザの開発者ツールを活用
ブラウザの開発者ツール
bull いきなりView customizeで設定するのではなく
ブラウザの開発者ツールを使いながら作成確認
する
bull DOMインスペクタ
bull コンソール
ブラウザの開発者ツール
bull 開発者ツールはChromeFirefoxIE それぞれ
のブラウザに標準でも入っている
bull Firefoxだと拡張機能のFirebugでもOK
bull 愛用しているので以降のキャプチャはFirebugにて
DOMインスペクタ
bull 選択した要素がHTML上でどういった構造で書か
れているか確認できる
bull ソース表示で見るより簡単
コンソール
bull 表示している画面に対してのJavaScriptの実行を手
軽に試せる
bull 補完も効く(複数行モードの場合はダメ)
コンソール
bull 複数行まとめて実行できるものもあり長めの
コードでも修正実行を繰り返し行える
実際に試してみる
例ヘッダにチケット一覧リンクを追加
bull やること
1 どこに要素を追加すればよいか調べる
2 その要素を起点にリンクを追加するコードを書く
3 うまくいったらView customize で設定
(いったんプライベートで)
4 動作することが確認できたらプライベートを外し
て全体に反映
追加位置を調べる
bull DOMインスペクタで追加したい位置を選択
追加位置を調べる
bull パスを確認
bull id属性がtop-menuとなっているdiv要素配下のul要素の
最後に追加してあげればよさそう
追加位置を調べる
bull コンソールで追加対象の要素を取得してみる
bull divtop-menu gt ul (id属性がtop-menuのdiv要素の子
のul要素) で取れた
リンクを追加するコードを書く
bull 対象のul要素の子要素としてリンクを追加する
コードを実行し思った動作になるまで確認
View customizeで設定
bull 画面の描画完了時にコードを実行する必要がある
(描画完了前だと要素が取得できない)ので
jQueryの$(function)関数を利用
$(function() ロード完了時に呼び出される $(top-menu gt ul) append(ltligtlta href=issuesgt全てのチケットltagtltligt) )
View customizeで設定
bull いったんプライベートで設定し動作を確認する
bull 動作OKでプライベートを外して全体に有効へ
コード(CSS)の書き方
JavaScriptの時と同じ
bull DOMインスペクタで変更したい要素を探す
bull CSSセレクタがどうなりそうかも確認しておく
bull 要素のスタイルを変えて試す
CSSをView customizeに設定
bull Path Patternは絞れるならば絞って問題ないが
CSSセレクタ自体で対象箇所が絞ってかけるので
全画面対象でもほとんど問題なし
bull そのままCSSを書くイメージ
CSSセレクタの書き方
CSSセレクタの確認
bull DOMインスペクタを使うことによってCSSセレ
クタはわかる
CSSセレクタの指定
bull bodyからすべてのパスを書く必要はなくid属性
が付与されているものを起点に考えると良い
bull id属性は一意のものになるので
body divwrapper divwrapper2 divwrapper3 divheader h1
divheader h1
bodyからのフルパス
こっちで十分
良く使うCSSセレクタ
他にもいろいろあるので詳しくない場合には
rdquoCSSセレクタrdquoで一度調べておくと良い
セレクタ名 書式 対象
型セレクタ E E要素
idセレクタ Emyid id名がmyidのE要素
classセレクタ Ewarning class名がwarinigのE要素
子孫セレクタ E F E要素の子孫にあたるF要素
子セレクタ E gt F E要素の子にあたるF要素 (子孫セレクタはE要素の配下ならばどこにあっても良いが子セレクタは1階層下のみが対象)
CSSセレクタで気を付けること
bull 必要のない要素と一致させない
bull 一致してしまう場合には条件をもっときつく
bull 単に要素を指定するのではなく要素+属性で指定す
る(idセレクタclassセレクタなど)
bull 子孫セレクタではなく子セレクタを使うなど
うまく動作しないときの 確認ポイント
Path patternがあっているか
bull 画面のソースを表示してView customizeで指定
したコードが埋め込まれているか確認
bull 埋め込まれていない場合Path patternが間違えている
のでPath patternを見直す
JavaScriptでエラーが発生していないか
bull 開発者ツールでエラーメッセージが出力されて
いないか確認
bull エラーメッセージが出力されていればそれをもとに
JavaScriptを修正
CSSが上書きされていないか
bull 複数のCSSが一致する場合その要素に対してど
のようなスタイルが適用されるかは優先度に
よって決まる
bull 該当の要素を詳細に指定している方が優先される
bull 型セレクタよりidセレクタで指定したものの方が優先
bull セレクタのレベルが同じならば後に書かれたものが
優先される
CSSが上書きされていないか
bull 上にあるほどもの優先度が高い
bull 取り消し線のものは優先度が高いものによって上書きさ
れているもの
チケットの入力フォームがらみは面倒
bull チケットの入力フォームはトラッカーまたはス
テータスが変わるとフォームの再読み込みが行
われる(all_attributes配下が差し替わる)
bull これはトラッカーやステータスによって入力可能な
フィールドや選択肢が変わるため
bull これにより入力フォームの各要素に対する変更(内
容変更やイベントの登録)はリセットされてし
まう
チケット入力フォームに対するイベント
bull 入力フォームが差し替わってもハンドリングでき
るようにする必要がある
bull 考え方としては親の要素に対してイベントを登
録しておいてイベントが発生した際に発生元が
該当のものか判断するようなイメージ
bull jQueryのon関数を使うと簡単に書ける
チケット入力フォームに対するイベント
bull ダメな例
これだと入力フォームが差し替わったタイミングで登録先の要素
(issue_status_id)が別物に変わってしまうのでうまく動かない
bull OKな例
documentに対してイベントハンドラを登録し該当の要素(issue_status_id)
が発生元だったら動作するように書くことによってissue_status_idが差し
替わってもハンドリング可能に
$(issue_status_id) on(change function(e) ステータス変更時に実施したい処理 )
$(document) on(change issue_status_id function(e) ステータス変更時に実施したい処理 )
チケット入力フォームに対する変更
bull 入力フォームが差し替わると変更した内容も元
に戻ってしまうので差し替わったタイミングで
処理する必要がある
bull たとえばカスタムフィールドの値に応じて他のカ
スタムフィールドで選択可能な値を絞る場合など
チケット入力フォームに対する変更
bull 差し替え処理を行っている関数をフックして差
し替え処理の後に処理を差し込む
bull replaceIssueFormWith 関数が差し替え処理を行って
いる関数なのでそこを対象に
関数を別名で退避 var _replaceIssueFormWith = replaceIssueFormWith 関数を中身を変更 退避した処理を呼び出すような関数として作り変える replaceIssueFormWith = function(html) 退避しておいた関数を呼び出し _replaceIssueFormWith(html) ここでフォーム差し替え後に やりたい処理を書く
View customize導入に向けて
試す環境を作る
bull プロジェクトで使っているRedmineにいきなり適
用するのは敷居が高いという場合にはまずは仮
想環境などで試してみる
bull Redmineの各バージョンのVagrant boxを公開している
のでそちらを使えばすぐに
vagrant init onozatyredmine-32
vagrant up
スクリプトを書いてみる
bull この資料を参考に書いてみる
bull スクリプトのサンプルは下記リポジトリに貯め
ていっているので参考に
bull httpsgithubcomonozatyredmine-view-customize-scripts
bull これからもだんだん増えていく予定
困ったときには
困ったときにはhellip
bull onozaty まで (follow me)
bull 即レスとまでいきませんが毎日確認してます
bull スクリプト例などもつぶやいています
困ったときにはhellip
bull こういうことできませんかといった質問もお
気軽にどうぞ
bull 一応全部答えている(できるものはBlogでも公開)つ
もりですが拾えてなかったらごめんなさい
おわり
Path pattern
bull Path patternに一致した画面の場合該当のスクリ
プトが埋め込まれる
bull 正規表現で記載する
URLとPath
bull URLでアプリケーション配下がPath
bull クエリパラメータは含まれない
bull httpexamplecomprojects
-gt prjects
bull httpexamplecomprojectsaissuesset_filter=1
-gt projectsaissues
bull httpexamplecomredmineprojects
ドキュメントルートではなくredmineとしてインストール
-gt prjects
Pathを確認する方法
bull バージョン114からHTMLにPathをコメントと
して埋め込むようになっている
bull ブラウザのソース表示で見ればその画面のPathが
わかる
指定例 (よくつかうもの)
Path pattern 一致する画面
全ての画面
issues$ チケット一覧
issuesnew$ チケットの新規作成画面
issues[0-9]+$ 個々のチケット内容表示画面
issues[0-9]+copy$ チケットのコピーによる作成画面
issuesgantt ガントチャート
projects$ プロジェクト一覧
[]+$ といった文字は正規表現におけるメタ文字(特殊な意味をもった文字)
チケットの入力フォーム
bull チケットの入力フォームはいろいろな画面で存
在するのでPathの指定だけだと面倒
bull issues1 チケット内容表示画面でも編集ボタンでフォームが
bull issuesnew 新規作成
bull issues1copy コピーによる作成画面
bull issuesgantt timesガントチャートなのでこれは一致させたくない
bull issues timesチケット一覧の場合 チケット登録時のValidationエラーの場合
Path pattern + JavaScriptで絞る
bull ldquoissuesrdquo と指定してJavaScript側でチケットの入
力フォームが無かったら処理しないようにする
bull チケットの入力フォームでしか存在しない要素
(issue-form とか)で確認する
bull 指定した要素が無かった場合でも処理がスキップされ
るように書いていればOK
jQueryの$(selector)関数
bull jQueryの$(selector)関数で返却されるjQueryオブジェクト
は一致する要素が無かった場合何も処理されないので
それを使っていれば大丈夫
bull 上記例だと入力フォームが無かった場合on関数でのイベント
登録が行われず何も処理されないことになる
(エラーにもならない)
$(issue-form input[type=submit]) on(click function(event) 送信ボタン押下時に何か処理を行わせる )
プロジェクト毎の指定
bull チケット詳細画面(issues1 など)はプロジェク
トをパスに持たないのでPathだけだとプロジェ
クトを指定できない
bull projectsprj1issues
bull projectsprj1issues1 timesこれはパスとして無効
bull issues1 チケット詳細はプロジェクト関係なく固定パス
body要素に付与されるclass属性で判断
bull body要素のclass属性に project-プロジェクト識別
子 が設定されるのでこれを使ってプロジェクト
を識別する
JavaScriptでプロジェクトを判定
bull jQueryのhasClass()関数で指定のクラス名が存在
するかチェックできる
bull またはclass属性を取り出して比較するなど
if ($(body)hasClass(project-prj1)) プロジェクト識別子がprj1の場合
CSSでプロジェクトを指定
bull CSSのセレクタでbodyのclassを利用するだけ
bodyproject-prj1 top-menu background-color 006400 dark green bodyproject-prj1 header background-color 008000 green
class属性が振られるもの
bull プロジェクト以外にもclass属性が振られるもの
が多々あるので対象画面や対象箇所を限定する
のに使用できる
class属性が振られるもの
bull body要素
bull controller-コントローラ名
bull action-アクション名
bull チケット一覧の各行
bull tracker-トラッカーID
bull status-ステータスID
bull priority-優先度ID
bull created-by-me
class属性が振られるもの
bull 他にもいろいろあるので詳しくは「Redmineの
画面で振られているclass属性について -
EnjoyStudy」にて
bull httpblogenjoyxstudycomentry20141011000000
コード(JavaScript)の書き方
ブラウザの開発者ツールを活用
ブラウザの開発者ツール
bull いきなりView customizeで設定するのではなく
ブラウザの開発者ツールを使いながら作成確認
する
bull DOMインスペクタ
bull コンソール
ブラウザの開発者ツール
bull 開発者ツールはChromeFirefoxIE それぞれ
のブラウザに標準でも入っている
bull Firefoxだと拡張機能のFirebugでもOK
bull 愛用しているので以降のキャプチャはFirebugにて
DOMインスペクタ
bull 選択した要素がHTML上でどういった構造で書か
れているか確認できる
bull ソース表示で見るより簡単
コンソール
bull 表示している画面に対してのJavaScriptの実行を手
軽に試せる
bull 補完も効く(複数行モードの場合はダメ)
コンソール
bull 複数行まとめて実行できるものもあり長めの
コードでも修正実行を繰り返し行える
実際に試してみる
例ヘッダにチケット一覧リンクを追加
bull やること
1 どこに要素を追加すればよいか調べる
2 その要素を起点にリンクを追加するコードを書く
3 うまくいったらView customize で設定
(いったんプライベートで)
4 動作することが確認できたらプライベートを外し
て全体に反映
追加位置を調べる
bull DOMインスペクタで追加したい位置を選択
追加位置を調べる
bull パスを確認
bull id属性がtop-menuとなっているdiv要素配下のul要素の
最後に追加してあげればよさそう
追加位置を調べる
bull コンソールで追加対象の要素を取得してみる
bull divtop-menu gt ul (id属性がtop-menuのdiv要素の子
のul要素) で取れた
リンクを追加するコードを書く
bull 対象のul要素の子要素としてリンクを追加する
コードを実行し思った動作になるまで確認
View customizeで設定
bull 画面の描画完了時にコードを実行する必要がある
(描画完了前だと要素が取得できない)ので
jQueryの$(function)関数を利用
$(function() ロード完了時に呼び出される $(top-menu gt ul) append(ltligtlta href=issuesgt全てのチケットltagtltligt) )
View customizeで設定
bull いったんプライベートで設定し動作を確認する
bull 動作OKでプライベートを外して全体に有効へ
コード(CSS)の書き方
JavaScriptの時と同じ
bull DOMインスペクタで変更したい要素を探す
bull CSSセレクタがどうなりそうかも確認しておく
bull 要素のスタイルを変えて試す
CSSをView customizeに設定
bull Path Patternは絞れるならば絞って問題ないが
CSSセレクタ自体で対象箇所が絞ってかけるので
全画面対象でもほとんど問題なし
bull そのままCSSを書くイメージ
CSSセレクタの書き方
CSSセレクタの確認
bull DOMインスペクタを使うことによってCSSセレ
クタはわかる
CSSセレクタの指定
bull bodyからすべてのパスを書く必要はなくid属性
が付与されているものを起点に考えると良い
bull id属性は一意のものになるので
body divwrapper divwrapper2 divwrapper3 divheader h1
divheader h1
bodyからのフルパス
こっちで十分
良く使うCSSセレクタ
他にもいろいろあるので詳しくない場合には
rdquoCSSセレクタrdquoで一度調べておくと良い
セレクタ名 書式 対象
型セレクタ E E要素
idセレクタ Emyid id名がmyidのE要素
classセレクタ Ewarning class名がwarinigのE要素
子孫セレクタ E F E要素の子孫にあたるF要素
子セレクタ E gt F E要素の子にあたるF要素 (子孫セレクタはE要素の配下ならばどこにあっても良いが子セレクタは1階層下のみが対象)
CSSセレクタで気を付けること
bull 必要のない要素と一致させない
bull 一致してしまう場合には条件をもっときつく
bull 単に要素を指定するのではなく要素+属性で指定す
る(idセレクタclassセレクタなど)
bull 子孫セレクタではなく子セレクタを使うなど
うまく動作しないときの 確認ポイント
Path patternがあっているか
bull 画面のソースを表示してView customizeで指定
したコードが埋め込まれているか確認
bull 埋め込まれていない場合Path patternが間違えている
のでPath patternを見直す
JavaScriptでエラーが発生していないか
bull 開発者ツールでエラーメッセージが出力されて
いないか確認
bull エラーメッセージが出力されていればそれをもとに
JavaScriptを修正
CSSが上書きされていないか
bull 複数のCSSが一致する場合その要素に対してど
のようなスタイルが適用されるかは優先度に
よって決まる
bull 該当の要素を詳細に指定している方が優先される
bull 型セレクタよりidセレクタで指定したものの方が優先
bull セレクタのレベルが同じならば後に書かれたものが
優先される
CSSが上書きされていないか
bull 上にあるほどもの優先度が高い
bull 取り消し線のものは優先度が高いものによって上書きさ
れているもの
チケットの入力フォームがらみは面倒
bull チケットの入力フォームはトラッカーまたはス
テータスが変わるとフォームの再読み込みが行
われる(all_attributes配下が差し替わる)
bull これはトラッカーやステータスによって入力可能な
フィールドや選択肢が変わるため
bull これにより入力フォームの各要素に対する変更(内
容変更やイベントの登録)はリセットされてし
まう
チケット入力フォームに対するイベント
bull 入力フォームが差し替わってもハンドリングでき
るようにする必要がある
bull 考え方としては親の要素に対してイベントを登
録しておいてイベントが発生した際に発生元が
該当のものか判断するようなイメージ
bull jQueryのon関数を使うと簡単に書ける
チケット入力フォームに対するイベント
bull ダメな例
これだと入力フォームが差し替わったタイミングで登録先の要素
(issue_status_id)が別物に変わってしまうのでうまく動かない
bull OKな例
documentに対してイベントハンドラを登録し該当の要素(issue_status_id)
が発生元だったら動作するように書くことによってissue_status_idが差し
替わってもハンドリング可能に
$(issue_status_id) on(change function(e) ステータス変更時に実施したい処理 )
$(document) on(change issue_status_id function(e) ステータス変更時に実施したい処理 )
チケット入力フォームに対する変更
bull 入力フォームが差し替わると変更した内容も元
に戻ってしまうので差し替わったタイミングで
処理する必要がある
bull たとえばカスタムフィールドの値に応じて他のカ
スタムフィールドで選択可能な値を絞る場合など
チケット入力フォームに対する変更
bull 差し替え処理を行っている関数をフックして差
し替え処理の後に処理を差し込む
bull replaceIssueFormWith 関数が差し替え処理を行って
いる関数なのでそこを対象に
関数を別名で退避 var _replaceIssueFormWith = replaceIssueFormWith 関数を中身を変更 退避した処理を呼び出すような関数として作り変える replaceIssueFormWith = function(html) 退避しておいた関数を呼び出し _replaceIssueFormWith(html) ここでフォーム差し替え後に やりたい処理を書く
View customize導入に向けて
試す環境を作る
bull プロジェクトで使っているRedmineにいきなり適
用するのは敷居が高いという場合にはまずは仮
想環境などで試してみる
bull Redmineの各バージョンのVagrant boxを公開している
のでそちらを使えばすぐに
vagrant init onozatyredmine-32
vagrant up
スクリプトを書いてみる
bull この資料を参考に書いてみる
bull スクリプトのサンプルは下記リポジトリに貯め
ていっているので参考に
bull httpsgithubcomonozatyredmine-view-customize-scripts
bull これからもだんだん増えていく予定
困ったときには
困ったときにはhellip
bull onozaty まで (follow me)
bull 即レスとまでいきませんが毎日確認してます
bull スクリプト例などもつぶやいています
困ったときにはhellip
bull こういうことできませんかといった質問もお
気軽にどうぞ
bull 一応全部答えている(できるものはBlogでも公開)つ
もりですが拾えてなかったらごめんなさい
おわり
URLとPath
bull URLでアプリケーション配下がPath
bull クエリパラメータは含まれない
bull httpexamplecomprojects
-gt prjects
bull httpexamplecomprojectsaissuesset_filter=1
-gt projectsaissues
bull httpexamplecomredmineprojects
ドキュメントルートではなくredmineとしてインストール
-gt prjects
Pathを確認する方法
bull バージョン114からHTMLにPathをコメントと
して埋め込むようになっている
bull ブラウザのソース表示で見ればその画面のPathが
わかる
指定例 (よくつかうもの)
Path pattern 一致する画面
全ての画面
issues$ チケット一覧
issuesnew$ チケットの新規作成画面
issues[0-9]+$ 個々のチケット内容表示画面
issues[0-9]+copy$ チケットのコピーによる作成画面
issuesgantt ガントチャート
projects$ プロジェクト一覧
[]+$ といった文字は正規表現におけるメタ文字(特殊な意味をもった文字)
チケットの入力フォーム
bull チケットの入力フォームはいろいろな画面で存
在するのでPathの指定だけだと面倒
bull issues1 チケット内容表示画面でも編集ボタンでフォームが
bull issuesnew 新規作成
bull issues1copy コピーによる作成画面
bull issuesgantt timesガントチャートなのでこれは一致させたくない
bull issues timesチケット一覧の場合 チケット登録時のValidationエラーの場合
Path pattern + JavaScriptで絞る
bull ldquoissuesrdquo と指定してJavaScript側でチケットの入
力フォームが無かったら処理しないようにする
bull チケットの入力フォームでしか存在しない要素
(issue-form とか)で確認する
bull 指定した要素が無かった場合でも処理がスキップされ
るように書いていればOK
jQueryの$(selector)関数
bull jQueryの$(selector)関数で返却されるjQueryオブジェクト
は一致する要素が無かった場合何も処理されないので
それを使っていれば大丈夫
bull 上記例だと入力フォームが無かった場合on関数でのイベント
登録が行われず何も処理されないことになる
(エラーにもならない)
$(issue-form input[type=submit]) on(click function(event) 送信ボタン押下時に何か処理を行わせる )
プロジェクト毎の指定
bull チケット詳細画面(issues1 など)はプロジェク
トをパスに持たないのでPathだけだとプロジェ
クトを指定できない
bull projectsprj1issues
bull projectsprj1issues1 timesこれはパスとして無効
bull issues1 チケット詳細はプロジェクト関係なく固定パス
body要素に付与されるclass属性で判断
bull body要素のclass属性に project-プロジェクト識別
子 が設定されるのでこれを使ってプロジェクト
を識別する
JavaScriptでプロジェクトを判定
bull jQueryのhasClass()関数で指定のクラス名が存在
するかチェックできる
bull またはclass属性を取り出して比較するなど
if ($(body)hasClass(project-prj1)) プロジェクト識別子がprj1の場合
CSSでプロジェクトを指定
bull CSSのセレクタでbodyのclassを利用するだけ
bodyproject-prj1 top-menu background-color 006400 dark green bodyproject-prj1 header background-color 008000 green
class属性が振られるもの
bull プロジェクト以外にもclass属性が振られるもの
が多々あるので対象画面や対象箇所を限定する
のに使用できる
class属性が振られるもの
bull body要素
bull controller-コントローラ名
bull action-アクション名
bull チケット一覧の各行
bull tracker-トラッカーID
bull status-ステータスID
bull priority-優先度ID
bull created-by-me
class属性が振られるもの
bull 他にもいろいろあるので詳しくは「Redmineの
画面で振られているclass属性について -
EnjoyStudy」にて
bull httpblogenjoyxstudycomentry20141011000000
コード(JavaScript)の書き方
ブラウザの開発者ツールを活用
ブラウザの開発者ツール
bull いきなりView customizeで設定するのではなく
ブラウザの開発者ツールを使いながら作成確認
する
bull DOMインスペクタ
bull コンソール
ブラウザの開発者ツール
bull 開発者ツールはChromeFirefoxIE それぞれ
のブラウザに標準でも入っている
bull Firefoxだと拡張機能のFirebugでもOK
bull 愛用しているので以降のキャプチャはFirebugにて
DOMインスペクタ
bull 選択した要素がHTML上でどういった構造で書か
れているか確認できる
bull ソース表示で見るより簡単
コンソール
bull 表示している画面に対してのJavaScriptの実行を手
軽に試せる
bull 補完も効く(複数行モードの場合はダメ)
コンソール
bull 複数行まとめて実行できるものもあり長めの
コードでも修正実行を繰り返し行える
実際に試してみる
例ヘッダにチケット一覧リンクを追加
bull やること
1 どこに要素を追加すればよいか調べる
2 その要素を起点にリンクを追加するコードを書く
3 うまくいったらView customize で設定
(いったんプライベートで)
4 動作することが確認できたらプライベートを外し
て全体に反映
追加位置を調べる
bull DOMインスペクタで追加したい位置を選択
追加位置を調べる
bull パスを確認
bull id属性がtop-menuとなっているdiv要素配下のul要素の
最後に追加してあげればよさそう
追加位置を調べる
bull コンソールで追加対象の要素を取得してみる
bull divtop-menu gt ul (id属性がtop-menuのdiv要素の子
のul要素) で取れた
リンクを追加するコードを書く
bull 対象のul要素の子要素としてリンクを追加する
コードを実行し思った動作になるまで確認
View customizeで設定
bull 画面の描画完了時にコードを実行する必要がある
(描画完了前だと要素が取得できない)ので
jQueryの$(function)関数を利用
$(function() ロード完了時に呼び出される $(top-menu gt ul) append(ltligtlta href=issuesgt全てのチケットltagtltligt) )
View customizeで設定
bull いったんプライベートで設定し動作を確認する
bull 動作OKでプライベートを外して全体に有効へ
コード(CSS)の書き方
JavaScriptの時と同じ
bull DOMインスペクタで変更したい要素を探す
bull CSSセレクタがどうなりそうかも確認しておく
bull 要素のスタイルを変えて試す
CSSをView customizeに設定
bull Path Patternは絞れるならば絞って問題ないが
CSSセレクタ自体で対象箇所が絞ってかけるので
全画面対象でもほとんど問題なし
bull そのままCSSを書くイメージ
CSSセレクタの書き方
CSSセレクタの確認
bull DOMインスペクタを使うことによってCSSセレ
クタはわかる
CSSセレクタの指定
bull bodyからすべてのパスを書く必要はなくid属性
が付与されているものを起点に考えると良い
bull id属性は一意のものになるので
body divwrapper divwrapper2 divwrapper3 divheader h1
divheader h1
bodyからのフルパス
こっちで十分
良く使うCSSセレクタ
他にもいろいろあるので詳しくない場合には
rdquoCSSセレクタrdquoで一度調べておくと良い
セレクタ名 書式 対象
型セレクタ E E要素
idセレクタ Emyid id名がmyidのE要素
classセレクタ Ewarning class名がwarinigのE要素
子孫セレクタ E F E要素の子孫にあたるF要素
子セレクタ E gt F E要素の子にあたるF要素 (子孫セレクタはE要素の配下ならばどこにあっても良いが子セレクタは1階層下のみが対象)
CSSセレクタで気を付けること
bull 必要のない要素と一致させない
bull 一致してしまう場合には条件をもっときつく
bull 単に要素を指定するのではなく要素+属性で指定す
る(idセレクタclassセレクタなど)
bull 子孫セレクタではなく子セレクタを使うなど
うまく動作しないときの 確認ポイント
Path patternがあっているか
bull 画面のソースを表示してView customizeで指定
したコードが埋め込まれているか確認
bull 埋め込まれていない場合Path patternが間違えている
のでPath patternを見直す
JavaScriptでエラーが発生していないか
bull 開発者ツールでエラーメッセージが出力されて
いないか確認
bull エラーメッセージが出力されていればそれをもとに
JavaScriptを修正
CSSが上書きされていないか
bull 複数のCSSが一致する場合その要素に対してど
のようなスタイルが適用されるかは優先度に
よって決まる
bull 該当の要素を詳細に指定している方が優先される
bull 型セレクタよりidセレクタで指定したものの方が優先
bull セレクタのレベルが同じならば後に書かれたものが
優先される
CSSが上書きされていないか
bull 上にあるほどもの優先度が高い
bull 取り消し線のものは優先度が高いものによって上書きさ
れているもの
チケットの入力フォームがらみは面倒
bull チケットの入力フォームはトラッカーまたはス
テータスが変わるとフォームの再読み込みが行
われる(all_attributes配下が差し替わる)
bull これはトラッカーやステータスによって入力可能な
フィールドや選択肢が変わるため
bull これにより入力フォームの各要素に対する変更(内
容変更やイベントの登録)はリセットされてし
まう
チケット入力フォームに対するイベント
bull 入力フォームが差し替わってもハンドリングでき
るようにする必要がある
bull 考え方としては親の要素に対してイベントを登
録しておいてイベントが発生した際に発生元が
該当のものか判断するようなイメージ
bull jQueryのon関数を使うと簡単に書ける
チケット入力フォームに対するイベント
bull ダメな例
これだと入力フォームが差し替わったタイミングで登録先の要素
(issue_status_id)が別物に変わってしまうのでうまく動かない
bull OKな例
documentに対してイベントハンドラを登録し該当の要素(issue_status_id)
が発生元だったら動作するように書くことによってissue_status_idが差し
替わってもハンドリング可能に
$(issue_status_id) on(change function(e) ステータス変更時に実施したい処理 )
$(document) on(change issue_status_id function(e) ステータス変更時に実施したい処理 )
チケット入力フォームに対する変更
bull 入力フォームが差し替わると変更した内容も元
に戻ってしまうので差し替わったタイミングで
処理する必要がある
bull たとえばカスタムフィールドの値に応じて他のカ
スタムフィールドで選択可能な値を絞る場合など
チケット入力フォームに対する変更
bull 差し替え処理を行っている関数をフックして差
し替え処理の後に処理を差し込む
bull replaceIssueFormWith 関数が差し替え処理を行って
いる関数なのでそこを対象に
関数を別名で退避 var _replaceIssueFormWith = replaceIssueFormWith 関数を中身を変更 退避した処理を呼び出すような関数として作り変える replaceIssueFormWith = function(html) 退避しておいた関数を呼び出し _replaceIssueFormWith(html) ここでフォーム差し替え後に やりたい処理を書く
View customize導入に向けて
試す環境を作る
bull プロジェクトで使っているRedmineにいきなり適
用するのは敷居が高いという場合にはまずは仮
想環境などで試してみる
bull Redmineの各バージョンのVagrant boxを公開している
のでそちらを使えばすぐに
vagrant init onozatyredmine-32
vagrant up
スクリプトを書いてみる
bull この資料を参考に書いてみる
bull スクリプトのサンプルは下記リポジトリに貯め
ていっているので参考に
bull httpsgithubcomonozatyredmine-view-customize-scripts
bull これからもだんだん増えていく予定
困ったときには
困ったときにはhellip
bull onozaty まで (follow me)
bull 即レスとまでいきませんが毎日確認してます
bull スクリプト例などもつぶやいています
困ったときにはhellip
bull こういうことできませんかといった質問もお
気軽にどうぞ
bull 一応全部答えている(できるものはBlogでも公開)つ
もりですが拾えてなかったらごめんなさい
おわり
Pathを確認する方法
bull バージョン114からHTMLにPathをコメントと
して埋め込むようになっている
bull ブラウザのソース表示で見ればその画面のPathが
わかる
指定例 (よくつかうもの)
Path pattern 一致する画面
全ての画面
issues$ チケット一覧
issuesnew$ チケットの新規作成画面
issues[0-9]+$ 個々のチケット内容表示画面
issues[0-9]+copy$ チケットのコピーによる作成画面
issuesgantt ガントチャート
projects$ プロジェクト一覧
[]+$ といった文字は正規表現におけるメタ文字(特殊な意味をもった文字)
チケットの入力フォーム
bull チケットの入力フォームはいろいろな画面で存
在するのでPathの指定だけだと面倒
bull issues1 チケット内容表示画面でも編集ボタンでフォームが
bull issuesnew 新規作成
bull issues1copy コピーによる作成画面
bull issuesgantt timesガントチャートなのでこれは一致させたくない
bull issues timesチケット一覧の場合 チケット登録時のValidationエラーの場合
Path pattern + JavaScriptで絞る
bull ldquoissuesrdquo と指定してJavaScript側でチケットの入
力フォームが無かったら処理しないようにする
bull チケットの入力フォームでしか存在しない要素
(issue-form とか)で確認する
bull 指定した要素が無かった場合でも処理がスキップされ
るように書いていればOK
jQueryの$(selector)関数
bull jQueryの$(selector)関数で返却されるjQueryオブジェクト
は一致する要素が無かった場合何も処理されないので
それを使っていれば大丈夫
bull 上記例だと入力フォームが無かった場合on関数でのイベント
登録が行われず何も処理されないことになる
(エラーにもならない)
$(issue-form input[type=submit]) on(click function(event) 送信ボタン押下時に何か処理を行わせる )
プロジェクト毎の指定
bull チケット詳細画面(issues1 など)はプロジェク
トをパスに持たないのでPathだけだとプロジェ
クトを指定できない
bull projectsprj1issues
bull projectsprj1issues1 timesこれはパスとして無効
bull issues1 チケット詳細はプロジェクト関係なく固定パス
body要素に付与されるclass属性で判断
bull body要素のclass属性に project-プロジェクト識別
子 が設定されるのでこれを使ってプロジェクト
を識別する
JavaScriptでプロジェクトを判定
bull jQueryのhasClass()関数で指定のクラス名が存在
するかチェックできる
bull またはclass属性を取り出して比較するなど
if ($(body)hasClass(project-prj1)) プロジェクト識別子がprj1の場合
CSSでプロジェクトを指定
bull CSSのセレクタでbodyのclassを利用するだけ
bodyproject-prj1 top-menu background-color 006400 dark green bodyproject-prj1 header background-color 008000 green
class属性が振られるもの
bull プロジェクト以外にもclass属性が振られるもの
が多々あるので対象画面や対象箇所を限定する
のに使用できる
class属性が振られるもの
bull body要素
bull controller-コントローラ名
bull action-アクション名
bull チケット一覧の各行
bull tracker-トラッカーID
bull status-ステータスID
bull priority-優先度ID
bull created-by-me
class属性が振られるもの
bull 他にもいろいろあるので詳しくは「Redmineの
画面で振られているclass属性について -
EnjoyStudy」にて
bull httpblogenjoyxstudycomentry20141011000000
コード(JavaScript)の書き方
ブラウザの開発者ツールを活用
ブラウザの開発者ツール
bull いきなりView customizeで設定するのではなく
ブラウザの開発者ツールを使いながら作成確認
する
bull DOMインスペクタ
bull コンソール
ブラウザの開発者ツール
bull 開発者ツールはChromeFirefoxIE それぞれ
のブラウザに標準でも入っている
bull Firefoxだと拡張機能のFirebugでもOK
bull 愛用しているので以降のキャプチャはFirebugにて
DOMインスペクタ
bull 選択した要素がHTML上でどういった構造で書か
れているか確認できる
bull ソース表示で見るより簡単
コンソール
bull 表示している画面に対してのJavaScriptの実行を手
軽に試せる
bull 補完も効く(複数行モードの場合はダメ)
コンソール
bull 複数行まとめて実行できるものもあり長めの
コードでも修正実行を繰り返し行える
実際に試してみる
例ヘッダにチケット一覧リンクを追加
bull やること
1 どこに要素を追加すればよいか調べる
2 その要素を起点にリンクを追加するコードを書く
3 うまくいったらView customize で設定
(いったんプライベートで)
4 動作することが確認できたらプライベートを外し
て全体に反映
追加位置を調べる
bull DOMインスペクタで追加したい位置を選択
追加位置を調べる
bull パスを確認
bull id属性がtop-menuとなっているdiv要素配下のul要素の
最後に追加してあげればよさそう
追加位置を調べる
bull コンソールで追加対象の要素を取得してみる
bull divtop-menu gt ul (id属性がtop-menuのdiv要素の子
のul要素) で取れた
リンクを追加するコードを書く
bull 対象のul要素の子要素としてリンクを追加する
コードを実行し思った動作になるまで確認
View customizeで設定
bull 画面の描画完了時にコードを実行する必要がある
(描画完了前だと要素が取得できない)ので
jQueryの$(function)関数を利用
$(function() ロード完了時に呼び出される $(top-menu gt ul) append(ltligtlta href=issuesgt全てのチケットltagtltligt) )
View customizeで設定
bull いったんプライベートで設定し動作を確認する
bull 動作OKでプライベートを外して全体に有効へ
コード(CSS)の書き方
JavaScriptの時と同じ
bull DOMインスペクタで変更したい要素を探す
bull CSSセレクタがどうなりそうかも確認しておく
bull 要素のスタイルを変えて試す
CSSをView customizeに設定
bull Path Patternは絞れるならば絞って問題ないが
CSSセレクタ自体で対象箇所が絞ってかけるので
全画面対象でもほとんど問題なし
bull そのままCSSを書くイメージ
CSSセレクタの書き方
CSSセレクタの確認
bull DOMインスペクタを使うことによってCSSセレ
クタはわかる
CSSセレクタの指定
bull bodyからすべてのパスを書く必要はなくid属性
が付与されているものを起点に考えると良い
bull id属性は一意のものになるので
body divwrapper divwrapper2 divwrapper3 divheader h1
divheader h1
bodyからのフルパス
こっちで十分
良く使うCSSセレクタ
他にもいろいろあるので詳しくない場合には
rdquoCSSセレクタrdquoで一度調べておくと良い
セレクタ名 書式 対象
型セレクタ E E要素
idセレクタ Emyid id名がmyidのE要素
classセレクタ Ewarning class名がwarinigのE要素
子孫セレクタ E F E要素の子孫にあたるF要素
子セレクタ E gt F E要素の子にあたるF要素 (子孫セレクタはE要素の配下ならばどこにあっても良いが子セレクタは1階層下のみが対象)
CSSセレクタで気を付けること
bull 必要のない要素と一致させない
bull 一致してしまう場合には条件をもっときつく
bull 単に要素を指定するのではなく要素+属性で指定す
る(idセレクタclassセレクタなど)
bull 子孫セレクタではなく子セレクタを使うなど
うまく動作しないときの 確認ポイント
Path patternがあっているか
bull 画面のソースを表示してView customizeで指定
したコードが埋め込まれているか確認
bull 埋め込まれていない場合Path patternが間違えている
のでPath patternを見直す
JavaScriptでエラーが発生していないか
bull 開発者ツールでエラーメッセージが出力されて
いないか確認
bull エラーメッセージが出力されていればそれをもとに
JavaScriptを修正
CSSが上書きされていないか
bull 複数のCSSが一致する場合その要素に対してど
のようなスタイルが適用されるかは優先度に
よって決まる
bull 該当の要素を詳細に指定している方が優先される
bull 型セレクタよりidセレクタで指定したものの方が優先
bull セレクタのレベルが同じならば後に書かれたものが
優先される
CSSが上書きされていないか
bull 上にあるほどもの優先度が高い
bull 取り消し線のものは優先度が高いものによって上書きさ
れているもの
チケットの入力フォームがらみは面倒
bull チケットの入力フォームはトラッカーまたはス
テータスが変わるとフォームの再読み込みが行
われる(all_attributes配下が差し替わる)
bull これはトラッカーやステータスによって入力可能な
フィールドや選択肢が変わるため
bull これにより入力フォームの各要素に対する変更(内
容変更やイベントの登録)はリセットされてし
まう
チケット入力フォームに対するイベント
bull 入力フォームが差し替わってもハンドリングでき
るようにする必要がある
bull 考え方としては親の要素に対してイベントを登
録しておいてイベントが発生した際に発生元が
該当のものか判断するようなイメージ
bull jQueryのon関数を使うと簡単に書ける
チケット入力フォームに対するイベント
bull ダメな例
これだと入力フォームが差し替わったタイミングで登録先の要素
(issue_status_id)が別物に変わってしまうのでうまく動かない
bull OKな例
documentに対してイベントハンドラを登録し該当の要素(issue_status_id)
が発生元だったら動作するように書くことによってissue_status_idが差し
替わってもハンドリング可能に
$(issue_status_id) on(change function(e) ステータス変更時に実施したい処理 )
$(document) on(change issue_status_id function(e) ステータス変更時に実施したい処理 )
チケット入力フォームに対する変更
bull 入力フォームが差し替わると変更した内容も元
に戻ってしまうので差し替わったタイミングで
処理する必要がある
bull たとえばカスタムフィールドの値に応じて他のカ
スタムフィールドで選択可能な値を絞る場合など
チケット入力フォームに対する変更
bull 差し替え処理を行っている関数をフックして差
し替え処理の後に処理を差し込む
bull replaceIssueFormWith 関数が差し替え処理を行って
いる関数なのでそこを対象に
関数を別名で退避 var _replaceIssueFormWith = replaceIssueFormWith 関数を中身を変更 退避した処理を呼び出すような関数として作り変える replaceIssueFormWith = function(html) 退避しておいた関数を呼び出し _replaceIssueFormWith(html) ここでフォーム差し替え後に やりたい処理を書く
View customize導入に向けて
試す環境を作る
bull プロジェクトで使っているRedmineにいきなり適
用するのは敷居が高いという場合にはまずは仮
想環境などで試してみる
bull Redmineの各バージョンのVagrant boxを公開している
のでそちらを使えばすぐに
vagrant init onozatyredmine-32
vagrant up
スクリプトを書いてみる
bull この資料を参考に書いてみる
bull スクリプトのサンプルは下記リポジトリに貯め
ていっているので参考に
bull httpsgithubcomonozatyredmine-view-customize-scripts
bull これからもだんだん増えていく予定
困ったときには
困ったときにはhellip
bull onozaty まで (follow me)
bull 即レスとまでいきませんが毎日確認してます
bull スクリプト例などもつぶやいています
困ったときにはhellip
bull こういうことできませんかといった質問もお
気軽にどうぞ
bull 一応全部答えている(できるものはBlogでも公開)つ
もりですが拾えてなかったらごめんなさい
おわり
指定例 (よくつかうもの)
Path pattern 一致する画面
全ての画面
issues$ チケット一覧
issuesnew$ チケットの新規作成画面
issues[0-9]+$ 個々のチケット内容表示画面
issues[0-9]+copy$ チケットのコピーによる作成画面
issuesgantt ガントチャート
projects$ プロジェクト一覧
[]+$ といった文字は正規表現におけるメタ文字(特殊な意味をもった文字)
チケットの入力フォーム
bull チケットの入力フォームはいろいろな画面で存
在するのでPathの指定だけだと面倒
bull issues1 チケット内容表示画面でも編集ボタンでフォームが
bull issuesnew 新規作成
bull issues1copy コピーによる作成画面
bull issuesgantt timesガントチャートなのでこれは一致させたくない
bull issues timesチケット一覧の場合 チケット登録時のValidationエラーの場合
Path pattern + JavaScriptで絞る
bull ldquoissuesrdquo と指定してJavaScript側でチケットの入
力フォームが無かったら処理しないようにする
bull チケットの入力フォームでしか存在しない要素
(issue-form とか)で確認する
bull 指定した要素が無かった場合でも処理がスキップされ
るように書いていればOK
jQueryの$(selector)関数
bull jQueryの$(selector)関数で返却されるjQueryオブジェクト
は一致する要素が無かった場合何も処理されないので
それを使っていれば大丈夫
bull 上記例だと入力フォームが無かった場合on関数でのイベント
登録が行われず何も処理されないことになる
(エラーにもならない)
$(issue-form input[type=submit]) on(click function(event) 送信ボタン押下時に何か処理を行わせる )
プロジェクト毎の指定
bull チケット詳細画面(issues1 など)はプロジェク
トをパスに持たないのでPathだけだとプロジェ
クトを指定できない
bull projectsprj1issues
bull projectsprj1issues1 timesこれはパスとして無効
bull issues1 チケット詳細はプロジェクト関係なく固定パス
body要素に付与されるclass属性で判断
bull body要素のclass属性に project-プロジェクト識別
子 が設定されるのでこれを使ってプロジェクト
を識別する
JavaScriptでプロジェクトを判定
bull jQueryのhasClass()関数で指定のクラス名が存在
するかチェックできる
bull またはclass属性を取り出して比較するなど
if ($(body)hasClass(project-prj1)) プロジェクト識別子がprj1の場合
CSSでプロジェクトを指定
bull CSSのセレクタでbodyのclassを利用するだけ
bodyproject-prj1 top-menu background-color 006400 dark green bodyproject-prj1 header background-color 008000 green
class属性が振られるもの
bull プロジェクト以外にもclass属性が振られるもの
が多々あるので対象画面や対象箇所を限定する
のに使用できる
class属性が振られるもの
bull body要素
bull controller-コントローラ名
bull action-アクション名
bull チケット一覧の各行
bull tracker-トラッカーID
bull status-ステータスID
bull priority-優先度ID
bull created-by-me
class属性が振られるもの
bull 他にもいろいろあるので詳しくは「Redmineの
画面で振られているclass属性について -
EnjoyStudy」にて
bull httpblogenjoyxstudycomentry20141011000000
コード(JavaScript)の書き方
ブラウザの開発者ツールを活用
ブラウザの開発者ツール
bull いきなりView customizeで設定するのではなく
ブラウザの開発者ツールを使いながら作成確認
する
bull DOMインスペクタ
bull コンソール
ブラウザの開発者ツール
bull 開発者ツールはChromeFirefoxIE それぞれ
のブラウザに標準でも入っている
bull Firefoxだと拡張機能のFirebugでもOK
bull 愛用しているので以降のキャプチャはFirebugにて
DOMインスペクタ
bull 選択した要素がHTML上でどういった構造で書か
れているか確認できる
bull ソース表示で見るより簡単
コンソール
bull 表示している画面に対してのJavaScriptの実行を手
軽に試せる
bull 補完も効く(複数行モードの場合はダメ)
コンソール
bull 複数行まとめて実行できるものもあり長めの
コードでも修正実行を繰り返し行える
実際に試してみる
例ヘッダにチケット一覧リンクを追加
bull やること
1 どこに要素を追加すればよいか調べる
2 その要素を起点にリンクを追加するコードを書く
3 うまくいったらView customize で設定
(いったんプライベートで)
4 動作することが確認できたらプライベートを外し
て全体に反映
追加位置を調べる
bull DOMインスペクタで追加したい位置を選択
追加位置を調べる
bull パスを確認
bull id属性がtop-menuとなっているdiv要素配下のul要素の
最後に追加してあげればよさそう
追加位置を調べる
bull コンソールで追加対象の要素を取得してみる
bull divtop-menu gt ul (id属性がtop-menuのdiv要素の子
のul要素) で取れた
リンクを追加するコードを書く
bull 対象のul要素の子要素としてリンクを追加する
コードを実行し思った動作になるまで確認
View customizeで設定
bull 画面の描画完了時にコードを実行する必要がある
(描画完了前だと要素が取得できない)ので
jQueryの$(function)関数を利用
$(function() ロード完了時に呼び出される $(top-menu gt ul) append(ltligtlta href=issuesgt全てのチケットltagtltligt) )
View customizeで設定
bull いったんプライベートで設定し動作を確認する
bull 動作OKでプライベートを外して全体に有効へ
コード(CSS)の書き方
JavaScriptの時と同じ
bull DOMインスペクタで変更したい要素を探す
bull CSSセレクタがどうなりそうかも確認しておく
bull 要素のスタイルを変えて試す
CSSをView customizeに設定
bull Path Patternは絞れるならば絞って問題ないが
CSSセレクタ自体で対象箇所が絞ってかけるので
全画面対象でもほとんど問題なし
bull そのままCSSを書くイメージ
CSSセレクタの書き方
CSSセレクタの確認
bull DOMインスペクタを使うことによってCSSセレ
クタはわかる
CSSセレクタの指定
bull bodyからすべてのパスを書く必要はなくid属性
が付与されているものを起点に考えると良い
bull id属性は一意のものになるので
body divwrapper divwrapper2 divwrapper3 divheader h1
divheader h1
bodyからのフルパス
こっちで十分
良く使うCSSセレクタ
他にもいろいろあるので詳しくない場合には
rdquoCSSセレクタrdquoで一度調べておくと良い
セレクタ名 書式 対象
型セレクタ E E要素
idセレクタ Emyid id名がmyidのE要素
classセレクタ Ewarning class名がwarinigのE要素
子孫セレクタ E F E要素の子孫にあたるF要素
子セレクタ E gt F E要素の子にあたるF要素 (子孫セレクタはE要素の配下ならばどこにあっても良いが子セレクタは1階層下のみが対象)
CSSセレクタで気を付けること
bull 必要のない要素と一致させない
bull 一致してしまう場合には条件をもっときつく
bull 単に要素を指定するのではなく要素+属性で指定す
る(idセレクタclassセレクタなど)
bull 子孫セレクタではなく子セレクタを使うなど
うまく動作しないときの 確認ポイント
Path patternがあっているか
bull 画面のソースを表示してView customizeで指定
したコードが埋め込まれているか確認
bull 埋め込まれていない場合Path patternが間違えている
のでPath patternを見直す
JavaScriptでエラーが発生していないか
bull 開発者ツールでエラーメッセージが出力されて
いないか確認
bull エラーメッセージが出力されていればそれをもとに
JavaScriptを修正
CSSが上書きされていないか
bull 複数のCSSが一致する場合その要素に対してど
のようなスタイルが適用されるかは優先度に
よって決まる
bull 該当の要素を詳細に指定している方が優先される
bull 型セレクタよりidセレクタで指定したものの方が優先
bull セレクタのレベルが同じならば後に書かれたものが
優先される
CSSが上書きされていないか
bull 上にあるほどもの優先度が高い
bull 取り消し線のものは優先度が高いものによって上書きさ
れているもの
チケットの入力フォームがらみは面倒
bull チケットの入力フォームはトラッカーまたはス
テータスが変わるとフォームの再読み込みが行
われる(all_attributes配下が差し替わる)
bull これはトラッカーやステータスによって入力可能な
フィールドや選択肢が変わるため
bull これにより入力フォームの各要素に対する変更(内
容変更やイベントの登録)はリセットされてし
まう
チケット入力フォームに対するイベント
bull 入力フォームが差し替わってもハンドリングでき
るようにする必要がある
bull 考え方としては親の要素に対してイベントを登
録しておいてイベントが発生した際に発生元が
該当のものか判断するようなイメージ
bull jQueryのon関数を使うと簡単に書ける
チケット入力フォームに対するイベント
bull ダメな例
これだと入力フォームが差し替わったタイミングで登録先の要素
(issue_status_id)が別物に変わってしまうのでうまく動かない
bull OKな例
documentに対してイベントハンドラを登録し該当の要素(issue_status_id)
が発生元だったら動作するように書くことによってissue_status_idが差し
替わってもハンドリング可能に
$(issue_status_id) on(change function(e) ステータス変更時に実施したい処理 )
$(document) on(change issue_status_id function(e) ステータス変更時に実施したい処理 )
チケット入力フォームに対する変更
bull 入力フォームが差し替わると変更した内容も元
に戻ってしまうので差し替わったタイミングで
処理する必要がある
bull たとえばカスタムフィールドの値に応じて他のカ
スタムフィールドで選択可能な値を絞る場合など
チケット入力フォームに対する変更
bull 差し替え処理を行っている関数をフックして差
し替え処理の後に処理を差し込む
bull replaceIssueFormWith 関数が差し替え処理を行って
いる関数なのでそこを対象に
関数を別名で退避 var _replaceIssueFormWith = replaceIssueFormWith 関数を中身を変更 退避した処理を呼び出すような関数として作り変える replaceIssueFormWith = function(html) 退避しておいた関数を呼び出し _replaceIssueFormWith(html) ここでフォーム差し替え後に やりたい処理を書く
View customize導入に向けて
試す環境を作る
bull プロジェクトで使っているRedmineにいきなり適
用するのは敷居が高いという場合にはまずは仮
想環境などで試してみる
bull Redmineの各バージョンのVagrant boxを公開している
のでそちらを使えばすぐに
vagrant init onozatyredmine-32
vagrant up
スクリプトを書いてみる
bull この資料を参考に書いてみる
bull スクリプトのサンプルは下記リポジトリに貯め
ていっているので参考に
bull httpsgithubcomonozatyredmine-view-customize-scripts
bull これからもだんだん増えていく予定
困ったときには
困ったときにはhellip
bull onozaty まで (follow me)
bull 即レスとまでいきませんが毎日確認してます
bull スクリプト例などもつぶやいています
困ったときにはhellip
bull こういうことできませんかといった質問もお
気軽にどうぞ
bull 一応全部答えている(できるものはBlogでも公開)つ
もりですが拾えてなかったらごめんなさい
おわり
チケットの入力フォーム
bull チケットの入力フォームはいろいろな画面で存
在するのでPathの指定だけだと面倒
bull issues1 チケット内容表示画面でも編集ボタンでフォームが
bull issuesnew 新規作成
bull issues1copy コピーによる作成画面
bull issuesgantt timesガントチャートなのでこれは一致させたくない
bull issues timesチケット一覧の場合 チケット登録時のValidationエラーの場合
Path pattern + JavaScriptで絞る
bull ldquoissuesrdquo と指定してJavaScript側でチケットの入
力フォームが無かったら処理しないようにする
bull チケットの入力フォームでしか存在しない要素
(issue-form とか)で確認する
bull 指定した要素が無かった場合でも処理がスキップされ
るように書いていればOK
jQueryの$(selector)関数
bull jQueryの$(selector)関数で返却されるjQueryオブジェクト
は一致する要素が無かった場合何も処理されないので
それを使っていれば大丈夫
bull 上記例だと入力フォームが無かった場合on関数でのイベント
登録が行われず何も処理されないことになる
(エラーにもならない)
$(issue-form input[type=submit]) on(click function(event) 送信ボタン押下時に何か処理を行わせる )
プロジェクト毎の指定
bull チケット詳細画面(issues1 など)はプロジェク
トをパスに持たないのでPathだけだとプロジェ
クトを指定できない
bull projectsprj1issues
bull projectsprj1issues1 timesこれはパスとして無効
bull issues1 チケット詳細はプロジェクト関係なく固定パス
body要素に付与されるclass属性で判断
bull body要素のclass属性に project-プロジェクト識別
子 が設定されるのでこれを使ってプロジェクト
を識別する
JavaScriptでプロジェクトを判定
bull jQueryのhasClass()関数で指定のクラス名が存在
するかチェックできる
bull またはclass属性を取り出して比較するなど
if ($(body)hasClass(project-prj1)) プロジェクト識別子がprj1の場合
CSSでプロジェクトを指定
bull CSSのセレクタでbodyのclassを利用するだけ
bodyproject-prj1 top-menu background-color 006400 dark green bodyproject-prj1 header background-color 008000 green
class属性が振られるもの
bull プロジェクト以外にもclass属性が振られるもの
が多々あるので対象画面や対象箇所を限定する
のに使用できる
class属性が振られるもの
bull body要素
bull controller-コントローラ名
bull action-アクション名
bull チケット一覧の各行
bull tracker-トラッカーID
bull status-ステータスID
bull priority-優先度ID
bull created-by-me
class属性が振られるもの
bull 他にもいろいろあるので詳しくは「Redmineの
画面で振られているclass属性について -
EnjoyStudy」にて
bull httpblogenjoyxstudycomentry20141011000000
コード(JavaScript)の書き方
ブラウザの開発者ツールを活用
ブラウザの開発者ツール
bull いきなりView customizeで設定するのではなく
ブラウザの開発者ツールを使いながら作成確認
する
bull DOMインスペクタ
bull コンソール
ブラウザの開発者ツール
bull 開発者ツールはChromeFirefoxIE それぞれ
のブラウザに標準でも入っている
bull Firefoxだと拡張機能のFirebugでもOK
bull 愛用しているので以降のキャプチャはFirebugにて
DOMインスペクタ
bull 選択した要素がHTML上でどういった構造で書か
れているか確認できる
bull ソース表示で見るより簡単
コンソール
bull 表示している画面に対してのJavaScriptの実行を手
軽に試せる
bull 補完も効く(複数行モードの場合はダメ)
コンソール
bull 複数行まとめて実行できるものもあり長めの
コードでも修正実行を繰り返し行える
実際に試してみる
例ヘッダにチケット一覧リンクを追加
bull やること
1 どこに要素を追加すればよいか調べる
2 その要素を起点にリンクを追加するコードを書く
3 うまくいったらView customize で設定
(いったんプライベートで)
4 動作することが確認できたらプライベートを外し
て全体に反映
追加位置を調べる
bull DOMインスペクタで追加したい位置を選択
追加位置を調べる
bull パスを確認
bull id属性がtop-menuとなっているdiv要素配下のul要素の
最後に追加してあげればよさそう
追加位置を調べる
bull コンソールで追加対象の要素を取得してみる
bull divtop-menu gt ul (id属性がtop-menuのdiv要素の子
のul要素) で取れた
リンクを追加するコードを書く
bull 対象のul要素の子要素としてリンクを追加する
コードを実行し思った動作になるまで確認
View customizeで設定
bull 画面の描画完了時にコードを実行する必要がある
(描画完了前だと要素が取得できない)ので
jQueryの$(function)関数を利用
$(function() ロード完了時に呼び出される $(top-menu gt ul) append(ltligtlta href=issuesgt全てのチケットltagtltligt) )
View customizeで設定
bull いったんプライベートで設定し動作を確認する
bull 動作OKでプライベートを外して全体に有効へ
コード(CSS)の書き方
JavaScriptの時と同じ
bull DOMインスペクタで変更したい要素を探す
bull CSSセレクタがどうなりそうかも確認しておく
bull 要素のスタイルを変えて試す
CSSをView customizeに設定
bull Path Patternは絞れるならば絞って問題ないが
CSSセレクタ自体で対象箇所が絞ってかけるので
全画面対象でもほとんど問題なし
bull そのままCSSを書くイメージ
CSSセレクタの書き方
CSSセレクタの確認
bull DOMインスペクタを使うことによってCSSセレ
クタはわかる
CSSセレクタの指定
bull bodyからすべてのパスを書く必要はなくid属性
が付与されているものを起点に考えると良い
bull id属性は一意のものになるので
body divwrapper divwrapper2 divwrapper3 divheader h1
divheader h1
bodyからのフルパス
こっちで十分
良く使うCSSセレクタ
他にもいろいろあるので詳しくない場合には
rdquoCSSセレクタrdquoで一度調べておくと良い
セレクタ名 書式 対象
型セレクタ E E要素
idセレクタ Emyid id名がmyidのE要素
classセレクタ Ewarning class名がwarinigのE要素
子孫セレクタ E F E要素の子孫にあたるF要素
子セレクタ E gt F E要素の子にあたるF要素 (子孫セレクタはE要素の配下ならばどこにあっても良いが子セレクタは1階層下のみが対象)
CSSセレクタで気を付けること
bull 必要のない要素と一致させない
bull 一致してしまう場合には条件をもっときつく
bull 単に要素を指定するのではなく要素+属性で指定す
る(idセレクタclassセレクタなど)
bull 子孫セレクタではなく子セレクタを使うなど
うまく動作しないときの 確認ポイント
Path patternがあっているか
bull 画面のソースを表示してView customizeで指定
したコードが埋め込まれているか確認
bull 埋め込まれていない場合Path patternが間違えている
のでPath patternを見直す
JavaScriptでエラーが発生していないか
bull 開発者ツールでエラーメッセージが出力されて
いないか確認
bull エラーメッセージが出力されていればそれをもとに
JavaScriptを修正
CSSが上書きされていないか
bull 複数のCSSが一致する場合その要素に対してど
のようなスタイルが適用されるかは優先度に
よって決まる
bull 該当の要素を詳細に指定している方が優先される
bull 型セレクタよりidセレクタで指定したものの方が優先
bull セレクタのレベルが同じならば後に書かれたものが
優先される
CSSが上書きされていないか
bull 上にあるほどもの優先度が高い
bull 取り消し線のものは優先度が高いものによって上書きさ
れているもの
チケットの入力フォームがらみは面倒
bull チケットの入力フォームはトラッカーまたはス
テータスが変わるとフォームの再読み込みが行
われる(all_attributes配下が差し替わる)
bull これはトラッカーやステータスによって入力可能な
フィールドや選択肢が変わるため
bull これにより入力フォームの各要素に対する変更(内
容変更やイベントの登録)はリセットされてし
まう
チケット入力フォームに対するイベント
bull 入力フォームが差し替わってもハンドリングでき
るようにする必要がある
bull 考え方としては親の要素に対してイベントを登
録しておいてイベントが発生した際に発生元が
該当のものか判断するようなイメージ
bull jQueryのon関数を使うと簡単に書ける
チケット入力フォームに対するイベント
bull ダメな例
これだと入力フォームが差し替わったタイミングで登録先の要素
(issue_status_id)が別物に変わってしまうのでうまく動かない
bull OKな例
documentに対してイベントハンドラを登録し該当の要素(issue_status_id)
が発生元だったら動作するように書くことによってissue_status_idが差し
替わってもハンドリング可能に
$(issue_status_id) on(change function(e) ステータス変更時に実施したい処理 )
$(document) on(change issue_status_id function(e) ステータス変更時に実施したい処理 )
チケット入力フォームに対する変更
bull 入力フォームが差し替わると変更した内容も元
に戻ってしまうので差し替わったタイミングで
処理する必要がある
bull たとえばカスタムフィールドの値に応じて他のカ
スタムフィールドで選択可能な値を絞る場合など
チケット入力フォームに対する変更
bull 差し替え処理を行っている関数をフックして差
し替え処理の後に処理を差し込む
bull replaceIssueFormWith 関数が差し替え処理を行って
いる関数なのでそこを対象に
関数を別名で退避 var _replaceIssueFormWith = replaceIssueFormWith 関数を中身を変更 退避した処理を呼び出すような関数として作り変える replaceIssueFormWith = function(html) 退避しておいた関数を呼び出し _replaceIssueFormWith(html) ここでフォーム差し替え後に やりたい処理を書く
View customize導入に向けて
試す環境を作る
bull プロジェクトで使っているRedmineにいきなり適
用するのは敷居が高いという場合にはまずは仮
想環境などで試してみる
bull Redmineの各バージョンのVagrant boxを公開している
のでそちらを使えばすぐに
vagrant init onozatyredmine-32
vagrant up
スクリプトを書いてみる
bull この資料を参考に書いてみる
bull スクリプトのサンプルは下記リポジトリに貯め
ていっているので参考に
bull httpsgithubcomonozatyredmine-view-customize-scripts
bull これからもだんだん増えていく予定
困ったときには
困ったときにはhellip
bull onozaty まで (follow me)
bull 即レスとまでいきませんが毎日確認してます
bull スクリプト例などもつぶやいています
困ったときにはhellip
bull こういうことできませんかといった質問もお
気軽にどうぞ
bull 一応全部答えている(できるものはBlogでも公開)つ
もりですが拾えてなかったらごめんなさい
おわり
Path pattern + JavaScriptで絞る
bull ldquoissuesrdquo と指定してJavaScript側でチケットの入
力フォームが無かったら処理しないようにする
bull チケットの入力フォームでしか存在しない要素
(issue-form とか)で確認する
bull 指定した要素が無かった場合でも処理がスキップされ
るように書いていればOK
jQueryの$(selector)関数
bull jQueryの$(selector)関数で返却されるjQueryオブジェクト
は一致する要素が無かった場合何も処理されないので
それを使っていれば大丈夫
bull 上記例だと入力フォームが無かった場合on関数でのイベント
登録が行われず何も処理されないことになる
(エラーにもならない)
$(issue-form input[type=submit]) on(click function(event) 送信ボタン押下時に何か処理を行わせる )
プロジェクト毎の指定
bull チケット詳細画面(issues1 など)はプロジェク
トをパスに持たないのでPathだけだとプロジェ
クトを指定できない
bull projectsprj1issues
bull projectsprj1issues1 timesこれはパスとして無効
bull issues1 チケット詳細はプロジェクト関係なく固定パス
body要素に付与されるclass属性で判断
bull body要素のclass属性に project-プロジェクト識別
子 が設定されるのでこれを使ってプロジェクト
を識別する
JavaScriptでプロジェクトを判定
bull jQueryのhasClass()関数で指定のクラス名が存在
するかチェックできる
bull またはclass属性を取り出して比較するなど
if ($(body)hasClass(project-prj1)) プロジェクト識別子がprj1の場合
CSSでプロジェクトを指定
bull CSSのセレクタでbodyのclassを利用するだけ
bodyproject-prj1 top-menu background-color 006400 dark green bodyproject-prj1 header background-color 008000 green
class属性が振られるもの
bull プロジェクト以外にもclass属性が振られるもの
が多々あるので対象画面や対象箇所を限定する
のに使用できる
class属性が振られるもの
bull body要素
bull controller-コントローラ名
bull action-アクション名
bull チケット一覧の各行
bull tracker-トラッカーID
bull status-ステータスID
bull priority-優先度ID
bull created-by-me
class属性が振られるもの
bull 他にもいろいろあるので詳しくは「Redmineの
画面で振られているclass属性について -
EnjoyStudy」にて
bull httpblogenjoyxstudycomentry20141011000000
コード(JavaScript)の書き方
ブラウザの開発者ツールを活用
ブラウザの開発者ツール
bull いきなりView customizeで設定するのではなく
ブラウザの開発者ツールを使いながら作成確認
する
bull DOMインスペクタ
bull コンソール
ブラウザの開発者ツール
bull 開発者ツールはChromeFirefoxIE それぞれ
のブラウザに標準でも入っている
bull Firefoxだと拡張機能のFirebugでもOK
bull 愛用しているので以降のキャプチャはFirebugにて
DOMインスペクタ
bull 選択した要素がHTML上でどういった構造で書か
れているか確認できる
bull ソース表示で見るより簡単
コンソール
bull 表示している画面に対してのJavaScriptの実行を手
軽に試せる
bull 補完も効く(複数行モードの場合はダメ)
コンソール
bull 複数行まとめて実行できるものもあり長めの
コードでも修正実行を繰り返し行える
実際に試してみる
例ヘッダにチケット一覧リンクを追加
bull やること
1 どこに要素を追加すればよいか調べる
2 その要素を起点にリンクを追加するコードを書く
3 うまくいったらView customize で設定
(いったんプライベートで)
4 動作することが確認できたらプライベートを外し
て全体に反映
追加位置を調べる
bull DOMインスペクタで追加したい位置を選択
追加位置を調べる
bull パスを確認
bull id属性がtop-menuとなっているdiv要素配下のul要素の
最後に追加してあげればよさそう
追加位置を調べる
bull コンソールで追加対象の要素を取得してみる
bull divtop-menu gt ul (id属性がtop-menuのdiv要素の子
のul要素) で取れた
リンクを追加するコードを書く
bull 対象のul要素の子要素としてリンクを追加する
コードを実行し思った動作になるまで確認
View customizeで設定
bull 画面の描画完了時にコードを実行する必要がある
(描画完了前だと要素が取得できない)ので
jQueryの$(function)関数を利用
$(function() ロード完了時に呼び出される $(top-menu gt ul) append(ltligtlta href=issuesgt全てのチケットltagtltligt) )
View customizeで設定
bull いったんプライベートで設定し動作を確認する
bull 動作OKでプライベートを外して全体に有効へ
コード(CSS)の書き方
JavaScriptの時と同じ
bull DOMインスペクタで変更したい要素を探す
bull CSSセレクタがどうなりそうかも確認しておく
bull 要素のスタイルを変えて試す
CSSをView customizeに設定
bull Path Patternは絞れるならば絞って問題ないが
CSSセレクタ自体で対象箇所が絞ってかけるので
全画面対象でもほとんど問題なし
bull そのままCSSを書くイメージ
CSSセレクタの書き方
CSSセレクタの確認
bull DOMインスペクタを使うことによってCSSセレ
クタはわかる
CSSセレクタの指定
bull bodyからすべてのパスを書く必要はなくid属性
が付与されているものを起点に考えると良い
bull id属性は一意のものになるので
body divwrapper divwrapper2 divwrapper3 divheader h1
divheader h1
bodyからのフルパス
こっちで十分
良く使うCSSセレクタ
他にもいろいろあるので詳しくない場合には
rdquoCSSセレクタrdquoで一度調べておくと良い
セレクタ名 書式 対象
型セレクタ E E要素
idセレクタ Emyid id名がmyidのE要素
classセレクタ Ewarning class名がwarinigのE要素
子孫セレクタ E F E要素の子孫にあたるF要素
子セレクタ E gt F E要素の子にあたるF要素 (子孫セレクタはE要素の配下ならばどこにあっても良いが子セレクタは1階層下のみが対象)
CSSセレクタで気を付けること
bull 必要のない要素と一致させない
bull 一致してしまう場合には条件をもっときつく
bull 単に要素を指定するのではなく要素+属性で指定す
る(idセレクタclassセレクタなど)
bull 子孫セレクタではなく子セレクタを使うなど
うまく動作しないときの 確認ポイント
Path patternがあっているか
bull 画面のソースを表示してView customizeで指定
したコードが埋め込まれているか確認
bull 埋め込まれていない場合Path patternが間違えている
のでPath patternを見直す
JavaScriptでエラーが発生していないか
bull 開発者ツールでエラーメッセージが出力されて
いないか確認
bull エラーメッセージが出力されていればそれをもとに
JavaScriptを修正
CSSが上書きされていないか
bull 複数のCSSが一致する場合その要素に対してど
のようなスタイルが適用されるかは優先度に
よって決まる
bull 該当の要素を詳細に指定している方が優先される
bull 型セレクタよりidセレクタで指定したものの方が優先
bull セレクタのレベルが同じならば後に書かれたものが
優先される
CSSが上書きされていないか
bull 上にあるほどもの優先度が高い
bull 取り消し線のものは優先度が高いものによって上書きさ
れているもの
チケットの入力フォームがらみは面倒
bull チケットの入力フォームはトラッカーまたはス
テータスが変わるとフォームの再読み込みが行
われる(all_attributes配下が差し替わる)
bull これはトラッカーやステータスによって入力可能な
フィールドや選択肢が変わるため
bull これにより入力フォームの各要素に対する変更(内
容変更やイベントの登録)はリセットされてし
まう
チケット入力フォームに対するイベント
bull 入力フォームが差し替わってもハンドリングでき
るようにする必要がある
bull 考え方としては親の要素に対してイベントを登
録しておいてイベントが発生した際に発生元が
該当のものか判断するようなイメージ
bull jQueryのon関数を使うと簡単に書ける
チケット入力フォームに対するイベント
bull ダメな例
これだと入力フォームが差し替わったタイミングで登録先の要素
(issue_status_id)が別物に変わってしまうのでうまく動かない
bull OKな例
documentに対してイベントハンドラを登録し該当の要素(issue_status_id)
が発生元だったら動作するように書くことによってissue_status_idが差し
替わってもハンドリング可能に
$(issue_status_id) on(change function(e) ステータス変更時に実施したい処理 )
$(document) on(change issue_status_id function(e) ステータス変更時に実施したい処理 )
チケット入力フォームに対する変更
bull 入力フォームが差し替わると変更した内容も元
に戻ってしまうので差し替わったタイミングで
処理する必要がある
bull たとえばカスタムフィールドの値に応じて他のカ
スタムフィールドで選択可能な値を絞る場合など
チケット入力フォームに対する変更
bull 差し替え処理を行っている関数をフックして差
し替え処理の後に処理を差し込む
bull replaceIssueFormWith 関数が差し替え処理を行って
いる関数なのでそこを対象に
関数を別名で退避 var _replaceIssueFormWith = replaceIssueFormWith 関数を中身を変更 退避した処理を呼び出すような関数として作り変える replaceIssueFormWith = function(html) 退避しておいた関数を呼び出し _replaceIssueFormWith(html) ここでフォーム差し替え後に やりたい処理を書く
View customize導入に向けて
試す環境を作る
bull プロジェクトで使っているRedmineにいきなり適
用するのは敷居が高いという場合にはまずは仮
想環境などで試してみる
bull Redmineの各バージョンのVagrant boxを公開している
のでそちらを使えばすぐに
vagrant init onozatyredmine-32
vagrant up
スクリプトを書いてみる
bull この資料を参考に書いてみる
bull スクリプトのサンプルは下記リポジトリに貯め
ていっているので参考に
bull httpsgithubcomonozatyredmine-view-customize-scripts
bull これからもだんだん増えていく予定
困ったときには
困ったときにはhellip
bull onozaty まで (follow me)
bull 即レスとまでいきませんが毎日確認してます
bull スクリプト例などもつぶやいています
困ったときにはhellip
bull こういうことできませんかといった質問もお
気軽にどうぞ
bull 一応全部答えている(できるものはBlogでも公開)つ
もりですが拾えてなかったらごめんなさい
おわり
jQueryの$(selector)関数
bull jQueryの$(selector)関数で返却されるjQueryオブジェクト
は一致する要素が無かった場合何も処理されないので
それを使っていれば大丈夫
bull 上記例だと入力フォームが無かった場合on関数でのイベント
登録が行われず何も処理されないことになる
(エラーにもならない)
$(issue-form input[type=submit]) on(click function(event) 送信ボタン押下時に何か処理を行わせる )
プロジェクト毎の指定
bull チケット詳細画面(issues1 など)はプロジェク
トをパスに持たないのでPathだけだとプロジェ
クトを指定できない
bull projectsprj1issues
bull projectsprj1issues1 timesこれはパスとして無効
bull issues1 チケット詳細はプロジェクト関係なく固定パス
body要素に付与されるclass属性で判断
bull body要素のclass属性に project-プロジェクト識別
子 が設定されるのでこれを使ってプロジェクト
を識別する
JavaScriptでプロジェクトを判定
bull jQueryのhasClass()関数で指定のクラス名が存在
するかチェックできる
bull またはclass属性を取り出して比較するなど
if ($(body)hasClass(project-prj1)) プロジェクト識別子がprj1の場合
CSSでプロジェクトを指定
bull CSSのセレクタでbodyのclassを利用するだけ
bodyproject-prj1 top-menu background-color 006400 dark green bodyproject-prj1 header background-color 008000 green
class属性が振られるもの
bull プロジェクト以外にもclass属性が振られるもの
が多々あるので対象画面や対象箇所を限定する
のに使用できる
class属性が振られるもの
bull body要素
bull controller-コントローラ名
bull action-アクション名
bull チケット一覧の各行
bull tracker-トラッカーID
bull status-ステータスID
bull priority-優先度ID
bull created-by-me
class属性が振られるもの
bull 他にもいろいろあるので詳しくは「Redmineの
画面で振られているclass属性について -
EnjoyStudy」にて
bull httpblogenjoyxstudycomentry20141011000000
コード(JavaScript)の書き方
ブラウザの開発者ツールを活用
ブラウザの開発者ツール
bull いきなりView customizeで設定するのではなく
ブラウザの開発者ツールを使いながら作成確認
する
bull DOMインスペクタ
bull コンソール
ブラウザの開発者ツール
bull 開発者ツールはChromeFirefoxIE それぞれ
のブラウザに標準でも入っている
bull Firefoxだと拡張機能のFirebugでもOK
bull 愛用しているので以降のキャプチャはFirebugにて
DOMインスペクタ
bull 選択した要素がHTML上でどういった構造で書か
れているか確認できる
bull ソース表示で見るより簡単
コンソール
bull 表示している画面に対してのJavaScriptの実行を手
軽に試せる
bull 補完も効く(複数行モードの場合はダメ)
コンソール
bull 複数行まとめて実行できるものもあり長めの
コードでも修正実行を繰り返し行える
実際に試してみる
例ヘッダにチケット一覧リンクを追加
bull やること
1 どこに要素を追加すればよいか調べる
2 その要素を起点にリンクを追加するコードを書く
3 うまくいったらView customize で設定
(いったんプライベートで)
4 動作することが確認できたらプライベートを外し
て全体に反映
追加位置を調べる
bull DOMインスペクタで追加したい位置を選択
追加位置を調べる
bull パスを確認
bull id属性がtop-menuとなっているdiv要素配下のul要素の
最後に追加してあげればよさそう
追加位置を調べる
bull コンソールで追加対象の要素を取得してみる
bull divtop-menu gt ul (id属性がtop-menuのdiv要素の子
のul要素) で取れた
リンクを追加するコードを書く
bull 対象のul要素の子要素としてリンクを追加する
コードを実行し思った動作になるまで確認
View customizeで設定
bull 画面の描画完了時にコードを実行する必要がある
(描画完了前だと要素が取得できない)ので
jQueryの$(function)関数を利用
$(function() ロード完了時に呼び出される $(top-menu gt ul) append(ltligtlta href=issuesgt全てのチケットltagtltligt) )
View customizeで設定
bull いったんプライベートで設定し動作を確認する
bull 動作OKでプライベートを外して全体に有効へ
コード(CSS)の書き方
JavaScriptの時と同じ
bull DOMインスペクタで変更したい要素を探す
bull CSSセレクタがどうなりそうかも確認しておく
bull 要素のスタイルを変えて試す
CSSをView customizeに設定
bull Path Patternは絞れるならば絞って問題ないが
CSSセレクタ自体で対象箇所が絞ってかけるので
全画面対象でもほとんど問題なし
bull そのままCSSを書くイメージ
CSSセレクタの書き方
CSSセレクタの確認
bull DOMインスペクタを使うことによってCSSセレ
クタはわかる
CSSセレクタの指定
bull bodyからすべてのパスを書く必要はなくid属性
が付与されているものを起点に考えると良い
bull id属性は一意のものになるので
body divwrapper divwrapper2 divwrapper3 divheader h1
divheader h1
bodyからのフルパス
こっちで十分
良く使うCSSセレクタ
他にもいろいろあるので詳しくない場合には
rdquoCSSセレクタrdquoで一度調べておくと良い
セレクタ名 書式 対象
型セレクタ E E要素
idセレクタ Emyid id名がmyidのE要素
classセレクタ Ewarning class名がwarinigのE要素
子孫セレクタ E F E要素の子孫にあたるF要素
子セレクタ E gt F E要素の子にあたるF要素 (子孫セレクタはE要素の配下ならばどこにあっても良いが子セレクタは1階層下のみが対象)
CSSセレクタで気を付けること
bull 必要のない要素と一致させない
bull 一致してしまう場合には条件をもっときつく
bull 単に要素を指定するのではなく要素+属性で指定す
る(idセレクタclassセレクタなど)
bull 子孫セレクタではなく子セレクタを使うなど
うまく動作しないときの 確認ポイント
Path patternがあっているか
bull 画面のソースを表示してView customizeで指定
したコードが埋め込まれているか確認
bull 埋め込まれていない場合Path patternが間違えている
のでPath patternを見直す
JavaScriptでエラーが発生していないか
bull 開発者ツールでエラーメッセージが出力されて
いないか確認
bull エラーメッセージが出力されていればそれをもとに
JavaScriptを修正
CSSが上書きされていないか
bull 複数のCSSが一致する場合その要素に対してど
のようなスタイルが適用されるかは優先度に
よって決まる
bull 該当の要素を詳細に指定している方が優先される
bull 型セレクタよりidセレクタで指定したものの方が優先
bull セレクタのレベルが同じならば後に書かれたものが
優先される
CSSが上書きされていないか
bull 上にあるほどもの優先度が高い
bull 取り消し線のものは優先度が高いものによって上書きさ
れているもの
チケットの入力フォームがらみは面倒
bull チケットの入力フォームはトラッカーまたはス
テータスが変わるとフォームの再読み込みが行
われる(all_attributes配下が差し替わる)
bull これはトラッカーやステータスによって入力可能な
フィールドや選択肢が変わるため
bull これにより入力フォームの各要素に対する変更(内
容変更やイベントの登録)はリセットされてし
まう
チケット入力フォームに対するイベント
bull 入力フォームが差し替わってもハンドリングでき
るようにする必要がある
bull 考え方としては親の要素に対してイベントを登
録しておいてイベントが発生した際に発生元が
該当のものか判断するようなイメージ
bull jQueryのon関数を使うと簡単に書ける
チケット入力フォームに対するイベント
bull ダメな例
これだと入力フォームが差し替わったタイミングで登録先の要素
(issue_status_id)が別物に変わってしまうのでうまく動かない
bull OKな例
documentに対してイベントハンドラを登録し該当の要素(issue_status_id)
が発生元だったら動作するように書くことによってissue_status_idが差し
替わってもハンドリング可能に
$(issue_status_id) on(change function(e) ステータス変更時に実施したい処理 )
$(document) on(change issue_status_id function(e) ステータス変更時に実施したい処理 )
チケット入力フォームに対する変更
bull 入力フォームが差し替わると変更した内容も元
に戻ってしまうので差し替わったタイミングで
処理する必要がある
bull たとえばカスタムフィールドの値に応じて他のカ
スタムフィールドで選択可能な値を絞る場合など
チケット入力フォームに対する変更
bull 差し替え処理を行っている関数をフックして差
し替え処理の後に処理を差し込む
bull replaceIssueFormWith 関数が差し替え処理を行って
いる関数なのでそこを対象に
関数を別名で退避 var _replaceIssueFormWith = replaceIssueFormWith 関数を中身を変更 退避した処理を呼び出すような関数として作り変える replaceIssueFormWith = function(html) 退避しておいた関数を呼び出し _replaceIssueFormWith(html) ここでフォーム差し替え後に やりたい処理を書く
View customize導入に向けて
試す環境を作る
bull プロジェクトで使っているRedmineにいきなり適
用するのは敷居が高いという場合にはまずは仮
想環境などで試してみる
bull Redmineの各バージョンのVagrant boxを公開している
のでそちらを使えばすぐに
vagrant init onozatyredmine-32
vagrant up
スクリプトを書いてみる
bull この資料を参考に書いてみる
bull スクリプトのサンプルは下記リポジトリに貯め
ていっているので参考に
bull httpsgithubcomonozatyredmine-view-customize-scripts
bull これからもだんだん増えていく予定
困ったときには
困ったときにはhellip
bull onozaty まで (follow me)
bull 即レスとまでいきませんが毎日確認してます
bull スクリプト例などもつぶやいています
困ったときにはhellip
bull こういうことできませんかといった質問もお
気軽にどうぞ
bull 一応全部答えている(できるものはBlogでも公開)つ
もりですが拾えてなかったらごめんなさい
おわり
プロジェクト毎の指定
bull チケット詳細画面(issues1 など)はプロジェク
トをパスに持たないのでPathだけだとプロジェ
クトを指定できない
bull projectsprj1issues
bull projectsprj1issues1 timesこれはパスとして無効
bull issues1 チケット詳細はプロジェクト関係なく固定パス
body要素に付与されるclass属性で判断
bull body要素のclass属性に project-プロジェクト識別
子 が設定されるのでこれを使ってプロジェクト
を識別する
JavaScriptでプロジェクトを判定
bull jQueryのhasClass()関数で指定のクラス名が存在
するかチェックできる
bull またはclass属性を取り出して比較するなど
if ($(body)hasClass(project-prj1)) プロジェクト識別子がprj1の場合
CSSでプロジェクトを指定
bull CSSのセレクタでbodyのclassを利用するだけ
bodyproject-prj1 top-menu background-color 006400 dark green bodyproject-prj1 header background-color 008000 green
class属性が振られるもの
bull プロジェクト以外にもclass属性が振られるもの
が多々あるので対象画面や対象箇所を限定する
のに使用できる
class属性が振られるもの
bull body要素
bull controller-コントローラ名
bull action-アクション名
bull チケット一覧の各行
bull tracker-トラッカーID
bull status-ステータスID
bull priority-優先度ID
bull created-by-me
class属性が振られるもの
bull 他にもいろいろあるので詳しくは「Redmineの
画面で振られているclass属性について -
EnjoyStudy」にて
bull httpblogenjoyxstudycomentry20141011000000
コード(JavaScript)の書き方
ブラウザの開発者ツールを活用
ブラウザの開発者ツール
bull いきなりView customizeで設定するのではなく
ブラウザの開発者ツールを使いながら作成確認
する
bull DOMインスペクタ
bull コンソール
ブラウザの開発者ツール
bull 開発者ツールはChromeFirefoxIE それぞれ
のブラウザに標準でも入っている
bull Firefoxだと拡張機能のFirebugでもOK
bull 愛用しているので以降のキャプチャはFirebugにて
DOMインスペクタ
bull 選択した要素がHTML上でどういった構造で書か
れているか確認できる
bull ソース表示で見るより簡単
コンソール
bull 表示している画面に対してのJavaScriptの実行を手
軽に試せる
bull 補完も効く(複数行モードの場合はダメ)
コンソール
bull 複数行まとめて実行できるものもあり長めの
コードでも修正実行を繰り返し行える
実際に試してみる
例ヘッダにチケット一覧リンクを追加
bull やること
1 どこに要素を追加すればよいか調べる
2 その要素を起点にリンクを追加するコードを書く
3 うまくいったらView customize で設定
(いったんプライベートで)
4 動作することが確認できたらプライベートを外し
て全体に反映
追加位置を調べる
bull DOMインスペクタで追加したい位置を選択
追加位置を調べる
bull パスを確認
bull id属性がtop-menuとなっているdiv要素配下のul要素の
最後に追加してあげればよさそう
追加位置を調べる
bull コンソールで追加対象の要素を取得してみる
bull divtop-menu gt ul (id属性がtop-menuのdiv要素の子
のul要素) で取れた
リンクを追加するコードを書く
bull 対象のul要素の子要素としてリンクを追加する
コードを実行し思った動作になるまで確認
View customizeで設定
bull 画面の描画完了時にコードを実行する必要がある
(描画完了前だと要素が取得できない)ので
jQueryの$(function)関数を利用
$(function() ロード完了時に呼び出される $(top-menu gt ul) append(ltligtlta href=issuesgt全てのチケットltagtltligt) )
View customizeで設定
bull いったんプライベートで設定し動作を確認する
bull 動作OKでプライベートを外して全体に有効へ
コード(CSS)の書き方
JavaScriptの時と同じ
bull DOMインスペクタで変更したい要素を探す
bull CSSセレクタがどうなりそうかも確認しておく
bull 要素のスタイルを変えて試す
CSSをView customizeに設定
bull Path Patternは絞れるならば絞って問題ないが
CSSセレクタ自体で対象箇所が絞ってかけるので
全画面対象でもほとんど問題なし
bull そのままCSSを書くイメージ
CSSセレクタの書き方
CSSセレクタの確認
bull DOMインスペクタを使うことによってCSSセレ
クタはわかる
CSSセレクタの指定
bull bodyからすべてのパスを書く必要はなくid属性
が付与されているものを起点に考えると良い
bull id属性は一意のものになるので
body divwrapper divwrapper2 divwrapper3 divheader h1
divheader h1
bodyからのフルパス
こっちで十分
良く使うCSSセレクタ
他にもいろいろあるので詳しくない場合には
rdquoCSSセレクタrdquoで一度調べておくと良い
セレクタ名 書式 対象
型セレクタ E E要素
idセレクタ Emyid id名がmyidのE要素
classセレクタ Ewarning class名がwarinigのE要素
子孫セレクタ E F E要素の子孫にあたるF要素
子セレクタ E gt F E要素の子にあたるF要素 (子孫セレクタはE要素の配下ならばどこにあっても良いが子セレクタは1階層下のみが対象)
CSSセレクタで気を付けること
bull 必要のない要素と一致させない
bull 一致してしまう場合には条件をもっときつく
bull 単に要素を指定するのではなく要素+属性で指定す
る(idセレクタclassセレクタなど)
bull 子孫セレクタではなく子セレクタを使うなど
うまく動作しないときの 確認ポイント
Path patternがあっているか
bull 画面のソースを表示してView customizeで指定
したコードが埋め込まれているか確認
bull 埋め込まれていない場合Path patternが間違えている
のでPath patternを見直す
JavaScriptでエラーが発生していないか
bull 開発者ツールでエラーメッセージが出力されて
いないか確認
bull エラーメッセージが出力されていればそれをもとに
JavaScriptを修正
CSSが上書きされていないか
bull 複数のCSSが一致する場合その要素に対してど
のようなスタイルが適用されるかは優先度に
よって決まる
bull 該当の要素を詳細に指定している方が優先される
bull 型セレクタよりidセレクタで指定したものの方が優先
bull セレクタのレベルが同じならば後に書かれたものが
優先される
CSSが上書きされていないか
bull 上にあるほどもの優先度が高い
bull 取り消し線のものは優先度が高いものによって上書きさ
れているもの
チケットの入力フォームがらみは面倒
bull チケットの入力フォームはトラッカーまたはス
テータスが変わるとフォームの再読み込みが行
われる(all_attributes配下が差し替わる)
bull これはトラッカーやステータスによって入力可能な
フィールドや選択肢が変わるため
bull これにより入力フォームの各要素に対する変更(内
容変更やイベントの登録)はリセットされてし
まう
チケット入力フォームに対するイベント
bull 入力フォームが差し替わってもハンドリングでき
るようにする必要がある
bull 考え方としては親の要素に対してイベントを登
録しておいてイベントが発生した際に発生元が
該当のものか判断するようなイメージ
bull jQueryのon関数を使うと簡単に書ける
チケット入力フォームに対するイベント
bull ダメな例
これだと入力フォームが差し替わったタイミングで登録先の要素
(issue_status_id)が別物に変わってしまうのでうまく動かない
bull OKな例
documentに対してイベントハンドラを登録し該当の要素(issue_status_id)
が発生元だったら動作するように書くことによってissue_status_idが差し
替わってもハンドリング可能に
$(issue_status_id) on(change function(e) ステータス変更時に実施したい処理 )
$(document) on(change issue_status_id function(e) ステータス変更時に実施したい処理 )
チケット入力フォームに対する変更
bull 入力フォームが差し替わると変更した内容も元
に戻ってしまうので差し替わったタイミングで
処理する必要がある
bull たとえばカスタムフィールドの値に応じて他のカ
スタムフィールドで選択可能な値を絞る場合など
チケット入力フォームに対する変更
bull 差し替え処理を行っている関数をフックして差
し替え処理の後に処理を差し込む
bull replaceIssueFormWith 関数が差し替え処理を行って
いる関数なのでそこを対象に
関数を別名で退避 var _replaceIssueFormWith = replaceIssueFormWith 関数を中身を変更 退避した処理を呼び出すような関数として作り変える replaceIssueFormWith = function(html) 退避しておいた関数を呼び出し _replaceIssueFormWith(html) ここでフォーム差し替え後に やりたい処理を書く
View customize導入に向けて
試す環境を作る
bull プロジェクトで使っているRedmineにいきなり適
用するのは敷居が高いという場合にはまずは仮
想環境などで試してみる
bull Redmineの各バージョンのVagrant boxを公開している
のでそちらを使えばすぐに
vagrant init onozatyredmine-32
vagrant up
スクリプトを書いてみる
bull この資料を参考に書いてみる
bull スクリプトのサンプルは下記リポジトリに貯め
ていっているので参考に
bull httpsgithubcomonozatyredmine-view-customize-scripts
bull これからもだんだん増えていく予定
困ったときには
困ったときにはhellip
bull onozaty まで (follow me)
bull 即レスとまでいきませんが毎日確認してます
bull スクリプト例などもつぶやいています
困ったときにはhellip
bull こういうことできませんかといった質問もお
気軽にどうぞ
bull 一応全部答えている(できるものはBlogでも公開)つ
もりですが拾えてなかったらごめんなさい
おわり
body要素に付与されるclass属性で判断
bull body要素のclass属性に project-プロジェクト識別
子 が設定されるのでこれを使ってプロジェクト
を識別する
JavaScriptでプロジェクトを判定
bull jQueryのhasClass()関数で指定のクラス名が存在
するかチェックできる
bull またはclass属性を取り出して比較するなど
if ($(body)hasClass(project-prj1)) プロジェクト識別子がprj1の場合
CSSでプロジェクトを指定
bull CSSのセレクタでbodyのclassを利用するだけ
bodyproject-prj1 top-menu background-color 006400 dark green bodyproject-prj1 header background-color 008000 green
class属性が振られるもの
bull プロジェクト以外にもclass属性が振られるもの
が多々あるので対象画面や対象箇所を限定する
のに使用できる
class属性が振られるもの
bull body要素
bull controller-コントローラ名
bull action-アクション名
bull チケット一覧の各行
bull tracker-トラッカーID
bull status-ステータスID
bull priority-優先度ID
bull created-by-me
class属性が振られるもの
bull 他にもいろいろあるので詳しくは「Redmineの
画面で振られているclass属性について -
EnjoyStudy」にて
bull httpblogenjoyxstudycomentry20141011000000
コード(JavaScript)の書き方
ブラウザの開発者ツールを活用
ブラウザの開発者ツール
bull いきなりView customizeで設定するのではなく
ブラウザの開発者ツールを使いながら作成確認
する
bull DOMインスペクタ
bull コンソール
ブラウザの開発者ツール
bull 開発者ツールはChromeFirefoxIE それぞれ
のブラウザに標準でも入っている
bull Firefoxだと拡張機能のFirebugでもOK
bull 愛用しているので以降のキャプチャはFirebugにて
DOMインスペクタ
bull 選択した要素がHTML上でどういった構造で書か
れているか確認できる
bull ソース表示で見るより簡単
コンソール
bull 表示している画面に対してのJavaScriptの実行を手
軽に試せる
bull 補完も効く(複数行モードの場合はダメ)
コンソール
bull 複数行まとめて実行できるものもあり長めの
コードでも修正実行を繰り返し行える
実際に試してみる
例ヘッダにチケット一覧リンクを追加
bull やること
1 どこに要素を追加すればよいか調べる
2 その要素を起点にリンクを追加するコードを書く
3 うまくいったらView customize で設定
(いったんプライベートで)
4 動作することが確認できたらプライベートを外し
て全体に反映
追加位置を調べる
bull DOMインスペクタで追加したい位置を選択
追加位置を調べる
bull パスを確認
bull id属性がtop-menuとなっているdiv要素配下のul要素の
最後に追加してあげればよさそう
追加位置を調べる
bull コンソールで追加対象の要素を取得してみる
bull divtop-menu gt ul (id属性がtop-menuのdiv要素の子
のul要素) で取れた
リンクを追加するコードを書く
bull 対象のul要素の子要素としてリンクを追加する
コードを実行し思った動作になるまで確認
View customizeで設定
bull 画面の描画完了時にコードを実行する必要がある
(描画完了前だと要素が取得できない)ので
jQueryの$(function)関数を利用
$(function() ロード完了時に呼び出される $(top-menu gt ul) append(ltligtlta href=issuesgt全てのチケットltagtltligt) )
View customizeで設定
bull いったんプライベートで設定し動作を確認する
bull 動作OKでプライベートを外して全体に有効へ
コード(CSS)の書き方
JavaScriptの時と同じ
bull DOMインスペクタで変更したい要素を探す
bull CSSセレクタがどうなりそうかも確認しておく
bull 要素のスタイルを変えて試す
CSSをView customizeに設定
bull Path Patternは絞れるならば絞って問題ないが
CSSセレクタ自体で対象箇所が絞ってかけるので
全画面対象でもほとんど問題なし
bull そのままCSSを書くイメージ
CSSセレクタの書き方
CSSセレクタの確認
bull DOMインスペクタを使うことによってCSSセレ
クタはわかる
CSSセレクタの指定
bull bodyからすべてのパスを書く必要はなくid属性
が付与されているものを起点に考えると良い
bull id属性は一意のものになるので
body divwrapper divwrapper2 divwrapper3 divheader h1
divheader h1
bodyからのフルパス
こっちで十分
良く使うCSSセレクタ
他にもいろいろあるので詳しくない場合には
rdquoCSSセレクタrdquoで一度調べておくと良い
セレクタ名 書式 対象
型セレクタ E E要素
idセレクタ Emyid id名がmyidのE要素
classセレクタ Ewarning class名がwarinigのE要素
子孫セレクタ E F E要素の子孫にあたるF要素
子セレクタ E gt F E要素の子にあたるF要素 (子孫セレクタはE要素の配下ならばどこにあっても良いが子セレクタは1階層下のみが対象)
CSSセレクタで気を付けること
bull 必要のない要素と一致させない
bull 一致してしまう場合には条件をもっときつく
bull 単に要素を指定するのではなく要素+属性で指定す
る(idセレクタclassセレクタなど)
bull 子孫セレクタではなく子セレクタを使うなど
うまく動作しないときの 確認ポイント
Path patternがあっているか
bull 画面のソースを表示してView customizeで指定
したコードが埋め込まれているか確認
bull 埋め込まれていない場合Path patternが間違えている
のでPath patternを見直す
JavaScriptでエラーが発生していないか
bull 開発者ツールでエラーメッセージが出力されて
いないか確認
bull エラーメッセージが出力されていればそれをもとに
JavaScriptを修正
CSSが上書きされていないか
bull 複数のCSSが一致する場合その要素に対してど
のようなスタイルが適用されるかは優先度に
よって決まる
bull 該当の要素を詳細に指定している方が優先される
bull 型セレクタよりidセレクタで指定したものの方が優先
bull セレクタのレベルが同じならば後に書かれたものが
優先される
CSSが上書きされていないか
bull 上にあるほどもの優先度が高い
bull 取り消し線のものは優先度が高いものによって上書きさ
れているもの
チケットの入力フォームがらみは面倒
bull チケットの入力フォームはトラッカーまたはス
テータスが変わるとフォームの再読み込みが行
われる(all_attributes配下が差し替わる)
bull これはトラッカーやステータスによって入力可能な
フィールドや選択肢が変わるため
bull これにより入力フォームの各要素に対する変更(内
容変更やイベントの登録)はリセットされてし
まう
チケット入力フォームに対するイベント
bull 入力フォームが差し替わってもハンドリングでき
るようにする必要がある
bull 考え方としては親の要素に対してイベントを登
録しておいてイベントが発生した際に発生元が
該当のものか判断するようなイメージ
bull jQueryのon関数を使うと簡単に書ける
チケット入力フォームに対するイベント
bull ダメな例
これだと入力フォームが差し替わったタイミングで登録先の要素
(issue_status_id)が別物に変わってしまうのでうまく動かない
bull OKな例
documentに対してイベントハンドラを登録し該当の要素(issue_status_id)
が発生元だったら動作するように書くことによってissue_status_idが差し
替わってもハンドリング可能に
$(issue_status_id) on(change function(e) ステータス変更時に実施したい処理 )
$(document) on(change issue_status_id function(e) ステータス変更時に実施したい処理 )
チケット入力フォームに対する変更
bull 入力フォームが差し替わると変更した内容も元
に戻ってしまうので差し替わったタイミングで
処理する必要がある
bull たとえばカスタムフィールドの値に応じて他のカ
スタムフィールドで選択可能な値を絞る場合など
チケット入力フォームに対する変更
bull 差し替え処理を行っている関数をフックして差
し替え処理の後に処理を差し込む
bull replaceIssueFormWith 関数が差し替え処理を行って
いる関数なのでそこを対象に
関数を別名で退避 var _replaceIssueFormWith = replaceIssueFormWith 関数を中身を変更 退避した処理を呼び出すような関数として作り変える replaceIssueFormWith = function(html) 退避しておいた関数を呼び出し _replaceIssueFormWith(html) ここでフォーム差し替え後に やりたい処理を書く
View customize導入に向けて
試す環境を作る
bull プロジェクトで使っているRedmineにいきなり適
用するのは敷居が高いという場合にはまずは仮
想環境などで試してみる
bull Redmineの各バージョンのVagrant boxを公開している
のでそちらを使えばすぐに
vagrant init onozatyredmine-32
vagrant up
スクリプトを書いてみる
bull この資料を参考に書いてみる
bull スクリプトのサンプルは下記リポジトリに貯め
ていっているので参考に
bull httpsgithubcomonozatyredmine-view-customize-scripts
bull これからもだんだん増えていく予定
困ったときには
困ったときにはhellip
bull onozaty まで (follow me)
bull 即レスとまでいきませんが毎日確認してます
bull スクリプト例などもつぶやいています
困ったときにはhellip
bull こういうことできませんかといった質問もお
気軽にどうぞ
bull 一応全部答えている(できるものはBlogでも公開)つ
もりですが拾えてなかったらごめんなさい
おわり
JavaScriptでプロジェクトを判定
bull jQueryのhasClass()関数で指定のクラス名が存在
するかチェックできる
bull またはclass属性を取り出して比較するなど
if ($(body)hasClass(project-prj1)) プロジェクト識別子がprj1の場合
CSSでプロジェクトを指定
bull CSSのセレクタでbodyのclassを利用するだけ
bodyproject-prj1 top-menu background-color 006400 dark green bodyproject-prj1 header background-color 008000 green
class属性が振られるもの
bull プロジェクト以外にもclass属性が振られるもの
が多々あるので対象画面や対象箇所を限定する
のに使用できる
class属性が振られるもの
bull body要素
bull controller-コントローラ名
bull action-アクション名
bull チケット一覧の各行
bull tracker-トラッカーID
bull status-ステータスID
bull priority-優先度ID
bull created-by-me
class属性が振られるもの
bull 他にもいろいろあるので詳しくは「Redmineの
画面で振られているclass属性について -
EnjoyStudy」にて
bull httpblogenjoyxstudycomentry20141011000000
コード(JavaScript)の書き方
ブラウザの開発者ツールを活用
ブラウザの開発者ツール
bull いきなりView customizeで設定するのではなく
ブラウザの開発者ツールを使いながら作成確認
する
bull DOMインスペクタ
bull コンソール
ブラウザの開発者ツール
bull 開発者ツールはChromeFirefoxIE それぞれ
のブラウザに標準でも入っている
bull Firefoxだと拡張機能のFirebugでもOK
bull 愛用しているので以降のキャプチャはFirebugにて
DOMインスペクタ
bull 選択した要素がHTML上でどういった構造で書か
れているか確認できる
bull ソース表示で見るより簡単
コンソール
bull 表示している画面に対してのJavaScriptの実行を手
軽に試せる
bull 補完も効く(複数行モードの場合はダメ)
コンソール
bull 複数行まとめて実行できるものもあり長めの
コードでも修正実行を繰り返し行える
実際に試してみる
例ヘッダにチケット一覧リンクを追加
bull やること
1 どこに要素を追加すればよいか調べる
2 その要素を起点にリンクを追加するコードを書く
3 うまくいったらView customize で設定
(いったんプライベートで)
4 動作することが確認できたらプライベートを外し
て全体に反映
追加位置を調べる
bull DOMインスペクタで追加したい位置を選択
追加位置を調べる
bull パスを確認
bull id属性がtop-menuとなっているdiv要素配下のul要素の
最後に追加してあげればよさそう
追加位置を調べる
bull コンソールで追加対象の要素を取得してみる
bull divtop-menu gt ul (id属性がtop-menuのdiv要素の子
のul要素) で取れた
リンクを追加するコードを書く
bull 対象のul要素の子要素としてリンクを追加する
コードを実行し思った動作になるまで確認
View customizeで設定
bull 画面の描画完了時にコードを実行する必要がある
(描画完了前だと要素が取得できない)ので
jQueryの$(function)関数を利用
$(function() ロード完了時に呼び出される $(top-menu gt ul) append(ltligtlta href=issuesgt全てのチケットltagtltligt) )
View customizeで設定
bull いったんプライベートで設定し動作を確認する
bull 動作OKでプライベートを外して全体に有効へ
コード(CSS)の書き方
JavaScriptの時と同じ
bull DOMインスペクタで変更したい要素を探す
bull CSSセレクタがどうなりそうかも確認しておく
bull 要素のスタイルを変えて試す
CSSをView customizeに設定
bull Path Patternは絞れるならば絞って問題ないが
CSSセレクタ自体で対象箇所が絞ってかけるので
全画面対象でもほとんど問題なし
bull そのままCSSを書くイメージ
CSSセレクタの書き方
CSSセレクタの確認
bull DOMインスペクタを使うことによってCSSセレ
クタはわかる
CSSセレクタの指定
bull bodyからすべてのパスを書く必要はなくid属性
が付与されているものを起点に考えると良い
bull id属性は一意のものになるので
body divwrapper divwrapper2 divwrapper3 divheader h1
divheader h1
bodyからのフルパス
こっちで十分
良く使うCSSセレクタ
他にもいろいろあるので詳しくない場合には
rdquoCSSセレクタrdquoで一度調べておくと良い
セレクタ名 書式 対象
型セレクタ E E要素
idセレクタ Emyid id名がmyidのE要素
classセレクタ Ewarning class名がwarinigのE要素
子孫セレクタ E F E要素の子孫にあたるF要素
子セレクタ E gt F E要素の子にあたるF要素 (子孫セレクタはE要素の配下ならばどこにあっても良いが子セレクタは1階層下のみが対象)
CSSセレクタで気を付けること
bull 必要のない要素と一致させない
bull 一致してしまう場合には条件をもっときつく
bull 単に要素を指定するのではなく要素+属性で指定す
る(idセレクタclassセレクタなど)
bull 子孫セレクタではなく子セレクタを使うなど
うまく動作しないときの 確認ポイント
Path patternがあっているか
bull 画面のソースを表示してView customizeで指定
したコードが埋め込まれているか確認
bull 埋め込まれていない場合Path patternが間違えている
のでPath patternを見直す
JavaScriptでエラーが発生していないか
bull 開発者ツールでエラーメッセージが出力されて
いないか確認
bull エラーメッセージが出力されていればそれをもとに
JavaScriptを修正
CSSが上書きされていないか
bull 複数のCSSが一致する場合その要素に対してど
のようなスタイルが適用されるかは優先度に
よって決まる
bull 該当の要素を詳細に指定している方が優先される
bull 型セレクタよりidセレクタで指定したものの方が優先
bull セレクタのレベルが同じならば後に書かれたものが
優先される
CSSが上書きされていないか
bull 上にあるほどもの優先度が高い
bull 取り消し線のものは優先度が高いものによって上書きさ
れているもの
チケットの入力フォームがらみは面倒
bull チケットの入力フォームはトラッカーまたはス
テータスが変わるとフォームの再読み込みが行
われる(all_attributes配下が差し替わる)
bull これはトラッカーやステータスによって入力可能な
フィールドや選択肢が変わるため
bull これにより入力フォームの各要素に対する変更(内
容変更やイベントの登録)はリセットされてし
まう
チケット入力フォームに対するイベント
bull 入力フォームが差し替わってもハンドリングでき
るようにする必要がある
bull 考え方としては親の要素に対してイベントを登
録しておいてイベントが発生した際に発生元が
該当のものか判断するようなイメージ
bull jQueryのon関数を使うと簡単に書ける
チケット入力フォームに対するイベント
bull ダメな例
これだと入力フォームが差し替わったタイミングで登録先の要素
(issue_status_id)が別物に変わってしまうのでうまく動かない
bull OKな例
documentに対してイベントハンドラを登録し該当の要素(issue_status_id)
が発生元だったら動作するように書くことによってissue_status_idが差し
替わってもハンドリング可能に
$(issue_status_id) on(change function(e) ステータス変更時に実施したい処理 )
$(document) on(change issue_status_id function(e) ステータス変更時に実施したい処理 )
チケット入力フォームに対する変更
bull 入力フォームが差し替わると変更した内容も元
に戻ってしまうので差し替わったタイミングで
処理する必要がある
bull たとえばカスタムフィールドの値に応じて他のカ
スタムフィールドで選択可能な値を絞る場合など
チケット入力フォームに対する変更
bull 差し替え処理を行っている関数をフックして差
し替え処理の後に処理を差し込む
bull replaceIssueFormWith 関数が差し替え処理を行って
いる関数なのでそこを対象に
関数を別名で退避 var _replaceIssueFormWith = replaceIssueFormWith 関数を中身を変更 退避した処理を呼び出すような関数として作り変える replaceIssueFormWith = function(html) 退避しておいた関数を呼び出し _replaceIssueFormWith(html) ここでフォーム差し替え後に やりたい処理を書く
View customize導入に向けて
試す環境を作る
bull プロジェクトで使っているRedmineにいきなり適
用するのは敷居が高いという場合にはまずは仮
想環境などで試してみる
bull Redmineの各バージョンのVagrant boxを公開している
のでそちらを使えばすぐに
vagrant init onozatyredmine-32
vagrant up
スクリプトを書いてみる
bull この資料を参考に書いてみる
bull スクリプトのサンプルは下記リポジトリに貯め
ていっているので参考に
bull httpsgithubcomonozatyredmine-view-customize-scripts
bull これからもだんだん増えていく予定
困ったときには
困ったときにはhellip
bull onozaty まで (follow me)
bull 即レスとまでいきませんが毎日確認してます
bull スクリプト例などもつぶやいています
困ったときにはhellip
bull こういうことできませんかといった質問もお
気軽にどうぞ
bull 一応全部答えている(できるものはBlogでも公開)つ
もりですが拾えてなかったらごめんなさい
おわり
CSSでプロジェクトを指定
bull CSSのセレクタでbodyのclassを利用するだけ
bodyproject-prj1 top-menu background-color 006400 dark green bodyproject-prj1 header background-color 008000 green
class属性が振られるもの
bull プロジェクト以外にもclass属性が振られるもの
が多々あるので対象画面や対象箇所を限定する
のに使用できる
class属性が振られるもの
bull body要素
bull controller-コントローラ名
bull action-アクション名
bull チケット一覧の各行
bull tracker-トラッカーID
bull status-ステータスID
bull priority-優先度ID
bull created-by-me
class属性が振られるもの
bull 他にもいろいろあるので詳しくは「Redmineの
画面で振られているclass属性について -
EnjoyStudy」にて
bull httpblogenjoyxstudycomentry20141011000000
コード(JavaScript)の書き方
ブラウザの開発者ツールを活用
ブラウザの開発者ツール
bull いきなりView customizeで設定するのではなく
ブラウザの開発者ツールを使いながら作成確認
する
bull DOMインスペクタ
bull コンソール
ブラウザの開発者ツール
bull 開発者ツールはChromeFirefoxIE それぞれ
のブラウザに標準でも入っている
bull Firefoxだと拡張機能のFirebugでもOK
bull 愛用しているので以降のキャプチャはFirebugにて
DOMインスペクタ
bull 選択した要素がHTML上でどういった構造で書か
れているか確認できる
bull ソース表示で見るより簡単
コンソール
bull 表示している画面に対してのJavaScriptの実行を手
軽に試せる
bull 補完も効く(複数行モードの場合はダメ)
コンソール
bull 複数行まとめて実行できるものもあり長めの
コードでも修正実行を繰り返し行える
実際に試してみる
例ヘッダにチケット一覧リンクを追加
bull やること
1 どこに要素を追加すればよいか調べる
2 その要素を起点にリンクを追加するコードを書く
3 うまくいったらView customize で設定
(いったんプライベートで)
4 動作することが確認できたらプライベートを外し
て全体に反映
追加位置を調べる
bull DOMインスペクタで追加したい位置を選択
追加位置を調べる
bull パスを確認
bull id属性がtop-menuとなっているdiv要素配下のul要素の
最後に追加してあげればよさそう
追加位置を調べる
bull コンソールで追加対象の要素を取得してみる
bull divtop-menu gt ul (id属性がtop-menuのdiv要素の子
のul要素) で取れた
リンクを追加するコードを書く
bull 対象のul要素の子要素としてリンクを追加する
コードを実行し思った動作になるまで確認
View customizeで設定
bull 画面の描画完了時にコードを実行する必要がある
(描画完了前だと要素が取得できない)ので
jQueryの$(function)関数を利用
$(function() ロード完了時に呼び出される $(top-menu gt ul) append(ltligtlta href=issuesgt全てのチケットltagtltligt) )
View customizeで設定
bull いったんプライベートで設定し動作を確認する
bull 動作OKでプライベートを外して全体に有効へ
コード(CSS)の書き方
JavaScriptの時と同じ
bull DOMインスペクタで変更したい要素を探す
bull CSSセレクタがどうなりそうかも確認しておく
bull 要素のスタイルを変えて試す
CSSをView customizeに設定
bull Path Patternは絞れるならば絞って問題ないが
CSSセレクタ自体で対象箇所が絞ってかけるので
全画面対象でもほとんど問題なし
bull そのままCSSを書くイメージ
CSSセレクタの書き方
CSSセレクタの確認
bull DOMインスペクタを使うことによってCSSセレ
クタはわかる
CSSセレクタの指定
bull bodyからすべてのパスを書く必要はなくid属性
が付与されているものを起点に考えると良い
bull id属性は一意のものになるので
body divwrapper divwrapper2 divwrapper3 divheader h1
divheader h1
bodyからのフルパス
こっちで十分
良く使うCSSセレクタ
他にもいろいろあるので詳しくない場合には
rdquoCSSセレクタrdquoで一度調べておくと良い
セレクタ名 書式 対象
型セレクタ E E要素
idセレクタ Emyid id名がmyidのE要素
classセレクタ Ewarning class名がwarinigのE要素
子孫セレクタ E F E要素の子孫にあたるF要素
子セレクタ E gt F E要素の子にあたるF要素 (子孫セレクタはE要素の配下ならばどこにあっても良いが子セレクタは1階層下のみが対象)
CSSセレクタで気を付けること
bull 必要のない要素と一致させない
bull 一致してしまう場合には条件をもっときつく
bull 単に要素を指定するのではなく要素+属性で指定す
る(idセレクタclassセレクタなど)
bull 子孫セレクタではなく子セレクタを使うなど
うまく動作しないときの 確認ポイント
Path patternがあっているか
bull 画面のソースを表示してView customizeで指定
したコードが埋め込まれているか確認
bull 埋め込まれていない場合Path patternが間違えている
のでPath patternを見直す
JavaScriptでエラーが発生していないか
bull 開発者ツールでエラーメッセージが出力されて
いないか確認
bull エラーメッセージが出力されていればそれをもとに
JavaScriptを修正
CSSが上書きされていないか
bull 複数のCSSが一致する場合その要素に対してど
のようなスタイルが適用されるかは優先度に
よって決まる
bull 該当の要素を詳細に指定している方が優先される
bull 型セレクタよりidセレクタで指定したものの方が優先
bull セレクタのレベルが同じならば後に書かれたものが
優先される
CSSが上書きされていないか
bull 上にあるほどもの優先度が高い
bull 取り消し線のものは優先度が高いものによって上書きさ
れているもの
チケットの入力フォームがらみは面倒
bull チケットの入力フォームはトラッカーまたはス
テータスが変わるとフォームの再読み込みが行
われる(all_attributes配下が差し替わる)
bull これはトラッカーやステータスによって入力可能な
フィールドや選択肢が変わるため
bull これにより入力フォームの各要素に対する変更(内
容変更やイベントの登録)はリセットされてし
まう
チケット入力フォームに対するイベント
bull 入力フォームが差し替わってもハンドリングでき
るようにする必要がある
bull 考え方としては親の要素に対してイベントを登
録しておいてイベントが発生した際に発生元が
該当のものか判断するようなイメージ
bull jQueryのon関数を使うと簡単に書ける
チケット入力フォームに対するイベント
bull ダメな例
これだと入力フォームが差し替わったタイミングで登録先の要素
(issue_status_id)が別物に変わってしまうのでうまく動かない
bull OKな例
documentに対してイベントハンドラを登録し該当の要素(issue_status_id)
が発生元だったら動作するように書くことによってissue_status_idが差し
替わってもハンドリング可能に
$(issue_status_id) on(change function(e) ステータス変更時に実施したい処理 )
$(document) on(change issue_status_id function(e) ステータス変更時に実施したい処理 )
チケット入力フォームに対する変更
bull 入力フォームが差し替わると変更した内容も元
に戻ってしまうので差し替わったタイミングで
処理する必要がある
bull たとえばカスタムフィールドの値に応じて他のカ
スタムフィールドで選択可能な値を絞る場合など
チケット入力フォームに対する変更
bull 差し替え処理を行っている関数をフックして差
し替え処理の後に処理を差し込む
bull replaceIssueFormWith 関数が差し替え処理を行って
いる関数なのでそこを対象に
関数を別名で退避 var _replaceIssueFormWith = replaceIssueFormWith 関数を中身を変更 退避した処理を呼び出すような関数として作り変える replaceIssueFormWith = function(html) 退避しておいた関数を呼び出し _replaceIssueFormWith(html) ここでフォーム差し替え後に やりたい処理を書く
View customize導入に向けて
試す環境を作る
bull プロジェクトで使っているRedmineにいきなり適
用するのは敷居が高いという場合にはまずは仮
想環境などで試してみる
bull Redmineの各バージョンのVagrant boxを公開している
のでそちらを使えばすぐに
vagrant init onozatyredmine-32
vagrant up
スクリプトを書いてみる
bull この資料を参考に書いてみる
bull スクリプトのサンプルは下記リポジトリに貯め
ていっているので参考に
bull httpsgithubcomonozatyredmine-view-customize-scripts
bull これからもだんだん増えていく予定
困ったときには
困ったときにはhellip
bull onozaty まで (follow me)
bull 即レスとまでいきませんが毎日確認してます
bull スクリプト例などもつぶやいています
困ったときにはhellip
bull こういうことできませんかといった質問もお
気軽にどうぞ
bull 一応全部答えている(できるものはBlogでも公開)つ
もりですが拾えてなかったらごめんなさい
おわり
class属性が振られるもの
bull プロジェクト以外にもclass属性が振られるもの
が多々あるので対象画面や対象箇所を限定する
のに使用できる
class属性が振られるもの
bull body要素
bull controller-コントローラ名
bull action-アクション名
bull チケット一覧の各行
bull tracker-トラッカーID
bull status-ステータスID
bull priority-優先度ID
bull created-by-me
class属性が振られるもの
bull 他にもいろいろあるので詳しくは「Redmineの
画面で振られているclass属性について -
EnjoyStudy」にて
bull httpblogenjoyxstudycomentry20141011000000
コード(JavaScript)の書き方
ブラウザの開発者ツールを活用
ブラウザの開発者ツール
bull いきなりView customizeで設定するのではなく
ブラウザの開発者ツールを使いながら作成確認
する
bull DOMインスペクタ
bull コンソール
ブラウザの開発者ツール
bull 開発者ツールはChromeFirefoxIE それぞれ
のブラウザに標準でも入っている
bull Firefoxだと拡張機能のFirebugでもOK
bull 愛用しているので以降のキャプチャはFirebugにて
DOMインスペクタ
bull 選択した要素がHTML上でどういった構造で書か
れているか確認できる
bull ソース表示で見るより簡単
コンソール
bull 表示している画面に対してのJavaScriptの実行を手
軽に試せる
bull 補完も効く(複数行モードの場合はダメ)
コンソール
bull 複数行まとめて実行できるものもあり長めの
コードでも修正実行を繰り返し行える
実際に試してみる
例ヘッダにチケット一覧リンクを追加
bull やること
1 どこに要素を追加すればよいか調べる
2 その要素を起点にリンクを追加するコードを書く
3 うまくいったらView customize で設定
(いったんプライベートで)
4 動作することが確認できたらプライベートを外し
て全体に反映
追加位置を調べる
bull DOMインスペクタで追加したい位置を選択
追加位置を調べる
bull パスを確認
bull id属性がtop-menuとなっているdiv要素配下のul要素の
最後に追加してあげればよさそう
追加位置を調べる
bull コンソールで追加対象の要素を取得してみる
bull divtop-menu gt ul (id属性がtop-menuのdiv要素の子
のul要素) で取れた
リンクを追加するコードを書く
bull 対象のul要素の子要素としてリンクを追加する
コードを実行し思った動作になるまで確認
View customizeで設定
bull 画面の描画完了時にコードを実行する必要がある
(描画完了前だと要素が取得できない)ので
jQueryの$(function)関数を利用
$(function() ロード完了時に呼び出される $(top-menu gt ul) append(ltligtlta href=issuesgt全てのチケットltagtltligt) )
View customizeで設定
bull いったんプライベートで設定し動作を確認する
bull 動作OKでプライベートを外して全体に有効へ
コード(CSS)の書き方
JavaScriptの時と同じ
bull DOMインスペクタで変更したい要素を探す
bull CSSセレクタがどうなりそうかも確認しておく
bull 要素のスタイルを変えて試す
CSSをView customizeに設定
bull Path Patternは絞れるならば絞って問題ないが
CSSセレクタ自体で対象箇所が絞ってかけるので
全画面対象でもほとんど問題なし
bull そのままCSSを書くイメージ
CSSセレクタの書き方
CSSセレクタの確認
bull DOMインスペクタを使うことによってCSSセレ
クタはわかる
CSSセレクタの指定
bull bodyからすべてのパスを書く必要はなくid属性
が付与されているものを起点に考えると良い
bull id属性は一意のものになるので
body divwrapper divwrapper2 divwrapper3 divheader h1
divheader h1
bodyからのフルパス
こっちで十分
良く使うCSSセレクタ
他にもいろいろあるので詳しくない場合には
rdquoCSSセレクタrdquoで一度調べておくと良い
セレクタ名 書式 対象
型セレクタ E E要素
idセレクタ Emyid id名がmyidのE要素
classセレクタ Ewarning class名がwarinigのE要素
子孫セレクタ E F E要素の子孫にあたるF要素
子セレクタ E gt F E要素の子にあたるF要素 (子孫セレクタはE要素の配下ならばどこにあっても良いが子セレクタは1階層下のみが対象)
CSSセレクタで気を付けること
bull 必要のない要素と一致させない
bull 一致してしまう場合には条件をもっときつく
bull 単に要素を指定するのではなく要素+属性で指定す
る(idセレクタclassセレクタなど)
bull 子孫セレクタではなく子セレクタを使うなど
うまく動作しないときの 確認ポイント
Path patternがあっているか
bull 画面のソースを表示してView customizeで指定
したコードが埋め込まれているか確認
bull 埋め込まれていない場合Path patternが間違えている
のでPath patternを見直す
JavaScriptでエラーが発生していないか
bull 開発者ツールでエラーメッセージが出力されて
いないか確認
bull エラーメッセージが出力されていればそれをもとに
JavaScriptを修正
CSSが上書きされていないか
bull 複数のCSSが一致する場合その要素に対してど
のようなスタイルが適用されるかは優先度に
よって決まる
bull 該当の要素を詳細に指定している方が優先される
bull 型セレクタよりidセレクタで指定したものの方が優先
bull セレクタのレベルが同じならば後に書かれたものが
優先される
CSSが上書きされていないか
bull 上にあるほどもの優先度が高い
bull 取り消し線のものは優先度が高いものによって上書きさ
れているもの
チケットの入力フォームがらみは面倒
bull チケットの入力フォームはトラッカーまたはス
テータスが変わるとフォームの再読み込みが行
われる(all_attributes配下が差し替わる)
bull これはトラッカーやステータスによって入力可能な
フィールドや選択肢が変わるため
bull これにより入力フォームの各要素に対する変更(内
容変更やイベントの登録)はリセットされてし
まう
チケット入力フォームに対するイベント
bull 入力フォームが差し替わってもハンドリングでき
るようにする必要がある
bull 考え方としては親の要素に対してイベントを登
録しておいてイベントが発生した際に発生元が
該当のものか判断するようなイメージ
bull jQueryのon関数を使うと簡単に書ける
チケット入力フォームに対するイベント
bull ダメな例
これだと入力フォームが差し替わったタイミングで登録先の要素
(issue_status_id)が別物に変わってしまうのでうまく動かない
bull OKな例
documentに対してイベントハンドラを登録し該当の要素(issue_status_id)
が発生元だったら動作するように書くことによってissue_status_idが差し
替わってもハンドリング可能に
$(issue_status_id) on(change function(e) ステータス変更時に実施したい処理 )
$(document) on(change issue_status_id function(e) ステータス変更時に実施したい処理 )
チケット入力フォームに対する変更
bull 入力フォームが差し替わると変更した内容も元
に戻ってしまうので差し替わったタイミングで
処理する必要がある
bull たとえばカスタムフィールドの値に応じて他のカ
スタムフィールドで選択可能な値を絞る場合など
チケット入力フォームに対する変更
bull 差し替え処理を行っている関数をフックして差
し替え処理の後に処理を差し込む
bull replaceIssueFormWith 関数が差し替え処理を行って
いる関数なのでそこを対象に
関数を別名で退避 var _replaceIssueFormWith = replaceIssueFormWith 関数を中身を変更 退避した処理を呼び出すような関数として作り変える replaceIssueFormWith = function(html) 退避しておいた関数を呼び出し _replaceIssueFormWith(html) ここでフォーム差し替え後に やりたい処理を書く
View customize導入に向けて
試す環境を作る
bull プロジェクトで使っているRedmineにいきなり適
用するのは敷居が高いという場合にはまずは仮
想環境などで試してみる
bull Redmineの各バージョンのVagrant boxを公開している
のでそちらを使えばすぐに
vagrant init onozatyredmine-32
vagrant up
スクリプトを書いてみる
bull この資料を参考に書いてみる
bull スクリプトのサンプルは下記リポジトリに貯め
ていっているので参考に
bull httpsgithubcomonozatyredmine-view-customize-scripts
bull これからもだんだん増えていく予定
困ったときには
困ったときにはhellip
bull onozaty まで (follow me)
bull 即レスとまでいきませんが毎日確認してます
bull スクリプト例などもつぶやいています
困ったときにはhellip
bull こういうことできませんかといった質問もお
気軽にどうぞ
bull 一応全部答えている(できるものはBlogでも公開)つ
もりですが拾えてなかったらごめんなさい
おわり
class属性が振られるもの
bull body要素
bull controller-コントローラ名
bull action-アクション名
bull チケット一覧の各行
bull tracker-トラッカーID
bull status-ステータスID
bull priority-優先度ID
bull created-by-me
class属性が振られるもの
bull 他にもいろいろあるので詳しくは「Redmineの
画面で振られているclass属性について -
EnjoyStudy」にて
bull httpblogenjoyxstudycomentry20141011000000
コード(JavaScript)の書き方
ブラウザの開発者ツールを活用
ブラウザの開発者ツール
bull いきなりView customizeで設定するのではなく
ブラウザの開発者ツールを使いながら作成確認
する
bull DOMインスペクタ
bull コンソール
ブラウザの開発者ツール
bull 開発者ツールはChromeFirefoxIE それぞれ
のブラウザに標準でも入っている
bull Firefoxだと拡張機能のFirebugでもOK
bull 愛用しているので以降のキャプチャはFirebugにて
DOMインスペクタ
bull 選択した要素がHTML上でどういった構造で書か
れているか確認できる
bull ソース表示で見るより簡単
コンソール
bull 表示している画面に対してのJavaScriptの実行を手
軽に試せる
bull 補完も効く(複数行モードの場合はダメ)
コンソール
bull 複数行まとめて実行できるものもあり長めの
コードでも修正実行を繰り返し行える
実際に試してみる
例ヘッダにチケット一覧リンクを追加
bull やること
1 どこに要素を追加すればよいか調べる
2 その要素を起点にリンクを追加するコードを書く
3 うまくいったらView customize で設定
(いったんプライベートで)
4 動作することが確認できたらプライベートを外し
て全体に反映
追加位置を調べる
bull DOMインスペクタで追加したい位置を選択
追加位置を調べる
bull パスを確認
bull id属性がtop-menuとなっているdiv要素配下のul要素の
最後に追加してあげればよさそう
追加位置を調べる
bull コンソールで追加対象の要素を取得してみる
bull divtop-menu gt ul (id属性がtop-menuのdiv要素の子
のul要素) で取れた
リンクを追加するコードを書く
bull 対象のul要素の子要素としてリンクを追加する
コードを実行し思った動作になるまで確認
View customizeで設定
bull 画面の描画完了時にコードを実行する必要がある
(描画完了前だと要素が取得できない)ので
jQueryの$(function)関数を利用
$(function() ロード完了時に呼び出される $(top-menu gt ul) append(ltligtlta href=issuesgt全てのチケットltagtltligt) )
View customizeで設定
bull いったんプライベートで設定し動作を確認する
bull 動作OKでプライベートを外して全体に有効へ
コード(CSS)の書き方
JavaScriptの時と同じ
bull DOMインスペクタで変更したい要素を探す
bull CSSセレクタがどうなりそうかも確認しておく
bull 要素のスタイルを変えて試す
CSSをView customizeに設定
bull Path Patternは絞れるならば絞って問題ないが
CSSセレクタ自体で対象箇所が絞ってかけるので
全画面対象でもほとんど問題なし
bull そのままCSSを書くイメージ
CSSセレクタの書き方
CSSセレクタの確認
bull DOMインスペクタを使うことによってCSSセレ
クタはわかる
CSSセレクタの指定
bull bodyからすべてのパスを書く必要はなくid属性
が付与されているものを起点に考えると良い
bull id属性は一意のものになるので
body divwrapper divwrapper2 divwrapper3 divheader h1
divheader h1
bodyからのフルパス
こっちで十分
良く使うCSSセレクタ
他にもいろいろあるので詳しくない場合には
rdquoCSSセレクタrdquoで一度調べておくと良い
セレクタ名 書式 対象
型セレクタ E E要素
idセレクタ Emyid id名がmyidのE要素
classセレクタ Ewarning class名がwarinigのE要素
子孫セレクタ E F E要素の子孫にあたるF要素
子セレクタ E gt F E要素の子にあたるF要素 (子孫セレクタはE要素の配下ならばどこにあっても良いが子セレクタは1階層下のみが対象)
CSSセレクタで気を付けること
bull 必要のない要素と一致させない
bull 一致してしまう場合には条件をもっときつく
bull 単に要素を指定するのではなく要素+属性で指定す
る(idセレクタclassセレクタなど)
bull 子孫セレクタではなく子セレクタを使うなど
うまく動作しないときの 確認ポイント
Path patternがあっているか
bull 画面のソースを表示してView customizeで指定
したコードが埋め込まれているか確認
bull 埋め込まれていない場合Path patternが間違えている
のでPath patternを見直す
JavaScriptでエラーが発生していないか
bull 開発者ツールでエラーメッセージが出力されて
いないか確認
bull エラーメッセージが出力されていればそれをもとに
JavaScriptを修正
CSSが上書きされていないか
bull 複数のCSSが一致する場合その要素に対してど
のようなスタイルが適用されるかは優先度に
よって決まる
bull 該当の要素を詳細に指定している方が優先される
bull 型セレクタよりidセレクタで指定したものの方が優先
bull セレクタのレベルが同じならば後に書かれたものが
優先される
CSSが上書きされていないか
bull 上にあるほどもの優先度が高い
bull 取り消し線のものは優先度が高いものによって上書きさ
れているもの
チケットの入力フォームがらみは面倒
bull チケットの入力フォームはトラッカーまたはス
テータスが変わるとフォームの再読み込みが行
われる(all_attributes配下が差し替わる)
bull これはトラッカーやステータスによって入力可能な
フィールドや選択肢が変わるため
bull これにより入力フォームの各要素に対する変更(内
容変更やイベントの登録)はリセットされてし
まう
チケット入力フォームに対するイベント
bull 入力フォームが差し替わってもハンドリングでき
るようにする必要がある
bull 考え方としては親の要素に対してイベントを登
録しておいてイベントが発生した際に発生元が
該当のものか判断するようなイメージ
bull jQueryのon関数を使うと簡単に書ける
チケット入力フォームに対するイベント
bull ダメな例
これだと入力フォームが差し替わったタイミングで登録先の要素
(issue_status_id)が別物に変わってしまうのでうまく動かない
bull OKな例
documentに対してイベントハンドラを登録し該当の要素(issue_status_id)
が発生元だったら動作するように書くことによってissue_status_idが差し
替わってもハンドリング可能に
$(issue_status_id) on(change function(e) ステータス変更時に実施したい処理 )
$(document) on(change issue_status_id function(e) ステータス変更時に実施したい処理 )
チケット入力フォームに対する変更
bull 入力フォームが差し替わると変更した内容も元
に戻ってしまうので差し替わったタイミングで
処理する必要がある
bull たとえばカスタムフィールドの値に応じて他のカ
スタムフィールドで選択可能な値を絞る場合など
チケット入力フォームに対する変更
bull 差し替え処理を行っている関数をフックして差
し替え処理の後に処理を差し込む
bull replaceIssueFormWith 関数が差し替え処理を行って
いる関数なのでそこを対象に
関数を別名で退避 var _replaceIssueFormWith = replaceIssueFormWith 関数を中身を変更 退避した処理を呼び出すような関数として作り変える replaceIssueFormWith = function(html) 退避しておいた関数を呼び出し _replaceIssueFormWith(html) ここでフォーム差し替え後に やりたい処理を書く
View customize導入に向けて
試す環境を作る
bull プロジェクトで使っているRedmineにいきなり適
用するのは敷居が高いという場合にはまずは仮
想環境などで試してみる
bull Redmineの各バージョンのVagrant boxを公開している
のでそちらを使えばすぐに
vagrant init onozatyredmine-32
vagrant up
スクリプトを書いてみる
bull この資料を参考に書いてみる
bull スクリプトのサンプルは下記リポジトリに貯め
ていっているので参考に
bull httpsgithubcomonozatyredmine-view-customize-scripts
bull これからもだんだん増えていく予定
困ったときには
困ったときにはhellip
bull onozaty まで (follow me)
bull 即レスとまでいきませんが毎日確認してます
bull スクリプト例などもつぶやいています
困ったときにはhellip
bull こういうことできませんかといった質問もお
気軽にどうぞ
bull 一応全部答えている(できるものはBlogでも公開)つ
もりですが拾えてなかったらごめんなさい
おわり
class属性が振られるもの
bull 他にもいろいろあるので詳しくは「Redmineの
画面で振られているclass属性について -
EnjoyStudy」にて
bull httpblogenjoyxstudycomentry20141011000000
コード(JavaScript)の書き方
ブラウザの開発者ツールを活用
ブラウザの開発者ツール
bull いきなりView customizeで設定するのではなく
ブラウザの開発者ツールを使いながら作成確認
する
bull DOMインスペクタ
bull コンソール
ブラウザの開発者ツール
bull 開発者ツールはChromeFirefoxIE それぞれ
のブラウザに標準でも入っている
bull Firefoxだと拡張機能のFirebugでもOK
bull 愛用しているので以降のキャプチャはFirebugにて
DOMインスペクタ
bull 選択した要素がHTML上でどういった構造で書か
れているか確認できる
bull ソース表示で見るより簡単
コンソール
bull 表示している画面に対してのJavaScriptの実行を手
軽に試せる
bull 補完も効く(複数行モードの場合はダメ)
コンソール
bull 複数行まとめて実行できるものもあり長めの
コードでも修正実行を繰り返し行える
実際に試してみる
例ヘッダにチケット一覧リンクを追加
bull やること
1 どこに要素を追加すればよいか調べる
2 その要素を起点にリンクを追加するコードを書く
3 うまくいったらView customize で設定
(いったんプライベートで)
4 動作することが確認できたらプライベートを外し
て全体に反映
追加位置を調べる
bull DOMインスペクタで追加したい位置を選択
追加位置を調べる
bull パスを確認
bull id属性がtop-menuとなっているdiv要素配下のul要素の
最後に追加してあげればよさそう
追加位置を調べる
bull コンソールで追加対象の要素を取得してみる
bull divtop-menu gt ul (id属性がtop-menuのdiv要素の子
のul要素) で取れた
リンクを追加するコードを書く
bull 対象のul要素の子要素としてリンクを追加する
コードを実行し思った動作になるまで確認
View customizeで設定
bull 画面の描画完了時にコードを実行する必要がある
(描画完了前だと要素が取得できない)ので
jQueryの$(function)関数を利用
$(function() ロード完了時に呼び出される $(top-menu gt ul) append(ltligtlta href=issuesgt全てのチケットltagtltligt) )
View customizeで設定
bull いったんプライベートで設定し動作を確認する
bull 動作OKでプライベートを外して全体に有効へ
コード(CSS)の書き方
JavaScriptの時と同じ
bull DOMインスペクタで変更したい要素を探す
bull CSSセレクタがどうなりそうかも確認しておく
bull 要素のスタイルを変えて試す
CSSをView customizeに設定
bull Path Patternは絞れるならば絞って問題ないが
CSSセレクタ自体で対象箇所が絞ってかけるので
全画面対象でもほとんど問題なし
bull そのままCSSを書くイメージ
CSSセレクタの書き方
CSSセレクタの確認
bull DOMインスペクタを使うことによってCSSセレ
クタはわかる
CSSセレクタの指定
bull bodyからすべてのパスを書く必要はなくid属性
が付与されているものを起点に考えると良い
bull id属性は一意のものになるので
body divwrapper divwrapper2 divwrapper3 divheader h1
divheader h1
bodyからのフルパス
こっちで十分
良く使うCSSセレクタ
他にもいろいろあるので詳しくない場合には
rdquoCSSセレクタrdquoで一度調べておくと良い
セレクタ名 書式 対象
型セレクタ E E要素
idセレクタ Emyid id名がmyidのE要素
classセレクタ Ewarning class名がwarinigのE要素
子孫セレクタ E F E要素の子孫にあたるF要素
子セレクタ E gt F E要素の子にあたるF要素 (子孫セレクタはE要素の配下ならばどこにあっても良いが子セレクタは1階層下のみが対象)
CSSセレクタで気を付けること
bull 必要のない要素と一致させない
bull 一致してしまう場合には条件をもっときつく
bull 単に要素を指定するのではなく要素+属性で指定す
る(idセレクタclassセレクタなど)
bull 子孫セレクタではなく子セレクタを使うなど
うまく動作しないときの 確認ポイント
Path patternがあっているか
bull 画面のソースを表示してView customizeで指定
したコードが埋め込まれているか確認
bull 埋め込まれていない場合Path patternが間違えている
のでPath patternを見直す
JavaScriptでエラーが発生していないか
bull 開発者ツールでエラーメッセージが出力されて
いないか確認
bull エラーメッセージが出力されていればそれをもとに
JavaScriptを修正
CSSが上書きされていないか
bull 複数のCSSが一致する場合その要素に対してど
のようなスタイルが適用されるかは優先度に
よって決まる
bull 該当の要素を詳細に指定している方が優先される
bull 型セレクタよりidセレクタで指定したものの方が優先
bull セレクタのレベルが同じならば後に書かれたものが
優先される
CSSが上書きされていないか
bull 上にあるほどもの優先度が高い
bull 取り消し線のものは優先度が高いものによって上書きさ
れているもの
チケットの入力フォームがらみは面倒
bull チケットの入力フォームはトラッカーまたはス
テータスが変わるとフォームの再読み込みが行
われる(all_attributes配下が差し替わる)
bull これはトラッカーやステータスによって入力可能な
フィールドや選択肢が変わるため
bull これにより入力フォームの各要素に対する変更(内
容変更やイベントの登録)はリセットされてし
まう
チケット入力フォームに対するイベント
bull 入力フォームが差し替わってもハンドリングでき
るようにする必要がある
bull 考え方としては親の要素に対してイベントを登
録しておいてイベントが発生した際に発生元が
該当のものか判断するようなイメージ
bull jQueryのon関数を使うと簡単に書ける
チケット入力フォームに対するイベント
bull ダメな例
これだと入力フォームが差し替わったタイミングで登録先の要素
(issue_status_id)が別物に変わってしまうのでうまく動かない
bull OKな例
documentに対してイベントハンドラを登録し該当の要素(issue_status_id)
が発生元だったら動作するように書くことによってissue_status_idが差し
替わってもハンドリング可能に
$(issue_status_id) on(change function(e) ステータス変更時に実施したい処理 )
$(document) on(change issue_status_id function(e) ステータス変更時に実施したい処理 )
チケット入力フォームに対する変更
bull 入力フォームが差し替わると変更した内容も元
に戻ってしまうので差し替わったタイミングで
処理する必要がある
bull たとえばカスタムフィールドの値に応じて他のカ
スタムフィールドで選択可能な値を絞る場合など
チケット入力フォームに対する変更
bull 差し替え処理を行っている関数をフックして差
し替え処理の後に処理を差し込む
bull replaceIssueFormWith 関数が差し替え処理を行って
いる関数なのでそこを対象に
関数を別名で退避 var _replaceIssueFormWith = replaceIssueFormWith 関数を中身を変更 退避した処理を呼び出すような関数として作り変える replaceIssueFormWith = function(html) 退避しておいた関数を呼び出し _replaceIssueFormWith(html) ここでフォーム差し替え後に やりたい処理を書く
View customize導入に向けて
試す環境を作る
bull プロジェクトで使っているRedmineにいきなり適
用するのは敷居が高いという場合にはまずは仮
想環境などで試してみる
bull Redmineの各バージョンのVagrant boxを公開している
のでそちらを使えばすぐに
vagrant init onozatyredmine-32
vagrant up
スクリプトを書いてみる
bull この資料を参考に書いてみる
bull スクリプトのサンプルは下記リポジトリに貯め
ていっているので参考に
bull httpsgithubcomonozatyredmine-view-customize-scripts
bull これからもだんだん増えていく予定
困ったときには
困ったときにはhellip
bull onozaty まで (follow me)
bull 即レスとまでいきませんが毎日確認してます
bull スクリプト例などもつぶやいています
困ったときにはhellip
bull こういうことできませんかといった質問もお
気軽にどうぞ
bull 一応全部答えている(できるものはBlogでも公開)つ
もりですが拾えてなかったらごめんなさい
おわり
コード(JavaScript)の書き方
ブラウザの開発者ツールを活用
ブラウザの開発者ツール
bull いきなりView customizeで設定するのではなく
ブラウザの開発者ツールを使いながら作成確認
する
bull DOMインスペクタ
bull コンソール
ブラウザの開発者ツール
bull 開発者ツールはChromeFirefoxIE それぞれ
のブラウザに標準でも入っている
bull Firefoxだと拡張機能のFirebugでもOK
bull 愛用しているので以降のキャプチャはFirebugにて
DOMインスペクタ
bull 選択した要素がHTML上でどういった構造で書か
れているか確認できる
bull ソース表示で見るより簡単
コンソール
bull 表示している画面に対してのJavaScriptの実行を手
軽に試せる
bull 補完も効く(複数行モードの場合はダメ)
コンソール
bull 複数行まとめて実行できるものもあり長めの
コードでも修正実行を繰り返し行える
実際に試してみる
例ヘッダにチケット一覧リンクを追加
bull やること
1 どこに要素を追加すればよいか調べる
2 その要素を起点にリンクを追加するコードを書く
3 うまくいったらView customize で設定
(いったんプライベートで)
4 動作することが確認できたらプライベートを外し
て全体に反映
追加位置を調べる
bull DOMインスペクタで追加したい位置を選択
追加位置を調べる
bull パスを確認
bull id属性がtop-menuとなっているdiv要素配下のul要素の
最後に追加してあげればよさそう
追加位置を調べる
bull コンソールで追加対象の要素を取得してみる
bull divtop-menu gt ul (id属性がtop-menuのdiv要素の子
のul要素) で取れた
リンクを追加するコードを書く
bull 対象のul要素の子要素としてリンクを追加する
コードを実行し思った動作になるまで確認
View customizeで設定
bull 画面の描画完了時にコードを実行する必要がある
(描画完了前だと要素が取得できない)ので
jQueryの$(function)関数を利用
$(function() ロード完了時に呼び出される $(top-menu gt ul) append(ltligtlta href=issuesgt全てのチケットltagtltligt) )
View customizeで設定
bull いったんプライベートで設定し動作を確認する
bull 動作OKでプライベートを外して全体に有効へ
コード(CSS)の書き方
JavaScriptの時と同じ
bull DOMインスペクタで変更したい要素を探す
bull CSSセレクタがどうなりそうかも確認しておく
bull 要素のスタイルを変えて試す
CSSをView customizeに設定
bull Path Patternは絞れるならば絞って問題ないが
CSSセレクタ自体で対象箇所が絞ってかけるので
全画面対象でもほとんど問題なし
bull そのままCSSを書くイメージ
CSSセレクタの書き方
CSSセレクタの確認
bull DOMインスペクタを使うことによってCSSセレ
クタはわかる
CSSセレクタの指定
bull bodyからすべてのパスを書く必要はなくid属性
が付与されているものを起点に考えると良い
bull id属性は一意のものになるので
body divwrapper divwrapper2 divwrapper3 divheader h1
divheader h1
bodyからのフルパス
こっちで十分
良く使うCSSセレクタ
他にもいろいろあるので詳しくない場合には
rdquoCSSセレクタrdquoで一度調べておくと良い
セレクタ名 書式 対象
型セレクタ E E要素
idセレクタ Emyid id名がmyidのE要素
classセレクタ Ewarning class名がwarinigのE要素
子孫セレクタ E F E要素の子孫にあたるF要素
子セレクタ E gt F E要素の子にあたるF要素 (子孫セレクタはE要素の配下ならばどこにあっても良いが子セレクタは1階層下のみが対象)
CSSセレクタで気を付けること
bull 必要のない要素と一致させない
bull 一致してしまう場合には条件をもっときつく
bull 単に要素を指定するのではなく要素+属性で指定す
る(idセレクタclassセレクタなど)
bull 子孫セレクタではなく子セレクタを使うなど
うまく動作しないときの 確認ポイント
Path patternがあっているか
bull 画面のソースを表示してView customizeで指定
したコードが埋め込まれているか確認
bull 埋め込まれていない場合Path patternが間違えている
のでPath patternを見直す
JavaScriptでエラーが発生していないか
bull 開発者ツールでエラーメッセージが出力されて
いないか確認
bull エラーメッセージが出力されていればそれをもとに
JavaScriptを修正
CSSが上書きされていないか
bull 複数のCSSが一致する場合その要素に対してど
のようなスタイルが適用されるかは優先度に
よって決まる
bull 該当の要素を詳細に指定している方が優先される
bull 型セレクタよりidセレクタで指定したものの方が優先
bull セレクタのレベルが同じならば後に書かれたものが
優先される
CSSが上書きされていないか
bull 上にあるほどもの優先度が高い
bull 取り消し線のものは優先度が高いものによって上書きさ
れているもの
チケットの入力フォームがらみは面倒
bull チケットの入力フォームはトラッカーまたはス
テータスが変わるとフォームの再読み込みが行
われる(all_attributes配下が差し替わる)
bull これはトラッカーやステータスによって入力可能な
フィールドや選択肢が変わるため
bull これにより入力フォームの各要素に対する変更(内
容変更やイベントの登録)はリセットされてし
まう
チケット入力フォームに対するイベント
bull 入力フォームが差し替わってもハンドリングでき
るようにする必要がある
bull 考え方としては親の要素に対してイベントを登
録しておいてイベントが発生した際に発生元が
該当のものか判断するようなイメージ
bull jQueryのon関数を使うと簡単に書ける
チケット入力フォームに対するイベント
bull ダメな例
これだと入力フォームが差し替わったタイミングで登録先の要素
(issue_status_id)が別物に変わってしまうのでうまく動かない
bull OKな例
documentに対してイベントハンドラを登録し該当の要素(issue_status_id)
が発生元だったら動作するように書くことによってissue_status_idが差し
替わってもハンドリング可能に
$(issue_status_id) on(change function(e) ステータス変更時に実施したい処理 )
$(document) on(change issue_status_id function(e) ステータス変更時に実施したい処理 )
チケット入力フォームに対する変更
bull 入力フォームが差し替わると変更した内容も元
に戻ってしまうので差し替わったタイミングで
処理する必要がある
bull たとえばカスタムフィールドの値に応じて他のカ
スタムフィールドで選択可能な値を絞る場合など
チケット入力フォームに対する変更
bull 差し替え処理を行っている関数をフックして差
し替え処理の後に処理を差し込む
bull replaceIssueFormWith 関数が差し替え処理を行って
いる関数なのでそこを対象に
関数を別名で退避 var _replaceIssueFormWith = replaceIssueFormWith 関数を中身を変更 退避した処理を呼び出すような関数として作り変える replaceIssueFormWith = function(html) 退避しておいた関数を呼び出し _replaceIssueFormWith(html) ここでフォーム差し替え後に やりたい処理を書く
View customize導入に向けて
試す環境を作る
bull プロジェクトで使っているRedmineにいきなり適
用するのは敷居が高いという場合にはまずは仮
想環境などで試してみる
bull Redmineの各バージョンのVagrant boxを公開している
のでそちらを使えばすぐに
vagrant init onozatyredmine-32
vagrant up
スクリプトを書いてみる
bull この資料を参考に書いてみる
bull スクリプトのサンプルは下記リポジトリに貯め
ていっているので参考に
bull httpsgithubcomonozatyredmine-view-customize-scripts
bull これからもだんだん増えていく予定
困ったときには
困ったときにはhellip
bull onozaty まで (follow me)
bull 即レスとまでいきませんが毎日確認してます
bull スクリプト例などもつぶやいています
困ったときにはhellip
bull こういうことできませんかといった質問もお
気軽にどうぞ
bull 一応全部答えている(できるものはBlogでも公開)つ
もりですが拾えてなかったらごめんなさい
おわり
ブラウザの開発者ツールを活用
ブラウザの開発者ツール
bull いきなりView customizeで設定するのではなく
ブラウザの開発者ツールを使いながら作成確認
する
bull DOMインスペクタ
bull コンソール
ブラウザの開発者ツール
bull 開発者ツールはChromeFirefoxIE それぞれ
のブラウザに標準でも入っている
bull Firefoxだと拡張機能のFirebugでもOK
bull 愛用しているので以降のキャプチャはFirebugにて
DOMインスペクタ
bull 選択した要素がHTML上でどういった構造で書か
れているか確認できる
bull ソース表示で見るより簡単
コンソール
bull 表示している画面に対してのJavaScriptの実行を手
軽に試せる
bull 補完も効く(複数行モードの場合はダメ)
コンソール
bull 複数行まとめて実行できるものもあり長めの
コードでも修正実行を繰り返し行える
実際に試してみる
例ヘッダにチケット一覧リンクを追加
bull やること
1 どこに要素を追加すればよいか調べる
2 その要素を起点にリンクを追加するコードを書く
3 うまくいったらView customize で設定
(いったんプライベートで)
4 動作することが確認できたらプライベートを外し
て全体に反映
追加位置を調べる
bull DOMインスペクタで追加したい位置を選択
追加位置を調べる
bull パスを確認
bull id属性がtop-menuとなっているdiv要素配下のul要素の
最後に追加してあげればよさそう
追加位置を調べる
bull コンソールで追加対象の要素を取得してみる
bull divtop-menu gt ul (id属性がtop-menuのdiv要素の子
のul要素) で取れた
リンクを追加するコードを書く
bull 対象のul要素の子要素としてリンクを追加する
コードを実行し思った動作になるまで確認
View customizeで設定
bull 画面の描画完了時にコードを実行する必要がある
(描画完了前だと要素が取得できない)ので
jQueryの$(function)関数を利用
$(function() ロード完了時に呼び出される $(top-menu gt ul) append(ltligtlta href=issuesgt全てのチケットltagtltligt) )
View customizeで設定
bull いったんプライベートで設定し動作を確認する
bull 動作OKでプライベートを外して全体に有効へ
コード(CSS)の書き方
JavaScriptの時と同じ
bull DOMインスペクタで変更したい要素を探す
bull CSSセレクタがどうなりそうかも確認しておく
bull 要素のスタイルを変えて試す
CSSをView customizeに設定
bull Path Patternは絞れるならば絞って問題ないが
CSSセレクタ自体で対象箇所が絞ってかけるので
全画面対象でもほとんど問題なし
bull そのままCSSを書くイメージ
CSSセレクタの書き方
CSSセレクタの確認
bull DOMインスペクタを使うことによってCSSセレ
クタはわかる
CSSセレクタの指定
bull bodyからすべてのパスを書く必要はなくid属性
が付与されているものを起点に考えると良い
bull id属性は一意のものになるので
body divwrapper divwrapper2 divwrapper3 divheader h1
divheader h1
bodyからのフルパス
こっちで十分
良く使うCSSセレクタ
他にもいろいろあるので詳しくない場合には
rdquoCSSセレクタrdquoで一度調べておくと良い
セレクタ名 書式 対象
型セレクタ E E要素
idセレクタ Emyid id名がmyidのE要素
classセレクタ Ewarning class名がwarinigのE要素
子孫セレクタ E F E要素の子孫にあたるF要素
子セレクタ E gt F E要素の子にあたるF要素 (子孫セレクタはE要素の配下ならばどこにあっても良いが子セレクタは1階層下のみが対象)
CSSセレクタで気を付けること
bull 必要のない要素と一致させない
bull 一致してしまう場合には条件をもっときつく
bull 単に要素を指定するのではなく要素+属性で指定す
る(idセレクタclassセレクタなど)
bull 子孫セレクタではなく子セレクタを使うなど
うまく動作しないときの 確認ポイント
Path patternがあっているか
bull 画面のソースを表示してView customizeで指定
したコードが埋め込まれているか確認
bull 埋め込まれていない場合Path patternが間違えている
のでPath patternを見直す
JavaScriptでエラーが発生していないか
bull 開発者ツールでエラーメッセージが出力されて
いないか確認
bull エラーメッセージが出力されていればそれをもとに
JavaScriptを修正
CSSが上書きされていないか
bull 複数のCSSが一致する場合その要素に対してど
のようなスタイルが適用されるかは優先度に
よって決まる
bull 該当の要素を詳細に指定している方が優先される
bull 型セレクタよりidセレクタで指定したものの方が優先
bull セレクタのレベルが同じならば後に書かれたものが
優先される
CSSが上書きされていないか
bull 上にあるほどもの優先度が高い
bull 取り消し線のものは優先度が高いものによって上書きさ
れているもの
チケットの入力フォームがらみは面倒
bull チケットの入力フォームはトラッカーまたはス
テータスが変わるとフォームの再読み込みが行
われる(all_attributes配下が差し替わる)
bull これはトラッカーやステータスによって入力可能な
フィールドや選択肢が変わるため
bull これにより入力フォームの各要素に対する変更(内
容変更やイベントの登録)はリセットされてし
まう
チケット入力フォームに対するイベント
bull 入力フォームが差し替わってもハンドリングでき
るようにする必要がある
bull 考え方としては親の要素に対してイベントを登
録しておいてイベントが発生した際に発生元が
該当のものか判断するようなイメージ
bull jQueryのon関数を使うと簡単に書ける
チケット入力フォームに対するイベント
bull ダメな例
これだと入力フォームが差し替わったタイミングで登録先の要素
(issue_status_id)が別物に変わってしまうのでうまく動かない
bull OKな例
documentに対してイベントハンドラを登録し該当の要素(issue_status_id)
が発生元だったら動作するように書くことによってissue_status_idが差し
替わってもハンドリング可能に
$(issue_status_id) on(change function(e) ステータス変更時に実施したい処理 )
$(document) on(change issue_status_id function(e) ステータス変更時に実施したい処理 )
チケット入力フォームに対する変更
bull 入力フォームが差し替わると変更した内容も元
に戻ってしまうので差し替わったタイミングで
処理する必要がある
bull たとえばカスタムフィールドの値に応じて他のカ
スタムフィールドで選択可能な値を絞る場合など
チケット入力フォームに対する変更
bull 差し替え処理を行っている関数をフックして差
し替え処理の後に処理を差し込む
bull replaceIssueFormWith 関数が差し替え処理を行って
いる関数なのでそこを対象に
関数を別名で退避 var _replaceIssueFormWith = replaceIssueFormWith 関数を中身を変更 退避した処理を呼び出すような関数として作り変える replaceIssueFormWith = function(html) 退避しておいた関数を呼び出し _replaceIssueFormWith(html) ここでフォーム差し替え後に やりたい処理を書く
View customize導入に向けて
試す環境を作る
bull プロジェクトで使っているRedmineにいきなり適
用するのは敷居が高いという場合にはまずは仮
想環境などで試してみる
bull Redmineの各バージョンのVagrant boxを公開している
のでそちらを使えばすぐに
vagrant init onozatyredmine-32
vagrant up
スクリプトを書いてみる
bull この資料を参考に書いてみる
bull スクリプトのサンプルは下記リポジトリに貯め
ていっているので参考に
bull httpsgithubcomonozatyredmine-view-customize-scripts
bull これからもだんだん増えていく予定
困ったときには
困ったときにはhellip
bull onozaty まで (follow me)
bull 即レスとまでいきませんが毎日確認してます
bull スクリプト例などもつぶやいています
困ったときにはhellip
bull こういうことできませんかといった質問もお
気軽にどうぞ
bull 一応全部答えている(できるものはBlogでも公開)つ
もりですが拾えてなかったらごめんなさい
おわり
ブラウザの開発者ツール
bull いきなりView customizeで設定するのではなく
ブラウザの開発者ツールを使いながら作成確認
する
bull DOMインスペクタ
bull コンソール
ブラウザの開発者ツール
bull 開発者ツールはChromeFirefoxIE それぞれ
のブラウザに標準でも入っている
bull Firefoxだと拡張機能のFirebugでもOK
bull 愛用しているので以降のキャプチャはFirebugにて
DOMインスペクタ
bull 選択した要素がHTML上でどういった構造で書か
れているか確認できる
bull ソース表示で見るより簡単
コンソール
bull 表示している画面に対してのJavaScriptの実行を手
軽に試せる
bull 補完も効く(複数行モードの場合はダメ)
コンソール
bull 複数行まとめて実行できるものもあり長めの
コードでも修正実行を繰り返し行える
実際に試してみる
例ヘッダにチケット一覧リンクを追加
bull やること
1 どこに要素を追加すればよいか調べる
2 その要素を起点にリンクを追加するコードを書く
3 うまくいったらView customize で設定
(いったんプライベートで)
4 動作することが確認できたらプライベートを外し
て全体に反映
追加位置を調べる
bull DOMインスペクタで追加したい位置を選択
追加位置を調べる
bull パスを確認
bull id属性がtop-menuとなっているdiv要素配下のul要素の
最後に追加してあげればよさそう
追加位置を調べる
bull コンソールで追加対象の要素を取得してみる
bull divtop-menu gt ul (id属性がtop-menuのdiv要素の子
のul要素) で取れた
リンクを追加するコードを書く
bull 対象のul要素の子要素としてリンクを追加する
コードを実行し思った動作になるまで確認
View customizeで設定
bull 画面の描画完了時にコードを実行する必要がある
(描画完了前だと要素が取得できない)ので
jQueryの$(function)関数を利用
$(function() ロード完了時に呼び出される $(top-menu gt ul) append(ltligtlta href=issuesgt全てのチケットltagtltligt) )
View customizeで設定
bull いったんプライベートで設定し動作を確認する
bull 動作OKでプライベートを外して全体に有効へ
コード(CSS)の書き方
JavaScriptの時と同じ
bull DOMインスペクタで変更したい要素を探す
bull CSSセレクタがどうなりそうかも確認しておく
bull 要素のスタイルを変えて試す
CSSをView customizeに設定
bull Path Patternは絞れるならば絞って問題ないが
CSSセレクタ自体で対象箇所が絞ってかけるので
全画面対象でもほとんど問題なし
bull そのままCSSを書くイメージ
CSSセレクタの書き方
CSSセレクタの確認
bull DOMインスペクタを使うことによってCSSセレ
クタはわかる
CSSセレクタの指定
bull bodyからすべてのパスを書く必要はなくid属性
が付与されているものを起点に考えると良い
bull id属性は一意のものになるので
body divwrapper divwrapper2 divwrapper3 divheader h1
divheader h1
bodyからのフルパス
こっちで十分
良く使うCSSセレクタ
他にもいろいろあるので詳しくない場合には
rdquoCSSセレクタrdquoで一度調べておくと良い
セレクタ名 書式 対象
型セレクタ E E要素
idセレクタ Emyid id名がmyidのE要素
classセレクタ Ewarning class名がwarinigのE要素
子孫セレクタ E F E要素の子孫にあたるF要素
子セレクタ E gt F E要素の子にあたるF要素 (子孫セレクタはE要素の配下ならばどこにあっても良いが子セレクタは1階層下のみが対象)
CSSセレクタで気を付けること
bull 必要のない要素と一致させない
bull 一致してしまう場合には条件をもっときつく
bull 単に要素を指定するのではなく要素+属性で指定す
る(idセレクタclassセレクタなど)
bull 子孫セレクタではなく子セレクタを使うなど
うまく動作しないときの 確認ポイント
Path patternがあっているか
bull 画面のソースを表示してView customizeで指定
したコードが埋め込まれているか確認
bull 埋め込まれていない場合Path patternが間違えている
のでPath patternを見直す
JavaScriptでエラーが発生していないか
bull 開発者ツールでエラーメッセージが出力されて
いないか確認
bull エラーメッセージが出力されていればそれをもとに
JavaScriptを修正
CSSが上書きされていないか
bull 複数のCSSが一致する場合その要素に対してど
のようなスタイルが適用されるかは優先度に
よって決まる
bull 該当の要素を詳細に指定している方が優先される
bull 型セレクタよりidセレクタで指定したものの方が優先
bull セレクタのレベルが同じならば後に書かれたものが
優先される
CSSが上書きされていないか
bull 上にあるほどもの優先度が高い
bull 取り消し線のものは優先度が高いものによって上書きさ
れているもの
チケットの入力フォームがらみは面倒
bull チケットの入力フォームはトラッカーまたはス
テータスが変わるとフォームの再読み込みが行
われる(all_attributes配下が差し替わる)
bull これはトラッカーやステータスによって入力可能な
フィールドや選択肢が変わるため
bull これにより入力フォームの各要素に対する変更(内
容変更やイベントの登録)はリセットされてし
まう
チケット入力フォームに対するイベント
bull 入力フォームが差し替わってもハンドリングでき
るようにする必要がある
bull 考え方としては親の要素に対してイベントを登
録しておいてイベントが発生した際に発生元が
該当のものか判断するようなイメージ
bull jQueryのon関数を使うと簡単に書ける
チケット入力フォームに対するイベント
bull ダメな例
これだと入力フォームが差し替わったタイミングで登録先の要素
(issue_status_id)が別物に変わってしまうのでうまく動かない
bull OKな例
documentに対してイベントハンドラを登録し該当の要素(issue_status_id)
が発生元だったら動作するように書くことによってissue_status_idが差し
替わってもハンドリング可能に
$(issue_status_id) on(change function(e) ステータス変更時に実施したい処理 )
$(document) on(change issue_status_id function(e) ステータス変更時に実施したい処理 )
チケット入力フォームに対する変更
bull 入力フォームが差し替わると変更した内容も元
に戻ってしまうので差し替わったタイミングで
処理する必要がある
bull たとえばカスタムフィールドの値に応じて他のカ
スタムフィールドで選択可能な値を絞る場合など
チケット入力フォームに対する変更
bull 差し替え処理を行っている関数をフックして差
し替え処理の後に処理を差し込む
bull replaceIssueFormWith 関数が差し替え処理を行って
いる関数なのでそこを対象に
関数を別名で退避 var _replaceIssueFormWith = replaceIssueFormWith 関数を中身を変更 退避した処理を呼び出すような関数として作り変える replaceIssueFormWith = function(html) 退避しておいた関数を呼び出し _replaceIssueFormWith(html) ここでフォーム差し替え後に やりたい処理を書く
View customize導入に向けて
試す環境を作る
bull プロジェクトで使っているRedmineにいきなり適
用するのは敷居が高いという場合にはまずは仮
想環境などで試してみる
bull Redmineの各バージョンのVagrant boxを公開している
のでそちらを使えばすぐに
vagrant init onozatyredmine-32
vagrant up
スクリプトを書いてみる
bull この資料を参考に書いてみる
bull スクリプトのサンプルは下記リポジトリに貯め
ていっているので参考に
bull httpsgithubcomonozatyredmine-view-customize-scripts
bull これからもだんだん増えていく予定
困ったときには
困ったときにはhellip
bull onozaty まで (follow me)
bull 即レスとまでいきませんが毎日確認してます
bull スクリプト例などもつぶやいています
困ったときにはhellip
bull こういうことできませんかといった質問もお
気軽にどうぞ
bull 一応全部答えている(できるものはBlogでも公開)つ
もりですが拾えてなかったらごめんなさい
おわり
ブラウザの開発者ツール
bull 開発者ツールはChromeFirefoxIE それぞれ
のブラウザに標準でも入っている
bull Firefoxだと拡張機能のFirebugでもOK
bull 愛用しているので以降のキャプチャはFirebugにて
DOMインスペクタ
bull 選択した要素がHTML上でどういった構造で書か
れているか確認できる
bull ソース表示で見るより簡単
コンソール
bull 表示している画面に対してのJavaScriptの実行を手
軽に試せる
bull 補完も効く(複数行モードの場合はダメ)
コンソール
bull 複数行まとめて実行できるものもあり長めの
コードでも修正実行を繰り返し行える
実際に試してみる
例ヘッダにチケット一覧リンクを追加
bull やること
1 どこに要素を追加すればよいか調べる
2 その要素を起点にリンクを追加するコードを書く
3 うまくいったらView customize で設定
(いったんプライベートで)
4 動作することが確認できたらプライベートを外し
て全体に反映
追加位置を調べる
bull DOMインスペクタで追加したい位置を選択
追加位置を調べる
bull パスを確認
bull id属性がtop-menuとなっているdiv要素配下のul要素の
最後に追加してあげればよさそう
追加位置を調べる
bull コンソールで追加対象の要素を取得してみる
bull divtop-menu gt ul (id属性がtop-menuのdiv要素の子
のul要素) で取れた
リンクを追加するコードを書く
bull 対象のul要素の子要素としてリンクを追加する
コードを実行し思った動作になるまで確認
View customizeで設定
bull 画面の描画完了時にコードを実行する必要がある
(描画完了前だと要素が取得できない)ので
jQueryの$(function)関数を利用
$(function() ロード完了時に呼び出される $(top-menu gt ul) append(ltligtlta href=issuesgt全てのチケットltagtltligt) )
View customizeで設定
bull いったんプライベートで設定し動作を確認する
bull 動作OKでプライベートを外して全体に有効へ
コード(CSS)の書き方
JavaScriptの時と同じ
bull DOMインスペクタで変更したい要素を探す
bull CSSセレクタがどうなりそうかも確認しておく
bull 要素のスタイルを変えて試す
CSSをView customizeに設定
bull Path Patternは絞れるならば絞って問題ないが
CSSセレクタ自体で対象箇所が絞ってかけるので
全画面対象でもほとんど問題なし
bull そのままCSSを書くイメージ
CSSセレクタの書き方
CSSセレクタの確認
bull DOMインスペクタを使うことによってCSSセレ
クタはわかる
CSSセレクタの指定
bull bodyからすべてのパスを書く必要はなくid属性
が付与されているものを起点に考えると良い
bull id属性は一意のものになるので
body divwrapper divwrapper2 divwrapper3 divheader h1
divheader h1
bodyからのフルパス
こっちで十分
良く使うCSSセレクタ
他にもいろいろあるので詳しくない場合には
rdquoCSSセレクタrdquoで一度調べておくと良い
セレクタ名 書式 対象
型セレクタ E E要素
idセレクタ Emyid id名がmyidのE要素
classセレクタ Ewarning class名がwarinigのE要素
子孫セレクタ E F E要素の子孫にあたるF要素
子セレクタ E gt F E要素の子にあたるF要素 (子孫セレクタはE要素の配下ならばどこにあっても良いが子セレクタは1階層下のみが対象)
CSSセレクタで気を付けること
bull 必要のない要素と一致させない
bull 一致してしまう場合には条件をもっときつく
bull 単に要素を指定するのではなく要素+属性で指定す
る(idセレクタclassセレクタなど)
bull 子孫セレクタではなく子セレクタを使うなど
うまく動作しないときの 確認ポイント
Path patternがあっているか
bull 画面のソースを表示してView customizeで指定
したコードが埋め込まれているか確認
bull 埋め込まれていない場合Path patternが間違えている
のでPath patternを見直す
JavaScriptでエラーが発生していないか
bull 開発者ツールでエラーメッセージが出力されて
いないか確認
bull エラーメッセージが出力されていればそれをもとに
JavaScriptを修正
CSSが上書きされていないか
bull 複数のCSSが一致する場合その要素に対してど
のようなスタイルが適用されるかは優先度に
よって決まる
bull 該当の要素を詳細に指定している方が優先される
bull 型セレクタよりidセレクタで指定したものの方が優先
bull セレクタのレベルが同じならば後に書かれたものが
優先される
CSSが上書きされていないか
bull 上にあるほどもの優先度が高い
bull 取り消し線のものは優先度が高いものによって上書きさ
れているもの
チケットの入力フォームがらみは面倒
bull チケットの入力フォームはトラッカーまたはス
テータスが変わるとフォームの再読み込みが行
われる(all_attributes配下が差し替わる)
bull これはトラッカーやステータスによって入力可能な
フィールドや選択肢が変わるため
bull これにより入力フォームの各要素に対する変更(内
容変更やイベントの登録)はリセットされてし
まう
チケット入力フォームに対するイベント
bull 入力フォームが差し替わってもハンドリングでき
るようにする必要がある
bull 考え方としては親の要素に対してイベントを登
録しておいてイベントが発生した際に発生元が
該当のものか判断するようなイメージ
bull jQueryのon関数を使うと簡単に書ける
チケット入力フォームに対するイベント
bull ダメな例
これだと入力フォームが差し替わったタイミングで登録先の要素
(issue_status_id)が別物に変わってしまうのでうまく動かない
bull OKな例
documentに対してイベントハンドラを登録し該当の要素(issue_status_id)
が発生元だったら動作するように書くことによってissue_status_idが差し
替わってもハンドリング可能に
$(issue_status_id) on(change function(e) ステータス変更時に実施したい処理 )
$(document) on(change issue_status_id function(e) ステータス変更時に実施したい処理 )
チケット入力フォームに対する変更
bull 入力フォームが差し替わると変更した内容も元
に戻ってしまうので差し替わったタイミングで
処理する必要がある
bull たとえばカスタムフィールドの値に応じて他のカ
スタムフィールドで選択可能な値を絞る場合など
チケット入力フォームに対する変更
bull 差し替え処理を行っている関数をフックして差
し替え処理の後に処理を差し込む
bull replaceIssueFormWith 関数が差し替え処理を行って
いる関数なのでそこを対象に
関数を別名で退避 var _replaceIssueFormWith = replaceIssueFormWith 関数を中身を変更 退避した処理を呼び出すような関数として作り変える replaceIssueFormWith = function(html) 退避しておいた関数を呼び出し _replaceIssueFormWith(html) ここでフォーム差し替え後に やりたい処理を書く
View customize導入に向けて
試す環境を作る
bull プロジェクトで使っているRedmineにいきなり適
用するのは敷居が高いという場合にはまずは仮
想環境などで試してみる
bull Redmineの各バージョンのVagrant boxを公開している
のでそちらを使えばすぐに
vagrant init onozatyredmine-32
vagrant up
スクリプトを書いてみる
bull この資料を参考に書いてみる
bull スクリプトのサンプルは下記リポジトリに貯め
ていっているので参考に
bull httpsgithubcomonozatyredmine-view-customize-scripts
bull これからもだんだん増えていく予定
困ったときには
困ったときにはhellip
bull onozaty まで (follow me)
bull 即レスとまでいきませんが毎日確認してます
bull スクリプト例などもつぶやいています
困ったときにはhellip
bull こういうことできませんかといった質問もお
気軽にどうぞ
bull 一応全部答えている(できるものはBlogでも公開)つ
もりですが拾えてなかったらごめんなさい
おわり
DOMインスペクタ
bull 選択した要素がHTML上でどういった構造で書か
れているか確認できる
bull ソース表示で見るより簡単
コンソール
bull 表示している画面に対してのJavaScriptの実行を手
軽に試せる
bull 補完も効く(複数行モードの場合はダメ)
コンソール
bull 複数行まとめて実行できるものもあり長めの
コードでも修正実行を繰り返し行える
実際に試してみる
例ヘッダにチケット一覧リンクを追加
bull やること
1 どこに要素を追加すればよいか調べる
2 その要素を起点にリンクを追加するコードを書く
3 うまくいったらView customize で設定
(いったんプライベートで)
4 動作することが確認できたらプライベートを外し
て全体に反映
追加位置を調べる
bull DOMインスペクタで追加したい位置を選択
追加位置を調べる
bull パスを確認
bull id属性がtop-menuとなっているdiv要素配下のul要素の
最後に追加してあげればよさそう
追加位置を調べる
bull コンソールで追加対象の要素を取得してみる
bull divtop-menu gt ul (id属性がtop-menuのdiv要素の子
のul要素) で取れた
リンクを追加するコードを書く
bull 対象のul要素の子要素としてリンクを追加する
コードを実行し思った動作になるまで確認
View customizeで設定
bull 画面の描画完了時にコードを実行する必要がある
(描画完了前だと要素が取得できない)ので
jQueryの$(function)関数を利用
$(function() ロード完了時に呼び出される $(top-menu gt ul) append(ltligtlta href=issuesgt全てのチケットltagtltligt) )
View customizeで設定
bull いったんプライベートで設定し動作を確認する
bull 動作OKでプライベートを外して全体に有効へ
コード(CSS)の書き方
JavaScriptの時と同じ
bull DOMインスペクタで変更したい要素を探す
bull CSSセレクタがどうなりそうかも確認しておく
bull 要素のスタイルを変えて試す
CSSをView customizeに設定
bull Path Patternは絞れるならば絞って問題ないが
CSSセレクタ自体で対象箇所が絞ってかけるので
全画面対象でもほとんど問題なし
bull そのままCSSを書くイメージ
CSSセレクタの書き方
CSSセレクタの確認
bull DOMインスペクタを使うことによってCSSセレ
クタはわかる
CSSセレクタの指定
bull bodyからすべてのパスを書く必要はなくid属性
が付与されているものを起点に考えると良い
bull id属性は一意のものになるので
body divwrapper divwrapper2 divwrapper3 divheader h1
divheader h1
bodyからのフルパス
こっちで十分
良く使うCSSセレクタ
他にもいろいろあるので詳しくない場合には
rdquoCSSセレクタrdquoで一度調べておくと良い
セレクタ名 書式 対象
型セレクタ E E要素
idセレクタ Emyid id名がmyidのE要素
classセレクタ Ewarning class名がwarinigのE要素
子孫セレクタ E F E要素の子孫にあたるF要素
子セレクタ E gt F E要素の子にあたるF要素 (子孫セレクタはE要素の配下ならばどこにあっても良いが子セレクタは1階層下のみが対象)
CSSセレクタで気を付けること
bull 必要のない要素と一致させない
bull 一致してしまう場合には条件をもっときつく
bull 単に要素を指定するのではなく要素+属性で指定す
る(idセレクタclassセレクタなど)
bull 子孫セレクタではなく子セレクタを使うなど
うまく動作しないときの 確認ポイント
Path patternがあっているか
bull 画面のソースを表示してView customizeで指定
したコードが埋め込まれているか確認
bull 埋め込まれていない場合Path patternが間違えている
のでPath patternを見直す
JavaScriptでエラーが発生していないか
bull 開発者ツールでエラーメッセージが出力されて
いないか確認
bull エラーメッセージが出力されていればそれをもとに
JavaScriptを修正
CSSが上書きされていないか
bull 複数のCSSが一致する場合その要素に対してど
のようなスタイルが適用されるかは優先度に
よって決まる
bull 該当の要素を詳細に指定している方が優先される
bull 型セレクタよりidセレクタで指定したものの方が優先
bull セレクタのレベルが同じならば後に書かれたものが
優先される
CSSが上書きされていないか
bull 上にあるほどもの優先度が高い
bull 取り消し線のものは優先度が高いものによって上書きさ
れているもの
チケットの入力フォームがらみは面倒
bull チケットの入力フォームはトラッカーまたはス
テータスが変わるとフォームの再読み込みが行
われる(all_attributes配下が差し替わる)
bull これはトラッカーやステータスによって入力可能な
フィールドや選択肢が変わるため
bull これにより入力フォームの各要素に対する変更(内
容変更やイベントの登録)はリセットされてし
まう
チケット入力フォームに対するイベント
bull 入力フォームが差し替わってもハンドリングでき
るようにする必要がある
bull 考え方としては親の要素に対してイベントを登
録しておいてイベントが発生した際に発生元が
該当のものか判断するようなイメージ
bull jQueryのon関数を使うと簡単に書ける
チケット入力フォームに対するイベント
bull ダメな例
これだと入力フォームが差し替わったタイミングで登録先の要素
(issue_status_id)が別物に変わってしまうのでうまく動かない
bull OKな例
documentに対してイベントハンドラを登録し該当の要素(issue_status_id)
が発生元だったら動作するように書くことによってissue_status_idが差し
替わってもハンドリング可能に
$(issue_status_id) on(change function(e) ステータス変更時に実施したい処理 )
$(document) on(change issue_status_id function(e) ステータス変更時に実施したい処理 )
チケット入力フォームに対する変更
bull 入力フォームが差し替わると変更した内容も元
に戻ってしまうので差し替わったタイミングで
処理する必要がある
bull たとえばカスタムフィールドの値に応じて他のカ
スタムフィールドで選択可能な値を絞る場合など
チケット入力フォームに対する変更
bull 差し替え処理を行っている関数をフックして差
し替え処理の後に処理を差し込む
bull replaceIssueFormWith 関数が差し替え処理を行って
いる関数なのでそこを対象に
関数を別名で退避 var _replaceIssueFormWith = replaceIssueFormWith 関数を中身を変更 退避した処理を呼び出すような関数として作り変える replaceIssueFormWith = function(html) 退避しておいた関数を呼び出し _replaceIssueFormWith(html) ここでフォーム差し替え後に やりたい処理を書く
View customize導入に向けて
試す環境を作る
bull プロジェクトで使っているRedmineにいきなり適
用するのは敷居が高いという場合にはまずは仮
想環境などで試してみる
bull Redmineの各バージョンのVagrant boxを公開している
のでそちらを使えばすぐに
vagrant init onozatyredmine-32
vagrant up
スクリプトを書いてみる
bull この資料を参考に書いてみる
bull スクリプトのサンプルは下記リポジトリに貯め
ていっているので参考に
bull httpsgithubcomonozatyredmine-view-customize-scripts
bull これからもだんだん増えていく予定
困ったときには
困ったときにはhellip
bull onozaty まで (follow me)
bull 即レスとまでいきませんが毎日確認してます
bull スクリプト例などもつぶやいています
困ったときにはhellip
bull こういうことできませんかといった質問もお
気軽にどうぞ
bull 一応全部答えている(できるものはBlogでも公開)つ
もりですが拾えてなかったらごめんなさい
おわり
コンソール
bull 表示している画面に対してのJavaScriptの実行を手
軽に試せる
bull 補完も効く(複数行モードの場合はダメ)
コンソール
bull 複数行まとめて実行できるものもあり長めの
コードでも修正実行を繰り返し行える
実際に試してみる
例ヘッダにチケット一覧リンクを追加
bull やること
1 どこに要素を追加すればよいか調べる
2 その要素を起点にリンクを追加するコードを書く
3 うまくいったらView customize で設定
(いったんプライベートで)
4 動作することが確認できたらプライベートを外し
て全体に反映
追加位置を調べる
bull DOMインスペクタで追加したい位置を選択
追加位置を調べる
bull パスを確認
bull id属性がtop-menuとなっているdiv要素配下のul要素の
最後に追加してあげればよさそう
追加位置を調べる
bull コンソールで追加対象の要素を取得してみる
bull divtop-menu gt ul (id属性がtop-menuのdiv要素の子
のul要素) で取れた
リンクを追加するコードを書く
bull 対象のul要素の子要素としてリンクを追加する
コードを実行し思った動作になるまで確認
View customizeで設定
bull 画面の描画完了時にコードを実行する必要がある
(描画完了前だと要素が取得できない)ので
jQueryの$(function)関数を利用
$(function() ロード完了時に呼び出される $(top-menu gt ul) append(ltligtlta href=issuesgt全てのチケットltagtltligt) )
View customizeで設定
bull いったんプライベートで設定し動作を確認する
bull 動作OKでプライベートを外して全体に有効へ
コード(CSS)の書き方
JavaScriptの時と同じ
bull DOMインスペクタで変更したい要素を探す
bull CSSセレクタがどうなりそうかも確認しておく
bull 要素のスタイルを変えて試す
CSSをView customizeに設定
bull Path Patternは絞れるならば絞って問題ないが
CSSセレクタ自体で対象箇所が絞ってかけるので
全画面対象でもほとんど問題なし
bull そのままCSSを書くイメージ
CSSセレクタの書き方
CSSセレクタの確認
bull DOMインスペクタを使うことによってCSSセレ
クタはわかる
CSSセレクタの指定
bull bodyからすべてのパスを書く必要はなくid属性
が付与されているものを起点に考えると良い
bull id属性は一意のものになるので
body divwrapper divwrapper2 divwrapper3 divheader h1
divheader h1
bodyからのフルパス
こっちで十分
良く使うCSSセレクタ
他にもいろいろあるので詳しくない場合には
rdquoCSSセレクタrdquoで一度調べておくと良い
セレクタ名 書式 対象
型セレクタ E E要素
idセレクタ Emyid id名がmyidのE要素
classセレクタ Ewarning class名がwarinigのE要素
子孫セレクタ E F E要素の子孫にあたるF要素
子セレクタ E gt F E要素の子にあたるF要素 (子孫セレクタはE要素の配下ならばどこにあっても良いが子セレクタは1階層下のみが対象)
CSSセレクタで気を付けること
bull 必要のない要素と一致させない
bull 一致してしまう場合には条件をもっときつく
bull 単に要素を指定するのではなく要素+属性で指定す
る(idセレクタclassセレクタなど)
bull 子孫セレクタではなく子セレクタを使うなど
うまく動作しないときの 確認ポイント
Path patternがあっているか
bull 画面のソースを表示してView customizeで指定
したコードが埋め込まれているか確認
bull 埋め込まれていない場合Path patternが間違えている
のでPath patternを見直す
JavaScriptでエラーが発生していないか
bull 開発者ツールでエラーメッセージが出力されて
いないか確認
bull エラーメッセージが出力されていればそれをもとに
JavaScriptを修正
CSSが上書きされていないか
bull 複数のCSSが一致する場合その要素に対してど
のようなスタイルが適用されるかは優先度に
よって決まる
bull 該当の要素を詳細に指定している方が優先される
bull 型セレクタよりidセレクタで指定したものの方が優先
bull セレクタのレベルが同じならば後に書かれたものが
優先される
CSSが上書きされていないか
bull 上にあるほどもの優先度が高い
bull 取り消し線のものは優先度が高いものによって上書きさ
れているもの
チケットの入力フォームがらみは面倒
bull チケットの入力フォームはトラッカーまたはス
テータスが変わるとフォームの再読み込みが行
われる(all_attributes配下が差し替わる)
bull これはトラッカーやステータスによって入力可能な
フィールドや選択肢が変わるため
bull これにより入力フォームの各要素に対する変更(内
容変更やイベントの登録)はリセットされてし
まう
チケット入力フォームに対するイベント
bull 入力フォームが差し替わってもハンドリングでき
るようにする必要がある
bull 考え方としては親の要素に対してイベントを登
録しておいてイベントが発生した際に発生元が
該当のものか判断するようなイメージ
bull jQueryのon関数を使うと簡単に書ける
チケット入力フォームに対するイベント
bull ダメな例
これだと入力フォームが差し替わったタイミングで登録先の要素
(issue_status_id)が別物に変わってしまうのでうまく動かない
bull OKな例
documentに対してイベントハンドラを登録し該当の要素(issue_status_id)
が発生元だったら動作するように書くことによってissue_status_idが差し
替わってもハンドリング可能に
$(issue_status_id) on(change function(e) ステータス変更時に実施したい処理 )
$(document) on(change issue_status_id function(e) ステータス変更時に実施したい処理 )
チケット入力フォームに対する変更
bull 入力フォームが差し替わると変更した内容も元
に戻ってしまうので差し替わったタイミングで
処理する必要がある
bull たとえばカスタムフィールドの値に応じて他のカ
スタムフィールドで選択可能な値を絞る場合など
チケット入力フォームに対する変更
bull 差し替え処理を行っている関数をフックして差
し替え処理の後に処理を差し込む
bull replaceIssueFormWith 関数が差し替え処理を行って
いる関数なのでそこを対象に
関数を別名で退避 var _replaceIssueFormWith = replaceIssueFormWith 関数を中身を変更 退避した処理を呼び出すような関数として作り変える replaceIssueFormWith = function(html) 退避しておいた関数を呼び出し _replaceIssueFormWith(html) ここでフォーム差し替え後に やりたい処理を書く
View customize導入に向けて
試す環境を作る
bull プロジェクトで使っているRedmineにいきなり適
用するのは敷居が高いという場合にはまずは仮
想環境などで試してみる
bull Redmineの各バージョンのVagrant boxを公開している
のでそちらを使えばすぐに
vagrant init onozatyredmine-32
vagrant up
スクリプトを書いてみる
bull この資料を参考に書いてみる
bull スクリプトのサンプルは下記リポジトリに貯め
ていっているので参考に
bull httpsgithubcomonozatyredmine-view-customize-scripts
bull これからもだんだん増えていく予定
困ったときには
困ったときにはhellip
bull onozaty まで (follow me)
bull 即レスとまでいきませんが毎日確認してます
bull スクリプト例などもつぶやいています
困ったときにはhellip
bull こういうことできませんかといった質問もお
気軽にどうぞ
bull 一応全部答えている(できるものはBlogでも公開)つ
もりですが拾えてなかったらごめんなさい
おわり
コンソール
bull 複数行まとめて実行できるものもあり長めの
コードでも修正実行を繰り返し行える
実際に試してみる
例ヘッダにチケット一覧リンクを追加
bull やること
1 どこに要素を追加すればよいか調べる
2 その要素を起点にリンクを追加するコードを書く
3 うまくいったらView customize で設定
(いったんプライベートで)
4 動作することが確認できたらプライベートを外し
て全体に反映
追加位置を調べる
bull DOMインスペクタで追加したい位置を選択
追加位置を調べる
bull パスを確認
bull id属性がtop-menuとなっているdiv要素配下のul要素の
最後に追加してあげればよさそう
追加位置を調べる
bull コンソールで追加対象の要素を取得してみる
bull divtop-menu gt ul (id属性がtop-menuのdiv要素の子
のul要素) で取れた
リンクを追加するコードを書く
bull 対象のul要素の子要素としてリンクを追加する
コードを実行し思った動作になるまで確認
View customizeで設定
bull 画面の描画完了時にコードを実行する必要がある
(描画完了前だと要素が取得できない)ので
jQueryの$(function)関数を利用
$(function() ロード完了時に呼び出される $(top-menu gt ul) append(ltligtlta href=issuesgt全てのチケットltagtltligt) )
View customizeで設定
bull いったんプライベートで設定し動作を確認する
bull 動作OKでプライベートを外して全体に有効へ
コード(CSS)の書き方
JavaScriptの時と同じ
bull DOMインスペクタで変更したい要素を探す
bull CSSセレクタがどうなりそうかも確認しておく
bull 要素のスタイルを変えて試す
CSSをView customizeに設定
bull Path Patternは絞れるならば絞って問題ないが
CSSセレクタ自体で対象箇所が絞ってかけるので
全画面対象でもほとんど問題なし
bull そのままCSSを書くイメージ
CSSセレクタの書き方
CSSセレクタの確認
bull DOMインスペクタを使うことによってCSSセレ
クタはわかる
CSSセレクタの指定
bull bodyからすべてのパスを書く必要はなくid属性
が付与されているものを起点に考えると良い
bull id属性は一意のものになるので
body divwrapper divwrapper2 divwrapper3 divheader h1
divheader h1
bodyからのフルパス
こっちで十分
良く使うCSSセレクタ
他にもいろいろあるので詳しくない場合には
rdquoCSSセレクタrdquoで一度調べておくと良い
セレクタ名 書式 対象
型セレクタ E E要素
idセレクタ Emyid id名がmyidのE要素
classセレクタ Ewarning class名がwarinigのE要素
子孫セレクタ E F E要素の子孫にあたるF要素
子セレクタ E gt F E要素の子にあたるF要素 (子孫セレクタはE要素の配下ならばどこにあっても良いが子セレクタは1階層下のみが対象)
CSSセレクタで気を付けること
bull 必要のない要素と一致させない
bull 一致してしまう場合には条件をもっときつく
bull 単に要素を指定するのではなく要素+属性で指定す
る(idセレクタclassセレクタなど)
bull 子孫セレクタではなく子セレクタを使うなど
うまく動作しないときの 確認ポイント
Path patternがあっているか
bull 画面のソースを表示してView customizeで指定
したコードが埋め込まれているか確認
bull 埋め込まれていない場合Path patternが間違えている
のでPath patternを見直す
JavaScriptでエラーが発生していないか
bull 開発者ツールでエラーメッセージが出力されて
いないか確認
bull エラーメッセージが出力されていればそれをもとに
JavaScriptを修正
CSSが上書きされていないか
bull 複数のCSSが一致する場合その要素に対してど
のようなスタイルが適用されるかは優先度に
よって決まる
bull 該当の要素を詳細に指定している方が優先される
bull 型セレクタよりidセレクタで指定したものの方が優先
bull セレクタのレベルが同じならば後に書かれたものが
優先される
CSSが上書きされていないか
bull 上にあるほどもの優先度が高い
bull 取り消し線のものは優先度が高いものによって上書きさ
れているもの
チケットの入力フォームがらみは面倒
bull チケットの入力フォームはトラッカーまたはス
テータスが変わるとフォームの再読み込みが行
われる(all_attributes配下が差し替わる)
bull これはトラッカーやステータスによって入力可能な
フィールドや選択肢が変わるため
bull これにより入力フォームの各要素に対する変更(内
容変更やイベントの登録)はリセットされてし
まう
チケット入力フォームに対するイベント
bull 入力フォームが差し替わってもハンドリングでき
るようにする必要がある
bull 考え方としては親の要素に対してイベントを登
録しておいてイベントが発生した際に発生元が
該当のものか判断するようなイメージ
bull jQueryのon関数を使うと簡単に書ける
チケット入力フォームに対するイベント
bull ダメな例
これだと入力フォームが差し替わったタイミングで登録先の要素
(issue_status_id)が別物に変わってしまうのでうまく動かない
bull OKな例
documentに対してイベントハンドラを登録し該当の要素(issue_status_id)
が発生元だったら動作するように書くことによってissue_status_idが差し
替わってもハンドリング可能に
$(issue_status_id) on(change function(e) ステータス変更時に実施したい処理 )
$(document) on(change issue_status_id function(e) ステータス変更時に実施したい処理 )
チケット入力フォームに対する変更
bull 入力フォームが差し替わると変更した内容も元
に戻ってしまうので差し替わったタイミングで
処理する必要がある
bull たとえばカスタムフィールドの値に応じて他のカ
スタムフィールドで選択可能な値を絞る場合など
チケット入力フォームに対する変更
bull 差し替え処理を行っている関数をフックして差
し替え処理の後に処理を差し込む
bull replaceIssueFormWith 関数が差し替え処理を行って
いる関数なのでそこを対象に
関数を別名で退避 var _replaceIssueFormWith = replaceIssueFormWith 関数を中身を変更 退避した処理を呼び出すような関数として作り変える replaceIssueFormWith = function(html) 退避しておいた関数を呼び出し _replaceIssueFormWith(html) ここでフォーム差し替え後に やりたい処理を書く
View customize導入に向けて
試す環境を作る
bull プロジェクトで使っているRedmineにいきなり適
用するのは敷居が高いという場合にはまずは仮
想環境などで試してみる
bull Redmineの各バージョンのVagrant boxを公開している
のでそちらを使えばすぐに
vagrant init onozatyredmine-32
vagrant up
スクリプトを書いてみる
bull この資料を参考に書いてみる
bull スクリプトのサンプルは下記リポジトリに貯め
ていっているので参考に
bull httpsgithubcomonozatyredmine-view-customize-scripts
bull これからもだんだん増えていく予定
困ったときには
困ったときにはhellip
bull onozaty まで (follow me)
bull 即レスとまでいきませんが毎日確認してます
bull スクリプト例などもつぶやいています
困ったときにはhellip
bull こういうことできませんかといった質問もお
気軽にどうぞ
bull 一応全部答えている(できるものはBlogでも公開)つ
もりですが拾えてなかったらごめんなさい
おわり
実際に試してみる
例ヘッダにチケット一覧リンクを追加
bull やること
1 どこに要素を追加すればよいか調べる
2 その要素を起点にリンクを追加するコードを書く
3 うまくいったらView customize で設定
(いったんプライベートで)
4 動作することが確認できたらプライベートを外し
て全体に反映
追加位置を調べる
bull DOMインスペクタで追加したい位置を選択
追加位置を調べる
bull パスを確認
bull id属性がtop-menuとなっているdiv要素配下のul要素の
最後に追加してあげればよさそう
追加位置を調べる
bull コンソールで追加対象の要素を取得してみる
bull divtop-menu gt ul (id属性がtop-menuのdiv要素の子
のul要素) で取れた
リンクを追加するコードを書く
bull 対象のul要素の子要素としてリンクを追加する
コードを実行し思った動作になるまで確認
View customizeで設定
bull 画面の描画完了時にコードを実行する必要がある
(描画完了前だと要素が取得できない)ので
jQueryの$(function)関数を利用
$(function() ロード完了時に呼び出される $(top-menu gt ul) append(ltligtlta href=issuesgt全てのチケットltagtltligt) )
View customizeで設定
bull いったんプライベートで設定し動作を確認する
bull 動作OKでプライベートを外して全体に有効へ
コード(CSS)の書き方
JavaScriptの時と同じ
bull DOMインスペクタで変更したい要素を探す
bull CSSセレクタがどうなりそうかも確認しておく
bull 要素のスタイルを変えて試す
CSSをView customizeに設定
bull Path Patternは絞れるならば絞って問題ないが
CSSセレクタ自体で対象箇所が絞ってかけるので
全画面対象でもほとんど問題なし
bull そのままCSSを書くイメージ
CSSセレクタの書き方
CSSセレクタの確認
bull DOMインスペクタを使うことによってCSSセレ
クタはわかる
CSSセレクタの指定
bull bodyからすべてのパスを書く必要はなくid属性
が付与されているものを起点に考えると良い
bull id属性は一意のものになるので
body divwrapper divwrapper2 divwrapper3 divheader h1
divheader h1
bodyからのフルパス
こっちで十分
良く使うCSSセレクタ
他にもいろいろあるので詳しくない場合には
rdquoCSSセレクタrdquoで一度調べておくと良い
セレクタ名 書式 対象
型セレクタ E E要素
idセレクタ Emyid id名がmyidのE要素
classセレクタ Ewarning class名がwarinigのE要素
子孫セレクタ E F E要素の子孫にあたるF要素
子セレクタ E gt F E要素の子にあたるF要素 (子孫セレクタはE要素の配下ならばどこにあっても良いが子セレクタは1階層下のみが対象)
CSSセレクタで気を付けること
bull 必要のない要素と一致させない
bull 一致してしまう場合には条件をもっときつく
bull 単に要素を指定するのではなく要素+属性で指定す
る(idセレクタclassセレクタなど)
bull 子孫セレクタではなく子セレクタを使うなど
うまく動作しないときの 確認ポイント
Path patternがあっているか
bull 画面のソースを表示してView customizeで指定
したコードが埋め込まれているか確認
bull 埋め込まれていない場合Path patternが間違えている
のでPath patternを見直す
JavaScriptでエラーが発生していないか
bull 開発者ツールでエラーメッセージが出力されて
いないか確認
bull エラーメッセージが出力されていればそれをもとに
JavaScriptを修正
CSSが上書きされていないか
bull 複数のCSSが一致する場合その要素に対してど
のようなスタイルが適用されるかは優先度に
よって決まる
bull 該当の要素を詳細に指定している方が優先される
bull 型セレクタよりidセレクタで指定したものの方が優先
bull セレクタのレベルが同じならば後に書かれたものが
優先される
CSSが上書きされていないか
bull 上にあるほどもの優先度が高い
bull 取り消し線のものは優先度が高いものによって上書きさ
れているもの
チケットの入力フォームがらみは面倒
bull チケットの入力フォームはトラッカーまたはス
テータスが変わるとフォームの再読み込みが行
われる(all_attributes配下が差し替わる)
bull これはトラッカーやステータスによって入力可能な
フィールドや選択肢が変わるため
bull これにより入力フォームの各要素に対する変更(内
容変更やイベントの登録)はリセットされてし
まう
チケット入力フォームに対するイベント
bull 入力フォームが差し替わってもハンドリングでき
るようにする必要がある
bull 考え方としては親の要素に対してイベントを登
録しておいてイベントが発生した際に発生元が
該当のものか判断するようなイメージ
bull jQueryのon関数を使うと簡単に書ける
チケット入力フォームに対するイベント
bull ダメな例
これだと入力フォームが差し替わったタイミングで登録先の要素
(issue_status_id)が別物に変わってしまうのでうまく動かない
bull OKな例
documentに対してイベントハンドラを登録し該当の要素(issue_status_id)
が発生元だったら動作するように書くことによってissue_status_idが差し
替わってもハンドリング可能に
$(issue_status_id) on(change function(e) ステータス変更時に実施したい処理 )
$(document) on(change issue_status_id function(e) ステータス変更時に実施したい処理 )
チケット入力フォームに対する変更
bull 入力フォームが差し替わると変更した内容も元
に戻ってしまうので差し替わったタイミングで
処理する必要がある
bull たとえばカスタムフィールドの値に応じて他のカ
スタムフィールドで選択可能な値を絞る場合など
チケット入力フォームに対する変更
bull 差し替え処理を行っている関数をフックして差
し替え処理の後に処理を差し込む
bull replaceIssueFormWith 関数が差し替え処理を行って
いる関数なのでそこを対象に
関数を別名で退避 var _replaceIssueFormWith = replaceIssueFormWith 関数を中身を変更 退避した処理を呼び出すような関数として作り変える replaceIssueFormWith = function(html) 退避しておいた関数を呼び出し _replaceIssueFormWith(html) ここでフォーム差し替え後に やりたい処理を書く
View customize導入に向けて
試す環境を作る
bull プロジェクトで使っているRedmineにいきなり適
用するのは敷居が高いという場合にはまずは仮
想環境などで試してみる
bull Redmineの各バージョンのVagrant boxを公開している
のでそちらを使えばすぐに
vagrant init onozatyredmine-32
vagrant up
スクリプトを書いてみる
bull この資料を参考に書いてみる
bull スクリプトのサンプルは下記リポジトリに貯め
ていっているので参考に
bull httpsgithubcomonozatyredmine-view-customize-scripts
bull これからもだんだん増えていく予定
困ったときには
困ったときにはhellip
bull onozaty まで (follow me)
bull 即レスとまでいきませんが毎日確認してます
bull スクリプト例などもつぶやいています
困ったときにはhellip
bull こういうことできませんかといった質問もお
気軽にどうぞ
bull 一応全部答えている(できるものはBlogでも公開)つ
もりですが拾えてなかったらごめんなさい
おわり
例ヘッダにチケット一覧リンクを追加
bull やること
1 どこに要素を追加すればよいか調べる
2 その要素を起点にリンクを追加するコードを書く
3 うまくいったらView customize で設定
(いったんプライベートで)
4 動作することが確認できたらプライベートを外し
て全体に反映
追加位置を調べる
bull DOMインスペクタで追加したい位置を選択
追加位置を調べる
bull パスを確認
bull id属性がtop-menuとなっているdiv要素配下のul要素の
最後に追加してあげればよさそう
追加位置を調べる
bull コンソールで追加対象の要素を取得してみる
bull divtop-menu gt ul (id属性がtop-menuのdiv要素の子
のul要素) で取れた
リンクを追加するコードを書く
bull 対象のul要素の子要素としてリンクを追加する
コードを実行し思った動作になるまで確認
View customizeで設定
bull 画面の描画完了時にコードを実行する必要がある
(描画完了前だと要素が取得できない)ので
jQueryの$(function)関数を利用
$(function() ロード完了時に呼び出される $(top-menu gt ul) append(ltligtlta href=issuesgt全てのチケットltagtltligt) )
View customizeで設定
bull いったんプライベートで設定し動作を確認する
bull 動作OKでプライベートを外して全体に有効へ
コード(CSS)の書き方
JavaScriptの時と同じ
bull DOMインスペクタで変更したい要素を探す
bull CSSセレクタがどうなりそうかも確認しておく
bull 要素のスタイルを変えて試す
CSSをView customizeに設定
bull Path Patternは絞れるならば絞って問題ないが
CSSセレクタ自体で対象箇所が絞ってかけるので
全画面対象でもほとんど問題なし
bull そのままCSSを書くイメージ
CSSセレクタの書き方
CSSセレクタの確認
bull DOMインスペクタを使うことによってCSSセレ
クタはわかる
CSSセレクタの指定
bull bodyからすべてのパスを書く必要はなくid属性
が付与されているものを起点に考えると良い
bull id属性は一意のものになるので
body divwrapper divwrapper2 divwrapper3 divheader h1
divheader h1
bodyからのフルパス
こっちで十分
良く使うCSSセレクタ
他にもいろいろあるので詳しくない場合には
rdquoCSSセレクタrdquoで一度調べておくと良い
セレクタ名 書式 対象
型セレクタ E E要素
idセレクタ Emyid id名がmyidのE要素
classセレクタ Ewarning class名がwarinigのE要素
子孫セレクタ E F E要素の子孫にあたるF要素
子セレクタ E gt F E要素の子にあたるF要素 (子孫セレクタはE要素の配下ならばどこにあっても良いが子セレクタは1階層下のみが対象)
CSSセレクタで気を付けること
bull 必要のない要素と一致させない
bull 一致してしまう場合には条件をもっときつく
bull 単に要素を指定するのではなく要素+属性で指定す
る(idセレクタclassセレクタなど)
bull 子孫セレクタではなく子セレクタを使うなど
うまく動作しないときの 確認ポイント
Path patternがあっているか
bull 画面のソースを表示してView customizeで指定
したコードが埋め込まれているか確認
bull 埋め込まれていない場合Path patternが間違えている
のでPath patternを見直す
JavaScriptでエラーが発生していないか
bull 開発者ツールでエラーメッセージが出力されて
いないか確認
bull エラーメッセージが出力されていればそれをもとに
JavaScriptを修正
CSSが上書きされていないか
bull 複数のCSSが一致する場合その要素に対してど
のようなスタイルが適用されるかは優先度に
よって決まる
bull 該当の要素を詳細に指定している方が優先される
bull 型セレクタよりidセレクタで指定したものの方が優先
bull セレクタのレベルが同じならば後に書かれたものが
優先される
CSSが上書きされていないか
bull 上にあるほどもの優先度が高い
bull 取り消し線のものは優先度が高いものによって上書きさ
れているもの
チケットの入力フォームがらみは面倒
bull チケットの入力フォームはトラッカーまたはス
テータスが変わるとフォームの再読み込みが行
われる(all_attributes配下が差し替わる)
bull これはトラッカーやステータスによって入力可能な
フィールドや選択肢が変わるため
bull これにより入力フォームの各要素に対する変更(内
容変更やイベントの登録)はリセットされてし
まう
チケット入力フォームに対するイベント
bull 入力フォームが差し替わってもハンドリングでき
るようにする必要がある
bull 考え方としては親の要素に対してイベントを登
録しておいてイベントが発生した際に発生元が
該当のものか判断するようなイメージ
bull jQueryのon関数を使うと簡単に書ける
チケット入力フォームに対するイベント
bull ダメな例
これだと入力フォームが差し替わったタイミングで登録先の要素
(issue_status_id)が別物に変わってしまうのでうまく動かない
bull OKな例
documentに対してイベントハンドラを登録し該当の要素(issue_status_id)
が発生元だったら動作するように書くことによってissue_status_idが差し
替わってもハンドリング可能に
$(issue_status_id) on(change function(e) ステータス変更時に実施したい処理 )
$(document) on(change issue_status_id function(e) ステータス変更時に実施したい処理 )
チケット入力フォームに対する変更
bull 入力フォームが差し替わると変更した内容も元
に戻ってしまうので差し替わったタイミングで
処理する必要がある
bull たとえばカスタムフィールドの値に応じて他のカ
スタムフィールドで選択可能な値を絞る場合など
チケット入力フォームに対する変更
bull 差し替え処理を行っている関数をフックして差
し替え処理の後に処理を差し込む
bull replaceIssueFormWith 関数が差し替え処理を行って
いる関数なのでそこを対象に
関数を別名で退避 var _replaceIssueFormWith = replaceIssueFormWith 関数を中身を変更 退避した処理を呼び出すような関数として作り変える replaceIssueFormWith = function(html) 退避しておいた関数を呼び出し _replaceIssueFormWith(html) ここでフォーム差し替え後に やりたい処理を書く
View customize導入に向けて
試す環境を作る
bull プロジェクトで使っているRedmineにいきなり適
用するのは敷居が高いという場合にはまずは仮
想環境などで試してみる
bull Redmineの各バージョンのVagrant boxを公開している
のでそちらを使えばすぐに
vagrant init onozatyredmine-32
vagrant up
スクリプトを書いてみる
bull この資料を参考に書いてみる
bull スクリプトのサンプルは下記リポジトリに貯め
ていっているので参考に
bull httpsgithubcomonozatyredmine-view-customize-scripts
bull これからもだんだん増えていく予定
困ったときには
困ったときにはhellip
bull onozaty まで (follow me)
bull 即レスとまでいきませんが毎日確認してます
bull スクリプト例などもつぶやいています
困ったときにはhellip
bull こういうことできませんかといった質問もお
気軽にどうぞ
bull 一応全部答えている(できるものはBlogでも公開)つ
もりですが拾えてなかったらごめんなさい
おわり
追加位置を調べる
bull DOMインスペクタで追加したい位置を選択
追加位置を調べる
bull パスを確認
bull id属性がtop-menuとなっているdiv要素配下のul要素の
最後に追加してあげればよさそう
追加位置を調べる
bull コンソールで追加対象の要素を取得してみる
bull divtop-menu gt ul (id属性がtop-menuのdiv要素の子
のul要素) で取れた
リンクを追加するコードを書く
bull 対象のul要素の子要素としてリンクを追加する
コードを実行し思った動作になるまで確認
View customizeで設定
bull 画面の描画完了時にコードを実行する必要がある
(描画完了前だと要素が取得できない)ので
jQueryの$(function)関数を利用
$(function() ロード完了時に呼び出される $(top-menu gt ul) append(ltligtlta href=issuesgt全てのチケットltagtltligt) )
View customizeで設定
bull いったんプライベートで設定し動作を確認する
bull 動作OKでプライベートを外して全体に有効へ
コード(CSS)の書き方
JavaScriptの時と同じ
bull DOMインスペクタで変更したい要素を探す
bull CSSセレクタがどうなりそうかも確認しておく
bull 要素のスタイルを変えて試す
CSSをView customizeに設定
bull Path Patternは絞れるならば絞って問題ないが
CSSセレクタ自体で対象箇所が絞ってかけるので
全画面対象でもほとんど問題なし
bull そのままCSSを書くイメージ
CSSセレクタの書き方
CSSセレクタの確認
bull DOMインスペクタを使うことによってCSSセレ
クタはわかる
CSSセレクタの指定
bull bodyからすべてのパスを書く必要はなくid属性
が付与されているものを起点に考えると良い
bull id属性は一意のものになるので
body divwrapper divwrapper2 divwrapper3 divheader h1
divheader h1
bodyからのフルパス
こっちで十分
良く使うCSSセレクタ
他にもいろいろあるので詳しくない場合には
rdquoCSSセレクタrdquoで一度調べておくと良い
セレクタ名 書式 対象
型セレクタ E E要素
idセレクタ Emyid id名がmyidのE要素
classセレクタ Ewarning class名がwarinigのE要素
子孫セレクタ E F E要素の子孫にあたるF要素
子セレクタ E gt F E要素の子にあたるF要素 (子孫セレクタはE要素の配下ならばどこにあっても良いが子セレクタは1階層下のみが対象)
CSSセレクタで気を付けること
bull 必要のない要素と一致させない
bull 一致してしまう場合には条件をもっときつく
bull 単に要素を指定するのではなく要素+属性で指定す
る(idセレクタclassセレクタなど)
bull 子孫セレクタではなく子セレクタを使うなど
うまく動作しないときの 確認ポイント
Path patternがあっているか
bull 画面のソースを表示してView customizeで指定
したコードが埋め込まれているか確認
bull 埋め込まれていない場合Path patternが間違えている
のでPath patternを見直す
JavaScriptでエラーが発生していないか
bull 開発者ツールでエラーメッセージが出力されて
いないか確認
bull エラーメッセージが出力されていればそれをもとに
JavaScriptを修正
CSSが上書きされていないか
bull 複数のCSSが一致する場合その要素に対してど
のようなスタイルが適用されるかは優先度に
よって決まる
bull 該当の要素を詳細に指定している方が優先される
bull 型セレクタよりidセレクタで指定したものの方が優先
bull セレクタのレベルが同じならば後に書かれたものが
優先される
CSSが上書きされていないか
bull 上にあるほどもの優先度が高い
bull 取り消し線のものは優先度が高いものによって上書きさ
れているもの
チケットの入力フォームがらみは面倒
bull チケットの入力フォームはトラッカーまたはス
テータスが変わるとフォームの再読み込みが行
われる(all_attributes配下が差し替わる)
bull これはトラッカーやステータスによって入力可能な
フィールドや選択肢が変わるため
bull これにより入力フォームの各要素に対する変更(内
容変更やイベントの登録)はリセットされてし
まう
チケット入力フォームに対するイベント
bull 入力フォームが差し替わってもハンドリングでき
るようにする必要がある
bull 考え方としては親の要素に対してイベントを登
録しておいてイベントが発生した際に発生元が
該当のものか判断するようなイメージ
bull jQueryのon関数を使うと簡単に書ける
チケット入力フォームに対するイベント
bull ダメな例
これだと入力フォームが差し替わったタイミングで登録先の要素
(issue_status_id)が別物に変わってしまうのでうまく動かない
bull OKな例
documentに対してイベントハンドラを登録し該当の要素(issue_status_id)
が発生元だったら動作するように書くことによってissue_status_idが差し
替わってもハンドリング可能に
$(issue_status_id) on(change function(e) ステータス変更時に実施したい処理 )
$(document) on(change issue_status_id function(e) ステータス変更時に実施したい処理 )
チケット入力フォームに対する変更
bull 入力フォームが差し替わると変更した内容も元
に戻ってしまうので差し替わったタイミングで
処理する必要がある
bull たとえばカスタムフィールドの値に応じて他のカ
スタムフィールドで選択可能な値を絞る場合など
チケット入力フォームに対する変更
bull 差し替え処理を行っている関数をフックして差
し替え処理の後に処理を差し込む
bull replaceIssueFormWith 関数が差し替え処理を行って
いる関数なのでそこを対象に
関数を別名で退避 var _replaceIssueFormWith = replaceIssueFormWith 関数を中身を変更 退避した処理を呼び出すような関数として作り変える replaceIssueFormWith = function(html) 退避しておいた関数を呼び出し _replaceIssueFormWith(html) ここでフォーム差し替え後に やりたい処理を書く
View customize導入に向けて
試す環境を作る
bull プロジェクトで使っているRedmineにいきなり適
用するのは敷居が高いという場合にはまずは仮
想環境などで試してみる
bull Redmineの各バージョンのVagrant boxを公開している
のでそちらを使えばすぐに
vagrant init onozatyredmine-32
vagrant up
スクリプトを書いてみる
bull この資料を参考に書いてみる
bull スクリプトのサンプルは下記リポジトリに貯め
ていっているので参考に
bull httpsgithubcomonozatyredmine-view-customize-scripts
bull これからもだんだん増えていく予定
困ったときには
困ったときにはhellip
bull onozaty まで (follow me)
bull 即レスとまでいきませんが毎日確認してます
bull スクリプト例などもつぶやいています
困ったときにはhellip
bull こういうことできませんかといった質問もお
気軽にどうぞ
bull 一応全部答えている(できるものはBlogでも公開)つ
もりですが拾えてなかったらごめんなさい
おわり
追加位置を調べる
bull パスを確認
bull id属性がtop-menuとなっているdiv要素配下のul要素の
最後に追加してあげればよさそう
追加位置を調べる
bull コンソールで追加対象の要素を取得してみる
bull divtop-menu gt ul (id属性がtop-menuのdiv要素の子
のul要素) で取れた
リンクを追加するコードを書く
bull 対象のul要素の子要素としてリンクを追加する
コードを実行し思った動作になるまで確認
View customizeで設定
bull 画面の描画完了時にコードを実行する必要がある
(描画完了前だと要素が取得できない)ので
jQueryの$(function)関数を利用
$(function() ロード完了時に呼び出される $(top-menu gt ul) append(ltligtlta href=issuesgt全てのチケットltagtltligt) )
View customizeで設定
bull いったんプライベートで設定し動作を確認する
bull 動作OKでプライベートを外して全体に有効へ
コード(CSS)の書き方
JavaScriptの時と同じ
bull DOMインスペクタで変更したい要素を探す
bull CSSセレクタがどうなりそうかも確認しておく
bull 要素のスタイルを変えて試す
CSSをView customizeに設定
bull Path Patternは絞れるならば絞って問題ないが
CSSセレクタ自体で対象箇所が絞ってかけるので
全画面対象でもほとんど問題なし
bull そのままCSSを書くイメージ
CSSセレクタの書き方
CSSセレクタの確認
bull DOMインスペクタを使うことによってCSSセレ
クタはわかる
CSSセレクタの指定
bull bodyからすべてのパスを書く必要はなくid属性
が付与されているものを起点に考えると良い
bull id属性は一意のものになるので
body divwrapper divwrapper2 divwrapper3 divheader h1
divheader h1
bodyからのフルパス
こっちで十分
良く使うCSSセレクタ
他にもいろいろあるので詳しくない場合には
rdquoCSSセレクタrdquoで一度調べておくと良い
セレクタ名 書式 対象
型セレクタ E E要素
idセレクタ Emyid id名がmyidのE要素
classセレクタ Ewarning class名がwarinigのE要素
子孫セレクタ E F E要素の子孫にあたるF要素
子セレクタ E gt F E要素の子にあたるF要素 (子孫セレクタはE要素の配下ならばどこにあっても良いが子セレクタは1階層下のみが対象)
CSSセレクタで気を付けること
bull 必要のない要素と一致させない
bull 一致してしまう場合には条件をもっときつく
bull 単に要素を指定するのではなく要素+属性で指定す
る(idセレクタclassセレクタなど)
bull 子孫セレクタではなく子セレクタを使うなど
うまく動作しないときの 確認ポイント
Path patternがあっているか
bull 画面のソースを表示してView customizeで指定
したコードが埋め込まれているか確認
bull 埋め込まれていない場合Path patternが間違えている
のでPath patternを見直す
JavaScriptでエラーが発生していないか
bull 開発者ツールでエラーメッセージが出力されて
いないか確認
bull エラーメッセージが出力されていればそれをもとに
JavaScriptを修正
CSSが上書きされていないか
bull 複数のCSSが一致する場合その要素に対してど
のようなスタイルが適用されるかは優先度に
よって決まる
bull 該当の要素を詳細に指定している方が優先される
bull 型セレクタよりidセレクタで指定したものの方が優先
bull セレクタのレベルが同じならば後に書かれたものが
優先される
CSSが上書きされていないか
bull 上にあるほどもの優先度が高い
bull 取り消し線のものは優先度が高いものによって上書きさ
れているもの
チケットの入力フォームがらみは面倒
bull チケットの入力フォームはトラッカーまたはス
テータスが変わるとフォームの再読み込みが行
われる(all_attributes配下が差し替わる)
bull これはトラッカーやステータスによって入力可能な
フィールドや選択肢が変わるため
bull これにより入力フォームの各要素に対する変更(内
容変更やイベントの登録)はリセットされてし
まう
チケット入力フォームに対するイベント
bull 入力フォームが差し替わってもハンドリングでき
るようにする必要がある
bull 考え方としては親の要素に対してイベントを登
録しておいてイベントが発生した際に発生元が
該当のものか判断するようなイメージ
bull jQueryのon関数を使うと簡単に書ける
チケット入力フォームに対するイベント
bull ダメな例
これだと入力フォームが差し替わったタイミングで登録先の要素
(issue_status_id)が別物に変わってしまうのでうまく動かない
bull OKな例
documentに対してイベントハンドラを登録し該当の要素(issue_status_id)
が発生元だったら動作するように書くことによってissue_status_idが差し
替わってもハンドリング可能に
$(issue_status_id) on(change function(e) ステータス変更時に実施したい処理 )
$(document) on(change issue_status_id function(e) ステータス変更時に実施したい処理 )
チケット入力フォームに対する変更
bull 入力フォームが差し替わると変更した内容も元
に戻ってしまうので差し替わったタイミングで
処理する必要がある
bull たとえばカスタムフィールドの値に応じて他のカ
スタムフィールドで選択可能な値を絞る場合など
チケット入力フォームに対する変更
bull 差し替え処理を行っている関数をフックして差
し替え処理の後に処理を差し込む
bull replaceIssueFormWith 関数が差し替え処理を行って
いる関数なのでそこを対象に
関数を別名で退避 var _replaceIssueFormWith = replaceIssueFormWith 関数を中身を変更 退避した処理を呼び出すような関数として作り変える replaceIssueFormWith = function(html) 退避しておいた関数を呼び出し _replaceIssueFormWith(html) ここでフォーム差し替え後に やりたい処理を書く
View customize導入に向けて
試す環境を作る
bull プロジェクトで使っているRedmineにいきなり適
用するのは敷居が高いという場合にはまずは仮
想環境などで試してみる
bull Redmineの各バージョンのVagrant boxを公開している
のでそちらを使えばすぐに
vagrant init onozatyredmine-32
vagrant up
スクリプトを書いてみる
bull この資料を参考に書いてみる
bull スクリプトのサンプルは下記リポジトリに貯め
ていっているので参考に
bull httpsgithubcomonozatyredmine-view-customize-scripts
bull これからもだんだん増えていく予定
困ったときには
困ったときにはhellip
bull onozaty まで (follow me)
bull 即レスとまでいきませんが毎日確認してます
bull スクリプト例などもつぶやいています
困ったときにはhellip
bull こういうことできませんかといった質問もお
気軽にどうぞ
bull 一応全部答えている(できるものはBlogでも公開)つ
もりですが拾えてなかったらごめんなさい
おわり
追加位置を調べる
bull コンソールで追加対象の要素を取得してみる
bull divtop-menu gt ul (id属性がtop-menuのdiv要素の子
のul要素) で取れた
リンクを追加するコードを書く
bull 対象のul要素の子要素としてリンクを追加する
コードを実行し思った動作になるまで確認
View customizeで設定
bull 画面の描画完了時にコードを実行する必要がある
(描画完了前だと要素が取得できない)ので
jQueryの$(function)関数を利用
$(function() ロード完了時に呼び出される $(top-menu gt ul) append(ltligtlta href=issuesgt全てのチケットltagtltligt) )
View customizeで設定
bull いったんプライベートで設定し動作を確認する
bull 動作OKでプライベートを外して全体に有効へ
コード(CSS)の書き方
JavaScriptの時と同じ
bull DOMインスペクタで変更したい要素を探す
bull CSSセレクタがどうなりそうかも確認しておく
bull 要素のスタイルを変えて試す
CSSをView customizeに設定
bull Path Patternは絞れるならば絞って問題ないが
CSSセレクタ自体で対象箇所が絞ってかけるので
全画面対象でもほとんど問題なし
bull そのままCSSを書くイメージ
CSSセレクタの書き方
CSSセレクタの確認
bull DOMインスペクタを使うことによってCSSセレ
クタはわかる
CSSセレクタの指定
bull bodyからすべてのパスを書く必要はなくid属性
が付与されているものを起点に考えると良い
bull id属性は一意のものになるので
body divwrapper divwrapper2 divwrapper3 divheader h1
divheader h1
bodyからのフルパス
こっちで十分
良く使うCSSセレクタ
他にもいろいろあるので詳しくない場合には
rdquoCSSセレクタrdquoで一度調べておくと良い
セレクタ名 書式 対象
型セレクタ E E要素
idセレクタ Emyid id名がmyidのE要素
classセレクタ Ewarning class名がwarinigのE要素
子孫セレクタ E F E要素の子孫にあたるF要素
子セレクタ E gt F E要素の子にあたるF要素 (子孫セレクタはE要素の配下ならばどこにあっても良いが子セレクタは1階層下のみが対象)
CSSセレクタで気を付けること
bull 必要のない要素と一致させない
bull 一致してしまう場合には条件をもっときつく
bull 単に要素を指定するのではなく要素+属性で指定す
る(idセレクタclassセレクタなど)
bull 子孫セレクタではなく子セレクタを使うなど
うまく動作しないときの 確認ポイント
Path patternがあっているか
bull 画面のソースを表示してView customizeで指定
したコードが埋め込まれているか確認
bull 埋め込まれていない場合Path patternが間違えている
のでPath patternを見直す
JavaScriptでエラーが発生していないか
bull 開発者ツールでエラーメッセージが出力されて
いないか確認
bull エラーメッセージが出力されていればそれをもとに
JavaScriptを修正
CSSが上書きされていないか
bull 複数のCSSが一致する場合その要素に対してど
のようなスタイルが適用されるかは優先度に
よって決まる
bull 該当の要素を詳細に指定している方が優先される
bull 型セレクタよりidセレクタで指定したものの方が優先
bull セレクタのレベルが同じならば後に書かれたものが
優先される
CSSが上書きされていないか
bull 上にあるほどもの優先度が高い
bull 取り消し線のものは優先度が高いものによって上書きさ
れているもの
チケットの入力フォームがらみは面倒
bull チケットの入力フォームはトラッカーまたはス
テータスが変わるとフォームの再読み込みが行
われる(all_attributes配下が差し替わる)
bull これはトラッカーやステータスによって入力可能な
フィールドや選択肢が変わるため
bull これにより入力フォームの各要素に対する変更(内
容変更やイベントの登録)はリセットされてし
まう
チケット入力フォームに対するイベント
bull 入力フォームが差し替わってもハンドリングでき
るようにする必要がある
bull 考え方としては親の要素に対してイベントを登
録しておいてイベントが発生した際に発生元が
該当のものか判断するようなイメージ
bull jQueryのon関数を使うと簡単に書ける
チケット入力フォームに対するイベント
bull ダメな例
これだと入力フォームが差し替わったタイミングで登録先の要素
(issue_status_id)が別物に変わってしまうのでうまく動かない
bull OKな例
documentに対してイベントハンドラを登録し該当の要素(issue_status_id)
が発生元だったら動作するように書くことによってissue_status_idが差し
替わってもハンドリング可能に
$(issue_status_id) on(change function(e) ステータス変更時に実施したい処理 )
$(document) on(change issue_status_id function(e) ステータス変更時に実施したい処理 )
チケット入力フォームに対する変更
bull 入力フォームが差し替わると変更した内容も元
に戻ってしまうので差し替わったタイミングで
処理する必要がある
bull たとえばカスタムフィールドの値に応じて他のカ
スタムフィールドで選択可能な値を絞る場合など
チケット入力フォームに対する変更
bull 差し替え処理を行っている関数をフックして差
し替え処理の後に処理を差し込む
bull replaceIssueFormWith 関数が差し替え処理を行って
いる関数なのでそこを対象に
関数を別名で退避 var _replaceIssueFormWith = replaceIssueFormWith 関数を中身を変更 退避した処理を呼び出すような関数として作り変える replaceIssueFormWith = function(html) 退避しておいた関数を呼び出し _replaceIssueFormWith(html) ここでフォーム差し替え後に やりたい処理を書く
View customize導入に向けて
試す環境を作る
bull プロジェクトで使っているRedmineにいきなり適
用するのは敷居が高いという場合にはまずは仮
想環境などで試してみる
bull Redmineの各バージョンのVagrant boxを公開している
のでそちらを使えばすぐに
vagrant init onozatyredmine-32
vagrant up
スクリプトを書いてみる
bull この資料を参考に書いてみる
bull スクリプトのサンプルは下記リポジトリに貯め
ていっているので参考に
bull httpsgithubcomonozatyredmine-view-customize-scripts
bull これからもだんだん増えていく予定
困ったときには
困ったときにはhellip
bull onozaty まで (follow me)
bull 即レスとまでいきませんが毎日確認してます
bull スクリプト例などもつぶやいています
困ったときにはhellip
bull こういうことできませんかといった質問もお
気軽にどうぞ
bull 一応全部答えている(できるものはBlogでも公開)つ
もりですが拾えてなかったらごめんなさい
おわり
リンクを追加するコードを書く
bull 対象のul要素の子要素としてリンクを追加する
コードを実行し思った動作になるまで確認
View customizeで設定
bull 画面の描画完了時にコードを実行する必要がある
(描画完了前だと要素が取得できない)ので
jQueryの$(function)関数を利用
$(function() ロード完了時に呼び出される $(top-menu gt ul) append(ltligtlta href=issuesgt全てのチケットltagtltligt) )
View customizeで設定
bull いったんプライベートで設定し動作を確認する
bull 動作OKでプライベートを外して全体に有効へ
コード(CSS)の書き方
JavaScriptの時と同じ
bull DOMインスペクタで変更したい要素を探す
bull CSSセレクタがどうなりそうかも確認しておく
bull 要素のスタイルを変えて試す
CSSをView customizeに設定
bull Path Patternは絞れるならば絞って問題ないが
CSSセレクタ自体で対象箇所が絞ってかけるので
全画面対象でもほとんど問題なし
bull そのままCSSを書くイメージ
CSSセレクタの書き方
CSSセレクタの確認
bull DOMインスペクタを使うことによってCSSセレ
クタはわかる
CSSセレクタの指定
bull bodyからすべてのパスを書く必要はなくid属性
が付与されているものを起点に考えると良い
bull id属性は一意のものになるので
body divwrapper divwrapper2 divwrapper3 divheader h1
divheader h1
bodyからのフルパス
こっちで十分
良く使うCSSセレクタ
他にもいろいろあるので詳しくない場合には
rdquoCSSセレクタrdquoで一度調べておくと良い
セレクタ名 書式 対象
型セレクタ E E要素
idセレクタ Emyid id名がmyidのE要素
classセレクタ Ewarning class名がwarinigのE要素
子孫セレクタ E F E要素の子孫にあたるF要素
子セレクタ E gt F E要素の子にあたるF要素 (子孫セレクタはE要素の配下ならばどこにあっても良いが子セレクタは1階層下のみが対象)
CSSセレクタで気を付けること
bull 必要のない要素と一致させない
bull 一致してしまう場合には条件をもっときつく
bull 単に要素を指定するのではなく要素+属性で指定す
る(idセレクタclassセレクタなど)
bull 子孫セレクタではなく子セレクタを使うなど
うまく動作しないときの 確認ポイント
Path patternがあっているか
bull 画面のソースを表示してView customizeで指定
したコードが埋め込まれているか確認
bull 埋め込まれていない場合Path patternが間違えている
のでPath patternを見直す
JavaScriptでエラーが発生していないか
bull 開発者ツールでエラーメッセージが出力されて
いないか確認
bull エラーメッセージが出力されていればそれをもとに
JavaScriptを修正
CSSが上書きされていないか
bull 複数のCSSが一致する場合その要素に対してど
のようなスタイルが適用されるかは優先度に
よって決まる
bull 該当の要素を詳細に指定している方が優先される
bull 型セレクタよりidセレクタで指定したものの方が優先
bull セレクタのレベルが同じならば後に書かれたものが
優先される
CSSが上書きされていないか
bull 上にあるほどもの優先度が高い
bull 取り消し線のものは優先度が高いものによって上書きさ
れているもの
チケットの入力フォームがらみは面倒
bull チケットの入力フォームはトラッカーまたはス
テータスが変わるとフォームの再読み込みが行
われる(all_attributes配下が差し替わる)
bull これはトラッカーやステータスによって入力可能な
フィールドや選択肢が変わるため
bull これにより入力フォームの各要素に対する変更(内
容変更やイベントの登録)はリセットされてし
まう
チケット入力フォームに対するイベント
bull 入力フォームが差し替わってもハンドリングでき
るようにする必要がある
bull 考え方としては親の要素に対してイベントを登
録しておいてイベントが発生した際に発生元が
該当のものか判断するようなイメージ
bull jQueryのon関数を使うと簡単に書ける
チケット入力フォームに対するイベント
bull ダメな例
これだと入力フォームが差し替わったタイミングで登録先の要素
(issue_status_id)が別物に変わってしまうのでうまく動かない
bull OKな例
documentに対してイベントハンドラを登録し該当の要素(issue_status_id)
が発生元だったら動作するように書くことによってissue_status_idが差し
替わってもハンドリング可能に
$(issue_status_id) on(change function(e) ステータス変更時に実施したい処理 )
$(document) on(change issue_status_id function(e) ステータス変更時に実施したい処理 )
チケット入力フォームに対する変更
bull 入力フォームが差し替わると変更した内容も元
に戻ってしまうので差し替わったタイミングで
処理する必要がある
bull たとえばカスタムフィールドの値に応じて他のカ
スタムフィールドで選択可能な値を絞る場合など
チケット入力フォームに対する変更
bull 差し替え処理を行っている関数をフックして差
し替え処理の後に処理を差し込む
bull replaceIssueFormWith 関数が差し替え処理を行って
いる関数なのでそこを対象に
関数を別名で退避 var _replaceIssueFormWith = replaceIssueFormWith 関数を中身を変更 退避した処理を呼び出すような関数として作り変える replaceIssueFormWith = function(html) 退避しておいた関数を呼び出し _replaceIssueFormWith(html) ここでフォーム差し替え後に やりたい処理を書く
View customize導入に向けて
試す環境を作る
bull プロジェクトで使っているRedmineにいきなり適
用するのは敷居が高いという場合にはまずは仮
想環境などで試してみる
bull Redmineの各バージョンのVagrant boxを公開している
のでそちらを使えばすぐに
vagrant init onozatyredmine-32
vagrant up
スクリプトを書いてみる
bull この資料を参考に書いてみる
bull スクリプトのサンプルは下記リポジトリに貯め
ていっているので参考に
bull httpsgithubcomonozatyredmine-view-customize-scripts
bull これからもだんだん増えていく予定
困ったときには
困ったときにはhellip
bull onozaty まで (follow me)
bull 即レスとまでいきませんが毎日確認してます
bull スクリプト例などもつぶやいています
困ったときにはhellip
bull こういうことできませんかといった質問もお
気軽にどうぞ
bull 一応全部答えている(できるものはBlogでも公開)つ
もりですが拾えてなかったらごめんなさい
おわり
View customizeで設定
bull 画面の描画完了時にコードを実行する必要がある
(描画完了前だと要素が取得できない)ので
jQueryの$(function)関数を利用
$(function() ロード完了時に呼び出される $(top-menu gt ul) append(ltligtlta href=issuesgt全てのチケットltagtltligt) )
View customizeで設定
bull いったんプライベートで設定し動作を確認する
bull 動作OKでプライベートを外して全体に有効へ
コード(CSS)の書き方
JavaScriptの時と同じ
bull DOMインスペクタで変更したい要素を探す
bull CSSセレクタがどうなりそうかも確認しておく
bull 要素のスタイルを変えて試す
CSSをView customizeに設定
bull Path Patternは絞れるならば絞って問題ないが
CSSセレクタ自体で対象箇所が絞ってかけるので
全画面対象でもほとんど問題なし
bull そのままCSSを書くイメージ
CSSセレクタの書き方
CSSセレクタの確認
bull DOMインスペクタを使うことによってCSSセレ
クタはわかる
CSSセレクタの指定
bull bodyからすべてのパスを書く必要はなくid属性
が付与されているものを起点に考えると良い
bull id属性は一意のものになるので
body divwrapper divwrapper2 divwrapper3 divheader h1
divheader h1
bodyからのフルパス
こっちで十分
良く使うCSSセレクタ
他にもいろいろあるので詳しくない場合には
rdquoCSSセレクタrdquoで一度調べておくと良い
セレクタ名 書式 対象
型セレクタ E E要素
idセレクタ Emyid id名がmyidのE要素
classセレクタ Ewarning class名がwarinigのE要素
子孫セレクタ E F E要素の子孫にあたるF要素
子セレクタ E gt F E要素の子にあたるF要素 (子孫セレクタはE要素の配下ならばどこにあっても良いが子セレクタは1階層下のみが対象)
CSSセレクタで気を付けること
bull 必要のない要素と一致させない
bull 一致してしまう場合には条件をもっときつく
bull 単に要素を指定するのではなく要素+属性で指定す
る(idセレクタclassセレクタなど)
bull 子孫セレクタではなく子セレクタを使うなど
うまく動作しないときの 確認ポイント
Path patternがあっているか
bull 画面のソースを表示してView customizeで指定
したコードが埋め込まれているか確認
bull 埋め込まれていない場合Path patternが間違えている
のでPath patternを見直す
JavaScriptでエラーが発生していないか
bull 開発者ツールでエラーメッセージが出力されて
いないか確認
bull エラーメッセージが出力されていればそれをもとに
JavaScriptを修正
CSSが上書きされていないか
bull 複数のCSSが一致する場合その要素に対してど
のようなスタイルが適用されるかは優先度に
よって決まる
bull 該当の要素を詳細に指定している方が優先される
bull 型セレクタよりidセレクタで指定したものの方が優先
bull セレクタのレベルが同じならば後に書かれたものが
優先される
CSSが上書きされていないか
bull 上にあるほどもの優先度が高い
bull 取り消し線のものは優先度が高いものによって上書きさ
れているもの
チケットの入力フォームがらみは面倒
bull チケットの入力フォームはトラッカーまたはス
テータスが変わるとフォームの再読み込みが行
われる(all_attributes配下が差し替わる)
bull これはトラッカーやステータスによって入力可能な
フィールドや選択肢が変わるため
bull これにより入力フォームの各要素に対する変更(内
容変更やイベントの登録)はリセットされてし
まう
チケット入力フォームに対するイベント
bull 入力フォームが差し替わってもハンドリングでき
るようにする必要がある
bull 考え方としては親の要素に対してイベントを登
録しておいてイベントが発生した際に発生元が
該当のものか判断するようなイメージ
bull jQueryのon関数を使うと簡単に書ける
チケット入力フォームに対するイベント
bull ダメな例
これだと入力フォームが差し替わったタイミングで登録先の要素
(issue_status_id)が別物に変わってしまうのでうまく動かない
bull OKな例
documentに対してイベントハンドラを登録し該当の要素(issue_status_id)
が発生元だったら動作するように書くことによってissue_status_idが差し
替わってもハンドリング可能に
$(issue_status_id) on(change function(e) ステータス変更時に実施したい処理 )
$(document) on(change issue_status_id function(e) ステータス変更時に実施したい処理 )
チケット入力フォームに対する変更
bull 入力フォームが差し替わると変更した内容も元
に戻ってしまうので差し替わったタイミングで
処理する必要がある
bull たとえばカスタムフィールドの値に応じて他のカ
スタムフィールドで選択可能な値を絞る場合など
チケット入力フォームに対する変更
bull 差し替え処理を行っている関数をフックして差
し替え処理の後に処理を差し込む
bull replaceIssueFormWith 関数が差し替え処理を行って
いる関数なのでそこを対象に
関数を別名で退避 var _replaceIssueFormWith = replaceIssueFormWith 関数を中身を変更 退避した処理を呼び出すような関数として作り変える replaceIssueFormWith = function(html) 退避しておいた関数を呼び出し _replaceIssueFormWith(html) ここでフォーム差し替え後に やりたい処理を書く
View customize導入に向けて
試す環境を作る
bull プロジェクトで使っているRedmineにいきなり適
用するのは敷居が高いという場合にはまずは仮
想環境などで試してみる
bull Redmineの各バージョンのVagrant boxを公開している
のでそちらを使えばすぐに
vagrant init onozatyredmine-32
vagrant up
スクリプトを書いてみる
bull この資料を参考に書いてみる
bull スクリプトのサンプルは下記リポジトリに貯め
ていっているので参考に
bull httpsgithubcomonozatyredmine-view-customize-scripts
bull これからもだんだん増えていく予定
困ったときには
困ったときにはhellip
bull onozaty まで (follow me)
bull 即レスとまでいきませんが毎日確認してます
bull スクリプト例などもつぶやいています
困ったときにはhellip
bull こういうことできませんかといった質問もお
気軽にどうぞ
bull 一応全部答えている(できるものはBlogでも公開)つ
もりですが拾えてなかったらごめんなさい
おわり
View customizeで設定
bull いったんプライベートで設定し動作を確認する
bull 動作OKでプライベートを外して全体に有効へ
コード(CSS)の書き方
JavaScriptの時と同じ
bull DOMインスペクタで変更したい要素を探す
bull CSSセレクタがどうなりそうかも確認しておく
bull 要素のスタイルを変えて試す
CSSをView customizeに設定
bull Path Patternは絞れるならば絞って問題ないが
CSSセレクタ自体で対象箇所が絞ってかけるので
全画面対象でもほとんど問題なし
bull そのままCSSを書くイメージ
CSSセレクタの書き方
CSSセレクタの確認
bull DOMインスペクタを使うことによってCSSセレ
クタはわかる
CSSセレクタの指定
bull bodyからすべてのパスを書く必要はなくid属性
が付与されているものを起点に考えると良い
bull id属性は一意のものになるので
body divwrapper divwrapper2 divwrapper3 divheader h1
divheader h1
bodyからのフルパス
こっちで十分
良く使うCSSセレクタ
他にもいろいろあるので詳しくない場合には
rdquoCSSセレクタrdquoで一度調べておくと良い
セレクタ名 書式 対象
型セレクタ E E要素
idセレクタ Emyid id名がmyidのE要素
classセレクタ Ewarning class名がwarinigのE要素
子孫セレクタ E F E要素の子孫にあたるF要素
子セレクタ E gt F E要素の子にあたるF要素 (子孫セレクタはE要素の配下ならばどこにあっても良いが子セレクタは1階層下のみが対象)
CSSセレクタで気を付けること
bull 必要のない要素と一致させない
bull 一致してしまう場合には条件をもっときつく
bull 単に要素を指定するのではなく要素+属性で指定す
る(idセレクタclassセレクタなど)
bull 子孫セレクタではなく子セレクタを使うなど
うまく動作しないときの 確認ポイント
Path patternがあっているか
bull 画面のソースを表示してView customizeで指定
したコードが埋め込まれているか確認
bull 埋め込まれていない場合Path patternが間違えている
のでPath patternを見直す
JavaScriptでエラーが発生していないか
bull 開発者ツールでエラーメッセージが出力されて
いないか確認
bull エラーメッセージが出力されていればそれをもとに
JavaScriptを修正
CSSが上書きされていないか
bull 複数のCSSが一致する場合その要素に対してど
のようなスタイルが適用されるかは優先度に
よって決まる
bull 該当の要素を詳細に指定している方が優先される
bull 型セレクタよりidセレクタで指定したものの方が優先
bull セレクタのレベルが同じならば後に書かれたものが
優先される
CSSが上書きされていないか
bull 上にあるほどもの優先度が高い
bull 取り消し線のものは優先度が高いものによって上書きさ
れているもの
チケットの入力フォームがらみは面倒
bull チケットの入力フォームはトラッカーまたはス
テータスが変わるとフォームの再読み込みが行
われる(all_attributes配下が差し替わる)
bull これはトラッカーやステータスによって入力可能な
フィールドや選択肢が変わるため
bull これにより入力フォームの各要素に対する変更(内
容変更やイベントの登録)はリセットされてし
まう
チケット入力フォームに対するイベント
bull 入力フォームが差し替わってもハンドリングでき
るようにする必要がある
bull 考え方としては親の要素に対してイベントを登
録しておいてイベントが発生した際に発生元が
該当のものか判断するようなイメージ
bull jQueryのon関数を使うと簡単に書ける
チケット入力フォームに対するイベント
bull ダメな例
これだと入力フォームが差し替わったタイミングで登録先の要素
(issue_status_id)が別物に変わってしまうのでうまく動かない
bull OKな例
documentに対してイベントハンドラを登録し該当の要素(issue_status_id)
が発生元だったら動作するように書くことによってissue_status_idが差し
替わってもハンドリング可能に
$(issue_status_id) on(change function(e) ステータス変更時に実施したい処理 )
$(document) on(change issue_status_id function(e) ステータス変更時に実施したい処理 )
チケット入力フォームに対する変更
bull 入力フォームが差し替わると変更した内容も元
に戻ってしまうので差し替わったタイミングで
処理する必要がある
bull たとえばカスタムフィールドの値に応じて他のカ
スタムフィールドで選択可能な値を絞る場合など
チケット入力フォームに対する変更
bull 差し替え処理を行っている関数をフックして差
し替え処理の後に処理を差し込む
bull replaceIssueFormWith 関数が差し替え処理を行って
いる関数なのでそこを対象に
関数を別名で退避 var _replaceIssueFormWith = replaceIssueFormWith 関数を中身を変更 退避した処理を呼び出すような関数として作り変える replaceIssueFormWith = function(html) 退避しておいた関数を呼び出し _replaceIssueFormWith(html) ここでフォーム差し替え後に やりたい処理を書く
View customize導入に向けて
試す環境を作る
bull プロジェクトで使っているRedmineにいきなり適
用するのは敷居が高いという場合にはまずは仮
想環境などで試してみる
bull Redmineの各バージョンのVagrant boxを公開している
のでそちらを使えばすぐに
vagrant init onozatyredmine-32
vagrant up
スクリプトを書いてみる
bull この資料を参考に書いてみる
bull スクリプトのサンプルは下記リポジトリに貯め
ていっているので参考に
bull httpsgithubcomonozatyredmine-view-customize-scripts
bull これからもだんだん増えていく予定
困ったときには
困ったときにはhellip
bull onozaty まで (follow me)
bull 即レスとまでいきませんが毎日確認してます
bull スクリプト例などもつぶやいています
困ったときにはhellip
bull こういうことできませんかといった質問もお
気軽にどうぞ
bull 一応全部答えている(できるものはBlogでも公開)つ
もりですが拾えてなかったらごめんなさい
おわり
コード(CSS)の書き方
JavaScriptの時と同じ
bull DOMインスペクタで変更したい要素を探す
bull CSSセレクタがどうなりそうかも確認しておく
bull 要素のスタイルを変えて試す
CSSをView customizeに設定
bull Path Patternは絞れるならば絞って問題ないが
CSSセレクタ自体で対象箇所が絞ってかけるので
全画面対象でもほとんど問題なし
bull そのままCSSを書くイメージ
CSSセレクタの書き方
CSSセレクタの確認
bull DOMインスペクタを使うことによってCSSセレ
クタはわかる
CSSセレクタの指定
bull bodyからすべてのパスを書く必要はなくid属性
が付与されているものを起点に考えると良い
bull id属性は一意のものになるので
body divwrapper divwrapper2 divwrapper3 divheader h1
divheader h1
bodyからのフルパス
こっちで十分
良く使うCSSセレクタ
他にもいろいろあるので詳しくない場合には
rdquoCSSセレクタrdquoで一度調べておくと良い
セレクタ名 書式 対象
型セレクタ E E要素
idセレクタ Emyid id名がmyidのE要素
classセレクタ Ewarning class名がwarinigのE要素
子孫セレクタ E F E要素の子孫にあたるF要素
子セレクタ E gt F E要素の子にあたるF要素 (子孫セレクタはE要素の配下ならばどこにあっても良いが子セレクタは1階層下のみが対象)
CSSセレクタで気を付けること
bull 必要のない要素と一致させない
bull 一致してしまう場合には条件をもっときつく
bull 単に要素を指定するのではなく要素+属性で指定す
る(idセレクタclassセレクタなど)
bull 子孫セレクタではなく子セレクタを使うなど
うまく動作しないときの 確認ポイント
Path patternがあっているか
bull 画面のソースを表示してView customizeで指定
したコードが埋め込まれているか確認
bull 埋め込まれていない場合Path patternが間違えている
のでPath patternを見直す
JavaScriptでエラーが発生していないか
bull 開発者ツールでエラーメッセージが出力されて
いないか確認
bull エラーメッセージが出力されていればそれをもとに
JavaScriptを修正
CSSが上書きされていないか
bull 複数のCSSが一致する場合その要素に対してど
のようなスタイルが適用されるかは優先度に
よって決まる
bull 該当の要素を詳細に指定している方が優先される
bull 型セレクタよりidセレクタで指定したものの方が優先
bull セレクタのレベルが同じならば後に書かれたものが
優先される
CSSが上書きされていないか
bull 上にあるほどもの優先度が高い
bull 取り消し線のものは優先度が高いものによって上書きさ
れているもの
チケットの入力フォームがらみは面倒
bull チケットの入力フォームはトラッカーまたはス
テータスが変わるとフォームの再読み込みが行
われる(all_attributes配下が差し替わる)
bull これはトラッカーやステータスによって入力可能な
フィールドや選択肢が変わるため
bull これにより入力フォームの各要素に対する変更(内
容変更やイベントの登録)はリセットされてし
まう
チケット入力フォームに対するイベント
bull 入力フォームが差し替わってもハンドリングでき
るようにする必要がある
bull 考え方としては親の要素に対してイベントを登
録しておいてイベントが発生した際に発生元が
該当のものか判断するようなイメージ
bull jQueryのon関数を使うと簡単に書ける
チケット入力フォームに対するイベント
bull ダメな例
これだと入力フォームが差し替わったタイミングで登録先の要素
(issue_status_id)が別物に変わってしまうのでうまく動かない
bull OKな例
documentに対してイベントハンドラを登録し該当の要素(issue_status_id)
が発生元だったら動作するように書くことによってissue_status_idが差し
替わってもハンドリング可能に
$(issue_status_id) on(change function(e) ステータス変更時に実施したい処理 )
$(document) on(change issue_status_id function(e) ステータス変更時に実施したい処理 )
チケット入力フォームに対する変更
bull 入力フォームが差し替わると変更した内容も元
に戻ってしまうので差し替わったタイミングで
処理する必要がある
bull たとえばカスタムフィールドの値に応じて他のカ
スタムフィールドで選択可能な値を絞る場合など
チケット入力フォームに対する変更
bull 差し替え処理を行っている関数をフックして差
し替え処理の後に処理を差し込む
bull replaceIssueFormWith 関数が差し替え処理を行って
いる関数なのでそこを対象に
関数を別名で退避 var _replaceIssueFormWith = replaceIssueFormWith 関数を中身を変更 退避した処理を呼び出すような関数として作り変える replaceIssueFormWith = function(html) 退避しておいた関数を呼び出し _replaceIssueFormWith(html) ここでフォーム差し替え後に やりたい処理を書く
View customize導入に向けて
試す環境を作る
bull プロジェクトで使っているRedmineにいきなり適
用するのは敷居が高いという場合にはまずは仮
想環境などで試してみる
bull Redmineの各バージョンのVagrant boxを公開している
のでそちらを使えばすぐに
vagrant init onozatyredmine-32
vagrant up
スクリプトを書いてみる
bull この資料を参考に書いてみる
bull スクリプトのサンプルは下記リポジトリに貯め
ていっているので参考に
bull httpsgithubcomonozatyredmine-view-customize-scripts
bull これからもだんだん増えていく予定
困ったときには
困ったときにはhellip
bull onozaty まで (follow me)
bull 即レスとまでいきませんが毎日確認してます
bull スクリプト例などもつぶやいています
困ったときにはhellip
bull こういうことできませんかといった質問もお
気軽にどうぞ
bull 一応全部答えている(できるものはBlogでも公開)つ
もりですが拾えてなかったらごめんなさい
おわり
JavaScriptの時と同じ
bull DOMインスペクタで変更したい要素を探す
bull CSSセレクタがどうなりそうかも確認しておく
bull 要素のスタイルを変えて試す
CSSをView customizeに設定
bull Path Patternは絞れるならば絞って問題ないが
CSSセレクタ自体で対象箇所が絞ってかけるので
全画面対象でもほとんど問題なし
bull そのままCSSを書くイメージ
CSSセレクタの書き方
CSSセレクタの確認
bull DOMインスペクタを使うことによってCSSセレ
クタはわかる
CSSセレクタの指定
bull bodyからすべてのパスを書く必要はなくid属性
が付与されているものを起点に考えると良い
bull id属性は一意のものになるので
body divwrapper divwrapper2 divwrapper3 divheader h1
divheader h1
bodyからのフルパス
こっちで十分
良く使うCSSセレクタ
他にもいろいろあるので詳しくない場合には
rdquoCSSセレクタrdquoで一度調べておくと良い
セレクタ名 書式 対象
型セレクタ E E要素
idセレクタ Emyid id名がmyidのE要素
classセレクタ Ewarning class名がwarinigのE要素
子孫セレクタ E F E要素の子孫にあたるF要素
子セレクタ E gt F E要素の子にあたるF要素 (子孫セレクタはE要素の配下ならばどこにあっても良いが子セレクタは1階層下のみが対象)
CSSセレクタで気を付けること
bull 必要のない要素と一致させない
bull 一致してしまう場合には条件をもっときつく
bull 単に要素を指定するのではなく要素+属性で指定す
る(idセレクタclassセレクタなど)
bull 子孫セレクタではなく子セレクタを使うなど
うまく動作しないときの 確認ポイント
Path patternがあっているか
bull 画面のソースを表示してView customizeで指定
したコードが埋め込まれているか確認
bull 埋め込まれていない場合Path patternが間違えている
のでPath patternを見直す
JavaScriptでエラーが発生していないか
bull 開発者ツールでエラーメッセージが出力されて
いないか確認
bull エラーメッセージが出力されていればそれをもとに
JavaScriptを修正
CSSが上書きされていないか
bull 複数のCSSが一致する場合その要素に対してど
のようなスタイルが適用されるかは優先度に
よって決まる
bull 該当の要素を詳細に指定している方が優先される
bull 型セレクタよりidセレクタで指定したものの方が優先
bull セレクタのレベルが同じならば後に書かれたものが
優先される
CSSが上書きされていないか
bull 上にあるほどもの優先度が高い
bull 取り消し線のものは優先度が高いものによって上書きさ
れているもの
チケットの入力フォームがらみは面倒
bull チケットの入力フォームはトラッカーまたはス
テータスが変わるとフォームの再読み込みが行
われる(all_attributes配下が差し替わる)
bull これはトラッカーやステータスによって入力可能な
フィールドや選択肢が変わるため
bull これにより入力フォームの各要素に対する変更(内
容変更やイベントの登録)はリセットされてし
まう
チケット入力フォームに対するイベント
bull 入力フォームが差し替わってもハンドリングでき
るようにする必要がある
bull 考え方としては親の要素に対してイベントを登
録しておいてイベントが発生した際に発生元が
該当のものか判断するようなイメージ
bull jQueryのon関数を使うと簡単に書ける
チケット入力フォームに対するイベント
bull ダメな例
これだと入力フォームが差し替わったタイミングで登録先の要素
(issue_status_id)が別物に変わってしまうのでうまく動かない
bull OKな例
documentに対してイベントハンドラを登録し該当の要素(issue_status_id)
が発生元だったら動作するように書くことによってissue_status_idが差し
替わってもハンドリング可能に
$(issue_status_id) on(change function(e) ステータス変更時に実施したい処理 )
$(document) on(change issue_status_id function(e) ステータス変更時に実施したい処理 )
チケット入力フォームに対する変更
bull 入力フォームが差し替わると変更した内容も元
に戻ってしまうので差し替わったタイミングで
処理する必要がある
bull たとえばカスタムフィールドの値に応じて他のカ
スタムフィールドで選択可能な値を絞る場合など
チケット入力フォームに対する変更
bull 差し替え処理を行っている関数をフックして差
し替え処理の後に処理を差し込む
bull replaceIssueFormWith 関数が差し替え処理を行って
いる関数なのでそこを対象に
関数を別名で退避 var _replaceIssueFormWith = replaceIssueFormWith 関数を中身を変更 退避した処理を呼び出すような関数として作り変える replaceIssueFormWith = function(html) 退避しておいた関数を呼び出し _replaceIssueFormWith(html) ここでフォーム差し替え後に やりたい処理を書く
View customize導入に向けて
試す環境を作る
bull プロジェクトで使っているRedmineにいきなり適
用するのは敷居が高いという場合にはまずは仮
想環境などで試してみる
bull Redmineの各バージョンのVagrant boxを公開している
のでそちらを使えばすぐに
vagrant init onozatyredmine-32
vagrant up
スクリプトを書いてみる
bull この資料を参考に書いてみる
bull スクリプトのサンプルは下記リポジトリに貯め
ていっているので参考に
bull httpsgithubcomonozatyredmine-view-customize-scripts
bull これからもだんだん増えていく予定
困ったときには
困ったときにはhellip
bull onozaty まで (follow me)
bull 即レスとまでいきませんが毎日確認してます
bull スクリプト例などもつぶやいています
困ったときにはhellip
bull こういうことできませんかといった質問もお
気軽にどうぞ
bull 一応全部答えている(できるものはBlogでも公開)つ
もりですが拾えてなかったらごめんなさい
おわり
CSSをView customizeに設定
bull Path Patternは絞れるならば絞って問題ないが
CSSセレクタ自体で対象箇所が絞ってかけるので
全画面対象でもほとんど問題なし
bull そのままCSSを書くイメージ
CSSセレクタの書き方
CSSセレクタの確認
bull DOMインスペクタを使うことによってCSSセレ
クタはわかる
CSSセレクタの指定
bull bodyからすべてのパスを書く必要はなくid属性
が付与されているものを起点に考えると良い
bull id属性は一意のものになるので
body divwrapper divwrapper2 divwrapper3 divheader h1
divheader h1
bodyからのフルパス
こっちで十分
良く使うCSSセレクタ
他にもいろいろあるので詳しくない場合には
rdquoCSSセレクタrdquoで一度調べておくと良い
セレクタ名 書式 対象
型セレクタ E E要素
idセレクタ Emyid id名がmyidのE要素
classセレクタ Ewarning class名がwarinigのE要素
子孫セレクタ E F E要素の子孫にあたるF要素
子セレクタ E gt F E要素の子にあたるF要素 (子孫セレクタはE要素の配下ならばどこにあっても良いが子セレクタは1階層下のみが対象)
CSSセレクタで気を付けること
bull 必要のない要素と一致させない
bull 一致してしまう場合には条件をもっときつく
bull 単に要素を指定するのではなく要素+属性で指定す
る(idセレクタclassセレクタなど)
bull 子孫セレクタではなく子セレクタを使うなど
うまく動作しないときの 確認ポイント
Path patternがあっているか
bull 画面のソースを表示してView customizeで指定
したコードが埋め込まれているか確認
bull 埋め込まれていない場合Path patternが間違えている
のでPath patternを見直す
JavaScriptでエラーが発生していないか
bull 開発者ツールでエラーメッセージが出力されて
いないか確認
bull エラーメッセージが出力されていればそれをもとに
JavaScriptを修正
CSSが上書きされていないか
bull 複数のCSSが一致する場合その要素に対してど
のようなスタイルが適用されるかは優先度に
よって決まる
bull 該当の要素を詳細に指定している方が優先される
bull 型セレクタよりidセレクタで指定したものの方が優先
bull セレクタのレベルが同じならば後に書かれたものが
優先される
CSSが上書きされていないか
bull 上にあるほどもの優先度が高い
bull 取り消し線のものは優先度が高いものによって上書きさ
れているもの
チケットの入力フォームがらみは面倒
bull チケットの入力フォームはトラッカーまたはス
テータスが変わるとフォームの再読み込みが行
われる(all_attributes配下が差し替わる)
bull これはトラッカーやステータスによって入力可能な
フィールドや選択肢が変わるため
bull これにより入力フォームの各要素に対する変更(内
容変更やイベントの登録)はリセットされてし
まう
チケット入力フォームに対するイベント
bull 入力フォームが差し替わってもハンドリングでき
るようにする必要がある
bull 考え方としては親の要素に対してイベントを登
録しておいてイベントが発生した際に発生元が
該当のものか判断するようなイメージ
bull jQueryのon関数を使うと簡単に書ける
チケット入力フォームに対するイベント
bull ダメな例
これだと入力フォームが差し替わったタイミングで登録先の要素
(issue_status_id)が別物に変わってしまうのでうまく動かない
bull OKな例
documentに対してイベントハンドラを登録し該当の要素(issue_status_id)
が発生元だったら動作するように書くことによってissue_status_idが差し
替わってもハンドリング可能に
$(issue_status_id) on(change function(e) ステータス変更時に実施したい処理 )
$(document) on(change issue_status_id function(e) ステータス変更時に実施したい処理 )
チケット入力フォームに対する変更
bull 入力フォームが差し替わると変更した内容も元
に戻ってしまうので差し替わったタイミングで
処理する必要がある
bull たとえばカスタムフィールドの値に応じて他のカ
スタムフィールドで選択可能な値を絞る場合など
チケット入力フォームに対する変更
bull 差し替え処理を行っている関数をフックして差
し替え処理の後に処理を差し込む
bull replaceIssueFormWith 関数が差し替え処理を行って
いる関数なのでそこを対象に
関数を別名で退避 var _replaceIssueFormWith = replaceIssueFormWith 関数を中身を変更 退避した処理を呼び出すような関数として作り変える replaceIssueFormWith = function(html) 退避しておいた関数を呼び出し _replaceIssueFormWith(html) ここでフォーム差し替え後に やりたい処理を書く
View customize導入に向けて
試す環境を作る
bull プロジェクトで使っているRedmineにいきなり適
用するのは敷居が高いという場合にはまずは仮
想環境などで試してみる
bull Redmineの各バージョンのVagrant boxを公開している
のでそちらを使えばすぐに
vagrant init onozatyredmine-32
vagrant up
スクリプトを書いてみる
bull この資料を参考に書いてみる
bull スクリプトのサンプルは下記リポジトリに貯め
ていっているので参考に
bull httpsgithubcomonozatyredmine-view-customize-scripts
bull これからもだんだん増えていく予定
困ったときには
困ったときにはhellip
bull onozaty まで (follow me)
bull 即レスとまでいきませんが毎日確認してます
bull スクリプト例などもつぶやいています
困ったときにはhellip
bull こういうことできませんかといった質問もお
気軽にどうぞ
bull 一応全部答えている(できるものはBlogでも公開)つ
もりですが拾えてなかったらごめんなさい
おわり
CSSセレクタの書き方
CSSセレクタの確認
bull DOMインスペクタを使うことによってCSSセレ
クタはわかる
CSSセレクタの指定
bull bodyからすべてのパスを書く必要はなくid属性
が付与されているものを起点に考えると良い
bull id属性は一意のものになるので
body divwrapper divwrapper2 divwrapper3 divheader h1
divheader h1
bodyからのフルパス
こっちで十分
良く使うCSSセレクタ
他にもいろいろあるので詳しくない場合には
rdquoCSSセレクタrdquoで一度調べておくと良い
セレクタ名 書式 対象
型セレクタ E E要素
idセレクタ Emyid id名がmyidのE要素
classセレクタ Ewarning class名がwarinigのE要素
子孫セレクタ E F E要素の子孫にあたるF要素
子セレクタ E gt F E要素の子にあたるF要素 (子孫セレクタはE要素の配下ならばどこにあっても良いが子セレクタは1階層下のみが対象)
CSSセレクタで気を付けること
bull 必要のない要素と一致させない
bull 一致してしまう場合には条件をもっときつく
bull 単に要素を指定するのではなく要素+属性で指定す
る(idセレクタclassセレクタなど)
bull 子孫セレクタではなく子セレクタを使うなど
うまく動作しないときの 確認ポイント
Path patternがあっているか
bull 画面のソースを表示してView customizeで指定
したコードが埋め込まれているか確認
bull 埋め込まれていない場合Path patternが間違えている
のでPath patternを見直す
JavaScriptでエラーが発生していないか
bull 開発者ツールでエラーメッセージが出力されて
いないか確認
bull エラーメッセージが出力されていればそれをもとに
JavaScriptを修正
CSSが上書きされていないか
bull 複数のCSSが一致する場合その要素に対してど
のようなスタイルが適用されるかは優先度に
よって決まる
bull 該当の要素を詳細に指定している方が優先される
bull 型セレクタよりidセレクタで指定したものの方が優先
bull セレクタのレベルが同じならば後に書かれたものが
優先される
CSSが上書きされていないか
bull 上にあるほどもの優先度が高い
bull 取り消し線のものは優先度が高いものによって上書きさ
れているもの
チケットの入力フォームがらみは面倒
bull チケットの入力フォームはトラッカーまたはス
テータスが変わるとフォームの再読み込みが行
われる(all_attributes配下が差し替わる)
bull これはトラッカーやステータスによって入力可能な
フィールドや選択肢が変わるため
bull これにより入力フォームの各要素に対する変更(内
容変更やイベントの登録)はリセットされてし
まう
チケット入力フォームに対するイベント
bull 入力フォームが差し替わってもハンドリングでき
るようにする必要がある
bull 考え方としては親の要素に対してイベントを登
録しておいてイベントが発生した際に発生元が
該当のものか判断するようなイメージ
bull jQueryのon関数を使うと簡単に書ける
チケット入力フォームに対するイベント
bull ダメな例
これだと入力フォームが差し替わったタイミングで登録先の要素
(issue_status_id)が別物に変わってしまうのでうまく動かない
bull OKな例
documentに対してイベントハンドラを登録し該当の要素(issue_status_id)
が発生元だったら動作するように書くことによってissue_status_idが差し
替わってもハンドリング可能に
$(issue_status_id) on(change function(e) ステータス変更時に実施したい処理 )
$(document) on(change issue_status_id function(e) ステータス変更時に実施したい処理 )
チケット入力フォームに対する変更
bull 入力フォームが差し替わると変更した内容も元
に戻ってしまうので差し替わったタイミングで
処理する必要がある
bull たとえばカスタムフィールドの値に応じて他のカ
スタムフィールドで選択可能な値を絞る場合など
チケット入力フォームに対する変更
bull 差し替え処理を行っている関数をフックして差
し替え処理の後に処理を差し込む
bull replaceIssueFormWith 関数が差し替え処理を行って
いる関数なのでそこを対象に
関数を別名で退避 var _replaceIssueFormWith = replaceIssueFormWith 関数を中身を変更 退避した処理を呼び出すような関数として作り変える replaceIssueFormWith = function(html) 退避しておいた関数を呼び出し _replaceIssueFormWith(html) ここでフォーム差し替え後に やりたい処理を書く
View customize導入に向けて
試す環境を作る
bull プロジェクトで使っているRedmineにいきなり適
用するのは敷居が高いという場合にはまずは仮
想環境などで試してみる
bull Redmineの各バージョンのVagrant boxを公開している
のでそちらを使えばすぐに
vagrant init onozatyredmine-32
vagrant up
スクリプトを書いてみる
bull この資料を参考に書いてみる
bull スクリプトのサンプルは下記リポジトリに貯め
ていっているので参考に
bull httpsgithubcomonozatyredmine-view-customize-scripts
bull これからもだんだん増えていく予定
困ったときには
困ったときにはhellip
bull onozaty まで (follow me)
bull 即レスとまでいきませんが毎日確認してます
bull スクリプト例などもつぶやいています
困ったときにはhellip
bull こういうことできませんかといった質問もお
気軽にどうぞ
bull 一応全部答えている(できるものはBlogでも公開)つ
もりですが拾えてなかったらごめんなさい
おわり
CSSセレクタの確認
bull DOMインスペクタを使うことによってCSSセレ
クタはわかる
CSSセレクタの指定
bull bodyからすべてのパスを書く必要はなくid属性
が付与されているものを起点に考えると良い
bull id属性は一意のものになるので
body divwrapper divwrapper2 divwrapper3 divheader h1
divheader h1
bodyからのフルパス
こっちで十分
良く使うCSSセレクタ
他にもいろいろあるので詳しくない場合には
rdquoCSSセレクタrdquoで一度調べておくと良い
セレクタ名 書式 対象
型セレクタ E E要素
idセレクタ Emyid id名がmyidのE要素
classセレクタ Ewarning class名がwarinigのE要素
子孫セレクタ E F E要素の子孫にあたるF要素
子セレクタ E gt F E要素の子にあたるF要素 (子孫セレクタはE要素の配下ならばどこにあっても良いが子セレクタは1階層下のみが対象)
CSSセレクタで気を付けること
bull 必要のない要素と一致させない
bull 一致してしまう場合には条件をもっときつく
bull 単に要素を指定するのではなく要素+属性で指定す
る(idセレクタclassセレクタなど)
bull 子孫セレクタではなく子セレクタを使うなど
うまく動作しないときの 確認ポイント
Path patternがあっているか
bull 画面のソースを表示してView customizeで指定
したコードが埋め込まれているか確認
bull 埋め込まれていない場合Path patternが間違えている
のでPath patternを見直す
JavaScriptでエラーが発生していないか
bull 開発者ツールでエラーメッセージが出力されて
いないか確認
bull エラーメッセージが出力されていればそれをもとに
JavaScriptを修正
CSSが上書きされていないか
bull 複数のCSSが一致する場合その要素に対してど
のようなスタイルが適用されるかは優先度に
よって決まる
bull 該当の要素を詳細に指定している方が優先される
bull 型セレクタよりidセレクタで指定したものの方が優先
bull セレクタのレベルが同じならば後に書かれたものが
優先される
CSSが上書きされていないか
bull 上にあるほどもの優先度が高い
bull 取り消し線のものは優先度が高いものによって上書きさ
れているもの
チケットの入力フォームがらみは面倒
bull チケットの入力フォームはトラッカーまたはス
テータスが変わるとフォームの再読み込みが行
われる(all_attributes配下が差し替わる)
bull これはトラッカーやステータスによって入力可能な
フィールドや選択肢が変わるため
bull これにより入力フォームの各要素に対する変更(内
容変更やイベントの登録)はリセットされてし
まう
チケット入力フォームに対するイベント
bull 入力フォームが差し替わってもハンドリングでき
るようにする必要がある
bull 考え方としては親の要素に対してイベントを登
録しておいてイベントが発生した際に発生元が
該当のものか判断するようなイメージ
bull jQueryのon関数を使うと簡単に書ける
チケット入力フォームに対するイベント
bull ダメな例
これだと入力フォームが差し替わったタイミングで登録先の要素
(issue_status_id)が別物に変わってしまうのでうまく動かない
bull OKな例
documentに対してイベントハンドラを登録し該当の要素(issue_status_id)
が発生元だったら動作するように書くことによってissue_status_idが差し
替わってもハンドリング可能に
$(issue_status_id) on(change function(e) ステータス変更時に実施したい処理 )
$(document) on(change issue_status_id function(e) ステータス変更時に実施したい処理 )
チケット入力フォームに対する変更
bull 入力フォームが差し替わると変更した内容も元
に戻ってしまうので差し替わったタイミングで
処理する必要がある
bull たとえばカスタムフィールドの値に応じて他のカ
スタムフィールドで選択可能な値を絞る場合など
チケット入力フォームに対する変更
bull 差し替え処理を行っている関数をフックして差
し替え処理の後に処理を差し込む
bull replaceIssueFormWith 関数が差し替え処理を行って
いる関数なのでそこを対象に
関数を別名で退避 var _replaceIssueFormWith = replaceIssueFormWith 関数を中身を変更 退避した処理を呼び出すような関数として作り変える replaceIssueFormWith = function(html) 退避しておいた関数を呼び出し _replaceIssueFormWith(html) ここでフォーム差し替え後に やりたい処理を書く
View customize導入に向けて
試す環境を作る
bull プロジェクトで使っているRedmineにいきなり適
用するのは敷居が高いという場合にはまずは仮
想環境などで試してみる
bull Redmineの各バージョンのVagrant boxを公開している
のでそちらを使えばすぐに
vagrant init onozatyredmine-32
vagrant up
スクリプトを書いてみる
bull この資料を参考に書いてみる
bull スクリプトのサンプルは下記リポジトリに貯め
ていっているので参考に
bull httpsgithubcomonozatyredmine-view-customize-scripts
bull これからもだんだん増えていく予定
困ったときには
困ったときにはhellip
bull onozaty まで (follow me)
bull 即レスとまでいきませんが毎日確認してます
bull スクリプト例などもつぶやいています
困ったときにはhellip
bull こういうことできませんかといった質問もお
気軽にどうぞ
bull 一応全部答えている(できるものはBlogでも公開)つ
もりですが拾えてなかったらごめんなさい
おわり
CSSセレクタの指定
bull bodyからすべてのパスを書く必要はなくid属性
が付与されているものを起点に考えると良い
bull id属性は一意のものになるので
body divwrapper divwrapper2 divwrapper3 divheader h1
divheader h1
bodyからのフルパス
こっちで十分
良く使うCSSセレクタ
他にもいろいろあるので詳しくない場合には
rdquoCSSセレクタrdquoで一度調べておくと良い
セレクタ名 書式 対象
型セレクタ E E要素
idセレクタ Emyid id名がmyidのE要素
classセレクタ Ewarning class名がwarinigのE要素
子孫セレクタ E F E要素の子孫にあたるF要素
子セレクタ E gt F E要素の子にあたるF要素 (子孫セレクタはE要素の配下ならばどこにあっても良いが子セレクタは1階層下のみが対象)
CSSセレクタで気を付けること
bull 必要のない要素と一致させない
bull 一致してしまう場合には条件をもっときつく
bull 単に要素を指定するのではなく要素+属性で指定す
る(idセレクタclassセレクタなど)
bull 子孫セレクタではなく子セレクタを使うなど
うまく動作しないときの 確認ポイント
Path patternがあっているか
bull 画面のソースを表示してView customizeで指定
したコードが埋め込まれているか確認
bull 埋め込まれていない場合Path patternが間違えている
のでPath patternを見直す
JavaScriptでエラーが発生していないか
bull 開発者ツールでエラーメッセージが出力されて
いないか確認
bull エラーメッセージが出力されていればそれをもとに
JavaScriptを修正
CSSが上書きされていないか
bull 複数のCSSが一致する場合その要素に対してど
のようなスタイルが適用されるかは優先度に
よって決まる
bull 該当の要素を詳細に指定している方が優先される
bull 型セレクタよりidセレクタで指定したものの方が優先
bull セレクタのレベルが同じならば後に書かれたものが
優先される
CSSが上書きされていないか
bull 上にあるほどもの優先度が高い
bull 取り消し線のものは優先度が高いものによって上書きさ
れているもの
チケットの入力フォームがらみは面倒
bull チケットの入力フォームはトラッカーまたはス
テータスが変わるとフォームの再読み込みが行
われる(all_attributes配下が差し替わる)
bull これはトラッカーやステータスによって入力可能な
フィールドや選択肢が変わるため
bull これにより入力フォームの各要素に対する変更(内
容変更やイベントの登録)はリセットされてし
まう
チケット入力フォームに対するイベント
bull 入力フォームが差し替わってもハンドリングでき
るようにする必要がある
bull 考え方としては親の要素に対してイベントを登
録しておいてイベントが発生した際に発生元が
該当のものか判断するようなイメージ
bull jQueryのon関数を使うと簡単に書ける
チケット入力フォームに対するイベント
bull ダメな例
これだと入力フォームが差し替わったタイミングで登録先の要素
(issue_status_id)が別物に変わってしまうのでうまく動かない
bull OKな例
documentに対してイベントハンドラを登録し該当の要素(issue_status_id)
が発生元だったら動作するように書くことによってissue_status_idが差し
替わってもハンドリング可能に
$(issue_status_id) on(change function(e) ステータス変更時に実施したい処理 )
$(document) on(change issue_status_id function(e) ステータス変更時に実施したい処理 )
チケット入力フォームに対する変更
bull 入力フォームが差し替わると変更した内容も元
に戻ってしまうので差し替わったタイミングで
処理する必要がある
bull たとえばカスタムフィールドの値に応じて他のカ
スタムフィールドで選択可能な値を絞る場合など
チケット入力フォームに対する変更
bull 差し替え処理を行っている関数をフックして差
し替え処理の後に処理を差し込む
bull replaceIssueFormWith 関数が差し替え処理を行って
いる関数なのでそこを対象に
関数を別名で退避 var _replaceIssueFormWith = replaceIssueFormWith 関数を中身を変更 退避した処理を呼び出すような関数として作り変える replaceIssueFormWith = function(html) 退避しておいた関数を呼び出し _replaceIssueFormWith(html) ここでフォーム差し替え後に やりたい処理を書く
View customize導入に向けて
試す環境を作る
bull プロジェクトで使っているRedmineにいきなり適
用するのは敷居が高いという場合にはまずは仮
想環境などで試してみる
bull Redmineの各バージョンのVagrant boxを公開している
のでそちらを使えばすぐに
vagrant init onozatyredmine-32
vagrant up
スクリプトを書いてみる
bull この資料を参考に書いてみる
bull スクリプトのサンプルは下記リポジトリに貯め
ていっているので参考に
bull httpsgithubcomonozatyredmine-view-customize-scripts
bull これからもだんだん増えていく予定
困ったときには
困ったときにはhellip
bull onozaty まで (follow me)
bull 即レスとまでいきませんが毎日確認してます
bull スクリプト例などもつぶやいています
困ったときにはhellip
bull こういうことできませんかといった質問もお
気軽にどうぞ
bull 一応全部答えている(できるものはBlogでも公開)つ
もりですが拾えてなかったらごめんなさい
おわり
良く使うCSSセレクタ
他にもいろいろあるので詳しくない場合には
rdquoCSSセレクタrdquoで一度調べておくと良い
セレクタ名 書式 対象
型セレクタ E E要素
idセレクタ Emyid id名がmyidのE要素
classセレクタ Ewarning class名がwarinigのE要素
子孫セレクタ E F E要素の子孫にあたるF要素
子セレクタ E gt F E要素の子にあたるF要素 (子孫セレクタはE要素の配下ならばどこにあっても良いが子セレクタは1階層下のみが対象)
CSSセレクタで気を付けること
bull 必要のない要素と一致させない
bull 一致してしまう場合には条件をもっときつく
bull 単に要素を指定するのではなく要素+属性で指定す
る(idセレクタclassセレクタなど)
bull 子孫セレクタではなく子セレクタを使うなど
うまく動作しないときの 確認ポイント
Path patternがあっているか
bull 画面のソースを表示してView customizeで指定
したコードが埋め込まれているか確認
bull 埋め込まれていない場合Path patternが間違えている
のでPath patternを見直す
JavaScriptでエラーが発生していないか
bull 開発者ツールでエラーメッセージが出力されて
いないか確認
bull エラーメッセージが出力されていればそれをもとに
JavaScriptを修正
CSSが上書きされていないか
bull 複数のCSSが一致する場合その要素に対してど
のようなスタイルが適用されるかは優先度に
よって決まる
bull 該当の要素を詳細に指定している方が優先される
bull 型セレクタよりidセレクタで指定したものの方が優先
bull セレクタのレベルが同じならば後に書かれたものが
優先される
CSSが上書きされていないか
bull 上にあるほどもの優先度が高い
bull 取り消し線のものは優先度が高いものによって上書きさ
れているもの
チケットの入力フォームがらみは面倒
bull チケットの入力フォームはトラッカーまたはス
テータスが変わるとフォームの再読み込みが行
われる(all_attributes配下が差し替わる)
bull これはトラッカーやステータスによって入力可能な
フィールドや選択肢が変わるため
bull これにより入力フォームの各要素に対する変更(内
容変更やイベントの登録)はリセットされてし
まう
チケット入力フォームに対するイベント
bull 入力フォームが差し替わってもハンドリングでき
るようにする必要がある
bull 考え方としては親の要素に対してイベントを登
録しておいてイベントが発生した際に発生元が
該当のものか判断するようなイメージ
bull jQueryのon関数を使うと簡単に書ける
チケット入力フォームに対するイベント
bull ダメな例
これだと入力フォームが差し替わったタイミングで登録先の要素
(issue_status_id)が別物に変わってしまうのでうまく動かない
bull OKな例
documentに対してイベントハンドラを登録し該当の要素(issue_status_id)
が発生元だったら動作するように書くことによってissue_status_idが差し
替わってもハンドリング可能に
$(issue_status_id) on(change function(e) ステータス変更時に実施したい処理 )
$(document) on(change issue_status_id function(e) ステータス変更時に実施したい処理 )
チケット入力フォームに対する変更
bull 入力フォームが差し替わると変更した内容も元
に戻ってしまうので差し替わったタイミングで
処理する必要がある
bull たとえばカスタムフィールドの値に応じて他のカ
スタムフィールドで選択可能な値を絞る場合など
チケット入力フォームに対する変更
bull 差し替え処理を行っている関数をフックして差
し替え処理の後に処理を差し込む
bull replaceIssueFormWith 関数が差し替え処理を行って
いる関数なのでそこを対象に
関数を別名で退避 var _replaceIssueFormWith = replaceIssueFormWith 関数を中身を変更 退避した処理を呼び出すような関数として作り変える replaceIssueFormWith = function(html) 退避しておいた関数を呼び出し _replaceIssueFormWith(html) ここでフォーム差し替え後に やりたい処理を書く
View customize導入に向けて
試す環境を作る
bull プロジェクトで使っているRedmineにいきなり適
用するのは敷居が高いという場合にはまずは仮
想環境などで試してみる
bull Redmineの各バージョンのVagrant boxを公開している
のでそちらを使えばすぐに
vagrant init onozatyredmine-32
vagrant up
スクリプトを書いてみる
bull この資料を参考に書いてみる
bull スクリプトのサンプルは下記リポジトリに貯め
ていっているので参考に
bull httpsgithubcomonozatyredmine-view-customize-scripts
bull これからもだんだん増えていく予定
困ったときには
困ったときにはhellip
bull onozaty まで (follow me)
bull 即レスとまでいきませんが毎日確認してます
bull スクリプト例などもつぶやいています
困ったときにはhellip
bull こういうことできませんかといった質問もお
気軽にどうぞ
bull 一応全部答えている(できるものはBlogでも公開)つ
もりですが拾えてなかったらごめんなさい
おわり
CSSセレクタで気を付けること
bull 必要のない要素と一致させない
bull 一致してしまう場合には条件をもっときつく
bull 単に要素を指定するのではなく要素+属性で指定す
る(idセレクタclassセレクタなど)
bull 子孫セレクタではなく子セレクタを使うなど
うまく動作しないときの 確認ポイント
Path patternがあっているか
bull 画面のソースを表示してView customizeで指定
したコードが埋め込まれているか確認
bull 埋め込まれていない場合Path patternが間違えている
のでPath patternを見直す
JavaScriptでエラーが発生していないか
bull 開発者ツールでエラーメッセージが出力されて
いないか確認
bull エラーメッセージが出力されていればそれをもとに
JavaScriptを修正
CSSが上書きされていないか
bull 複数のCSSが一致する場合その要素に対してど
のようなスタイルが適用されるかは優先度に
よって決まる
bull 該当の要素を詳細に指定している方が優先される
bull 型セレクタよりidセレクタで指定したものの方が優先
bull セレクタのレベルが同じならば後に書かれたものが
優先される
CSSが上書きされていないか
bull 上にあるほどもの優先度が高い
bull 取り消し線のものは優先度が高いものによって上書きさ
れているもの
チケットの入力フォームがらみは面倒
bull チケットの入力フォームはトラッカーまたはス
テータスが変わるとフォームの再読み込みが行
われる(all_attributes配下が差し替わる)
bull これはトラッカーやステータスによって入力可能な
フィールドや選択肢が変わるため
bull これにより入力フォームの各要素に対する変更(内
容変更やイベントの登録)はリセットされてし
まう
チケット入力フォームに対するイベント
bull 入力フォームが差し替わってもハンドリングでき
るようにする必要がある
bull 考え方としては親の要素に対してイベントを登
録しておいてイベントが発生した際に発生元が
該当のものか判断するようなイメージ
bull jQueryのon関数を使うと簡単に書ける
チケット入力フォームに対するイベント
bull ダメな例
これだと入力フォームが差し替わったタイミングで登録先の要素
(issue_status_id)が別物に変わってしまうのでうまく動かない
bull OKな例
documentに対してイベントハンドラを登録し該当の要素(issue_status_id)
が発生元だったら動作するように書くことによってissue_status_idが差し
替わってもハンドリング可能に
$(issue_status_id) on(change function(e) ステータス変更時に実施したい処理 )
$(document) on(change issue_status_id function(e) ステータス変更時に実施したい処理 )
チケット入力フォームに対する変更
bull 入力フォームが差し替わると変更した内容も元
に戻ってしまうので差し替わったタイミングで
処理する必要がある
bull たとえばカスタムフィールドの値に応じて他のカ
スタムフィールドで選択可能な値を絞る場合など
チケット入力フォームに対する変更
bull 差し替え処理を行っている関数をフックして差
し替え処理の後に処理を差し込む
bull replaceIssueFormWith 関数が差し替え処理を行って
いる関数なのでそこを対象に
関数を別名で退避 var _replaceIssueFormWith = replaceIssueFormWith 関数を中身を変更 退避した処理を呼び出すような関数として作り変える replaceIssueFormWith = function(html) 退避しておいた関数を呼び出し _replaceIssueFormWith(html) ここでフォーム差し替え後に やりたい処理を書く
View customize導入に向けて
試す環境を作る
bull プロジェクトで使っているRedmineにいきなり適
用するのは敷居が高いという場合にはまずは仮
想環境などで試してみる
bull Redmineの各バージョンのVagrant boxを公開している
のでそちらを使えばすぐに
vagrant init onozatyredmine-32
vagrant up
スクリプトを書いてみる
bull この資料を参考に書いてみる
bull スクリプトのサンプルは下記リポジトリに貯め
ていっているので参考に
bull httpsgithubcomonozatyredmine-view-customize-scripts
bull これからもだんだん増えていく予定
困ったときには
困ったときにはhellip
bull onozaty まで (follow me)
bull 即レスとまでいきませんが毎日確認してます
bull スクリプト例などもつぶやいています
困ったときにはhellip
bull こういうことできませんかといった質問もお
気軽にどうぞ
bull 一応全部答えている(できるものはBlogでも公開)つ
もりですが拾えてなかったらごめんなさい
おわり
うまく動作しないときの 確認ポイント
Path patternがあっているか
bull 画面のソースを表示してView customizeで指定
したコードが埋め込まれているか確認
bull 埋め込まれていない場合Path patternが間違えている
のでPath patternを見直す
JavaScriptでエラーが発生していないか
bull 開発者ツールでエラーメッセージが出力されて
いないか確認
bull エラーメッセージが出力されていればそれをもとに
JavaScriptを修正
CSSが上書きされていないか
bull 複数のCSSが一致する場合その要素に対してど
のようなスタイルが適用されるかは優先度に
よって決まる
bull 該当の要素を詳細に指定している方が優先される
bull 型セレクタよりidセレクタで指定したものの方が優先
bull セレクタのレベルが同じならば後に書かれたものが
優先される
CSSが上書きされていないか
bull 上にあるほどもの優先度が高い
bull 取り消し線のものは優先度が高いものによって上書きさ
れているもの
チケットの入力フォームがらみは面倒
bull チケットの入力フォームはトラッカーまたはス
テータスが変わるとフォームの再読み込みが行
われる(all_attributes配下が差し替わる)
bull これはトラッカーやステータスによって入力可能な
フィールドや選択肢が変わるため
bull これにより入力フォームの各要素に対する変更(内
容変更やイベントの登録)はリセットされてし
まう
チケット入力フォームに対するイベント
bull 入力フォームが差し替わってもハンドリングでき
るようにする必要がある
bull 考え方としては親の要素に対してイベントを登
録しておいてイベントが発生した際に発生元が
該当のものか判断するようなイメージ
bull jQueryのon関数を使うと簡単に書ける
チケット入力フォームに対するイベント
bull ダメな例
これだと入力フォームが差し替わったタイミングで登録先の要素
(issue_status_id)が別物に変わってしまうのでうまく動かない
bull OKな例
documentに対してイベントハンドラを登録し該当の要素(issue_status_id)
が発生元だったら動作するように書くことによってissue_status_idが差し
替わってもハンドリング可能に
$(issue_status_id) on(change function(e) ステータス変更時に実施したい処理 )
$(document) on(change issue_status_id function(e) ステータス変更時に実施したい処理 )
チケット入力フォームに対する変更
bull 入力フォームが差し替わると変更した内容も元
に戻ってしまうので差し替わったタイミングで
処理する必要がある
bull たとえばカスタムフィールドの値に応じて他のカ
スタムフィールドで選択可能な値を絞る場合など
チケット入力フォームに対する変更
bull 差し替え処理を行っている関数をフックして差
し替え処理の後に処理を差し込む
bull replaceIssueFormWith 関数が差し替え処理を行って
いる関数なのでそこを対象に
関数を別名で退避 var _replaceIssueFormWith = replaceIssueFormWith 関数を中身を変更 退避した処理を呼び出すような関数として作り変える replaceIssueFormWith = function(html) 退避しておいた関数を呼び出し _replaceIssueFormWith(html) ここでフォーム差し替え後に やりたい処理を書く
View customize導入に向けて
試す環境を作る
bull プロジェクトで使っているRedmineにいきなり適
用するのは敷居が高いという場合にはまずは仮
想環境などで試してみる
bull Redmineの各バージョンのVagrant boxを公開している
のでそちらを使えばすぐに
vagrant init onozatyredmine-32
vagrant up
スクリプトを書いてみる
bull この資料を参考に書いてみる
bull スクリプトのサンプルは下記リポジトリに貯め
ていっているので参考に
bull httpsgithubcomonozatyredmine-view-customize-scripts
bull これからもだんだん増えていく予定
困ったときには
困ったときにはhellip
bull onozaty まで (follow me)
bull 即レスとまでいきませんが毎日確認してます
bull スクリプト例などもつぶやいています
困ったときにはhellip
bull こういうことできませんかといった質問もお
気軽にどうぞ
bull 一応全部答えている(できるものはBlogでも公開)つ
もりですが拾えてなかったらごめんなさい
おわり
Path patternがあっているか
bull 画面のソースを表示してView customizeで指定
したコードが埋め込まれているか確認
bull 埋め込まれていない場合Path patternが間違えている
のでPath patternを見直す
JavaScriptでエラーが発生していないか
bull 開発者ツールでエラーメッセージが出力されて
いないか確認
bull エラーメッセージが出力されていればそれをもとに
JavaScriptを修正
CSSが上書きされていないか
bull 複数のCSSが一致する場合その要素に対してど
のようなスタイルが適用されるかは優先度に
よって決まる
bull 該当の要素を詳細に指定している方が優先される
bull 型セレクタよりidセレクタで指定したものの方が優先
bull セレクタのレベルが同じならば後に書かれたものが
優先される
CSSが上書きされていないか
bull 上にあるほどもの優先度が高い
bull 取り消し線のものは優先度が高いものによって上書きさ
れているもの
チケットの入力フォームがらみは面倒
bull チケットの入力フォームはトラッカーまたはス
テータスが変わるとフォームの再読み込みが行
われる(all_attributes配下が差し替わる)
bull これはトラッカーやステータスによって入力可能な
フィールドや選択肢が変わるため
bull これにより入力フォームの各要素に対する変更(内
容変更やイベントの登録)はリセットされてし
まう
チケット入力フォームに対するイベント
bull 入力フォームが差し替わってもハンドリングでき
るようにする必要がある
bull 考え方としては親の要素に対してイベントを登
録しておいてイベントが発生した際に発生元が
該当のものか判断するようなイメージ
bull jQueryのon関数を使うと簡単に書ける
チケット入力フォームに対するイベント
bull ダメな例
これだと入力フォームが差し替わったタイミングで登録先の要素
(issue_status_id)が別物に変わってしまうのでうまく動かない
bull OKな例
documentに対してイベントハンドラを登録し該当の要素(issue_status_id)
が発生元だったら動作するように書くことによってissue_status_idが差し
替わってもハンドリング可能に
$(issue_status_id) on(change function(e) ステータス変更時に実施したい処理 )
$(document) on(change issue_status_id function(e) ステータス変更時に実施したい処理 )
チケット入力フォームに対する変更
bull 入力フォームが差し替わると変更した内容も元
に戻ってしまうので差し替わったタイミングで
処理する必要がある
bull たとえばカスタムフィールドの値に応じて他のカ
スタムフィールドで選択可能な値を絞る場合など
チケット入力フォームに対する変更
bull 差し替え処理を行っている関数をフックして差
し替え処理の後に処理を差し込む
bull replaceIssueFormWith 関数が差し替え処理を行って
いる関数なのでそこを対象に
関数を別名で退避 var _replaceIssueFormWith = replaceIssueFormWith 関数を中身を変更 退避した処理を呼び出すような関数として作り変える replaceIssueFormWith = function(html) 退避しておいた関数を呼び出し _replaceIssueFormWith(html) ここでフォーム差し替え後に やりたい処理を書く
View customize導入に向けて
試す環境を作る
bull プロジェクトで使っているRedmineにいきなり適
用するのは敷居が高いという場合にはまずは仮
想環境などで試してみる
bull Redmineの各バージョンのVagrant boxを公開している
のでそちらを使えばすぐに
vagrant init onozatyredmine-32
vagrant up
スクリプトを書いてみる
bull この資料を参考に書いてみる
bull スクリプトのサンプルは下記リポジトリに貯め
ていっているので参考に
bull httpsgithubcomonozatyredmine-view-customize-scripts
bull これからもだんだん増えていく予定
困ったときには
困ったときにはhellip
bull onozaty まで (follow me)
bull 即レスとまでいきませんが毎日確認してます
bull スクリプト例などもつぶやいています
困ったときにはhellip
bull こういうことできませんかといった質問もお
気軽にどうぞ
bull 一応全部答えている(できるものはBlogでも公開)つ
もりですが拾えてなかったらごめんなさい
おわり
JavaScriptでエラーが発生していないか
bull 開発者ツールでエラーメッセージが出力されて
いないか確認
bull エラーメッセージが出力されていればそれをもとに
JavaScriptを修正
CSSが上書きされていないか
bull 複数のCSSが一致する場合その要素に対してど
のようなスタイルが適用されるかは優先度に
よって決まる
bull 該当の要素を詳細に指定している方が優先される
bull 型セレクタよりidセレクタで指定したものの方が優先
bull セレクタのレベルが同じならば後に書かれたものが
優先される
CSSが上書きされていないか
bull 上にあるほどもの優先度が高い
bull 取り消し線のものは優先度が高いものによって上書きさ
れているもの
チケットの入力フォームがらみは面倒
bull チケットの入力フォームはトラッカーまたはス
テータスが変わるとフォームの再読み込みが行
われる(all_attributes配下が差し替わる)
bull これはトラッカーやステータスによって入力可能な
フィールドや選択肢が変わるため
bull これにより入力フォームの各要素に対する変更(内
容変更やイベントの登録)はリセットされてし
まう
チケット入力フォームに対するイベント
bull 入力フォームが差し替わってもハンドリングでき
るようにする必要がある
bull 考え方としては親の要素に対してイベントを登
録しておいてイベントが発生した際に発生元が
該当のものか判断するようなイメージ
bull jQueryのon関数を使うと簡単に書ける
チケット入力フォームに対するイベント
bull ダメな例
これだと入力フォームが差し替わったタイミングで登録先の要素
(issue_status_id)が別物に変わってしまうのでうまく動かない
bull OKな例
documentに対してイベントハンドラを登録し該当の要素(issue_status_id)
が発生元だったら動作するように書くことによってissue_status_idが差し
替わってもハンドリング可能に
$(issue_status_id) on(change function(e) ステータス変更時に実施したい処理 )
$(document) on(change issue_status_id function(e) ステータス変更時に実施したい処理 )
チケット入力フォームに対する変更
bull 入力フォームが差し替わると変更した内容も元
に戻ってしまうので差し替わったタイミングで
処理する必要がある
bull たとえばカスタムフィールドの値に応じて他のカ
スタムフィールドで選択可能な値を絞る場合など
チケット入力フォームに対する変更
bull 差し替え処理を行っている関数をフックして差
し替え処理の後に処理を差し込む
bull replaceIssueFormWith 関数が差し替え処理を行って
いる関数なのでそこを対象に
関数を別名で退避 var _replaceIssueFormWith = replaceIssueFormWith 関数を中身を変更 退避した処理を呼び出すような関数として作り変える replaceIssueFormWith = function(html) 退避しておいた関数を呼び出し _replaceIssueFormWith(html) ここでフォーム差し替え後に やりたい処理を書く
View customize導入に向けて
試す環境を作る
bull プロジェクトで使っているRedmineにいきなり適
用するのは敷居が高いという場合にはまずは仮
想環境などで試してみる
bull Redmineの各バージョンのVagrant boxを公開している
のでそちらを使えばすぐに
vagrant init onozatyredmine-32
vagrant up
スクリプトを書いてみる
bull この資料を参考に書いてみる
bull スクリプトのサンプルは下記リポジトリに貯め
ていっているので参考に
bull httpsgithubcomonozatyredmine-view-customize-scripts
bull これからもだんだん増えていく予定
困ったときには
困ったときにはhellip
bull onozaty まで (follow me)
bull 即レスとまでいきませんが毎日確認してます
bull スクリプト例などもつぶやいています
困ったときにはhellip
bull こういうことできませんかといった質問もお
気軽にどうぞ
bull 一応全部答えている(できるものはBlogでも公開)つ
もりですが拾えてなかったらごめんなさい
おわり
CSSが上書きされていないか
bull 複数のCSSが一致する場合その要素に対してど
のようなスタイルが適用されるかは優先度に
よって決まる
bull 該当の要素を詳細に指定している方が優先される
bull 型セレクタよりidセレクタで指定したものの方が優先
bull セレクタのレベルが同じならば後に書かれたものが
優先される
CSSが上書きされていないか
bull 上にあるほどもの優先度が高い
bull 取り消し線のものは優先度が高いものによって上書きさ
れているもの
チケットの入力フォームがらみは面倒
bull チケットの入力フォームはトラッカーまたはス
テータスが変わるとフォームの再読み込みが行
われる(all_attributes配下が差し替わる)
bull これはトラッカーやステータスによって入力可能な
フィールドや選択肢が変わるため
bull これにより入力フォームの各要素に対する変更(内
容変更やイベントの登録)はリセットされてし
まう
チケット入力フォームに対するイベント
bull 入力フォームが差し替わってもハンドリングでき
るようにする必要がある
bull 考え方としては親の要素に対してイベントを登
録しておいてイベントが発生した際に発生元が
該当のものか判断するようなイメージ
bull jQueryのon関数を使うと簡単に書ける
チケット入力フォームに対するイベント
bull ダメな例
これだと入力フォームが差し替わったタイミングで登録先の要素
(issue_status_id)が別物に変わってしまうのでうまく動かない
bull OKな例
documentに対してイベントハンドラを登録し該当の要素(issue_status_id)
が発生元だったら動作するように書くことによってissue_status_idが差し
替わってもハンドリング可能に
$(issue_status_id) on(change function(e) ステータス変更時に実施したい処理 )
$(document) on(change issue_status_id function(e) ステータス変更時に実施したい処理 )
チケット入力フォームに対する変更
bull 入力フォームが差し替わると変更した内容も元
に戻ってしまうので差し替わったタイミングで
処理する必要がある
bull たとえばカスタムフィールドの値に応じて他のカ
スタムフィールドで選択可能な値を絞る場合など
チケット入力フォームに対する変更
bull 差し替え処理を行っている関数をフックして差
し替え処理の後に処理を差し込む
bull replaceIssueFormWith 関数が差し替え処理を行って
いる関数なのでそこを対象に
関数を別名で退避 var _replaceIssueFormWith = replaceIssueFormWith 関数を中身を変更 退避した処理を呼び出すような関数として作り変える replaceIssueFormWith = function(html) 退避しておいた関数を呼び出し _replaceIssueFormWith(html) ここでフォーム差し替え後に やりたい処理を書く
View customize導入に向けて
試す環境を作る
bull プロジェクトで使っているRedmineにいきなり適
用するのは敷居が高いという場合にはまずは仮
想環境などで試してみる
bull Redmineの各バージョンのVagrant boxを公開している
のでそちらを使えばすぐに
vagrant init onozatyredmine-32
vagrant up
スクリプトを書いてみる
bull この資料を参考に書いてみる
bull スクリプトのサンプルは下記リポジトリに貯め
ていっているので参考に
bull httpsgithubcomonozatyredmine-view-customize-scripts
bull これからもだんだん増えていく予定
困ったときには
困ったときにはhellip
bull onozaty まで (follow me)
bull 即レスとまでいきませんが毎日確認してます
bull スクリプト例などもつぶやいています
困ったときにはhellip
bull こういうことできませんかといった質問もお
気軽にどうぞ
bull 一応全部答えている(できるものはBlogでも公開)つ
もりですが拾えてなかったらごめんなさい
おわり
CSSが上書きされていないか
bull 上にあるほどもの優先度が高い
bull 取り消し線のものは優先度が高いものによって上書きさ
れているもの
チケットの入力フォームがらみは面倒
bull チケットの入力フォームはトラッカーまたはス
テータスが変わるとフォームの再読み込みが行
われる(all_attributes配下が差し替わる)
bull これはトラッカーやステータスによって入力可能な
フィールドや選択肢が変わるため
bull これにより入力フォームの各要素に対する変更(内
容変更やイベントの登録)はリセットされてし
まう
チケット入力フォームに対するイベント
bull 入力フォームが差し替わってもハンドリングでき
るようにする必要がある
bull 考え方としては親の要素に対してイベントを登
録しておいてイベントが発生した際に発生元が
該当のものか判断するようなイメージ
bull jQueryのon関数を使うと簡単に書ける
チケット入力フォームに対するイベント
bull ダメな例
これだと入力フォームが差し替わったタイミングで登録先の要素
(issue_status_id)が別物に変わってしまうのでうまく動かない
bull OKな例
documentに対してイベントハンドラを登録し該当の要素(issue_status_id)
が発生元だったら動作するように書くことによってissue_status_idが差し
替わってもハンドリング可能に
$(issue_status_id) on(change function(e) ステータス変更時に実施したい処理 )
$(document) on(change issue_status_id function(e) ステータス変更時に実施したい処理 )
チケット入力フォームに対する変更
bull 入力フォームが差し替わると変更した内容も元
に戻ってしまうので差し替わったタイミングで
処理する必要がある
bull たとえばカスタムフィールドの値に応じて他のカ
スタムフィールドで選択可能な値を絞る場合など
チケット入力フォームに対する変更
bull 差し替え処理を行っている関数をフックして差
し替え処理の後に処理を差し込む
bull replaceIssueFormWith 関数が差し替え処理を行って
いる関数なのでそこを対象に
関数を別名で退避 var _replaceIssueFormWith = replaceIssueFormWith 関数を中身を変更 退避した処理を呼び出すような関数として作り変える replaceIssueFormWith = function(html) 退避しておいた関数を呼び出し _replaceIssueFormWith(html) ここでフォーム差し替え後に やりたい処理を書く
View customize導入に向けて
試す環境を作る
bull プロジェクトで使っているRedmineにいきなり適
用するのは敷居が高いという場合にはまずは仮
想環境などで試してみる
bull Redmineの各バージョンのVagrant boxを公開している
のでそちらを使えばすぐに
vagrant init onozatyredmine-32
vagrant up
スクリプトを書いてみる
bull この資料を参考に書いてみる
bull スクリプトのサンプルは下記リポジトリに貯め
ていっているので参考に
bull httpsgithubcomonozatyredmine-view-customize-scripts
bull これからもだんだん増えていく予定
困ったときには
困ったときにはhellip
bull onozaty まで (follow me)
bull 即レスとまでいきませんが毎日確認してます
bull スクリプト例などもつぶやいています
困ったときにはhellip
bull こういうことできませんかといった質問もお
気軽にどうぞ
bull 一応全部答えている(できるものはBlogでも公開)つ
もりですが拾えてなかったらごめんなさい
おわり
チケットの入力フォームがらみは面倒
bull チケットの入力フォームはトラッカーまたはス
テータスが変わるとフォームの再読み込みが行
われる(all_attributes配下が差し替わる)
bull これはトラッカーやステータスによって入力可能な
フィールドや選択肢が変わるため
bull これにより入力フォームの各要素に対する変更(内
容変更やイベントの登録)はリセットされてし
まう
チケット入力フォームに対するイベント
bull 入力フォームが差し替わってもハンドリングでき
るようにする必要がある
bull 考え方としては親の要素に対してイベントを登
録しておいてイベントが発生した際に発生元が
該当のものか判断するようなイメージ
bull jQueryのon関数を使うと簡単に書ける
チケット入力フォームに対するイベント
bull ダメな例
これだと入力フォームが差し替わったタイミングで登録先の要素
(issue_status_id)が別物に変わってしまうのでうまく動かない
bull OKな例
documentに対してイベントハンドラを登録し該当の要素(issue_status_id)
が発生元だったら動作するように書くことによってissue_status_idが差し
替わってもハンドリング可能に
$(issue_status_id) on(change function(e) ステータス変更時に実施したい処理 )
$(document) on(change issue_status_id function(e) ステータス変更時に実施したい処理 )
チケット入力フォームに対する変更
bull 入力フォームが差し替わると変更した内容も元
に戻ってしまうので差し替わったタイミングで
処理する必要がある
bull たとえばカスタムフィールドの値に応じて他のカ
スタムフィールドで選択可能な値を絞る場合など
チケット入力フォームに対する変更
bull 差し替え処理を行っている関数をフックして差
し替え処理の後に処理を差し込む
bull replaceIssueFormWith 関数が差し替え処理を行って
いる関数なのでそこを対象に
関数を別名で退避 var _replaceIssueFormWith = replaceIssueFormWith 関数を中身を変更 退避した処理を呼び出すような関数として作り変える replaceIssueFormWith = function(html) 退避しておいた関数を呼び出し _replaceIssueFormWith(html) ここでフォーム差し替え後に やりたい処理を書く
View customize導入に向けて
試す環境を作る
bull プロジェクトで使っているRedmineにいきなり適
用するのは敷居が高いという場合にはまずは仮
想環境などで試してみる
bull Redmineの各バージョンのVagrant boxを公開している
のでそちらを使えばすぐに
vagrant init onozatyredmine-32
vagrant up
スクリプトを書いてみる
bull この資料を参考に書いてみる
bull スクリプトのサンプルは下記リポジトリに貯め
ていっているので参考に
bull httpsgithubcomonozatyredmine-view-customize-scripts
bull これからもだんだん増えていく予定
困ったときには
困ったときにはhellip
bull onozaty まで (follow me)
bull 即レスとまでいきませんが毎日確認してます
bull スクリプト例などもつぶやいています
困ったときにはhellip
bull こういうことできませんかといった質問もお
気軽にどうぞ
bull 一応全部答えている(できるものはBlogでも公開)つ
もりですが拾えてなかったらごめんなさい
おわり
チケット入力フォームに対するイベント
bull 入力フォームが差し替わってもハンドリングでき
るようにする必要がある
bull 考え方としては親の要素に対してイベントを登
録しておいてイベントが発生した際に発生元が
該当のものか判断するようなイメージ
bull jQueryのon関数を使うと簡単に書ける
チケット入力フォームに対するイベント
bull ダメな例
これだと入力フォームが差し替わったタイミングで登録先の要素
(issue_status_id)が別物に変わってしまうのでうまく動かない
bull OKな例
documentに対してイベントハンドラを登録し該当の要素(issue_status_id)
が発生元だったら動作するように書くことによってissue_status_idが差し
替わってもハンドリング可能に
$(issue_status_id) on(change function(e) ステータス変更時に実施したい処理 )
$(document) on(change issue_status_id function(e) ステータス変更時に実施したい処理 )
チケット入力フォームに対する変更
bull 入力フォームが差し替わると変更した内容も元
に戻ってしまうので差し替わったタイミングで
処理する必要がある
bull たとえばカスタムフィールドの値に応じて他のカ
スタムフィールドで選択可能な値を絞る場合など
チケット入力フォームに対する変更
bull 差し替え処理を行っている関数をフックして差
し替え処理の後に処理を差し込む
bull replaceIssueFormWith 関数が差し替え処理を行って
いる関数なのでそこを対象に
関数を別名で退避 var _replaceIssueFormWith = replaceIssueFormWith 関数を中身を変更 退避した処理を呼び出すような関数として作り変える replaceIssueFormWith = function(html) 退避しておいた関数を呼び出し _replaceIssueFormWith(html) ここでフォーム差し替え後に やりたい処理を書く
View customize導入に向けて
試す環境を作る
bull プロジェクトで使っているRedmineにいきなり適
用するのは敷居が高いという場合にはまずは仮
想環境などで試してみる
bull Redmineの各バージョンのVagrant boxを公開している
のでそちらを使えばすぐに
vagrant init onozatyredmine-32
vagrant up
スクリプトを書いてみる
bull この資料を参考に書いてみる
bull スクリプトのサンプルは下記リポジトリに貯め
ていっているので参考に
bull httpsgithubcomonozatyredmine-view-customize-scripts
bull これからもだんだん増えていく予定
困ったときには
困ったときにはhellip
bull onozaty まで (follow me)
bull 即レスとまでいきませんが毎日確認してます
bull スクリプト例などもつぶやいています
困ったときにはhellip
bull こういうことできませんかといった質問もお
気軽にどうぞ
bull 一応全部答えている(できるものはBlogでも公開)つ
もりですが拾えてなかったらごめんなさい
おわり
チケット入力フォームに対するイベント
bull ダメな例
これだと入力フォームが差し替わったタイミングで登録先の要素
(issue_status_id)が別物に変わってしまうのでうまく動かない
bull OKな例
documentに対してイベントハンドラを登録し該当の要素(issue_status_id)
が発生元だったら動作するように書くことによってissue_status_idが差し
替わってもハンドリング可能に
$(issue_status_id) on(change function(e) ステータス変更時に実施したい処理 )
$(document) on(change issue_status_id function(e) ステータス変更時に実施したい処理 )
チケット入力フォームに対する変更
bull 入力フォームが差し替わると変更した内容も元
に戻ってしまうので差し替わったタイミングで
処理する必要がある
bull たとえばカスタムフィールドの値に応じて他のカ
スタムフィールドで選択可能な値を絞る場合など
チケット入力フォームに対する変更
bull 差し替え処理を行っている関数をフックして差
し替え処理の後に処理を差し込む
bull replaceIssueFormWith 関数が差し替え処理を行って
いる関数なのでそこを対象に
関数を別名で退避 var _replaceIssueFormWith = replaceIssueFormWith 関数を中身を変更 退避した処理を呼び出すような関数として作り変える replaceIssueFormWith = function(html) 退避しておいた関数を呼び出し _replaceIssueFormWith(html) ここでフォーム差し替え後に やりたい処理を書く
View customize導入に向けて
試す環境を作る
bull プロジェクトで使っているRedmineにいきなり適
用するのは敷居が高いという場合にはまずは仮
想環境などで試してみる
bull Redmineの各バージョンのVagrant boxを公開している
のでそちらを使えばすぐに
vagrant init onozatyredmine-32
vagrant up
スクリプトを書いてみる
bull この資料を参考に書いてみる
bull スクリプトのサンプルは下記リポジトリに貯め
ていっているので参考に
bull httpsgithubcomonozatyredmine-view-customize-scripts
bull これからもだんだん増えていく予定
困ったときには
困ったときにはhellip
bull onozaty まで (follow me)
bull 即レスとまでいきませんが毎日確認してます
bull スクリプト例などもつぶやいています
困ったときにはhellip
bull こういうことできませんかといった質問もお
気軽にどうぞ
bull 一応全部答えている(できるものはBlogでも公開)つ
もりですが拾えてなかったらごめんなさい
おわり
チケット入力フォームに対する変更
bull 入力フォームが差し替わると変更した内容も元
に戻ってしまうので差し替わったタイミングで
処理する必要がある
bull たとえばカスタムフィールドの値に応じて他のカ
スタムフィールドで選択可能な値を絞る場合など
チケット入力フォームに対する変更
bull 差し替え処理を行っている関数をフックして差
し替え処理の後に処理を差し込む
bull replaceIssueFormWith 関数が差し替え処理を行って
いる関数なのでそこを対象に
関数を別名で退避 var _replaceIssueFormWith = replaceIssueFormWith 関数を中身を変更 退避した処理を呼び出すような関数として作り変える replaceIssueFormWith = function(html) 退避しておいた関数を呼び出し _replaceIssueFormWith(html) ここでフォーム差し替え後に やりたい処理を書く
View customize導入に向けて
試す環境を作る
bull プロジェクトで使っているRedmineにいきなり適
用するのは敷居が高いという場合にはまずは仮
想環境などで試してみる
bull Redmineの各バージョンのVagrant boxを公開している
のでそちらを使えばすぐに
vagrant init onozatyredmine-32
vagrant up
スクリプトを書いてみる
bull この資料を参考に書いてみる
bull スクリプトのサンプルは下記リポジトリに貯め
ていっているので参考に
bull httpsgithubcomonozatyredmine-view-customize-scripts
bull これからもだんだん増えていく予定
困ったときには
困ったときにはhellip
bull onozaty まで (follow me)
bull 即レスとまでいきませんが毎日確認してます
bull スクリプト例などもつぶやいています
困ったときにはhellip
bull こういうことできませんかといった質問もお
気軽にどうぞ
bull 一応全部答えている(できるものはBlogでも公開)つ
もりですが拾えてなかったらごめんなさい
おわり
チケット入力フォームに対する変更
bull 差し替え処理を行っている関数をフックして差
し替え処理の後に処理を差し込む
bull replaceIssueFormWith 関数が差し替え処理を行って
いる関数なのでそこを対象に
関数を別名で退避 var _replaceIssueFormWith = replaceIssueFormWith 関数を中身を変更 退避した処理を呼び出すような関数として作り変える replaceIssueFormWith = function(html) 退避しておいた関数を呼び出し _replaceIssueFormWith(html) ここでフォーム差し替え後に やりたい処理を書く
View customize導入に向けて
試す環境を作る
bull プロジェクトで使っているRedmineにいきなり適
用するのは敷居が高いという場合にはまずは仮
想環境などで試してみる
bull Redmineの各バージョンのVagrant boxを公開している
のでそちらを使えばすぐに
vagrant init onozatyredmine-32
vagrant up
スクリプトを書いてみる
bull この資料を参考に書いてみる
bull スクリプトのサンプルは下記リポジトリに貯め
ていっているので参考に
bull httpsgithubcomonozatyredmine-view-customize-scripts
bull これからもだんだん増えていく予定
困ったときには
困ったときにはhellip
bull onozaty まで (follow me)
bull 即レスとまでいきませんが毎日確認してます
bull スクリプト例などもつぶやいています
困ったときにはhellip
bull こういうことできませんかといった質問もお
気軽にどうぞ
bull 一応全部答えている(できるものはBlogでも公開)つ
もりですが拾えてなかったらごめんなさい
おわり
View customize導入に向けて
試す環境を作る
bull プロジェクトで使っているRedmineにいきなり適
用するのは敷居が高いという場合にはまずは仮
想環境などで試してみる
bull Redmineの各バージョンのVagrant boxを公開している
のでそちらを使えばすぐに
vagrant init onozatyredmine-32
vagrant up
スクリプトを書いてみる
bull この資料を参考に書いてみる
bull スクリプトのサンプルは下記リポジトリに貯め
ていっているので参考に
bull httpsgithubcomonozatyredmine-view-customize-scripts
bull これからもだんだん増えていく予定
困ったときには
困ったときにはhellip
bull onozaty まで (follow me)
bull 即レスとまでいきませんが毎日確認してます
bull スクリプト例などもつぶやいています
困ったときにはhellip
bull こういうことできませんかといった質問もお
気軽にどうぞ
bull 一応全部答えている(できるものはBlogでも公開)つ
もりですが拾えてなかったらごめんなさい
おわり
試す環境を作る
bull プロジェクトで使っているRedmineにいきなり適
用するのは敷居が高いという場合にはまずは仮
想環境などで試してみる
bull Redmineの各バージョンのVagrant boxを公開している
のでそちらを使えばすぐに
vagrant init onozatyredmine-32
vagrant up
スクリプトを書いてみる
bull この資料を参考に書いてみる
bull スクリプトのサンプルは下記リポジトリに貯め
ていっているので参考に
bull httpsgithubcomonozatyredmine-view-customize-scripts
bull これからもだんだん増えていく予定
困ったときには
困ったときにはhellip
bull onozaty まで (follow me)
bull 即レスとまでいきませんが毎日確認してます
bull スクリプト例などもつぶやいています
困ったときにはhellip
bull こういうことできませんかといった質問もお
気軽にどうぞ
bull 一応全部答えている(できるものはBlogでも公開)つ
もりですが拾えてなかったらごめんなさい
おわり
スクリプトを書いてみる
bull この資料を参考に書いてみる
bull スクリプトのサンプルは下記リポジトリに貯め
ていっているので参考に
bull httpsgithubcomonozatyredmine-view-customize-scripts
bull これからもだんだん増えていく予定
困ったときには
困ったときにはhellip
bull onozaty まで (follow me)
bull 即レスとまでいきませんが毎日確認してます
bull スクリプト例などもつぶやいています
困ったときにはhellip
bull こういうことできませんかといった質問もお
気軽にどうぞ
bull 一応全部答えている(できるものはBlogでも公開)つ
もりですが拾えてなかったらごめんなさい
おわり
困ったときには
困ったときにはhellip
bull onozaty まで (follow me)
bull 即レスとまでいきませんが毎日確認してます
bull スクリプト例などもつぶやいています
困ったときにはhellip
bull こういうことできませんかといった質問もお
気軽にどうぞ
bull 一応全部答えている(できるものはBlogでも公開)つ
もりですが拾えてなかったらごめんなさい
おわり
困ったときにはhellip
bull onozaty まで (follow me)
bull 即レスとまでいきませんが毎日確認してます
bull スクリプト例などもつぶやいています
困ったときにはhellip
bull こういうことできませんかといった質問もお
気軽にどうぞ
bull 一応全部答えている(できるものはBlogでも公開)つ
もりですが拾えてなかったらごめんなさい
おわり
困ったときにはhellip
bull こういうことできませんかといった質問もお
気軽にどうぞ
bull 一応全部答えている(できるものはBlogでも公開)つ
もりですが拾えてなかったらごめんなさい
おわり
おわり