アカベコマイリ

HEAR NOTHING SEE NOTHING SAY NOTHING

Redmine テーマ minimalflat2 v1.8.0 リリース

Redmine テーマ minimalflat2 v1.8.0 をリリース。職場 Redmine を v4.2.2 へ更新して本格利用することとなり、目についた不具合の修正などをおこなった。

開発にあたり遭遇した問題などを記録したいので記事にしておく。

GitHub ブランチ管理の変更

これまで minimalflat2 のブランチは master/develop を運用していた。git-flow を簡略化した

  1. 開発中の commit/push は develop を対象とする
  2. develop がリリース可能となったら master へ merge
  3. merge 地点にバージョンの tag を付けてリリース

という感じになる。

他のプロジェクトもだいたい似たような運用にしてきた。しかし vivliostyle/vfm を担当するようになって master のみ + PR を経験した結果、GitHub の PR 前提にはなるが小規模なプロジェクトならこちらの方がよいと実感。第三者からの PR も master に対して来るため、GitHub のメインをこちらにしているなら master だけのほうが develop への誘導・整合を考慮しなくて済む。

以上を踏まえ自作 OSS を少しずつ master のみ構成へ移行している。minimalflat2 もその一つで今回の v1.8.0 は新運用で開発したはじめてのバージョンとなった。

Docker Image の MySQL 更新

かつて minimalflat2 の動作検証は Vagrant とそこで稼働する Redmine を Web ブラウザーで表示した HTML を保存したもので実施していた。運用としては本番相当を Vagrant、これの起動が重いので簡単な検証は HTML という感じ。しかし Docker の動作が軽いため、現在はこれに一本化している。

というわけで Docker (with Compose) に関する変更の話。

職場 Redmine v4.2.2 へ移行するにあたり MySQL を v8 系とした。そのため minimalflat2 を動作検証するための Docker 環境も MySQL を同等にしたい。というわけでこれらの Docker Image バージョンを更新してみた。

services:
  redmine:
    container_name: redmine_minimalflat2
    image: redmine:4.2.2-passenger
  mysql:
    container_name: mysql_minimalflat2
    image: mysql:8.0

そして docker-compose up -d を実行したのだが Redmine を起動できていない。Docker Desktop 上の表示をみると再起動を延々と繰り返していた。ログを見ると MySQL の参照に失敗しているようだ。

Mysql2::Error: RSA Encryption not supported - caching_sha2_password plugin was built with GnuTLS support

MySQL v8 から認証方式が変更されたとのこと。よって起動時のオプションに mysql_native_password を追加する。

  mysql:
    container_name: mysql_minimalflat2
    image: mysql:8.0
    command: mysqld --default-authentication-plugin=mysql_native_password --character-set-server=utf8mb4 --collation-server=utf8mb4_bin

ついでに不要な Image、Container、Volume を一掃しておく。

$ docker container rm -f $(docker container ls -aq)
$ docker image rm -f $(docker image ls -q)
$ docker volume rm $(docker volume ls -qf dangling=true)

Docker 環境がクリーンとなったので改めて docker-compose up -d したら起動に成功。変更点と docker-compose.yml の全体像は以下の PR を参照のこと。

jstoolbar.css

Redmine v4.2 + minimalflat2 v1.7 の組み合わせだとチケットや Wiki のエディターにあるツールバーの色がおかしくなる。開発環境だと発生しないので気づかなかったが、それはプロジェクトの src/assets/stylesheets/ に配置していた jstoolbar.css が古いためであった。これを削除して Redmine v4.2 の最新が読み込まれるようにしたら現象を再現できた。

調べてみると jstoolbar.css にこんな定義があった。

.jstElements button {
    margin-right: 2px;
    width : 24px;
    height: 24px;
    padding: 4px;
    border-style: solid;
    border-width: 1px;
    border-color: #ddd;
    background-color : #f7f7f7;
    background-position : 50% 50%;
    background-repeat: no-repeat;
    cursor:pointer;
    opacity:0.7;
}

