redmine.tokyo第15回勉強会 LT2 2018.11.10

あなたは、ねぎ派？
ぶどう派？
「Javascriptで選択を便利に」
2018.11.10 山崎進

資料の掲載ページ
本日お話したソースの掲載ページ

http://www.ankosoft.co.
jp/redmine-tokyo-15ht/

2
redmine.tokyo第15回勉強会 LT2 2018.11.10

今日お伝えしたいこと
Redmineの画面に関するUIはJavascriptで簡単にカスタマイズ可能
その実例として２つの独立した大項目と中項目のセレクトボックスの連動方法を発表します。

3
redmine.tokyo第15回勉強会 LT2 2018.11.10

類似機能の他のアプローチ
http://blog.enjoyxstudy.com/entry/2016/04/03/000000
Redmine: カスタムフィールドを連動させる(親の値に応じて、子を絞り込む)

redmine.tokyo第15回勉強会 LT2 2018.11.10

中項目には大項目が表示されません。

似ていますが、パクリではありません。。。
処理の仕方が内部的には異なります。
4

Javascriptで作ってみた２つのセレクトボックスを連動させました。

デモ5
redmine.tokyo第15回勉強会 LT2 2018.11.10

レシピ① ：動作原理
１）中項目の全ての項目を非表示にする

２）大項目の項目が変更された時の項目名を取得する
３）中項目で全ての項目に対して下記の処理をする

3-1) 項目２）で取得した値が含まれている項目が出現
したら、次の中項目から次の大項目までを、「非表示状態を表示状態」に変更する

6
redmine.tokyo第15回勉強会 LT2 2018.11.10

レシピ② ： Redmine側の準備
大項目と中項目のセレクトボックスを準備中項目の項目名

中項目の項目名

中項目の項目名に、大項目名の項目名の先頭に区切り文字として「◆」を付けて登録
その後に中項目の項目名を登録

中項目の項目名

これにより、大項目と中項目をマッピング（関連付け）します。
7redmine.tokyo第15回勉強会 LT2 2018.11.10

レシピ③ ：id名を確認
ブラウザの開発者モードで大項目と中項目のセレクトボックスのid名を確認
今回の例では、大項目のセレクトボックスのid名：issue_custom_field_values_1
中項目のセレクトボックスのid名：issue_custom_field_values_28
redmine.tokyo第15回勉強会 LT2 2018.11.10

http://www.ankosoft.co.jp/wp-content/uploads/2018/11/js.txtにサンプルソースが掲載されています。

レシピ④ ：Javascriptの準備//ーーーーーーーーーーーーーーーーーーーーーーーー//大項目のカスタムフィールドの定義
my_daikoumoku=1
前頁で調べたカスタ//中項目のカスタムフィールドの定義
my_chukoumoku=2

ムフィールドのID名の内、最後の番号の部分を指定する。

//中項目における大項目の項目名を意味する記号
必ずしも「◆」でなくmy_kugiri_kigou="◆"てもOKです。
//ーーーーーーーーーーーーーーーーーーーーーーーー
9redmine.tokyo第15回勉強会 LT2 2018.11.10

http://www.ankosoft.co.jp/wp-content/uploads/2018/11/js.txtにサンプルソースが掲載されています。

レシピ④ ：Javascriptの準備
all_display_none()

自作
関数

中項目の全ての項目を非表示にする

function all_display_none() {//中項目セレクトボックスの全ての項目を非表示にする$("#issue_custom_field_values_"+my_chukoumoku+" option").each(function(i){if ($(this).val()!="" && $(this).parent().prop("tagName")=="SELECT"){$(this).wrap('<span>')}})
Optionタグの親要素のタグ名が<span>タグを追加し}
SELECTである場合て、項目を非表示自作の「all_display_none」関数を呼び出して、optionタグに<span>タグを追加して、中項目セレクトボックスの全ての項目を非表示にする
10
redmine.tokyo第15回勉強会 LT2 2018.11.10

レシピ④ ：Javascript適用後中項目の全ての項目が非表示になる

OptionタグにSpanタグが追加
11
redmine.tokyo第15回勉強会 LT2 2018.11.10

http://www.ankosoft.co.jp/wp-content/uploads/2018/11/js.txtにサンプルソースが掲載されています。

レシピ④ ：Javascriptの準備$("#issue_custom_field_values_"+my_daikoumoku).change(function() {my_key_word = $(this).val();
大項目の項目が変更され一旦、中た時の項目名を取得する
my_key_word_aru="nasi"
項目の全ての項目
表示/非表示の判定フラグ
all_display_none()を非表示$("#issue_custom_field_values_"+my_chukoumoku+" option").each(function(i){if ($(this).text().indexOf(my_key_word) != -1) {表示/非表示my_key_word_aru="aru"の判定} else if (my_key_word_aru=="aru"){
中項目
if ($(this).text().indexOf(my_kugiri_kigou) != -1) {で全て
my_key_word_aru="nasi"の項目} else{に対し$(this).unwrap('<span>')て処理}}
Spanタグを削除})->項目が表示})12
redmine.tokyo第15回勉強会 LT2 2018.11.10

レシピ④ ：Javascript適用後
大項目と中項目の２つのセレクトボックスが連動します。

Spanタグが除去->項目が表示
Spanタグが存在->項目が非表示

13
redmine.tokyo第15回勉強会 LT2 2018.11.10

レシピ④ ：Javascript適用後

Spanタグが存在->項目が非表示

Spanタグが除去->項目が表示

14
redmine.tokyo第15回勉強会 LT2 2018.11.10

レシピ⑤ ：Javascriptを永続的に適用

15
redmine.tokyo第15回勉強会 LT2 2018.11.10

最後にブラウザの開発者モードでJavascriptを色々試してみる。エ
ラーが出ても、ブラウザを更新したら元に戻り、他のユーザーには影響を与えないため、気軽にJavascriptの動作検証を行うことができる。

問題なく動作することを確認したら、Redmineに永続的に適用をする（「view customize plugin」のご利用をお勧め）。
操作対象の要素にIDがあればIDを使って対象を特定し、IDがなければDOMを利用して、classや親子、兄弟要素から操作対象要素を確定する。
16
redmine.tokyo第15回勉強会 LT2 2018.11.10

たったこれだけのソースでおまけのソース：ガントバーが動きます
my_day_wide=16$( ".tooltip" ).resizable({start : function (event , ui){;$(this).css({background:"blue", opacity:"0.5"});},handles: 'w,e' ,grid: [ my_day_wide ]}).draggable({start : function (event , ui){;$(this).css({background:"blue", opacity:"0.5"});},handles: 'w,e' ,grid: [ my_day_wide ]})17
redmine.tokyo第15回勉強会 LT2 2018.11.10

http://www.ankosoft.co.jp/wp-content/uploads/2018/11/js_gant.txtにサンプルソースが掲載されています。

おまけのソース：ガントバーが動きます18
redmine.tokyo第15回勉強会 LT2 2018.11.10

最後に一番重要な質問です。
19
redmine.tokyo第15回勉強会 LT2 2018.11.10

最後にあなたは、ねぎ派ですか？
それともぶどう派ですか？
20
redmine.tokyo第15回勉強会 LT2 2018.11.10

ご質問＆連絡先
株式会社Ankosoft
山崎 進
住所：〒111-0041東京都台東区元浅草2-6-4
上野コアビル3F
メール：yamasaki@ankosoft.co.jp
電話：050-5326-6639
URL:http://www.ankosoft.co.jp

21
redmine.tokyo第15回勉強会 LT2 2018.11.10