83
View customize plugin使いこなす 2016-05-14 10 redmine.tokyo 勉強会 Hirokazu Onozato @onozaty

View customize pluginを使いこなす

  • Upload
    onozaty

  • View
    7.034

  • Download
    0

Embed Size (px)

Citation preview

Page 1: View customize pluginを使いこなす

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でも公開)つ

もりですが拾えてなかったらごめんなさい

おわり

Page 2: View customize pluginを使いこなす

自己紹介

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でも公開)つ

もりですが拾えてなかったらごめんなさい

おわり

Page 3: View customize pluginを使いこなす

個人で作ったもの

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でも公開)つ

もりですが拾えてなかったらごめんなさい

おわり

Page 4: View customize pluginを使いこなす

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でも公開)つ

もりですが拾えてなかったらごめんなさい

おわり

Page 5: View customize pluginを使いこなす

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でも公開)つ

もりですが拾えてなかったらごめんなさい

おわり

Page 6: View customize pluginを使いこなす

利用プラグイン

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でも公開)つ

もりですが拾えてなかったらごめんなさい

おわり

Page 7: View customize 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でも公開)つ

もりですが拾えてなかったらごめんなさい

おわり

Page 8: 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でも公開)つ

もりですが拾えてなかったらごめんなさい

おわり

Page 9: View customize pluginを使いこなす

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でも公開)つ

もりですが拾えてなかったらごめんなさい

おわり

Page 10: View customize pluginを使いこなす

≒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でも公開)つ

もりですが拾えてなかったらごめんなさい

おわり

Page 11: View customize pluginを使いこなす

できることの例

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でも公開)つ

もりですが拾えてなかったらごめんなさい

おわり

Page 12: View customize pluginを使いこなす

注意点

注意点

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でも公開)つ

もりですが拾えてなかったらごめんなさい

おわり

Page 13: View customize pluginを使いこなす

注意点

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でも公開)つ

もりですが拾えてなかったらごめんなさい

おわり

Page 14: View customize pluginを使いこなす

注意点

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でも公開)つ

もりですが拾えてなかったらごめんなさい

おわり

Page 15: View customize pluginを使いこなす

使い方

インストール

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でも公開)つ

もりですが拾えてなかったらごめんなさい

おわり

Page 16: View customize pluginを使いこなす

インストール

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でも公開)つ

もりですが拾えてなかったらごめんなさい

おわり

Page 17: View customize pluginを使いこなす

インストールしただけでは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でも公開)つ

もりですが拾えてなかったらごめんなさい

おわり

Page 18: View customize pluginを使いこなす

設定方法

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でも公開)つ

もりですが拾えてなかったらごめんなさい

おわり

Page 19: View customize pluginを使いこなす

設定方法

コードを実行するパス(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でも公開)つ

もりですが拾えてなかったらごめんなさい

おわり

Page 20: View customize pluginを使いこなす

実行

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でも公開)つ

もりですが拾えてなかったらごめんなさい

おわり

Page 21: View customize pluginを使いこなす

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でも公開)つ

もりですが拾えてなかったらごめんなさい

おわり

Page 22: View customize pluginを使いこなす

キーとなる技術

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でも公開)つ

もりですが拾えてなかったらごめんなさい

おわり

Page 23: View customize pluginを使いこなす

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でも公開)つ

もりですが拾えてなかったらごめんなさい

おわり

Page 24: View customize pluginを使いこなす

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でも公開)つ

もりですが拾えてなかったらごめんなさい

おわり

Page 25: View customize pluginを使いこなす

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でも公開)つ

もりですが拾えてなかったらごめんなさい

おわり

Page 26: View customize pluginを使いこなす

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でも公開)つ

もりですが拾えてなかったらごめんなさい

おわり

Page 27: View customize pluginを使いこなす

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でも公開)つ

もりですが拾えてなかったらごめんなさい

おわり

Page 28: View customize pluginを使いこなす

設定に関するノウハウ

対象画面の指定方法

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でも公開)つ

もりですが拾えてなかったらごめんなさい

おわり

Page 29: View customize pluginを使いこなす

対象画面の指定方法

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でも公開)つ

もりですが拾えてなかったらごめんなさい

おわり

Page 30: View customize pluginを使いこなす

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でも公開)つ

もりですが拾えてなかったらごめんなさい

おわり