問題は opacity:0.7 である。この透過指定によって淡色表示されてしまうのだ。minimalflat2 としては JSToolbar.scss で jstoolbar.css の定義を !important により上書きしている。このファイルは App.scss に読み込まれて application.css として出力されるため、これより後に読み込まれる jstoolbar.css へ優先するために !important という非常にマナーの悪い方法を採用しなければならない。

なので今回も JSToolbar.scss で

.jstElements button {
  opacity: 1 !important;
}

とすることで対応した。なおこの修正ついでに !important を止められないものかと application.css に読ませず jstoolbar.css として出力してみたのだが Redmine には認識されなかった。テーマとして個別に読み込むのは v4.2.2 でも application.css と responsive.css だけのようだ。残念。

アイコン フォント

Redmine ではプロジェクトをブックマークする機能があって、その左にアイコンを表示している。しかし minimalflat2 で置き換えたものはアイコン フォントのユニコード値がアドレス外を指してていて、表示できていなかった。

どうやら過去には開発環境で存在していたのだけど、Git にコミットされたフォントへの反映が漏れていたようだ。開発に使用している PC を買い替えた際、これに気付かず Git リポジトリーで環境が完結していると思いこんでいた。

問題はもう一つある。アイコン フォントは IcoMoon で生成している。ここで公開されている Free のものの不足を自作 SVG で補った状態でフォント化していた。IcoMoon はアカウント未登録でも最大 3 プロジェクトまで利用可能なため minimalflat2 用のフォントもその中でやりくりしていたのだが、この方法だとデータの記録方法が localStorage + IndexedDB になる。

つまり Web ブラウザーを変えたりサイトのキャッシュ抹消によってデータが失われてしまうのだ。前述のように PC 環境を移行したため、こちらもなくなった。

まだ前の PC は残っているからその気になれば復元は可能。ただし面倒なのでやめておく。minimalflat2 としては現在のアイコン フォント範疇のみで対応する予定。プロジェクトのブックマーク アイコンは他のお気に入り機能で利用していた星マークのものを割り当てた。

新テーマを作成することになったら IcoMoon にアカウント作成して永続化を検討するか、Git リポジトリー内でフォントをビルドするための素材を管理する予定。昔、アイコン フォント生成を手元で実行するために fontforge と grunt-webfont なんかを組み合わせた運用を試みた記憶がある。この時は確か npm だけで完結しないのと成果物の縦位置がおかしくなる問題が解決できなくて断念したのだよね。もし npm 完結でうまく動くのがあれば再挑戦してみたい。

まとめ

調べたらこのテーマを扱った記事は 2017 の v1.3.5 以来となる。いちおう細々と開発は続けていて動作検証の環境を Docker 化したとか大きな変化もあったのに記事として書くのを怠っていた。小ネタでも意外に後で読み返したくなるものだからブログに書いておくのは重要だ。

今後の開発予定について。

まだ気づいていない問題や改善点がありそうなので、直近としては minimalflat2 v1.8 系の更新を続けるかもしれない。ただし minimalflat2 は Redmine v4 系までとして v5 系は新テーマを開発したいと考えている。

理由としては Redmine 本体の表示まわりに大きな変更がありそうなこと。v4 系で見送られたアイコン フォント対応が v5 系で導入予定なのだ。

minimalflat2 を開発する動機のひとつが正にこれで、アイコンを解像度に依存しないベクター画像にしたかった。これが標準で叶うならテーマの作りも大きく変わる。他にも v5 系は表示関連で変更がありそうと聞く。

以上を踏まえ v5 系のために別テーマを構想している。あと redmine.tokyo 20 感想にも書いたが新型コロナウイルス陽性者情報(非公式)の外観に刺激を受けてゼロからテーマを作りたい気持ちも強い。ならば Redmine v5 は節目としてちょうどよく、楽しみである。