12
5

More than 5 years have passed since last update.

Redmineで長いセレクトボックスを自動補完して欲しかったのでプラグインを作った

Posted at

Redmineでものすごく長いセレクトボックスに遭遇して入力に難儀したことはないでしょうか。僕はあります。

つくったもの

Selectbox Autocompleter

動作例

動作例

デフォルトでは 指定したセレクトボックスをSelect2に変換します。
プラグイン設定で変換するセレクトボックスをidで指定することができます。

設定ページでIDを指定

たとえば、デフォルトで指定している「project_quick_jump_box」は右上のプロジェクトジャンプのセレクトボックスです。関わっているプロジェクトが多いときに設定しておくと特に便利でしょう。

セレクトボックスのidさえ調べておけば、自分で変換したいセレクトボックスだけ指定することができます。

ちなみに、project_quick_jump_box だけ Select2 化するプラグインは既にあります(Improved Searchbox)また、Select2ライブラリを読み込むプラグインなどは既にいくつかあります(+View Customize プラグインなどと組み合わせて使える)。

このプラグインの場合、インストールするだけで設定ページのID指定から簡単にカスタムしやすくなっているのがよいところです。

インストール方法

$ cd $(REDMINE_HOME)/plugin
$ git clone https://github.com/heriet/redmine-selectbox-autocompleter.git selectbox_autocompleter

pluginディレクトリにcloneしてRedmine再起動するだけ(cloneするディレクトリ名は上の通り selectbox_autocompleter にする)

経緯とか

ものすごく長いセレクトボックスを頻繁に選択するのがあまりにつらかったので、まずは指定したセレクトボックスにHTML5のdatalist化するような Greasemonkeyをつくっていました。そして、それを利用者全員が使えるよう、Redmine Pluginにしたのが Selectbox Autocompleter です。

datalistを使ってautocomplete

datalistを使う場合、jqueryに依存しないし軽量というメリットはあります。が、いかんせんテキストボックスを余分に作るので、デザインが崩れたりします。崩れるだけならCSSで調整してもよいのですが、さらにChromeだとものすごく長い datalist に対してスクロールバーを表示してくれない(Firefoxだといい感じにスクロールバーを付けてくれる)という問題があることが後々わかりました。

結局 Select2を使ったほうが使い勝手がよさそうということがわかり、そちらをデフォルトに採用しました(いちおう、datalistを使った場合も機能的には残している)

select2を使ってautocomplete

あと、上に上げたようにSelect2を組み込める類似の機能が実現できるプラグインが他にもたくさんあることに、作ったあとに気がついたのですが、せっかくなので自分なりに導入が簡単かつカスタムしやすいように仕上げました。(セレクトボックスのidをいちいち調べないといけないのはちょっと不便ですが、カスタムの幅の広さを優先した)

まとめ

セレクトボックスの要素数が長すぎて使いにくいRedmineを見つけたときは、ぜひ Selectbox Autocompleter をお試しください

12
5
2

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
12
5