Page 31: View customize pluginを使いこなす

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でも公開)つ

もりですが拾えてなかったらごめんなさい

おわり

Page 32: View customize pluginを使いこなす

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でも公開)つ

もりですが拾えてなかったらごめんなさい

おわり

Page 33: View customize pluginを使いこなす

指定例 (よくつかうもの)

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でも公開)つ

もりですが拾えてなかったらごめんなさい

おわり

Page 34: View customize pluginを使いこなす

チケットの入力フォーム

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でも公開)つ

もりですが拾えてなかったらごめんなさい

おわり

Page 35: View customize pluginを使いこなす

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でも公開)つ

もりですが拾えてなかったらごめんなさい

おわり

Page 36: View customize pluginを使いこなす

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でも公開)つ

もりですが拾えてなかったらごめんなさい

おわり

Page 37: View customize pluginを使いこなす

プロジェクト毎の指定

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でも公開)つ

もりですが拾えてなかったらごめんなさい

おわり

Page 38: View customize pluginを使いこなす

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でも公開)つ

もりですが拾えてなかったらごめんなさい

おわり

Page 39: View customize pluginを使いこなす

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でも公開)つ

もりですが拾えてなかったらごめんなさい

おわり

Page 40: View customize pluginを使いこなす

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でも公開)つ

もりですが拾えてなかったらごめんなさい

おわり

Page 41: View customize pluginを使いこなす

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でも公開)つ

もりですが拾えてなかったらごめんなさい

おわり

Page 42: View customize pluginを使いこなす

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でも公開)つ

もりですが拾えてなかったらごめんなさい

おわり

Page 43: View customize pluginを使いこなす

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でも公開)つ

もりですが拾えてなかったらごめんなさい

おわり

Page 44: View customize pluginを使いこなす

コード(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でも公開)つ

もりですが拾えてなかったらごめんなさい

おわり

Page 45: View customize pluginを使いこなす

ブラウザの開発者ツールを活用

ブラウザの開発者ツール

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でも公開)つ

もりですが拾えてなかったらごめんなさい

おわり

Page 46: View customize pluginを使いこなす

ブラウザの開発者ツール

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でも公開)つ

もりですが拾えてなかったらごめんなさい

おわり

Page 47: View customize pluginを使いこなす

ブラウザの開発者ツール

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でも公開)つ

もりですが拾えてなかったらごめんなさい

おわり

Page 48: View customize pluginを使いこなす

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でも公開)つ

もりですが拾えてなかったらごめんなさい

おわり

Page 49: View customize pluginを使いこなす

コンソール

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でも公開)つ

もりですが拾えてなかったらごめんなさい

おわり

Page 50: View customize pluginを使いこなす

コンソール

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でも公開)つ

もりですが拾えてなかったらごめんなさい

おわり

Page 51: View customize pluginを使いこなす

実際に試してみる

例ヘッダにチケット一覧リンクを追加

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でも公開)つ

もりですが拾えてなかったらごめんなさい

おわり

Page 52: View customize pluginを使いこなす

例ヘッダにチケット一覧リンクを追加

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でも公開)つ

もりですが拾えてなかったらごめんなさい

おわり

Page 53: View customize pluginを使いこなす

追加位置を調べる

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でも公開)つ

もりですが拾えてなかったらごめんなさい

おわり

Page 54: View customize pluginを使いこなす

追加位置を調べる

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でも公開)つ

もりですが拾えてなかったらごめんなさい

おわり

Page 55: View customize pluginを使いこなす

追加位置を調べる

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でも公開)つ

もりですが拾えてなかったらごめんなさい

おわり

Page 56: View customize pluginを使いこなす

リンクを追加するコードを書く

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でも公開)つ

もりですが拾えてなかったらごめんなさい

おわり

Page 57: View customize pluginを使いこなす

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でも公開)つ

もりですが拾えてなかったらごめんなさい

おわり

Page 58: View customize pluginを使いこなす

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でも公開)つ

もりですが拾えてなかったらごめんなさい

おわり

Page 59: View customize pluginを使いこなす

コード(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でも公開)つ

もりですが拾えてなかったらごめんなさい

おわり

Page 60: View customize pluginを使いこなす

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でも公開)つ

もりですが拾えてなかったらごめんなさい

おわり

Page 61: View customize pluginを使いこなす

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でも公開)つ

