Redmineを支えるJavaScriptライブラリの今
この記事は、Redmine Advent Calendar 2024 の7日目の記事です。
要点
- Redmineが依存しているJavaScriptライブラリの中には更新が止まっているものがある。
- 個別に検討してtributeはフォークして新バージョンを公開してみた。
- jquery は結合度合いが半端ないが jquery-ui は移行を考慮する時期に来ている。
Redmine と JavaScriptライブラリ
多くのOSSと同様に Redmine も他のOSSに支えられています。Ruby On Rails はもちろんですが、利便性向上のために JavaScriptライブラリを多数利用しています。
しかし、ライブラリの中には現状、開発が停滞しいるものもあります。
「ブラウザの機能向上にともなってライブラリが役割を終えた」ということであれば、ブラウザの新機能を利用することになるわけですがそうでない場合は、他のライブラリへの移行、ライブラリの開発引き継ぎ、といった方針を検討することになります。
他のライブラリへ移行、というのは常道ですが、当然、Redmine側でも相応の移行作業が必要です。
ライブラリの開発引き継ぐのはどうでしょうか? 一見無謀なようですが、さしあたって有力な移行先が見当たらない、ライブラリ自体の完成度が高く、開発の道具立てのアップデートが必要なケースなどの場合は妥当な選択だと思います。また、本家開発元でプルリクエスト取込が滞留している場合、取込によってより利便性が向上や不具合解消が見こまれます。継続していれば、そのうちRedmine以外でそのライブラリを利用しているアプリの開発者も助けてくれるかも知れません(そうだと良いなあ)。
npm での公開を視野に入れた場合、個人名で開発を続けるよりも組織を作った方が何かと都合が良さそうなのでgithubで「redmine-ui」という組織を作りました。何か「消防署の方から来ました」みたいな組織名ですが。
今のところ redmine-ui で公開しているのは Tribute のみですが、その他のライブラリについても解説していきます。
Tribute
- Redmineでは、wikiエディタでユーザーやチケットを入力するときの補完のために利用しています。テキストエリアで "@"でユーザーの一覧、"#"でチケットの一覧、"["でwikiページの一覧が表示されます。
- zurb社で開発されていましたが、2021年12月を最後にコミットがされていません。
- フォークはすでにいくつかあり、中には取り込まれていないプルリクエストを取り込んだものもあったのですが、テスト環境について質問したところスルーされてしまったため、redmine-ui で公開することにしました。
新しいリポジトリはこちらです。⭐ください。
開発・テスト環境のアップデート
開発・テスト環境を以下の通り更新しました(JavaScriptでの開発はこれが大変で燃え尽きている人多いんじゃないだろうか)。
- パッケージ管理ツールとして yarn 1.0系のかわりに npm を使用。
- バンドルツール rollup のバージョンを4に更新。
- scssではなくcssを利用(scssが必要なほど規模が大きくなかった)。
- テストツールの組み合わせを変更。
- karma (ブラウザでテストを実行するためのツール) は開発が終了してしまったので、web-test-runner に移行。
- puppeteer は、Docker で動かすのが困難なため playwright に移行 。
- jasmineで書かれていたテストをmocha に移行(web-test-runnerとの連携のため)。ちなみにmochaは、しばらくの間開発が滞っていたようですが、開発体制が刷新され現在は組織が活性化しているようです。めでたい。
- テスト実行に、dagger を使いました。dockerイメージの取得からテストの実行までを yaml ではなく typescriptで記述できるというツールです。しかもその設定が、Github Actions でも使いまわせるのでローカルとクラウドでテスト環境をそろえるのが簡単になります。
Github Actions の活用
- 従来、Tribute はソースコードとともにビルド結果もgitのリポジトリにコミットしていました。結果としてコミットの順序を入れ替えるなどの操作をした場合、ソースコードの変更箇所が独立していた場合でもビルド結果の変更の影響で簡単にコンフリクトが発生する状況でした。
- 「リポジトリをクローンするだけで手軽にライブラリを使える」という意図だと思うんですが結果としてプルリクをマージするのが大変になっていたのではないかと思います。
- このため、今バージョンから生成物は Github Actions で生成してリリースページに貼り付けるようにしました。
プルリクエストの取込み
本家では、プルリクエストが滞留していました。プルリクエストを取り込んでいるフォークもあったのですが、コミットのauthorが変わってしまっていました。
できるだけ元のauthorを尊重しつつ、プルリクエストを取り込みました。
以下、主な修正です。
#454 バックスペースで文字を消去したときにメニューが復活するようになった
#351 スクロール時にメニューを閉じる機能の追加
#832 メニューのスクロールバーをクリックするとエラーが発生する不具合の修正
今後
- playwright のDockerイメージとnpmパッケージが合致しないことがあります。合致させてるはずなんだが。今後も調査を続ける予定。
- 折角なんでもっと宣伝したい。
Raphaël
- JavaScript で SVG画像を生成するためのライブラリです。
- 簡単にSVGを表示できる上にSVGではなくVMLという規格をサポートしていた過去の Internet Explorer でも同様の画像を表示できる、というのが特徴です。
- Redmineでは、ガントチャートやバージョン管理システムのコミットツリーを表示するために使われています。最終リリースは2019年8月。
- ただ API は異なるため、Tribute と同じように Raphael を使い続ける前提で更新作業を続けました。しかし……。
調べた結果
- よくよく Redmine での Raphaël の利用状況を見てみると、そんな複雑な処理はしていませんでした。
- アニメーションを表示するわけでもないし、IEのサポートを取り止めた今となっては外部ライブラリ要らないのでは?
- というわけで、ライブラリなし、素の JavaScript のみでガントチャートとコミットグラフを表示するようにしたら普通にできました(パッチ投稿予定)。
- webpack の設定の修正とかいろいろやってたんですけどねー。
Chart.js
プロジェクトの詳細画面などでグラフを表示するために使用しています。開発は活発なので今後もあまり心配することはないでしょう。
jQuery/jQueryUI
最後に大物、jQueryとjQueryUIです。jQuery は JavaScriptによるWebサイト制作をより簡単に行うためのライブラリ、jQueryUI は、jQUeryをベースにWebサイトでよく使用するであろうツールやエフェクトを提供するライブラリです。
Redmine ではどちらもよく使われていますが、現況という点では大きく違います。
jQuery は次期メジャーバージョンアップに向けて開発が進んでいますが、jQueryUI は2021年に"メンテナンスモード"に入っています。
このため、Redmine の中で jQueryUI を使用している部分をどうしていくか、という点を考えないといけないわけですが、さすがにこのライブラリの開発を個人で引き受けるのは無理があるため、jQuery抜きの JavaScript で何とかならないかを考えることとなります。
脱jQuery はまだまだ先が長いですが、脱jQueryUI は一応手元で試してみました。パッチにして15個。ただこれもまだまだテストが足りません。先は長いです。
おわりに
いつまでも、あると思うな、親とOSSの依存ライブラリ
Discussion