もりですが拾えてなかったらごめんなさい

おわり

Page 62: View customize pluginを使いこなす

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でも公開)つ

もりですが拾えてなかったらごめんなさい

おわり

Page 63: View customize pluginを使いこなす

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でも公開)つ

もりですが拾えてなかったらごめんなさい

おわり

Page 64: View customize pluginを使いこなす

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でも公開)つ

もりですが拾えてなかったらごめんなさい

おわり

Page 65: View customize pluginを使いこなす

良く使う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でも公開)つ

もりですが拾えてなかったらごめんなさい

おわり

Page 66: View customize pluginを使いこなす

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でも公開)つ

もりですが拾えてなかったらごめんなさい

おわり

Page 67: View customize pluginを使いこなす

うまく動作しないときの 確認ポイント

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でも公開)つ

もりですが拾えてなかったらごめんなさい

おわり

Page 68: View customize pluginを使いこなす

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でも公開)つ

もりですが拾えてなかったらごめんなさい

おわり

Page 69: View customize pluginを使いこなす

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でも公開)つ

もりですが拾えてなかったらごめんなさい

おわり

Page 70: View customize pluginを使いこなす

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でも公開)つ

もりですが拾えてなかったらごめんなさい

おわり

Page 71: View customize pluginを使いこなす

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でも公開)つ

もりですが拾えてなかったらごめんなさい

おわり

Page 72: View customize pluginを使いこなす

チケットの入力フォームがらみは面倒

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でも公開)つ

もりですが拾えてなかったらごめんなさい

おわり

Page 73: View customize pluginを使いこなす

チケット入力フォームに対するイベント

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でも公開)つ

もりですが拾えてなかったらごめんなさい

おわり

Page 74: View customize pluginを使いこなす

チケット入力フォームに対するイベント

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でも公開)つ

もりですが拾えてなかったらごめんなさい

おわり

Page 75: View customize pluginを使いこなす

チケット入力フォームに対する変更

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でも公開)つ

もりですが拾えてなかったらごめんなさい

おわり

Page 76: View customize pluginを使いこなす

チケット入力フォームに対する変更

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でも公開)つ

もりですが拾えてなかったらごめんなさい

おわり

Page 77: View customize pluginを使いこなす

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でも公開)つ

もりですが拾えてなかったらごめんなさい

おわり

Page 78: View customize pluginを使いこなす

試す環境を作る

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でも公開)つ

もりですが拾えてなかったらごめんなさい

おわり

Page 79: View customize pluginを使いこなす

スクリプトを書いてみる

bull この資料を参考に書いてみる

bull スクリプトのサンプルは下記リポジトリに貯め

ていっているので参考に

bull httpsgithubcomonozatyredmine-view-customize-scripts

bull これからもだんだん増えていく予定

困ったときには

困ったときにはhellip

bull onozaty まで (follow me)

bull 即レスとまでいきませんが毎日確認してます

bull スクリプト例などもつぶやいています

困ったときにはhellip

bull こういうことできませんかといった質問もお

気軽にどうぞ

bull 一応全部答えている(できるものはBlogでも公開)つ

もりですが拾えてなかったらごめんなさい

おわり

Page 80: View customize pluginを使いこなす

困ったときには

困ったときにはhellip

bull onozaty まで (follow me)

bull 即レスとまでいきませんが毎日確認してます

bull スクリプト例などもつぶやいています

困ったときにはhellip

bull こういうことできませんかといった質問もお

気軽にどうぞ

bull 一応全部答えている(できるものはBlogでも公開)つ

もりですが拾えてなかったらごめんなさい

おわり

Page 81: View customize pluginを使いこなす

困ったときにはhellip

bull onozaty まで (follow me)

bull 即レスとまでいきませんが毎日確認してます

bull スクリプト例などもつぶやいています

困ったときにはhellip

bull こういうことできませんかといった質問もお

気軽にどうぞ

bull 一応全部答えている(できるものはBlogでも公開)つ

もりですが拾えてなかったらごめんなさい

おわり

Page 82: View customize pluginを使いこなす

困ったときにはhellip

bull こういうことできませんかといった質問もお

気軽にどうぞ

bull 一応全部答えている(できるものはBlogでも公開)つ

もりですが拾えてなかったらごめんなさい

おわり

Page 83: View customize pluginを使いこなす

おわり